:root, [data-theme="light"]{
  --bg:#f7f8fc; --bg-soft:#e9edf5; --surface:#ffffff;
  --contrast:#152a4d; --on-contrast:#eef1f7; --on-contrast-soft:#9fadc4;
  --text:#16223a; --text-soft:#54617a;
  --gold:#c1922e; --gold-ink:#8f6a15; --green:#1f3a70; --sage:#5a739e;
  --border:rgba(22,34,58,.13); --border-strong:rgba(22,34,58,.2);
  --card-shadow:0 1px 2px rgba(15,26,48,.04),0 12px 34px rgba(15,26,48,.07);
  --hero-tint1:rgba(13,24,45,.30); --hero-tint2:rgba(8,16,32,.86);
}
[data-theme="dark"]{
  --bg:#0c1424; --bg-soft:#111b2e; --surface:#152136;
  --contrast:#080f1d; --on-contrast:#eef1f7; --on-contrast-soft:#93a2bc;
  --text:#e8edf6; --text-soft:#93a2bc;
  --gold:#d9b25c; --gold-ink:#e2c377; --green:#8fa9d6; --sage:#8fa9d6;
  --border:rgba(230,236,246,.13); --border-strong:rgba(230,236,246,.22);
  --card-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.4);
  --hero-tint1:rgba(8,14,26,.45); --hero-tint2:rgba(5,10,20,.9);
}
:root{--serif:"Fraunces",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--maxw:1200px;--pad:clamp(20px,5vw,68px)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.62;font-size:clamp(16px,1.04vw,17px);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s ease,color .4s ease}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#152a4d}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,116px)}
.section--soft{background:var(--bg-soft)}
.section--contrast{background:var(--contrast);color:var(--on-contrast)}
.eyebrow{font-family:var(--mono);font-size:.71rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.section--contrast .eyebrow{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.012em}
.h2{font-size:clamp(2rem,4.3vw,3.3rem);margin-top:.46em;max-width:20ch;font-weight:500}
.lead{font-size:clamp(1.05rem,1.55vw,1.28rem);color:var(--text-soft);max-width:56ch;margin-top:1.05em}
.section--contrast .lead{color:var(--on-contrast-soft)}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:.92em 1.5em;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn--solid{background:var(--gold);color:#131f36;border-color:var(--gold)}
.btn--solid:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn--outline{background:transparent;color:currentColor;border-color:var(--border-strong)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-ink);transform:translateY(-2px)}
.section--contrast .btn--outline:hover,.hero .btn--outline:hover{color:var(--gold)}

.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s,border-color .35s,box-shadow .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom-color:var(--border);box-shadow:0 6px 24px rgba(0,0,0,.05)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:.65em}
/* transparent logo, no white disc. Two artworks: navy for light
   backdrops, light-blue for dark ones. Only one is ever shown. */
.brand__chip{width:46px;height:46px;flex:0 0 auto;display:block}
.brand__chip img{width:100%;height:100%;object-fit:contain;display:block}
.brand__chip .logo-on-dark{display:none}
[data-theme="dark"] .brand__chip .logo-on-light{display:none}
[data-theme="dark"] .brand__chip .logo-on-dark{display:block}
/* the footer band is dark in both themes */
.ft__brand .brand__chip .logo-on-light{display:none}
.ft__brand .brand__chip .logo-on-dark{display:block}
/* nav sits over the dark hero until it gains a background */
body[data-hero] .nav:not(.scrolled) .brand__chip .logo-on-light{display:none}
body[data-hero] .nav:not(.scrolled) .brand__chip .logo-on-dark{display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--serif);font-size:1.22rem;font-weight:600;letter-spacing:.01em;color:var(--text)}
.brand__sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft);margin-top:.45em}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a.lnk{font-family:var(--mono);font-size:.77rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);transition:color .2s}
.nav__links a.lnk:hover{color:var(--gold-ink)}
.nav__tools{display:flex;align-items:center;gap:14px}
.themebtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.themebtn:hover{border-color:var(--gold);transform:rotate(12deg)}
.themebtn .moon{display:none}.themebtn .sun{display:block}
[data-theme="dark"] .themebtn .moon{display:block}[data-theme="dark"] .themebtn .sun{display:none}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--text)}
.nav__toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:.3s}

