/* ===========================================================================
   Aeromark Mechanical — site styles

   LIGHT by default. The only dark surfaces are the ones sitting on top of
   media: the loading screen, the home hero scrub, and the interior page heroes.
   Everything after the animation is light, per the client's direction.

   Two glass recipes, switched by token: frosted white on light surfaces, and
   the original translucent white on navy inside .inv bands. Components only
   ever reference the tokens, so a band flips its whole interior by adding
   one class.
   =========================================================================== */

:root{
  /* brand */
  --navy:#1B2440; --deep-blue:#1E338B; --sky:#2FA4E0;
  --flame:#E32D26; --deep-red:#A81F1E;
  --ink:#0E1116; --off:#F5F7FA;

  /* light page surfaces */
  --page:#F4F6FA;
  --page-2:#FFFFFF;

  /* text — navy rather than grey, so the brand carries the type */
  --tx:#16203A;
  --tx2:rgba(22,32,58,.74);
  --tx3:rgba(22,32,58,.55);
  --slate:rgba(22,32,58,.55);

  /* glass on light */
  --glass:rgba(255,255,255,.72);
  --glass-hover:rgba(255,255,255,.88);
  --glass-line:rgba(255,255,255,.9);
  --glass-edge:rgba(22,32,58,.08);
  --glass-shadow:0 8px 30px rgba(22,32,58,.08);
  --glass-top:inset 0 1px 0 rgba(255,255,255,.95);

  --headerH:64px;
  --maxw:1180px;
}

/* inverse bands: navy ground, original translucent-white glass */
.inv{
  --tx:#F5F7FA;
  --tx2:rgba(245,247,250,.76);
  --tx3:rgba(245,247,250,.58);
  --slate:rgba(245,247,250,.58);
  --glass:rgba(255,255,255,.06);
  --glass-hover:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.13);
  --glass-edge:rgba(255,255,255,.13);
  --glass-shadow:0 12px 40px rgba(0,0,0,.22);
  --glass-top:inset 0 1px 0 rgba(255,255,255,.10);
  background:var(--navy); color:var(--tx);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:var(--page); color:var(--tx);
  font-weight:300; line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* the one reusable glass recipe */
.gl,.trust .wrap>div,.path,.step,.q,.svc article,.tl .row,.office,.ctacard,.fm{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-top),var(--glass-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gl,.trust .wrap>div,.path,.step,.q,.svc article,.tl .row,.office,.ctacard,.fm{background:#fff}
  .inv .gl,.inv .trust .wrap>div,.inv .path,.inv .step,.inv .q,.inv .fm,
  .inv .svc article,.inv .tl .row,.inv .office,.inv .ctacard{background:rgba(28,36,60,.96)}
  #mnav{background:#fff}
  header.solid{background:rgba(255,255,255,.97)}
}

/* ---------- loading screen (always dark) ---------- */
#loader{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .8s ease;
}
#loader.done{opacity:0;pointer-events:none}
.lwrap{position:relative;display:grid;place-items:center}
.lwrap>*{grid-area:1/1}
#lcv{display:block}
.ring{width:132px;height:132px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .track{stroke:rgba(245,247,250,.09);stroke-width:1}
.ring .prog{stroke:var(--sky);stroke-width:1.5;transition:stroke-dashoffset .3s ease}
#loader .mk{width:62px;opacity:.97}
.loadtxt{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,247,250,.55);
  font-variant-numeric:tabular-nums}

.poster{position:absolute;inset:0;z-index:1}
.poster img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}
.poster.gone{opacity:0;transition:opacity .5s ease;pointer-events:none}

/* ---------- header ----------
   Transparent with white type while it floats over the hero video, then a
   frosted white pill with navy type once past it. Interior pages start solid. */
header{
  position:fixed;top:10px;left:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);
  z-index:140;height:var(--headerH);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(10px,1.8vw,18px);border-radius:999px;
  background:transparent;border:1px solid transparent;color:#fff;
  isolation:isolate;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease;
}
header::before,header::after{content:"";position:absolute;inset:0;border-radius:inherit;
  z-index:-1;opacity:0;transition:opacity .35s ease;pointer-events:none}
header::before{background:rgba(255,255,255,.62)}
header.solid::before{
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
/* masked edge ring, blurred harder than the body so the backdrop bends at the rim */
header.solid::after{
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9)}
header::after{
  padding:9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude}
header.solid::before,header.solid::after{opacity:1}
header.solid{
  color:var(--tx);
  border-color:rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    0 10px 30px rgba(22,32,58,.10);
}
header .brand{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500}
header .brand img{height:26px;width:auto}
/* the full-colour lockup only works once the bar is light */
header .brand .lg-dark{display:none}
header.solid .brand .lg-dark{display:block}
header.solid .brand .lg-light{display:none}
/* nav items are individual capsules inside the header pill, iOS-segmented-control
   style: the current page reads as a filled segment rather than just tinted text */
nav{display:flex;gap:4px;font-size:13px;letter-spacing:.04em;align-items:center}
nav a{
  padding:9px 16px;border-radius:14px;opacity:.86;
  border:1px solid transparent;
  transition:background .25s ease,opacity .25s ease,color .25s ease,border-color .25s ease;
}
nav a:hover{opacity:1;background:rgba(255,255,255,.14)}
header.solid nav a:hover{background:rgba(22,32,58,.06)}
[data-theme="dark"] header.solid nav a:hover{background:rgba(255,255,255,.08)}

