/* AQL — site.css
   Palette: concrete + AQL blue. Type: Archivo (variable width) only.
   Width is the voice: headings wide (112%), figures condensed (75%), text normal. */
:root{
  --white:#fff;
  --concrete:#eceeee;
  --rule:#d9ddde;
  --graphite:#22282e;
  --steel:#626b73;
  --blue:#1f6fb5;
  --blue-deep:#0d2f52;

  --f:'Archivo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  /* modular scale */
  --s-1:.8125rem;--s0:1.0625rem;--s1:1.25rem;--s2:1.5rem;--s3:2rem;--s4:2.75rem;--s5:3.75rem;
  --gut:clamp(20px,4vw,56px);
  --sec:clamp(72px,9vw,128px);
  --hd:84px;--hh:var(--hd);
}
body.has-topbar{--hh:calc(var(--hd) + 38px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 12px)}
body{margin:0;font:400 var(--s0)/1.6 var(--f);color:var(--graphite);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3,.statement{text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:12px;z-index:200;background:var(--white);padding:10px 16px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.muted{color:var(--steel)}

/* ---------- type ---------- */
.display{font-weight:600;font-stretch:112%;font-size:clamp(2.6rem,6.2vw,5.75rem);line-height:1.02;letter-spacing:-.022em}
.display.sm{font-size:clamp(2.3rem,4.8vw,4.25rem);line-height:1.05}
.h2{font-weight:600;font-stretch:110%;font-size:clamp(1.85rem,3.2vw,var(--s4));line-height:1.12;letter-spacing:-.015em}
.h3{font-weight:600;font-stretch:108%;font-size:clamp(1.5rem,2.2vw,var(--s3));line-height:1.18;letter-spacing:-.01em}
.kicker{font-size:var(--s0);color:var(--steel);margin-bottom:12px}
.prose{max-width:64ch}
.prose p{margin:0 0 1em}
.prose h2,.prose h3{font-weight:600;font-stretch:108%;line-height:1.2;margin:1.6em 0 .5em}
.prose h2{font-size:var(--s2)}.prose h3{font-size:var(--s1)}
.prose ul{list-style:square;padding-inline-start:1.2em;margin:0 0 1em}.prose ol{list-style:decimal;padding-inline-start:1.3em;margin:0 0 1em}
.prose li::marker{color:var(--blue)}
.prose a{color:var(--blue);text-underline-offset:3px}
.prose img{margin:1.5em 0}
.prose blockquote{margin:1.5em 0;padding-inline-start:20px;border-inline-start:3px solid var(--blue);font-size:var(--s1)}
.measure{margin-inline:auto}

/* ---------- actions ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:2px;background:var(--blue);color:var(--white);font:600 var(--s0)/1 var(--f);text-decoration:none;cursor:pointer;transition:background-color .2s}
.btn:hover{background:var(--blue-deep)}
.btn.on-dark{background:var(--white);color:var(--graphite)}
.btn.on-dark:hover{background:var(--concrete)}
.link{display:inline-block;font-weight:600;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-thickness .15s,text-underline-offset .15s}
.link:hover{text-decoration-thickness:2px;text-underline-offset:4px}
.link.on-dark{color:var(--white)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;background:var(--white);border-bottom:1px solid var(--rule);transition:background-color .3s,border-color .3s,transform .35s}
.hd{display:flex;align-items:center;justify-content:space-between;gap:32px;height:var(--hd)}
.brand img{height:36px;width:auto}
.brand .l-light{display:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){position:relative;padding:8px 14px;font-weight:500;text-decoration:none}
.nav a:not(.btn)::after{content:"";position:absolute;inset:auto 14px 0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:not(.btn):hover::after,.nav a.on::after{transform:none}
.nav-cta{margin-inline-start:16px;min-height:44px;padding:0 20px}
/* over the hero photo */
.site-header.light{background:transparent;border-color:rgba(255,255,255,.22);color:var(--white)}
.site-header.light .brand .l-light{display:block}.site-header.light .brand .l-dark{display:none}
.site-header.light .nav-cta{background:var(--white);color:var(--graphite)}
.site-header.hide{transform:translateY(-100%)}
.burger{display:none;align-items:center;gap:10px;background:none;border:0;padding:8px 0;color:inherit;font:600 var(--s0) var(--f);cursor:pointer}
.burger-lines{display:grid;gap:6px;width:22px}.burger-lines i{height:2px;background:currentColor;transition:transform .25s}
@media (max-width:1000px){
  .burger{display:flex}
  .nav{position:fixed;inset:var(--hh) 0 0;flex-direction:column;align-items:stretch;gap:0;padding:16px var(--gut) 40px;background:var(--white);color:var(--graphite);visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s;overflow:auto}
  .menu-open .nav{visibility:visible;opacity:1}
  .nav a:not(.btn){padding:18px 0;border-bottom:1px solid var(--rule);font-size:var(--s2);font-weight:600;font-stretch:108%}
  .nav a:not(.btn)::after{display:none}
  .nav a.on{color:var(--blue)}
  .nav-cta{margin:28px 0 0;min-height:56px;background:var(--blue)!important;color:var(--white)!important}
  .menu-open .site-header{background:var(--white);color:var(--graphite);border-color:var(--rule)}
  .menu-open .site-header .l-dark{display:block}.menu-open .site-header .l-light{display:none}
  .menu-open .burger-lines i:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .burger-lines i:last-child{transform:translateY(-4px) rotate(-45deg)}
}

/* ---------- image placeholder (until real photos are uploaded) ---------- */
.ph{display:block;width:100%;height:100%;background:linear-gradient(160deg,hsl(calc(195 + var(--ph,0)) 8% 82%),hsl(calc(200 + var(--ph,0)) 9% 70%))}
figure img,figure .ph{width:100%;height:100%;object-fit:cover}

/* ---------- hero: the one bold moment ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:max(600px,min(94vh,960px));color:var(--white);background:var(--blue-deep);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media .ph{width:100%;height:100%;object-fit:cover}
.hero-media .ph{background:linear-gradient(160deg,#4b5a66,#1f2f3d)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,25,43,.86) 0%,rgba(9,25,43,.45) 45%,rgba(9,25,43,.12) 75%)}
.hero-body{position:relative;padding-top:160px;padding-bottom:clamp(56px,8vw,96px)}
.hero .display{max-width:15ch}
.hero-lead{max-width:52ch;margin-top:28px;font-size:var(--s1);line-height:1.55;color:rgba(255,255,255,.86)}
.hero-caption{position:relative;padding-bottom:20px;font-size:var(--s-1);color:rgba(255,255,255,.62);text-align:end}
.js .hero-media img{transform:scale(1.06);transition:transform 2.2s cubic-bezier(.2,.6,.2,1)}
.js .hero .display,.js .hero-lead,.js .hero .actions{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.js .hero-lead{transition-delay:.15s}.js .hero .actions{transition-delay:.3s}
.ready .hero-media img{transform:none}
.ready .hero .display,.ready .hero-lead,.ready .hero .actions{opacity:1;transform:none}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.sec-tight{padding-top:clamp(48px,6vw,80px)}
.t-light{background:var(--white)}
.t-tint{background:var(--concrete)}
.t-dark{background:var(--blue-deep);color:rgba(255,255,255,.82)}
.t-dark .h2,.t-dark .h3,.t-dark h3{color:var(--white)}
.t-dark .link{color:var(--white)}
.t-dark .kicker,.t-dark .muted{color:rgba(255,255,255,.64)}
.t-light+.t-light{padding-top:0}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec-title{grid-column:1/8}.sec-title .h2{max-width:24ch}
.sec-aside{grid-column:9/13;display:grid;gap:16px;justify-items:start;color:var(--steel)}
.t-dark .sec-aside{color:rgba(255,255,255,.7)}
.sec-foot{margin-top:40px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-title,.sec-aside{grid-column:auto}}

/* intro: statement + data sheet */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.intro-label{grid-column:1/4;color:var(--steel);padding-top:.5em}
.intro-body{grid-column:4/13}
.statement{font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.3;font-weight:400;max-width:34ch;letter-spacing:-.008em}
.intro-text{margin-top:28px;color:var(--steel)}
.intro-body>p:not(.statement){margin-top:28px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule)}
.facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:20px 24px 0 0}
.facts dd{font-weight:500;font-stretch:75%;font-size:clamp(2.75rem,5vw,4rem);line-height:1;letter-spacing:-.01em;color:var(--graphite)}
.facts dt{font-size:var(--s0);color:var(--steel)}
.facts.wide{margin-top:0}
.t-dark .facts{border-color:rgba(255,255,255,.2)}.t-dark .facts dd{color:var(--white)}.t-dark .facts dt{color:rgba(255,255,255,.66)}
.stats-title{margin-bottom:48px;max-width:22ch}
@media (max-width:860px){.intro{grid-template-columns:1fr}.intro-label,.intro-body{grid-column:auto}.facts{grid-template-columns:1fr 1fr}}

