/* ==========================================================================
   NF IMPEX TRADING · "NAVY & GOLD" design system (site-wide)
   Navy #0B1F3A · Gold #D4AF37 · White #FFFFFF · Mist #F8F9FA · Ink #374151

   One stylesheet serves all 14 pages. Class names are unchanged from the
   previous build on purpose, so every page re-themes without markup edits.
   ========================================================================== */
:root{
  /* --- brand ------------------------------------------------------------ */
  --navy:#0B1F3A;        /* primary · headings, header, footer            */
  --navy-2:#14304F;      /* raised navy · hover, gradients                */
  --navy-3:#081729;      /* deepest navy · footer base                    */
  --gold:#D4AF37;        /* accent · buttons, rules, icons                */
  --gold-2:#BE9A28;      /* gold hover                                    */
  --gold-soft:#FBF6E7;   /* gold at 6% · tints and washes                 */

  /* --- surface ---------------------------------------------------------- */
  --bg:#FFFFFF;          /* page background                               */
  --mist:#F8F9FA;        /* alternating section band                      */
  --ink:#374151;         /* body text                                     */
  --muted:#6B7280;       /* meta text                                     */
  --line:#E5E7EB;        /* hairline                                      */
  --line-soft:#F0F1F3;

  /* on-navy equivalents */
  --on-navy:#F4F6F9;
  --on-navy-mute:#A9B6C7;
  --on-navy-line:rgba(212,175,55,.22);

  /* --- type ------------------------------------------------------------- */
  --disp:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ui:var(--body);

  /* --- metrics ---------------------------------------------------------- */
  --pad:clamp(20px,4vw,72px);
  --hdr:78px;
  --r:14px;              /* card radius   */
  --r-sm:9px;            /* control radius */
  --shadow:0 1px 2px rgba(11,31,58,.04),0 8px 24px -12px rgba(11,31,58,.14);
  --shadow-lg:0 2px 4px rgba(11,31,58,.04),0 22px 48px -20px rgba(11,31,58,.22);

  /* Legacy aliases · older markup still references these */
  --hold:var(--bg); --panel:var(--mist); --bone:var(--ink);
  --steel:var(--muted); --orange:var(--gold);
}

/* ── OCEAN LUXE alternate ───────────────────────────────────────────────────
   The palette sheet in the brief has a tick against "Ocean Luxe" while the
   written spec lists the "Royal Elegance" hexes implemented above. To switch,
   uncomment this block · nothing else in the file needs to change.

:root{
  --navy:#0A2A3A; --navy-2:#12394C; --navy-3:#07202D;
  --bg:#F7FBFF; --mist:#DCE3EB; --ink:#334155; --line:#CFDAE6;
}
   ───────────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;
     font-size:clamp(15.5px,1.02vw,17px);line-height:1.72;overflow-x:hidden;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.lock{overflow:hidden}
::selection{background:var(--gold);color:var(--navy)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
.skip{position:absolute;left:-999px;top:8px;z-index:120;background:var(--gold);color:var(--navy);
  padding:11px 20px;font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm)}
.skip:focus{left:8px}

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);font-weight:700;line-height:1.1;
  letter-spacing:-.012em;overflow-wrap:break-word}
h4{font-family:var(--body);font-weight:600;letter-spacing:0}
em{font-style:normal;color:var(--gold)}

/* small-caps label · replaces the old mono "tag" everywhere */
.tag,.mono{font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--gold);font-weight:700}

/* section label · §number + title + gold hairline */
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,4vw,48px)}
.sec-label::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold) 0,var(--line) 42%,transparent 100%)}
.sec-label .no{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--gold)}

.section{padding:clamp(66px,9vh,124px) var(--pad)}
.section--panel{background:var(--mist)}
.section--navy{background:var(--navy);color:var(--on-navy)}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--navy .tag{color:var(--on-navy-mute)}
.section--navy .sec-label::after{background:linear-gradient(90deg,var(--gold) 0,var(--on-navy-line) 42%,transparent 100%)}
.section h2{font-size:clamp(2rem,4vw,3.35rem);max-width:19ch;margin-bottom:14px}
.section .lead{max-width:640px;color:var(--muted);margin-bottom:clamp(30px,4.5vh,56px)}
.o{color:var(--gold)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--navy);border-radius:var(--r-sm);
  background:transparent;color:var(--navy);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
/* primary · gold with navy text, exactly as specified in the brief */
.btn--orange,.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}
.btn--orange:hover,.btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
/* on dark backgrounds */
/* Secondary buttons on navy surfaces (#menu and .phero are navy too, or a
   secondary button renders navy-on-navy and disappears).
   The exclusion must name BOTH classes: buttons were renamed btn--orange ->
   btn--gold, so :not(.btn--orange) alone stopped excluding the primary and
   was quietly flattening the gold CTA into an outline. */
.on-dark .btn:not(.btn--gold):not(.btn--orange),
.hero .btn:not(.btn--gold):not(.btn--orange),
.cta .btn:not(.btn--gold):not(.btn--orange),
.section--navy .btn:not(.btn--gold):not(.btn--orange),
#menu .btn:not(.btn--gold):not(.btn--orange),
.phero .btn:not(.btn--gold):not(.btn--orange){
  border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}
.on-dark .btn:not(.btn--gold):not(.btn--orange):hover,
.hero .btn:not(.btn--gold):not(.btn--orange):hover,
.cta .btn:not(.btn--gold):not(.btn--orange):hover,
.section--navy .btn:not(.btn--gold):not(.btn--orange):hover,
#menu .btn:not(.btn--gold):not(.btn--orange):hover,
.phero .btn:not(.btn--gold):not(.btn--orange):hover{
  background:#fff;color:var(--navy);border-color:#fff}
.btn .ar{transition:transform .3s}.btn:hover .ar{transform:translateX(5px)}

/* corner brackets on the hero headline */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:15px;height:15px;border:2px solid var(--gold)}
.brk::before{top:-12px;left:-15px;border-right:0;border-bottom:0}
.brk::after{bottom:-12px;right:-15px;border-left:0;border-top:0}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

/* ==========================================================================
   VEIL (home only)
   ========================================================================== */
#veil{position:fixed;inset:0;z-index:100;background:var(--navy);display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:20px;transition:opacity .6s ease,visibility .6s}
#veil.off{opacity:0;visibility:hidden}
#veil .vlogo{height:clamp(64px,11vw,96px);width:auto}
#veil .st{color:var(--on-navy-mute);font-size:.68rem;font-weight:600;letter-spacing:.24em}

/* ==========================================================================
   HEADER · navy bar, gold rule, gold CTA
   ========================================================================== */
header.site{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;height:var(--hdr);padding:0 var(--pad);
  background:var(--navy);border-bottom:1px solid rgba(212,175,55,.28);
  transition:box-shadow .35s ease,height .35s ease}