/* fills the viewport exactly: nothing below shows until you scroll.
   dvh keeps phone browser bars from adding a gap or an overflow. */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;color:#eef1f8;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,var(--hero-tint2) 0%,var(--hero-tint1) 58%,transparent 100%),linear-gradient(to top,var(--hero-tint2),transparent 55%)}
.hero__in{position:relative;z-index:1;width:100%;padding-block:clamp(40px,8vw,84px) clamp(48px,7vw,72px)}
.hero__eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;flex-wrap:wrap;gap:.4em 1.1em;align-items:center}
.hero__eyebrow span{display:inline-flex;align-items:center;gap:.55em}
.hero__eyebrow span::before{content:"";width:5px;height:5px;border:1px solid var(--gold);border-radius:50%}
.hero h1{font-size:clamp(2.5rem,6vw,5.1rem);margin-top:1.1rem;max-width:17ch;font-weight:500;color:#f6f8fc}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.3rem);color:#ccd4e4;max-width:50ch;margin-top:1.4rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2.2rem}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#dde3ef;border:1px solid rgba(230,237,248,.28);border-radius:40px;padding:.5em 1em;display:inline-flex;align-items:center;gap:.5em}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* scroll cue: sits bottom-right, clear of the left-aligned hero copy */
.hero__scroll{position:absolute;right:clamp(20px,5vw,68px);bottom:clamp(26px,4vw,44px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#dde3ef}
.hero__scroll-txt{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  writing-mode:vertical-rl;opacity:.72;transition:opacity .25s,color .25s}
.hero__scroll-line{position:relative;width:1px;height:54px;background:rgba(230,237,248,.26);overflow:hidden}
.hero__scroll-line i{position:absolute;left:-1px;top:0;width:3px;height:15px;border-radius:2px;
  background:var(--gold);animation:scrollCue 2.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes scrollCue{0%{transform:translateY(-17px);opacity:0}18%{opacity:1}
  72%{opacity:1}100%{transform:translateY(54px);opacity:0}}
.hero__scroll:hover .hero__scroll-txt{opacity:1;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.hero__scroll-line i{animation:none;top:19px}}
@media (max-width:760px){.hero__scroll{display:none}}
/* keep the hero chips from wrapping underneath the cue */
@media (min-width:761px){.hero__chips{padding-right:112px}}
/* On small phones the hero copy must clear the 76px fixed header, so the
   top padding cannot be trimmed. Buy the room back from the headline and
   the gaps instead. */
@media (max-width:560px){
  .hero__in{padding-block:calc(76px + 18px) 26px}
  .hero h1{font-size:2.05rem;margin-top:.55rem;max-width:none}
  .hero__eyebrow{font-size:.66rem;gap:.3em .8em}
  .hero__sub{font-size:1rem;margin-top:.85rem}
  .hero__cta{margin-top:1.25rem;gap:10px}
  .hero__chips{margin-top:1.05rem;gap:8px}
  .chip{font-size:.62rem;padding:.45em .85em}
}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.stat{background:var(--contrast);color:var(--on-contrast);padding:clamp(28px,4vw,46px) clamp(20px,3vw,36px);text-align:center}
.stat__n{font-family:var(--serif);font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:500;color:var(--gold);line-height:1}
.stat__l{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-contrast-soft);margin-top:1em;line-height:1.6}

.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:center}
.about__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:5/6;box-shadow:var(--card-shadow)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__cap{position:absolute;left:18px;bottom:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#e9edf6;z-index:2}
.about__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,28,.7),transparent 45%)}
.ulist{margin-top:1.8em;display:grid;gap:.2em}
.ulist li{list-style:none;display:flex;gap:.8em;align-items:flex-start;padding:.7em 0;border-top:1px solid var(--border)}
.ulist li:last-child{border-bottom:1px solid var(--border)}
.ulist .ic{color:var(--gold);flex:0 0 auto;margin-top:.15em}
.ulist b{font-family:var(--serif);font-weight:500;font-size:1.1rem;display:block}
.ulist span{color:var(--text-soft);font-size:.92rem}

.prodhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,60px)}
.prod--rev .prod__media{order:2}
.prod__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--card-shadow)}
.prod__media img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:#131f36;background:var(--gold);padding:.45em .8em;border-radius:3px;z-index:2}
.badge--alt{background:#152a4d;color:#cfdcf5}
.prod__no{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.prod h3{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;margin-top:.4rem}
.prod__sci{font-family:var(--mono);font-size:.8rem;color:var(--text-soft);margin-top:.5em}
.prod__desc{margin-top:1em;color:var(--text-soft);max-width:48ch}
.spec{margin-top:1.6em;border-top:1px solid var(--border)}
.spec__row{display:grid;grid-template-columns:10.5em 1fr;gap:14px;padding:.65em 0;border-bottom:1px solid var(--border);font-size:.9rem;align-items:baseline}
.spec__k{font-family:var(--mono);font-size:.71rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft)}
.tag-soft{font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);border:1px solid var(--sage);border-radius:3px;padding:.14em .5em;display:inline-block}

.soonhead{margin-top:clamp(48px,7vw,80px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.soon{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.soon__c{border:1px solid var(--border);border-radius:5px;padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--surface);transition:border-color .25s,transform .25s}
.soon__c:hover{border-color:var(--gold);transform:translateY(-3px)}
.soon__ic{color:var(--gold)}
.soon__n{font-family:var(--serif);font-size:1.15rem;font-weight:500}
.soon__t{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage);border:1px solid var(--sage);border-radius:3px;padding:.24em .55em;align-self:flex-start}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:clamp(36px,5vw,52px);border-radius:6px;overflow:hidden}
.trust__c{background:var(--surface);padding:clamp(26px,3vw,36px)}
.trust__ic{color:var(--gold);margin-bottom:16px}
.trust__c h4{font-size:1.25rem;font-weight:500}
.trust__c p{color:var(--text-soft);font-size:.93rem;margin-top:.5em}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,30px);margin-top:clamp(36px,5vw,52px)}
.why__c{padding:6px 0}
.why__n{font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.1em}
.why__c h4{font-size:1.3rem;font-weight:500;margin:14px 0 .5em}
.why__c p{color:var(--on-contrast-soft);font-size:.94rem}

.markets{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,4vw,46px)}
.market{border:1px solid var(--border-strong);border-radius:46px;padding:.7em 1.4em;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.6em;transition:border-color .2s,color .2s}
.market:hover{border-color:var(--gold);color:var(--gold-ink)}
.market::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

.contact{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,6vw,76px)}
.contact__list{margin-top:1.6em;display:grid;gap:.55em}
.contact__list li{list-style:none;display:flex;gap:.7em;color:var(--on-contrast-soft);font-size:.94rem}
.contact__list li::before{content:"—";color:var(--gold)}
.contact__direct{margin-top:1.9em;font-family:var(--mono);font-size:.8rem;line-height:2;color:var(--on-contrast-soft)}
.contact__direct b{color:var(--gold);font-weight:500}
.contact__direct a{border-bottom:1px solid var(--border-strong)}
.form{display:flex;flex-direction:column;gap:15px;background:rgba(255,255,255,.04);border:1px solid var(--border-strong);border-radius:6px;padding:clamp(24px,4vw,38px)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-contrast-soft)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:.95rem;color:var(--on-contrast);background:rgba(0,0,0,.22);border:1px solid var(--border-strong);border-radius:3px;padding:.78em .9em;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:#7b87a1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:92px}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form__note{font-family:var(--mono);font-size:.69rem;color:var(--on-contrast-soft)}
.form__msg,.form__err{display:none;font-family:var(--mono);font-size:.8rem;padding:.7em 0;line-height:1.6}
.form__msg{color:var(--gold)}
.form__err{color:#ff9b8a}
.form__err a{color:var(--gold);border-bottom:1px solid currentColor}
.form.sent .form__msg{display:block}
.form.failed .form__err{display:block}
/* while the POST is in flight */
.form.sending button[type="submit"]{opacity:.6;pointer-events:none}
.form.sent button[type="submit"],.form.sent .form__note{display:none}

.ft{background:var(--contrast);color:var(--on-contrast-soft);padding-block:clamp(46px,6vw,70px)}
.ft__top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--border)}
.ft__brand{display:flex;gap:15px;max-width:40ch}
.ft__brand .brand__chip{width:52px;height:52px}
.ft__brand .brand__name{color:var(--on-contrast);font-size:1.3rem}
.ft__tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.5em}
.ft__brand p{margin-top:.7em;font-size:.9rem}
.ft__cols{display:flex;gap:clamp(34px,6vw,72px);flex-wrap:wrap}
.ft__col h5{font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1em}
.ft__col a,.ft__col p{display:block;font-size:.89rem;color:var(--on-contrast-soft);margin-bottom:.5em;transition:color .2s}
.ft__col a:hover{color:var(--gold)}
.ft__legal{padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.67rem;color:var(--on-contrast-soft)}

