/* ==========================================================================
   PDBS — Prime Design & Build Solution
   Design language: deep blue + cream, editorial. Full-bleed imagery, generous
   whitespace, display serif + geometric sans, azure accent.
   ========================================================================== */

/* ---------- Tokens (dark theme) ---------- */
:root{
  --cream:      #0A1826;
  --cream-2:    #0E2036;
  --paper:      #1B3654;
  --ink:        #EEF2F7;
  --ink-2:      #AAB4C4;
  --ink-3:      #7E899A;
  --navy:       #14304F;
  --navy-2:     #0B1E33;
  --navy-3:     #24578A;
  --accent:      #1F6FB2;
  --accent-deep: #17558C;
  --accent-lite: #7FBCF0;
  --accent-soft: #DEEBF8;
  --line:       rgba(255,255,255,.14);
  --line-dark:  rgba(255,255,255,.14);

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --sec: clamp(72px, 10vw, 140px);

  --sh-1: 0 2px 8px rgba(12,33,56,.06), 0 12px 28px rgba(12,33,56,.06);
  --sh-2: 0 6px 18px rgba(12,33,56,.10), 0 24px 60px rgba(12,33,56,.12);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* ==========================================================================
   AMBIENT FX — scroll progress, blueprint grid, drifting orbs
   ========================================================================== */

/* ---- Scroll progress line ---- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  pointer-events:none; background:rgba(12,33,56,.10);
}
.progress span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), var(--accent-lite));
  will-change:transform;
}

/* ---- Shared canvas — whole site is dark now, so every band gets the same treatment ---- */
.pillars, .section--dark, .cta__in, .ftr,
.statement, .services, .projects, .team, .quotes, .certs, .contact{ position:relative; isolation:isolate; overflow:hidden; }

/* Drifting orbs. Soft radial gradients — no blur filter, so they stay cheap. */
.fx{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.fx i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.fx i:nth-child(1){
  width:46vmax; aspect-ratio:1; top:-20%; left:-14%;
  background:radial-gradient(circle, rgba(36,87,138,.75), rgba(36,87,138,0) 66%);
  animation:orbA 30s var(--ease) infinite alternate;
}
.fx i:nth-child(2){
  width:38vmax; aspect-ratio:1; bottom:-24%; right:-12%;
  background:radial-gradient(circle, rgba(127,188,240,.3), rgba(127,188,240,0) 68%);
  animation:orbB 38s var(--ease) infinite alternate;
}
@keyframes orbA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(14%,9%,0) scale(1.2) } }
@keyframes orbB{ from{ transform:translate3d(0,0,0) scale(1.12) } to{ transform:translate3d(-16%,-11%,0) scale(.88) } }

/* Starfield: tiny twinkling dots drifting over every band except the header/footer, which stay plain. */
.hero::after, .pillars::after, .section--dark::after, .cta__in::after,
.statement::after, .services::after, .projects::after, .team::after, .quotes::after, .certs::after, .contact::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 22% 64%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.8px 1.8px at 38% 32%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 67% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.3px 1.3px at 78% 54%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.7px 1.7px at 88% 82%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 12% 92%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.4px 1.4px at 45% 8%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.1px 1.1px at 95% 30%, rgba(255,255,255,.6), transparent);
  background-size:260px 260px;
  animation:starDrift 140s linear infinite, starTwinkle 3.6s ease-in-out infinite alternate;
}
@keyframes starDrift{ to{ background-position:260px 260px; } }
@keyframes starTwinkle{ from{ opacity:.5 } to{ opacity:1 } }

/* Seam blend: each band's top edge fades in from the exact color of the band above it,
   instead of cutting straight from one shade to the next. One rule per section because
   each has a different neighbour. */