header.site.solid{box-shadow:0 10px 30px -18px rgba(11,31,58,.6)}

/* Client logo. Header/footer sit on navy, so they use the knockout variants
   (navy artwork lifted to white, gold left untouched). The -compact lockup
   drops the "TRUST | QUALITY | GROWTH" descriptor, which is unreadable at
   header size; the footer has room for the full mark. */
.logo{display:flex;align-items:center;z-index:2;min-width:0}
.logo .lg{height:52px;width:auto;transition:opacity .25s}
.logo:hover .lg{opacity:.85}

.nav-desk{display:flex;align-items:center;gap:clamp(12px,1.9vw,30px)}
.nav-desk a{font-family:var(--ui);font-size:.78rem;font-weight:500;letter-spacing:.045em;
  color:var(--on-navy);transition:color .25s;padding:7px 0;position:relative}
.nav-desk a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-desk a:hover::after{transform:scaleX(1)}
.nav-desk a:hover{color:#fff}
.nav-desk a.on{color:var(--gold)}
.nav-desk a.on::after{transform:scaleX(1)}
.nav-desk .q{background:var(--gold);color:var(--navy);font-weight:700;padding:12px 22px;
  border-radius:var(--r-sm);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;transition:all .25s}
.nav-desk .q::after{display:none}
.nav-desk .q:hover{background:#fff;color:var(--navy);transform:translateY(-1px)}
.nav-desk .q.on{background:#fff;color:var(--navy)}

#burger{display:none;z-index:95;background:transparent;border:1px solid rgba(212,175,55,.45);
  border-radius:var(--r-sm);width:46px;height:46px;cursor:pointer;position:relative}
#burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--gold);
  border-radius:2px;transition:all .3s}
#burger span:nth-child(1){top:16px}#burger span:nth-child(2){top:27px}
#burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}

#menu{position:fixed;inset:0;z-index:90;background:var(--navy);display:flex;flex-direction:column;
  justify-content:flex-start;padding:100px var(--pad) 44px;opacity:0;visibility:hidden;
  transition:opacity .35s,visibility .35s;overflow-y:auto;-webkit-overflow-scrolling:touch}
#menu.open{opacity:1;visibility:visible}
@supports (justify-content:safe center){#menu{justify-content:safe center}}
/* The burger lives inside header.site (z-index 80) and the menu overlays it at
   z-index 90, so the burger is unreachable once the menu is open. The panel
   carries its own close control instead, sat exactly where the burger was. */
#menuClose{position:absolute;top:16px;right:var(--pad);width:46px;height:46px;z-index:3;
  background:transparent;border:1px solid rgba(212,175,55,.45);border-radius:var(--r-sm);
  cursor:pointer;transition:background .25s,border-color .25s}
#menuClose::before,#menuClose::after{content:"";position:absolute;left:11px;right:11px;top:21px;
  height:2px;background:var(--gold);border-radius:2px}
#menuClose::before{transform:rotate(45deg)}
#menuClose::after{transform:rotate(-45deg)}
#menuClose:hover{background:rgba(212,175,55,.14);border-color:var(--gold)}
#menuClose span{display:none}
#menu a.big{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,7vw,3rem);
  line-height:1.3;color:#fff;display:flex;align-items:baseline;gap:16px;padding:7px 0;
  border-bottom:1px solid rgba(212,175,55,.16)}
#menu a.big small{font-family:var(--ui);font-size:.66rem;font-weight:600;color:var(--gold);letter-spacing:.1em}
#menu a.big:hover{color:var(--gold)}
#menu .m-sub{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
#menu .m-sub a{font-size:.74rem;font-weight:500;letter-spacing:.08em;color:var(--on-navy-mute)}
#menu .m-sub a:hover{color:var(--gold)}
#menu .m-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px}
#menu .m-lines{margin-top:24px;font-size:.8rem;color:var(--on-navy-mute);line-height:2.1}
#menu .m-lines a{color:#fff}
#menu .m-lines a:hover{color:var(--gold)}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.phero{padding:calc(var(--hdr) + clamp(46px,7vh,88px)) var(--pad) clamp(40px,6vh,74px);
  position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) 22%,transparent 60%)}
.phero h1{color:#fff;font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:17ch}
.phero p{max-width:660px;margin-top:18px;color:var(--on-navy-mute);font-size:clamp(.98rem,1.1vw,1.08rem)}
.phero .crumbs{font-family:var(--ui);font-size:.72rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-navy-mute);margin-bottom:20px;display:block}
.phero .crumbs a:hover{color:var(--gold)}
.phero .crumbs b{color:var(--gold);font-weight:600}
.phero .ref{position:absolute;right:var(--pad);bottom:20px;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.2em;color:rgba(255,255,255,.28);text-transform:uppercase}

/* ---- article hero backed by the guide's own artwork --------------------- */
.phero--art{padding-top:calc(var(--hdr) + clamp(58px,9vh,110px));
  padding-bottom:clamp(50px,8vh,92px)}
/* Each guide's artwork sets its own headline and icon strip, at a different
   height in every image, so no crop hides them all. A light blur does: it
   keeps the colour and texture of the photograph while making any lettering
   in it unreadable, so only the page's own title is legible. The slight
   scale-up hides the soft edges blur leaves at the boundary. */
.phero--art .phero__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;z-index:0;
  filter:blur(5px) saturate(1.08);transform:scale(1.06)}
/* heavy navy scrim so the backdrop stays a backdrop */
.phero--art::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,31,58,.93) 0%,rgba(11,31,58,.86) 45%,rgba(8,23,41,.96) 100%)}
.phero--art::after{z-index:3}
.phero--art .crumbs,.phero--art h1,.phero--art p,.phero--art .ref{position:relative;z-index:2}
.phero--art h1{max-width:20ch;text-shadow:0 3px 24px rgba(0,0,0,.45)}

/* two-column inner hero: copy left, docket right */
.phero--split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.phero--split .phero__main{min-width:0}
.phero--split h1{max-width:15ch}
.phero__aside{min-width:0}

/* ==========================================================================
   HOME HERO · full-bleed film
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--navy) url("../../images/hero-poster.jpg") center/cover no-repeat}
@media(max-width:760px){
  .hero{background-image:url("../../images/hero-poster-vertical.jpg"),url("../../images/hero-poster.jpg");
        background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,31,58,.72) 0%,rgba(11,31,58,.38) 40%,rgba(8,23,41,.94) 100%)}
.hero__in{position:relative;z-index:2;width:100%;
  padding:calc(var(--hdr) + clamp(14px,3vh,34px)) var(--pad) clamp(26px,4vh,58px)}
.hero .tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(12px,2vh,22px);
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(212,175,55,.4);
  padding:8px 16px;border-radius:100px;backdrop-filter:blur(6px)}
.hero .tag b{color:var(--gold)}
.hero h1{color:#fff;font-size:clamp(2.5rem,min(6.6vw,9.4vh),5.6rem);max-width:16ch;
  text-shadow:0 4px 30px rgba(0,0,0,.42)}
.hero h1 .row2{color:var(--gold);display:block}
.hero p{max-width:600px;margin:clamp(14px,2.4vh,26px) 0 clamp(20px,3vh,34px);color:#E6EBF2;
  font-size:clamp(.98rem,1.1vw,1.1rem);text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* stat strip */