.js .rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rev.in{opacity:1;transform:none}
.js .rev.d1{transition-delay:.08s}.js .rev.d2{transition-delay:.16s}.js .rev.d3{transition-delay:.24s}

#globeCursor{position:fixed;left:0;top:0;width:26px;height:26px;pointer-events:none;z-index:99999;opacity:0;will-change:transform;transition:opacity .2s ease;mix-blend-mode:difference;isolation:isolate}
#globeCursor svg{width:100%;height:100%;display:block;animation:globeSpin 6s linear infinite}
#globeCursor.is-hover svg{animation-duration:1.8s}
#globeCursor svg circle,#globeCursor svg ellipse{fill:none;stroke:#fff;stroke-width:1.2}
#globeCursor svg circle{stroke-width:1.5}
@keyframes globeSpin{to{transform:rotate(360deg)}}
html.cursor-anim,html.cursor-anim *{cursor:none !important}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){#globeCursor{display:none!important}}

@media (max-width:900px){
  /* padding must be 0 while closed: max-height:0 cannot shrink padding,
     so any vertical padding leaves a visible strip under the header */
  .nav__links{position:fixed;inset:76px 0 auto 0;background:var(--bg);background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(12px);flex-direction:column;align-items:flex-start;gap:0;padding:0 var(--pad);border-bottom:0 solid var(--border);max-height:0;overflow:hidden;transition:max-height .35s,padding .35s}
  .nav__links.open{max-height:min(80vh,480px);overflow-y:auto;padding:8px var(--pad) 22px;border-bottom-width:1px}
  .nav__links a.lnk{padding:14px 0;width:100%;border-bottom:1px solid var(--border)}
  .nav__links .btn{margin-top:14px}
  .nav__toggle{display:block}
  .stats{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr;gap:32px}
  .prod{grid-template-columns:1fr;gap:24px}
  .prod--rev .prod__media{order:0}
  .prod__media{max-width:520px}
  .soon{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:34px}
}
@media (max-width:520px){
  .field--row{grid-template-columns:1fr}
  .spec__row{grid-template-columns:1fr;gap:3px}
  .stats{grid-template-columns:1fr}
  .soon{grid-template-columns:1fr}
  .ft__legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.js .rev{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}


/* =========================================================
   ADDITIONS  (appended after the base stylesheet)
   ========================================================= */

/* provisional spec marker */
.prov{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);border-bottom:1px dotted var(--border-strong);padding-bottom:1px;margin-left:.25em;white-space:nowrap}

/* quiet text button */
.btn--text{background:transparent;color:currentColor;border-color:transparent;padding-left:.5em;padding-right:.5em;opacity:.85}
.btn--text:hover{color:var(--gold);opacity:1;transform:translateY(-2px)}
.hero .btn--text{color:#dde3ef}.hero .btn--text:hover{color:var(--gold)}

/* ---------- editable media (single / slideshow / video) ---------- */
.media{position:relative;overflow:hidden;border-radius:6px;background:var(--bg-soft)}
.media--fill{position:absolute;inset:0;border-radius:0;box-shadow:none;background:var(--bg-soft)}
.media__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.media__slide.on{opacity:1}
.media img,.media__vid{width:100%;height:100%;object-fit:cover;display:block;border:0}
/* object-fit does nothing to an iframe, so a YouTube/Vimeo backdrop is
   sized 16:9 off whichever axis is larger and centred, which crops it to
   cover the hero exactly as object-fit:cover would. */
.media__vid--bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;
  max-width:none;pointer-events:none}
.media-bg .media__slide{background-size:cover;background-position:center}
.media__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;
  background:repeating-linear-gradient(45deg,var(--bg-soft),var(--bg-soft) 13px,transparent 13px,transparent 26px);
  color:var(--text-soft);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.media__nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(10,18,32,.5);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .25s,background .25s;z-index:4}
.media:hover .media__nav{opacity:1}
.media__nav:hover{background:var(--gold);color:#131f36}
.media__prev{left:10px}.media__next{right:10px}
.media__dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:4}
.media__dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:width .25s,background .25s}
.media__dot.on{background:var(--gold);width:20px;border-radius:4px}
.media-bg .media__nav,.media-bg .media__dots{display:none}

