/* ==========================================================================
   NAHDAT INTERNATIONAL — design system & page styles
   Palette: navy #0E2340/#10233F · orange #F26522 · teal #128C8C
            surface #F5F7FA · body #4A5568
   Type:    Manrope (headings) · Inter (body/UI/data)
   Rhythm:  8px base · section padding clamp(4.5rem, 9vw, 7.5rem)
   Motion:  reveal + hover only, cubic-bezier(.16,1,.3,1), reduced-motion safe
   ========================================================================== */

:root{
  --navy-950:#0A1A30;
  --navy-900:#0E2340;
  --navy-850:#10233F;
  --navy-700:#1A3357;
  --orange:#F26522;          /* fills, accents on navy */
  --orange-strong:#FF7A3C;   /* hover fill */
  --orange-deep:#BE4308;     /* orange as TEXT on light (AA) */
  --teal:#128C8C;            /* decorative */
  --teal-deep:#0C6B6B;       /* teal as TEXT on light (AA) */
  --surface:#F5F7FA;
  --paper:#FFFFFF;
  --ink:#0E2340;
  --body:#4A5568;
  --line:rgba(14,35,64,.1);
  --line-strong:rgba(14,35,64,.18);
  --w-line:rgba(255,255,255,.1);
  --on-navy:#C9D3E2;
  --on-navy-strong:#E6ECF5;

--font-d:"Manrope","Segoe UI",Arial,sans-serif;
--font-b:"Inter","Segoe UI",Arial,sans-serif;
--font-m:"Inter","Segoe UI",Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
   --container:100%;
  --gut:20px;
  --radius:12px;
  --shadow:0 18px 44px -24px rgba(14,35,64,.28);
}

/* Container spec: tablet (768–1199) 32px gutters, laptop (1200–1439) 100% +
   32px, desktop (1440–1919) 1536px + 40px, large desktop (≥1920) 1536px + 48px,
   mobile (≤767) 100% + 20px. */
@media (min-width:768px){
  :root{
    --gut:32px;
  }
}

@media (min-width:1024px){
  :root{
    --gut:32px;
  }
}

@media (min-width:1200px){
  :root{
    --container:100%;
    --gut:32px;
  }
}

@media (min-width:1440px){
  :root{
    --container:1536px;
    --gut:40px;
  }
}

@media (min-width:1920px){
  :root{
    --container:1536px;
    --gut:48px;
  }
}
/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-padding-top:92px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  overflow-x:clip;
  background:var(--paper);color:var(--body);
  font-family:var(--font-b);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-family:var(--font-d);color:var(--ink);line-height:1.15;letter-spacing:-.015em}
code{font-family:var(--font-m)}
::selection{background:var(--navy-900);color:#fff}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
a,button{-webkit-tap-highlight-color:transparent}

.skip-link{
  position:absolute;top:-48px;left:12px;z-index:300;
  background:var(--navy-900);color:#fff;font-weight:600;font-size:.9rem;
  padding:10px 18px;border-radius:8px;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gut);
}
.section{position:relative;overflow:clip;padding:clamp(2.5rem,5vw,4.25rem) 0;background:var(--paper)}
.section > .container{position:relative;z-index:1}
/* light sections carry faint brand washes — flat white read as template */
.section:not(.section-tint):not(.section-navy){
  background:
    radial-gradient(52% 36% at 0% 0%,rgba(18,140,140,.045),transparent 62%),
    radial-gradient(46% 34% at 100% 100%,rgba(242,101,34,.04),transparent 64%),
    var(--paper);
}
.section-tint{
  background:
    radial-gradient(56% 40% at 100% 0%,rgba(18,140,140,.05),transparent 60%),
    radial-gradient(50% 36% at 0% 100%,rgba(242,101,34,.05),transparent 62%),
    linear-gradient(180deg,#F7F9FC,var(--surface));
}
.section-navy{background:linear-gradient(180deg,var(--navy-850),var(--navy-900) 60%,var(--navy-950));}

/* ---------- section headers ---------- */
.sec-head{max-width:760px;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.sec-head-tight{margin-bottom:1.5rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-d);font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.eyebrow-onnavy{color:var(--orange)}
.sec-title{font-size:clamp(1.95rem,3.7vw,3.15rem);font-weight:700;text-wrap:balance}
.section-navy .sec-title{color:#fff}
.sec-lede{margin-top:16px;font-size:1.05rem;max-width:56ch}
.sec-lede-onnavy{color:var(--on-navy)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;
  font-family:var(--font-b);font-weight:600;font-size:.95rem;line-height:1;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-strong)}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.65)}
.btn-wide{width:100%}

/* ---------- full-width navbar ---------- */
.nav{
  position:fixed;
  top:0;
  left:0;
  transform:none;
  z-index:120;
  width:100%;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  transition:background .4s var(--ease),
             box-shadow .4s var(--ease),
             border-color .4s var(--ease);
}

.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:0;
  pointer-events:none;
  background:none;
  opacity:0;
  transition:opacity .4s var(--ease);
}

.nav.scrolled{
  background:rgba(14,35,64,.92);
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
  box-shadow:0 10px 30px -20px rgba(10,26,48,.8);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}

.nav.scrolled::before{
  opacity:1;
}

.nav.nav-solid{
  background:rgba(14,35,64,.92);
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
  box-shadow:0 10px 30px -20px rgba(10,26,48,.8);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}

.nav.nav-solid::before{
  opacity:1;
}

/* The scrolled home panel is opaque white, so there is nothing for the blur to
   pick up — and backdrop-filter makes the bar a containing block, which pulls
   the position:fixed .nav-mega out of the viewport's coordinate space and
   leaves it narrower than, and offset from, the bar it hangs under. */
.nav.nav-home.scrolled{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Scroll progress is dropped on the home bar in both states. It was drawn along
   the bar's bottom edge, and this bar has no usable one: transparent over the
   hero, so the rule just grew across the photo, and a capsule after it, where
   any inset that clears the rounded ends runs straight through the wordmark. */
html.js-anim .nav.nav-home::after{
  content:none;
}
/* the bar carries .container too, so it tracks the same gutter and cap as
   every section: nav content lines up with the copy below it at every width */
/* Page scroll progress along the bottom of the bar. Scroll-driven, so it costs
   no JS and no scroll listener; browsers without the timeline simply omit it. */
@supports (animation-timeline: scroll()){
  html.js-anim .nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    z-index:2;
    background:linear-gradient(90deg,var(--orange),var(--orange-deep));
    transform:scaleX(0);
    transform-origin:0 50%;
    animation:navProgress linear both;
    animation-timeline:scroll(root block);
  }

  @keyframes navProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:82px;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gut);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:none;
}

/* official Nahdat mark */
.brand-mark{
  width:238px;
  height:auto;
  display:block;
  border-radius:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-links{margin-left:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
}

.nav-has-menu > a::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.nav-has-menu::after{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  top:100%;
  height:44px;
}

.nav-mega{
  position:fixed;
  top:90px;
  left:50%;
  width:min(var(--container), calc(100% - var(--gut)*2));
  transform:translate(-50%, 0);
  display:grid;
  grid-template-columns:minmax(190px,.8fr) minmax(260px,1.1fr) 260px;
  gap:34px;
  padding:24px;
  background:rgba(14,35,64,.97);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-top:0;
  box-shadow:0 28px 70px -38px rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}

.nav-has-menu:hover .nav-mega,
.nav-has-menu:focus-within .nav-mega,
.nav-has-menu.is-open .nav-mega{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  pointer-events:auto;
}

.nav-has-menu.is-closing .nav-mega,
.nav-has-menu.is-suppressed .nav-mega,
.nav-dropdowns-closing .nav-has-menu .nav-mega{
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 8px);
  pointer-events:none;
}

.nav-mega-intro strong{
  display:block;
  font-family:var(--font-d);
  font-weight:700;
  font-size:1.25rem;
  color:#fff;
  margin-bottom:8px;
}

.nav-mega-intro p{
  margin:0 0 14px;
  font-size:.9rem;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}

.nav-mega-overview{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--orange);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}

.nav-mega-overview:hover,
.nav-mega-overview:focus-visible{
  color:var(--orange-strong);
  padding-left:8px;
}

.nav-mega-list{
  display:grid;
  gap:0;
  border-top:1px solid rgba(255,255,255,.14);
}

.nav-mega-list a{
  color:rgba(255,255,255,.9);
  font-size:.96rem;
  line-height:1.35;
  text-decoration:none;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}

.nav-mega-list a:hover,
.nav-mega-list a:focus-visible{
  color:var(--orange);
  padding-left:8px;
}

.nav-mega-card{
  position:relative;
}

.nav-mega-card-wrap{
  display:grid;
  align-content:start;
}

.nav-mega-card-wrap .nav-mega-toplink{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  padding:0 0 10px;
  background:transparent;
  border:0;
  color:var(--orange);
  font-size:.82rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:color .25s var(--ease),transform .25s var(--ease);
}

.nav-mega-card-wrap .nav-mega-toplink:hover,
.nav-mega-card-wrap .nav-mega-toplink:focus-visible{
  color:var(--orange-strong);
  transform:translateX(4px);
}

.nav-mega-card{
  display:grid;
  align-content:end;
  min-height:220px;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  background:var(--navy-950);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}

.nav-mega-card img{
  width:100%;
  height:132px;
  object-fit:cover;
  display:block;
}

.nav-mega-card-copy{
  display:grid;
  gap:8px;
  padding:14px;
  transition:padding-left .25s var(--ease);
}

.nav-mega-card b{
  font-family:var(--font-d);
  font-weight:700;
  font-size:1rem;
  line-height:1.35;
  transition:color .25s var(--ease);
}

.nav-mega-card small{
  color:var(--orange);
  font-size:.82rem;
  font-weight:600;
  transition:color .25s var(--ease);
}

.nav-mega-card:hover,
.nav-mega-card:focus-visible{
  border-color:rgba(242,101,34,.4);
}

.nav-mega-card:hover .nav-mega-card-copy,
.nav-mega-card:focus-visible .nav-mega-card-copy{
  padding-left:8px;
}

.nav-mega-card:hover b,
.nav-mega-card:focus-visible b{
  color:#fff;
}