.hero__manifest{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(26px,4vh,50px);
  background:rgba(8,23,41,.55);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.3);
  border-radius:var(--r);overflow:hidden}
.hero__manifest div{padding:16px 10px;border-right:1px solid rgba(212,175,55,.18);text-align:center}
.hero__manifest div:last-child{border-right:0}
.hero__manifest b{display:block;font-family:var(--disp);font-weight:700;color:var(--gold);
  font-size:clamp(1.1rem,1.8vw,1.65rem);line-height:1.2}
.hero__manifest span{font-size:.6rem;font-weight:500;letter-spacing:.14em;color:#C7D2E0;text-transform:uppercase}

.cue{position:absolute;right:var(--pad);bottom:clamp(32px,5vh,64px);z-index:3;display:flex;
  align-items:center;gap:10px;font-size:.62rem;font-weight:500;letter-spacing:.22em;color:#C7D2E0;
  text-transform:uppercase;writing-mode:vertical-rl}
.cue i{width:1px;height:44px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--gold);animation:drop 2s ease-in-out infinite}
@keyframes drop{to{top:110%}}

/* The 7-second film reveal · for the last 7s of every loop all hero copy
   clears and the darkening gradient lifts, so the film (which already carries
   the NF Impex mark in-frame) reads entirely on its own. */
.hero__in{transition:opacity .8s ease,visibility .8s}
.hero.film .hero__in{opacity:0;visibility:hidden}
.hero::before{transition:opacity .8s ease}
.hero.film::before{opacity:.3}
.cue{transition:opacity .8s ease}
.hero.film .cue{opacity:0}

@media(prefers-reduced-motion:reduce){
  .hero.film .hero__in{opacity:1;visibility:visible}
  .hero.film::before{opacity:1}
}

/* ==========================================================================
   INTRO (home)
   ========================================================================== */
.intro__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,84px);
  align-items:start;width:100%}
.intro__grid>*{min-width:0}
.intro__grid h2{font-size:clamp(2.1rem,4.4vw,3.6rem);max-width:13ch}
.intro__grid p{color:var(--ink)}
.intro__grid p+p{margin-top:1.05em}
.vals{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.vals span{border:1px solid var(--line);border-radius:100px;padding:9px 20px;font-size:.7rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:var(--mist)}
.vals span b{color:var(--gold);margin-right:7px}

/* ==========================================================================
   PRODUCE CAROUSEL (home §02) · replaces the pinned scroll cinema
   Auto-advances, arrow + dot navigation, product name only.
   ========================================================================== */
.pcar{position:relative}
.pcar__frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);
  box-shadow:var(--shadow-lg);aspect-ratio:16/7}
.pcar__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s,transform 7s linear;transform:scale(1.05)}
.pcar__slide.live{opacity:1;visibility:visible;transform:scale(1.12)}
.pcar__slide img,.pcar__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the clip is held invisible until it can genuinely play, so the poster
   carries the slide instead of a black frame or a half-buffered stall */
.pcar__slide video{opacity:0;transition:opacity .45s ease}
.pcar__slide video.ready{opacity:1}
.pcar__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,58,.5) 0%,rgba(11,31,58,.1) 42%,rgba(8,23,41,.9) 100%)}
/* product name · the only copy on the slide */
.pcar__name{position:absolute;left:clamp(20px,3.4vw,52px);bottom:clamp(58px,8vh,86px);z-index:3;
  display:flex;flex-direction:column;gap:8px}
.pcar__name .ix{font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.pcar__name b{font-family:var(--disp);font-weight:700;color:#fff;line-height:1.05;
  font-size:clamp(1.9rem,5.2vw,4.2rem);text-shadow:0 4px 26px rgba(0,0,0,.45)}
.pcar__name b::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:16px}
/* arrows */
.pcar__nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(212,175,55,.5);background:rgba(8,23,41,.5);
  backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .25s}
.pcar__nav:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.pcar__nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.pcar__nav.pv{left:clamp(12px,1.6vw,22px)}
.pcar__nav.nx{right:clamp(12px,1.6vw,22px)}
/* dots + autoplay progress */
.pcar__dots{position:absolute;left:clamp(20px,3.4vw,52px);right:clamp(20px,3.4vw,52px);
  bottom:clamp(20px,2.6vh,30px);z-index:4;display:flex;gap:10px;align-items:center}
.pcar__dots button{flex:1;height:3px;border:0;padding:0;cursor:pointer;border-radius:3px;
  background:rgba(255,255,255,.28);position:relative;overflow:hidden;
  transition:background .3s}
.pcar__dots button:hover{background:rgba(255,255,255,.5)}
.pcar__dots button .bar{position:absolute;inset:0 100% 0 0;background:var(--gold);transition:none}
.pcar__dots button.live .bar{inset:0 0 0 0;transition:inset var(--dur,6s) linear}
.pcar__dots button.live{background:rgba(212,175,55,.3)}
/* caption row under the frame */
.pcar__foot{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin-top:20px}
.pcar__count{font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.pcar__count b{color:var(--navy)}

/* ==========================================================================
   JOURNEY STEPPER (home §03) · replaces the GSAP pinned timeline
   ========================================================================== */
.jstep__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:clamp(22px,3vh,34px)}
.jstep__tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:18px 16px;
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;
  position:relative;transition:background .25s}
.jstep__tabs button:last-child{border-right:0}
.jstep__tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.jstep__tabs button:hover{background:var(--mist)}
.jstep__tabs button.on{background:var(--gold-soft)}
.jstep__tabs button.on::after{transform:scaleX(1)}
.jstep__tabs .n{font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.jstep__tabs button.on .n{color:var(--gold)}
.jstep__tabs .l{font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.5vw,1.3rem);color:var(--navy)}
.jstep__panels{position:relative}
.jstep__panel{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,58px);align-items:center;animation:fadeUp .55s ease both}
.jstep__panel.on{display:grid}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.jstep__fig{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  background:var(--mist);box-shadow:var(--shadow)}
.jstep__fig img{width:100%;height:100%;object-fit:cover}
.jstep__fig .stamp{position:absolute;left:16px;top:16px;z-index:2;background:var(--gold);
  color:var(--navy);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px}
