/* ============================================================
   TRIVUX — Shared Brand System
   Forest green + single gold accent · Bebas Neue / Inter
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Surfaces */
  --green:        #0D2B1E;   /* primary forest */
  --green-deep:   #091B13;   /* editorial / text-heavy */
  --green-line:   #1C4030;   /* hairlines on green */
  --green-raise:  #103626;   /* raised cards */

  /* Accent — the ONLY accent */
  --gold:         #C4963A;
  --gold-soft:    #D8B264;

  /* Ink */
  --white:        #FFFFFF;   /* headlines */
  --cream:        #D4C9B0;   /* body */
  --muted:        #8A9B8E;   /* captions / labels */

  /* Type */
  --display: 'Bebas Neue','DIN Condensed','Oswald',sans-serif;
  --sans:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Rhythm */
  --maxw: 1280px;
  --gutter: clamp(22px, 5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--green);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:var(--green-deep);}

/* ---------- Type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  color:var(--white);
  text-transform:uppercase;
  margin:0;
}
.gold{ color:var(--gold); }
.kicker{
  font-family:var(--sans);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.85em;
  margin:0;
}
.kicker::before{
  content:"";
  width:28px;height:1px;
  background:var(--gold);
  display:inline-block;
  opacity:.8;
}
.kicker.no-tick::before{display:none;}
.lede{
  color:var(--cream);
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.6;
  max-width:54ch;
}
.cap{
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.7em;
  padding:16px 30px;
  border-radius:2px;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn .arw{transition:transform .35s var(--ease);}
.btn:hover .arw{transform:translateX(5px);}
.btn-gold{ background:var(--gold); color:var(--green-deep); }
.btn-gold:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(212,201,176,.32); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-lg{ padding:19px 38px; font-size:15px; }

/* ---------- Wordmark / Logo lockup ---------- */
.wordmark{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:.14em;
  color:var(--white);
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:11px;
}
.wordmark .emblem{ height:30px;width:auto;display:block; }
.wordmark .wm{ display:inline-block; transform:translateY(1px); }
.wordmark .dot{ color:var(--gold); }

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:14px var(--gutter);
  background:rgba(9,27,19,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--green-line);
}
.nav-links{ display:flex;align-items:center;gap:38px; }
.nav-links a{
  font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--cream);
  position:relative;padding:4px 0;transition:color .3s var(--ease);white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--gold);}
.nav-links a.active::after{width:100%;}
.nav-more{position:relative;display:flex;align-items:center;}
.nav-more-btn{background:none;border:none;color:var(--cream);font-size:27px;font-weight:500;line-height:0;cursor:pointer;padding:0 2px;display:grid;place-items:center;font-family:var(--sans);transition:color .25s,transform .3s var(--ease);}
.nav-more:hover .nav-more-btn,.nav-more:focus-within .nav-more-btn{color:var(--gold);transform:rotate(45deg);}
.nav-more.cur .nav-more-btn{color:var(--gold);}
.nav-more-menu{position:absolute;top:calc(100% + 16px);right:0;min-width:210px;background:rgba(9,27,19,.97);backdrop-filter:blur(14px);border:1px solid var(--green-line);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:101;}
.nav-more-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;}
.nav-more:hover .nav-more-menu,.nav-more:focus-within .nav-more-menu{opacity:1;visibility:visible;transform:none;}
.nav-more-menu a{padding:11px 14px;border-radius:3px;font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--cream);transition:background .2s,color .2s;white-space:nowrap;}
.nav-more-menu a::after{display:none;}
.nav-more-menu a:hover{background:var(--green-line);color:var(--gold);}
.nav-right{ display:flex;align-items:center;gap:24px; }
.lang{
  display:flex;align-items:center;gap:2px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);
}
.lang button{
  background:none;border:none;cursor:pointer;color:var(--muted);
  font:inherit;padding:4px 6px;transition:color .25s;
}
.lang button.active{color:var(--white);}
.lang .sep{opacity:.4;}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.nav-burger span{width:24px;height:2px;background:var(--cream);display:block;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--green-deep);
  border-top:1px solid var(--green-line);
  padding:90px var(--gutter) 40px;
}
.foot-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;
}
.foot-grid h4{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 20px;
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.foot-grid a{font-size:14.5px;color:var(--cream);transition:color .25s;}
.foot-grid a:hover{color:var(--gold);}
.foot-blurb{font-size:14.5px;color:var(--muted);max-width:30ch;margin:18px 0 0;line-height:1.6;}
.foot-bar{
  max-width:var(--maxw);margin:64px auto 0;padding-top:24px;
  border-top:1px solid var(--green-line);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);letter-spacing:.04em;
}

