/* ==========================================================================
   Festival Trading — Engineering Solutions
   Design tokens: Deep Navy + Signal Amber, blueprint-grid industrial motif
   ========================================================================== */

:root{
  --navy-950:#050e1f;
  --navy-900:#0a1f3d;
  --navy-800:#0f2c54;
  --navy-700:#153a6b;
  --blue-600:#1c56a3;
  --blue-500:#2568c4;
  --amber-600:#e2790a;
  --amber-500:#f7941d;
  --amber-400:#ffab3d;
  --amber-100:#fff2df;
  --steel-50:#f6f8fb;
  --steel-100:#eef1f6;
  --steel-200:#e2e8f0;
  --steel-400:#94a3b8;
  --steel-600:#5b6b82;
  --ink:#0d1b2e;
  --white:#ffffff;
}

*{scroll-behavior:smooth;}

html,body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
}

h1,h2,h3,h4,.font-display{
  font-family:'Oswald',ui-sans-serif,sans-serif;
  letter-spacing:0.01em;
  text-transform:none;
}

.font-mono-data{
  font-family:'JetBrains Mono',ui-monospace,monospace;
}

.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:0.72rem;
  font-weight:600;
}

/* ---------- Blueprint grid backdrop ---------- */
.blueprint-grid{
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:38px 38px;
}
.blueprint-grid-dark{
  background-image:
    linear-gradient(rgba(11,31,61,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,61,0.06) 1px, transparent 1px);
  background-size:38px 38px;
}

/* ---------- Diagonal panel divider (poster-inspired) ---------- */
.diagonal-cut-right{
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.diagonal-cut-left{
  clip-path:polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}
.notch-corner{
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

/* ---------- Header ---------- */
.site-header{
  background:var(--navy-900);
  border-bottom:3px solid var(--amber-500);
}
.nav-link{
  position:relative;
  color:#cfd9ea;
  font-weight:500;
  font-size:0.95rem;
  transition:color .2s ease;
}
.nav-link:hover, .nav-link.active{color:var(--white);}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  width:0;height:2px;
  background:var(--amber-500);
  transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

/* ---------- Buttons ---------- */
.btn-amber{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--amber-500);
  color:var(--navy-950);
  font-weight:700;
  padding:.85rem 1.6rem;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:background .2s ease, transform .2s ease;
}
.btn-amber:hover{background:var(--amber-400); transform:translateY(-2px);}

.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid rgba(255,255,255,0.5);
  color:var(--white);
  font-weight:600;
  padding:.8rem 1.5rem;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:all .2s ease;
}
.btn-outline:hover{border-color:var(--amber-500); background:rgba(255,255,255,0.06);}

.btn-navy{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--navy-900);
  color:var(--white);
  font-weight:700;
  padding:.85rem 1.6rem;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:background .2s ease, transform .2s ease;
}
.btn-navy:hover{background:var(--navy-700); transform:translateY(-2px);}

/* ---------- Brochure download button (special CTA) ---------- */
.btn-brochure{
  display:inline-flex;align-items:center;gap:.65rem;
  background:var(--navy-950);
  color:var(--white);
  font-weight:700;
  font-size:1rem;
  padding:1.05rem 2.1rem;
  clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow:0 0 0 0 rgba(5,14,31,0.55);
  animation:brochure-pulse 2.4s ease-in-out infinite;
  transition:transform .2s ease, background .2s ease;
  border:2px solid var(--navy-950);
}
.btn-brochure:hover{
  background:var(--white);
  color:var(--navy-950);
  transform:translateY(-3px) scale(1.02);
  animation-play-state:paused;
}
.btn-brochure i{color:var(--amber-400); transition:color .2s ease;}
.btn-brochure:hover i{color:var(--amber-600);}
@keyframes brochure-pulse{
  0%{box-shadow:0 0 0 0 rgba(5,14,31,0.45);}
  70%{box-shadow:0 0 0 14px rgba(5,14,31,0);}
  100%{box-shadow:0 0 0 0 rgba(5,14,31,0);}
}

/* ---------- Spec Plate card (signature component) ----------
   Styled like an equipment ID nameplate: numbered tab, rivet corners,
   mono spec rows. Echoes the numbered catalogue sheets in the PDF. */
.spec-plate{
  position:relative;
  background:var(--white);
  border:1px solid var(--steel-200);
  border-top:4px solid var(--navy-900);
  padding:1.75rem 1.5rem 1.5rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.spec-plate:hover{
  border-top-color:var(--amber-500);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(10,31,61,0.35);
}
.spec-plate .tab-index{
  position:absolute;
  top:-1px; right:1.4rem;
  background:var(--navy-900);
  color:var(--amber-400);
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  font-weight:700;
  padding:.3rem .6rem;
  letter-spacing:.08em;
}
.spec-plate .rivet{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--steel-400);
  opacity:.55;
}

/* ---------- Stat block ---------- */
.stat-num{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:2.6rem;
  color:var(--navy-900);
  line-height:1;
}

/* ---------- Accordion (FAQ) ---------- */
.faq-item{border-bottom:1px solid var(--steel-200);}
.faq-question{
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.35rem .25rem;
  font-weight:600;
  font-size:1.05rem;
  color:var(--navy-900);
}
.faq-icon{transition:transform .3s ease; flex-shrink:0; color:var(--amber-500);}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  color:var(--steel-600);
  padding:0 .25rem;
}
.faq-item.open .faq-answer{padding-bottom:1.35rem;}

/* ---------- Portfolio filter ---------- */
.filter-btn{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.55rem 1.1rem;
  border:1px solid var(--steel-200);
  color:var(--steel-600);
  transition:all .2s ease;
}
.filter-btn.active, .filter-btn:hover{
  background:var(--navy-900);
  color:var(--white);
  border-color:var(--navy-900);
}
.portfolio-card{display:block;}
.portfolio-card.hide{display:none;}

/* ---------- Section label ---------- */
.section-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--amber-600);
}
.section-tag::before{
  content:"";
  width:28px;height:2px;
  background:var(--amber-500);
  display:inline-block;
}

/* ---------- Marquee strip ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Mobile menu ---------- */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
#mobile-menu.open{max-height:600px;}

/* ---------- Utility ---------- */
.text-amber{color:var(--amber-500);}
.bg-navy{background:var(--navy-900);}
.bg-navy-950{background:var(--navy-950);}
.hairline{border-color:var(--steel-200);}

::selection{background:var(--amber-500); color:var(--navy-950);}

img{max-width:100%;height:auto;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}