.clients, .cta{ position:relative; }
.pillars::before, .statement::before, .section--dark::before, .services::before, .projects::before,
.team::before, .quotes::before, .clients::before, .certs::before, .cta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:180px; z-index:-1; pointer-events:none;
}
.pillars::before{ background:linear-gradient(to bottom, #04101a, transparent); }
.statement::before{ background:linear-gradient(to bottom, #14304F, transparent); }
.story::before{ background:linear-gradient(to bottom, #0A1826, transparent); }
.services::before{ background:linear-gradient(to bottom, #14304F, transparent); }
.projects::before{ background:linear-gradient(to bottom, #0A1826, transparent); }
.quality::before{ background:linear-gradient(to bottom, #0E2036, transparent); }
.team::before{ background:linear-gradient(to bottom, #14304F, transparent); }
.quotes::before{ background:linear-gradient(to bottom, #0A1826, transparent); }
.clients::before{ background:linear-gradient(to bottom, #0E2036, transparent); height:120px; }
.certs::before{ background:linear-gradient(to bottom, #0A1826, transparent); }
.cta::before{ background:linear-gradient(to bottom, #0E2036, transparent); height:120px; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
iframe{ border:0; display:block; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Type helpers ---------- */
.h-display{
  font-family:var(--ff-display);
  font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.h-display em{ font-style:italic; color:var(--accent); font-weight:500; }

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-lite); margin:0 0 .9em;
}
.eyebrow--light{ color:var(--accent-lite); }

.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); line-height:1.6; }
.section--dark .lede{ color:rgba(255,255,255,.78); }

/* ---------- Icons ---------- */
svg.i, .sbtn svg, .scrollcue svg, .chev, .totop svg{
  width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.95em 1.6em; border-radius:999px;
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn--solid{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(31,111,178,.28); }
.btn--solid:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 26px rgba(31,111,178,.36); }

.btn--ghost{ border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-2px); }

.btn--sm{ padding:.7em 1.25em; font-size:.87rem; }
.btn--lg{ padding:1.1em 2em; font-size:1.02rem; }
.btn--full{ width:100%; justify-content:center; }

/* ==========================================================================
   TOP BAR + HEADER
   ========================================================================== */
.topbar{ background:var(--navy-2); color:rgba(255,255,255,.72); font-size:.8rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; flex-wrap:wrap; }
.topbar__tag{ margin:0; }
.topbar__tag strong{ color:#fff; font-weight:600; }
.topbar__links{ display:flex; gap:22px; }
.topbar__links a{ display:inline-flex; align-items:center; gap:.5em; transition:color .2s; }
.topbar__links a:hover{ color:var(--accent-lite); }
.topbar__links svg{ font-size:.95rem; }

.hdr{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* The blur lives on a ::before layer, not on .hdr itself — a backdrop-filter
   on .hdr would make it the containing block for any position:fixed
   descendant (the mobile nav drawer), shrinking that drawer down to just
   the header's own height instead of the full viewport. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-color:rgba(10,24,38,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background-color .3s var(--ease);
}
.hdr.is-stuck::before{ background-color:rgba(10,24,38,.96); }
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(0,0,0,.3); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:92px; }
.hdr__logo img{ height:60px; width:auto; filter:brightness(0) invert(1); transition:height .3s var(--ease), transform .4s var(--ease); }
.hdr__logo:hover img{ transform:rotate(-4deg) scale(1.05); }
.hdr.is-stuck .hdr__logo img{ height:50px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav__list{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:.35em;
  padding:.6em .9em; border-radius:999px;
  font-size:.94rem; font-weight:500; color:var(--ink);
  transition:background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease);
  transform-origin:center bottom;
  will-change:transform;
}
.nav__link:hover, .nav__link.is-active{ background:rgba(255,255,255,.08); color:var(--accent-lite); }
.nav__link::after{
  content:""; position:absolute; left:50%; right:50%; bottom:2px; height:2px; border-radius:2px;
  background:var(--accent); transition:left .25s var(--ease), right .25s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after{ left:14px; right:14px; }
.nav .chev{ font-size:.85rem; transition:transform .25s var(--ease); }
.has-sub[data-open="1"] .chev{ transform:rotate(180deg); }

.has-sub{ position:relative; }
.sub{
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-2); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-sub:hover .sub, .has-sub[data-open="1"] .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.sub a{
  display:block; padding:.62em .9em; border-radius:var(--r-sm);
  font-size:.9rem; color:var(--ink-2);
  transition:background .18s, color .18s, padding-left .18s;
}
.sub a:hover{ background:rgba(255,255,255,.06); color:var(--accent-lite); padding-left:1.2em; }

.burger{ display:none; width:44px; height:44px; position:relative; }
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-on span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger.is-on span:nth-child(2){ opacity:0; }
.burger.is-on span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; isolation:isolate; display:flex; flex-direction:column; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  opacity:0; transition:opacity 1.1s var(--ease);
  animation:heroKen 16s ease-in-out infinite alternate;
  pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.hero__media img.is-active{ opacity:1; z-index:1; }
@keyframes heroKen{ from{ transform:scale(1) } to{ transform:scale(1.12) } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(4,13,24,.94) 0%, rgba(4,13,24,.8) 38%, rgba(4,13,24,.4) 72%, rgba(4,13,24,.6) 100%),
    linear-gradient(180deg, rgba(6,18,32,.35) 0%, rgba(6,18,32,.15) 42%, rgba(6,18,32,.9) 100%);
}
.hero__in{
  flex:1 0 auto;
  min-height:clamp(520px, 72vh, 760px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(48px,7vw,88px);
  color:#fff;
}
.hero__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(2.7rem, 7.6vw, 6rem); line-height:.98; letter-spacing:-.035em;
  margin:0 0 .38em; max-width:16ch;
  text-wrap:balance;
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--accent-lite); }
.hero__sub{ font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:56ch; color:rgba(255,255,255,.86); margin-bottom:2.2em; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .eyebrow.reveal{ transition-delay:0s; }
.hero__title.reveal{ transition-delay:.1s; }
.hero__sub.reveal{ transition-delay:.22s; }
.hero__cta.reveal{ transition-delay:.34s; }

.scrollcue{
  position:relative; z-index:2; margin:0 auto clamp(26px,4vw,46px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.75); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  transition:color .25s;
}
.scrollcue:hover{ color:#fff; }
.scrollcue svg{ font-size:1.3rem; animation:bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.7 } 50%{ transform:translateY(7px); opacity:1 } }

.hero__stats{ position:relative; z-index:2; background:var(--navy); }
.hero__statsin{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(24px,3.4vw,40px) clamp(16px,2.5vw,32px); border-right:1px solid var(--line-dark); }
.stat:last-child{ border-right:0; }
.stat b{
  display:block; font-family:var(--ff-display); font-weight:600;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1; color:#fff; letter-spacing:-.03em;
}
.stat span{ display:block; margin-top:.5em; font-size:.85rem; color:rgba(255,255,255,.62); }

/* ==========================================================================
   PILLARS
   ========================================================================== */
.pillars{ background:var(--navy); padding:0 0 clamp(56px,7vw,90px); color:#fff; }
.pillars__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--line-dark); }
.pillar__ic{
  width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line-dark);
  display:grid; place-items:center; margin-bottom:20px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.pillar:hover .pillar__ic{ background:var(--accent); transform:translateY(-4px) rotate(-6deg); }
.pillar__ic img{ width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
.pillar h3{ font-family:var(--ff-display); font-size:1.22rem; font-weight:600; margin-bottom:.55em; }
.pillar p{ font-size:.92rem; color:rgba(255,255,255,.66); line-height:1.55; }

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement{ padding:var(--sec) 0; }
.statement__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.statement__txt .h-display{ margin-bottom:.5em; }
.statement__txt .lede{ margin-bottom:1.2em; }
.statement__txt p{ color:var(--ink-2); }
.statement__txt .btn{ margin-top:1.4em; }

.statement__img{ position:relative; }
.statement__img > img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 120px;
  box-shadow:var(--sh-2);
}
.statement__badge{
  position:absolute; right:-14px; bottom:36px;
  width:clamp(96px,11vw,132px); aspect-ratio:1;
  background:#fff; border-radius:50%; box-shadow:var(--sh-2);
  display:grid; place-items:center; padding:16px;
  animation:float 6s var(--ease) infinite;
}
.statement__badge img{ width:100%; height:100%; object-fit:contain; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.section--dark{ background:var(--navy); color:#fff; }
.sechead{ max-width:60ch; margin-bottom:clamp(40px,5.5vw,72px); }
.sechead .h-display{ margin-bottom:.5em; }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead--row{
  max-width:none; display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}

/* ==========================================================================
   STORY
   ========================================================================== */
.story{ padding:var(--sec) 0; }
.story__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,84px); }
.story__lede p{ color:rgba(255,255,255,.72); }
.story__lede strong{ color:#fff; font-weight:600; }
.story__lede .lede{ margin-bottom:1.3em; }

.timeline{ position:relative; padding-left:34px; }
.timeline::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--accent-lite), rgba(127,188,240,.15));
}
.timeline li{ position:relative; padding-bottom:34px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-34px; top:6px; width:16px; height:16px;
  border-radius:50%; background:var(--navy); border:3px solid var(--accent-lite);
}
.timeline__yr{
  display:inline-block; font-family:var(--ff-display); font-weight:600;
  font-size:.95rem; color:var(--accent-lite); letter-spacing:.06em; margin-bottom:.35em;
}
.timeline h4{ font-family:var(--ff-display); font-size:1.28rem; font-weight:600; margin-bottom:.4em; }
.timeline p{ font-size:.93rem; color:rgba(255,255,255,.62); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:var(--sec) 0; }
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }

.svc__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc__card:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent; }
.svc__card--wide{ grid-column:span 3; flex-direction:row; }
.svc__card--wide .svc__media{ flex:0 0 46%; aspect-ratio:auto; }
.svc__card--wide .svc__body{ padding:clamp(28px,4vw,52px); justify-content:center; }
.svc__card--wide h3{ font-size:clamp(1.6rem,2.8vw,2.2rem); }
.svc__card--wide .svc__list{ columns:2; column-gap:32px; }

.svc__media{ overflow:hidden; aspect-ratio:16/10; background:var(--cream-2); }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc__card:hover .svc__media img{ transform:scale(1.06); }

.svc__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.svc__icon{
  width:48px; height:48px; flex:none; margin-bottom:18px;
  border-radius:14px; background:var(--accent);
  display:grid; place-items:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.svc__icon img{ width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1); }
.svc__card:hover .svc__icon{ background:var(--accent-deep); transform:translateY(-2px); }
.svc__body h3{ font-family:var(--ff-display); font-size:1.32rem; font-weight:600; margin-bottom:.5em; }
.svc__body > p{ font-size:.93rem; color:var(--ink-2); margin-bottom:1.1em; }

.svc__list{ display:flex; flex-direction:column; gap:.5em; font-size:.9rem; color:var(--ink-2); }
.svc__card--wide .svc__list{ display:block; }
.svc__list li{ position:relative; padding-left:1.4em; break-inside:avoid; }
.svc__card--wide .svc__list li{ margin-bottom:.6em; }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px;
  border-radius:50%; background:var(--accent-soft); border:1.5px solid var(--accent);
}
.svc__list[data-collapse]{ overflow:hidden; transition:max-height .45s var(--ease); }

.more{
  margin-top:auto; padding-top:16px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.85rem; font-weight:600; color:var(--accent-lite);
}
.more .chev{ transition:transform .3s var(--ease); }
.more[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.more:hover{ color:var(--ink); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects{ padding:var(--sec) 0; background:var(--cream-2); }
.tabs{ display:inline-flex; gap:4px; background:var(--paper); padding:5px; border-radius:999px; border:1px solid var(--line); }
.tab{
  padding:.65em 1.5em; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--ink-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.tab:hover{ color:var(--ink); }
.tab.is-on{ background:var(--navy); color:#fff; }

/* ---------- Project rail (alternating rows, slideshow + info) ---------- */
.prail{ display:flex; flex-direction:column; gap:clamp(56px,8vw,110px); }
.prail[hidden]{ display:none; }

.prail__switch{
  margin-top:clamp(48px,6vw,76px); padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--line); text-align:center;
}
.prail__switch p{ color:var(--ink-2); margin-bottom:1.2em; }

.prow{ display:flex; align-items:center; gap:clamp(28px,4vw,64px); }
.prow[hidden]{ display:none; }
.prow:nth-child(even){ flex-direction:row-reverse; }

.prow__media, .prow__info{ flex:1 1 50%; min-width:0; }

.prow__media{
  position:relative; overflow:hidden; cursor:zoom-in;
  border-radius:var(--r-lg); aspect-ratio:4/3; background:var(--navy);
  box-shadow:var(--sh-1); transition:box-shadow .4s var(--ease);
}
.prow__media:hover{ box-shadow:var(--sh-2); }
.prow__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s var(--ease), transform .6s var(--ease);
}
.prow__media img.is-active{ opacity:1; }
.prow__media:hover img.is-active{ transform:scale(1.05); }
.prow__media.is-contain img{ object-fit:contain; }
.prow__dots{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2;
  display:flex; gap:6px;
}
.prow__dots span{
  height:6px; width:6px; border-radius:999px; background:rgba(255,255,255,.5);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.prow__dots span.is-active{ width:20px; background:#fff; }

.prow__info h3{
  font-family:var(--ff-display); font-weight:600; font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.08; letter-spacing:-.02em; margin-bottom:.35em;
}
.prow__client{ color:var(--accent-lite); font-weight:700; margin-bottom:.3em; }
.prow__loc{ display:flex; align-items:center; gap:.4em; color:var(--ink-3); font-size:.9rem; margin-bottom:1.1em; }
.prow__summary{ color:var(--ink-2); max-width:52ch; margin-bottom:1.2em; }
.prow__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.3em; }
.prow__tag{
  padding:.42em 1.05em; border-radius:999px; border:1px solid var(--line);
  font-size:.8rem; color:var(--ink-2);
}
.prow__count{ font-size:.78rem; letter-spacing:.08em; color:var(--ink-3); }

@media (max-width:760px){
  .prow, .prow:nth-child(even){ flex-direction:column; align-items:stretch; }
}

.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.pgrid[hidden]{ display:none; }

.pcard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); aspect-ratio:4/3; background:var(--navy);
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
button.pcard{ width:100%; text-align:left; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.pcard__count{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:.32em .8em; border-radius:999px;
  background:rgba(6,18,32,.55); backdrop-filter:blur(6px);
  color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); }
.pcard img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .4s; }
.pcard:hover img{ transform:scale(1.07); }
.pcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,18,32,0) 32%, rgba(6,18,32,.9) 100%);
  transition:opacity .35s;
}
.pcard__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px 24px; color:#fff; }
.pcard__kind{
  display:inline-block; margin-bottom:.6em; padding:.32em .8em; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.pcard__cap h3{ font-family:var(--ff-display); font-size:1.18rem; font-weight:600; }
.pcard__cap p{
  margin:.5em 0 0; font-size:.87rem; color:rgba(255,255,255,.75);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.pcard:hover .pcard__cap p{ max-height:80px; opacity:1; }

/* ==========================================================================
   QUALITY
   ========================================================================== */
.quality{ padding:var(--sec) 0; }
.quality__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,80px); align-items:center; }
.quality__txt .h-display{ margin-bottom:.5em; }
.quality__txt .lede{ margin-bottom:1.6em; }

.ticks li{
  position:relative; padding-left:2em; margin-bottom:.85em;
  color:rgba(255,255,255,.8); font-size:.97rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:18px; height:10px;
  border-left:2.5px solid var(--accent-lite); border-bottom:2.5px solid var(--accent-lite);
  transform:rotate(-45deg);
}

.quality__quote{
  margin:0; padding:clamp(32px,4.5vw,52px);
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark);
  border-radius:var(--r-xl) var(--r-xl) 120px var(--r-xl);
  text-align:center;
}
.quality__iso{ width:96px; margin:0 auto 26px; background:#fff; border-radius:50%; padding:8px; }
.quality__quote blockquote{
  margin:0 0 1.2em; font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.4; color:#fff; letter-spacing:-.015em;
}
.quality__quote figcaption{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-lite); }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{ padding:var(--sec) 0; }
.team__ceo{
  display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:clamp(28px,5vw,64px);
  align-items:center; margin-bottom:clamp(40px,5vw,70px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-1);
}
.team__ceoimg{ height:100%; min-height:300px; background:var(--cream-2); }
.team__ceoimg img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.team__ceotxt{ padding:clamp(28px,4vw,52px) clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0; }
.team__ceotxt h3{ font-family:var(--ff-display); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:600; margin-bottom:.5em; }
.team__ceotxt > p:last-child{ font-size:.96rem; color:var(--ink-2); }
.team__quote{
  margin:0 0 1.1em; padding-left:1.1em; border-left:3px solid var(--accent);
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.4rem); line-height:1.42; letter-spacing:-.015em; color:var(--ink);
}

.team__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.tcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent; }

.tcard__ph{ aspect-ratio:4/5; overflow:hidden; background:var(--cream-2); }
.tcard__ph img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease);
}
.tcard:hover .tcard__ph img{ transform:scale(1.05); }

.tcard__body{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; flex:1; }
.tcard h3{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; margin-bottom:.3em; }
.tcard__role{
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-lite); margin-bottom:1em; line-height:1.4;
}
.tcard__body > p:last-child{ font-size:.92rem; color:var(--ink-2); }

/* ---- Board & management (no portrait) ---- */
.team__sub{
  display:flex; align-items:center; gap:clamp(14px,2vw,22px);
  margin:clamp(46px,6vw,76px) 0 clamp(24px,3.4vw,38px);
}
.team__sub::before, .team__sub::after{ content:""; flex:1; height:1px; background:var(--line); }
.team__sub span{
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-lite); white-space:nowrap;
}

.team__board{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2vw,24px); }
.bcard{
  flex:1 1 290px; max-width:400px; text-align:center;
  background:var(--navy); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,36px) clamp(20px,2.4vw,28px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.bcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); background:var(--navy-3); }
.bcard h3{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; color:#fff; margin-bottom:.38em; }
.bcard__role{ font-size:.95rem; font-weight:600; color:var(--accent-lite); margin-bottom:.85em; }
.bcard__meta{
  margin:0; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.52); line-height:1.65;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes{ padding:var(--sec) 0; background:var(--cream-2); }
.slider{ max-width:900px; margin-inline:auto; overflow:hidden; }
.slider__track{ display:flex; transition:transform .55s var(--ease); }
.slide{
  flex:0 0 100%; margin:0; padding:0 clamp(6px,3vw,40px); text-align:center;
}
.slide blockquote{
  margin:0 0 1.6em; font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,3vw,2.05rem); line-height:1.34; letter-spacing:-.02em; color:var(--ink);
  text-wrap:balance;
}
.slide figcaption{ display:flex; flex-direction:column; gap:.25em; }
.slide figcaption strong{ font-size:1rem; font-weight:700; }
.slide figcaption span{ font-size:.87rem; color:var(--ink-3); }

.slider__nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:clamp(32px,4vw,48px); }
.sbtn{
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:1.1rem; background:var(--paper);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.sbtn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:scale(1.06); }
.dots{ display:flex; gap:9px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:width .3s var(--ease), background .3s var(--ease); }
.dot.is-on{ width:26px; border-radius:999px; background:var(--accent); }

/* ==========================================================================
   CLIENTS MARQUEE
   ========================================================================== */
.clients{ padding:clamp(56px,7vw,90px) 0; overflow:hidden; }
.clients__lbl{
  text-align:center; font-size:.74rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(30px,4vw,48px);
}
.clients__strips{ display:flex; flex-direction:column; gap:16px; }
.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee--strip{
  overflow:hidden; border-radius:var(--r-lg); background:#fff; padding:24px 0;
}
.marquee__track{ display:flex; align-items:center; gap:clamp(48px,6vw,96px); width:max-content; animation:scroll 70s linear infinite; }
.marquee--reverse .marquee__track{ animation-name:scroll; animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track img{
  height:clamp(52px,6vw,84px); width:auto; object-fit:contain;
  transition:transform .3s var(--ease);
}
.marquee__track img:hover{ transform:scale(1.08); }
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ==========================================================================
   CERTIFICATES
   ========================================================================== */
.certs{ padding:var(--sec) 0; background:var(--cream-2); }
.certs .sechead--row{ align-items:center; }
.certs .sechead .lede{ margin-top:1em; max-width:56ch; }
.certs__mark{ width:clamp(90px,10vw,130px); height:auto; flex:none; }

.cfilter{
  display:flex; flex-wrap:wrap; gap:6px;
  background:var(--paper); padding:6px; border-radius:999px; border:1px solid var(--line);
  margin-bottom:clamp(28px,3.6vw,44px); width:fit-content; max-width:100%;
}
.cfilter .tab{ display:inline-flex; align-items:center; gap:.55em; }
.cfilter .tab span{
  font-size:.7rem; font-weight:700; padding:.15em .55em; border-radius:999px;
  background:var(--cream-2); color:var(--ink-3);
}
.cfilter .tab.is-on span{ background:rgba(255,255,255,.2); color:#fff; }

.cgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.cert{
  display:flex; flex-direction:column; text-align:left; overflow:hidden; padding:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cert:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent; }
.cert[hidden]{ display:none; }

.cert__thumb{
  display:block; aspect-ratio:4/3; overflow:hidden; position:relative;
  background:var(--cream-2); border-bottom:1px solid var(--line);
}
.cert__thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease);
}
.cert:hover .cert__thumb img{ transform:scale(1.04); }
.cert__thumb::after{
  content:"View"; position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg, rgba(6,18,32,0), rgba(6,18,32,.82));
  opacity:0; transition:opacity .3s var(--ease);
}
.cert:hover .cert__thumb::after{ opacity:1; }