.jstep__body h3{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:12px}
.jstep__body p{color:var(--ink)}
.jstep__body ul{list-style:none;margin-top:18px}
.jstep__body li{padding:10px 0 10px 30px;position:relative;color:var(--ink);
  border-bottom:1px solid var(--line-soft);font-size:.93rem}
.jstep__body li::before{content:"";position:absolute;left:2px;top:18px;width:12px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.jstep__move{display:flex;gap:10px;margin-top:24px}
.jstep__move button{all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--navy);transition:all .25s}
.jstep__move button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.jstep__move svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
/* progress rail */
.jstep__rail{height:3px;background:var(--line);border-radius:3px;margin-bottom:clamp(20px,3vh,30px);overflow:hidden}
.jstep__rail i{display:block;height:100%;background:var(--gold);width:25%;transition:width .5s ease}

/* ==========================================================================
   WHY PARTNER · icon cards (home §04)
   ========================================================================== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.whycard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.whycard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.whycard:hover::before{transform:scaleY(1)}
.whycard .ic{width:54px;height:54px;border-radius:50%;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .3s}
.whycard:hover .ic{background:var(--gold)}
.whycard .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.whycard:hover .ic svg{stroke:var(--navy)}
.whycard h3{font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:9px}
.whycard p{font-size:.92rem;color:var(--muted);line-height:1.65}
/* on a navy band */
.section--navy .whycard{background:rgba(255,255,255,.04);border-color:rgba(212,175,55,.2)}
.section--navy .whycard p{color:var(--on-navy-mute)}
.section--navy .whycard:hover{background:rgba(255,255,255,.08);border-color:rgba(212,175,55,.45)}

.segs{margin-top:clamp(36px,5vh,60px);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.segs .tag{margin-right:6px}
.segs span:not(.tag){border:1px solid var(--line);background:#fff;border-radius:100px;padding:9px 18px;
  font-size:.72rem;font-weight:500;color:var(--navy)}
.section--navy .segs span:not(.tag){background:rgba(255,255,255,.06);border-color:rgba(212,175,55,.25);color:#fff}

/* legacy ledger table · kept for any page still using it */
.ledger table{width:100%;border-collapse:collapse}
.ledger tr{border-top:1px solid var(--line)}
.ledger tr:last-child{border-bottom:1px solid var(--line)}
.ledger tr:hover{background:var(--mist)}
.ledger td{padding:clamp(16px,2.4vh,26px) 12px;vertical-align:top}
.ledger .n{font-weight:700;font-size:.72rem;color:var(--gold);width:56px;letter-spacing:.1em}
.ledger .t{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.55rem);
  width:34%;color:var(--navy);line-height:1.2}
.ledger .d{color:var(--muted);max-width:660px}

/* ==========================================================================
   ROUTE RAIL + DOC CARDS
   ========================================================================== */
.route__line{position:relative;display:flex;justify-content:space-between;margin:0 2%}
.route__line::before{content:"";position:absolute;left:0;right:0;top:26px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 18px)}
.route__line .ship{position:absolute;top:21px;left:0;width:12px;height:12px;background:var(--gold);
  border-radius:50%;box-shadow:0 0 0 5px rgba(212,175,55,.18);animation:sail 9s linear infinite;z-index:2}
@keyframes sail{0%{left:0}100%{left:99%}}
.rt-node{position:relative;text-align:center;min-width:0;padding-top:0}
.rt-node .flag{display:block;width:54px;height:40px;margin:0 auto 12px;object-fit:contain;padding:5px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;position:relative;z-index:3;
  box-shadow:var(--shadow)}
.rt-node.org .flag{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.14)}
.flag-fb{display:none;font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--navy);
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:12px 10px;margin:0 auto 12px;width:54px}
.rt-node .flag[hidden]+.flag-fb{display:block}
/* icon chip · same footprint as a flag, for rails whose nodes are ports
   rather than destination countries (the location page). Without a chip the
   dotted rail and the sailing marker cut straight through the labels. */
.rt-node .ic{display:flex;align-items:center;justify-content:center;width:54px;height:40px;
  margin:0 auto 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  position:relative;z-index:3;box-shadow:var(--shadow);color:var(--navy)}
.rt-node .ic svg{width:22px;height:22px}
.rt-node.org .ic{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.14)}
.rt-node b{display:block;font-family:var(--disp);font-weight:700;color:var(--navy);
  font-size:clamp(.98rem,1.4vw,1.2rem)}
.rt-node span{font-size:.66rem;font-weight:500;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}

.papers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);
  margin-top:clamp(42px,6vh,74px)}
.paper{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);
  background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s}
.paper:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.paper .ic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.paper .ic svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.paper .pn{font-size:.66rem;font-weight:700;color:var(--gold);letter-spacing:.16em}
.paper h3{font-size:clamp(1.08rem,1.5vw,1.28rem);margin:9px 0 8px}
.paper p{font-size:.9rem;color:var(--muted);line-height:1.62}
.papers--3{grid-template-columns:repeat(3,1fr)}
.section--panel .paper,.section--panel .whycard{background:#fff}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{padding:clamp(80px,12vh,150px) var(--pad);text-align:center;background:var(--navy);
  color:var(--on-navy);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 80% at 50% 0,rgba(212,175,55,.16),transparent 70%)}
.cta>*{position:relative;z-index:1}
.cta .tag{display:inline-block;margin-bottom:18px;color:var(--on-navy-mute)}
.cta .tag b{color:var(--gold)}
.cta h2{color:#fff;font-size:clamp(2.2rem,5.6vw,4.6rem);max-width:16ch;margin:0 auto}
.cta p{max-width:600px;margin:22px auto 36px;color:var(--on-navy-mute)}
.cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .lines{margin-top:42px;display:flex;gap:clamp(16px,4vw,56px);justify-content:center;flex-wrap:wrap;
  font-size:.82rem;color:var(--on-navy-mute)}
.cta .lines a{color:#fff}.cta .lines a:hover{color:var(--gold)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site{background:var(--navy-3);color:var(--on-navy);padding:clamp(48px,7vh,78px) var(--pad) 32px;
  border-top:3px solid var(--gold)}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(24px,4vw,56px)}
.ft h4{font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin-bottom:16px}
.ft p,.ft li{font-size:.9rem;color:var(--on-navy-mute)}
.ft ul{list-style:none}.ft li{padding:4px 0}
.ft a:hover{color:var(--gold)}
.ft .flogo{margin-bottom:16px}
.ft .flogo a{display:inline-block;transition:opacity .25s}
.ft .flogo a:hover{opacity:.85}
.ft .flogo .lg{height:82px;width:auto;max-width:100%}
/* social row · hrefs point home until the real profiles are live */
.social{list-style:none;display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,175,55,.32);color:var(--on-navy-mute);transition:all .25s}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}
.ft .slogan{font-size:.62rem;font-weight:600;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin:0 0 16px}
.legal{margin-top:42px;padding-top:20px;border-top:1px solid rgba(212,175,55,.2);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--on-navy-mute)}
.legal a:hover{color:var(--gold)}