/* ---------- Cinematic photo placeholder ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--green-deep);
  background-image:
    radial-gradient(120% 90% at 72% 18%, rgba(196,150,58,.16), transparent 55%),
    radial-gradient(140% 120% at 28% 105%, rgba(20,58,40,.55), transparent 60%),
    linear-gradient(160deg, #143A28 0%, #0B2418 48%, #061008 100%);
  isolation:isolate;
}
.ph::after{ /* vignette (capture-safe, no SVG filter) */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 130% at 50% 38%, transparent 52%, rgba(0,0,0,.5) 100%);
}
.ph::before{ /* fine grain via layered gradients */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 2px);
}
.ph-label{
  position:absolute;left:18px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.ph-label::before{content:"";width:18px;height:1px;background:var(--gold);}
.ph-tick{position:absolute;top:14px;right:14px;width:14px;height:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);opacity:.7;z-index:2;}

/* ---------- Scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}
[data-reveal][data-delay="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------- Section helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.rule{height:1px;background:var(--green-line);border:0;margin:0;}
.eyebrow-num{font-family:var(--display);color:var(--gold);}

/* ---------- Third-party embed frames ---------- */
.embed-frame{position:relative;border:1px solid var(--green-line);border-radius:4px;background:var(--green-deep);overflow:hidden;}
.embed-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);z-index:3;}
.embed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--green-line);}
.embed-head .lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);font-weight:600;display:flex;align-items:center;gap:10px;}
.embed-head .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);}
.embed-head .pwr{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,150,58,.4);padding:5px 10px;border-radius:2px;white-space:nowrap;}
.embed-body{padding:10px;}
.embed-body iframe{width:100%;border:0;display:block;border-radius:3px;}
.embed-note{font-size:12.5px;color:var(--muted);text-align:center;padding:14px 20px;border-top:1px solid var(--green-line);}
.embed-note a{color:var(--gold);font-weight:500;}
.embed-note a:hover{color:var(--gold-soft);}

/* ---------- Responsive chrome ---------- */
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ============================================================
   RESPONSIVE REFINEMENT LAYER — v1.0.33  (added 2026-05-30)
   Sitewide fluid scaling for the top bar + CTA buttons so every
   page reads cleanly on phone, tablet (iPad), and desktop.
   Additive: appended last so it wins the cascade where needed.
   Touches only shared chrome (.nav / .btn / .wordmark) — no
   per-page template edits required.
   ============================================================ */

/* ---- Buttons: fluid sizing so CTAs scale on every viewport ---- */
.btn   { font-size:clamp(12.5px,1.05vw,14px);
         padding:clamp(13px,1.5vw,16px) clamp(20px,2.4vw,30px); }
.btn-lg{ font-size:clamp(13px,1.15vw,15px);
         padding:clamp(15px,1.7vw,19px) clamp(24px,3vw,38px); }

/* ---- Tablet / iPad landscape: keep the bar tidy before the
        burger appears (desktop nav still shows 861–1024px) ---- */
@media (max-width:1024px){
  .nav-links{ gap:26px; }
  .nav-right{ gap:18px; }
}

/* ---- Phones & small tablets (burger is visible at <=860px):
        shrink the wordmark, gaps and the persistent top-bar CTA
        so the menu bar stops feeling oversized ---- */
@media (max-width:860px){
  .nav-right{ gap:14px; }
  .nav .btn{ padding:12px 18px; font-size:12.5px; }
  .wordmark{ font-size:23px; }
  .wordmark .emblem{ height:26px; }
}

@media (max-width:600px){
  .nav            { padding-top:14px; padding-bottom:14px; }
  .nav.scrolled   { padding-top:11px; padding-bottom:11px; }
  .nav-right      { gap:10px; }
  .wordmark       { font-size:20px; gap:8px; }
  .wordmark .emblem{ height:23px; }
  .lang           { font-size:11px; }
  .lang button    { padding:4px 4px; }
  .nav .btn       { padding:10px 14px; font-size:11.5px; letter-spacing:.02em; }
  .btn            { padding:12px 18px; font-size:12.5px; }
  .btn-lg         { padding:13px 20px; font-size:13px; }
}

/* ---- Very small phones: never let a long-label CTA overflow ---- */
@media (max-width:380px){
  .nav .btn{ padding:9px 11px; font-size:11px; }
  .btn, .btn-lg{ white-space:normal; text-align:center; line-height:1.25; }
  .hero-cta .btn, .final-cta .btn,
  .cta-band .row .btn, .final .row .btn{ flex:1 1 100%; justify-content:center; }
}