/* current page: filled capsule */
nav a[aria-current="page"]{
  opacity:1;color:var(--sky);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
header.solid nav a[aria-current="page"]{
  background:rgba(47,164,224,.10);
  border-color:rgba(47,164,224,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="dark"] header.solid nav a[aria-current="page"]{
  background:rgba(47,164,224,.16);
  border-color:rgba(47,164,224,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.callbtn{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  border:1px solid currentColor;padding:10px 18px;border-radius:999px;
  transition:.25s;
}
header.solid .callbtn{background:var(--flame);border-color:var(--flame);color:#fff}
.callbtn:hover{background:var(--flame);border-color:var(--flame);color:#fff}
header.solid .callbtn:hover{background:var(--deep-red);border-color:var(--deep-red)}
@media(max-width:899px){nav{display:none}}

/* ---------- hero scrub (dark, over video) ---------- */
.hero{position:relative;height:300vh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink);display:flex}
.hero-media{position:absolute;inset:0}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;
  position:relative;z-index:2;opacity:0;transition:opacity .5s ease;
  contain:paint;transform:translateZ(0)}
.hero-media video.on{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;z-index:3;background:
  linear-gradient(to bottom,rgba(14,17,22,.4) 0%,rgba(14,17,22,.04) 22%,rgba(14,17,22,.06) 46%,rgba(14,17,22,.38) 80%,rgba(14,17,22,.56) 100%)}
.scrim2{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:
  radial-gradient(ellipse 95% 52% at 50% 88%, rgba(14,17,22,.55), rgba(14,17,22,.18) 55%, transparent 75%)}

.hero-copy{position:absolute;inset:0;pointer-events:none;z-index:4;color:#F5F7FA}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 26px}
.stage.open{gap:24px}
.mark{width:clamp(78px,16vw,104px);opacity:.97;filter:drop-shadow(0 2px 20px rgba(14,17,22,.6))}
.eyebrow{
  font-size:clamp(9.5px,1.5vw,11px);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(245,247,250,.88);font-weight:400;max-width:26ch;line-height:2.1;
  text-shadow:0 1px 18px rgba(14,17,22,.9),0 0 4px rgba(14,17,22,.7)
}
.stage.end{justify-content:flex-end;padding-bottom:clamp(52px,10vh,104px);gap:20px}
.stage.end h1{
  font-size:clamp(26px,6.4vw,58px);font-weight:300;line-height:1.15;letter-spacing:-.02em;
  max-width:26ch;text-shadow:0 1px 2px rgba(14,17,22,.8),0 2px 10px rgba(14,17,22,.55),0 0 30px rgba(14,17,22,.35)
}
.stage.end h1 em{font-style:normal;color:#7FD0FF}
.stage.end p{font-size:clamp(14px,1.6vw,17px);color:rgba(245,247,250,.86);max-width:44ch;
  font-weight:300;text-shadow:0 1px 2px rgba(14,17,22,.9),0 1px 8px rgba(14,17,22,.6)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;pointer-events:auto}

@media(min-width:900px){
  .stage.open{gap:32px}
  .mark{width:clamp(96px,9vw,128px)}
  .eyebrow{font-size:12px;letter-spacing:.34em;max-width:none}
  .stage.end{padding-bottom:clamp(72px,11vh,124px);gap:24px}
  .stage.end h1{font-size:clamp(44px,4.4vw,64px);max-width:24ch}
  .stage.end p{max-width:52ch}
}

/* ---------- buttons ---------- */
.btn{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border-radius:999px;transition:.25s;border:1px solid transparent;
  display:inline-block;
}
.btn.primary{background:var(--flame);color:#fff;box-shadow:0 8px 24px rgba(227,45,38,.28)}
.btn.primary:hover{background:var(--deep-red);box-shadow:0 10px 30px rgba(227,45,38,.36)}
/* ghost sits on media in the heroes, so it stays light-on-dark there */
.btn.ghost{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.2)}
/* ...but on light bands it inverts to navy outline */
.band .btn.ghost:not(.on-media){border-color:rgba(22,32,58,.3);color:var(--tx);
  background:rgba(255,255,255,.6);box-shadow:var(--glass-top)}
.band .btn.ghost:not(.on-media):hover{border-color:var(--navy);background:#fff}
.inv .btn.ghost{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.10)}

.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,247,250,.5)}

[id]{scroll-margin-top:calc(var(--headerH) + 26px)}

/* ---------- section shell ---------- */
section.band{position:relative;overflow:clip;padding:clamp(72px,11vh,140px) clamp(20px,5vw,44px)}
section.band>.wrap{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto}
.band.alt{background:var(--page-2)}
/* soft brand light behind glassed bands so the panels have something to refract */
.band.lit::before{
  content:"";position:absolute;inset:-18% -8%;pointer-events:none;
  background:
    radial-gradient(680px 480px at 86% 8%, rgba(47,164,224,.16), transparent 62%),
    radial-gradient(760px 560px at 4% 94%, rgba(30,51,139,.10), transparent 66%),
    radial-gradient(460px 340px at 30% 36%, rgba(227,45,38,.05), transparent 60%);
}
.inv.lit::before{
  background:
    radial-gradient(680px 480px at 86% 8%, rgba(47,164,224,.20), transparent 62%),
    radial-gradient(760px 560px at 4% 94%, rgba(30,51,139,.42), transparent 66%),
    radial-gradient(460px 340px at 30% 36%, rgba(227,45,38,.08), transparent 60%);
}
.kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sky);
  margin-bottom:20px;font-weight:600}
h2{font-size:clamp(26px,4vw,42px);font-weight:300;line-height:1.18;letter-spacing:-.015em;
  max-width:20ch;color:var(--tx)}
h2 em{font-style:normal;color:var(--sky)}
.lede{margin-top:20px;color:var(--tx2);max-width:56ch;font-size:clamp(15px,1.7vw,17px)}

/* ---------- trust strip ---------- */
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust .wrap>div{padding:28px 18px;text-align:center;border-radius:18px}
.trust b{display:block;font-size:clamp(19px,2.6vw,30px);font-weight:500;letter-spacing:-.01em;
  color:var(--navy)}
.inv .trust b,.trust.inv b{color:#fff}
.trust span{display:block;margin-top:7px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx3)}
@media(max-width:760px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- split paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.path{padding:clamp(30px,4vw,52px);border-radius:22px;transition:background .3s}
.path:hover{background:var(--glass-hover)}
.path h3{font-size:clamp(19px,2.3vw,26px);font-weight:500;margin-bottom:8px;color:var(--navy)}
.inv .path h3{color:#fff}
.path .sub{color:var(--tx3);font-size:14px;margin-bottom:26px}
.path ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.path li{font-size:14.5px;color:var(--tx2);padding-left:18px;position:relative}
.path li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--sky);opacity:.85}
.path .more{margin-top:30px;display:inline-block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky);border-bottom:1px solid rgba(47,164,224,.45);padding-bottom:5px}
.path .more:hover{color:var(--deep-blue);border-bottom-color:var(--deep-blue)}
@media(max-width:800px){.paths{grid-template-columns:1fr}}

/* ---------- project grids ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  box-shadow:0 6px 20px rgba(22,32,58,.10)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  box-shadow:0 6px 20px rgba(22,32,58,.10);transition:transform .55s ease,box-shadow .55s ease}
.gallery img:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 34px rgba(22,32,58,.18)}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.gallery{grid-template-columns:repeat(2,1fr);gap:9px}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:52px}
.q{padding:clamp(26px,3vw,38px);border-radius:20px}
.q p{font-size:15px;color:var(--tx2);line-height:1.75}
.q cite{display:block;margin-top:20px;font-style:normal;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky);font-weight:500}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---------- cta band ---------- */
.ctaband{text-align:center;position:relative}
section.band.ctaband{padding:clamp(48px,7vh,92px) clamp(20px,5vw,44px)}
.ctaband::before{content:"";position:absolute;inset:-12%;pointer-events:none;background:
  radial-gradient(620px 440px at 50% 18%, rgba(227,45,38,.14), transparent 64%),
  radial-gradient(720px 520px at 88% 95%, rgba(47,164,224,.16), transparent 65%)}
.ctacard{position:relative;z-index:1;max-width:840px;margin:0 auto;
  padding:clamp(38px,6vw,60px) clamp(22px,5vw,56px);border-radius:26px}
.ctacard h2{margin:0 auto;max-width:22ch}
.ctacard .btn{margin-top:30px}

/* ---------- footer (navy anchor) ---------- */
footer{padding:52px clamp(20px,5vw,44px);background:var(--navy);color:rgba(245,247,250,.7);
  font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
footer .flogo{height:44px;width:auto}
footer .flinks{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px}
footer .flinks a:hover{color:#fff}
.note{margin-top:22px;font-size:11px;color:rgba(245,247,250,.4);max-width:70ch;line-height:1.7}

/* ---------- mobile nav ---------- */
.menubtn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;border-radius:999px;cursor:pointer;z-index:130;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
header.solid .menubtn{background:rgba(22,32,58,.06);border-color:rgba(22,32,58,.14)}
.menubtn span{display:block;width:22px;height:2px;background:#fff;transition:.3s ease}
header.solid .menubtn span{background:var(--navy)}
.menubtn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn.open span:nth-child(2){opacity:0}
.menubtn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:899px){
  .menubtn{display:flex}
  header .callbtn{display:none}
}
/* thick frosted sheet so page text can never collide with the menu links */
#mnav{position:fixed;inset:0;z-index:120;background:rgba(244,246,250,.9);
  -webkit-backdrop-filter:blur(34px) saturate(1.45);backdrop-filter:blur(34px) saturate(1.45);
  visibility:hidden;
  display:flex;flex-direction:column;gap:12px;
  /* NOT justify-content:center - a centered column that overflows a short
     viewport (Gmail's in-app browser, landscape) pushes its first item up
     under the header where it cannot even be scrolled to. Auto margins on
     the ends centre when there is room and collapse to zero when there is
     not, and the list scrolls. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--headerH) + 16px) clamp(24px,7vw,56px) 24px;
  opacity:0;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
#mnav>:first-child{margin-top:auto}
#mnav>:last-child{margin-bottom:auto}
#mnav.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s ease}
#mnav a{font-size:clamp(22px,5.8vw,30px);font-weight:300;padding:18px 26px;border-radius:20px;
  color:var(--navy);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(22,32,58,.07);
  opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
#mnav.open a:active{transform:scale(.975)}
#mnav.open a{opacity:1;transform:none}
#mnav.open a:nth-of-type(1){transition-delay:.06s}
#mnav.open a:nth-of-type(2){transition-delay:.12s}
#mnav.open a:nth-of-type(3){transition-delay:.18s}
#mnav.open a:nth-of-type(4){transition-delay:.24s}
#mnav.open a:nth-of-type(5){transition-delay:.30s}
#mnav .mcall{margin-top:20px;background:var(--flame);border:0;border-radius:999px;text-align:center;
  color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:17px;
  box-shadow:0 8px 24px rgba(227,45,38,.3);
  opacity:0;transition:opacity .4s ease .36s}
#mnav.open .mcall{opacity:1}
body.lock{overflow:hidden}

/* ---------- reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
.js .rv2.in{transition-delay:.1s}
.js .rv3.in{transition-delay:.2s}
.js .rv4.in{transition-delay:.3s}

/* ---------- who we are ---------- */
.who{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4.5vw,60px);align-items:center}
.who figure{margin:0}
.who img{width:100%;border-radius:20px;box-shadow:0 14px 40px rgba(22,32,58,.14)}
.who .cap{margin-top:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
@media(max-width:860px){.who{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
.step{padding:clamp(26px,3vw,42px);border-radius:20px}
.step b{display:block;font-size:12px;color:var(--sky);letter-spacing:.24em;margin-bottom:16px;font-weight:600}
.step h3{font-size:16.5px;font-weight:500;margin-bottom:9px;color:var(--navy)}
.inv .step h3{color:#fff}
.step p{font-size:14px;color:var(--tx2);line-height:1.65}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}

/* ---------- shine border ----------
   An animated conic sweep masked to the 1px rim. @property lets the angle
   animate; without it the border simply sits still, which still looks correct. */
@property --shine-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.shine{position:relative}
.shine::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--shine-ang),
    transparent 0deg, rgba(47,164,224,.05) 30deg, var(--sky) 62deg,
    var(--flame) 96deg, rgba(227,45,38,.05) 130deg, transparent 170deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:shineSpin 7s linear infinite;
  pointer-events:none;
}
.shine:nth-of-type(2)::before{animation-delay:-1.75s}
.shine:nth-of-type(3)::before{animation-delay:-3.5s}
.shine:nth-of-type(4)::before{animation-delay:-5.25s}
@keyframes shineSpin{to{--shine-ang:360deg}}

/* ---------- in the field ---------- */
.fieldgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:52px}
.shot{position:relative;overflow:hidden;border-radius:18px;margin:0;
  box-shadow:0 8px 26px rgba(22,32,58,.12)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s ease}
.shot:hover img{transform:scale(1.045)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,247,250,.96);
  background:rgba(14,17,22,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.12)}
.shot.a{grid-column:span 7;aspect-ratio:16/10}
.shot.b{grid-column:span 5;aspect-ratio:auto}
.shot.c{grid-column:span 5;aspect-ratio:16/11}
.shot.d{grid-column:span 7;aspect-ratio:16/10}
.shot.d img{object-position:center 74%}
@media(max-width:760px){.shot.a,.shot.b,.shot.c,.shot.d{grid-column:span 12;aspect-ratio:16/10}}

/* ---------- brands ---------- */
.brands{padding:clamp(48px,7vh,72px) clamp(20px,5vw,44px);text-align:center;background:var(--page-2);
  border-top:1px solid rgba(22,32,58,.07)}
.brandrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:30px}
.chip{background:#fff;border:1px solid rgba(22,32,58,.08);border-radius:16px;height:60px;width:156px;
  padding:10px 16px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(22,32,58,.06);transition:.25s}