.wa{position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6);transition:transform .3s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:26px;height:26px;fill:#fff}

/* ==========================================================================
   CATALOGUE
   ========================================================================== */
.cat-jump{display:flex;flex-wrap:wrap;gap:9px;padding:18px var(--pad);
  border-bottom:1px solid var(--line);position:sticky;top:var(--hdr);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);z-index:40}
.cat-jump a{border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:.72rem;
  font-weight:600;color:var(--navy);transition:all .25s;background:#fff}
.cat-jump a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.cat-block{padding:clamp(52px,7vh,90px) var(--pad) 0}
.cat-block:last-of-type{padding-bottom:clamp(60px,9vh,110px)}
.cat-block:nth-of-type(even){background:var(--mist)}
.cat-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cat-head h2{font-size:clamp(1.8rem,3.8vw,2.9rem)}
.cat-intro{max-width:780px;color:var(--muted);margin-bottom:clamp(24px,3.5vh,40px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:clamp(14px,1.7vw,20px)}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;
  flex-direction:column;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.pcard .ph{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--mist)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover .ph img{transform:scale(1.06)}
.pcard .bd{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard h3{font-size:1.22rem}
.pcard .sh{font-size:.87rem;color:var(--muted);line-height:1.55;flex:1}
.pcard .av{font-size:.66rem;font-weight:600;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.pcard .row{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.pcard .row a{flex:1;text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.06em;
  padding:11px 6px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--navy);transition:all .25s}
.pcard .row a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pcard .row a.en{border-color:var(--gold);background:var(--gold);color:var(--navy);font-weight:700}
.pcard .row a.en:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}

/* ==========================================================================
   PRODUCT DETAIL · images only, process + trust icons
   ========================================================================== */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);
  align-items:start;padding:clamp(40px,6vh,80px) var(--pad)}
.pd__media{position:sticky;top:calc(var(--hdr) + 22px)}
.pd__media .frame{border:1px solid var(--line);border-radius:var(--r);background:var(--mist);
  position:relative;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow)}
.pd__media img{width:100%;height:100%;object-fit:cover}
.pd__media .cap{padding:13px 18px;border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);margin-top:-1px;font-size:.7rem;font-weight:600;
  letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;
  justify-content:space-between;gap:10px;background:#fff}
.pd .cat-link{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.pd h2{font-size:clamp(1.3rem,2.1vw,1.6rem);margin:0 0 14px}
.pd .short{color:var(--ink);margin:0 0 26px;font-size:1.04rem}
.pd .feats{list-style:none;margin-bottom:30px}
.pd .feats li{padding:11px 0 11px 30px;position:relative;color:var(--ink);
  border-bottom:1px solid var(--line-soft);font-size:.93rem}
.pd .feats li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.spec{width:100%;border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;
  border-spacing:0;font-size:.86rem;margin-bottom:28px;overflow:hidden;background:#fff}
.spec caption{text-align:left;padding:14px 18px;background:var(--navy);color:#fff;
  font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.spec td{border-top:1px solid var(--line);padding:12px 18px}
.spec tr:first-child td{border-top:0}
.spec td:first-child{color:var(--muted);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;width:40%;background:var(--mist)}
.spec td:last-child{font-weight:500;color:var(--navy)}
.pd .actions{display:flex;gap:12px;flex-wrap:wrap}

/* process strip · how this line is handled */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px);
  margin:0 0 30px}
.proc .st{text-align:center;padding:18px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .3s,transform .3s}
.proc .st:hover{border-color:var(--gold);transform:translateY(-2px)}
.proc .st .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:50%;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center}
.proc .st .ic svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.proc .st b{display:block;font-family:var(--ui);font-size:.72rem;font-weight:700;color:var(--navy);
  letter-spacing:.04em}
.proc .st span{display:block;font-size:.66rem;color:var(--muted);margin-top:3px}

/* trust badges */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;
  padding:clamp(22px,3vw,32px);background:var(--mist);border-radius:var(--r);
  border:1px solid var(--line);margin-bottom:28px}
.trust .tr{display:flex;align-items:center;gap:11px}
.trust .tr svg{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.trust .tr b{display:block;font-family:var(--ui);font-size:.78rem;font-weight:700;color:var(--navy);line-height:1.3}
.trust .tr span{display:block;font-size:.7rem;color:var(--muted);line-height:1.3}

.rel{padding:0 var(--pad) clamp(60px,9vh,110px)}
.rel h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:24px}

/* ==========================================================================
   FORMS
   ========================================================================== */
.formwrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(22px,3.4vw,52px);
  align-items:start;padding:clamp(40px,6vh,80px) var(--pad)}
.card{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  overflow:hidden;box-shadow:var(--shadow)}
.card .hd{padding:15px 22px;background:var(--navy);color:#fff;font-family:var(--ui);font-size:.7rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.card .bd{padding:clamp(20px,2.6vw,30px)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);
  margin-right:2px;animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* contact details · icon + label + value rows */
.cinfo{list-style:none;display:grid;gap:20px}
.cinfo li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.cinfo .ic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.cinfo .ic svg{width:21px;height:21px}
.cinfo b{display:block;font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.cinfo div{font-size:.93rem;line-height:1.75;color:var(--ink);min-width:0}
.cinfo a{color:var(--navy);font-weight:500}
.cinfo a:hover{color:var(--gold)}
.cinfo .rg{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:100px;padding:2px 9px;margin-left:4px;vertical-align:1px}

.klist{font-size:.92rem;line-height:1.95}
.klist b{color:var(--gold);font-weight:700;text-transform:uppercase;font-size:.68rem;
  letter-spacing:.14em;display:block;margin-top:16px}
.klist b:first-child{margin-top:0}
.klist a{color:var(--navy);font-weight:500}
.klist a:hover{color:var(--gold)}
form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.field label i{color:var(--gold);font-style:normal}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);font-family:var(--body);font-size:16px;padding:13px 15px;
  transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 49%,var(--navy) 50%),
  linear-gradient(135deg,var(--navy) 50%,transparent 51%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;
  background-repeat:no-repeat;cursor:pointer}
.field textarea{min-height:124px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.16)}
.hp{position:absolute;left:-5000px;opacity:0;height:0;overflow:hidden}
.fnote{font-size:.8rem;color:var(--muted);margin-top:14px}
.alert{display:none;border:1px solid var(--gold);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);background:var(--gold-soft);padding:16px 18px;margin-bottom:18px;
  font-size:.92rem;color:var(--ink)}
.alert.show{display:block}
.alert b{color:var(--navy)}
.alert a{color:var(--navy);text-decoration:underline;font-weight:600}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gfilters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(22px,3.5vh,36px)}
.gfilters button{background:#fff;border:1px solid var(--line);border-radius:100px;color:var(--navy);
  padding:10px 20px;cursor:pointer;font-family:var(--ui);font-size:.72rem;font-weight:600;transition:all .25s}