.nav-mega-card:hover small,
.nav-mega-card:focus-visible small{
  color:var(--orange-strong);
}
.nav-links > a:not(.nav-cta),
.nav-item > a{
  position:relative;
  font-size:.8rem;
  font-weight:500;
  color:rgba(255,255,255,.92);
  padding:6px 0;
  transition:color .25s var(--ease),text-shadow .25s var(--ease),opacity .25s var(--ease);
}
.nav-links > a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.nav-links > a:not(.nav-cta):hover,
.nav-links > a:not(.nav-cta):focus-visible,
.nav-links > a.is-active{
  color:#fff;
  opacity:1;
  text-shadow:0 0 1px rgba(255,255,255,.35);
}
.nav-item > a:hover,
.nav-item > a:focus-visible{
  color:#fff;
  opacity:1;
  text-shadow:0 0 1px rgba(255,255,255,.35);
}
.nav-links > a:not(.nav-cta):hover::after,
.nav-links > a.is-active::after{transform:scaleX(1)}
/* pill-shaped so its curve nests inside the bar's rounded end-cap */
/* burger is now permanent on every width — it opens the overlay menu */
.nav-burger{
  display:block;position:relative;width:44px;height:44px;flex:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  border-radius:50%;cursor:pointer;z-index:210;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav-burger:hover{background:rgba(255,255,255,.2)}
.nav-burger span{
  position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;
  transition:transform .4s var(--ease);
}
.nav-burger span:nth-child(1){top:calc(50% - 3.5px)}
.nav-burger span:nth-child(2){top:calc(50% + 1.5px)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

/* ---------- overlay menu: opens up, interactive, image previews ---------- */
.menu{
  position:fixed;inset:0;z-index:200;background:var(--navy-950);color:#fff;
  display:flex;align-items:center;overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease),visibility .8s;
  visibility:hidden;
}
.menu[hidden]{display:none}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
/* focus lands on the panel itself (dialog pattern) — no loud ring on link 01 */
.menu:focus,.menu:focus-visible{outline:none}
.menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px;
}
/* menu top bar: brand + an explicit way out (the page's own burger sits
   underneath the overlay, so the exit has to live inside the dialog) */
.menu-bar{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:clamp(76px,10vh,96px);
}
.menu-logo{width:150px;height:auto;border-radius:0;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease) .2s,transform .5s var(--ease) .2s}
.menu.open .menu-logo{opacity:1;transform:none}
.menu-close{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--font-b);font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 9px 9px 20px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease) .24s,transform .5s var(--ease) .24s,
             background .35s var(--ease),border-color .35s var(--ease);
}
.menu.open .menu-close{opacity:1;transform:none}
.menu-close:hover{background:rgba(242,101,34,.9);border-color:transparent}
.menu-close svg{width:30px;height:30px;padding:6px;flex:none;
  background:rgba(255,255,255,.14);border-radius:50%;
  transition:transform .45s var(--ease)}
.menu-close:hover svg{transform:rotate(90deg)}
@media(max-width:520px){.menu-close span{display:none}.menu-close{padding:8px}}

.menu-in{
  position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(3rem,8vh,5rem);
}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{
  position:relative;display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding:clamp(10px,1.6vh,16px) 0;border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s var(--ease);
}
.menu.open .menu-nav a{opacity:1;transform:none}
.menu.open .menu-nav a:nth-child(1){transition-delay:.20s}
.menu.open .menu-nav a:nth-child(2){transition-delay:.26s}
.menu.open .menu-nav a:nth-child(3){transition-delay:.32s}
.menu.open .menu-nav a:nth-child(4){transition-delay:.38s}
.menu.open .menu-nav a:nth-child(5){transition-delay:.44s}
.menu.open .menu-nav a:nth-child(6){transition-delay:.50s}
.menu.open .menu-nav a:nth-child(7){transition-delay:.56s}
.menu-nav i{
  font-style:normal;font-family:var(--font-m);font-size:.76rem;color:var(--orange);
  flex:none;width:2.4em;
}
.menu-nav span{
  font-family:var(--font-d);font-weight:700;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  transition:transform .45s var(--ease);
}
.menu-nav a:hover span,.menu-nav a:focus-visible span{transform:translateX(14px)}
.menu-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.menu-nav a:hover::after,.menu-nav a:focus-visible::after{transform:scaleX(1)}
.menu-side{display:flex;flex-direction:column;gap:20px;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease) .42s,transform .7s var(--ease) .42s}
.menu.open .menu-side{opacity:1;transform:none}
.menu-fig{margin:0;border-radius:16px;overflow:clip;aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.12)}
.menu-fig img{width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease)}
.menu-fig img.swap{opacity:0}
.menu-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.menu-meta h3{font-family:var(--font-m);font-weight:500;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
.menu-meta p{font-size:.88rem;line-height:1.65;color:var(--on-navy)}
.menu-meta a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);
  text-underline-offset:3px;transition:text-decoration-color .3s var(--ease)}
.menu-meta a:hover{text-decoration-color:var(--orange)}
.menu-chips{display:flex;flex-wrap:wrap;gap:8px}
.menu-chips li{font-family:var(--font-m);font-size:.7rem;color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px}
body.menu-open{overflow:hidden}
@media(max-width:900px){
  .menu-in{grid-template-columns:1fr;gap:1.75rem;align-content:start}
  .menu-fig{display:none}
  .menu{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .menu.open .menu-nav a,.menu.open .menu-side{transition:none}
}

@media(max-width:900px){
  /* mobile/tablet: keep homepage nav chrome transparent over hero */
  .nav{
    position:fixed;
    top:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:transparent;
    border-bottom-color:transparent;
    box-shadow:none;
  }

  .nav.scrolled,
  .nav.nav-solid{
    background:rgba(10,26,48,.97);
    border-bottom:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 30px -20px rgba(10,26,48,.8);
  }
}
/* the bar stays a slim shortcut row; everything lives in the overlay menu */
@media(max-width:860px){
  .nav-links{display:none}
}
@media(max-width:700px){
  .nav-in{
    height:72px;
  }

  .brand-mark{
    width:190px;
  }
}

@media(max-width:520px){
  .nav-in{
    height:66px;
  }

  .brand-mark{
    width:172px;
  }
}

/* ---------- hero: Modus-style pinned timelapse scrub ---------- */
.hero{
  position:relative;overflow:clip;color:#fff;
  background:linear-gradient(158deg,var(--navy-850),var(--navy-900) 46%,var(--navy-950));
}
.hero-stage{
  position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:110px;
}
/* the scrub runway: scroll travel that drives the timelapse (desktop, motion on).
   340svh keeps it snappy — the footage is a true hyper-timelapse. */
@media(min-width:901px){
  html.js-anim .hero-scrub{height:340svh}
}
/* touch: the same scrub, driven by a canvas frame sequence. The runway only
   appears once the first frame has decoded, so a failed load can never leave
   a tall empty hero. */
@media(max-width:900px){
  html.canvas-scrub .hero-scrub{height:280svh}
}
.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.hero-canvas.live{opacity:1}
html.canvas-scrub .hero-media video{display:none}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 68%;
}
.hero-media video{opacity:0;transition:opacity 1.4s ease}
.hero-media video.live{opacity:1}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,26,48,.93) 10%,rgba(10,26,48,.68) 50%,rgba(14,35,64,.42)),
    linear-gradient(to top,rgba(10,26,48,.9),rgba(10,26,48,.24) 55%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.hero-art{
  position:absolute;right:0;bottom:0;z-index:0;pointer-events:none;
  width:min(50vw,620px);color:rgba(255,255,255,.15);
  mask-image:linear-gradient(100deg,transparent 2%,#000 40%);
  -webkit-mask-image:linear-gradient(100deg,transparent 2%,#000 40%);
}
.hero-in{position:relative;z-index:1;padding-bottom:clamp(3rem,6vw,4.5rem)}
.eyebrow-hero{color:var(--orange);letter-spacing:.2em;margin-bottom:20px}
.eyebrow-hero::before{background:var(--orange)}
/* the giant NAHDAT display carries the size — the h1 reads as a strong deck */
/* the giant display carries the size — the h1 reads as a strong deck */
.hero-h{
  color:#fff;font-size:clamp(1.45rem,2.5vw,2.2rem);font-weight:700;
  letter-spacing:-.018em;line-height:1.16;max-width:27ch;text-wrap:balance;
}
.hero-h em{font-style:normal;color:var(--orange)}
.hero-lede{margin-top:22px;max-width:56ch;font-size:1.08rem;color:var(--on-navy)}
/* row gap clears the ring's 24px overhang so it never touches the ghost button */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
/* credentials as one rule-separated line, not a row of glass pills: they are
   supporting evidence under the CTAs, not four more things to click */
.hero-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:30px}
.hero-chips li{
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.05em;
  color:var(--on-navy-strong);
  padding-right:15px;margin-right:15px;
  border-right:1px solid rgba(255,255,255,.24);
}
.hero-chips li:last-child{padding-right:0;margin-right:0;border-right:0}
@media(max-width:760px){
  .hero-stage{
    justify-content:flex-start;
    padding-top:128px;
    padding-bottom:34px;
  }

  .hero-in{
    display:flex;
    min-height:auto;
    flex-direction:column;
    justify-content:flex-start;
  }

  .eyebrow-hero{
    font-size:.7rem;
    letter-spacing:.14em;
  }

  .hero-display{
    margin:8px 0 10px;
  }

  .hero-display span{
    font-size:clamp(58px,20vw,92px);
    line-height:.9;
  }

  .hero-h{
    max-width:12ch;
    font-size:clamp(2rem,9vw,3rem);
    line-height:1.08;
  }

  .hero-lede{
    margin-top:18px;
    max-width:30ch;
    font-size:.98rem;
    line-height:1.65;
  }

  .hero-cta{
    gap:14px;
    margin-top:24px;
  }

  .hero-cta .btn{
    width:100%;
    justify-content:center;
  }

  .hero-chips{
    gap:4px 0;
    margin-top:24px;
  }

  .hero-chips li{
    padding-right:10px;
    margin-right:10px;
    font-size:.68rem;
  }
}

@media(max-width:420px){
  .hero-stage{
    padding-top:118px;
    padding-bottom:28px;
  }

  .hero-display span{
    font-size:clamp(52px,19vw,78px);
  }

  .hero-h{
    font-size:clamp(1.8rem,8.4vw,2.45rem);
  }

  .hero-lede{
    max-width:29ch;
    font-size:.94rem;
  }

  .hero-cta{
    margin-top:20px;
  }

  .hero-chips{
    margin-top:20px;
  }
}
/* stats band now stands alone right after the scrub hero: four bordered cards
   on the page ground, rather than one navy strip divided by hairlines */
.hero-stats{
  position:relative;
  z-index:1;
  padding:clamp(2.25rem,4vw,3.5rem) 0;
}

.hero-stats-in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.85rem,1.4vw,1.15rem);
}

/* no fill: on the page's own ground the outline is the whole card, which reads
   cleaner than a tinted panel and keeps the figures the only weight */
.stat{
  position:relative;
  /* right padding clears the icon so a long label wraps before it, not under it */
  padding:24px 74px 26px 24px;
  border:1px solid rgba(14,35,64,.13);
  border-radius:18px;
  background:none;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}

.stat:hover{
  transform:translateY(-3px);
  border-color:rgba(242,101,34,.45);
}