/* ---------- additional-range product grid ---------- */
.rangehead{margin-top:clamp(52px,7vw,84px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.range{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);margin-top:28px}
.rangecard{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .25s,transform .25s;box-shadow:var(--card-shadow)}
.rangecard:hover{border-color:var(--gold);transform:translateY(-4px)}
.rangecard__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.rangecard__body{padding:22px}
.rangecard__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.rangecard h3{font-size:1.5rem;font-weight:500;margin:.35rem 0 .1rem}
.rangecard__origin{font-family:var(--mono);font-size:.72rem;color:var(--sage);display:inline-flex;align-items:center;gap:.45em;margin-bottom:.7em}
.rangecard__origin::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage)}
.rangecard p{color:var(--text-soft);font-size:.92rem}
.rangecard__req{margin-top:1em;padding-top:.9em;border-top:1px solid var(--border);font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft)}

/* ---------- subpage header + home CTA strip ---------- */
.pagehead{padding:calc(76px + clamp(40px,7vw,84px)) 0 clamp(28px,4vw,44px)}
.pagehead h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:500;margin-top:.4em;max-width:22ch}
.pagehead .lead{margin-top:.8em}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:500;max-width:24ch}
.cta-strip__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-strip__mail{font-family:var(--mono);font-size:.8rem;color:var(--on-contrast-soft);border-bottom:1px solid var(--border-strong)}
.cta-strip__mail:hover{color:var(--gold)}

/* ---------- world map ---------- */
.mapwrap{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:clamp(16px,3vw,34px);overflow:hidden;box-shadow:var(--card-shadow)}
.maplayer{position:relative}
.maplayer .worldmap-img{width:100%;height:auto;display:block;opacity:.95}
[data-theme="dark"] .maplayer .worldmap-img{filter:brightness(.42) saturate(1.3)}
.worldmap{position:absolute;inset:0;width:100%;height:100%;display:block}
.route{stroke:var(--gold);stroke-width:1.3;stroke-dasharray:3 5;opacity:.55;fill:none}
.mk{fill:var(--gold)}
.mk-home{fill:var(--green)}
[data-theme="dark"] .mk-home{fill:#b9ccf0}
.mk-pulse{fill:var(--gold);opacity:.4;transform-box:fill-box;transform-origin:center;animation:mkPulse 2.8s ease-out infinite}

@keyframes mkPulse{0%{transform:scale(.7);opacity:.5}70%{transform:scale(2.8);opacity:0}100%{opacity:0}}
.mk-label{font-family:var(--mono);font-size:11px;letter-spacing:.03em;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.mk-label--home{fill:var(--green);font-weight:500}
[data-theme="dark"] .mk-label--home{fill:#b9ccf0}
[data-theme="dark"] .mk-label{stroke:#0c1424}
.map-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

@media (max-width:900px){ .range{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .range{grid-template-columns:1fr} .mk-label{font-size:13px} }


/* =========================================================
   TEAM, GALLERY & LIGHTBOX
   ========================================================= */

/* an image slot that shows the filename it is waiting for,
   until that file actually exists (see main.js) */
.slot{position:relative;background:var(--bg-soft);overflow:hidden}
.slot.is-empty img{display:none}
.slot.is-empty{border:1px dashed var(--border-strong);display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,
    color-mix(in srgb,var(--border) 45%,transparent) 9px,
    color-mix(in srgb,var(--border) 45%,transparent) 18px)}
.slot.is-empty::after{content:attr(data-file);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;color:var(--text-soft);text-align:center;padding:10px 12px;
  background:var(--surface);border-radius:3px;max-width:88%;word-break:break-all;line-height:1.5}

/* team */
/* cards sized to ~230px wide (about 40% smaller than full width), left
   aligned to the heading. Tune the max-width to resize all three together. */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  max-width:740px}
.team__photo{aspect-ratio:4/5;border-radius:6px;
  box-shadow:0 2px 6px rgba(15,26,48,.06),0 22px 48px -20px rgba(15,26,48,.32)}
[data-theme="dark"] .team__photo{box-shadow:0 2px 6px rgba(0,0,0,.45),0 24px 54px -20px rgba(0,0,0,.75)}
.team__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* silhouette stand-ins until a real portrait is dropped in.
   One per director so the three don't look identical. */
.team__photo.is-empty{border:0;background-repeat:no-repeat;background-position:center;
  background-size:cover;place-items:end center}
.team__c:nth-child(1) .team__photo.is-empty{background-image:url("../images/team/placeholder-1.svg")}
.team__c:nth-child(2) .team__photo.is-empty{background-image:url("../images/team/placeholder-2.svg")}
.team__c:nth-child(3) .team__photo.is-empty{background-image:url("../images/team/placeholder-3.svg")}
/* the panel is near-white; on the dark page that outshines the body text,
   so sink it back so the names carry the emphasis, not the empty boxes */
[data-theme="dark"] .team__photo.is-empty{filter:brightness(.38) saturate(.85)}
/* the director silhouettes are intentional artwork, not a "missing file"
   marker, so no filename chip on them (the gallery tiles still show one) */
.team__photo.is-empty::after{content:none}
.team__name{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:500;margin-top:1.1em}
.team__role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:.5em}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,4vw,44px)}
.gal{aspect-ratio:4/3;border-radius:6px;margin:0;
  box-shadow:0 1px 2px rgba(15,26,48,.05),0 16px 34px -16px rgba(15,26,48,.26)}