.gfilters button.on,.gfilters button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.gitem{border:1px solid var(--line);border-radius:var(--r);background:var(--mist);cursor:zoom-in;
  position:relative;overflow:hidden;aspect-ratio:1;padding:0;transition:transform .3s,box-shadow .3s}
.gitem:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gitem:hover img{transform:scale(1.07)}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 13px;font-size:.7rem;
  font-weight:600;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(8,23,41,.88))}
#lb{position:fixed;inset:0;z-index:110;background:rgba(8,23,41,.96);display:none;
  align-items:center;justify-content:center;padding:40px}
#lb.open{display:flex}
#lb img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:var(--r)}
#lb .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:.78rem;
  font-weight:500;letter-spacing:.1em;color:var(--on-navy-mute)}
#lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(212,175,55,.4);
  border-radius:50%;color:#fff;width:50px;height:50px;cursor:pointer;font-size:1.1rem;transition:all .25s}
#lb button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
#lb .x{top:22px;right:22px}
#lb .pv{left:22px;top:50%;transform:translateY(-50%)}
#lb .nx{right:22px;top:50%;transform:translateY(-50%)}

/* ==========================================================================
   BLOG
   ========================================================================== */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2vw,22px)}

/* ---------- blog carousel (home) ----------------------------------------
   Built on native scroll + scroll-snap rather than transforms: it is
   swipeable on touch out of the box, needs no width maths, and the number of
   cards on screen is set purely by the flex-basis below. */
.bcar{position:relative}
/* The negative margin lets cards bleed to the viewport edge while scrolling;
   the padding restores the page gutter. scroll-padding is required too, or
   mandatory snapping aligns each card to the scrollport edge and cancels it. */
.bcar__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 8px;
  scroll-padding-left:var(--pad);scroll-padding-right:var(--pad)}
.bcar__viewport::-webkit-scrollbar{display:none}
.bcar__track{display:flex;gap:clamp(16px,2vw,22px);align-items:stretch}
.bcar__track>.bcard{flex:0 0 calc((100% - 2 * clamp(16px,2vw,22px)) / 3);scroll-snap-align:start}
.bcar__ctl{display:flex;align-items:center;gap:10px;margin-top:clamp(20px,3vh,30px)}
.bcar__ctl .btn{margin-left:auto}
.bcar__nav{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .25s}
.bcar__nav:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bcar__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:960px){
  .bcar__track>.bcard{flex-basis:calc((100% - clamp(16px,2vw,22px)) / 2)}
}
@media(max-width:640px){
  .bcar__track>.bcard{flex-basis:88%}
  .bcar__ctl .btn{width:100%;margin-left:0;order:-1;margin-bottom:4px}
  .bcar__ctl{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){ .bcar__viewport{scroll-behavior:auto} }
.bcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;
  flex-direction:column;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
/* guide artwork is 3:2 with the headline set into the image · cropping it to
   16:9 would clip the title, so the card matches the art */
.bcard .ph{aspect-ratio:3/2;overflow:hidden;background:var(--mist)}
.bcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bcard:hover .ph img{transform:scale(1.05)}
.bcard .bd{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px}
.bcard .meta{font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;display:flex;gap:14px;flex-wrap:wrap}
.bcard .meta b{color:var(--gold);font-weight:700}
.bcard h3{font-size:1.3rem;line-height:1.25}
.bcard p{font-size:.89rem;color:var(--muted);flex:1}
.bcard .go{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--navy)}
.bcard:hover .go{color:var(--gold)}
.art{max-width:800px;margin:0 auto;padding:clamp(40px,6vh,80px) var(--pad)}
.art .meta{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.art .meta b{color:var(--gold);font-weight:700}
.art h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:40px 0 14px}
.art p{color:var(--ink);margin-bottom:1.1em}
.art blockquote{border-left:3px solid var(--gold);padding:16px 24px;margin:26px 0;color:var(--navy);
  font-size:1.06rem;background:var(--gold-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.art .hero-img{border-radius:var(--r);overflow:hidden;margin-bottom:30px;box-shadow:var(--shadow)}
/* shown at the artwork's true proportions · no crop, no forced ratio, so the
   headline set into the image is never cut off */
.art .hero-img img{display:block;width:100%;height:auto}
.faq{margin-top:44px}
.faq h2{margin-top:0}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff;overflow:hidden}
.faq details[open]{border-color:var(--gold)}
.faq summary{cursor:pointer;padding:17px 20px;font-family:var(--disp);font-weight:700;
  font-size:1.05rem;color:var(--navy);list-style:none;position:relative;padding-right:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.3rem;font-family:var(--body)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px;color:var(--muted);font-size:.93rem}

/* ==========================================================================
   INNER-PAGE COMPONENTS
   ========================================================================== */
.plate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,16px)}
.plate{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:clamp(18px,2.2vw,26px)}
.plate .k{font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:8px}
.plate b{font-family:var(--disp);font-weight:700;color:var(--navy);
  font-size:clamp(1.02rem,1.55vw,1.35rem);line-height:1.25}
.plate-grid--3{grid-template-columns:repeat(3,1fr)}

/* docket · framed image + fact rows, reused across inner heroes */
.dock{border:1px solid rgba(212,175,55,.28);border-radius:var(--r);background:rgba(255,255,255,.05);
  position:relative;overflow:hidden}
.dock__img{aspect-ratio:16/10;overflow:hidden;background:var(--navy-2);position:relative}
.dock__img img{width:100%;height:100%;object-fit:cover}
.dock__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,58,.1),rgba(11,31,58,.7))}
/* branded docket · the logo sits over the photo, with a deeper scrim so it
   always has something to read against whatever the image is doing */
.dock__img--brand::after{background:linear-gradient(180deg,rgba(11,31,58,.55),rgba(11,31,58,.8))}
/* specificity has to beat `.dock__img img{width:100%;height:100%;object-fit:cover}` */
.dock__img img.dock__logo{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  z-index:2;width:min(70%,290px);height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.dock__stamp{position:absolute;left:14px;bottom:14px;z-index:2;font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--gold);
  padding:7px 13px;border-radius:100px}
.dock__facts{display:grid;grid-template-columns:auto 1fr;font-size:.8rem;
  border-top:1px solid rgba(212,175,55,.28)}
.dock__facts dt{color:var(--on-navy-mute);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 15px;border-bottom:1px solid rgba(212,175,55,.14)}
.dock__facts dd{text-align:right;padding:11px 15px;color:#fff;font-weight:500;
  border-bottom:1px solid rgba(212,175,55,.14);overflow-wrap:anywhere}