.chip:hover{box-shadow:0 8px 22px rgba(22,32,58,.12);transform:translateY(-2px)}
.chip img{max-height:30px;width:auto;max-width:118px;display:block}

/* ---------- service area ---------- */
.area{text-align:center}
section.band.area{padding:clamp(44px,6.5vh,80px) clamp(20px,5vw,44px)}
.area h2{margin-left:auto;margin-right:auto}
.towns{margin:16px auto 0;font-size:13.5px;line-height:1.95;color:var(--tx2);max-width:740px}

/* ---------- liquid touch ---------- */
.lqx{position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1.2,.36,1),background .3s ease}
.lqx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.85), rgba(255,255,255,.25) 46%, transparent 66%)}
.inv .lqx::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.14), rgba(255,255,255,.03) 46%, transparent 66%)}
.lqx:hover::after,.lqx.touch::after{opacity:1}
.lqx:active{transform:scale(.982)}

/* ---------- interior page hero (dark, over a still) ---------- */
.phero{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end;
  overflow:hidden;color:#F5F7FA}
.phero>img,.phero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,rgba(14,17,22,.86) 0%,rgba(14,17,22,.55) 38%,rgba(14,17,22,.16) 70%,rgba(14,17,22,0) 100%),
  linear-gradient(to bottom,rgba(14,17,22,.55) 0%,rgba(14,17,22,.10) 26%,rgba(14,17,22,.46) 66%,rgba(14,17,22,.95) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%;padding:0 clamp(20px,5vw,44px) clamp(52px,9vh,104px)}