.cert__body{ display:flex; flex-direction:column; gap:.5em; padding:20px 20px 22px; flex:1; }
.cert__title{ font-family:var(--ff-display); font-size:1.08rem; font-weight:600; line-height:1.25; }
.cert__desc{ font-size:.86rem; color:var(--ink-2); line-height:1.5; }
.cert__issuer{
  margin-top:auto; padding-top:.5em;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-lite);
}
.cert__no{ font-size:.76rem; color:var(--ink-3); line-height:1.5; }

/* ---- Lightbox ---- */
.lbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(6,18,32,.93); backdrop-filter:blur(6px);
  animation:lbfade .25s var(--ease);
}
.lbox[hidden]{ display:none; }
@keyframes lbfade{ from{ opacity:0 } to{ opacity:1 } }

.lbox__fig{ margin:0; max-width:min(920px,100%); max-height:100%; display:flex; flex-direction:column; gap:16px; }
.lbox__fig img{
  max-width:100%; max-height:calc(100vh - 190px); width:auto; height:auto; margin-inline:auto;
  object-fit:contain; background:#fff; border-radius:var(--r-md); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lbox__fig figcaption{
  text-align:center; color:rgba(255,255,255,.85); font-size:.92rem; line-height:1.5;
  max-width:60ch; margin-inline:auto;
}