/* services index (list) */
.index{border-bottom:1px solid var(--rule)}
.index a{display:grid;grid-template-columns:5fr 6fr 40px;gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid var(--rule);text-decoration:none}
.index-title{font-weight:600;font-stretch:108%;font-size:var(--s2);line-height:1.2;transition:color .2s}
.index-desc{color:var(--steel);max-width:56ch}
.index-go{justify-self:end;width:20px;height:20px;border-top:2px solid var(--graphite);border-right:2px solid var(--graphite);transform:rotate(45deg) scale(.6);transition:transform .2s,border-color .2s}
.index a:hover .index-title{color:var(--blue)}
.index a:hover .index-go{border-color:var(--blue);transform:rotate(45deg) scale(.6) translate(4px,-4px)}
.t-tint .index,.t-tint .index a{border-color:#cfd4d6}
@media (max-width:760px){.index a{grid-template-columns:1fr 24px}.index-desc{grid-column:1;grid-row:2}.index-go{grid-row:1/3;align-self:center}}

/* services grid (tiles) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}
.tile figure{aspect-ratio:4/3;overflow:hidden;background:var(--rule);margin-bottom:20px}
.tile h3{font-weight:600;font-stretch:106%;font-size:var(--s1);line-height:1.25;margin-bottom:8px}
.tile p{color:var(--steel);max-width:46ch}
@media (max-width:960px){.tiles{grid-template-columns:1fr 1fr}}@media (max-width:600px){.tiles{grid-template-columns:1fr}}

/* services detail */
.details{display:grid;gap:clamp(72px,9vw,120px)}
.detail{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.detail figure{grid-column:1/7;aspect-ratio:4/3;overflow:hidden;background:var(--rule)}
.detail-body{grid-column:8/13}
.detail:nth-child(even) figure{grid-column:7/13;grid-row:1}.detail:nth-child(even) .detail-body{grid-column:1/6;grid-row:1}
.detail .h3{margin-bottom:20px}
.detail .link{margin-top:8px}
@media (max-width:860px){.detail,.detail:nth-child(even){grid-template-columns:1fr}.detail figure,.detail-body,.detail:nth-child(even) figure,.detail:nth-child(even) .detail-body{grid-column:auto;grid-row:auto}}
.squares{display:grid;gap:10px;margin:24px 0 32px}
.squares.cols{grid-template-columns:1fr 1fr;gap:10px 24px}
.squares li{position:relative;padding-inline-start:20px}
.squares li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;background:var(--blue)}
@media (max-width:520px){.squares.cols{grid-template-columns:1fr}}

/* text + image */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.split-media{grid-column:1/8;position:relative}
.split-copy{grid-column:9/13}
.split.rev .split-media{grid-column:6/13;grid-row:1}.split.rev .split-copy{grid-column:1/5;grid-row:1}
.split-media .m1{aspect-ratio:5/4;overflow:hidden;background:var(--rule)}
.split-copy .h2{margin-bottom:24px}
.split-copy .prose{color:var(--steel)}.t-dark .split-copy .prose{color:rgba(255,255,255,.75)}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:40px}.split-media,.split-copy,.split.rev .split-media,.split.rev .split-copy{grid-column:auto;grid-row:auto}}

/* projects */
.proj{display:block;text-decoration:none}
.proj figure{overflow:hidden;background:var(--rule);aspect-ratio:4/3;margin-bottom:16px}
.proj img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.proj:hover img{transform:scale(1.03)}
.proj h3{font-weight:600;font-stretch:106%;font-size:var(--s1);line-height:1.25;transition:color .2s}
.proj p{color:var(--steel);margin-top:4px}
.proj:hover h3{color:var(--blue)}
.proj-feature{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.proj.lead{grid-column:1/9}.proj.lead figure{aspect-ratio:3/2}.proj.lead h3{font-size:var(--s2)}
.proj-side{grid-column:9/13;display:grid;gap:32px;align-content:start}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px;margin-top:48px}
.proj-feature+.proj-grid{margin-top:56px}
.sec-tight .proj-grid,.sec-head+.proj-grid{margin-top:0}
.t-dark .proj p{color:rgba(255,255,255,.66)}
@media (max-width:900px){.proj-feature{grid-template-columns:1fr}.proj.lead,.proj-side{grid-column:auto}.proj-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.proj-grid{grid-template-columns:1fr}}

