/* EMSR — lifted verbatim from the static build. Design tokens at the top. */

/* ============================================================
   EMSR — light industrial theme
   Brand: orange #F9930B · navy #003968
   ============================================================ */
:root{
  --paper:#F4F6F9;
  --paper-2:#ffffff;
  --tint:#EAEFF5;
  --ink:#0B1B2B;
  --ink-soft:#47586a;
  --navy:#003968;
  --navy-deep:#052641;
  --accent:#F9930B;
  --accent-2:#FFB44E;
  --line:rgba(0,57,104,.13);
  --line-soft:rgba(0,57,104,.08);
  /* One display face everywhere: Kanit. Saira (numbers, badges, card labels,
     eyebrows) was retired; its 600-650 weights became 500 and its 700-800
     weights became 600, because Kanit at the same number is much heavier. */
  --disp:'Kanit',sans-serif;
  --head:'Kanit',sans-serif;
  --head-w:500;
  --head-ls:-.005em;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'Kanit',sans-serif;
  --radius:18px;
  --shadow-card:0 20px 50px -30px rgba(0,45,85,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-w);letter-spacing:var(--head-ls);margin:0}
::selection{background:var(--accent);color:#04162a}
:focus-visible{outline:3px solid rgba(249,147,11,.82);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font:600 12px var(--mono);letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.eyebrow .bar{width:26px;height:1px;background:var(--accent)}
.eyebrow .idx{font-weight:600;color:var(--accent);opacity:.85}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px var(--body);border:1.5px solid transparent;border-radius:11px;padding:14px 25px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s,border-color .25s,color .25s;cursor:pointer;white-space:nowrap}
.btn-primary{position:relative;overflow:hidden;background:var(--accent);border-color:var(--accent);color:#052641;box-shadow:0 12px 30px -10px rgba(249,147,11,.6)}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .65s cubic-bezier(.4,0,.2,1)}
.btn-primary:hover::after{left:140%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(249,147,11,.7)}
.btn-ghost{border-color:rgba(0,57,104,.22);color:var(--ink);background:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--navy);background:#fff;transform:translateY(-2px)}
.btn-ghost-dark{border-color:rgba(255,255,255,.28);color:#eaf1f8;background:rgba(255,255,255,.04)}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}

/* ---------- progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:300;box-shadow:0 0 12px rgba(249,147,11,.6)}

/* ---------- header ---------- */
/* The header has two skins. At the top of the page it is invisible over the
   light hero; once you scroll it condenses into a solid navy bar — logo swaps
   to the inverted mark, copy goes light. Everything that changes is listed in
   one transition so the two states cross-fade instead of snapping. */
.nav{position:sticky;top:0;z-index:100;padding:20px 0;border-bottom:1px solid transparent;
  transition:padding .42s cubic-bezier(.16,1,.3,1),background .42s ease,backdrop-filter .42s ease,box-shadow .42s ease,border-color .42s ease}
.nav.scrolled{padding:11px 0;background:rgba(5,38,65,.92);backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(255,255,255,.09);box-shadow:0 18px 44px -30px rgba(0,20,40,.95)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}

/* two logos stacked in the same box: the colour mark and the inverted one.
   Cross-fading them beats swapping `src` — no flicker, no second request mid-scroll. */
.nav-brand{position:relative;display:block;flex:none;line-height:0}
.nav-brand img{height:46px;width:auto;display:block;transition:height .42s cubic-bezier(.16,1,.3,1),opacity .34s ease}
.nav-brand .inv{position:absolute;left:0;top:0;opacity:0}
.nav.scrolled .nav-brand img{height:38px}
.nav.scrolled .nav-brand .col{opacity:0}
.nav.scrolled .nav-brand .inv{opacity:1}

.nav-links{display:flex;gap:32px;font:600 14.5px var(--body);color:var(--ink-soft);transition:color .42s ease}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:18px;min-width:0}
.nav-cta{flex:none;padding:12px 20px;font-size:13.5px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s,border-color .25s,color .25s,padding .42s cubic-bezier(.16,1,.3,1),font-size .42s ease}
.nav.scrolled .nav-cta{padding:10px 18px;font-size:13px}
.nav-cta-short{display:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:44px;height:44px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:border-color .42s ease}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s,background .42s ease}

/* ---- scrolled skin: everything that has to stay readable on navy ---- */
.nav.scrolled .nav-links{color:rgba(234,241,248,.72)}
.nav.scrolled .nav-links a:hover{color:#fff}
.nav.scrolled .nav-links a.active{color:#fff}
.nav.scrolled .nav-toggle{border-color:rgba(255,255,255,.26)}
.nav.scrolled .nav-toggle span{background:#eaf1f8}
/* the travelling highlight needs the light variant once the bar goes dark */
.nav.scrolled .ab-hl{background:rgba(255,255,255,.14)}
/* Slides in from the left and opens with the mark, so it reads as the site's
   own panel rather than a stack of links. The rows are the tap target. */
.mobile-menu{display:none;position:fixed;inset:0 auto 0 0;width:min(86vw,318px);z-index:200;background:var(--navy-deep);padding:0;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);flex-direction:column;gap:0}
.mobile-menu.open{transform:none}
.mm-head{flex:none;display:flex;align-items:center;padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.mm-head img{height:38px;width:auto}
.mm-nav{flex:none;display:flex;flex-direction:column;padding:12px 24px 6px}
.mobile-menu a{display:block;padding:10px 0;font:500 18px var(--head);letter-spacing:var(--head-ls);color:#eaf1f8;transition:color .2s}
.mobile-menu a:hover{color:var(--accent)}
.mm-foot{flex:none;margin-top:auto;display:flex;flex-direction:column;gap:11px;padding:18px 24px 26px;border-top:1px solid rgba(255,255,255,.09)}
.mobile-menu .mm-tel{display:flex;align-items:center;gap:9px;padding:9px 0;font:600 15px var(--body);letter-spacing:normal;color:var(--accent)}
.mm-foot .btn{width:100%;justify-content:center;padding:14px 20px;font:700 15px var(--body);letter-spacing:normal}
.mobile-backdrop{position:fixed;inset:0;background:rgba(5,26,44,.5);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-backdrop.open{opacity:1;pointer-events:auto}

/* ---------- decorative grid + ticks ---------- */
.grid-tex{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,57,104,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,57,104,.05) 1px,transparent 1px);background-size:64px 64px}
.grid-tex.fade{-webkit-mask-image:radial-gradient(120% 120% at 30% 30%,#000 20%,transparent 78%);mask-image:radial-gradient(120% 120% at 30% 30%,#000 20%,transparent 78%)}
.tick{position:absolute;width:12px;height:12px;pointer-events:none;z-index:6}

/* ============================================================
   HERO — sticky, left text / right video
   ============================================================ */
.pin-zone{position:relative;z-index:1;background:var(--paper);isolation:isolate}
.hero{position:sticky;top:0;min-height:calc(100svh - 92px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(82% 82% at 6% 16%,#F7F9FC 0%,#F1F5F9 45%);will-change:filter,opacity,transform}
.no-motion .hero{position:relative}
.hero-inner{position:relative;z-index:5;width:100%}
.hero-text{max-width:600px}
.hero h1{font:var(--head-w) clamp(33px,27.7px + 1.68vw,66px)/1.05 var(--head);letter-spacing:var(--head-ls);color:var(--ink)}
.hero h1 .hl{color:var(--navy)}
.hero-sub{margin:24px 0 0;max-width:470px;font-size:clamp(16px,15.4px + .18vw,18px);color:var(--ink-soft)}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-certs{margin-top:42px}
.hero-certs .lead{display:inline-flex;align-items:center;gap:10px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.hero-certs .lead .bar{width:22px;height:1px;background:var(--accent)}
.hero-certs .badges{display:flex;gap:12px;flex-wrap:wrap}
.cert-badge{display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 13px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;font:600 15px var(--disp);color:var(--ink);box-shadow:0 8px 20px -14px rgba(0,45,85,.35);transition:transform .3s,border-color .3s,box-shadow .3s}
.cert-badge:hover{transform:translateY(-3px);border-color:rgba(249,147,11,.5);box-shadow:0 14px 28px -16px rgba(0,45,85,.45)}
.cert-badge svg{width:20px;height:20px;stroke:var(--accent);flex:none}

/* full-bleed video — right side, top-to-bottom, to the screen edge.
   Its left edge is cut by a curve (see #heroCurve): wide open at the top,
   sweeping in toward the bottom, so more of the footage shows on the left. */
.hero-media{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:1;overflow:hidden;
  -webkit-clip-path:url(#heroCurve);clip-path:url(#heroCurve);
  /* its own compositing layer: an objectBoundingBox clip over a playing video
     otherwise rasterises without anti-aliasing and the curve crawls */
  transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
/* Light wash shaped around the headline only: strong beside the text, gone by the
   top and bottom, so the curved cut stays crisp where you actually see it. */
.hero-media .fade{position:absolute;inset:0;pointer-events:none;background:
   radial-gradient(120% 62% at -6% 50%,rgba(241,245,249,.96) 0%,rgba(241,245,249,.72) 34%,
                   rgba(241,245,249,.28) 58%,rgba(241,245,249,0) 78%),
   linear-gradient(90deg,rgba(241,245,249,.8) 0%,rgba(241,245,249,0) 15%),
   linear-gradient(0deg,rgba(5,26,44,.24),transparent 24%)}
.media-badge-row{position:absolute;left:0;right:0;top:30px;z-index:6;display:flex;justify-content:center;pointer-events:none}
.media-badge{display:inline-flex;align-items:center;gap:9px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(5,26,44,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);padding:8px 13px;border-radius:99px}
.media-badge .dot{width:7px;height:7px;border-radius:50%;background:#28d17c;box-shadow:0 0 0 0 rgba(40,209,124,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(40,209,124,.55)}70%{box-shadow:0 0 0 9px rgba(40,209,124,0)}100%{box-shadow:0 0 0 0 rgba(40,209,124,0)}}
.media-chip{position:absolute;right:36px;bottom:32px;font:700 13px var(--body);color:#fff;background:rgba(249,147,11,.94);padding:11px 16px;border-radius:12px;box-shadow:0 12px 30px -12px rgba(249,147,11,.9)}

/* ============================================================
   STACK — sections slide over the sticky hero
   ============================================================ */
.stack{position:relative;z-index:2}
.stack>section:last-child{border-radius:34px 34px 34px 34px;box-shadow:0 36px 72px -26px rgba(0,45,85,.6)}
.slab{position:relative;background:var(--paper);padding:clamp(84px,9vw,128px) 0;scroll-margin-top:96px}
/* first slab rounds over hero */
.slab-cover{border-radius:34px 34px 0 0;box-shadow:0 -40px 80px -50px rgba(0,45,85,.55);margin-top:-2px}
.slab-tint{background:var(--tint)}
.slab-white{background:var(--paper-2)}
/* every following slab rides up over the one before it, without a dividing shadow */
.slab-lift{border-radius:34px 34px 0 0;margin-top:-40px;z-index:1}
.no-motion .slab-cover,.no-motion .slab-lift{border-radius:0;box-shadow:none;margin-top:0}

/* carousel grows into place as it scrolls in */
.ring-scale{transform-origin:50% 56%;will-change:transform}

.sec-head{max-width:660px;margin-bottom:clamp(40px,5vw,62px)}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.sec-head h2{font:var(--head-w) clamp(31px,25.7px + 1.69vw,50px)/1.08 var(--head);letter-spacing:var(--head-ls);margin-top:18px;color:var(--ink)}
.sec-head p{margin:18px 0 0;font-size:17px;color:var(--ink-soft);max-width:52ch}

/* ---------- reveal ---------- */
[data-reveal][data-reveal]{opacity:0;translate:0 34px;will-change:opacity,translate;
  transition:opacity .8s ease,translate 1.1s cubic-bezier(.16,1,.3,1),
             transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease}
[data-reveal].in{opacity:1;translate:0 0}
.drift.drift{transition-property:opacity,translate}
.no-motion [data-reveal]{opacity:1!important;translate:none!important;transform:none!important}

/* ============================================================
   SERVICES
   ============================================================ */
/* The scene is one engineered composition: copy on the left, a large interactive
   globe on the right, and precise route/floor geometry tying both together. */
.services-slab{overflow:hidden;isolation:isolate;padding-bottom:clamp(150px,13vw,190px)}
.services-slab::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 52% at 66% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
  radial-gradient(38% 28% at 66% 62%,rgba(249,147,11,.075),rgba(249,147,11,0) 74%)}
.services-slab>.wrap{position:relative;z-index:2}

.svc-head-row{position:relative;z-index:20;display:grid;grid-template-columns:minmax(330px,470px) 1fr;align-items:start;gap:34px;margin-bottom:0;pointer-events:none}
.svc-head-row .sec-head{position:relative;z-index:12;pointer-events:auto}
.svc-head-row .sec-head{max-width:470px}
.svc-head-row .sec-head h2{font-size:clamp(40px,36px + 1.39vw,56px);line-height:1.04}
.svc-head-row .sec-head p{max-width:44ch;line-height:1.72}

/* ---- services globe ---- */
.ring-scale{position:relative;z-index:10;margin-top:-7.5em;transform-origin:50% 52%}
/* while a service is open the whole globe layer rises above the section copy —
   see the note by .svc-panel */
.ring-scale.is-open{z-index:30}
.globe-stage{--globe-x:50%;--globe-y:52%;will-change:transform;position:relative;height:clamp(680px,58vw,830px);perspective:1350px;perspective-origin:var(--globe-x) var(--globe-y);cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none}
.globe-stage.dragging{cursor:grabbing}
.globe-stage.is-open{cursor:default}
.svc-orbit-field{position:absolute;z-index:1;left:var(--globe-x);top:var(--globe-y);width:min(1080px,91vw);height:clamp(330px,36vw,475px);transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.svc-orbit-line{fill:none;stroke:rgba(0,57,104,.17);stroke-width:1}
.svc-orbit-line.soft{stroke:rgba(0,111,201,.105);stroke-dasharray:5 7}
.svc-orbit-flow{fill:none;stroke:rgba(249,147,11,.58);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:7 24;animation:svcOrbitFlow 19s linear infinite;animation-play-state:paused}
.svc-orbit-node{fill:#fff;stroke:rgba(0,57,104,.2);stroke-width:1.2}
.svc-orbit-node.hot{fill:var(--accent);stroke:rgba(249,147,11,.2)}
.globe-stage.is-running .svc-orbit-flow{animation-play-state:running}
@keyframes svcOrbitFlow{to{stroke-dashoffset:-310}}
.svc-floor-field{position:absolute;z-index:0;left:var(--globe-x);bottom:-48px;width:min(1130px,96vw);height:250px;transform:translateX(-50%);overflow:visible;pointer-events:none}
.svc-floor-field ellipse,.svc-floor-field path{fill:none;stroke:rgba(0,57,104,.105);stroke-width:1}
.svc-floor-field .floor-signal{stroke:rgba(249,147,11,.36);stroke-dasharray:12 28;animation:svcFloorFlow 24s linear infinite;animation-play-state:paused}
.globe-stage.is-running .svc-floor-field .floor-signal{animation-play-state:running}
@keyframes svcFloorFlow{to{stroke-dashoffset:360}}
.svc-floor-shadow{position:absolute;z-index:1;left:var(--globe-x);bottom:12px;width:min(520px,46vw);height:52px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,45,85,.27),rgba(0,45,85,.08) 46%,transparent 72%);filter:blur(5px);pointer-events:none}

/* soft atmosphere — many stops so it fades out with no visible edge */
.globe-halo{position:absolute;z-index:0;left:var(--globe-x);top:var(--globe-y);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:
  radial-gradient(circle,rgba(249,147,11,.20) 0%,rgba(249,147,11,.115) 27%,rgba(249,147,11,.045) 43%,rgba(249,147,11,.014) 58%,rgba(249,147,11,0) 72%),
  radial-gradient(circle,rgba(0,57,104,.10) 0%,rgba(0,57,104,.045) 41%,rgba(0,57,104,.012) 58%,rgba(0,57,104,0) 72%);transition:opacity .55s ease}
.globe-stage.is-open .globe-halo{opacity:.34}

/* the sphere body */
.globe-orb{position:absolute;z-index:2;left:var(--globe-x);top:var(--globe-y);overflow:hidden;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:
  radial-gradient(circle at 31% 24%,rgba(255,255,255,.98) 0%,rgba(250,252,255,.92) 22%,rgba(231,239,248,.82) 53%,rgba(204,219,235,.86) 78%,rgba(174,198,221,.9) 100%);box-shadow:
  inset -34px -38px 74px rgba(0,57,104,.19),
  inset 18px 19px 46px rgba(255,255,255,.88),
  0 52px 92px -58px rgba(0,45,85,.78);transition:opacity .55s ease}
.globe-orb::before{content:"";position:absolute;inset:4%;border-radius:50%;opacity:.31;background-image:radial-gradient(circle,rgba(0,57,104,.34) 0 1px,transparent 1.25px);background-size:7px 7px;-webkit-mask-image:radial-gradient(ellipse at 42% 42%,#000 0 28%,transparent 29%),radial-gradient(ellipse at 66% 57%,#000 0 24%,transparent 25%),radial-gradient(ellipse at 35% 72%,#000 0 12%,transparent 13%);mask-image:radial-gradient(ellipse at 42% 42%,#000 0 28%,transparent 29%),radial-gradient(ellipse at 66% 57%,#000 0 24%,transparent 25%),radial-gradient(ellipse at 35% 72%,#000 0 12%,transparent 13%)}
.globe-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 72% 72%,rgba(249,147,11,.2),rgba(249,147,11,0) 38%),
  linear-gradient(122deg,rgba(255,255,255,.35),transparent 35%,rgba(0,57,104,.055) 72%,transparent)}
.globe{position:absolute;z-index:3;left:var(--globe-x);top:var(--globe-y);width:0;height:0;transform-style:preserve-3d;will-change:transform;transition:opacity .55s ease}
.globe-stage.is-open .globe,.globe-stage.is-open .globe-orb,.globe-stage.is-open .svc-orbit-field{opacity:.22}
.mer,.par{position:absolute;left:50%;top:50%;border:1px solid rgba(0,57,104,.18);border-radius:50%;pointer-events:none}
.par{border-color:rgba(0,57,104,.13)}

/* ---- pins: flat cards positioned by the same projection as the sphere ---- */
.globe-pins-fade{position:absolute;inset:0;pointer-events:none;z-index:5;will-change:transform,opacity}
/* the entrance owns .globe-pins-fade, the exit owns this one — one writer each */
.globe-pins-exit{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.globe-pins{position:absolute;inset:0;pointer-events:none;transition:opacity .3s ease}
.gpin{position:absolute;left:0;top:0;display:block;width:clamp(268px,21.8vw,335px);padding:0;overflow:hidden;border:0;border-radius:14px;background:var(--paper-2);color:var(--ink);box-shadow:0 25px 54px -31px rgba(0,45,85,.78);cursor:pointer;pointer-events:auto;text-align:left;font-family:var(--disp);transform-origin:center;transition:box-shadow .3s,color .25s}
.gpin-media{position:relative;display:block;aspect-ratio:16/7.8;overflow:hidden;background:var(--tint)}
.gpin-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,38,65,.22))}
.gpin-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.gpin-body{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:13px;min-height:84px;padding:14px 15px 15px 18px;background:var(--paper-2)}
.gpin-copy{display:block;min-width:0}
.gpin-code{display:block;margin-bottom:5px;font:600 11.5px var(--mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.gpin-title{display:block;font:600 clamp(16px,1.4vw,19px)/1.18 var(--disp);letter-spacing:-.015em;white-space:normal}
.gpin-open{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:#f0f4f8;color:var(--navy);transition:background .25s,color .25s,transform .25s}
.gpin-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gpin:hover,.gpin.is-active{box-shadow:0 30px 62px -29px rgba(0,45,85,.82)}
.gpin:hover .gpin-media img,.gpin.is-active .gpin-media img{transform:scale(1.055)}
.gpin:hover .gpin-open,.gpin.is-active .gpin-open{background:var(--accent);color:var(--navy-deep);transform:translateX(2px)}
.globe-stage.is-open .globe-pins{opacity:0;pointer-events:none}

/* ---- opened service card ---- */
.svc-panel{position:absolute;inset:6% 2% 4% 8%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:8;visibility:hidden}
.svc-panel.open{pointer-events:auto;visibility:visible}
.svc-panel::before{content:"";position:absolute;inset:-10% -12%;background:rgba(234,239,245,.68);backdrop-filter:blur(4px);opacity:0;transition:opacity .32s ease}
.svc-panel.open::before{opacity:1}
.svc-card{position:relative;width:min(820px,96%);max-height:100%;display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;
  border-radius:22px;background:var(--navy-deep);color:#eaf1f8;box-shadow:0 60px 110px -45px rgba(0,45,85,.8);
  opacity:0;will-change:transform,opacity;z-index:1}
.svc-card-media{position:relative;min-height:280px;background-size:cover;background-position:center}
.svc-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,38,65,.15),rgba(5,38,65,.8))}
.svc-card-body{padding:clamp(26px,3vw,40px)}
.svc-card-body .idx{display:inline-block;font:600 11.5px var(--mono);letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.svc-card-body h3{font:var(--head-w) clamp(21px,18.8px + .85vw,31px) var(--head);color:#fff;margin:0 0 12px;letter-spacing:var(--head-ls)}
.svc-card-body p{margin:0;font-size:15px;line-height:1.65;color:rgba(234,241,248,.8)}
.svc-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.svc-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:rgba(234,241,248,.78)}
.svc-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--accent)}
.svc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.svc-meta span{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(234,241,248,.85);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:99px}
.svc-card-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(5,26,44,.55);color:#eaf1f8;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .35s,color .25s;z-index:3}
.svc-card-close:hover{background:var(--accent);color:#052641;transform:rotate(90deg)}
.svc-card-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}

.svc-controls{position:relative;z-index:11;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(18px,2vw,28px);text-align:center}
.ring-hint{margin-top:0;text-align:center;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:.72;user-select:none}
.ring-dots{display:flex;gap:2px;justify-content:center;margin-top:0}
.ring-dot{position:relative;width:24px;height:22px;border:0;padding:0;background:none;cursor:pointer}
.ring-dot::before{content:"";position:absolute;left:1px;top:50%;width:22px;height:7px;border-radius:99px;background:var(--line);transform:translateY(-50%) scaleX(.32);transition:background .3s,transform .3s}
.ring-dot.on::before{background:var(--accent);transform:translateY(-50%) scaleX(1)}
@media(max-width:760px){
  .services-slab{padding-bottom:88px}
  
  .svc-head-row{display:grid;grid-template-columns:1fr;gap:24px}
  .svc-head-row .sec-head{grid-column:1/-1;max-width:100%}
  /* -70px tucked the sphere so far up that the cards crossed the paragraph
     above them; the stage is no longer tall enough to absorb that. */
  .ring-scale{margin-top:-8px;transform-origin:50% 44%}
  .globe-stage{--globe-x:50%;--globe-y:52%;height:360px}
  .svc-orbit-field{width:165vw;height:310px;opacity:.72}
  /* Both used to hang off the stage's bottom edge, so the contact shadow sat
     47px clear of the sphere and it read as floating. Anchored to the sphere's
     own centre and radius instead — the ratios the wide layout works out to. */
  .svc-floor-field{top:calc(var(--globe-y) + var(--globe-r,127px) * .45);bottom:auto;width:178vw;height:190px}
  .svc-floor-shadow{top:calc(var(--globe-y) + var(--globe-r,127px) * .85);bottom:auto;width:78vw}
  .globe-halo{max-width:calc(100vw - 40px);max-height:calc(100vw - 40px)}
  /* The cards used to be 213px on a 375px screen: 0.82 of the sphere's own
     diameter, where the wide layout the client signed off on runs at 0.39. The
     width is tied to the viewport and the title to the same ramp, so the longest
     one-word title (Elektroinstalacie) still fits its column at 320px. */
  .gpin{width:clamp(150px,42vw,168px);border-radius:11px}
  .gpin-media{aspect-ratio:16/7.2}
  .gpin-body{grid-template-columns:minmax(0,1fr) 24px;gap:7px;min-height:54px;padding:9px 11px 10px 12px}
  .gpin-code{margin-bottom:3px;font-size:10px;letter-spacing:.1em}
  .gpin-title{font-size:clamp(12px,3.4vw,13.5px);line-height:1.15}
  .gpin-open{width:24px;height:24px;border-radius:7px}
  .gpin-open svg{width:14px;height:14px}
  /* the pagination bars are the only thumb target in the scene */
  .ring-dot{width:30px;height:34px}
  /* one column, and let the text area scroll instead of being cut off.
     The panel is deliberately taller than the stage — the stage is only as
     tall as the sphere needs, the open card needs room for its picture. */
  .svc-panel{inset:-110px -8px}
  /* The scrim was inset -10%/-12% of the stage, so its top edge cut a hard
     blur seam straight through the section heading. Pushed well past the
     slab, which clips it, so there is no edge to see. */
  .svc-panel::before{inset:-150vh -100vw}
  .svc-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:100%}
  .svc-card-media{min-height:0;aspect-ratio:16/9.6}
  .svc-card-body{padding:20px 20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .svc-card-body h3{margin-bottom:9px}
  .svc-card-body p{font-size:14px}
  .svc-list{margin-top:14px;gap:7px}
  .svc-list li{font-size:13.5px;padding-left:21px}
  .svc-meta{margin-top:16px}
  .svc-controls{margin-top:14px}
  .ring-hint{max-width:290px;margin:0 auto;line-height:1.5}
}

/* Between the phone block and the wide layout the cards were still running at
   0.6 of the orb; this keeps the same proportion the desktop composition has. */
@media(min-width:761px) and (max-width:1050px){
  .gpin{width:clamp(196px,26vw,252px);border-radius:12px}
  .gpin-body{grid-template-columns:minmax(0,1fr) 36px;gap:11px;min-height:74px;padding:12px 13px 13px 15px}
  .gpin-code{font-size:10.5px}
  .gpin-title{font-size:clamp(14px,1.85vw,16.5px)}
  .gpin-open{width:36px;height:36px;border-radius:10px}
  .gpin-open svg{width:16px;height:16px}
}

/* ============================================================
   ABOUT
   ============================================================ */
/* white, so the tinted Services slab that rides up over it reads as a clear
   break — this section used to hand over to the client logo strip instead */
.about-slab{overflow:hidden;isolation:isolate;background:var(--paper-2)}
/* …but only the top stays white: the last stretch melts into the tint of the
   Services slab below, so the two read as joined instead of butted together.
   It sits at z-index 0, above the section's own background and the pcb art —
   which fades out with it — and below .about-grid, so the copy is untouched.
   The end colour is spelled out rather than `transparent`, which is
   rgba(0,0,0,0) and can grey the ramp on the way. */
.about-slab::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;
  height:clamp(200px,19vw,270px);pointer-events:none;
  background:linear-gradient(180deg,rgba(234,239,245,0),var(--tint))}

.about-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(44px,5.5vw,82px);align-items:center}
.about-copy{max-width:570px}
.about-copy h2{font:var(--head-w) clamp(32px,32.4px + 1.35vw,52px)/1.06 var(--head);letter-spacing:var(--head-ls);margin:18px 0 0;text-wrap:balance}
.about-copy p{max-width:52ch;font-size:16.5px;color:var(--ink-soft);line-height:1.75}
.about-rule{width:58px;height:3px;margin:26px 0 24px;border-radius:3px;background:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.tag{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;background:var(--paper-2);box-shadow:0 10px 26px -22px rgba(0,45,85,.72);font:650 13px/1.25 var(--body);color:var(--ink)}
.tag svg{width:18px;height:18px;flex:none;color:var(--accent);stroke-width:1.9}

.about-visual{position:relative;min-width:0}
.about-media-frame{position:relative;padding:10px;border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 34px 76px -52px rgba(0,45,85,.72)}
.about-media-frame::before{content:"";position:absolute;inset:-18px -20px 36%;z-index:-1;border:1px solid rgba(0,111,201,.16);border-radius:26px 26px 8px 8px;clip-path:polygon(0 18%,18% 18%,22% 0,82% 0,86% 12%,100% 12%,100% 100%,0 100%)}
.about-media-frame::after{content:"";position:absolute;right:-28px;top:-24px;width:104px;height:88px;z-index:-1;opacity:.42;background-image:radial-gradient(rgba(0,111,201,.42) 1.15px,transparent 1.15px);background-size:10px 10px}
.about-media{position:relative;overflow:hidden;aspect-ratio:16/10.5;border-radius:15px;background:var(--tint)}
.about-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.about-media-frame:hover .about-media img{transform:scale(1.025)}
.about-media .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,38,65,.02) 48%,rgba(5,38,65,.28))}
.about-corner{position:absolute;width:40px;height:40px;z-index:2;pointer-events:none}
.about-corner.tl{left:17px;top:17px;border-left:1px solid rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.8)}
.about-corner.br{right:17px;bottom:17px;border-right:1px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.8)}
.about-proof{position:absolute;left:clamp(-42px,-3vw,-18px);top:19%;z-index:4;display:flex;flex-direction:column;align-items:flex-start;width:216px;padding:15px 17px 16px;border-radius:14px;background:var(--paper-2);box-shadow:0 24px 50px -28px rgba(0,45,85,.75)}
.about-proof-icon{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:10px;background:rgba(249,147,11,.13);color:var(--accent)}
.about-proof-icon svg{width:20px;height:20px;stroke-width:1.9}
.about-proof-copy{display:flex;flex-direction:column;margin-top:9px;line-height:1.1}
.about-proof-copy small{font:600 10.5px/1.2 var(--body);color:var(--ink-soft)}
.about-proof-copy strong{margin-top:3px;font:600 14px/1.1 var(--disp);color:var(--navy);white-space:nowrap}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.stat-box{position:relative;min-height:138px;padding:21px 22px 20px;border-radius:15px;background:var(--paper-2);box-shadow:0 14px 34px -27px rgba(0,45,85,.62);overflow:hidden;transition:transform .3s,box-shadow .3s}
.stat-box::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.stat-box::after{content:"";position:absolute;right:0;bottom:0;width:76px;height:50px;opacity:.2;background-image:radial-gradient(rgba(0,57,104,.36) 1px,transparent 1px);background-size:9px 9px;mask-image:linear-gradient(135deg,transparent,#000)}
.stat-box:hover{transform:translateY(-3px);box-shadow:0 22px 42px -27px rgba(0,45,85,.72)}
.stat-icon{display:flex;width:26px;height:26px;align-items:center;justify-content:center;margin-bottom:9px;color:var(--accent)}
.stat-icon svg{width:22px;height:22px;stroke-width:1.8}
.stat-box .num{font:600 clamp(32px,30.8px + .86vw,44px)/.95 var(--disp);color:var(--accent);font-variant-numeric:tabular-nums}
.stat-box .lbl{margin-top:8px;font:550 13.5px var(--body);color:var(--ink-soft)}

/* ============================================================
   DARK CTA BAND (overlaps)
   ============================================================ */
.cta-slab{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(86px,9vw,126px)}
.cta-inner{position:relative;overflow:hidden;min-height:330px;border-radius:22px;padding:clamp(42px,5.5vw,72px);background:var(--navy);box-shadow:0 38px 78px -42px rgba(0,45,85,.82);color:#eaf1f8;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);align-items:center;gap:clamp(36px,6vw,92px);isolation:isolate}
.cta-art{position:absolute;right:0;bottom:0;z-index:0;width:74%;height:100%;object-fit:contain;object-position:right bottom;opacity:.52;pointer-events:none}
.cta-copy{position:relative;z-index:2}
.cta-inner h2{font:var(--head-w) clamp(29px,29.4px + 1.15vw,46px)/1.08 var(--head);letter-spacing:var(--head-ls);color:#fff;max-width:720px;text-wrap:balance}
.cta-inner p{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:rgba(234,241,248,.76);max-width:570px}
.cta-actions{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;width:100%}
.cta-actions .btn{width:100%;min-height:58px;padding:16px 20px;justify-content:space-between}
.cta-actions .btn svg{width:19px;height:19px;flex:none;stroke-width:1.9}
.cta-actions .btn-ghost-dark{justify-content:center;gap:11px}

/* ============================================================
   REACH / MAP
   ============================================================ */
.reach-slab{position:relative;overflow:hidden;isolation:isolate;background:#fff}
.reach-map-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.085;pointer-events:none}
.reach-grid{position:relative;z-index:1;display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(44px,5.5vw,78px);align-items:center}
.reach-copy{max-width:560px}
.reach-copy h2{font:var(--head-w) clamp(33px,28.4px + 1.5vw,50px)/1.08 var(--head);letter-spacing:var(--head-ls);margin:18px 0 0;text-wrap:balance}
.reach-copy p{max-width:49ch;margin:22px 0 0;color:var(--ink-soft);font-size:16.5px;line-height:1.75}
.reach-visual{position:relative;min-width:0}
.reach-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--tint);box-shadow:0 34px 72px -48px rgba(0,45,85,.8)}
.reach-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.reach-media:hover img{transform:scale(1.025)}
.reach-media .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,38,65,.03) 50%,rgba(5,38,65,.24))}
.reach-proof{position:absolute;left:24px;bottom:24px;z-index:2;width:185px;padding:18px 18px 20px;border-radius:14px;background:rgba(5,38,65,.9);box-shadow:0 26px 54px -30px rgba(5,26,44,.95);color:#fff;backdrop-filter:blur(8px)}
.reach-proof-top{display:flex;align-items:center;gap:11px}
.reach-proof-icon{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:#fff}
.reach-proof-icon svg{width:19px;height:19px;stroke-width:1.8}
.reach-proof-number{font:600 31px/.95 var(--disp);font-variant-numeric:tabular-nums}
.reach-proof-label{display:block;margin:5px 0 0 47px;font:500 13px var(--body);color:rgba(255,255,255,.76)}
.reach-proof-rule{display:block;width:100%;height:1px;margin:16px 0;background:linear-gradient(90deg,var(--accent),rgba(249,147,11,.14))}
.reach-proof-copy{font:600 14px/1.35 var(--body);color:rgba(255,255,255,.9)}
.pins{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pin{display:inline-flex;align-items:center;gap:7px;font:600 13.5px var(--body);color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:8px 14px;border-radius:99px}
.pin svg{width:15px;height:15px;stroke-width:2;flex:none}
.pin.hot{color:#b85f00;background:#fff8ee;border-color:var(--accent);box-shadow:0 10px 24px -18px rgba(249,147,11,.8)}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-slab{position:relative;overflow:hidden;isolation:isolate;background:#f4f7fa}
.projects-slab::before{content:"";position:absolute;inset:0;z-index:0;background:url('../img/generated/projects-blueprint-bg.webp') center/cover no-repeat;pointer-events:none}
.projects-slab::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(244,247,250,.1),rgba(244,247,250,.36));pointer-events:none}
.projects-slab>.pcb-field{opacity:.72}


.projects-slab>.wrap{position:relative;z-index:1}
.projects-head .btn{gap:18px;white-space:nowrap}
.projects-head .btn svg{width:19px;height:19px;stroke-width:1.8;transition:transform .28s ease}
.projects-head .btn:hover svg{transform:translateX(4px)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{display:flex;min-width:0;flex-direction:column;background:var(--paper-2);border-radius:15px;overflow:hidden;box-shadow:0 18px 42px -30px rgba(5,38,65,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.proj:hover,.proj:focus-visible{transform:translateY(-6px);box-shadow:0 28px 58px -30px rgba(5,38,65,.72)}
.proj-img{position:relative;height:250px;overflow:hidden;background:var(--tint)}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.proj:hover .proj-img img{transform:scale(1.07)}
.proj-tag{position:absolute;top:16px;left:16px;font:500 11px var(--mono);letter-spacing:.08em;color:#052641;background:var(--accent);padding:7px 12px;border-radius:6px;box-shadow:0 8px 22px -12px rgba(5,38,65,.85)}
.proj-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-height:192px;padding:21px 24px 23px}
.proj-rule{display:block;width:32px;height:2px;margin-bottom:18px;background:var(--accent)}
.proj-body h3{font:var(--head-w) 20px/1.25 var(--head);color:var(--ink);margin-bottom:9px;letter-spacing:var(--head-ls)}
.proj-body p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.proj-arrow{display:flex;width:36px;height:28px;align-items:center;justify-content:flex-end;align-self:flex-end;margin-top:auto;color:var(--navy)}
.proj-arrow svg{width:23px;height:23px;stroke-width:1.6;transition:transform .28s ease}
.proj:hover .proj-arrow svg{transform:translateX(5px)}
.note{display:flex;align-items:center;gap:9px;margin:28px 0 0;font-size:13.5px;color:var(--ink-soft);opacity:.78}
.note svg{width:17px;height:17px;flex:none;stroke-width:1.8}

/* ============================================================
   CAREER
   ============================================================ */
.career-slab{overflow:hidden;isolation:isolate;background:#fff}
.career-wrap{position:relative;z-index:1}

/* Two columns: the pitch and the four benefit boxes on the left, one application
   form on the right. The old per-position cards (each with its own modal) are
   gone — every role now goes through the same multi-step form. */
.career-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(28px,3.4vw,62px);align-items:start}
.career-col{min-width:0}
.career-head{max-width:560px;margin-bottom:clamp(24px,2.4vw,32px)}
.career-head h2{font-size:clamp(32px,27.9px + 1.56vw,52px);max-width:15ch;text-wrap:balance}
.career-head p{max-width:48ch;line-height:1.7}
.career-benefits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.1vw,16px);margin:0}
.career-benefit{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;min-width:0;padding:clamp(18px,1.5vw,23px);border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 22px 50px -44px rgba(0,45,85,.8);transition:transform .35s,border-color .35s,box-shadow .35s}
.career-benefit:hover{transform:translateY(-4px);border-color:rgba(249,147,11,.38);box-shadow:0 30px 60px -42px rgba(0,45,85,.8)}
.benefit-icon{position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:#f3f6fa;color:var(--navy)}
.benefit-icon>svg:first-child{width:28px;height:28px;stroke-width:1.65}
.benefit-icon .benefit-accent{position:absolute;right:5px;bottom:5px;width:15px;height:15px;padding:2px;border-radius:50%;background:#fff;color:var(--accent);stroke-width:3}
.career-benefit strong{font:700 clamp(14px,1.18vw,16.5px)/1.3 var(--body);color:var(--ink)}
.career-benefit em{display:block;margin-top:5px;font-style:normal;font:500 13px/1.5 var(--body);color:var(--ink-soft)}
.career-aside{margin-top:22px;display:flex;align-items:center;gap:11px;font:600 13.5px/1.55 var(--body);color:var(--ink-soft)}
.career-aside i,.career-aside svg{flex:none;width:18px;height:18px;color:var(--accent);stroke-width:2}
.career-aside a{color:var(--navy);font-weight:750;border-bottom:1px solid rgba(0,57,104,.3)}
.career-aside a:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   APPLICATION CARD — one multi-step form for every position
   ============================================================ */
.apply{position:relative;border-radius:22px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);
  box-shadow:0 60px 120px -74px rgba(0,45,85,.95),0 4px 14px -9px rgba(0,45,85,.3)}
.apply-head{position:relative;padding:clamp(22px,2.1vw,28px) clamp(22px,2.2vw,32px) clamp(20px,2vw,26px);background:var(--navy-deep);color:#eaf1f8;overflow:hidden}
.apply-head::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 130% at 88% 0%,#000 10%,transparent 72%);mask-image:radial-gradient(120% 130% at 88% 0%,#000 10%,transparent 72%)}
.apply-head .eyebrow{position:relative;z-index:2;color:var(--accent)}
.apply-head h3{position:relative;z-index:2;margin-top:11px;font:var(--head-w) clamp(21px,2.05vw,28px)/1.14 var(--head);letter-spacing:var(--head-ls);color:#fff}

/* ---- stepper ---- */
.steps{position:relative;z-index:2;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:clamp(20px,2vw,26px) 0 0;padding:0;list-style:none}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
/* the rail is drawn by each step toward the one before it, so it is always
   exactly centre-to-centre whatever the column width turns out to be */
/* the rail stops 6px short of each dot on both sides, so it reads as joining
   them rather than running through them */
.step::before{content:"";position:absolute;z-index:1;top:15px;left:calc(-50% + 22px);width:calc(100% - 44px);height:2px;background:rgba(255,255,255,.15);transition:background .45s ease}
.step:first-child::before{display:none}
.step.done::before,.step.is-on::before{background:var(--accent)}
.step .dot{position:relative;z-index:2;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#0a2c4a;border:1.5px solid rgba(255,255,255,.24);font:600 13px var(--mono);color:rgba(234,241,248,.7);
  transition:background .35s,border-color .35s,color .35s,box-shadow .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.step .dot b{transition:opacity .2s}
.step .dot svg{position:absolute;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .22s,transform .3s cubic-bezier(.16,1,.3,1)}
.step.is-on .dot{background:var(--accent);border-color:var(--accent);color:#052641;transform:scale(1.08);box-shadow:0 0 0 5px rgba(249,147,11,.16)}
.step.done .dot{background:#0a2c4a;border-color:var(--accent);color:var(--accent)}
.step.done .dot b{opacity:0}
.step.done .dot svg{opacity:1;transform:none}
.step .lbl{font:600 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(234,241,248,.46);transition:color .35s;white-space:nowrap}
.step.is-on .lbl{color:#fff}
.step.done .lbl{color:rgba(234,241,248,.72)}

/* ---- body / panes ---- */
.apply-body{position:relative;padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,32px) clamp(24px,2.3vw,30px)}
/* The card animates to the height of the step it is on — see applyHeight below. */
.apply-form{transition:height .42s cubic-bezier(.16,1,.3,1)}
.apply-form .pane{display:none}
.apply-form .pane.is-on{display:block}
.no-motion .apply-form{transition:none}
.apply-form .pane.is-on>*{animation:paneRise .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*.06s)}
@keyframes paneRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.no-motion .apply-form .pane.is-on>*{animation:none}
@media(prefers-reduced-motion:reduce){.apply-form .pane.is-on>*{animation:none}}
.pane-title{margin:0 0 5px;font:var(--head-w) clamp(18px,1.5vw,21px) var(--head);color:var(--ink);letter-spacing:var(--head-ls)}
.pane-note{margin:0 0 18px;max-width:52ch;font:500 14px/1.6 var(--body);color:var(--ink-soft)}

/* ---- position picker ---- */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.role{position:relative;display:flex;align-items:flex-start;gap:14px;min-width:0;padding:16px 34px 16px 15px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;
  transition:border-color .25s,background .25s,box-shadow .25s,transform .25s;-webkit-tap-highlight-color:transparent}
.role:hover{border-color:rgba(249,147,11,.5);transform:translateY(-2px);box-shadow:0 20px 36px -30px rgba(0,45,85,.9)}
.role input{position:absolute;opacity:0;width:0;height:0}
.role-ico{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#f1f5f9;color:var(--navy);transition:background .25s,color .25s}
.role-ico svg,.role-ico i{width:23px;height:23px;stroke-width:1.7}
.role-txt{min-width:0}
.role-txt b{display:block;font:600 16.5px var(--disp);color:var(--ink);letter-spacing:-.01em}
.role-txt em{display:block;margin-top:3px;font-style:normal;font:500 12.8px/1.45 var(--body);color:var(--ink-soft)}
.role-tick{position:absolute;top:13px;right:13px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;opacity:0;transform:scale(.5);transition:opacity .22s,transform .3s cubic-bezier(.16,1,.3,1)}
.role-tick svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.role.on{border-color:var(--accent);background:#fff8ee;box-shadow:0 18px 36px -28px rgba(249,147,11,.95)}
.role.on .role-ico{background:var(--accent);color:#fff}
.role.on .role-tick{opacity:1;transform:none}
.role.wide{grid-column:1/-1}
.role input:focus-visible~.role-ico{box-shadow:0 0 0 4px rgba(249,147,11,.28)}
.fset.err .role-grid .role{border-color:#d94a3d}

/* what has been chosen so far, echoed at the top of every later step */
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.role-tag{display:inline-flex;align-items:center;gap:9px;margin:0;padding:7px 13px 7px 8px;border-radius:99px;background:#fff8ee;border:1px solid rgba(249,147,11,.35);font:700 12.5px var(--body);color:var(--ink)}
.role-tag.alt{background:#f1f5f9;border-color:var(--line)}
.role-tag.alt .ico{background:var(--navy)}
.role-tag .ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff}
.role-tag .ico svg,.role-tag .ico i{width:13px;height:13px;stroke-width:2.4}
.role-tag button{border:0;background:none;padding:0 0 0 3px;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.role-tag button:hover{color:var(--accent)}

/* ---- step controls ---- */
.apply-nav{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.apply-nav .btn{min-width:0;padding:13px 22px;font-size:14px}
.apply-nav .btn i,.apply-nav .btn svg{width:17px;height:17px;stroke-width:2;transition:transform .25s}
.apply-nav .btn-primary:hover i,.apply-nav .btn-primary:hover svg{transform:translateX(4px)}
.apply-nav .btn-ghost:hover i,.apply-nav .btn-ghost:hover svg{transform:translateX(-4px)}
.apply-nav .sp{flex:1}
.apply-step-count{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.8;white-space:nowrap}
.apply [hidden]{display:none!important}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.quality-slab{overflow:hidden;isolation:isolate;background:#edf2f7}
.quality-wrap{position:relative;z-index:1}

.quality-intro{display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);align-items:center;gap:clamp(44px,7vw,100px);margin-bottom:clamp(46px,6vw,72px)}
.quality-copy{max-width:650px}
.quality-copy h2{font:var(--head-w) clamp(38px,30px + 2.5vw,66px)/1.06 var(--head);letter-spacing:var(--head-ls);margin:22px 0 0;color:var(--ink);text-wrap:balance}
.quality-title-rule{display:block;width:54px;height:3px;margin-top:24px;background:var(--accent)}
.quality-copy p{max-width:58ch;margin:22px 0 0;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.quality-visual{display:grid;place-items:center;min-width:0}
.quality-seal-art{display:block;width:min(100%,520px);height:auto;overflow:visible}
.quality-seal-art .seal-grid{stroke:rgba(0,111,201,.22);stroke-width:1}
.quality-seal-art .seal-ring{stroke:rgba(0,57,104,.32);stroke-width:1.15}
.quality-seal-art .seal-shield{stroke:var(--navy);stroke-width:2.3;fill:rgba(255,255,255,.62)}
.quality-seal-art .seal-check{stroke:var(--navy);stroke-width:2.6}
.quality-seal-art .seal-node{fill:var(--accent)}
.quality-seal-art text{font:600 12px var(--disp);letter-spacing:.28em;fill:var(--navy)}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cert{position:relative;display:flex;flex-direction:column;min-height:286px;padding:30px 30px 28px;background:#fff;border:0;border-radius:16px;box-shadow:0 24px 60px -48px rgba(0,45,85,.72);transition:transform .35s,box-shadow .35s}
.cert:hover{transform:translateY(-5px);box-shadow:0 32px 70px -48px rgba(0,45,85,.85)}
.cert .row{display:flex;align-items:center;gap:18px;margin-bottom:0}
.cert-icon{position:relative;display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border:1px solid rgba(0,57,104,.14);border-radius:50%;color:var(--navy)}
.cert-icon::after{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-top-color:var(--accent);border-left-color:var(--accent);border-radius:50%;transform:rotate(-24deg)}
.cert-icon svg{width:33px;height:33px;stroke-width:1.65}
.cert h3{font:var(--head-w) clamp(22px,2vw,27px)/1.1 var(--head);letter-spacing:var(--head-ls);color:var(--ink)}
.cert-rule{height:1px;margin:22px 0 19px;background:var(--line-soft)}
.cert p{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.68}
.cert-mark{display:block;width:24px;height:27px;margin-top:auto;border-bottom:3px solid var(--accent)}

/* ============================================================
   CONTACT (dark) + FOOTER
   ============================================================ */
.contact{--footer-line:1;position:relative;z-index:2;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%, #ffffff 0%, #0039689c 45%, var(--navy-deep) 100%);color:#eaf1f8;padding:clamp(96px,11vw,150px) 0 clamp(88px,9vw,118px);text-align:center;border-radius:34px 34px 0 0}
.contact::after{content:"";position:absolute;z-index:3;top:0;left:50%;width:min(760px,72vw);height:1px;background:linear-gradient(90deg,transparent,rgba(249,147,11,.9) 42%,rgba(255,180,78,.9) 58%,transparent);transform:translateX(-50%) scaleX(var(--footer-line));transform-origin:50% 50%;opacity:.9}
.contact .glow{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(249,147,11,.14),transparent 60%);pointer-events:none}
.contact .wrap{position:relative;z-index:2}
.contact h2{font:var(--head-w) clamp(34px,26.1px + 2.63vw,64px)/1.05 var(--head);letter-spacing:var(--head-ls);color:#fff;position:relative}
.contact p{margin:22px auto 0;max-width:560px;font-size:17.5px;color:rgba(234,241,248,.74);position:relative}
.contact .hero-cta{justify-content:center;position:relative}

/* contact + footer form one sticky layer uncovered by the preceding content */
/* the layer that gets uncovered — pulled up under the sheet, then released */
.footer-reveal{position:relative;z-index:0;background:var(--tint);will-change:transform}
/* this band is animated by GSAP, so the generic reveal transition must not run:
   it would smooth every scrubbed write over 0.8s and leave the copy trailing.
   `translate` has to be cleared too — GSAP writes `transform`, so the CSS offset
   would otherwise stack on top of it. */
.footer-reveal [data-reveal]{transition:none;translate:none}
.no-motion .footer-reveal{transform:none!important}
/* no seam: the footer simply continues where the contact gradient ends */
footer{position:relative;z-index:1;margin-top:-1px;background:var(--navy-deep);color:#eaf1f8;padding:56px 0 34px;overflow:hidden;
  /* the page height is fractional, so the last device-pixel row at the very
     bottom is only part-covered and the body's light background bleeds through
     as a hairline; this paints under the border box without changing layout */
  box-shadow:0 3px 0 var(--navy-deep)}
.foot-grid>div,.foot-legal{will-change:transform,opacity}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.foot-logo{height:56px;width:auto;margin-bottom:20px}
.foot-about{max-width:280px;font-size:14.5px;line-height:1.7;color:rgba(234,241,248,.56)}
.foot-col h4{font:600 12px var(--mono);letter-spacing:.16em;color:rgba(234,241,248,.42);margin:0 0 18px;text-transform:uppercase}
.foot-col a,.foot-col span{display:block;font:500 14.5px var(--body);color:rgba(234,241,248,.72);margin-bottom:11px;width:fit-content;transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-legal{max-width:1240px;margin:40px auto 0;padding:24px clamp(20px,5vw,64px) 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;font-size:13px;color:rgba(234,241,248,.42)}
.foot-legal a{transition:color .2s}
.foot-legal-links{display:inline-flex;flex-wrap:wrap;gap:6px 22px}
.foot-legal a:hover{color:var(--accent)}
/* The wide layout draws this band as one 120%x90% ellipse, and there the section
   is 1.7x wider than tall, so it reads as a broad wash. At phone widths the same
   section is 3.3x taller than wide, and the identical percentages collapse it
   into a narrow vertical shaft pinched dark at both edges. So the light is given
   its own wide, flat ellipse and a vertical ramp carries the depth down into the
   footer, which ends on the same navy the footer is painted in. */
@media(max-width:760px){
  .contact{background:
    radial-gradient(172% 27% at 50% 6%,#ffffff 0%,rgba(255,255,255,.52) 30%,rgba(255,255,255,0) 78%),
    linear-gradient(180deg,#5B809F 0%,#4B6984 26%,#1D4265 58%,var(--navy-deep) 86%)}
}



/* ============================================================
   SCROLL CHOREOGRAPHY — extra reveals
   ============================================================ */
/* headline reveal: each line rides up from behind a mask */
.split-line{display:block;overflow:hidden;padding:.22em 0 .18em;margin:-.22em 0 -.18em}
.split-line>span{display:block;transform:translateY(110%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.split.in .split-line>span{transform:none}
.no-motion .split-line>span{transform:none!important}

/* soft parallax containers */
[data-para]{will-change:transform}
.no-motion [data-para]{transform:none!important}


/* Brandkit PCB fragments: quiet connected tracks, with occasional copper contacts.
   No repeating frame, isolated marks, glow, or background colour changes. */
.pcb-field{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block;overflow:hidden;pointer-events:none;color:#526e87;
  --pcb-mask:linear-gradient(90deg,#000,rgba(0,0,0,.48) 9%,rgba(0,0,0,.2) 20%,transparent 38% 62%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.48) 91%,#000);
  -webkit-mask-image:var(--pcb-mask);mask-image:var(--pcb-mask)}
.pcb-field path,.pcb-field circle{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pcb-base{opacity:.105}
.pcb-live{opacity:.26}
.pcb-powered{opacity:0}
.pcb-powered circle{stroke-opacity:.34}
.pcb-track--signal .pcb-powered{color:#d48b32}
.pcb-track--signal .pcb-powered circle{stroke-opacity:.62;stroke-width:1.35}
.services-slab>.pcb-field{z-index:1}
.contact>.pcb-field{color:#8cabbe}
.contact .pcb-base{opacity:.14}
.contact .pcb-live{opacity:.32}
.contact .pcb-track--signal .pcb-powered{color:var(--accent-2)}
@media(max-width:760px){
  .pcb-field{--pcb-mask:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.12) 12%,transparent 28% 72%,rgba(0,0,0,.12) 88%,rgba(0,0,0,.65))}
}
@media(prefers-reduced-motion:reduce){
  .pcb-field .pcb-live{stroke-dashoffset:0!important}
}


/* hero scroll cue */
.hero-cue{position:absolute;left:50%;bottom:26px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px;transform:translateX(-50%);font:600 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);opacity:.72;pointer-events:none}
.hero-cue .rail{position:relative;width:1px;height:46px;overflow:hidden;background:rgba(0,57,104,.16)}
.hero-cue .rail::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--accent);animation:cueRun 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cueRun{0%{transform:translateY(-18px)}100%{transform:translateY(48px)}}
@media(max-width:1000px){.hero-cue{display:none}}

/* nav scrollspy */
.nav-links a.active{color:var(--ink);font-weight:700}

/* ============================================================
   OVERLAYS — consultation drawer + job application modal
   ============================================================ */
.ov-scrim{position:fixed;inset:0;z-index:400;background:rgba(5,26,44,.52);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.ov-scrim.on{opacity:1;pointer-events:auto}

.ov{position:fixed;z-index:410;display:flex;flex-direction:column;background:var(--paper-2);color:var(--ink);box-shadow:-40px 0 90px -50px rgba(0,45,85,.9),0 40px 90px -50px rgba(0,45,85,.6);visibility:hidden}
.ov.on{visibility:visible}
.ov[hidden]{display:none}

/* drawer — slides from the right */
.ov-drawer{top:0;right:0;bottom:0;width:min(780px,95vw);transform:translateX(102%);transition:transform .58s cubic-bezier(.16,1,.3,1),visibility 0s linear .62s}
.ov-drawer.on{transform:none;transition:transform .58s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}

/* modal — centred sheet */
/* rises from the bottom edge, the same gesture as the consultation drawer */
.ov-modal{left:50%;bottom:0;width:min(1000px,96vw);max-height:min(92svh,1020px);border-radius:26px 26px 0 0;overflow:hidden;
  transform:translate(-50%,100%);transition:transform .62s cubic-bezier(.16,1,.3,1),visibility 0s linear .64s}
.ov-modal.on{transform:translate(-50%,0);transition:transform .62s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}
.ov-modal .ov-grab{display:block}

.ov-head{position:relative;flex:none;padding:26px clamp(22px,3vw,38px) 20px;background:var(--navy-deep);color:#eaf1f8;overflow:hidden}
.ov-head::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 130% at 88% 0%,#000 10%,transparent 72%);mask-image:radial-gradient(120% 130% at 88% 0%,#000 10%,transparent 72%)}
.ov-head .eyebrow{color:var(--accent);position:relative;z-index:2}
.ov-head h3{position:relative;z-index:2;margin-top:12px;font:var(--head-w) clamp(24px,2.6vw,33px)/1.1 var(--head);letter-spacing:var(--head-ls);color:#fff}
.ov-head p{position:relative;z-index:2;margin:11px 0 0;max-width:52ch;font-size:14.5px;line-height:1.6;color:rgba(234,241,248,.72)}
.ov-close{position:absolute;top:18px;right:18px;z-index:4;display:flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.06);color:#eaf1f8;cursor:pointer;transition:background .25s,color .25s,transform .4s}
.ov-close:hover{background:var(--accent);border-color:var(--accent);color:#052641;transform:rotate(90deg)}
.ov-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ov-grab{display:none}

.ov-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px) clamp(26px,3vw,36px)}
.ov-body::-webkit-scrollbar{width:9px}
.ov-body::-webkit-scrollbar-thumb{background:rgba(0,57,104,.18);border-radius:9px;border:3px solid var(--paper-2)}

/* ---- step 1 of the drawer: a short pitch, then the form on request ---- */
/* the body becomes a centring column while the pitch is up, and still scrolls
   if it does not fit; the form and its trust strip are simply not laid out */
#ovConsult:not(.step-form) .ov-body{display:flex;flex-direction:column;justify-content:flex-start}
#ovConsult:not(.step-form) .ov-facts,
#ovConsult:not(.step-form) .frm{display:none}
#ovConsult.step-form .ov-intro{display:none}
/* the head paragraph would only repeat the pitch, so it waits for the form */
#ovConsult:not(.step-form) .ov-head p{display:none}
/* was flex:1 with justify-content:center — in a drawer this tall that dropped
   the whole block to the middle of the panel and left a void under the head */
.ov-intro{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(16px,4vh,44px) 0 8px}
/* place-items alone centres each row in its own stretched track, which is what
   pushed "24" and "hodin" to opposite ends of the disc — align-content packs
   the two rows together and centres them as one block */
.ov-intro-seal{position:relative;display:grid;place-items:center;align-content:center;width:108px;height:108px;border-radius:50%;margin-bottom:26px;
  background:radial-gradient(circle at 50% 36%,rgba(249,147,11,.22),rgba(249,147,11,.07))}
.ov-intro-seal::after{content:"";position:absolute;inset:-11px;border:1.5px solid rgba(249,147,11,.34);border-radius:50%;animation:sealPulse 2.6s ease-out infinite}
.ov-intro-seal b{font:600 36px/1 var(--disp);letter-spacing:-.02em;color:var(--accent)}
.ov-intro-seal em{margin-top:5px;font:600 10px var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ov-intro h4{margin:0;max-width:19ch;font:var(--head-w) clamp(23px,2.5vw,32px)/1.15 var(--head);letter-spacing:var(--head-ls);color:var(--ink);text-wrap:balance}
.ov-intro p{margin:15px 0 0;max-width:46ch;font-size:15px;line-height:1.65;color:var(--ink-soft)}
.ov-intro-go{margin-top:28px;min-width:min(100%,270px);padding:15px 26px}
.ov-intro-go i,.ov-intro-go svg{width:18px;height:18px;stroke-width:2;transition:transform .25s}
.ov-intro-go:hover i,.ov-intro-go:hover svg{transform:translateX(4px)}
.ov-intro-note{margin-top:15px;max-width:40ch;font:600 12.5px/1.6 var(--body);color:var(--ink-soft);opacity:.85}
.ov-intro-note a{color:var(--navy);font-weight:750;white-space:nowrap;border-bottom:1px solid rgba(0,57,104,.3)}
.ov-intro-note a:hover{color:var(--accent);border-color:var(--accent)}

/* trust strip under the drawer heading */
.ov-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ov-fact{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:#f1f5f9;font:650 12px var(--body);color:var(--ink-soft)}
.ov-fact svg,.ov-fact i{width:15px;height:15px;color:var(--accent);stroke-width:2}

/* ============================================================
   FORMS
   ============================================================ */
.frm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.frm-grid .wide{grid-column:1/-1}
.field{position:relative;display:flex;flex-direction:column;min-width:0}
.field>label:not(.drop),.fset>legend{display:block;margin-bottom:7px;font:600 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);padding:0}
.field .req,.fset .req{color:var(--accent);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;font:500 15px var(--body);color:var(--ink);background:#eef2f7;border:1.5px solid transparent;border-radius:12px;
  padding:14px 15px;transition:background .22s,border-color .22s,box-shadow .22s;appearance:none}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347586a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px;cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:#93a3b4}
.field input:hover,.field select:hover,.field textarea:hover{background:#e9eef5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,147,11,.16)}
.field.err input,.field.err select,.field.err textarea{border-color:#d94a3d;background:#fff5f4}
.field .msg,.fset .msg{display:none;margin-top:6px;font:600 12.5px var(--body);color:#c0392b}
.field.err .msg,.fset.err .msg{display:block}

/* chip-style radios & checkboxes */
.fset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;font:650 14px var(--body);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.chip:hover{border-color:rgba(249,147,11,.55);transform:translateY(-1px)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip .box{position:relative;display:grid;place-items:center;flex:none;width:19px;height:19px;border:1.5px solid rgba(0,57,104,.3);border-radius:6px;transition:background .2s,border-color .2s}
.chip.rad .box{border-radius:50%}
.chip .box svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.chip input:checked~.box{background:var(--accent);border-color:var(--accent)}
.chip input:checked~.box svg{opacity:1;transform:none}
.chip.on{border-color:var(--accent);background:#fff8ee;box-shadow:0 8px 20px -16px rgba(249,147,11,.9)}
.chip input:focus-visible~.box{box-shadow:0 0 0 4px rgba(249,147,11,.25)}
.fset.err .chips .chip{border-color:#d94a3d}

/* collapsible extra block */
.frm-extra{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.frm-extra>.inner{overflow:hidden;min-height:0}
.frm-extra.open{grid-template-rows:1fr;opacity:1}

/* file dropzone */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:158px;padding:24px;border:1.5px dashed rgba(0,57,104,.26);border-radius:14px;background:#eef2f7;text-align:center;cursor:pointer;transition:border-color .25s,background .25s}
.drop:hover,.drop.hot{border-color:var(--accent);background:#fff8ee}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff;color:var(--accent);box-shadow:0 10px 24px -18px rgba(0,45,85,.7)}
.drop-ico svg,.drop-ico i{width:23px;height:23px;stroke-width:1.8}
.drop-main{font:650 15px var(--body);color:var(--ink-soft)}
.drop-main b{color:var(--accent);font-weight:750}
.drop-sub{font:600 12px var(--body);color:#93a3b4}
.drop.has-file{border-style:solid;border-color:var(--accent);background:#fff8ee}
.drop-file{display:none;align-items:center;gap:11px;width:100%;max-width:100%;padding:11px 13px;border-radius:11px;background:#fff;box-shadow:0 10px 26px -22px rgba(0,45,85,.8)}
.drop.has-file .drop-file{display:flex}
.drop.has-file .drop-ico,.drop.has-file .drop-main,.drop.has-file .drop-sub{display:none}
.drop-file .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font:650 14px var(--body);color:var(--ink)}
.drop-file .sz{font:500 12px var(--mono);color:var(--ink-soft);flex:none}
.drop-file .rm{position:relative;z-index:2;display:grid;place-items:center;flex:none;width:28px;height:28px;border:0;border-radius:8px;background:#f1f5f9;color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s}
.drop-file .rm:hover{background:#ffe6e2;color:#c0392b}
.drop-file .rm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* consent + submit row */
.consent{display:flex;align-items:flex-start;gap:11px;margin-top:22px;font:500 13px/1.55 var(--body);color:var(--ink-soft);cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent .box{position:relative;display:grid;place-items:center;flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid rgba(0,57,104,.3);border-radius:6px;transition:background .2s,border-color .2s}
.consent .box svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.consent input:checked~.box{background:var(--accent);border-color:var(--accent)}
.consent input:checked~.box svg{opacity:1;transform:none}
.consent.err .box{border-color:#d94a3d}

.frm-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.frm-actions .btn{min-width:210px}
.frm-actions .btn svg,.frm-actions .btn i{width:18px;height:18px;stroke-width:2;transition:transform .25s}
.frm-actions .btn:hover svg,.frm-actions .btn:hover i{transform:translateX(4px)}
.frm-note{font:600 12.5px/1.5 var(--body);color:var(--ink-soft);opacity:.8;max-width:30ch}
.frm-note a{white-space:nowrap}
.frm.busy{pointer-events:none;opacity:.62}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;border:2.5px solid rgba(5,38,65,.28);border-top-color:#052641;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* fields fade in one after another when the overlay opens */
.ov .frm .field,.ov .frm .fset,.ov .frm .drop-wrap,.ov .frm .consent,.ov .frm .frm-actions,.ov .ov-intro>*{opacity:0;transform:translateY(14px)}
/* the form rows wait for .step-form, so their cascade plays when the form is
   asked for rather than being over and done with behind the pitch */
.ov.on.step-form .frm .field,.ov.on.step-form .frm .fset,.ov.on.step-form .frm .drop-wrap,.ov.on.step-form .frm .consent,.ov.on.step-form .frm .frm-actions,
.ov.on .ov-intro>*{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.no-motion .frm .field,.no-motion .frm .fset,.no-motion .frm .drop-wrap,.no-motion .frm .consent,.no-motion .frm .frm-actions,.no-motion .ov-intro>*{opacity:1;transform:none}

/* success / error state */
.frm-done{display:none;flex-direction:column;align-items:center;text-align:center;padding:34px 10px 20px}
.frm-done.on{display:flex}
.frm-done .seal{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:rgba(249,147,11,.12);color:var(--accent);margin-bottom:22px}
.frm-done .seal::after{content:"";position:absolute;inset:-9px;border:1.5px solid rgba(249,147,11,.34);border-radius:50%;animation:sealPulse 2.4s ease-out infinite}
@keyframes sealPulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.frm-done .seal svg,.frm-done .seal i{width:40px;height:40px;stroke-width:1.7}
.frm-done h4{font:var(--head-w) clamp(22px,2.4vw,29px) var(--head);letter-spacing:var(--head-ls);color:var(--ink);margin:0}
.frm-done p{margin:13px 0 0;max-width:44ch;font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.frm-done .btn{margin-top:26px}
.frm-fail{display:none;align-items:flex-start;gap:11px;margin-top:18px;padding:14px 16px;border-radius:12px;background:#fff2f0;border:1px solid rgba(217,74,61,.3);font:600 13.5px/1.55 var(--body);color:#a33227}
.frm-fail.on{display:flex}
.frm-fail svg,.frm-fail i{flex:none;width:18px;height:18px;margin-top:1px;stroke-width:2}
.frm-fail a{color:#a33227;text-decoration:underline}

@media(max-width:760px){
  .ov-drawer{top:auto;right:0;left:0;bottom:0;width:auto;height:min(94svh,880px);border-radius:26px 26px 0 0;overflow:hidden;transform:translateY(102%)}
  .ov-drawer.on{transform:none}
  .ov-modal{left:0;right:0;width:auto;max-height:94svh;transform:translateY(100%)}
  .ov-modal.on{transform:none}
  .ov-head{padding:26px 20px 18px}
  .ov-head p{font-size:13.5px}
  .ov-body{padding:20px 18px 26px}
  .frm-grid{grid-template-columns:1fr}
  .frm-actions .btn{width:100%;min-width:0}
  .frm-note{max-width:none}
  .ov-grab{display:block;position:absolute;left:50%;top:9px;z-index:5;width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.32);transform:translateX(-50%)}
}
body.ov-lock{overflow:hidden}

/* ============================================================
   CONTACT — quick contact cards
   ============================================================ */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:940px;margin:44px auto 0;position:relative;z-index:2}
.c-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:24px 24px 22px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.045);text-align:left;color:#eaf1f8;overflow:hidden;cursor:pointer;transition:border-color .3s,background .3s,transform .3s}
.c-card::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(249,147,11,.22),transparent 68%);opacity:0;transition:opacity .35s}
.c-card:hover{border-color:rgba(249,147,11,.5);background:rgba(255,255,255,.075);transform:translateY(-4px)}
.c-card:hover::after{opacity:1}
.c-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(249,147,11,.14);color:var(--accent)}
.c-ico svg,.c-ico i{width:21px;height:21px;stroke-width:1.8}
.c-card small{font:600 11px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(234,241,248,.5)}
.c-card strong{font:600 18px var(--disp);color:#fff;letter-spacing:-.01em}
.c-card .go{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font:650 13px var(--body);color:var(--accent)}
.c-card .go svg,.c-card .go i{width:15px;height:15px;stroke-width:2.2;transition:transform .25s}
.c-card:hover .go svg,.c-card:hover .go i{transform:translateX(4px)}
.c-card.primary{background:rgba(249,147,11,.12);border-color:rgba(249,147,11,.38)}
@media(max-width:860px){.contact-cards{grid-template-columns:1fr;max-width:460px;margin-top:36px}}

/* honeypot — off-screen for people, irresistible to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}

/* ============================================================
   IMAGERY — photographs are uncovered rather than faded in, and
   drift inside their frame so they are not welded to it
   ============================================================ */
.img-rise{clip-path:inset(0 0 100% 0 round var(--r,0px))}
.no-motion .img-rise{clip-path:none!important}
/* the picture is taller than its window, which is the room the drift needs.
   It moves on `translate` so the hover zoom keeps `transform` to itself. */
.img-rise img{position:relative;height:114%;top:-7%;translate:0 var(--py,0px)}
.about-media.img-rise{--r:15px}
.reach-media.img-rise{--r:18px}
.proj-img.img-rise{--r:0px}
/* a whisper of desaturation that clears on hover — enough to knit the
   illustrative photos together, not enough to read as a filter */
.proj-img img{filter:saturate(.86);transition:transform .6s ease,filter .45s ease}
.proj:hover .proj-img img{filter:saturate(1)}



/* ============================================================
   SHARED HIGHLIGHT — one background that travels between items
   (the vanilla equivalent of a framer-motion shared layoutId)
   ============================================================ */
.has-ab{position:relative}
.has-ab>*{position:relative;z-index:1}
.ab-hl{position:absolute;left:0;top:0;z-index:0;width:0;height:0;opacity:0;pointer-events:none;
  border-radius:10px;background:rgba(0,57,104,.07);will-change:transform,width,height,opacity}
.ab-hl.on-dark{background:rgba(255,255,255,.14)}
.ab-hl.soft{background:rgba(0,57,104,.038)}
.ab-hl.ring{background:transparent;border:1.5px solid rgba(249,147,11,.7);box-shadow:0 0 0 5px rgba(249,147,11,.08)}
.no-motion .ab-hl{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .hero{position:relative;min-height:auto;flex-direction:column;padding-bottom:64px}
  /* stacked banner on small screens — the curve only makes sense side-by-side */
  .hero-media{position:relative;width:100%;height:42vh;min-height:290px;
    -webkit-clip-path:none;clip-path:none}
  /* The bottom of the clip is white, so the copy can sit on it once the fade
     has taken over. The ramp runs further up than before and holds solid for
     the last 12%, which is the band the eyebrow now overlaps. */
  .hero-media .fade{background:linear-gradient(180deg,rgba(5,26,44,.15),transparent 26%),
    linear-gradient(0deg,var(--paper) 0%,var(--paper) 12%,rgba(244,246,249,.86) 24%,rgba(244,246,249,.45) 36%,rgba(244,246,249,0) 52%)}
  .media-badge-row{top:18px}
  /* pulled up out of the 34px gap and into the faded foot of the clip */
  .hero-inner{margin-top:-58px}
  .hero-text{max-width:none}
  /* lighter header on mobile — backdrop-filter is costly while scrolling */
  .nav.scrolled{background:#052641;backdrop-filter:none}
  .about-grid,.reach-grid{grid-template-columns:1fr}
  .about-copy{max-width:680px}
  .about-visual{max-width:760px}
  .cta-inner{min-height:0;grid-template-columns:1fr;gap:34px}
  .cta-actions{max-width:430px}
  .reach-copy{max-width:680px}
  .reach-visual{max-width:820px}
  .proj-grid,.cert-grid{grid-template-columns:1fr 1fr}
  .career-layout{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .career-head{max-width:none}
  .career-head h2{max-width:20ch}
  .career-head p{max-width:64ch}
  
  .quality-intro{gap:36px}
  .cert{padding:27px 25px 25px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .slab-cover{border-radius:26px 26px 0 0;margin-top:-26px}
}
/* At 375 the three badges came to 413px of natural width against 335 of usable
   room, so the third dropped to its own line. Equal flexible thirds fix that,
   with the padding and type scaled to the viewport so they still fit at 320.
   Only phones need it — from ~560 up the natural widths already sit on one
   row, and stretching them to fill a tablet just looks slack. */
@media(max-width:560px){
  .hero-certs .badges{flex-wrap:nowrap;gap:clamp(5px,1.9vw,8px)}
  .cert-badge{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
    gap:clamp(4px,1.8vw,7px);padding:8px clamp(6px,2.4vw,10px);border-radius:10px;
    font:600 clamp(11px,3.3vw,13px) var(--disp)}
  .cert-badge svg{width:clamp(13px,4vw,16px);height:clamp(13px,4vw,16px)}
}
/* Where the bar collapses into the hamburger. Logo + six links + the CTA now
   need about 937px (it was ~1090 while the phone number was still up here,
   which is why this used to sit at 1100), so 980 keeps a little slack and
   gives the full nav ~120px more room than before. */
@media(max-width:980px){
  .nav-links{display:none}
  .nav-inner{gap:12px}
  .nav-right{gap:8px}
  .nav-cta{padding:12px 14px}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
  .nav-toggle,.mobile-menu{display:flex}
}
@media(max-width:820px){
  .quality-intro{grid-template-columns:1fr;gap:24px}
  .quality-copy{max-width:650px}
  .quality-visual{max-width:520px;margin:0 auto;width:100%}
  
  .quality-slab .cert-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-links{display:none}
  .nav-inner{gap:12px}
  .nav-right{gap:8px}
  .nav-brand img{height:42px}
  .nav-cta{padding:12px 14px}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
  .nav-toggle{display:flex}
  .mobile-menu{display:flex}
  .proj-grid,.cert-grid,.stat-grid,.foot-grid{grid-template-columns:1fr}
  .about-grid{gap:42px}
  
  .about-media-frame{padding:7px;border-radius:18px}
  .about-media{border-radius:12px}
  .about-media-frame::before{inset:-10px -8px 34%;border-radius:20px}
  .about-media-frame::after{right:-8px;top:-16px}
  .tags{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .tag{min-width:0;align-items:flex-start;padding:10px 11px;font-size:12px}
  .about-proof{left:13px;top:14px;width:196px;padding:12px 13px 13px}
  .about-proof-icon{width:32px;height:32px}
  .about-proof-copy{margin-top:7px}
  .about-proof-copy small{font-size:10.5px}
  .about-proof-copy strong{font-size:12.5px}
  .about-stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat-box{min-height:124px;padding:18px 16px}
  .stat-box::before{top:18px;bottom:18px}
  .stat-box .lbl{font-size:12.5px;line-height:1.35}
  
  .career-head{margin-bottom:34px}
  .career-head h2{line-height:1.08}
  .career-desktop-break{display:none}
  .career-benefits{grid-template-columns:1fr}
  .career-benefit{flex-direction:row;align-items:center;gap:14px;padding:16px 15px}
  .career-benefit em{margin-top:3px}
  /* the stepper loses its labels long before it loses its dots */
  .role-grid{grid-template-columns:1fr}
  .role.wide{grid-column:auto}
  .step .lbl{font-size:10.5px;letter-spacing:.05em}
  .apply-nav{flex-wrap:wrap}
  .apply-nav .sp{display:none}
  .apply-step-count{order:-1;width:100%;text-align:center;margin-bottom:2px}
  .apply-nav .btn{flex:1 1 140px;justify-content:center}
  .benefit-icon{flex-basis:44px;width:44px;height:44px;border-radius:12px}
  .benefit-icon>svg:first-child{width:24px;height:24px}
  .benefit-icon .benefit-accent{right:3px;bottom:3px;width:13px;height:13px}
  .career-benefit strong{font-size:12px}
  .quality-title-rule{margin-top:20px}
  .quality-copy p{font-size:15.5px}
  /* the seal already carries a lot of air inside its own artwork */
  .quality-visual{max-width:340px;margin:-8px auto -18px}
  .cert{min-height:0;padding:25px 23px 24px}
  .cert-icon{flex-basis:62px;width:62px;height:62px}
  .cert-icon svg{width:30px;height:30px}
  .cert-rule{margin:19px 0 16px}
  .cert p{font-size:15px}
  .cta-slab{padding-top:68px;padding-bottom:78px}
  .cta-inner{min-height:0;grid-template-columns:1fr;gap:32px;padding:36px 24px;border-radius:18px}
  .cta-inner p{font-size:15.5px}
  .cta-art{right:0;width:100%;object-fit:cover;object-position:80% center;opacity:.16}
  .cta-actions{width:100%}
  /* full width, the arrow was pinned to the far right while the button under
     it centred its label — the pair read as misaligned */
  .cta-actions .btn{width:100%;justify-content:center;gap:10px}
  .reach-grid{gap:40px}
  .reach-map-art{inset:70px auto auto -38%;width:176%;max-width:none;height:auto;opacity:.08}
  .reach-media{aspect-ratio:4/3;border-radius:15px}
  .reach-proof{left:12px;bottom:12px;width:158px;padding:14px 14px 15px;border-radius:12px}
  .reach-proof-icon{width:32px;height:32px}
  .reach-proof-number{font-size:27px}
  .reach-proof-label{margin-left:43px;font-size:11.5px}
  .reach-proof-rule{margin:12px 0}
  .reach-proof-copy{font-size:12.5px}
  .pins{gap:8px}
  .pin{padding:8px 13px;font-size:13px}
}
/* A tablet in landscape is past the 980px hamburger breakpoint, so it gets the
   full bar with 27px rows and the 22px-tall pagination bars. The travelling
   nav highlight is gated on (pointer:fine), so nothing here reaches a mouse. */
@media(hover:none) and (pointer:coarse){
  .nav-links a{padding:11px 0}
  .ring-dot{width:30px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ============================================================
   WORDPRESS ADDITIONS
   Markup that only exists in the theme: the language switcher, the
   accessibility skip link, and the privacy page.
   ============================================================ */

/* ---------- language switcher ---------- */
.lang-switch{display:flex;align-items:center;gap:2px;flex:none;padding:3px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.5);transition:border-color .42s ease,background .42s ease}
.nav.scrolled .lang-switch{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.lang-opt{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:6px 7px;border-radius:7px;font:600 11.5px var(--mono);letter-spacing:.08em;color:var(--ink-soft);transition:background .25s,color .25s}
.lang-opt:hover{color:var(--ink);background:rgba(0,57,104,.06)}
.lang-opt.is-on{background:var(--accent);color:#052641}
.nav.scrolled .lang-opt{color:rgba(234,241,248,.7)}
.nav.scrolled .lang-opt:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav.scrolled .lang-opt.is-on{background:var(--accent);color:#052641}
@media(max-width:980px){.lang-switch{display:none}}

/* the same control inside the mobile panel, where the bar's copy is hidden */
.mm-lang{display:flex;gap:6px;margin-bottom:4px}
.mm-lang .lang-opt{flex:1;padding:9px 0;border:1px solid rgba(255,255,255,.14);color:rgba(234,241,248,.72);letter-spacing:.1em}
.mm-lang .lang-opt.is-on{background:var(--accent);border-color:var(--accent);color:#052641}

/* ---------- skip link ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:500;width:auto;height:auto;margin:0;clip:auto;padding:12px 18px;border-radius:10px;background:var(--navy-deep);color:#fff;font:700 14px var(--body)}

/* ---------- privacy page ---------- */
.page-head{position:relative;background:var(--paper);padding:clamp(48px,7vw,86px) 0 clamp(30px,4vw,44px)}
.page-head h1{margin-top:18px;font-size:clamp(34px,26.1px + 2.63vw,60px);line-height:1.05;max-width:20ch}
.page-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.page-meta span{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:7px 12px;border-radius:99px}
.doc{padding:0 0 clamp(60px,8vw,110px);background:var(--paper)}
.doc-card{max-width:860px;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,54px);box-shadow:0 30px 70px -50px rgba(0,45,85,.5)}
.doc-card section+section{margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--line-soft)}
.doc-card h2{display:flex;gap:14px;font-size:clamp(21px,18.8px + .85vw,28px);line-height:1.2}
.doc-card h2 .num{flex:none;font:600 12.5px var(--mono);letter-spacing:.12em;color:var(--accent);padding-top:.55em}
.doc-card p{margin:14px 0 0;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.doc-card ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.doc-card li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.66;color:var(--ink-soft)}
.doc-card li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:50%;border:2px solid var(--accent)}
.doc-card a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,57,104,.32);transition:color .2s,text-decoration-color .2s}
.doc-card a:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* Terms page: one rich-text field instead of a repeater of sections. Each H2
   the client types opens a "section" — CSS counters give it the same "01"
   number and the same dividing rule the privacy page builds in markup. */
.doc-rich{counter-reset:doc-sec}
.doc-rich > :first-child{margin-top:0}
.doc-rich h2{display:block;counter-increment:doc-sec;position:relative;padding-left:calc(2ch + 14px)}
.doc-rich h2::before{content:counter(doc-sec,decimal-leading-zero);position:absolute;left:0;top:0;
  font:600 12.5px var(--mono);letter-spacing:.12em;color:var(--accent);padding-top:.55em}
.doc-rich h2:not(:first-child){margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--line-soft)}
.doc-rich h2:not(:first-child)::before{top:clamp(28px,3.4vw,42px)}
.doc-rich h3{margin-top:24px;font-size:clamp(17px,16px + .4vw,20px);line-height:1.3;color:var(--ink)}
.doc-rich h4{margin:20px 0 0;font:600 15px/1.4 var(--body);color:var(--ink)}
.doc-rich h3 + p,.doc-rich h3 + ul,.doc-rich h3 + ol{margin-top:10px}
.doc-rich ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.doc-rich ol li{padding-left:6px;font-size:15.5px;line-height:1.66;color:var(--ink-soft)}
.doc-rich ol li::before{content:none}
.doc-rich ol li::marker{color:var(--accent);font-weight:600}
.doc-rich strong{color:var(--ink)}
.doc-rich blockquote{margin:18px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent);color:var(--ink)}
.doc-rich blockquote p:first-child{margin-top:0}
.doc-rich hr{margin:28px 0 0;border:0;border-top:1px solid var(--line-soft)}
.doc-rich table{width:100%;margin-top:18px;border-collapse:collapse;font-size:15px}
.doc-rich th,.doc-rich td{padding:9px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.doc-foot{margin-top:clamp(28px,3.4vw,42px);padding-top:22px;border-top:1px solid var(--line-soft);font:600 13px var(--body);color:var(--ink-soft)}
@media(max-width:680px){
  .doc-card{border-radius:16px}
  .doc-card h2{gap:11px}
  .doc-card p{font-size:15.5px}
}

/* ---------- the WordPress admin bar ----------
   #wpadminbar is fixed at the top for logged-in users, so everything this
   theme sticks or fixes to top:0 ends up underneath it. WordPress only offsets
   its own chrome; a custom header has to do this itself. Below 600px the bar
   is absolutely positioned and scrolls away, so the offset is dropped there. */
body.admin-bar .nav{top:32px}
body.admin-bar .mobile-menu{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
  body.admin-bar .mobile-menu{top:46px}
}
@media screen and (max-width:600px){
  /* Below 600 the bar is absolutely positioned and scrolls away, so the
     sticky header needs no offset. The panel is fixed, though, and at the
     top of the page the bar lies over it — so the mark is pushed clear
     instead. Once the bar has scrolled off, that is simply a little more
     air above the logo. */
  body.admin-bar .nav{top:0}
  body.admin-bar .mobile-menu{top:0}
  body.admin-bar .mobile-menu .mm-head{padding-top:66px}
}

/* ---------- mobile menu: language row ----------
   The three options were inheriting the nav-link padding and reading as three
   oversized buttons. They are a segmented control, not three calls to action. */
.mm-lang{display:flex;gap:6px;margin-bottom:12px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:10px}
.mobile-menu .mm-lang .lang-opt{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:8px 0;border:0;border-radius:7px;
  font:600 12px var(--mono);letter-spacing:.1em;
  color:rgba(234,241,248,.66);background:transparent;transition:background .2s,color .2s}
.mobile-menu .mm-lang .lang-opt:hover{color:#fff;background:rgba(255,255,255,.08)}
.mobile-menu .mm-lang .lang-opt.is-on{background:var(--accent);color:#052641}

/* the CTA is a block button: centre what is inside it, whatever the row above does */
.mm-foot .btn{display:flex;width:100%;align-items:center;justify-content:center;text-align:center}

/* ============================================================
   BLOG
   ============================================================ */

/* ---------- article cards ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);margin-top:clamp(30px,3.4vw,44px)}
.bcard{display:flex;flex-direction:column;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px -34px rgba(0,45,85,.5);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s}
.bcard:hover{transform:translateY(-4px);border-color:rgba(249,147,11,.45);box-shadow:0 26px 56px -30px rgba(0,45,85,.55)}
.bcard-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .bcard-img img{transform:scale(1.05)}
.bcard-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,57,104,.22)}
.bcard-ph svg{width:38px;height:38px;stroke-width:1.4}
.bcard-cat{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:99px;background:rgba(5,38,65,.82);
  backdrop-filter:blur(6px);font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.bcard-body{display:flex;flex:1;flex-direction:column;gap:9px;padding:18px 20px 20px}
.bcard-meta{display:flex;align-items:center;gap:9px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.bcard-dot{width:3px;height:3px;border-radius:50%;background:var(--accent)}
.bcard-title{font:var(--head-w) clamp(17px,1.3vw,20px)/1.3 var(--head);letter-spacing:var(--head-ls);color:var(--ink)}
.bcard:hover .bcard-title{color:var(--navy)}
.bcard-lead{font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.bcard-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;
  font:600 12.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.bcard-go svg{width:15px;height:15px;transition:transform .25s}
.bcard:hover .bcard-go svg{transform:translateX(4px)}

/* ---------- archive ---------- */
.blog-head{padding-bottom:clamp(22px,2.6vw,32px)}
.blog-head-text{margin-top:16px;max-width:60ch;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.blog-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.blog-filter{padding:9px 16px;border:1px solid var(--line);border-radius:99px;background:var(--paper-2);
  font:600 13px var(--body);color:var(--ink-soft);transition:border-color .25s,background .25s,color .25s}
.blog-filter:hover{border-color:rgba(249,147,11,.5);color:var(--ink)}
.blog-filter.is-on{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.blog-archive{padding-top:clamp(26px,3vw,40px)}
.blog-empty{padding:60px 0;text-align:center;font-size:17px;color:var(--ink-soft)}
.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:clamp(32px,4vw,52px)}
.blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--line);border-radius:11px;background:var(--paper-2);font:600 14px var(--body);color:var(--ink-soft);transition:.25s}
.blog-pager .page-numbers:hover{border-color:var(--accent);color:var(--ink)}
.blog-pager .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#052641;font-weight:700}

/* ---------- single: the headline sits on the picture ----------
   The picture is a rounded panel as wide as the content column (not
   full-bleed), so its left edge, the headline and the article below all share
   one line. The photograph is chosen by the client, so white type over it
   would only be legible by luck: the veil is a gradient rising from the foot,
   dense where the copy sits and nearly gone at the top. */
.post-top{padding-top:clamp(8px,1.4vw,18px)}
.post-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(340px,38vw,520px);
  padding:clamp(24px,3.4vw,44px) clamp(22px,3.2vw,44px);border-radius:clamp(14px,1.6vw,22px);
  background:var(--navy-deep);overflow:hidden;isolation:isolate}
.post-hero-img{position:absolute;inset:0;z-index:0}
.post-hero-img img{width:100%;height:100%;object-fit:cover}
.post-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(3,20,36,.9) 0%,rgba(3,20,36,.72) 24%,rgba(3,20,36,.34) 50%,rgba(3,20,36,.08) 76%,rgba(3,20,36,0) 100%)}
.post-hero.no-img .post-hero-veil{background:linear-gradient(120deg,#052641,#0a3a61)}
.post-hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;color:#eaf1f8}
.post-hero h1{max-width:28ch;font-size:clamp(28px,20px + 2.1vw,54px);line-height:1.1;color:#fff;text-align:left}
.post-meta{display:flex;align-items:center;gap:11px;margin-top:18px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(234,241,248,.78)}
.post-dot{width:3px;height:3px;border-radius:50%;background:var(--accent)}

/* ---------- single: body + column ---------- */
.post-slab{padding-top:clamp(36px,4.2vw,58px)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,3.6vw,56px);align-items:start}
.post-body{max-width:72ch;font-size:16.5px;line-height:1.78;color:var(--ink-soft)}
.post-body > * + *{margin-top:1.1em}
.post-body h2{margin-top:1.7em;font-size:clamp(24px,20px + 1vw,32px);line-height:1.2;color:var(--ink)}
.post-body h3{margin-top:1.5em;font-size:clamp(19px,17px + .6vw,24px);line-height:1.25;color:var(--ink)}
.post-body img{border-radius:14px}
.post-body a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,57,104,.3)}
.post-body a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.post-body ul,.post-body ol{padding-left:22px}
.post-body li+li{margin-top:8px}
.post-body blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-size:18px;color:var(--ink)}
.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft)}
.post-tags strong{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.post-tag{padding:6px 12px;border-radius:8px;background:var(--tint);font:600 12.5px var(--body);color:var(--ink)}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
.post-nav-item{display:flex;flex-direction:column;gap:7px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);transition:border-color .25s,transform .25s}
.post-nav-item:hover{border-color:rgba(249,147,11,.5);transform:translateY(-2px)}
.post-nav-item.next{text-align:right}
.post-nav-lbl{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.post-nav-item.next .post-nav-lbl{justify-content:flex-end}
.post-nav-lbl svg{width:14px;height:14px}
.post-nav-title{font:600 14.5px/1.4 var(--body);color:var(--ink)}

.post-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.post-widget{padding:20px 21px 22px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}
.post-widget-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.post-widget-head h2{font-size:18px;line-height:1.2;color:var(--ink)}
.post-widget-head a{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.post-mini{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.post-mini a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.post-mini-img{display:block;width:56px;height:56px;overflow:hidden;border-radius:10px;background:var(--tint)}
.post-mini-img img{width:100%;height:100%;object-fit:cover}
.post-mini-title{display:block;font:600 13.5px/1.4 var(--body);color:var(--ink);transition:color .2s}
.post-mini a:hover .post-mini-title{color:var(--accent)}
.post-mini-date{display:block;margin-top:3px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.post-cats{display:flex;flex-wrap:wrap;gap:8px}
.post-cats a{padding:7px 13px;border:1px solid var(--line);border-radius:99px;font:600 12.5px var(--body);color:var(--ink-soft);transition:.25s}
.post-cats a:hover{border-color:var(--accent);color:var(--ink)}
.post-cta{background:var(--navy-deep);border-color:var(--navy-deep);color:#eaf1f8}
.post-cta h2{color:#fff}
.post-cta p{margin:10px 0 16px;font-size:14.5px;line-height:1.65;color:rgba(234,241,248,.76)}
.post-cta .btn{width:100%;justify-content:center}

@media(max-width:1000px){
  .post-layout{grid-template-columns:1fr}
  .post-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .post-aside .post-widget{flex:1 1 280px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .blog-grid{grid-template-columns:1fr}
  .post-aside{flex-direction:column}
  .post-nav{grid-template-columns:1fr}
  .post-nav-item.next{text-align:left}
  .post-nav-item.next .post-nav-lbl{justify-content:flex-start}
  .post-hero{min-height:clamp(300px,82vw,420px)}
  .post-body{font-size:15.8px}
}