/* the figure carries the meaning; the icon just fills the ground beside it */
.stat-ic{
  position:absolute;top:22px;right:20px;
  width:38px;height:38px;display:grid;place-items:center;
  color:var(--orange-deep);
  opacity:.72;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}

.stat:hover .stat-ic{opacity:1;transform:translateY(-1px)}

.stat-ic svg{width:100%;height:100%;stroke-width:1.4}

.stat b{
  display:block;
  font-family:var(--font-d);
  font-weight:800;
  font-size:clamp(2rem,3.2vw,3rem);
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.stat-l{
  display:block;
  margin-top:10px;
  font-size:.9rem;
  font-weight:500;
  color:var(--body);
}
@media(max-width:760px){
  .hero-art{width:88vw;opacity:.5}
  .hero-stats-in{grid-template-columns:1fr 1fr}
  .stat{padding:20px 18px 22px}

  /* two narrow columns: a floated icon would crowd the label, so it sits
     above the figure instead */
  .stat-ic{position:static;margin-bottom:12px;width:38px;height:38px}
  .stat-ic svg{width:19px;height:19px}
}

/* ---------- about ---------- */
#about{
  padding-top:clamp(3.75rem,6vw,5.5rem);
}

#about .sec-title{
  font-size:clamp(2.05rem,3.4vw,3.35rem);
}

.about-intro{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-areas:
    "heading preview"
    "action preview";
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:1.5rem;
  align-items:start;
}

.about-heading{
  grid-area:heading;
  max-width:680px;
}

.about-preview{
  grid-area:preview;
  max-width:720px;
  justify-self:end;
  padding-top:clamp(.5rem,1.25vw,1rem);
}

.about-action{
  grid-area:action;
}

.about-preview p{
  max-width:66ch;
  font-size:1rem;
  line-height:1.75;
}

.about-preview p + p{
  margin-top:1rem;
}

.mv-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2rem}
.mv-card{
  background:var(--surface);border:1px solid rgba(14,35,64,.1);border-radius:10px;
  padding:22px 22px 24px;
}
.mv-card h3{font-size:1rem;margin-bottom:8px}
.mv-card p{font-size:.92rem;line-height:1.65}

.cred-panel{
  position:relative;overflow:clip;
  background:linear-gradient(170deg,var(--navy-850),var(--navy-950));
  border-radius:16px;padding:clamp(1.5rem,3vw,2rem);color:#fff;
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);
}
.cred-panel::before{
  content:"";position:absolute;top:-32%;right:-22%;width:72%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,101,34,.16),transparent 70%);
}
.cred-title{
  font-family:var(--font-m);font-weight:500;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.cred-title::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--orange)}
.cred-table{width:100%;border-collapse:collapse}
.cred-table th{
  text-align:left;vertical-align:top;font-weight:500;font-size:.82rem;
  color:rgba(255,255,255,.58);padding:12px 14px 12px 0;width:44%;
}
.cred-table td{padding:12px 0}
.cred-table tr{border-bottom:1px solid var(--w-line)}
.cred-table tr:last-child{border-bottom:0}
.cred-table code{font-size:.86rem;color:var(--on-navy-strong)}
.cred-table td span{display:block;font-size:.76rem;color:rgba(255,255,255,.5);margin-top:3px}

@media(max-width:900px){
  #about{
    padding-top:clamp(3rem,7vw,4.5rem);
  }

  #about .sec-title{
    font-size:clamp(2rem,8vw,3rem);
  }

 .about-intro{
  grid-template-columns:1fr;
  grid-template-areas:
    "heading"
    "preview"
    "action";
  gap:1.5rem;
}

.about-heading,
.about-preview,
.about-action{
  max-width:100%;
  justify-self:stretch;
}

  .about-preview{
    padding-top:0;
  }

  .mv-cards{
    grid-template-columns:1fr;
  }
}
/* ---------- services: snap carousel of the service lines ---------- */
.svc-rail{
  position:relative;
  margin-top:clamp(1.25rem,2.5vw,2rem);
}

.svc-track{
  --svc-per:1.15;
  --svc-gap:16px;
  --svc-ar:4/5;
  display:flex;
  gap:var(--svc-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  /* a scroll container clips its own overflow, so the card lift and the focus
     ring need room inside it */
  padding:6px 0 18px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.svc-track::-webkit-scrollbar{display:none}

@media(min-width:640px){
  .svc-track{--svc-per:2;--svc-gap:18px;--svc-ar:3/4}
}

@media(min-width:900px){
  .svc-track{--svc-per:3}
}

@media(min-width:1200px){
  .svc-track{--svc-per:4}
}

@media(prefers-reduced-motion:reduce){
  .svc-track{scroll-behavior:auto}
}

/* Each card is a single photographic plate. At rest it carries only its
   numeral, the service name and the link; the description is folded away and
   opens on hover, which keeps a row of four readable at a glance and gives the
   set the weight the flat white cards never had. */
.svc-card{
  flex:0 0 auto;
  width:calc((100% - (var(--svc-per) - 1) * var(--svc-gap)) / var(--svc-per));
  aspect-ratio:var(--svc-ar,3/4);
  scroll-snap-align:start;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--navy-950);
  border:1px solid rgba(14,35,64,.1);
  box-shadow:0 12px 26px -20px rgba(10,26,48,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}

.svc-card:hover,
.svc-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(242,101,34,.38);
  box-shadow:0 30px 52px -26px rgba(10,26,48,.62);
}

.svc-link-inner{
  display:block;
  height:100%;
  color:#fff;
}

/* the plate: the service photo where there is one, otherwise a drawing sheet
   ruled like the grid behind the hero, so a part-filled collection still reads
   as one set rather than a row of empty placeholders */
.svc-media{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  background:linear-gradient(155deg,#14294A,var(--navy-950));
}

.svc-media--blank::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);
  mask-image:linear-gradient(180deg,#000,transparent 92%);
}

/* resting scrim — enough for white type over any photo in the set */
.svc-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,26,48,.18) 0%,rgba(10,26,48,.56) 46%,rgba(10,26,48,.93) 100%);
}

.svc-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .9s var(--ease);
}

.svc-card:hover .svc-media img,
.svc-card:focus-within .svc-media img{transform:scale(1.08)}

.svc-content{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:20px;
}

/* second scrim, faded in on hover: the description needs a darker plate than
   the title alone does */
.svc-content::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,26,48,.1),rgba(10,26,48,.74));
  opacity:0;
  transition:opacity .5s var(--ease);
}

.svc-card:hover .svc-content::before,
.svc-card:focus-within .svc-content::before{opacity:1}

.svc-n{
  position:relative;
  font-family:var(--font-d);
  font-weight:800;
  font-size:2.6rem;
  line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.38);
  transition:-webkit-text-stroke-color .45s var(--ease);
}

.svc-card:hover .svc-n,
.svc-card:focus-within .svc-n{-webkit-text-stroke-color:rgba(242,101,34,.9)}

/* bottom-anchored, so the opening description lifts the title rather than
   pushing the link off the plate */
.svc-foot{
  position:relative;
  margin-top:auto;
  display:flex;
  flex-direction:column;
}

.svc-card h3{
  font-size:1.06rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.01em;
  margin:0;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 0fr -> 1fr animates to the copy's own height, with no measured max-height to
   fall out of step with the text */
.svc-reveal{
  display:grid;
  grid-template-rows:1fr;
}

.svc-reveal-in{
  min-height:0;
  overflow:hidden;
}

.svc-card p{
  margin:10px 0 0;
  font-size:.84rem;
  line-height:1.62;
  color:rgba(233,238,245,.84);
}

.svc-go{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
  font-size:.8rem;
  color:#fff;
}

.svc-go i{
  font-style:normal;
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}

.svc-card:hover .svc-go i,
.svc-card:focus-within .svc-go i{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  transform:translateX(3px);
}

/* Only fold the description away where a pointer can bring it back — on touch
   there is no hover, so the copy stays open. */
@media (hover:hover) and (pointer:fine){
  .svc-reveal{
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .55s var(--ease),opacity .35s var(--ease);
  }

  .svc-card:hover .svc-reveal,
  .svc-card:focus-within .svc-reveal{
    grid-template-rows:1fr;
    opacity:1;
  }
}

/* after the hover block, so these win on source order */
@media(prefers-reduced-motion:reduce){
  .svc-card,
  .svc-media img,
  .svc-reveal,
  .svc-content::before{transition:none}

  .svc-card:hover,
  .svc-card:focus-within{transform:none}

  .svc-reveal{grid-template-rows:1fr;opacity:1}
}

/* controls: progress left, arrows right. They sit above the track so the fixed
   WhatsApp button in the corner can never cover the next/previous buttons, and
   the track still scrolls and snaps natively without them */
.svc-ctl{
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2rem);
  margin-bottom:clamp(.85rem,1.6vw,1.25rem);
}

.svc-bar{
  position:relative;
  flex:1;
  height:2px;
  border-radius:2px;
  background:rgba(14,35,64,.12);
  overflow:hidden;
}

#svcBar{
  display:block;
  width:0;
  height:100%;
  background:var(--orange);
  transition:width .25s var(--ease);
}

.svc-rail.is-static .svc-ctl{display:none}

.svc-arrows{display:flex;gap:8px;flex:none}

.svc-arrow{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:50%;
  background:var(--paper);
  border:1px solid rgba(14,35,64,.14);
  color:var(--navy-950);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);
}

.svc-arrow:hover:not(:disabled){
  border-color:rgba(242,101,34,.5);
  color:var(--orange-deep);
  transform:translateY(-2px);
}

.svc-arrow:disabled{opacity:.3;cursor:default}
.svc-arrow svg{width:17px;height:17px;display:block}

@media(max-width:520px){
  .svc-content{padding:16px}
  .svc-arrow{width:38px;height:38px}
}

/* ---------- licensed activities: sticky deck of four scope families ---------- */
/* light gallery treatment: paper panels, hairlines and mono labels, so the deck
   reads like a property index rather than a dark data wall. Each panel stays an
   opaque surface because the sticky stack covers the previous one with it. */
#activities{background:var(--paper)}
.act-deck{position:relative;z-index:1}
/* Each panel is its own poster: the category photo fills the whole sticky
   frame, the codes sit on a scrim over it and the right column carries nothing
   but the index and the giant word. Panels stack as the deck scrolls, so every
   one has to paint an opaque ground — the navy under the photo does that, and
   covers a category with no image. */
.act-panel{
  position:sticky;top:0;min-height:100svh;display:grid;align-items:center;
  border-top:1px solid rgba(255,255,255,.1);overflow:clip;
  background:var(--navy-950);
  isolation:isolate;
}

.act-bg{position:absolute;inset:0;z-index:-1;overflow:clip}

.act-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.8s var(--ease);
}

html.js-anim .act-panel.in .act-bg img{transform:scale(1)}

/* weighted to the list side: the codes need a near-solid ground, the word side
   only needs enough to stay white against the photo */