/* process: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;counter-reset:step}
.steps li{border-top:2px solid var(--graphite);padding-top:20px}
.step-n{display:block;font-weight:500;font-stretch:75%;font-size:var(--s4);line-height:1;color:var(--blue);margin-bottom:24px}
.steps h3{font-weight:600;font-size:var(--s1);line-height:1.3;max-width:22ch}
.steps p{color:var(--steel);margin-top:10px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:48px}}@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* features */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 24px}
.feats.c2{grid-template-columns:repeat(2,1fr)}.feats.c3{grid-template-columns:repeat(3,1fr)}
.feat{border-top:1px solid var(--rule);padding-top:24px}
.t-tint .feat{border-color:#cfd4d6}
.feat-ic{width:40px;height:40px;object-fit:contain;margin-bottom:20px}
.feat h3{font-weight:600;font-stretch:106%;font-size:var(--s1);line-height:1.25;margin-bottom:10px}
.feat p{color:var(--steel);max-width:44ch}
@media (max-width:1000px){.feats,.feats.c3{grid-template-columns:1fr 1fr}}@media (max-width:600px){.feats,.feats.c2,.feats.c3{grid-template-columns:1fr}}

/* cta band */
.cta{background:var(--blue);color:var(--white);padding-block:clamp(64px,8vw,104px)}
.cta-in{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.cta .h2{grid-column:1/8;max-width:18ch}
.cta-side{grid-column:9/13;color:rgba(255,255,255,.86)}
.cta .actions{margin-top:28px}
.cta .btn.on-dark{color:var(--blue-deep)}
@media (max-width:860px){.cta-in{grid-template-columns:1fr}.cta .h2,.cta-side{grid-column:auto}}

/* clients */
.clients{border-top:1px solid var(--rule)}
.t-light+.clients{padding-top:var(--sec)}
.clients-in{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline}
.clients-title{grid-column:1/4;font-size:var(--s0);font-weight:400;color:var(--steel)}
.names{grid-column:4/13;display:flex;flex-wrap:wrap;gap:20px 48px}
.names li{font-weight:600;font-stretch:118%;font-size:clamp(1.25rem,2vw,1.625rem);color:var(--graphite);line-height:1.2}
.names img{max-height:48px;width:auto;filter:grayscale(1)}
.names a{text-decoration:none}
@media (max-width:860px){.clients-in{grid-template-columns:1fr}.clients-title,.names{grid-column:auto}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:48px}
.sec-head+.gallery{margin-top:0}
.gallery a{display:block;aspect-ratio:1;overflow:hidden;background:var(--rule);cursor:zoom-in}
.gallery img,.gallery .ph{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.gallery a:hover img{opacity:.85}
@media (max-width:860px){.gallery{grid-template-columns:repeat(3,1fr)}}@media (max-width:520px){.gallery{grid-template-columns:1fr 1fr}}
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:56px 72px;background:rgba(13,20,28,.96)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:84vh}
.lightbox button{position:absolute;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:2px;background:none;color:var(--white);font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox button:hover{border-color:var(--white)}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:calc(50% - 24px)}.lb-n{right:16px;top:calc(50% - 24px)}

/* inner page header */
.pagehead{padding-top:calc(var(--hh) + clamp(48px,7vw,104px))}
.pagehead>.wrap:first-child{padding-bottom:clamp(40px,5vw,64px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;font-size:var(--s-1);color:var(--steel)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--blue)}
.pagehead .display{max-width:18ch}
.pagehead-lead{max-width:56ch;margin-top:24px;font-size:var(--s1);color:var(--steel);line-height:1.55}
.pagehead-img{aspect-ratio:21/9;overflow:hidden}
.pagehead-img img,.pagehead-img .ph{width:100%;height:100%;object-fit:cover}
.pagehead+.sec.t-light:not(.sec-tight){padding-top:var(--sec)}
.nf{min-height:70vh;padding-bottom:var(--sec)}
@media (max-width:700px){.pagehead-img{aspect-ratio:4/3;padding-inline:0}}

/* project detail: spec sheet */
.proj-detail{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.proj-detail .spec{grid-column:1/5}
.proj-text{grid-column:6/13}
.proj-text .prose{font-size:var(--s1);line-height:1.6;margin-bottom:24px}
.spec{border-top:2px solid var(--graphite)}
.spec div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--steel)}
.spec dd{font-weight:500}
.spec a{text-decoration:none}.spec a:hover{color:var(--blue)}
.proj-detail+.wrap .gallery,.sec-tight>.wrap+.wrap .gallery{margin-top:clamp(56px,7vw,96px)}
@media (max-width:860px){.proj-detail{grid-template-columns:1fr;gap:48px}.proj-detail .spec,.proj-text{grid-column:auto}}
.next-in{display:grid;grid-template-columns:1fr 280px;grid-template-rows:auto 1fr;gap:8px 32px;align-items:end;text-decoration:none}
.next-label{color:var(--steel)}
.next-title{grid-row:2;font-weight:600;font-stretch:110%;font-size:clamp(1.75rem,3.4vw,var(--s4));line-height:1.1;max-width:20ch;transition:color .2s}
.next-in figure{grid-column:2;grid-row:1/3;aspect-ratio:4/3;overflow:hidden;background:var(--rule)}
.next-in:hover .next-title{color:var(--blue)}
@media (max-width:600px){.next-in{grid-template-columns:1fr}.next-in figure{grid-column:1;grid-row:auto}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.contact-info{grid-column:1/6}
.contact-info .h2{margin-bottom:16px}
.contact-info .spec{margin-top:40px}
.form{grid-column:7/13;display:grid;gap:20px}
.form h3{font-weight:600;font-stretch:108%;font-size:var(--s2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:grid;gap:8px}
.form label span{font-weight:500;font-size:.9375rem}
.form label em{font-style:normal;color:var(--steel);font-weight:400}
.form input,.form textarea{width:100%;padding:14px 16px;border:1px solid #b9c0c4;border-radius:2px;background:var(--white);font:inherit;color:var(--graphite)}
.form textarea{resize:vertical;min-height:150px}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.form ::placeholder{color:#8c959c}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.alert,.form-msg{font-weight:500}
.alert{padding:14px 16px;border-inline-start:3px solid}
.alert.ok,.form-msg.ok{color:#156b3a}.alert.err,.form-msg.err{color:#a32222}
.alert.ok{background:#eaf5ee}.alert.err{background:#fbecec}
.map{margin-top:var(--sec);aspect-ratio:21/8;min-height:320px;background:var(--rule)}
.map iframe{width:100%;height:100%;border:0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:56px}.contact-info,.form{grid-column:auto}.row2{grid-template-columns:1fr}}

/* faq */
.split-q{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.split-q .h2{grid-column:1/5}.faq{grid-column:6/13;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:600;font-size:var(--s1);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:24px;color:var(--steel);max-width:62ch}
@media (max-width:860px){.split-q{grid-template-columns:1fr}.split-q .h2,.faq{grid-column:auto}}

/* footer */
.site-footer{background:var(--blue-deep);color:rgba(255,255,255,.72);padding-top:clamp(64px,7vw,96px);font-size:.9375rem}
.ft-top{display:grid;grid-template-columns:4fr 2fr 3fr 2fr;gap:40px}
.ft-brand img{height:38px;width:auto;margin-bottom:24px}
.ft-brand p{max-width:36ch}
.ft-col h2{font-size:.9375rem;font-weight:600;color:var(--white);margin-bottom:16px}
.ft-col ul{display:grid;gap:10px}
.ft-col a,.ft-bottom a{text-decoration:none}
.ft-col a:hover,.ft-bottom a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.ft-bottom{position:relative;display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-block:24px;font-size:var(--s-1)}
.ft-bottom::before{content:"";position:absolute;top:0;inset-inline:var(--gut);height:1px;background:rgba(255,255,255,.14)}
@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}

/* =========================================================
   Motion & composition layer
   ========================================================= */
.t-light,.sec:not(.t-tint):not(.t-dark){--bgc:var(--white)}
.t-tint{--bgc:var(--concrete)}.t-dark{--bgc:var(--blue-deep)}

/* ---- rings hero: the AQL logo, made of photographs ---- */
.rings-hero{position:relative;padding-top:calc(var(--hh) + clamp(40px,6vw,88px));background:linear-gradient(var(--white) 0 64%,var(--concrete) 64%);overflow:hidden}
.rh-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.rh-title{grid-column:1/9;font-size:clamp(2.6rem,5.4vw,5.25rem);max-width:15ch}
.rh-side{grid-column:9/13;padding-bottom:.6em}
.rh-lead{color:var(--steel);font-size:var(--s1);line-height:1.55;max-width:40ch}
.rh-side .actions{margin-top:28px}
.rings{display:flex;justify-content:center;max-width:1360px;margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--gut) clamp(56px,7vw,96px)}
.ring{position:relative;flex:0 0 37%;aspect-ratio:1;margin:0}
.ring+.ring{margin-inline-start:-6.5%}
.rings.n2 .ring{flex-basis:46%}.rings.n1 .ring{flex-basis:58%}
.ring>*{translate:calc(var(--dir,0) * var(--p,0) * 70px) 0}
.ring:first-child{--dir:-1}.ring:last-child{--dir:1}.rings.n1 .ring{--dir:0}
.ring-photo{position:absolute;inset:3.2%;border-radius:50%;overflow:hidden;z-index:1;background:var(--rule);clip-path:circle(0% at 50% 50%);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) calc(.25s + var(--i) * .18s)}
.ready .ring-photo{clip-path:circle(50% at 50% 50%)}
.ring-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.ring-slide.on{opacity:1}
.ring-slide img,.ring-slide .ph{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 7s linear}
.ring-slide.on img{transform:scale(1)}
.ring-line{position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none}
.ring-line circle{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:101;stroke-dashoffset:101;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) calc(.5s + var(--i) * .18s)}
.ready .ring-line circle{stroke-dashoffset:0}
.ring figcaption{position:absolute;z-index:3;left:50%;bottom:9%;transform:translate(-50%,12px);padding:10px 18px;background:var(--white);color:var(--graphite);font-weight:600;font-stretch:108%;white-space:nowrap;opacity:0;transition:opacity .6s,transform .6s cubic-bezier(.2,.6,.2,1);transition-delay:calc(1.3s + var(--i) * .15s)}
.ready .ring figcaption{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.rh-top{grid-template-columns:1fr}.rh-title,.rh-side{grid-column:auto}.rings-hero{background:linear-gradient(var(--white) 0 72%,var(--concrete) 72%)}}
@media (max-width:560px){.rings{padding-bottom:64px}.ring figcaption{bottom:auto;top:calc(100% + 10px);padding:0;background:none;font-size:.8125rem}.ring-line circle{stroke-width:2.2}}

/* ---- text entrances ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--wi) * .06s + var(--d,0s))}
.in .wi{transform:none}
.js [data-rise]{opacity:0;transform:translateY(40px);transition:opacity .9s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.1,1) var(--d,0s)}
.js [data-rise].in{opacity:1;transform:none}
:where(.js [data-wipe]){position:relative}
.js [data-wipe]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--bgc,#fff);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.7,0,.2,1) var(--d,0s);pointer-events:none}
.js [data-wipe].in::after{transform:scaleY(0)}
.js [data-wipe] img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.1,1) var(--d,0s)}
.js [data-wipe].in img{transform:none}
.proj:hover [data-wipe].in img{transform:scale(1.03)}
.statement [data-fw]{color:#b9c0c5;transition:color .35s}
.statement [data-fw].lit{color:var(--graphite)}
.t-dark .statement [data-fw]{color:rgba(255,255,255,.3)}.t-dark .statement [data-fw].lit{color:#fff}

/* ---- services: image follows the cursor ---- */
.hover-img{position:fixed;left:0;top:0;z-index:50;width:300px;aspect-ratio:4/3;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.6) rotate(-4deg);transition:opacity .25s,transform .45s cubic-bezier(.2,.7,.1,1);box-shadow:0 30px 60px -20px rgba(13,47,82,.45)}
.hover-img.on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1) rotate(0)}
.hover-img img{width:100%;height:100%;object-fit:cover}
.index a{position:relative}
.index a::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);background:var(--concrete);transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.7,.1,1);z-index:-1}
.index li{position:relative;z-index:0}
.index a:hover::before{transform:scaleY(1)}
.t-tint .index a::before{background:var(--white)}
@media (hover:none){.hover-img{display:none}}