.lbox__close, .lbox__nav{
  position:absolute; z-index:2; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.lbox__close:hover, .lbox__nav:hover{ background:var(--accent); transform:scale(1.06); }
.lbox__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.lbox__nav{ top:50%; margin-top:-24px; }
.lbox__nav--prev{ left:clamp(10px,2.5vw,28px); }
.lbox__nav--next{ right:clamp(10px,2.5vw,28px); }
.lbox__close svg, .lbox__nav svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ padding:clamp(48px,7vw,96px) 0 var(--sec); }
.cta__in{
  background:var(--navy);
  background-image:radial-gradient(90% 120% at 80% 0%, rgba(127,188,240,.28), transparent 60%);
  color:#fff; text-align:center;
  border-radius:var(--r-xl); padding:clamp(48px,7vw,96px) var(--pad);
  box-shadow:var(--sh-2);
}
.cta__in .h-display{ margin-bottom:.4em; }
.cta__in .lede{ max-width:48ch; margin:0 auto 2em; color:rgba(255,255,255,.82); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding:0 0 var(--sec); }
.contact__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact__info .h-display{ margin-bottom:1em; }

.cinfo{ display:flex; flex-direction:column; gap:26px; margin-bottom:clamp(32px,4vw,44px); }
.cinfo li{ display:flex; gap:18px; align-items:flex-start; }
.cinfo svg{
  font-size:1.15rem; flex:none; width:44px; height:44px; padding:12px;
  border-radius:50%; background:var(--accent-soft); color:var(--accent-deep); stroke-width:1.8;
}
.cinfo h4{ font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5em; }
.cinfo p{ margin:0; font-size:1rem; line-height:1.55; }
.cinfo a{ transition:color .2s; }
.cinfo a:hover{ color:var(--accent-lite); }