.act-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,20,38,.84) 0%,rgba(8,20,38,.8) 42%,rgba(8,20,38,.66) 64%,rgba(8,20,38,.34) 88%,rgba(8,20,38,.26) 100%),
    linear-gradient(180deg,rgba(8,20,38,.18),rgba(8,20,38,.06) 50%,rgba(8,20,38,.26));
}

.act-panel-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding-top:clamp(3rem,6vh,4.5rem);padding-bottom:clamp(3rem,6vh,4.5rem);
}
.act-side{max-width:600px}
.act-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:8px;
}
.act-head h3{color:#fff;font-size:clamp(1.35rem,.7vw + 1rem,1.7rem);line-height:1.2;letter-spacing:-.01em}
.act-count{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  font-family:var(--font-m);font-size:1.15rem;color:#FFA575;
  border:1.5px solid rgba(242,101,34,.6);border-radius:50%;
}
.act-list li{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.act-list li:last-child{border-bottom:0}
/* a tint of the brand orange, not the brand orange: #F26522 on this ground
   lands under 4.5:1 at the chip's 12.5px */
.act-list code{
  flex:none;font-size:.78rem;color:#FFA575;
  background:rgba(242,101,34,.18);border-radius:6px;padding:3px 9px;
}
.act-list span{font-size:.94rem;color:rgba(233,238,245,.88)}
.act-main{
  position:relative;display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:clamp(14px,2vw,26px);
  min-width:0;container-type:inline-size;
}
.act-ix{
  align-self:flex-end;
  font-family:var(--font-m);font-size:.8rem;letter-spacing:.1em;color:rgba(255,255,255,.5);
}
/* the word is the whole right column now, so it takes the room the photo used
   to; cqw binds against the column so it can never outgrow it */
.act-word{
  max-width:100%;text-align:right;
  font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;
  /* Archivo's descenders sit below a tight line box and this sits over a photo,
     so the line box has to actually contain them */
  line-height:1.06;
  /* 13cqw is what the longest word in the set ("Construction", 12 characters)
     needs to sit inside its column; break-word is the safety net for a longer
     one an editor adds later, since the panel clips its overflow */
  font-size:min(clamp(2.6rem,6.4vw,5.6rem),13cqw);
  overflow-wrap:break-word;
  background:linear-gradient(180deg,#FFFFFF 55%,rgba(255,255,255,.62));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html.js-anim .act-word{opacity:.2;transform:translateY(12%);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js-anim .act-panel.in .act-word{opacity:1;transform:none}
@media(max-width:900px){
  /* relative, not static: the deck stops being sticky here, but .act-bg is
     absolute and still needs this panel as its containing block. Left static,
     each background stretched over the whole deck and the next panel's scrim
     painted out the previous panel's copy. */
  .act-panel{position:relative;min-height:0}
  .act-panel-in{grid-template-columns:1fr;gap:1.25rem}
  .act-main{order:-1}
  .act-word{text-align:left;font-size:clamp(2.4rem,10vw,4rem)}
  /* single column: the horizontal weighting has nothing left to weight */
  .act-bg::after{
    background:linear-gradient(180deg,rgba(8,20,38,.76),rgba(8,20,38,.86));
  }
}

/* ---------- sectors ---------- */
.sector-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.sector-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:var(--paper);
  border:1px solid rgba(14,35,64,.1);
  border-radius:16px;
  padding:24px;
  overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background-color .3s var(--ease);
}

.sector-card:hover,
.sector-card:focus-visible{
  border-color:rgba(18,140,140,.35);
  transform:translateY(-3px);
}

.sector-fig{
  position:relative;
  margin:-24px -24px 18px;
  border-radius:16px 16px 0 0;
  overflow:clip;
  height:240px;
  background:var(--paper);
}

.sector-fig img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}

.sector-card:hover .sector-fig img,
.sector-card:focus-visible .sector-fig img{
  transform:scale(1.035);
}

.sector-fig::after{
  content:none;
}

.sector-card svg{
  width:44px;
  height:44px;
  color:var(--teal-deep);
  background:#fff;
  border:1px solid rgba(14,35,64,.08);
  border-radius:10px;
  padding:9px;
  margin-bottom:14px;
}

.sector-fig + svg{
  position:relative;
  z-index:1;
  margin-top:-40px;
}

/* No min-height: it reserved a second line on every card to keep the
   paragraphs aligned, which left a visible hole under the one-line titles. */
.sector-card h3{
  font-size:1.08rem;
  line-height:1.25;
  margin-bottom:6px;
}

.sector-card p{
  font-size:.92rem;
  line-height:1.65;
  margin-top:0;
}

@media(max-width:900px){
  .sector-grid{grid-template-columns:1fr 1fr}

  .sector-fig{
    height:220px;
  }
}

@media(max-width:620px){
  .sector-grid{grid-template-columns:1fr}

  .sector-fig{
    height:230px;
  }
}

/* ---------- why nahdat ---------- */
#sectors{
  background:#e5e2e2;
}

.why-wrap{
  margin-top:clamp(4rem,8vw,6rem);
}

/* the panel is a grouping wrapper only: it sits on the section's own #e5e2e2,
   so any surface of its own would just be an invisible inset */
.why-panel{
  position:relative;
  border-radius:0;
  background:transparent;
  border:0;
  padding:0;
}

.why-panel::before{
  content:none;
}

.wp-head{
  position:relative;
  text-align:left;
  max-width:760px;
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
}

.wp-head .eyebrow{
  justify-content:flex-start;
}

.why-panel .sec-title{
  color:var(--navy-950);
}

/* heading + site photo on the left, the four reasons as a 2x2 on the right —
   the old three-column split put the photo in the middle and left the panel
   symmetrical but static */
/* heading full width, then photo beside the four reasons. The photo is a grid
   item with no aspect ratio of its own, so it simply takes the height the cards
   set — neither column is left with dead space under it */
.wp-grid{
  position:relative;
  display:grid;
  align-items:stretch;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.25rem,2.6vw,2.25rem);
}

.wp-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.35rem);
}

.wp-fig{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:clip;
  min-height:min(300px,38vw);
  border:1px solid rgba(14,35,64,.1);
}

.wp-fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}

.wp-fig:hover img{
  transform:scale(1.025);
}

.wp-dot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--orange);
  border:2px solid rgba(255,255,255,.9);
}

.wp-dot::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(242,101,34,.65);
  animation:hsPing 2.6s var(--ease) infinite;
}

.wp-fig .wp-dot:nth-of-type(2)::after{animation-delay:.65s}
.wp-fig .wp-dot:nth-of-type(3)::after{animation-delay:1.3s}
.wp-fig .wp-dot:nth-of-type(4)::after{animation-delay:1.95s}

.why-card{
  padding:20px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(14,35,64,.1);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}

.why-card:hover{
  border-color:rgba(14,35,64,.18);
  transform:translateY(-3px);
}

.why-n{
  display:block;
  font-family:var(--font-m);
  font-size:clamp(1.75rem,1.2vw + 1rem,2.15rem);
  line-height:1;
  font-weight:700;
  color:var(--orange-deep);
}

.why-card h3{
  color:var(--navy-950);
  font-size:1rem;
  margin:12px 0 6px;
}

.why-card p{
  color:var(--body);
  font-size:.88rem;
  line-height:1.6;
}

@media(max-width:960px){
  .wp-grid{grid-template-columns:1fr}
  .wp-fig{aspect-ratio:16/9;min-height:0}
}
@media(max-width:620px){
  .wp-cards{grid-template-columns:1fr}
}

@media(max-width:900px){
  .hero-spec{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------- branches ---------- */
.branch-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.branch-card{
  display:flex;
  min-height:100%;
  flex-direction:column;
  background:linear-gradient(180deg,#FFFFFF,#FAFBFD);
  border:1px solid rgba(14,35,64,.08);
  border-radius:20px;
  overflow:clip;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}

.branch-card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,35,64,.2);
}
.branch-art{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-900));
  padding:18px 18px 0;color:rgba(255,255,255,.55);
}
.branch-art svg{width:100%;height:auto}
/* the skyline redraws itself when the card is hovered */
.branch-card:hover .branch-art path,
.branch-card:hover .branch-art circle{animation:skyDraw 1.3s var(--ease)}
@keyframes skyDraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.branch-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:20px 20px 22px;
}
.branch-body h3{
  font-size:1.08rem;letter-spacing:-.01em;line-height:1.25;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.branch-tag{
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:#fff;
  background:var(--orange);border-radius:999px;padding:3px 9px;line-height:1.4;
}
.branch-addr{margin-top:12px;font-size:.88rem;line-height:1.6;color:var(--body)}
/* the office's remit reads as a caption under the address, not a teal call-out */
.branch-focus{
  margin-top:auto;
  padding-top:16px;
  font-size:.84rem;
  line-height:1.55;
  font-weight:500;
  color:rgba(14,35,64,.6);
}
@media(max-width:900px){.branch-grid{grid-template-columns:1fr}}

/* ---------- hse ---------- */
.hse-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}

.hse-copy{
  max-width:58ch;
  font-size:1rem;
  line-height:1.75;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:1.75rem;
  max-width:620px;
}

.badge{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:12px 16px;
  background:#fff;
}

.badge svg{
  width:20px;
  height:20px;
  color:var(--teal-deep);
  flex:none;
}

.badge b{
  display:block;
  color:var(--ink);
}

.badge span{
  font-size:.76rem;
  line-height:1.35;
}

.hse-list-wrap{
  max-width:420px;
  justify-self:center;
  background:linear-gradient(170deg,var(--navy-850),var(--navy-950));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:18px;
  box-shadow:0 28px 70px -36px rgba(0,0,0,.65);
}

.hse-list-title{
  color:#fff;
  font-size:1rem;
  margin:2px 0 8px;
}

.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--on-navy-strong);
  font-size:.9rem;
  line-height:1.5;
}

.check-list li:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.check-list svg{
  width:18px;
  height:18px;
  flex:none;
  color:var(--orange);
  margin-top:2px;
}

@media(max-width:900px){
  .hse-grid{
    grid-template-columns:1fr;
    align-items:start;
  }

  .hse-list-wrap{
    max-width:100%;
    justify-self:stretch;
  }
}

/* ---------- contact ---------- */
#contact{
  background:#13243b;
}

#contact::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.14);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.ci-list{
  max-width:520px;
}