[data-theme="dark"] .gal{box-shadow:0 1px 2px rgba(0,0,0,.45),0 18px 40px -16px rgba(0,0,0,.7)}
.gal:not(.is-empty){cursor:pointer}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.gal:not(.is-empty):hover img{transform:scale(1.06)}
.gal__cap{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;color:#f2f5fa;
  background:linear-gradient(to top,rgba(6,12,24,.9),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.gal:not(.is-empty):hover .gal__cap,.gal:not(.is-empty):focus-visible .gal__cap{opacity:1;transform:none}
.gal.is-empty .gal__cap{display:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,10,20,.95);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,24px);
  padding:clamp(16px,4vw,48px)}
.lb[hidden]{display:none}
.lb__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.lb__figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__cap{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#c9d3e4;text-align:center}
.lb__nav,.lb__close{background:transparent;border:1px solid rgba(230,237,248,.28);color:#eef1f7;
  cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:border-color .2s,color .2s,transform .2s}
.lb__nav{width:clamp(38px,5vw,52px);aspect-ratio:1;font-size:1.6rem;line-height:1}
.lb__close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:42px;height:42px;font-size:1.5rem;line-height:1}
.lb__nav:hover,.lb__close:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.06)}
body.lb-open{overflow:hidden}

@media (max-width:900px){
  .team{grid-template-columns:repeat(3,1fr);gap:16px}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .team{grid-template-columns:1fr;gap:24px;max-width:260px;margin-inline:auto}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lb__nav{position:absolute;bottom:clamp(14px,4vw,28px)}
  .lb__prev{left:24%}.lb__next{right:24%}
}

/* =========================================================
   DEPTH & AMBIENT PARTICLES
   Layered shadows lift the cards; a slow particle drift gives
   the flat dark bands some life. No blurred colour washes.
   ========================================================= */

/* two-card variant of the product grid */
.range--two{grid-template-columns:repeat(2,1fr);max-width:820px}

/* drifting particle layer, dark sections only */
.section--particles{position:relative;overflow:hidden}
.section--particles>.wrap{position:relative;z-index:1}
.particle-layer{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block}

/* raised cards */
.rangecard{box-shadow:0 1px 2px rgba(15,26,48,.05),0 18px 38px -16px rgba(15,26,48,.28)}
.rangecard:hover{box-shadow:0 2px 5px rgba(15,26,48,.07),0 28px 56px -18px rgba(15,26,48,.34)}
[data-theme="dark"] .rangecard{box-shadow:0 1px 2px rgba(0,0,0,.45),0 20px 44px -16px rgba(0,0,0,.7)}
[data-theme="dark"] .rangecard:hover{box-shadow:0 2px 6px rgba(0,0,0,.5),0 30px 62px -18px rgba(0,0,0,.8)}

/* trust grid: soft top light */
.trust{box-shadow:0 1px 2px rgba(15,26,48,.04),0 22px 48px -20px rgba(15,26,48,.26)}
[data-theme="dark"] .trust{box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 54px -20px rgba(0,0,0,.7)}
.trust__c{position:relative}
.trust__c::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 46%)}
[data-theme="dark"] .trust__c::before{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 46%)}
.trust__ic,.trust__c h4,.trust__c p{position:relative;z-index:1}