.dock__facts dt:last-of-type,.dock__facts dd:last-of-type{border-bottom:0}
.dock__facts .o{color:var(--gold)}

/* section head: headline left, supporting lead right */
.sec-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,3.6vw,58px);align-items:end;margin-bottom:clamp(30px,4.5vh,52px)}
.sec-split h2{margin-bottom:0;max-width:19ch}
.sec-split .lead{margin-bottom:0;max-width:none}
.sec-split__side{min-width:0}

/* ==========================================================================
   LEADERSHIP · founder + co-founder, mirrored layouts
   ========================================================================== */
/* Portrait column deliberately narrow · with a 4:5 crop the photo lands close
   to the height of the bio beside it instead of towering over it. */
.fdr{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(24px,4vw,60px);align-items:start}
.fdr+.fdr{margin-top:clamp(48px,8vh,96px);padding-top:clamp(48px,8vh,96px);
  border-top:1px solid var(--line)}
/* mirrored block · the portrait moves right, so the column widths swap with it
   or the photo would inherit the wide (bio) column */
.fdr--flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.fdr--flip .fdr__side{order:2}
.fdr__side{min-width:0;position:sticky;top:calc(var(--hdr) + 24px)}
.portrait{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--mist);
  display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow)}
.portrait--tall{aspect-ratio:4/5}
.portrait--square{aspect-ratio:1/1}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* monogram sits underneath; if the photo 404s the img is removed and this shows */
.portrait .mono-fb{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4.6vw,4rem);
  color:rgba(11,31,58,.14);text-align:center;padding:20px;line-height:1.2}
.portrait .mono-fb small{display:block;font-family:var(--body);font-size:.58rem;font-weight:500;
  letter-spacing:.14em;color:var(--muted);margin-top:12px;line-height:1.9}
.namecard{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:var(--navy);padding:16px 18px;margin-top:-1px}
.namecard b{display:block;font-family:var(--disp);font-weight:700;font-size:1.16rem;color:#fff}
.namecard span{font-size:.66rem;font-weight:600;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.fdr .bio .role{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--navy);background:var(--gold);padding:7px 15px;border-radius:100px;text-transform:uppercase}
.fdr .bio h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:14px 0 6px}
.fdr .bio .qual{font-size:.76rem;font-weight:500;letter-spacing:.06em;color:var(--muted);
  display:block;margin-bottom:20px}
.fdr .bio p{color:var(--ink);margin-bottom:1em}
.fdr .bio h4{font-family:var(--disp);font-weight:700;font-size:1.25rem;color:var(--navy);margin:24px 0 10px}
.fdr .bio .quote{border-left:3px solid var(--gold);background:var(--gold-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 22px;margin-top:22px;color:var(--navy);
  font-size:1.02rem;font-style:italic}
/* small fact rail under each founder */
.fdr__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.fdr__facts div{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;background:var(--mist)}
.fdr__facts b{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--navy)}
.fdr__facts span{font-size:.64rem;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* legacy founder classes kept as aliases */
.fdr-lead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.fdr-co{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);gap:clamp(22px,3.4vw,50px);
  align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,34px);background:#fff}

/* team · two cards */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.team--2{max-width:900px}
/* Stacked, not side by side: these bios run to two full paragraphs, and in a
   side-by-side card the portrait stretches to match the text and crops badly. */
.tcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.tcard .portrait{border:0;border-bottom:1px solid var(--line);border-radius:0;
  aspect-ratio:4/3;height:auto;min-height:0;flex:0 0 auto}