.phero .kicker{color:#7FD0FF}
.phero h1{font-size:clamp(30px,5.4vw,60px);font-weight:300;line-height:1.14;letter-spacing:-.02em;
  max-width:20ch;text-shadow:0 2px 30px rgba(14,17,22,.7);color:#fff}
.phero h1 em{font-style:normal;color:#7FD0FF}
.phero p{margin-top:18px;font-size:clamp(15px,1.7vw,18px);color:rgba(245,247,250,.9);max-width:52ch;
  text-shadow:0 1px 18px rgba(14,17,22,.8)}
.phero .ctas{margin-top:30px;justify-content:flex-start}

/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.svc article{padding:clamp(24px,2.8vw,34px);border-radius:20px}
.svc h3{font-size:17px;font-weight:500;margin-bottom:9px;color:var(--navy)}
.inv .svc h3{color:#fff}
.svc p{font-size:14.5px;color:var(--tx2);line-height:1.65}
@media(max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc{grid-template-columns:1fr}}

/* ---------- stat feature ---------- */
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:20px}
.statbig{font-size:clamp(52px,9vw,104px);font-weight:300;line-height:1;letter-spacing:-.03em;
  color:var(--deep-blue)}
.statbig small{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx3);margin-top:16px;font-weight:400}
@media(max-width:820px){.statrow{grid-template-columns:1fr}}

/* ---------- two-column feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.feat.flip>figure{order:-1}
.feat figure{margin:0}
.feat img{width:100%;border-radius:20px;box-shadow:0 14px 40px rgba(22,32,58,.14)}
.feat ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.feat li{font-size:15px;color:var(--tx2);padding-left:20px;position:relative}
.feat li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--sky);opacity:.85}
@media(max-width:860px){.feat{grid-template-columns:1fr}.feat.flip>figure{order:0}}

/* ---------- story timeline ---------- */
.tl{margin-top:52px;display:flex;flex-direction:column;gap:14px}
.tl .row{display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,36px);align-items:start;
  padding:clamp(22px,2.6vw,30px);border-radius:20px}
.tl b{font-size:clamp(22px,2.6vw,30px);font-weight:500;color:var(--sky);letter-spacing:-.01em}
.tl h3{font-size:16.5px;font-weight:500;margin-bottom:7px;color:var(--navy)}
.inv .tl h3{color:#fff}
.tl p{font-size:14.5px;color:var(--tx2);line-height:1.7}
@media(max-width:640px){.tl .row{grid-template-columns:1fr;gap:6px}}

/* ---------- contact ---------- */
.contactgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:52px}
.office{padding:clamp(28px,3.4vw,42px);border-radius:22px}
.office h3{font-size:18px;font-weight:500;margin-bottom:14px;color:var(--navy)}
.office address{font-style:normal;font-size:15px;line-height:1.85;color:var(--tx2)}
.office .big{display:block;margin-top:18px;font-size:clamp(20px,2.4vw,26px);font-weight:500;
  letter-spacing:-.01em;color:var(--flame)}
.office .big:hover{color:var(--deep-red)}
.office .hrs{margin-top:16px;font-size:12.5px;letter-spacing:.06em;color:var(--tx3)}
@media(max-width:800px){.contactgrid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .js .rv{opacity:1;transform:none}
  .shot:hover img{transform:none}
  .lqx::after{display:none}
  .lqx:active{transform:none}
  .shine::before{animation:none}
}

/* ---------- feature video ("No Job Too Small") ----------
   Poster + play button, click to load. The clip is ~9MB and most visitors will
   scroll past it, so nothing downloads until someone actually asks for it. */
.vid-feature{position:relative;border-radius:22px;overflow:hidden;margin-top:44px;
  box-shadow:0 18px 50px rgba(22,32,58,.18);background:#0E1116;aspect-ratio:16/9}
.vid-feature img,.vid-feature video{width:100%;height:100%;object-fit:cover;display:block}
.vid-feature video{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.vid-feature.playing video{opacity:1}
.vid-feature.playing .vf-poster,.vid-feature.playing .vf-play,.vid-feature.playing .vf-label{opacity:0;pointer-events:none}
.vf-poster{position:absolute;inset:0;transition:opacity .4s ease}
.vf-poster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,17,22,.72),rgba(14,17,22,.10) 46%,rgba(14,17,22,.34))}
.vf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,9vw,86px);height:clamp(64px,9vw,86px);border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px rgba(0,0,0,.35);
  display:grid;place-items:center;transition:transform .3s ease,background .3s ease}