.ci-list div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--w-line);
}
.ci-list div:first-child{padding-top:4px}
.ci-list dt{
  font-family:var(--font-m);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:0;
}
.ci-list dd{font-size:1rem;color:var(--on-navy-strong);line-height:1.75}
.ci-list a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
.ci-list a:hover{color:#fff;text-decoration-color:var(--orange)}

.contact-form{
  position:relative;
  width:100%;
  max-width:520px;
  justify-self:end;
  margin-top:clamp(-6rem,-7vw,-3.5rem);
  background:var(--paper);
  border-radius:18px;
  padding:clamp(1.5rem,3.5vw,2.25rem);
  border:1px solid var(--line);
  box-shadow:0 16px 36px -30px rgba(10,26,48,.34);
}
.form-note{font-size:.8rem;color:var(--body);margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{margin-bottom:16px}
.f-field label{
  display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:7px;
}
.f-field input,.f-field select,.f-field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:#FBFCFE;border:1.5px solid var(--line-strong);border-radius:9px;
  padding:12px 14px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.f-field textarea{resize:vertical;min-height:120px}
.f-field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E2340' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.f-field input:focus-visible,.f-field select:focus-visible,.f-field textarea:focus-visible{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3.5px rgba(242,101,34,.22);
}
.f-field .is-bad{border-color:#C0272D}
.f-err{font-size:.8rem;font-weight:500;color:#C0272D;margin-top:6px}
.form-done{
  position:absolute;inset:0;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--paper);border-radius:inherit;padding:32px;
}
.form-done:focus,.form-done:focus-visible{outline:none} /* status panel, focused only to announce */
.form-done[hidden]{display:none}
.form-done svg{width:52px;height:52px;color:var(--teal);margin:0 auto 4px}
.form-done h3{font-size:1.25rem;margin-bottom:6px}
.form-done p{max-width:38ch;font-size:.94rem}
.form-done > *{margin-left:auto;margin-right:auto}
@media(max-width:900px){
   .contact-grid{
  grid-template-columns:1fr;
}

  .ci-list,
  .contact-form{
    max-width:100%;
  }

    .contact-form{
    justify-self:stretch;
    margin-top:0;
  }
}
@media(max-width:620px){
  .ci-list div{
    grid-template-columns:1fr;
    gap:6px;
  }
}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}

/* home contact: the form sits straight on the navy band — no card, outlined
   fields, and labels in the same mono register as the detail list beside it.
   Scoped to #contact so the contact page and the careers modal keep the card. */
#contact .contact-form{
  margin-top:0;
  max-width:560px;
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
#contact .form-note{color:rgba(255,255,255,.55);margin-bottom:26px}
#contact .f-field{margin-bottom:20px}
#contact .f-field label{
  font-family:var(--font-m);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:9px;
}
#contact .f-field input,
#contact .f-field select,
#contact .f-field textarea{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.26);
  border-radius:10px;
  padding:14px 16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
#contact .f-field input::placeholder,
#contact .f-field textarea::placeholder{color:rgba(255,255,255,.35)}
#contact .f-field select{
  /* the shorthand above reset repeat/position, so restate them with the chevron */
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
#contact .f-field select option{color:var(--ink);background:#fff}
#contact .f-field input:hover,
#contact .f-field select:hover,
#contact .f-field textarea:hover{border-color:rgba(255,255,255,.45)}
#contact .f-field input:focus-visible,
#contact .f-field select:focus-visible,
#contact .f-field textarea:focus-visible{
  border-color:var(--orange);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 3.5px rgba(242,101,34,.22);
}
#contact .f-field .is-bad{border-color:#FF7B72}
#contact .f-err{color:#FF9A8F}
#contact .contact-form .btn-wide{margin-top:8px}
#contact .form-done{
  background:var(--navy-900);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  color:#fff;
}
#contact .form-done h3{color:#fff}
#contact .form-done p{color:var(--on-navy)}

/* ---------- footer ---------- */
.footer{position:relative;overflow:clip;background:var(--navy-950);color:#fff}
/* CTA band — the "Ready to begin?" pattern */
.foot-cta{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
  padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--w-line);
}
.foot-eyebrow{
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;
}
.foot-line{
  font-family:var(--font-d);font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.7rem,3.4vw,2.9rem);text-wrap:balance;
}
.foot-cta-btns{display:flex;flex-wrap:wrap;gap:12px}