/* ---- text + images: stepped layers ---- */
.split.has-1 .split-media .m1{aspect-ratio:5/4}
.split.has-2 .split-media{padding-bottom:64px}
.split.has-2 .m1{width:84%}
.split.has-2 .m2{position:absolute;inset-inline-end:0;bottom:0;width:44%;aspect-ratio:1;border:10px solid var(--bgc,#fff);overflow:hidden;background:var(--rule);translate:0 calc((var(--p,.5) - .5) * -80px)}
.split.rev.has-2 .m1{margin-inline-start:auto}.split.rev.has-2 .m2{inset-inline:0 auto}
.split.has-3 .split-media{aspect-ratio:1/1.02}
.split.has-3 .slab{position:absolute;inset-inline-start:12%;top:14%;width:66%;height:74%;background:var(--blue);translate:0 calc((var(--p,.5) - .5) * 40px)}
.split.has-3 figure{position:absolute;overflow:hidden;background:var(--rule)}
.split.has-3 .m1{inset-inline-start:0;top:0;width:60%;height:56%;translate:0 calc((var(--p,.5) - .5) * -50px)}
.split.has-3 .m2{inset-inline-end:0;top:20%;width:50%;height:46%;border:10px solid var(--bgc,#fff);translate:0 calc((var(--p,.5) - .5) * 70px)}
.split.has-3 .m3{inset-inline-start:16%;bottom:0;width:46%;height:38%;border:10px solid var(--bgc,#fff);translate:0 calc((var(--p,.5) - .5) * -110px)}
.split.has-3 .m1 img,.split.has-3 .m2 img,.split.has-3 .m3 img{width:100%;height:100%;object-fit:cover}

/* ---- projects: pinned horizontal track ---- */
.hscroll{position:relative}
.hs-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vh,48px);overflow:hidden;padding-top:var(--hh)}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:24px}
.hs-meta{display:flex;align-items:center;gap:28px}
.hs-bar{width:160px;height:2px;background:var(--rule);overflow:hidden}
.hs-bar i{display:block;height:100%;background:var(--blue);transform:scaleX(var(--hp,0));transform-origin:left}
.hs-track{display:flex;gap:24px;padding-inline:var(--gut) 0;width:max-content;transform:translate3d(var(--hx,0),0,0);will-change:transform}
.hs-card{flex:0 0 clamp(300px,40vw,620px);text-decoration:none}
.hs-card figure{aspect-ratio:4/3;overflow:hidden;background:var(--rule);height:min(52vh,465px);width:100%}
.hs-card img{transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.hs-card:hover img{transform:scale(1.05)}
.hs-cap{padding-top:18px}
.hs-cap h3{font-weight:600;font-stretch:108%;font-size:var(--s2);line-height:1.2;transition:color .2s}
.hs-cap p{color:var(--steel);margin-top:4px}
.hs-card:hover h3{color:var(--blue)}
.hs-more{flex-basis:clamp(220px,22vw,320px);display:flex;align-items:flex-end;padding:28px;background:var(--blue);color:var(--white);height:min(52vh,465px);margin-inline-end:var(--gut);font-weight:600;font-stretch:112%;font-size:var(--s3);line-height:1.1;transition:background .2s}
.hs-more:hover{background:var(--blue-deep)}
@media (max-width:800px){
  .hscroll{height:auto!important;padding-block:var(--sec)}
  .hs-sticky{position:static;height:auto;padding-top:0}
  .hs-track{transform:none!important;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .hs-card{flex-basis:80vw;scroll-snap-align:start}.hs-card figure,.hs-more{height:auto}.hs-more{min-height:200px}
  .hs-bar{display:none}
}

/* ---- process: line fills as you scroll ---- */
.steps{position:relative;padding-top:2px}
.steps-track{position:absolute;inset:0 0 auto;height:2px;background:var(--rule)}
.steps-track i{display:block;height:100%;background:var(--blue);transform:scaleX(var(--sp,0));transform-origin:left;transition:transform .15s linear}
.steps li{border-top:0;padding-top:24px}
.steps .step-n{color:#b9c0c5;transition:color .4s}
.steps li h3,.steps li p{opacity:.45;transition:opacity .5s}
.steps li.on .step-n{color:var(--blue)}
.steps li.on h3,.steps li.on p{opacity:1}
@media (max-width:900px){.steps-track{display:none}.steps li{border-top:2px solid var(--rule)}.steps li.on{border-color:var(--blue)}}

/* ---- cta: logo rings turn with scroll ---- */
.cta{position:relative;overflow:hidden}
.cta-rings{position:absolute;right:-8%;top:50%;width:min(70%,900px);transform:translateY(-50%) rotate(calc(var(--p,0) * 24deg - 12deg));opacity:.9;pointer-events:none}
.cta-rings circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2}
.cta-in{position:relative}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .hero-media img,.js .hero .display,.js .hero-lead,.js .hero .actions,.js [data-rise]{opacity:1;transform:none}
  .js [data-wipe]::after{display:none}.js [data-wipe] img,.wi{transform:none}
  .ring-photo{clip-path:none}.ring-line circle{stroke-dashoffset:0}.ring figcaption{opacity:1}
  .statement [data-fw]{color:inherit}
}

/* =========================================================
   Round 3: richer intro, services spotlight, about & contact
   ========================================================= */
/* shared: a photo in a circle with a drawn ring */
.im-round-in{position:absolute;inset:5%;border-radius:50%;overflow:hidden;background:var(--rule)}
.im-round-in img,.im-round-in .ph{width:100%;height:100%;object-fit:cover}
.im-round svg,.phc-round svg{position:absolute;inset:0;overflow:visible}
.im-round circle,.phc-round circle,.feat-mark circle,.spot-ring circle{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:101;stroke-dashoffset:101;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .3s}
.in circle,.in.feat-mark circle,.feat.in .feat-mark circle{stroke-dashoffset:0}
.tag-line{display:inline-flex;align-items:center;gap:12px;color:var(--steel);margin-bottom:28px}
.tag-line i{display:inline-flex;width:34px;height:14px;background:radial-gradient(circle at 7px 7px,transparent 4px,var(--blue) 4.5px,var(--blue) 6px,transparent 6.5px),radial-gradient(circle at 17px 7px,transparent 4px,var(--blue) 4.5px,var(--blue) 6px,transparent 6.5px),radial-gradient(circle at 27px 7px,transparent 4px,var(--blue) 4.5px,var(--blue) 6px,transparent 6.5px)}

/* ---- intro with layered media ---- */
.intro2{position:relative;overflow:hidden}
.intro2.t-light{background:linear-gradient(90deg,var(--white) 0 62%,var(--concrete) 62%)}
.bg-ring{position:absolute;width:min(70vw,900px);right:-18%;top:50%;transform:translateY(-50%) rotate(calc(var(--p,0) * 50deg));pointer-events:none}
.bg-ring circle{fill:none;stroke:var(--rule);stroke-width:.25}
.intro2:not(.has-media) .bg-ring{opacity:.6}
.intro2-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.intro2-copy{grid-column:1/7}
.intro2:not(.has-media) .intro2-copy{grid-column:1/10}
.intro2 .statement{font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.25;max-width:24ch}
.intro2 .intro-text{margin-top:32px;color:var(--steel)}
.intro-link{margin-top:28px}
.intro2-media{grid-column:8/13;position:relative;aspect-ratio:4/5}
.im-tall{position:absolute;inset:0 0 14% 18%;overflow:hidden;background:var(--rule)}
.im-round{position:absolute;left:0;bottom:0;width:52%;aspect-ratio:1;margin:0}
.im-round .im-round-in{border:8px solid var(--bgc,#fff);inset:4%}
.intro2.t-light .im-round .im-round-in{border-color:var(--concrete)}
.im-badge{position:absolute;right:-6%;top:10%;display:flex;flex-direction:column;gap:6px;padding:22px 26px;background:var(--blue);color:var(--white);box-shadow:0 30px 50px -24px rgba(13,47,82,.6)}
.im-badge b{font-weight:500;font-stretch:75%;font-size:clamp(3rem,5vw,4.5rem);line-height:.9}
.im-badge span{font-size:.9375rem;max-width:14ch;line-height:1.3;color:rgba(255,255,255,.85)}
.facts2{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--rule)}
.facts2 div{position:relative;padding:28px 24px 0 0}
.facts2 div+div{padding-inline-start:24px;border-inline-start:1px solid var(--rule)}
.facts2 dd{font-weight:500;font-stretch:75%;font-size:clamp(3rem,5.5vw,4.75rem);line-height:1;color:var(--graphite)}
.facts2 dt{color:var(--steel);margin-top:8px}
.t-dark .facts2,.t-dark .facts2 div+div{border-color:rgba(255,255,255,.18)}.t-dark .facts2 dd{color:#fff}.t-dark .facts2 dt{color:rgba(255,255,255,.66)}
@media (max-width:900px){
  .intro2.t-light{background:var(--white)}
  .intro2-grid{grid-template-columns:1fr;gap:56px}.intro2-copy,.intro2-media,.intro2:not(.has-media) .intro2-copy{grid-column:auto}
  .intro2-media{max-width:460px;width:100%;margin-inline:auto}.im-badge{right:0}
  .facts2{grid-template-columns:1fr 1fr}.facts2 div:nth-child(odd){border-inline-start:0;padding-inline-start:0}.facts2 div:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ---- services spotlight ---- */
.spot{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.spot-media{grid-column:1/6;position:sticky;top:max(100px,calc(50vh - 260px))}
.spot-frame{position:relative;aspect-ratio:1;max-width:520px}
.spot-circle{position:absolute;inset:4%;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08)}
.spot-img{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.1,1)}
.spot-img.on{opacity:1;transform:none}
.spot-img img,.spot-img .ph{width:100%;height:100%;object-fit:cover}
.spot-ring,.spot-ring2{position:absolute;inset:0;overflow:visible;pointer-events:none}
.spot-ring circle{stroke:var(--white);stroke-width:.8;transition:none}
.spot-ring.draw circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1)}
.spot-ring2{inset:-9%;width:118%;height:118%;transform:rotate(calc(var(--p,0) * 90deg))}
.spot-ring2 circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.3;stroke-dasharray:1 2.2}
.spot-cap{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:10px 18px;background:var(--blue);color:var(--white);font-weight:600;font-stretch:108%;white-space:nowrap;transition:opacity .3s}
.spot-list{grid-column:7/13;counter-reset:none}
.spot-list>li{border-top:1px solid rgba(255,255,255,.16)}
.spot-list>li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.spot-list a{position:relative;display:block;padding:32px 56px 32px 0;text-decoration:none}
.spot-list h3{font-weight:600;font-stretch:110%;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;color:rgba(255,255,255,.5);transition:color .35s}
.spot-list p{max-width:52ch;margin-top:12px;color:rgba(255,255,255,.62);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s,margin .4s}
.spot-list .chips{display:flex;flex-wrap:wrap;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s,margin .4s}
.chips li{padding:6px 12px;border:1px solid rgba(255,255,255,.28);font-size:.875rem;color:rgba(255,255,255,.85)}
.spot-list li.on h3{color:var(--white)}
.spot-list li.on p{max-height:9em;opacity:1}
.spot-list li.on .chips{max-height:7em;opacity:1;margin-top:18px}
.spot-go{position:absolute;right:4px;top:40px;width:40px;height:40px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:background .3s,border-color .3s}
.spot-go::after{content:"";position:absolute;left:13px;top:15px;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.spot-list li.on .spot-go,.spot-list a:hover .spot-go{background:var(--blue);border-color:var(--blue)}
.spot-thumb{display:none}
.t-light .spot-list>li,.t-tint .spot-list>li{border-color:var(--rule)}
.t-light .spot-list h3,.t-tint .spot-list h3{color:#a3abb1}.t-light .spot-list li.on h3,.t-tint .spot-list li.on h3{color:var(--graphite)}
.t-light .spot-list p,.t-tint .spot-list p{color:var(--steel)}.t-light .chips li,.t-tint .chips li{border-color:var(--rule);color:var(--graphite)}
.t-light .spot-go,.t-tint .spot-go{border-color:var(--rule)}.t-light .spot-go::after,.t-tint .spot-go::after{border-color:var(--graphite)}
.t-light .spot-list li.on .spot-go::after,.t-tint .spot-list li.on .spot-go::after{border-color:#fff}
.t-light .spot-ring circle,.t-tint .spot-ring circle{stroke:var(--blue)}.t-light .spot-ring2 circle,.t-tint .spot-ring2 circle{stroke:var(--rule)}
@media (max-width:900px){
  .spot{grid-template-columns:1fr}.spot-media{display:none}.spot-list{grid-column:auto}
  .spot-thumb{display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:18px;background:rgba(255,255,255,.08)}
  .spot-list a{padding-right:0}.spot-go{display:none}
  .spot-list h3{color:var(--white)}.t-light .spot-list h3{color:var(--graphite)}
  .spot-list p,.spot-list .chips{max-height:none;opacity:1}.spot-list .chips{margin-top:16px}
}

/* ---- page header collage ---- */
.ph-collage{position:relative;padding-bottom:clamp(56px,7vw,104px);background:linear-gradient(var(--white) 0 80%,var(--concrete) 80%);overflow:hidden}
.phc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.phc-copy{grid-column:1/6}
.ph-collage .display{max-width:12ch}
.phc-media{grid-column:7/13;position:relative;aspect-ratio:1/.92}
.phc-slab{position:absolute;right:0;bottom:0;width:62%;height:62%;background:var(--blue);translate:0 calc(var(--p,0) * -60px)}
.phc-main{position:absolute;left:0;top:0;width:78%;height:72%;overflow:hidden;background:var(--rule);translate:0 calc(var(--p,0) * 40px)}
.phc-main img{width:100%;height:100%;object-fit:cover}
.phc-round{position:absolute;right:2%;top:34%;width:40%;aspect-ratio:1;margin:0;translate:0 calc(var(--p,0) * -110px)}
.phc-round .im-round-in{border:8px solid var(--white)}
.phc-small{position:absolute;left:14%;bottom:0;width:34%;aspect-ratio:4/3;overflow:hidden;border:8px solid var(--concrete);background:var(--rule);translate:0 calc(var(--p,0) * -40px)}
.phc-small img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.phc-grid{grid-template-columns:1fr;gap:48px}.phc-copy,.phc-media{grid-column:auto}.ph-collage{background:linear-gradient(var(--white) 0 55%,var(--concrete) 55%)}}

/* ---- features ---- */
.feats-sec{position:relative;overflow:hidden}
.feats-sec.has-bg{background:var(--blue-deep)}
.feats-bg{position:absolute;inset:-10% 0;opacity:.22;translate:0 calc((var(--p,.5) - .5) * -80px)}
.feats-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.feats-sec>.wrap{position:relative}
.feats{gap:0}
.feats .feat{position:relative;padding:36px 32px 40px;border-top:0;border-inline-start:1px solid var(--rule);transition:background .4s}
.feats .feat:first-child{border-inline-start:0}
.feats .feat::before{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.7,.1,1);z-index:0}
.feats .feat>*{position:relative;z-index:1}
.feats .feat:hover::before{transform:none}
.feats .feat:hover h3,.feats .feat:hover p{color:#fff}
.feat-mark{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:28px}
.feat-mark svg{position:absolute;inset:0;overflow:visible}
.feat-mark i{width:12px;height:12px;border-radius:50%;background:var(--blue);transition:transform .4s,background .3s}
.feat-mark .feat-ic{width:36px;height:36px;margin:0}
.feat:hover .feat-mark i{background:#fff;transform:scale(1.6)}
.feat:hover .feat-mark circle{stroke:#fff}
.feats .feat h3{transition:color .3s}.feats .feat p{transition:color .3s}
.t-dark .feats .feat{border-color:rgba(255,255,255,.16)}
.t-dark .feat p{color:rgba(255,255,255,.7)}
.t-dark .feat-mark circle{stroke:#7fb4e3}.t-dark .feat-mark i{background:#7fb4e3}
.t-tint .feats .feat{border-color:#cfd4d6}
@media (max-width:1000px){.feats .feat:nth-child(odd){border-inline-start:0}.feats .feat:nth-child(n+3){border-top:1px solid var(--rule)}.t-dark .feats .feat:nth-child(n+3){border-top-color:rgba(255,255,255,.16)}}
@media (max-width:600px){.feats .feat{border-inline-start:0!important;border-top:1px solid var(--rule);padding-inline:0}.feats .feat:first-child{border-top:0}}

/* ---- contact ---- */
.contact2{position:relative;z-index:2;background:var(--blue-deep);color:var(--white);padding-top:calc(var(--hh) + clamp(40px,6vw,88px));padding-bottom:var(--sec)}
.contact2>svg{overflow:hidden}
.c2-rings{position:absolute;left:-10%;bottom:6%;width:min(90%,1100px);pointer-events:none}
.c2-rings circle{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.c2-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.c2-info{grid-column:1/6}
.contact2 .crumbs{color:rgba(255,255,255,.6)}.contact2 .crumbs a:hover{color:#fff}
.c2-lead{margin-top:24px;font-size:var(--s1);line-height:1.55;color:rgba(255,255,255,.78);max-width:40ch}
.c2-rows{margin-top:48px;border-top:1px solid rgba(255,255,255,.18)}
.c2-rows li>a,.c2-rows li>div{position:relative;display:grid;gap:4px;padding:22px 56px 22px 0;border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none}
.c2-l{font-size:.9375rem;color:rgba(255,255,255,.6)}
.c2-v{font-weight:600;font-stretch:108%;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.25;transition:color .2s}
.c2-go{position:absolute;right:0;top:50%;width:40px;height:40px;margin-top:-20px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:background .3s,border-color .3s,transform .3s}
.c2-go::after{content:"";position:absolute;left:13px;top:15px;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.c2-rows a:hover .c2-v{color:#9fcbf0}
.c2-rows a:hover .c2-go{background:var(--blue);border-color:var(--blue);transform:translateX(4px)}
.c2-form{grid-column:7/13;position:relative;z-index:3;background:var(--white);color:var(--graphite);padding:clamp(28px,4vw,48px);box-shadow:0 40px 80px -30px rgba(5,20,40,.55)}
.c2-form h2{font-weight:600;font-stretch:110%;font-size:var(--s3);line-height:1.15}
.topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics legend{width:100%;padding:0;margin-bottom:12px;font-weight:500;font-size:.9375rem}
.topics label{display:inline-flex;cursor:pointer}
.topics input{position:absolute;opacity:0;width:1px;height:1px}
.topics span{padding:9px 16px;border:1px solid #b9c0c4;font-size:.9375rem;transition:background .2s,color .2s,border-color .2s}
.topics label:hover span{border-color:var(--blue);color:var(--blue)}
.topics input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.topics input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.form .fl{position:relative;display:block}
.form .fl input,.form .fl textarea{padding:24px 16px 10px}
.form .fl span{position:absolute;left:17px;top:17px;font-weight:400;font-size:var(--s0);color:#7a838a;pointer-events:none;transform-origin:left top;transition:transform .2s,color .2s}
.form .fl input:focus+span,.form .fl input:not(:placeholder-shown)+span,.form .fl textarea:focus+span,.form .fl textarea:not(:placeholder-shown)+span{transform:translateY(-10px) scale(.78);color:var(--blue)}
.c2-map{position:relative;z-index:1;height:clamp(420px,48vw,600px);background:var(--rule)}
.c2-map iframe{width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.05)}
.c2-pin{position:absolute;left:var(--gut);bottom:32px;display:grid;gap:6px;max-width:320px;padding:24px 28px;background:var(--white);box-shadow:0 30px 60px -30px rgba(13,47,82,.5)}
.c2-pin b{font-weight:600;font-stretch:108%;font-size:var(--s1)}.c2-pin span{color:var(--steel)}.c2-pin .link{margin-top:8px;justify-self:start}
.contact2+.c2-map .c2-pin{bottom:40px}
@media (max-width:900px){.contact2{padding-bottom:0}.c2-form{margin-bottom:0}.c2-grid{grid-template-columns:1fr;gap:48px}.c2-info,.c2-form{grid-column:auto}.c2-form{margin-inline:calc(var(--gut) * -1);box-shadow:none}.c2-pin{position:static;max-width:none;box-shadow:none}.c2-map{height:auto}.c2-map iframe{height:340px}}

/* =========================================================
   Round 4: activities, project filters, construction
   ========================================================= */
.acts{display:flex;gap:12px;height:clamp(460px,62vh,620px)}
.act{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--blue-deep);color:#fff;cursor:pointer;transition:flex-grow .7s cubic-bezier(.6,0,.2,1)}
.act.open{flex-grow:2.6;cursor:default}
.act-img{position:absolute;inset:0}
.act-img img,.act-img .ph{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.act.open .act-img img{transform:none}
.act::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,25,43,.92) 0%,rgba(9,25,43,.55) 45%,rgba(9,25,43,.2) 80%);transition:background .5s}
.act:not(.open)::after{background:linear-gradient(to top,rgba(9,25,43,.9),rgba(9,25,43,.55))}
.act-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(24px,3vw,40px)}
.act h3{font-weight:600;font-stretch:112%;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.05;white-space:nowrap}
.act:not(.open) h3{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(1.5rem,2.2vw,2rem)}
.act-more{display:grid;gap:18px;max-width:46ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .4s,margin .5s}
.act.open .act-more{max-height:420px;opacity:1;margin-top:20px;transition-delay:.25s}
.act-more p{color:rgba(255,255,255,.82)}
.act-more ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.act-more li{position:relative;padding-inline-start:18px;font-size:.9375rem}
.act-more li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:7px;height:7px;border:1.5px solid #7fb4e3;border-radius:50%}
.act-more .btn{justify-self:start}
.act:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (max-width:900px){
  .acts{flex-direction:column;height:auto}
  .act,.act.open{flex:none;min-height:420px}
  .act:not(.open) h3{writing-mode:horizontal-tb;transform:none}
  .act-more{max-height:none;opacity:1;margin-top:16px}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.filters button{padding:10px 18px;border:1px solid var(--rule);background:none;font:500 var(--s0) var(--f);color:var(--graphite);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.proj.is-hidden{display:none}
.proj figure{position:relative}
.proj-act{position:absolute;z-index:3;left:12px;top:12px;padding:6px 12px;background:var(--white);color:var(--graphite);font-size:.8125rem;font-weight:600}
.hs-act{display:inline-block;margin-bottom:8px;color:var(--blue);font-size:.875rem;font-weight:600}
.scope{margin-bottom:28px;padding:24px 28px;background:var(--concrete);border-inline-start:3px solid var(--blue)}
.scope h2{font-weight:600;font-stretch:108%;font-size:var(--s1);margin-bottom:8px}
.scope p{color:var(--steel)}

/* =========================================================
   Round 5: dropdown navigation, service detail links
   ========================================================= */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd .dd-top{padding-inline-end:6px!important}
.dd-btn{display:grid;place-items:center;width:24px;height:32px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dd-btn i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.dd-menu{position:absolute;left:0;top:calc(100% + 10px);min-width:250px;padding:10px;background:var(--white);color:var(--graphite);box-shadow:0 24px 50px -20px rgba(13,47,82,.35);border-top:2px solid var(--blue);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .25s,visibility .2s}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd-menu a{display:block;padding:12px 14px!important;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.dd-menu a::after{display:none}
.dd-menu a:hover,.dd-menu a.on{background:var(--concrete);color:var(--blue)}
@media (min-width:1001px){
  .nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu,.nav-dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
  .nav-dd:hover .dd-btn i,.nav-dd.open .dd-btn i{transform:translateY(1px) rotate(225deg)}
}
@media (max-width:1000px){
  .nav-dd{flex-wrap:wrap;border-bottom:1px solid var(--rule)}
  .nav-dd .dd-top{flex:1;border-bottom:0!important}
  .dd-btn{width:48px;height:48px}
  .dd-btn i{width:10px;height:10px}
  .dd-menu{position:static;flex:0 0 100%;min-width:0;padding:0 0 12px 16px;box-shadow:none;border:0;opacity:1;visibility:visible;transform:none;display:none}
  .nav-dd.open .dd-menu{display:block}
  .nav-dd.open .dd-btn i{transform:translateY(2px) rotate(225deg)}
  .dd-menu a{padding:10px 0!important;font-size:var(--s1)!important;border-bottom:0!important;font-weight:500!important}
}
.detail-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}

/* =========================================================
   Round 6: top bar, header options, captcha
   ========================================================= */
.topbar{height:38px;background:var(--blue-deep);color:rgba(255,255,255,.82);font-size:.875rem}
.tb-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.tb-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-links{display:flex;gap:24px;margin-inline-start:auto}
.tb-links a{text-decoration:none;white-space:nowrap}.tb-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-header.light .topbar{background:rgba(9,25,43,.55)}
body:not(.hide-on-scroll) .site-header.hide{transform:none}
@media (max-width:700px){.tb-text{display:none}.tb-links{margin-inline:auto;gap:16px;font-size:.8125rem}.tb-links a:nth-child(2){display:none}}
.captcha{display:grid;gap:8px}
.captcha-row{display:flex;align-items:stretch;gap:10px}
.captcha-img{display:block;height:54px;width:180px;border:1px solid #b9c0c4;background:#f3f5f6}
.captcha-row input{flex:1;min-width:0;padding:14px 16px;border:1px solid #b9c0c4;border-radius:2px;font:inherit;letter-spacing:.12em;text-transform:uppercase}
.captcha-row input:focus{outline:0;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.captcha-new{flex:none;width:54px;border:1px solid #b9c0c4;background:#fff;cursor:pointer;color:var(--graphite);font-size:1.3rem;transition:border-color .2s,color .2s}
.captcha-new:hover{border-color:var(--blue);color:var(--blue)}
.captcha-label{font-weight:500;font-size:.9375rem}
.captcha small{color:var(--steel)}
@media (max-width:420px){.captcha-img{width:140px}}