.vf-play::before{content:"";width:0;height:0;margin-left:5px;
  border-left:clamp(17px,2.2vw,22px) solid #fff;
  border-top:clamp(11px,1.4vw,14px) solid transparent;
  border-bottom:clamp(11px,1.4vw,14px) solid transparent}
.vf-play:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(227,45,38,.85)}
.vf-label{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,30px);
  color:#fff;transition:opacity .4s ease;pointer-events:none}
.vf-label b{display:block;font-size:clamp(19px,2.6vw,30px);font-weight:400;letter-spacing:-.01em}
.vf-label span{display:block;margin-top:6px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(245,247,250,.72)}

/* ---------- cross-link banner ---------- */
.crosslink{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;padding:clamp(26px,3.4vw,40px) clamp(24px,4vw,48px);border-radius:22px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-top),var(--glass-shadow)}
.crosslink b{display:block;font-size:clamp(19px,2.4vw,26px);font-weight:500;color:var(--navy)}
.crosslink span{display:block;margin-top:6px;font-size:15px;color:var(--tx2)}
.crosslink .btn{flex:none}

/* ===========================================================================
   DARK THEME
   Light is the default (client's direction). Dark is opt-in via the header
   toggle and remembered per visitor. Only tokens flip; no component knows
   which theme it is in. Surfaces that sit on media (loader, hero, .phero)
   are dark in both themes and are deliberately untouched here.
   =========================================================================== */