.map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1); }
.map iframe{ width:100%; height:280px; filter:invert(92%) hue-rotate(180deg) brightness(.9) contrast(.92); }

.contact__form{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px); box-shadow:var(--sh-1);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.6em; }
.field input, .field textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:.9em 1.1em; resize:vertical;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field textarea:focus{
  outline:none; background:var(--paper); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(31,111,178,.14);
}
.field.is-bad input, .field.is-bad textarea{ border-color:#E2695A; background:rgba(192,67,47,.12); }
.err{ display:block; min-height:0; font-size:.8rem; color:#FF8A75; margin-top:.45em; }
.formnote{ margin:1.1em 0 0; font-size:.84rem; color:var(--ink-3); text-align:center; }
.formok{
  margin:1.1em 0 0; padding:.9em 1.1em; border-radius:var(--r-md);
  background:rgba(31,111,178,.15); color:var(--accent-lite); font-size:.9rem; text-align:center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ background:var(--cream); color:rgba(255,255,255,.62); padding-top:clamp(56px,7vw,92px); border-top:1px solid rgba(255,255,255,.14); }
.ftr__in{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px);
}
.ftr__logo{ height:32px; width:auto; filter:brightness(0) invert(1); opacity:.92; margin-bottom:22px; }
.ftr__brand p{ font-size:.92rem; line-height:1.6; max-width:40ch; margin-bottom:22px; }
.ftr__iso{ width:72px; opacity:1; background:#fff; border-radius:50%; padding:6px; }

.ftr__col h4{
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; margin-bottom:1.4em;
}
.ftr__col a{ display:block; font-size:.92rem; padding:.35em 0; transition:color .2s var(--ease), transform .2s var(--ease); }
.ftr__col a:hover{ color:var(--accent-lite); transform:translateX(3px); }
.ftr__addr{ font-size:.92rem; line-height:1.6; margin-bottom:1em; }

.ftr__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:26px; border-top:1px solid var(--line-dark);
  font-size:.84rem;
}
.ftr__bar p{ margin:0; }

/* ---------- Back to top ---------- */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center; font-size:1.15rem;
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--accent); }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.pillars__grid .reveal.is-in:nth-child(2),
.svc .reveal.is-in:nth-child(2),
.pgrid .reveal.is-in:nth-child(2),
.team__grid .reveal.is-in:nth-child(2){ transition-delay:.08s; }
.pillars__grid .reveal.is-in:nth-child(3),
.svc .reveal.is-in:nth-child(3),
.pgrid .reveal.is-in:nth-child(3),
.team__grid .reveal.is-in:nth-child(3){ transition-delay:.16s; }
.pillars__grid .reveal.is-in:nth-child(4),
.svc .reveal.is-in:nth-child(4),
.pgrid .reveal.is-in:nth-child(4){ transition-delay:.24s; }
.pgrid .reveal.is-in:nth-child(5), .svc .reveal.is-in:nth-child(5){ transition-delay:.3s; }
.pgrid .reveal.is-in:nth-child(6), .svc .reveal.is-in:nth-child(6){ transition-delay:.36s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .svc{ grid-template-columns:repeat(2,1fr); }
  .svc__card--wide{ grid-column:span 2; }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  .team__grid, .cgrid{ grid-template-columns:repeat(2,1fr); }
  .ftr__in{ grid-template-columns:1fr 1fr; }
  .ftr__brand{ grid-column:span 2; }
}