.foot-top{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:clamp(2rem,4vw,3rem);
  padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2rem,4vw,3rem);
}
.brand-foot .brand-mark{width:180px;height:auto}
.foot-tag{margin-top:16px;font-family:var(--font-d);font-weight:600;color:var(--orange);font-size:.95rem}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.foot-badges li{font-family:var(--font-m);font-size:.68rem;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px}
.foot-top-link{color:rgba(255,255,255,.7);transition:color .3s var(--ease)}
.foot-top-link:hover{color:#fff}
.foot-col h3{
  font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:12px;
}
.foot-col-gap{margin-top:20px}
.foot-col a{display:block;font-size:.92rem;color:rgba(255,255,255,.78);padding:4px 0;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-col p{font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.7}
/* registry lines are spans — they must stack, not run together as prose */
.foot-col span{display:block;font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.55;padding:4px 0}
.foot-base{
  /* the wordmark no longer reaches this row, but the SVG box still ends close
     to it — keep this above so the links stay clickable */
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-top:32px;padding-bottom:24px;border-top:1px solid var(--w-line);
  font-size:.8rem;color:rgba(255,255,255,.5);
}
.foot-lic{font-family:var(--font-m);font-size:.72rem}
.foot-legal{display:inline-flex;gap:18px}
.foot-legal a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s var(--ease)}
.foot-legal a:hover,.foot-legal a:focus-visible{color:#fff}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.foot-top{grid-template-columns:1fr}}

/* ---------- clients: logo marquee + testimonials ---------- */
.cl-marquee{
  overflow:clip;margin:clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem);
  padding:22px 0;border-block:1px solid rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cl-row{display:flex;align-items:center;width:max-content;will-change:transform}
.cl-row span{
  flex:none;
  width:250px;
  min-height:128px;
  padding:0 clamp(12px,1.8vw,22px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cl-row img{
  display:block;
  width:auto;
  height:auto;
    max-width:275px;
  max-height:154px;
  object-fit:contain;
  border-radius:0;
  filter:none;
  opacity:1;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}

.cl-row img.cl-logo-wide{
  max-width:205px;
  max-height:92px;
}

.cl-row img.cl-logo-mark{
  max-width:178px;
  max-height:108px;
}

@media(max-width:900px){
  .cl-row span{
    width:220px;
    min-height:116px;
    padding:0 14px;
  }

 .cl-row img{
  max-width:242px;
  max-height:136px;
}

  .cl-row img.cl-logo-wide{
    max-width:184px;
    max-height:82px;
  }

  .cl-row img.cl-logo-mark{
    max-width:158px;
    max-height:96px;
  }
}

@media(max-width:520px){
  .cl-marquee{
    padding:18px 0;
  }

  .cl-row span{
    width:190px;
    min-height:104px;
    padding:0 12px;
  }

 .cl-row img{
  max-width:208px;
  max-height:118px;
}

  .cl-row img.cl-logo-wide{
    max-width:160px;
    max-height:72px;
  }

  .cl-row img.cl-logo-mark{
    max-width:138px;
    max-height:86px;
  }
}


.cl-row span:hover img{
  opacity:1;
  transform:translateY(-4px) scale(1.04);
}
/* the strip itself lifts in when the section arrives */
html.js-anim .cl-marquee{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js-anim .cl-marquee.seen{opacity:1;transform:none}
html.js .cl-row{animation:clGo 44s linear infinite;animation-play-state:paused}
html.js .cl-marquee.live .cl-row{animation-play-state:running}
@keyframes clGo{to{transform:translateX(-50%)}}

/* rotating testimonial feature — one quote at a time, auto-advancing */
/* A centred pull-quote rather than a bordered panel: at desktop the quote is
   capped at ~50ch, which left the right half of the old card empty. */
.tst-wrap{
  position:relative;
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(2rem,3vw,2.75rem);
  text-align:center;
}
.tst-q{
  display:block;
  font-family:var(--font-d);font-weight:800;font-size:3.6rem;line-height:.62;
  color:rgba(242,101,34,.55);pointer-events:none;user-select:none;
  margin-bottom:clamp(1.1rem,2.2vw,1.75rem);
}
.tst-stage{position:relative;min-height:clamp(190px,17vw,225px)}
.tst{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:22px;opacity:0;pointer-events:none;
}
.tst.is-on{position:relative;opacity:1;pointer-events:auto}
html.js-anim .tst{transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.js-anim .tst.is-on{transform:none}
html.js-anim .tst.is-out{transform:translateY(-16px)}
.tst blockquote{
  margin:0;font-family:var(--font-d);font-weight:600;color:#fff;
  font-size:clamp(1.2rem,2.4vw,1.95rem);line-height:1.38;letter-spacing:-.018em;
  max-width:50ch;text-wrap:pretty;
}
.tst figcaption{display:flex;flex-direction:column;align-items:center;gap:4px}
/* the rule sits above the name once the block is centred — flanking it would
   need two pseudo-elements to stay symmetrical */
.tst figcaption b{font-family:var(--font-d);font-weight:700;font-size:.95rem;color:#fff}
.tst figcaption b::before{content:"";display:block;width:28px;height:2px;background:var(--orange);
  margin:0 auto 12px}
.tst figcaption span{font-size:.82rem;color:rgba(255,255,255,.55)}
/* no JS: every quote stays readable, stacked */
html:not(.js) .tst{position:relative;opacity:1;pointer-events:auto;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
html:not(.js) .tst-stage{min-height:0}
html:not(.js) .tst-ctl,html:not(.js) .tst-bar{display:none}

.tst-ctl{
  position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,28px);
  margin-top:clamp(1.5rem,2.8vw,2rem);
}
/* the dot is 9px of ink inside a 34px touch target */
.tst-dots{display:flex;gap:2px}
.tst-dots button{
  position:relative;width:22px;height:34px;padding:0;border:0;background:none;cursor:pointer;
}
.tst-dots button::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24);
  transition:background .35s var(--ease),width .35s var(--ease);
}
.tst-dots button:hover::before{background:rgba(255,255,255,.5)}
.tst-dots button[aria-selected="true"]::before{background:var(--orange);width:26px;border-radius:999px}
.tst-dots button[aria-selected="true"]{width:38px}
.tst-arrows{display:flex;gap:8px}
/* six wide dot targets + two arrows overflow a 320px card: let the row wrap
   rather than pushing the arrows off the screen edge */
@media(max-width:520px){
  .tst-ctl{flex-wrap:wrap;gap:14px}
}
.tst-arrow{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.tst-arrow:hover{background:var(--orange);border-color:transparent;transform:translateY(-2px)}
.tst-arrow svg{width:20px;height:20px}
.tst-bar{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:min(320px,54%);height:2px;background:rgba(255,255,255,.12);border-radius:2px;
  overflow:clip;
}
#tstBar{display:block;width:0;height:100%;background:var(--orange)}
@media(prefers-reduced-motion:reduce){.tst-bar{display:none}}

/* ---------- touch ergonomics: inline contact links get real hit areas ---------- */
@media(hover:none),(pointer:coarse){
   .ci-list a,.menu-meta a,.foot-col a,.foot-top-link{
    display:inline-block;padding-block:7px;min-height:34px;
  }
  .ci-list dd{line-height:1.5}
  /* wider dot targets on touch; desktop keeps the tighter rhythm */
  .tst-dots{gap:0;margin-left:-9px}
  .tst-dots button{width:34px}
  .tst-dots button[aria-selected="true"]{width:46px}
}
/* certification chips: legible label size, not fine print */
.foot-badges li,.menu-chips li{font-size:.73rem}

/* ---------- quiet chrome ---------- */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:#C3CAD6;border-radius:8px;border:3px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--navy-900)}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#C3CAD6 var(--surface)}
}

/* ---------- reveal motion (JS adds .js-anim to <html>) ---------- */
html.js-anim [data-reveal]{
  opacity:0;filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0s);
}
/* The travel rides a custom property behind :where(), so the rule carries no
   specificity of its own. It used to be a plain `transform` here with
   `transform:none` on .revealed, which outranked every `.card:hover` on the
   page — the sector and stat cards never lifted on hover at all. Now .revealed
   only zeroes --rv and a card's own hover transform wins again. */
html.js-anim :where([data-reveal]){transform:translateY(var(--rv,32px))}

/* ---------- reveal variants: one system, but not one motion. A page where
   every block arrives by the same 32px rise reads as a template. ---------- */

/* section heads carry the largest type on the page: more travel, and no blur —
   6px on a 3.35rem heading reads as mush mid-transition and repaints wide */
html.js-anim .sec-head[data-reveal]{
  --rv:46px;
  filter:none;
  transition-duration:1.05s;
}

/* cards settle a shorter distance than full-width blocks do, so a grid of them
   does not look like it is falling into place */
html.js-anim .sector-card[data-reveal],
html.js-anim .stat[data-reveal]{
  --rv:22px;
  filter:none;
  transition-duration:.8s;
}

/* the code lists read left to right, so they enter that way rather than up */
html.js-anim .act-list[data-stagger] > li{transform:translateX(-24px)}
html.js-anim .act-list[data-stagger].revealed > li{transform:none}

/* The rail reveals as a single block, so its cards all appeared at once. Cascade
   them instead. :where() again, so .svc-card:hover keeps its lift. */
html.js-anim :where(.svc-rail[data-reveal] .svc-card){
  transform:translateY(var(--cv,28px)) scale(var(--cs,.98));
}
html.js-anim .svc-rail[data-reveal] .svc-card{
  opacity:0;
  transition:opacity .78s var(--ease),transform .78s var(--ease);
}
html.js-anim .svc-rail[data-reveal].revealed .svc-card{opacity:1;--cv:0px;--cs:1}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(1){transition-delay:.06s}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(2){transition-delay:.14s}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(3){transition-delay:.22s}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(4){transition-delay:.3s}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(5){transition-delay:.38s}
html.js-anim .svc-rail .svc-track > .svc-card:nth-child(n+6){transition-delay:.46s}

/* Last, deliberately: every variant above sets --rv at the same specificity as
   this rule, so only source order decides. Above them, .revealed lost and the
   cards sat permanently at their entrance offset. */
html.js-anim [data-reveal].revealed{opacity:1;filter:none;--rv:0px}
/* the eyebrow's dash draws itself in a beat after the block lands */
html.js-anim [data-reveal] .eyebrow::before{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease) calc(var(--d,0s) + .25s);
}
html.js-anim [data-reveal].revealed .eyebrow::before{transform:scaleX(1)}

/* ==========================================================================
   CINEMATIC LAYER — ported from the Nahdat landing-page design language.
   Loader veils + counter, film grain, deco cursor, giant display type,
   scrubbed word-fill titles, ghost section numerals, giant ticker,
   drawn CTA ring, HQ clock chip, rising footer wordmark.
   Zero dependencies: CSS animations + the vanilla engine in js/main.js.
   ========================================================================== */

/* ---------- loader: five navy veils, letter-staggered wordmark, counter ---------- */
.loader{display:none}
html.js .loader{
  display:block;position:fixed;inset:0;z-index:400;
  visibility:visible;transition:visibility 0s 1.6s;
}
html.js .loader.done{pointer-events:none;visibility:hidden}
html.locking body{overflow:hidden}
.loader-veils{position:absolute;inset:0;display:flex}
.loader-veils i{flex:1 1 0;background:var(--navy-950);margin-right:-1px;
  transform-origin:50% 0;transition:transform .85s cubic-bezier(.8,0,.2,1)}
.loader.done .loader-veils i{transform:scaleY(0)}
.loader.done .loader-veils i:nth-child(1){transition-delay:.42s}
.loader.done .loader-veils i:nth-child(2){transition-delay:.49s}
.loader.done .loader-veils i:nth-child(3){transition-delay:.56s}
.loader.done .loader-veils i:nth-child(4){transition-delay:.63s}
.loader.done .loader-veils i:nth-child(5){transition-delay:.70s}
.loader-core{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:opacity .4s var(--ease),transform .5s cubic-bezier(.8,0,.2,1)}
.loader.done .loader-core{opacity:0;transform:translateY(-44px)}
.loader-word{text-align:center;color:#fff}
.lw{display:block;overflow:hidden;font-family:var(--font-d);font-weight:800;
  letter-spacing:.02em;line-height:1.04;font-size:clamp(52px,9vw,116px)}
.lw i{display:inline-block;font-style:normal;transform:translateY(110%);
  animation:lrise .85s var(--ease) forwards;animation-delay:calc(.12s + var(--li,0)*.05s)}
.lw i:nth-child(1){--li:0}.lw i:nth-child(2){--li:1}.lw i:nth-child(3){--li:2}
.lw i:nth-child(4){--li:3}.lw i:nth-child(5){--li:4}.lw i:nth-child(6){--li:5}
@keyframes lrise{to{transform:translateY(0)}}
.lw-2{display:block;margin-top:10px;font-family:var(--font-d);font-weight:600;
  font-size:clamp(.72rem,1.4vw,.95rem);letter-spacing:.5em;text-indent:.5em;
  color:var(--orange);opacity:0;animation:lfade .7s var(--ease) .55s forwards}
.loader-tag{margin:16px 0 0;text-align:center;font-size:.78rem;font-weight:500;
  color:rgba(255,255,255,.55);letter-spacing:.04em;
  opacity:0;animation:lfade .7s var(--ease) .85s forwards}
@keyframes lfade{to{opacity:1}}
.loader-foot{position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;gap:18px;padding:0 var(--gut) 26px;
  transition:opacity .35s var(--ease)}
.loader.done .loader-foot{opacity:0}
.loader-bar{display:block;flex:1;height:1.5px;margin-bottom:12px;
  background:rgba(255,255,255,.14);overflow:hidden}
.loader-bar b{display:block;width:0;height:100%;background:var(--orange)}
.loader-count{font-family:var(--font-d);font-weight:800;font-size:clamp(38px,5.6vw,78px);
  line-height:.8;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
  min-width:2ch;text-align:right}
@media(prefers-reduced-motion:reduce){html.js .loader{display:none}}

/* ---------- film grain over everything below the loader ---------- */
.grain{
  position:fixed;inset:-60% -60%;z-index:350;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:200px 200px;will-change:transform;
  animation:grain 2.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2.6%,2%,0)}
  50%{transform:translate3d(2%,-2.4%,0)}
  75%{transform:translate3d(-1.6%,-1.8%,0)}
  100%{transform:translate3d(0,0,0)}
}
/* mobile GPU budget: keep the grain alive, just at a slower, cheaper cadence */
@media(max-width:900px){.grain{animation-duration:3.4s;animation-timing-function:steps(3)}}

/* ---------- deco cursor: ring + center dot ---------- */
.cur-dot,
.cur-ring{
  position:fixed;
  left:0;
  top:0;
  display:block;
  pointer-events:none;
  opacity:0;
  z-index:360;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.cur-dot{
  width:7px;
  height:7px;
  background:var(--orange);
  box-shadow:0 0 18px rgba(242,101,34,.65);
}

.cur-ring{
  width:36px;
  height:36px;
  border:1px solid rgba(242,101,34,.7);
  transition:
    width .25s var(--ease),
    height .25s var(--ease),
    border-color .25s var(--ease),
    opacity .25s var(--ease);
}

.cur-ring.hot{
  width:48px;
  height:48px;
  border-color:rgba(255,255,255,.75);
}

.cur-dot.is-hidden,
.cur-ring.is-hidden{
  opacity:0 !important;
}

/* ---------- scrub beats + progress hairline ---------- */
.scrub-cap{
  position:absolute;z-index:2;left:var(--gut);top:44%;transform:translateY(-50%);
  max-width:16ch;pointer-events:none;opacity:0;
}
.scrub-cap p{
  font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.9rem,3.8vw,3.3rem);color:#fff;text-wrap:balance;margin:0;
}
.scrub-progress{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:20px;height:2px;
  background:rgba(255,255,255,.16);
}
#scrubBar{display:block;width:0;height:100%;background:var(--orange)}
html:not(.js-anim) .scrub-cap,html:not(.js-anim) .scrub-progress{display:none}
@media(max-width:900px){
  .scrub-cap{
    left:var(--gut);
    top:58%;
    max-width:18ch;
  }

  .scrub-cap p{
    font-size:clamp(1.45rem,6vw,2.4rem);
  }

  .scrub-progress{display:none}
}

@media(max-width:620px){
  .scrub-cap{
    top:64%;
    max-width:16ch;
  }

  .scrub-cap p{
    font-size:clamp(1.3rem,8vw,1.95rem);
  }
}

/* ---------- interactive-compact: service copy reveals on hover/focus ---------- */
@media(min-width:901px){
  /* activity labels rest dimmed; the group hover brings them up */
  html.js .act-list li{padding:7px 0}
  html.js .act-list span{opacity:.45;transition:opacity .35s var(--ease)}
  html.js .act-group:hover .act-list span,
  html.js .act-group:focus-within .act-list span{opacity:1}
}



/* ---------- masked wipe reveals on every figure ---------- */
html.js-anim :is(.sector-fig,.about-media,.hse-fig,.wp-fig) :is(img,video){
  clip-path:inset(14% 8% 14% 8% round 10px);
  transition:clip-path 1.1s var(--ease),opacity 1.2s ease,transform 1.4s var(--ease);
}
html.js-anim [data-reveal].revealed .sector-fig img,
html.js-anim .about-media.revealed :is(img,video),
html.js-anim .hse-list-wrap.revealed .hse-fig :is(img,video),
html.js-anim .wp-fig.revealed img{clip-path:inset(0 0 0 0 round 0)}

/* ---------- pill-tab nav links (ZROBIM pattern; wide screens only) ---------- */
@media(min-width:1024px){
  .nav-links{gap:30px}
  .nav-links > a:not(.nav-cta),
  .nav-item > a{
    padding:6px 0;
    border:0;
    border-radius:0;
    background:none;
    font-size:.8rem;
    color:rgba(255,255,255,.92);
    transition:color .3s var(--ease),text-shadow .3s var(--ease),opacity .3s var(--ease);
  }
  .nav-links > a:not(.nav-cta)::after{display:none}
  .nav-links > a:not(.nav-cta):hover,
  .nav-links > a:not(.nav-cta):focus-visible{
    color:#fff;
  }
}

/* ---------- hero spec card (TERRA project-meta pattern) ---------- */
.hero-spec{
  position:absolute;z-index:2;right:var(--gut);top:23%;
  width:min(248px,21vw);
  background:rgba(10,26,48,.4);border:1px solid rgba(255,255,255,.13);border-radius:12px;
  /* the glass is defined once, with the rest of this card's look, in site.css */
  padding:10px 14px;
  box-shadow:0 14px 34px -28px rgba(0,0,0,.5);
}
.hs-dot{position:absolute;top:-7px;left:-7px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--orange);background:rgba(10,26,48,.85)}
.hs-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(242,101,34,.5);animation:hsPing 2.4s var(--ease) infinite}
@keyframes hsPing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.55);opacity:0}}
.hero-spec dl{margin:0}
.hero-spec dl > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-spec dl > div:last-child{border-bottom:0}
.hero-spec div[hidden]{display:none}
.hero-spec dt{font-family:var(--font-m);font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero-spec dd{margin:0;font-size:.75rem;font-weight:600;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:1180px){.hero-spec{display:none}}

/* ---------- hero corner micro-label (SILVA editorial corners) ---------- */
.hero-corner{
  display:none;
}

/* ---------- hero: giant display word, orange beam, scroll cue ---------- */
.hero-display{margin:6px 0 2px;pointer-events:none;user-select:none}
.hero-display span{
  display:block;font-family:var(--font-d);font-weight:800;
  font-size:clamp(66px,15.8vw,236px);line-height:.92;letter-spacing:-.03em;
  /* SILVA pattern: the scene itself fills the letters */
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1)),
    url("../assets/img/poster-heroloop.webp") 50% 28%/cover;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
}
.hero-beam{
  position:absolute;top:-10%;right:-6%;width:52vw;height:52vw;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,101,34,.2),transparent 72%);
  filter:blur(6px);
}
.hero-cue{
  position:absolute;z-index:2;right:var(--gut);bottom:132px;
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.hero-cue i{display:block;width:34px;height:1.5px;background:currentColor;
  transform-origin:0 50%;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0);opacity:0}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) translateX(12px);opacity:0}}
