/* ================= v3: deck-matched palette, type, depth ================= */
  :root{
    --navy:#1D49A6; --navy-deep:#10305F; --navy-ink:#0B2144;
    --gold:#CBA45C; --gold-bright:#DBB465; --gold-ink:#A9822F;
    --cream:#EFEAE0; --sand:#DAD3C1; --line:#D8D2C4;
    --ink:#2C2E35; --slate:#4A4D55; --muted:#6E6A62;
  }
  body{letter-spacing:.002em}
  .cond{font-family:"Saira Condensed",sans-serif}
  .eyebrow{font-size:13px; letter-spacing:.24em; font-weight:600}
  .sec-cream .eyebrow, .sec-white .eyebrow{color:var(--gold-ink)}
  h1.display{letter-spacing:.004em; font-weight:800}
  .lede{font-weight:400}
  h2.head{letter-spacing:.006em}
  .rule{background:linear-gradient(90deg,var(--gold-bright),rgba(203,164,92,.15))}

  /* buttons — flat, precise, no glow */
  .btn{font-size:17px; letter-spacing:.12em; border-radius:0; padding:17px 32px; transition:background .2s ease,color .2s ease,border-color .2s ease}
  .btn-gold{background:var(--gold-bright); color:#20242B; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .btn-gold:hover{background:#EBD7A6; color:#1B1F26}
  .btn-navy{background:var(--navy-deep); color:#fff}
  .btn-navy:hover{background:var(--navy); color:#fff}
  .btn-outline{background:transparent; color:#F3EFE6; box-shadow:inset 0 0 0 1px rgba(219,180,101,.55)}
  .btn-outline:hover{background:rgba(219,180,101,.12); color:#fff}

  /* ================= nav ================= */
  nav.top{
    position:sticky; top:0; z-index:60;
    background:linear-gradient(180deg,#0C2450 0%,#10305F 100%);
    border-bottom:none; box-shadow:none;
    transition:box-shadow .3s ease;
  }
  nav.top:after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(219,180,101,.32)}
  nav.top .wrap{height:82px; gap:44px; transition:height .3s ease}
  nav.top.scrolled{box-shadow:0 18px 40px -26px rgba(6,16,40,.95)}
  nav.top.scrolled .wrap{height:66px}

  .brand{align-items:center; gap:13px}
  .brand .rider{height:36px; width:auto; transition:height .3s ease}
  .brand .wordmark{height:19px; width:auto; transition:height .3s ease}
  nav.top.scrolled .brand .rider{height:30px}
  nav.top.scrolled .brand .wordmark{height:17px}
  .brand i{display:none}

  .navlinks{gap:34px}
  .navlinks a{font-size:15px; letter-spacing:.14em; color:rgba(240,236,227,.72); border-bottom:none !important; padding:6px 0; position:relative}
  .navlinks a:hover{color:#fff}
  .navlinks a:not(.cta):after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-bright);
    transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .navlinks a:not(.cta):hover:after, .navlinks a.active:not(.cta):after{transform:scaleX(1)}
  .navlinks a.active{color:#fff}
  .navlinks a.cta{
    color:#20242B; background:var(--gold-bright); padding:12px 22px; font-size:15px; letter-spacing:.12em;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); transition:background .2s ease
  }
  .navlinks a.cta:hover{background:#EBD7A6}
  .navlinks a.cta:after{display:none}
  .navlinks a:focus-visible, .navtoggle:focus-visible{outline:2px solid var(--gold-bright); outline-offset:-3px}
  /* mobile menu backdrop — inert until the breakpoint below switches it on */
  .navscrim{display:none}

  /* ================= hero ================= */
  .hero-shell{position:relative; overflow:hidden; background:var(--navy-ink)}
  .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
  .hero-veil{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(96deg, rgba(9,29,66,.96) 0%, rgba(11,33,68,.9) 40%, rgba(20,54,120,.6) 72%, rgba(29,73,166,.42) 100%),
      linear-gradient(180deg, rgba(9,29,66,.55) 0%, rgba(9,29,66,0) 30%, rgba(8,26,58,.85) 100%);
  }
  .hero-grain{
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-inner{position:relative; z-index:3; padding:78px 32px 0; min-height:640px; display:flex; flex-direction:column; justify-content:center}
  .hero-lockup{display:flex; align-items:center; gap:18px; margin-bottom:38px}
  .hero-lockup .rider{height:108px; width:auto}
  .hero-lockup .wordmark{height:46px; width:auto; display:block}
  .hero-lockup .lock-div{width:1px; height:86px; background:linear-gradient(180deg,rgba(219,180,101,0),rgba(219,180,101,.7),rgba(219,180,101,0))}
  .markslot{
    width:56px; height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; text-align:center;
    border:1px dashed rgba(219,180,101,.55); background:rgba(219,180,101,.07);
    font-family:ui-monospace,Menlo,monospace; font-size:8px; line-height:1.25; letter-spacing:.06em;
    text-transform:uppercase; color:rgba(232,214,175,.85);
  }
  .markslot.sm{width:30px; height:30px; font-size:6px}
  .hero-lockup .lock-txt{display:flex; flex-direction:column; line-height:1}
  .hero-lockup .lock-txt span{font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:rgba(240,236,227,.8); margin-top:12px}
  .hero-shell h1.display{color:#fff; font-size:clamp(48px,7.4vw,94px); line-height:.9; margin-bottom:30px; max-width:15ch}
  .hero-shell h1.display em{font-style:normal; color:var(--gold-bright)}
  .hero-shell .lede{color:rgba(243,239,230,.88); font-size:clamp(17px,1.5vw,20px); line-height:1.62; max-width:600px; margin-bottom:42px; font-weight:400}
  .hero-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
  .hero-foot{
    margin-top:70px; border-top:1px solid rgba(219,180,101,.28); padding:22px 0 34px;
    display:flex; align-items:baseline; justify-content:space-between; gap:28px; flex-wrap:wrap;
  }
  .hero-foot .fk{font-family:"Saira Condensed",sans-serif; font-weight:500; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:rgba(240,236,227,.66)}
  .hero-foot .fk b{color:#fff; font-weight:700}

  /* ================= momentum ================= */
  .momentum-shell{background:#0B2144; border-top:1px solid rgba(219,180,101,.3); border-bottom:1px solid rgba(219,180,101,.18)}
  .momentum-shell .momentum{padding:24px 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:center}
  .momentum-shell .momentum .cond{font-size:15px; letter-spacing:.14em; color:var(--gold-bright); font-weight:600; text-align:center; padding:0 18px; border-left:1px solid rgba(219,180,101,.28)}
  .momentum-shell .momentum .cond:first-of-type{border-left:none; text-align:left; padding-left:0}
  .momentum-shell .momentum .cond:last-of-type{text-align:right; padding-right:0}
  .momentum-shell .momentum .mdiv{display:none}
  @media (max-width:900px){
    .momentum-shell .momentum{grid-template-columns:repeat(2,1fr); row-gap:16px}
    .momentum-shell .momentum .cond{text-align:left !important; padding-left:18px}
    .momentum-shell .momentum .cond:nth-of-type(odd){border-left:none; padding-left:0}
  }

  /* interior page heroes, matched */
  .page-hero:after{background:linear-gradient(96deg, rgba(9,29,66,.96) 0%, rgba(11,33,68,.88) 44%, rgba(29,73,166,.5) 100%)}
  .page-hero:before{background-image:repeating-linear-gradient(115deg, rgba(219,180,101,.1) 0 1px, transparent 1px 46px)}
  .page-hero-inner{padding:84px 32px 88px}

  @media (max-width:860px){
    /* ---------- mobile nav ---------- */
    :root{--nav-h:64px}
    nav.top{z-index:70}
    nav.top .wrap, nav.top.scrolled .wrap{height:var(--nav-h); gap:16px}

    /* toggle: three rules that fold into an X while open */
    .navtoggle{
      margin-left:auto; margin-right:-8px; border:none; background:none; padding:0;
      width:46px; height:46px; display:flex; align-items:center; justify-content:center;
      font-size:0; color:transparent; -webkit-tap-highlight-color:transparent;
    }
    .navtoggle .bar, .navtoggle .bar:before, .navtoggle .bar:after{
      display:block; width:24px; height:2px; background:#F0ECE3;
      transition:transform .26s cubic-bezier(.2,.7,.2,1), background .16s ease;
    }
    .navtoggle .bar{position:relative}
    .navtoggle .bar:before{content:""; position:absolute; left:0; top:-7px}
    .navtoggle .bar:after{content:""; position:absolute; left:0; top:7px}
    .navtoggle[aria-expanded="true"] .bar{background:transparent}
    .navtoggle[aria-expanded="true"] .bar:before{transform:translateY(7px) rotate(45deg); background:var(--gold-bright)}
    .navtoggle[aria-expanded="true"] .bar:after{transform:translateY(-7px) rotate(-45deg); background:var(--gold-bright)}

    /* the sheet itself: drops out from under the header, scrolls if it runs long */
    .navlinks{
      position:fixed; top:var(--nav-h); left:0; right:0; bottom:auto; z-index:59;
      flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
      background:linear-gradient(180deg,#0C2450 0%,#10305F 100%);
      border-top:1px solid rgba(219,180,101,.34); border-bottom:none;
      box-shadow:0 30px 60px -28px rgba(4,12,32,.95);
      padding:4px 0 calc(18px + env(safe-area-inset-bottom));
      max-height:calc(100vh - var(--nav-h));
      max-height:calc(100dvh - var(--nav-h));
      overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
      transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease, visibility 0s linear .28s;
    }
    .navlinks.open{transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s,0s,0s}

    /* rows: full-width tap targets with a hairline rule and a gold marker on the current page */
    .navlinks a{
      display:flex; align-items:center; min-height:58px; padding:0 22px;
      padding-left:max(22px, env(safe-area-inset-left)); padding-right:max(22px, env(safe-area-inset-right));
      font-size:17px; letter-spacing:.15em; color:rgba(240,236,227,.86);
      box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
      -webkit-tap-highlight-color:transparent;
    }
    .navlinks a:not(.cta):after{display:none}
    .navlinks a:not(.cta):before{
      content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-bright);
      transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
    }
    .navlinks a.active{color:#fff; background:rgba(219,180,101,.09)}
    .navlinks a.active:not(.cta):before{transform:none}
    .navlinks a:not(.cta):active{background:rgba(255,255,255,.06)}
    .navlinks a.cta{
      margin:16px 22px 2px; justify-content:center; text-align:center;
      min-height:56px; padding:0 24px; font-size:16px; letter-spacing:.14em;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
    }

    /* backdrop + scroll lock for the page behind the sheet */
    .navscrim{
      display:block; position:fixed; inset:0; z-index:55;
      background:rgba(6,16,40,.55);
      -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
      opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
    }
    html.nav-open .navscrim{opacity:1; visibility:visible; transition-delay:0s}
    html.nav-open, html.nav-open body{overflow:hidden}
    .hero-inner{padding:56px 22px 0; min-height:0}
    .hero-lockup{margin-bottom:28px; gap:12px}
    .hero-lockup .rider{height:72px}
    .hero-lockup .wordmark{height:30px}
    .hero-lockup .lock-div{height:60px}
    .brand .rider{height:30px}
    .brand .wordmark{height:16px}
    .hero-foot{margin-top:44px; padding-bottom:28px}
    .page-hero-inner{padding:56px 22px 60px}
  }

  @media (max-width:420px){
    .navlinks a{min-height:54px; font-size:16px; letter-spacing:.13em}
    .navlinks a.cta{min-height:54px; margin:14px 18px 2px}
    .navlinks a{padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right))}
  }

  /* landscape phones: compact the sheet so the CTA still lands above the fold */
  @media (max-width:860px) and (max-height:520px){
    .navlinks{padding-top:0; padding-bottom:calc(10px + env(safe-area-inset-bottom))}
    .navlinks a{min-height:44px; font-size:15px; letter-spacing:.13em}
    .navlinks a.cta{min-height:46px; margin:10px 22px 0; font-size:15px}
  }

  @media (prefers-reduced-motion:reduce){
    .navlinks, .navscrim, .navtoggle .bar,
    .navtoggle .bar:before, .navtoggle .bar:after,
    .navlinks a:not(.cta):before{transition:none}
  }