@media (max-width:960px){
  .burger{ display:block; position:relative; z-index:101; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw);
    background:var(--paper); box-shadow:-14px 0 46px rgba(12,33,56,.16);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:96px 22px 40px; overflow-y:auto;
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:99;
  }
  .nav.is-open{ transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__link{ width:100%; justify-content:space-between; padding:.9em 1em; border-radius:var(--r-md); font-size:1.02rem; }
  .sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; margin:2px 0 6px 14px;
    padding:0 0 0 8px; max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .has-sub[data-open="1"] .sub{ max-height:340px; }
  .nav__cta{ margin-top:20px; justify-content:center; }

  .statement__in, .story__grid, .quality__in, .contact__in{ grid-template-columns:1fr; }
  .statement__img{ order:-1; }
  .statement__img > img{ aspect-ratio:16/11; border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 80px; }
  .team__ceo{ grid-template-columns:1fr; }
  .team__ceoimg{ min-height:0; aspect-ratio:4/5; }
  .team__ceotxt{ padding:clamp(26px,5vw,40px); }
  .team__grid{ grid-template-columns:repeat(2,1fr); }
  .pillars__grid{ grid-template-columns:repeat(2,1fr); }
  .hero__statsin{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-dark); }
  .svc__card--wide{ flex-direction:column; }
  .svc__card--wide .svc__media{ flex:none; aspect-ratio:16/9; }
  .svc__card--wide .svc__list{ columns:1; }
}