.tcard .portrait img{object-position:center 22%}   /* keep the face out of the crop */
.tcard .bd{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.tcard h3{font-size:1.35rem;margin-bottom:8px}
.tcard p+p{margin-top:.95em}
.tcard .role{display:block;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  color:var(--gold);text-transform:uppercase;margin-bottom:9px}
.tcard p{font-size:.87rem;color:var(--muted);line-height:1.62}
.tcard .loc{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.7rem;
  font-weight:600;color:var(--navy);background:var(--mist);border:1px solid var(--line);
  padding:6px 12px;border-radius:100px;align-self:flex-start}
.tcard .loc svg{width:13px;height:13px;fill:none;stroke:var(--gold);stroke-width:2}

/* vision / mission alternating bands */
.vm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.vm+.vm{margin-top:clamp(38px,6vh,76px)}
.vm__fig{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/3;
  background:var(--mist);box-shadow:var(--shadow)}
.vm__fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.vm:hover .vm__fig img{transform:scale(1.04)}
.vm__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:15px 18px;font-size:.7rem;
  font-weight:600;letter-spacing:.08em;color:#fff;background:linear-gradient(transparent,rgba(8,23,41,.92))}
/* icon badge over the vision / mission imagery · names the idea at a glance */
.vm__ic{position:absolute;left:18px;top:18px;z-index:2;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--navy);background:var(--gold);
  box-shadow:0 10px 26px -8px rgba(11,31,58,.55);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.vm__ic svg{width:30px;height:30px}
.vm:hover .vm__ic{transform:scale(1.08) rotate(-6deg)}
@media(max-width:760px){ .vm__ic{width:50px;height:50px;left:14px;top:14px} .vm__ic svg{width:25px;height:25px} }
.vm__body .pn{font-size:.7rem;font-weight:700;color:var(--gold);letter-spacing:.18em}
.vm__body h3{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:12px 0 14px}
.vm__body p{color:var(--ink)}
.vm__body ul{list-style:none;margin-top:20px}
.vm__body li{padding:10px 0 10px 30px;position:relative;color:var(--ink);
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.vm__body li::before{content:"";position:absolute;left:2px;top:18px;width:12px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.vm--flip .vm__fig{order:2}

/* media band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(40px,6vh,70px)}
.band figure{position:relative;overflow:hidden;border-radius:var(--r);background:var(--mist);
  aspect-ratio:4/3;box-shadow:var(--shadow)}
.band img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.band figure:hover img{transform:scale(1.05)}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;font-size:.7rem;
  font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(8,23,41,.92))}

/* steps (careers / investors) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
.step{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  background:#fff;position:relative;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.step .n{font-size:.7rem;font-weight:700;color:var(--gold);letter-spacing:.14em}
.step h3{font-size:clamp(1.1rem,1.6vw,1.35rem);margin:10px 0 8px}
.step p{font-size:.89rem;color:var(--muted);line-height:1.62}

.mapframe{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:16/8;width:100%;
  background:var(--mist);overflow:hidden;box-shadow:var(--shadow)}
.mapframe iframe{width:100%;height:100%;border:0}

.mt{margin-top:clamp(38px,5.5vh,66px)}
.center{text-align:center}
.err404{min-height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(50px,9vh,100px) var(--pad)}
.err404 h1{font-size:clamp(4rem,15vw,11rem);color:var(--gold);line-height:1}
.err404 p{color:var(--muted);margin:16px 0 30px}

/* ==========================================================================
   MOBILE HARDENING
   ========================================================================== */
.dock__facts dd,.plate b,.rt-node b,.namecard b,.hero__manifest b,
.klist a,.ft a,.cta .lines a{overflow-wrap:anywhere}

@media(hover:none) and (pointer:coarse){
  .cat-jump a,.gfilters button,.pcard .row a,.bcard .go,.nav-desk a,
  .m-sub a,.legal a,.ft a{min-height:44px}
  .cat-jump a,.gfilters button{display:inline-flex;align-items:center}
  .pcard .row a{display:flex;align-items:center;justify-content:center}
  .ft li{padding:6px 0}
  .ft a,.m-sub a{display:inline-flex;align-items:center}
  .btn{padding:16px 26px;min-height:48px}
}
@media(max-width:1100px){
  .why{grid-template-columns:repeat(2,1fr)}
  .pcar__frame{aspect-ratio:16/9}
}
@media(max-width:960px){
  .intro__grid,.formwrap,.pd{grid-template-columns:1fr}
  .phero--split,.sec-split,.fdr,.fdr-lead,.vm,.jstep__panel{grid-template-columns:1fr}
  .phero--split{gap:clamp(24px,4vh,38px)}
  .fdr--flip .fdr__side,.vm--flip .vm__fig{order:0}
  .fdr__side{position:static}
  .fdr+.fdr{margin-top:clamp(36px,6vh,64px);padding-top:clamp(36px,6vh,64px)}
  .fdr .portrait--tall{aspect-ratio:4/3;max-height:58vh}
  .fdr-co{grid-template-columns:120px minmax(0,1fr);gap:20px}
  .sec-split{align-items:start;gap:16px}
  .team{grid-template-columns:1fr}
  .band{grid-template-columns:repeat(2,1fr)}
  .pd__media{position:static}
  .papers,.papers--3,.steps,.plate-grid,.proc{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr 1fr}
  .jstep__tabs{grid-template-columns:repeat(2,1fr)}
  .jstep__tabs button:nth-child(2){border-right:0}
  .jstep__tabs button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ledger .t{width:auto;display:block}
  .ledger td.d{display:block;padding-top:2px}
  .ledger tr{display:grid;grid-template-columns:56px 1fr;padding:6px 0}
}
@media(max-width:900px){ .nav-desk{display:none} #burger{display:block} }
@media(max-width:760px){
  .cat-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:14px var(--pad)}
  .cat-jump::-webkit-scrollbar{display:none}
  .cat-jump a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .mapframe{aspect-ratio:4/3}
  .phero .ref{display:none}
  .art .meta{gap:8px 14px}
  #lb{padding:16px}
  #lb img{max-width:100%;max-height:68vh}
  #lb .pv{left:12px;top:auto;bottom:20px;transform:none}
  #lb .nx{right:12px;top:auto;bottom:20px;transform:none}
  #lb .cap{bottom:82px;padding:0 16px}
  .wa{right:14px;bottom:14px;width:50px;height:50px}
  .legal{justify-content:flex-start;gap:8px}
  .cta .lines{gap:10px;flex-direction:column}
  .hero h1{font-size:clamp(2.3rem,min(9.4vw,7.8vh),3.6rem)}
  .hero__manifest{grid-template-columns:repeat(2,1fr)}
  .hero__manifest div:nth-child(2n){border-right:0}
  .hero__manifest div:nth-child(n+3){border-top:1px solid rgba(212,175,55,.18)}
  .cue{display:none}
  .why,.band,.team{grid-template-columns:1fr}
  .tcard{grid-template-columns:1fr}
  .tcard .portrait{border-right:0;border-bottom:1px solid var(--line);aspect-ratio:4/3;min-height:0}
  .fdr .portrait--tall{aspect-ratio:3/4;max-height:none}
  .fdr-co{grid-template-columns:1fr}
  .fdr__facts{grid-template-columns:1fr 1fr}
  .dock__img{aspect-ratio:16/9}
  .route__line{flex-wrap:wrap;gap:26px 0;margin:0}
  .route__line::before,.route__line .ship{display:none}
  .rt-node{width:50%;text-align:left}
  .rt-node .flag,.flag-fb,.rt-node .ic{margin-left:0;margin-right:0}
  .papers,.papers--3,.steps,.plate-grid{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr}
  form .frow{grid-template-columns:1fr}
  .pcar__frame{aspect-ratio:4/5}
  .pcar__nav{width:44px;height:44px}
  .pcar__name{bottom:52px}
  .pcar__name b::after{margin-top:12px;width:48px}
}
@media(max-width:480px){
  :root{--pad:18px}
  .hero__cta,.cta__row,.pd .actions{flex-direction:column;align-items:stretch}
  .hero__cta .btn,.cta__row .btn,.pd .actions .btn{width:100%}
  .rt-node{width:100%}
  .jstep__tabs{grid-template-columns:1fr}
  .jstep__tabs button{border-right:0;border-bottom:1px solid var(--line)}
  .jstep__tabs button:last-child{border-bottom:0}
  .pcard .row{flex-direction:column}
  .legal{flex-direction:column;gap:8px}
  .logo .lg{height:36px}
  .ft .flogo .lg{height:68px}
}
@media(max-height:600px){
  .hero h1{font-size:clamp(2rem,min(6.4vw,10vh),3.8rem)}
  .hero__manifest b{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue i::after,.route__line .ship,.dot{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .pcar__slide{transition:opacity .3s ease,visibility .3s;transform:none}
  .pcar__slide.live{transform:none}
  .pcar__dots button.live .bar{transition:none}
  .jstep__panel{animation:none}
  *{transition-duration:.01ms!important}
}

/* further-reading line at the foot of each guide */
.art .srcs{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted)}
.art .srcs a{color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px}
.art .srcs a:hover{color:var(--gold)}
/* in-body links inside guide copy */
.art p a:not(.btn){color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px}
.art p a:not(.btn):hover{color:var(--gold)}

/* ---------- HTML sitemap page ---------- */
.smap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(20px,2.6vw,34px)}
.smap__grp--wide{grid-column:1/-1}
.smap__grp h3{font-size:1.12rem;margin-bottom:12px;padding-bottom:10px;
  border-bottom:2px solid var(--gold)}
.smap__grp h3 a{color:var(--navy)}
.smap__grp h3 a:hover{color:var(--gold)}
.smap__grp ul{list-style:none}
.smap__grp li{padding:5px 0 5px 16px;position:relative;font-size:.92rem}
.smap__grp li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:1px;background:var(--gold)}
.smap__grp li a{color:var(--ink)}
.smap__grp li a:hover{color:var(--gold)}
.smap__grp--wide ul{columns:2;column-gap:clamp(20px,3vw,40px)}
@media(max-width:760px){ .smap__grp--wide ul{columns:1} }