@media(max-width:760px){.hero-cue{display:none}}

/* ---------- hand-drawn signatures: CTA ring + headline underline ---------- */
.ring-host{position:relative;display:inline-block}
/* The ellipse fills this box (rx/ry ~50 of 100), so the box IS the ring:
   +48px wide / +28px tall clears a pill of these proportions on every arc.
   The tilt lives here, in screen space — inside the SVG, preserveAspectRatio
   "none" stretches x ~4x more than y and turns a 3deg rotate into a wild skew
   that cut straight through the button. */
/* the box is sized by `inset` alone on a plain span. An <svg> here is a
   replaced element: its percentage width did NOT resolve against the host
   (measured 231px where 287px was required), which left the ellipse narrower
   than the button and slicing through both ends. */
.u-host{position:relative;display:inline-block}
.u-line{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.17em;
  color:var(--orange);opacity:.95;overflow:visible}
html.js-anim .u-line path{stroke-dasharray:100;stroke-dashoffset:100}
html.js-anim.loaded .u-line path{transition:stroke-dashoffset .9s var(--ease) 1.2s;stroke-dashoffset:0}

/* ---------- hero display letters rise out of the line box ---------- */
.hero-display{overflow:hidden}
.hero-display i{font-style:normal;display:inline-block}
html.js-anim .hero-display i{
  opacity:0;transform:translateY(62%);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(.35s + var(--li,0)*.06s);
}
html.js-anim.loaded .hero-display i{opacity:1;transform:none}

/* ---------- generic child cascade: [data-stagger] rows stagger in ---------- */
html.js-anim [data-stagger] > *{
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--sd,0s);
}
html.js-anim [data-stagger].revealed > *{opacity:1;transform:none}

/* ---------- masked line rise (band statement) ---------- */
.rise-mask{overflow:hidden}
html.js-anim .rise-mask > span{display:inline-block;transform:translateY(115%);
  transition:transform .95s var(--ease) .1s}
html.js-anim .rise-mask.revealed > span{transform:none}

/* ---------- CTA arrow ---------- */
.btn .arr{
  display:inline-block;
  transition:transform .3s var(--ease);
}

.btn:hover .arr{
  transform:translateX(4px);
}

.btn{
  overflow:hidden;
}

.btn::before{
  content:none;
}

/* ---------- ghost section numerals ---------- */
.sec-ghost{
  position:absolute;z-index:0;top:clamp(-26px,-1.6vw,-8px);right:-1.5vw;
  font-family:var(--font-d);font-weight:800;line-height:.8;letter-spacing:-.05em;
  font-size:clamp(150px,23vw,330px);
  color:transparent;-webkit-text-stroke:1.5px rgba(14,35,64,.08);
  pointer-events:none;user-select:none;
}
.sec-ghost-d{-webkit-text-stroke:1.5px rgba(255,255,255,.07)}
@supports (animation-timeline: view()){
  html.js-anim .sec-ghost{
    animation:ghostDrift linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%;
  }
  @keyframes ghostDrift{from{transform:translateY(-4%)}to{transform:translateY(10%)}}

  /* photos drift inside their frames as they cross the viewport. Animating
     object-position rather than transform leaves every hover scale and
     clip-path reveal on the same images untouched. */
  html.js-anim :is(.sector-fig,.wp-fig,.about-media,.hse-fig,.svc-media) img,
  html.js-anim .branch-photo{
    animation:mediaDrift linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%;
  }
  @keyframes mediaDrift{from{object-position:50% 30%}to{object-position:50% 70%}}
}
@media(max-width:820px){.sec-ghost{font-size:clamp(110px,30vw,170px);right:-3vw}}

/* ---------- scrubbed word-fill titles (JS splits, scroll engine colors) ---------- */
html.js-anim .fillt .w{color:#AEB6C2;transition:color .3s linear}
html.js-anim .fillt .w.on{color:var(--ink)}
html.js-anim .section-navy .fillt .w{color:rgba(255,255,255,.28)}
html.js-anim .section-navy .fillt .w.on{color:#fff}

/* ---------- giant two-row ticker ---------- */
.ticker{
  overflow:clip;background:var(--paper);
  padding:clamp(2.75rem,5.5vw,4.5rem) 0;border-bottom:1px solid var(--line);
}
.tk-row{
  display:flex;align-items:center;gap:clamp(1.75rem,3.2vw,3.25rem);width:max-content;
  font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(2.9rem,7.4vw,7rem);white-space:nowrap;will-change:transform;
}
.tk-row i{font-style:normal;font-size:.22em;color:var(--orange);transform:translateY(.06em)}
.tk-a{color:transparent;-webkit-text-stroke:1.5px rgba(14,35,64,.32)}
.tk-b{color:var(--navy-900);margin-top:clamp(6px,1vw,14px)}
.tk-b i{opacity:.55}
html.js .tk-row{animation:tkGoA 26s linear infinite;animation-play-state:paused}
html.js .tk-b{animation-name:tkGoB;animation-duration:30s}
html.js .ticker.live .tk-row{animation-play-state:running}
@keyframes tkGoA{to{transform:translateX(-50%)}}
@keyframes tkGoB{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- stats: drawn orange underlines on reveal ---------- */
.stat::after{
  content:"";display:block;height:2px;width:min(72px,60%);background:var(--orange);
  margin-top:14px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease) .35s;
}
html.js-anim .stat.revealed::after,
html:not(.js-anim) .stat::after{transform:scaleX(1)}

/* ---------- service cards: the numeral now lives on the card's media plate,
   so the old absolutely-positioned counter ghost is gone ---------- */

/* ---------- branch art: faint blueprint grid behind skylines ---------- */
/* branch art: the real landmark, with our drawn skyline as a blueprint
   overlay that strokes in on hover (at rest it would only fight the photo) */
/* a taller, quieter photo: the squat 22/9 strip read as a banner, not a place */
.branch-art{position:relative;overflow:clip;background:var(--navy-900);aspect-ratio:4/3;padding:0}
.branch-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:transform 1.3s var(--ease),opacity .5s var(--ease);
}
.branch-card:hover .branch-photo{transform:scale(1.06);opacity:1}
.branch-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,26,48,.04) 45%,rgba(10,26,48,.42)),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,26px 26px,26px 26px;
}
.branch-art svg{
  position:absolute;inset:auto 0 0 0;z-index:1;width:100%;height:auto;
  opacity:0;transition:opacity .5s var(--ease);
}
.branch-card:hover .branch-art svg{opacity:.85}

/* ---------- footer ghost wordmark ---------- */
/* ---------- interactive footer wordmark (TextHoverEffect, vanilla port) ----------
   Three stacked SVG text layers: a faint resting stroke, a stroke that draws
   itself once the footer scrolls in, and a brand-gradient stroke revealed
   through a radial mask that chases the cursor. */
.foot-ghost{
  position:relative;
  z-index:0;
  width:100%;
  max-width:1536px;
  /* The wordmark used to be pulled down onto the .foot-base rule; at 1440 that
     put the glyph bottoms 77px below the line, so it cut the letters rather
     than grazing them. It now clears the rule, with the SVG's own bottom slack
     (~14px at 1440, scaling with width) adding to this gap. */
  margin:clamp(1.5rem,3vw,2.5rem) auto clamp(.9rem,1.8vw,1.75rem);
  padding:0 var(--gut);
  user-select:none;
  pointer-events:none;
}

.foot-ghost svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.gt{
  fill:transparent;
  font-family:var(--font-d);
  font-weight:800;
  font-size:124px;
  letter-spacing:-2px;
  stroke-width:.7;
}
@media(max-width:620px){
  .gt{
    font-size:112px;
  }
}
/* rest is a neutral ghost so the brand gradient has something to pop against */
.gt-base{stroke:rgba(255,255,255,.09)}
.gt-draw{stroke:rgba(255,255,255,.2)}
.gt-glow{stroke-width:1.6;opacity:0;transition:opacity .35s var(--ease)}
.foot-ghost.hot .gt-glow{opacity:1}
/* the draw runs once, when the footer comes into view */
html.js-anim .gt-draw{stroke-dasharray:1400;stroke-dashoffset:1400}
html.js-anim .foot-ghost.drawn .gt-draw{
  stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.22,1,.36,1);
}
@media(prefers-reduced-motion:reduce){
  html.js-anim .gt-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .gt-glow{display:none}
}