/* media, map and form lift off the page */
.prod__media,.about__media{box-shadow:0 2px 6px rgba(15,26,48,.06),0 26px 56px -20px rgba(15,26,48,.34)}
[data-theme="dark"] .prod__media,[data-theme="dark"] .about__media{box-shadow:0 2px 6px rgba(0,0,0,.45),0 28px 62px -20px rgba(0,0,0,.75)}
.mapwrap{box-shadow:0 1px 2px rgba(15,26,48,.05),0 26px 60px -22px rgba(15,26,48,.32)}
[data-theme="dark"] .mapwrap{box-shadow:0 1px 2px rgba(0,0,0,.4),0 28px 66px -22px rgba(0,0,0,.75)}
.form{box-shadow:0 2px 6px rgba(0,0,0,.16),0 26px 58px -22px rgba(0,0,0,.5)}

/* particles are pure decoration; the script skips them when motion is reduced */


/* =========================================================
   FORM VALIDATION FEEDBACK
   Errors are shown next to the field that caused them, so a
   visitor is never left wondering why nothing happened.
   ========================================================= */

.req{color:var(--gold);margin-left:.15em}

.field__err{
  display:none;
  font-family:var(--mono);font-size:.68rem;line-height:1.5;
  color:#ff9b8a;margin-top:.45em}
.field.is-bad .field__err{display:block}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#ff9b8a;box-shadow:0 0 0 2px rgba(255,155,138,.14)}

/* The open dropdown list is painted by the operating system, not by the page.
   Without this it inherits the field's light text but keeps the OS's white
   panel, so the country names come out light-grey on white. The form always
   sits on a dark band (.section--contrast is dark in BOTH themes), so the
   native list is told to render dark, and the options are given explicit
   colours for browsers that ignore color-scheme. */
.field select{color-scheme:dark}
.field select option,
.field select optgroup{
  background-color:#152136;
  color:#eef1f7}
.field select option{padding:6px 8px}
.field select optgroup{
  color:#d9b25c;
  font-weight:700;
  font-style:normal;
  letter-spacing:.04em}
.field select option:checked{background-color:#1f2f4d}

/* a suggestion, not a rejection: likely typo, gold rather than red */
.field.is-hint .field__err{display:block;color:var(--gold)}
.field.is-hint input{border-color:var(--gold);box-shadow:0 0 0 2px rgba(217,178,92,.14)}
.err-fix{background:none;border:0;padding:0;font:inherit;color:var(--gold);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.err-fix:hover{color:var(--gold-ink)}

/* submit button swaps its label while the email domain is being checked */
.btn__busy{display:none}
.form.sending .btn__idle{display:none}
.form.sending .btn__busy{display:inline}
.form.sending button[type="submit"]{opacity:.7;pointer-events:none}


/* =========================================================
   WHATSAPP FLOATING BUTTON
   Injected by main.js on every page. Edit the phone number
   and pre-filled message in the WHATSAPP block there.
   ========================================================= */

.wa-fab{
  position:fixed;
  right:clamp(16px,2.2vw,26px);
  bottom:clamp(16px,2.2vw,26px);
  z-index:150;
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.26),0 14px 34px -10px rgba(37,211,102,.55);
  /* hidden until revealed, so it never sits on top of the hero scroll cue */
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1),
             visibility .32s,box-shadow .25s ease}
.wa-fab.is-in{opacity:1;visibility:visible;transform:none}
.wa-fab:hover{transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 18px rgba(0,0,0,.3),0 20px 44px -10px rgba(37,211,102,.7)}
.wa-fab:active{transform:translateY(-1px) scale(1.02)}
.wa-fab svg{width:30px;height:30px;display:block;position:relative;z-index:1}

/* soft outward pulse so the button reads as live, not decorative */
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:#25d366;opacity:.55;z-index:0;
  animation:waPulse 2.6s cubic-bezier(.25,.6,.4,1) infinite}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}}

/* hover label, pointer devices only (no hover target on touch) */
.wa-fab__label{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--contrast);color:var(--on-contrast);
  padding:.6em .9em;border-radius:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease}
.wa-fab__label::after{content:"";position:absolute;left:100%;top:50%;
  transform:translateY(-50%);border:5px solid transparent;
  border-left-color:var(--contrast)}
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{
    opacity:1;transform:translateY(-50%)}
}
@media (hover:none),(pointer:coarse){ .wa-fab__label{display:none} }

@media (max-width:560px){
  .wa-fab{width:52px;height:52px}
  .wa-fab svg{width:27px;height:27px}
}
@media (prefers-reduced-motion:reduce){
  .wa-fab::before{animation:none;opacity:0}
}