@media (max-width:680px){
  html{ scroll-padding-top:76px; }
  .topbar__tag{ display:none; }
  .topbar__in{ justify-content:center; min-height:38px; }
  .topbar__links{ gap:16px; font-size:.78rem; }
  .hdr__in{ min-height:72px; }
  .hdr__logo img{ height:38px; }
  .hero__in{ min-height:clamp(460px,68vh,600px); padding-bottom:clamp(40px,9vw,64px); }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .scrollcue{ display:none; }
  .svc, .pgrid, .ftr__in, .team__grid, .cgrid{ grid-template-columns:1fr; }
  .certs .sechead--row{ align-items:flex-start; }
  .certs__mark{ display:none; }
  .cfilter{ border-radius:var(--r-lg); }
  .lbox__nav{ top:auto; bottom:clamp(14px,3vw,24px); margin-top:0; }
  .svc__card--wide{ grid-column:span 1; }
  .ftr__brand{ grid-column:span 1; }
  .sechead--row{ align-items:flex-start; }
  .tabs{ width:100%; }
  .tab{ flex:1; text-align:center; padding:.65em .8em; }
  .quality__quote{ border-radius:var(--r-lg) var(--r-lg) 70px var(--r-lg); }
  .statement__badge{ right:0; bottom:-18px; }
  .contact__form{ padding:26px 22px 30px; }
  .ftr__bar{ justify-content:center; text-align:center; }
}

/* Keep the texture on phones, but stop the per-frame repaint. */
@media (max-width:680px){
  .hero::after, .pillars::after, .section--dark::after, .cta__in::after,
  .statement::after, .services::after, .projects::after, .team::after, .quotes::after, .certs::after, .contact::after{ animation:none; }
  .fx i:nth-child(2){ display:none; }
}

@media (max-width:420px){
  .pillars__grid{ grid-template-columns:1fr; }
  .hero__statsin{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--line-dark); }
  .stat:last-child{ border-bottom:0; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .hdr,.topbar,.totop,.scrollcue,.marquee,.map,.slider__nav{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--dark,.pillars,.cta__in,.ftr{ background:#fff !important; color:#000 !important; }
  .svc__list[data-collapse]{ max-height:none !important; }
}