/* ---------- resilient ambient media: poster img + fading video ---------- */
.vmedia{position:relative;overflow:clip}
.vmedia img,.vmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vmedia video{opacity:0;transition:opacity 1.2s ease}
.vmedia video.live{opacity:1}
.band-media{position:absolute;inset:0}

/* ---------- about: wide golden-hour figure ---------- */
.about-media{
  width:100%;
 margin:clamp(2rem,4vw,3.25rem) 0 0;
  border-radius:16px;
  overflow:clip;
  aspect-ratio:16/7;
}

@media(max-width:900px){
  .about-media{
    aspect-ratio:16/8;
  }
}

@media(max-width:640px){
  .about-media{
    aspect-ratio:4/3;
  }
}
.about-media img,.about-media video{width:100%;height:100%;object-fit:cover;transition-property:transform,opacity;
  transition-duration:1.4s;transition-timing-function:var(--ease)}
.about-media:hover img,.about-media:hover video{transform:scale(1.04)}

/* ---------- deck + HSE figures (plate-shadow cards) ---------- */
.hse-fig{
  margin:0 0 16px;
  border-radius:12px;
  aspect-ratio:16/8;
  border:1px solid rgba(255,255,255,.12);
}

/* ---------- full-bleed video band: fixed backdrop, content scrolls over it ---------- */
.band{
  position:relative;
  overflow:clip;
  /* clip-path, unlike overflow, also clips a fixed descendant — that is what
     turns the section into a window onto a stationary video (the parallax) */
  clip-path:inset(0);
  min-height:clamp(640px,88vh,920px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.band .band-media{position:fixed;inset:0;z-index:0}
.band-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,26,48,.62),rgba(10,26,48,.4) 50%,rgba(10,26,48,.72))}
.band-in{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:clamp(4rem,10vh,6.5rem);
  padding-bottom:clamp(4rem,10vh,6.5rem);
}
.band-line{
  font-family:var(--font-d);font-weight:800;color:#fff;letter-spacing:-.025em;line-height:1;
  font-size:clamp(2.6rem,7vw,5.6rem);
  text-wrap:balance;
}
.band-line em{font-style:normal;color:var(--orange)}
.band-sub{margin-top:18px;font-family:var(--font-m);font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
@media(prefers-reduced-motion:reduce){
  .band{clip-path:none}
  .band .band-media{position:absolute}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition-duration:.01ms!important;
  }
  html.js-anim [data-reveal],
  html.js-anim .act-list[data-stagger] > li,
  html.js-anim .svc-rail[data-reveal] .svc-card{opacity:1;transform:none}
  html.js-anim .nav::after{display:none}
  html.js-anim .fillt .w{color:inherit}
  html.js-anim .act-word{opacity:1;transform:none}
  html.js-anim [data-stagger] > *{opacity:1;transform:none}
  html.js-anim .hero-display i{opacity:1;transform:none}
  html.js-anim .rise-mask > span{transform:none}
  .stat::after{transform:scaleX(1)}
  .cur-dot,.cur-ring{display:none}
  .hero-media video,.vmedia video{display:none}
}
@media(max-width:760px){
  .band{
    min-height:clamp(420px,58vh,560px);
  }
}
/* ---------- about page ---------- */
.about-page-hero{
  padding-top:clamp(8rem,12vw,11rem);
}

.about-page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}

.about-page-copy{
  max-width:760px;
}

.about-page-copy p:not(.eyebrow){
  max-width:66ch;
  font-size:1rem;
  line-height:1.75;
}

.about-page-copy p + p{
  margin-top:1rem;
}

.about-page-mv{
  max-width:720px;
}

.about-page-registry{
  max-width:460px;
  width:100%;
  justify-self:end;
  background:linear-gradient(170deg,var(--navy-850),var(--navy-950));
  color:#fff;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:clamp(1.4rem,2.6vw,2rem);
  box-shadow:0 28px 70px -36px rgba(0,0,0,.65);
}

.about-page-registry .cred-table th{
  color:rgba(255,255,255,.62);
}

.about-page-registry .cred-table td{
  color:#fff;
}

.about-page-registry .cred-table code{
  color:var(--on-navy-strong);
}

.about-page-registry .cred-table td span{
  color:rgba(255,255,255,.55);
}

@media(max-width:900px){
  .about-page-grid{
    grid-template-columns:1fr;
  }

  .about-page-registry{
    max-width:100%;
    justify-self:stretch;
  }
}
/* Issue #18: restore shared branch card hover/tap feedback after reveal motion. */
html.js-anim .branch-grid .branch-card.branch-card:hover,
html.js-anim .branch-grid .branch-card.branch-card:focus-within{
  transform:translateY(-3px);
  border-color:var(--line-strong);
}

.branch-grid .branch-card.branch-card:active{
  transform:scale(.985);
}

.branch-grid .branch-card.branch-card .branch-photo{
  transition:transform 1.3s var(--ease),opacity .5s var(--ease);
}

.branch-grid .branch-card.branch-card:hover .branch-photo,
.branch-grid .branch-card.branch-card:focus-within .branch-photo{
  transform:scale(1.06);
  opacity:1;
}

.branch-addr-link:focus-visible,
.branch-tel a:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
  color:var(--orange-deep);
  text-decoration-color:var(--orange);
}

.branch-addr-link:active,
.branch-tel a:active{
  color:var(--orange);
  text-decoration-color:var(--orange);
}

@media(prefers-reduced-motion:reduce){
  html.js-anim .branch-grid .branch-card.branch-card:hover,
  html.js-anim .branch-grid .branch-card.branch-card:focus-within,
  .branch-grid .branch-card.branch-card:active,
  .branch-grid .branch-card.branch-card:hover .branch-photo,
  .branch-grid .branch-card.branch-card:focus-within .branch-photo{
    transform:none;
  }
}
/* Footer NAHDAT watermark: restore cursor hover reveal */
.footer .foot-ghost{
  pointer-events:auto;
}

.footer .foot-ghost svg{
  pointer-events:auto;
  cursor:none;
}

.footer .gt-glow{
  opacity:0;
  transition:opacity .35s var(--ease);
}

.footer .foot-ghost.hot .gt-glow,
.footer .foot-ghost:hover .gt-glow{
  opacity:1;
}

.footer .foot-ghost:hover .gt-draw{
  stroke:rgba(255,255,255,.34);
}
/* ==========================================================================
   HERO REFINEMENT — quieter wordmark, larger headline, cinematic scrim.
   Appended last so it wins over the earlier hero layers in both stylesheets
   without editing them; every JS hook (.hero-in, .hero-display i, .u-line,
   .hero-scrim, .hero-art, .hero-spec) keeps its class and markup.
   ========================================================================== */
.hero .hero-scrim{
  background:
    linear-gradient(90deg,rgba(6,16,32,.88) 0%,rgba(6,16,32,.58) 42%,rgba(6,16,32,.22) 100%),
    linear-gradient(180deg,rgba(6,16,32,.38),rgba(6,16,32,0) 28%,rgba(6,16,32,.8) 100%);
}
.hero .hero-art{color:rgba(255,255,255,.09)}
/* the whole block has to clear a 100svh stage on a 768px laptop, so every
   size below is budgeted against that, not against the widest screen */
.hero .hero-stage{padding-top:120px}
.hero .hero-in{padding-bottom:clamp(3rem,6vh,4.5rem)}

.hero .eyebrow-hero{
  font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.22em;
  color:rgba(255,255,255,.72);margin-bottom:clamp(1rem,1.8vw,1.5rem);
}
.hero .eyebrow-hero::before{width:28px;height:1px;background:var(--orange)}

/* the wordmark becomes a drawn outline with a faint glass fill: a brand mark
   above the headline rather than a second, photo-filled headline above it */
.hero .hero-display{margin:0 0 clamp(.6rem,1.2vw,1rem)}
.hero .hero-display span{
  font-size:clamp(60px,11.6vw,168px);line-height:.9;letter-spacing:-.015em;font-weight:800;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.7);
}

.hero .hero-h{
  font-size:clamp(1.6rem,2.7vw,2.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.14;
  max-width:26ch;
}
.hero .hero-h em{color:var(--orange)}
.hero .u-line{height:.12em;bottom:-.12em;opacity:.9}
.hero .u-line path{stroke-width:2.4}

.hero .hero-lede{
  margin-top:clamp(1rem,1.6vw,1.25rem);max-width:52ch;
  font-size:clamp(1rem,1.05vw,1.12rem);line-height:1.7;color:rgba(255,255,255,.76);
}

.hero .hero-cta{margin-top:clamp(1.5rem,2.6vw,2rem);gap:12px 14px}
.hero .hero-cta .btn-ghost-light{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero .hero-cta .btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* credentials: a mono register set below the CTAs — evidence, not chips */
.hero .hero-chips{margin-top:clamp(1.6rem,3vw,2.4rem);gap:10px 0}
.hero .hero-chips li{
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.08em;color:rgba(255,255,255,.62);
  padding:0 18px 0 0;margin:0 18px 0 0;border-right:1px solid rgba(255,255,255,.18);line-height:1;
}
.hero .hero-chips li:last-child{padding-right:0;margin-right:0;border-right:0}

@media(max-width:760px){
  .hero .hero-display span{font-size:clamp(46px,15.5vw,92px)}
  .hero .hero-h{font-size:clamp(1.9rem,7.6vw,2.7rem);max-width:none}
  .hero .hero-lede{font-size:1rem}
  .hero .hero-chips li{padding-right:12px;margin-right:12px}
}
@media(max-width:520px){
  .hero .hero-stage{padding-top:112px}
}
/* the hero is above the fold by definition, so its entrance is gated by the
   loader — as the wordmark letters already are — rather than by the scroll
   observer. The stage is sticky, so anything sitting in the observer's bottom
   margin at load (the credentials line on a 900px screen) would otherwise never
   be revealed at all. The base rules still supply the staggered fade-in. */
html.js-anim.loaded .hero-stage [data-reveal]{opacity:1;transform:none;filter:none}
html.js-anim.loaded .hero-stage [data-stagger] > *{opacity:1;transform:none}
html.js-anim.loaded .hero-stage [data-reveal] .eyebrow::before{transform:scaleX(1)}

/* short laptop viewports: keep the credentials line on the stage */
@media(min-width:761px) and (max-height:800px){
  .hero .hero-stage{padding-top:104px}
  .hero .hero-in{padding-bottom:2.5rem}
  .hero .hero-display span{font-size:clamp(52px,9.6vw,138px)}
  .hero .hero-h{font-size:clamp(1.5rem,2.4vw,2.15rem)}
  .hero .hero-lede{margin-top:.85rem;line-height:1.6}
  .hero .hero-cta{margin-top:1.3rem}
  .hero .hero-chips{margin-top:1.4rem}
}