[data-theme="dark"]{
  --page:#0E1116;
  --page-2:#141922;
  --tx:#F5F7FA;
  --tx2:rgba(245,247,250,.74);
  --tx3:rgba(245,247,250,.52);
  --slate:rgba(245,247,250,.52);
  --glass:rgba(255,255,255,.055);
  --glass-hover:rgba(255,255,255,.09);
  --glass-line:rgba(255,255,255,.13);
  --glass-edge:rgba(255,255,255,.12);
  --glass-shadow:0 12px 40px rgba(0,0,0,.32);
  --glass-top:inset 0 1px 0 rgba(255,255,255,.09);
}
/* inverse bands still need to read as a change of ground, so in dark they go
   deeper navy rather than lighter */
[data-theme="dark"] .inv{background:#141B30}
[data-theme="dark"] .band.alt{background:var(--page-2)}
[data-theme="dark"] .brands{background:var(--page-2);border-top-color:rgba(255,255,255,.07)}
[data-theme="dark"] footer{background:#0A0D12}

/* headings that were pinned to navy for light-mode contrast */
[data-theme="dark"] .trust b,
[data-theme="dark"] .path h3,
[data-theme="dark"] .step h3,
[data-theme="dark"] .svc h3,
[data-theme="dark"] .tl h3,
[data-theme="dark"] .office h3,
[data-theme="dark"] .crosslink b{color:#fff}
[data-theme="dark"] .statbig{color:var(--sky)}
[data-theme="dark"] .office .big{color:#FF6B60}

/* header: dark glass instead of white frost */
[data-theme="dark"] header::before{background:rgba(20,25,33,.42)}
[data-theme="dark"] header.solid{
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 12px 34px rgba(0,0,0,.42)}
[data-theme="dark"] header.solid .menubtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
[data-theme="dark"] header.solid .menubtn span{background:#fff}
[data-theme="dark"] #mnav{background:rgba(14,17,22,.86)}
[data-theme="dark"] #mnav a{color:#F5F7FA;background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
[data-theme="dark"] .band .btn.ghost:not(.on-media){border-color:rgba(255,255,255,.3);
  color:var(--tx);background:rgba(255,255,255,.07)}
[data-theme="dark"] .band .btn.ghost:not(.on-media):hover{border-color:#fff;background:rgba(255,255,255,.14)}
[data-theme="dark"] .lqx::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.14), rgba(255,255,255,.03) 46%, transparent 66%)}
[data-theme="dark"] .band.lit::before{
  background:
    radial-gradient(680px 480px at 86% 8%, rgba(47,164,224,.16), transparent 62%),
    radial-gradient(760px 560px at 4% 94%, rgba(30,51,139,.30), transparent 66%),
    radial-gradient(460px 340px at 30% 36%, rgba(227,45,38,.07), transparent 60%);
}
[data-theme="dark"] .who img,[data-theme="dark"] .feat img{box-shadow:0 14px 40px rgba(0,0,0,.45)}
[data-theme="dark"] .grid img,[data-theme="dark"] .gallery img{box-shadow:0 6px 20px rgba(0,0,0,.4)}
[data-theme="dark"] .chip{background:#fff}

/* ---------- logo state machine ----------
   over the hero: white mark only. solid + light: navy lockup.
   solid + dark: white-wordmark lockup. */
header .brand .lg-dark,header .brand .lg-white{display:none}
header.solid .brand .lg-light{display:none}
header.solid .brand .lg-dark{display:block}
[data-theme="dark"] header.solid .brand .lg-dark{display:none}
[data-theme="dark"] header.solid .brand .lg-white{display:block}
[data-theme="dark"] footer .flogo{opacity:.95}

/* ---------- theme toggle ---------- */
.themebtn{
  width:40px;height:40px;border-radius:999px;cursor:pointer;flex:none;
  display:grid;place-items:center;margin-left:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  transition:.25s}
header.solid .themebtn{background:rgba(22,32,58,.06);border-color:rgba(22,32,58,.16);color:var(--tx)}
[data-theme="dark"] header.solid .themebtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.themebtn:hover{transform:rotate(-18deg)}
.themebtn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-moon{display:none}
[data-theme="dark"] .themebtn .i-sun{display:none}
[data-theme="dark"] .themebtn .i-moon{display:block}
/* the header is a flex row; keep the toggle beside the call button */
header{gap:10px}
@media(max-width:899px){
  header .themebtn{margin-left:auto;margin-right:6px}
}
#mnav .mtheme{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:15px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--glass-edge);color:var(--tx);
  opacity:0;transition:opacity .4s ease .4s}
#mnav.open .mtheme{opacity:1}

/* --- forms: contact enquiry and job application ------------------------- */
.fmwrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.fmintro .big{display:inline-block;margin-top:22px}
.fm{padding:clamp(24px,3.4vw,40px);border-radius:22px}
.fm p{margin:0 0 18px}
.fm .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fm label,.fm .lab{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:8px;font-weight:500}
.fm input[type=text],.fm input[type=tel],.fm input[type=email],.fm input[type=file],.fm textarea{
  width:100%;padding:13px 15px;border:1px solid var(--glass-edge);border-radius:13px;
  font:inherit;font-size:15px;color:var(--tx);background:var(--page);
  transition:border-color .18s ease,box-shadow .18s ease}
.fm textarea{resize:vertical;min-height:120px;line-height:1.6}
.fm input:focus,.fm textarea:focus{outline:0;border-color:var(--sky);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 22%,transparent)}
.fm input::placeholder,.fm textarea::placeholder{color:var(--tx3)}
.fm .seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:var(--page);border:1px solid var(--glass-edge)}
.fm .seg label{margin:0;cursor:pointer}
.fm .seg input{position:absolute;opacity:0;pointer-events:none}
.fm .seg span{display:block;padding:9px 20px;border-radius:999px;font-size:13px;
  letter-spacing:.02em;text-transform:none;color:var(--tx2);transition:background .2s ease,color .2s ease}
.fm .seg input:checked+span{background:var(--sky);color:#fff}
.fm .seg input:focus-visible+span{outline:2px solid var(--sky);outline-offset:2px}
.fm button{padding:15px 34px;border:0;border-radius:999px;cursor:pointer;background:var(--flame);
  color:#fff;font:inherit;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s ease,transform .2s ease}
.fm button:hover{background:var(--deep-red)}
.fm button:active{transform:translateY(1px)}
.fm button[disabled]{opacity:.55;cursor:default}
.fmnote{margin-top:16px !important;font-size:12.5px;color:var(--tx3);line-height:1.65}
.fmstatus{margin:0 !important;font-size:14px;line-height:1.6}
.fmstatus:not(:empty){margin-top:14px !important;padding:13px 16px;border-radius:13px;
  background:color-mix(in srgb,var(--sky) 12%,transparent);color:var(--tx)}
.fmstatus.bad:not(:empty){background:color-mix(in srgb,var(--flame) 12%,transparent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:900px){
  .fmwrap{grid-template-columns:1fr;gap:34px}
  .fm .row2{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){.fm button,.fm .seg span,.fm input,.fm textarea{transition:none}}

/* select, file input and hint text — used by the careers and staff forms */
.fm select{width:100%;padding:13px 15px;border:1px solid var(--glass-edge);border-radius:13px;
  font:inherit;font-size:15px;color:var(--tx);background:var(--page);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 21px) 22px,calc(100% - 15px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.fm select:focus{outline:0;border-color:var(--sky);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 22%,transparent)}
.fm input[type=file]{padding:11px 13px;cursor:pointer;font-size:14px;color:var(--tx2)}
.fm input[type=file]::file-selector-button{margin-right:13px;padding:8px 16px;border:0;
  border-radius:999px;cursor:pointer;background:var(--navy);color:#fff;
  font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fm input[type=file]::file-selector-button:hover{background:var(--sky)}
.fmhint{display:block;margin-top:8px;font-size:12.5px;color:var(--tx3);
  letter-spacing:normal;text-transform:none}
.fprivacy{margin-top:14px}
.fprivacy a{color:rgba(245,247,250,.55);font-size:12.5px;text-decoration:none;letter-spacing:.02em}
.fprivacy a:hover{color:#fff;text-decoration:underline}

/* The residential clip resolves on a sunlit house, much brighter than the
   commercial skyline the base scrim was tuned against. Rather than dimming the
   footage until the copy reads, which throws away the shot, the scrim stays
   light and the type carries its own contrast: tight shadows that hug the
   letterforms, where the base 30px glow only hazes over bright ground. */
.hero.bright .scrim{background:
  linear-gradient(to bottom,rgba(14,17,22,.42) 0%,rgba(14,17,22,.05) 20%,rgba(14,17,22,.08) 46%,rgba(14,17,22,.52) 78%,rgba(14,17,22,.72) 100%)}
.hero.bright .scrim2{background:
  radial-gradient(ellipse 115% 55% at 50% 78%, rgba(14,17,22,.58), rgba(14,17,22,.20) 58%, transparent 78%)}
.hero.bright .stage.end h1{
  text-shadow:0 1px 2px rgba(14,17,22,.9),0 2px 9px rgba(14,17,22,.7),0 0 32px rgba(14,17,22,.45)}
.hero.bright .stage.end p{
  text-shadow:0 1px 2px rgba(14,17,22,.95),0 1px 7px rgba(14,17,22,.8)}
.hero.bright .stage.open .eyebrow{
  text-shadow:0 1px 2px rgba(14,17,22,.95),0 1px 12px rgba(14,17,22,.85)}

/* ===========================================================================
   Pinned scroll sections.

   Two mechanics, both sticky-based rather than scroll-jacking: the page keeps
   its native scroll, a tall parent just holds a sticky child while the content
   inside advances. That means no scroll hijack, no broken back button, and the
   whole thing degrades to a plain stacked list when the viewport is small or
   the visitor asked for reduced motion.
   =========================================================================== */
.pinsec{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
/* .wrap carries margin:0 auto, and auto cross-axis margins on a flex item beat
   align-items:stretch, collapsing it to content width. Put the width back. */
.pin>.wrap{width:100%}

/* --- process: steps advance as you scroll ------------------------------- */
.procpin{background:var(--navy);color:#fff}
.procpin .kicker{color:#7FD0FF}
.procpin h2{font-size:clamp(26px,3.9vw,46px);font-weight:300;line-height:1.14;
  letter-spacing:-.02em;margin:14px 0 0;color:#fff}
.ps-head{margin-bottom:clamp(20px,3.2vh,40px)}
.ps-rail{display:flex;align-items:center;gap:18px;margin-bottom:clamp(22px,3.6vh,44px)}
.ps-count{font-size:12px;letter-spacing:.16em;color:rgba(245,247,250,.6);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ps-line{position:relative;flex:1;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.ps-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--sky),#9BDCFF)}
.ps-stage{position:relative;min-height:clamp(320px,46vh,440px)}
.ps-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4.6vw,60px);align-items:center;opacity:0;will-change:opacity,transform}
.ps-num{font-size:clamp(40px,6vw,76px);line-height:1;font-weight:200;color:var(--sky)}
.ps-text h3{font-size:clamp(22px,3vw,36px);font-weight:400;margin:10px 0 14px;color:#fff}
.ps-text p{color:rgba(245,247,250,.76);font-size:clamp(15px,1.5vw,18px);max-width:42ch;
  font-weight:300;line-height:1.7}
.ps-img{position:relative;height:clamp(280px,44vh,420px);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.34)}
.ps-img img{width:100%;height:100%;object-fit:cover;display:block}

/* --- statement: the line assembles word by word -------------------------- */
.statepin{background:var(--ink);color:#fff}
.statepin .pin{text-align:center;padding-inline:24px}
.statepin .pin::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 68% at 78% 22%,rgba(47,164,224,.20),transparent 60%),
             radial-gradient(50% 60% at 14% 84%,rgba(227,45,38,.13),transparent 62%)}
.statepin .wrap{position:relative;z-index:1}
.st-eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#7FD0FF;
  margin-bottom:24px;font-weight:500}
.st-build{font-size:clamp(28px,5.6vw,74px);font-weight:200;line-height:1.08;letter-spacing:-.022em;
  max-width:17ch;margin:0 auto;color:#fff}
.st-build span{display:inline-block;opacity:.10;transform:translateY(.26em);filter:blur(5px);
  will-change:opacity,transform,filter}
.st-build span.em{color:#7FD0FF}
.st-sub{color:rgba(245,247,250,.7);font-size:clamp(15px,1.6vw,19px);max-width:46ch;
  margin:32px auto 0;opacity:0;font-weight:300;line-height:1.7}

/* --- collapse to a plain stack on small screens or reduced motion -------- */
@media(max-width:860px){
  .pinsec{height:auto !important}
  .pin{position:static;height:auto;display:block;padding-block:clamp(64px,11vw,94px);overflow:visible}
  .ps-stage{min-height:0}
  .ps-rail{display:none}
  .ps-slide{position:relative;opacity:1 !important;transform:none !important;
    grid-template-columns:1fr;gap:20px;margin-bottom:44px}
  .ps-slide:last-child{margin-bottom:0}
  .ps-img{height:auto;aspect-ratio:4/3}
  .st-build span{opacity:1 !important;transform:none !important;filter:none !important}
  .st-sub{opacity:1 !important}
}
@media(prefers-reduced-motion:reduce){
  .pinsec{height:auto !important}
  .pin{position:static;height:auto;display:block;padding-block:clamp(64px,11vw,94px);overflow:visible}
  .ps-rail{display:none}
  .ps-slide{position:relative;opacity:1 !important;transform:none !important;
    grid-template-columns:1fr;gap:20px;margin-bottom:44px}
  .ps-img{height:auto;aspect-ratio:4/3}
  .st-build span{opacity:1 !important;transform:none !important;filter:none !important}
  .st-sub{opacity:1 !important}
}
.fsep{margin:0 10px;color:rgba(245,247,250,.35);font-size:12.5px}

/* --- staff form directory: a grid of outbound link cards ---------------- */
.formdir{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:22px}
.fbtn{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:118px;
  padding:20px 22px;border-radius:18px;text-decoration:none;color:var(--tx);
  background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:var(--glass-top),var(--glass-shadow);backdrop-filter:blur(22px) saturate(1.4);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.fbtn:hover{transform:translateY(-2px);border-color:var(--sky);box-shadow:var(--glass-top),0 14px 34px rgba(22,32,58,.13)}
.fbtn-name{font-size:17px;font-weight:400;line-height:1.35}
.fbtn-meta{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.fbtn-meta svg{width:14px;height:14px;fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}