/* ============ TOKENS ============ */
:root{
  --ink:#08090b; --ink2:#101317;
  --paper:#f6f6f7;
  --steel:#8b98a6; --steel-d:#5b6772;
  --amber:#ff7a29; --amber-l:#ffa062; --amber-dk:#c2560f;
  --line:rgba(255,255,255,.12); --line-d:rgba(8,9,11,.12);
  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --nav:54px;
  --r:16px;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --t:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--f); background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-size:17px; line-height:1.55; letter-spacing:-.011em;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.04}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.h1{font-size:clamp(2.25rem,5.9vw,4.9rem);letter-spacing:-.04em}
.h2{font-size:clamp(1.85rem,4.3vw,3.3rem)}
.h3{font-size:clamp(1.25rem,2.2vw,1.85rem);letter-spacing:-.03em}
.lead{font-size:clamp(1.02rem,1.55vw,1.28rem);line-height:1.45;letter-spacing:-.015em;color:#c3c9d0}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--amber)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:8px}

/* ============ NAV ============ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);display:flex;align-items:center;
  background:rgba(8,9,11,.62);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);transition:background .4s var(--t);
}
.nav.solid{background:rgba(8,9,11,.9)}
/* the bar inverts over light sections instead of sitting on them as a dark slab */
.nav.light{background:rgba(246,246,247,.78);border-bottom-color:rgba(8,9,11,.09)}
.nav.light .brand{color:var(--ink)}
.nav.light .brand b{color:var(--amber-dk)}
.nav.light .nlinks{color:#454c54}
.nav.light .nlinks a:hover{color:var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:26px;width:100%}
.brand{font-weight:600;font-size:.93rem;letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--amber);font-weight:600}
.nlinks{display:flex;gap:24px;margin-left:auto;font-size:.82rem;color:#c3c9d0}
.nlinks a{transition:color .25s}
.nlinks a:hover{color:#fff}
.ntel{
  display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#1a0c02;
  font-weight:650;font-size:.82rem;padding:8px 15px;border-radius:99px;white-space:nowrap;
  transition:transform .25s var(--t),background .25s;
}
.ntel:hover{transform:scale(1.04);background:var(--amber-l)}
.burger{display:none;margin-left:auto;width:38px;height:38px;border:0;background:transparent;
  padding:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .32s var(--t),opacity .2s}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){bottom:14px}
.nav.open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav.open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.mobnav{
  position:fixed;top:var(--nav);left:0;right:0;z-index:99;display:none;
  background:rgba(8,9,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;
  max-height:0;overflow:hidden;transition:max-height .38s var(--t)
}
.nav.open+.mobnav{max-height:70svh}
.mobnav a{display:block;padding:13px 0;font-size:1.02rem;color:#e8ebee;
  border-bottom:1px solid rgba(255,255,255,.07)}
.mobnav a:last-child{border-bottom:0}
@media(max-width:960px){
  .nlinks{display:none}
  .burger{display:block;color:#fff}
  .nav.light .burger{color:var(--ink)}
  .ntel{margin-left:0;order:2}
  .burger{order:3}
  .mobnav{display:block}
}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav) + 4vh) var(--gut) 92px;
  background:radial-gradient(120% 82% at 50% 4%,#1e242c 0%,#0b0d10 56%,#08090b 100%);
}
.hero-stage{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 40%;pointer-events:none}
.slab{
  position:absolute;left:50%;top:60%;width:200vmax;height:200vmax;
  translate:-50% 0;transform-origin:50% 0%;
  transform:rotateX(calc(74deg - var(--p,0) * 12deg));
  background:
    linear-gradient(180deg,rgba(255,122,41,.13) 0%,rgba(255,122,41,0) 18%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,transparent 1px 84px),
    linear-gradient(180deg,#333c45,#0d1013 58%);
  opacity:calc(.55 + var(--p,0) * .2);
  mask-image:radial-gradient(62% 55% at 50% 6%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(62% 55% at 50% 6%,#000 0%,transparent 76%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.4;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.4'/></svg>");
}
.hero-inner{
  position:relative;z-index:3;text-align:center;max-width:920px;
  transform:translateY(calc(var(--p,0) * -50px));
  opacity:calc(1 - var(--p,0) * .9);
}
.hero .eyebrow{margin-bottom:18px}
.hero h1{max-width:16ch;margin:0 auto}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translateY(104%);animation:rise 1.1s var(--t) forwards}
.ln:nth-child(2)>span{animation-delay:.09s}
.ln:nth-child(3)>span{animation-delay:.18s}
@keyframes rise{to{transform:translateY(0)}}
.hero .lead{max-width:46ch;margin:24px auto 0;opacity:0;animation:fade .9s var(--t) .48s forwards}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px;opacity:0;animation:fade .9s var(--t) .64s forwards}
@keyframes fade{to{opacity:1}}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 25px;border-radius:99px;
  font-weight:600;font-size:.93rem;letter-spacing:-.01em;
  transition:transform .3s var(--t),background .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--amber);color:#1a0c02}
.btn-p:hover{background:var(--amber-l)}
.btn-g{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-g:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-d{background:var(--ink);color:var(--paper)}
.btn-d:hover{background:#1b2026}
.cue{
  position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:4;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-d);
  opacity:calc(1 - var(--p,0) * 2.6);
}
.cue span{display:block;width:1px;height:30px;margin:9px auto 0;
  background:linear-gradient(180deg,var(--steel-d),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ============ PINNED STAGES ============ */
.track{position:relative}
.stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vh,40px);
  padding:calc(var(--nav) + 46px) var(--gut) clamp(28px,5vh,58px);
}
.pbar{position:absolute;top:var(--nav);left:0;height:2px;z-index:7;background:var(--amber);width:calc(var(--p,0) * 100%)}
.pcount{position:absolute;top:calc(var(--nav) + 18px);left:var(--gut);z-index:6;
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--steel-d)}
.caps{position:relative;width:100%;max-width:640px;min-height:clamp(120px,17vh,164px);text-align:center;flex:0 0 auto}
/* outgoing captions fade fast, incoming ones wait for the gap — otherwise
   two absolutely-stacked captions are legible on top of each other mid-crossfade */
.step{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .16s linear,transform .16s linear}
.step.on{opacity:1;transform:none;
  transition:opacity .42s var(--t) .14s,transform .42s var(--t) .14s}
.step p{margin-top:11px;color:var(--steel);font-size:.98rem;line-height:1.5}

/* --- 01 failure cross-section --- */
.fail{background:linear-gradient(180deg,#08090b,#0e1116)}
.core{
  position:relative;width:min(660px,86vw);height:min(42svh,400px);
  border-radius:14px;overflow:hidden;flex:0 1 auto;
  transform:scale(calc(.95 + var(--p,0) * .07));
  box-shadow:0 40px 110px -40px rgba(0,0,0,.9);
}
.core-slab{position:absolute;inset:0;background:linear-gradient(180deg,#414a54 0 24%,#2d353d 24% 100%)}
.core-slab::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>")}
.surf{position:absolute;left:0;right:0;top:0;height:24%;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent);
  border-bottom:1px solid rgba(0,0,0,.35)}
.rebar{position:absolute;left:0;right:0;top:63%;height:11px;border-radius:99px;
  background:linear-gradient(90deg,#6b7480,#94a0ac,#6b7480);opacity:.9}
.rebar::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent 8%,#8f4a1c 30%,#b2571e 50%,#8f4a1c 70%,transparent 92%);
  opacity:calc(min(1, max(0, var(--p,0) - .44) * 3.2))}
.crack{position:absolute;top:0;left:47%;width:3px;border-radius:2px;
  height:calc(var(--p,0) * 63%);
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.35))}
.water{position:absolute;top:0;left:47%;width:7px;translate:-2px 0;border-radius:99px;filter:blur(1.6px);
  height:calc(max(0, var(--p,0) - .16) * 76%);
  background:linear-gradient(180deg,rgba(96,164,255,.9),rgba(96,164,255,.12));
  opacity:calc(min(1, max(0, var(--p,0) - .16) * 5))}
.rust{position:absolute;top:63%;left:47%;width:190px;height:30px;translate:-50% -32%;
  border-radius:50%;filter:blur(6px);
  background:radial-gradient(ellipse at center,rgba(168,80,28,.8),rgba(168,80,28,0) 68%);
  transform:scaleX(calc(.25 + max(0, var(--p,0) - .44) * 2.1)) scaleY(calc(.45 + max(0, var(--p,0) - .44) * 1.1));
  opacity:calc(min(.85, max(0, var(--p,0) - .44) * 2.8))}
.spall{position:absolute;top:0;left:40%;width:84px;height:30px;border-radius:0 0 44% 44%;
  background:linear-gradient(180deg,#0a0c0e,#1d2329);
  transform:scaleY(calc(max(0, var(--p,0) - .7) * 3.6));transform-origin:top;
  opacity:calc(min(1, max(0, var(--p,0) - .7) * 5))}
.corelbl{position:absolute;right:13px;bottom:11px;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.36)}

/* --- 02 exploded system --- */
.sys{background:linear-gradient(180deg,#0e1116,#08090b)}
.l1{--i:0;--d:0}
.l2{--i:1;--d:.167}
.l3{--i:2;--d:.333}
.l4{--i:3;--d:.500}
.l5{--i:4;--d:.667}
.l1{background:linear-gradient(150deg,#464f59,#2a3138)}
.l2{background:linear-gradient(150deg,#59636e,#3a434c)}
.l3{background:linear-gradient(150deg,#8a6440,#5f442b)}
.l4{background:linear-gradient(150deg,#c4702f,#8e4d1e)}
.l5{background:linear-gradient(150deg,#ff9148,#d26120)}


/* --- 03 horizontal projects --- */
.hscroll{background:var(--paper);color:var(--ink)}
.hstage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto auto;align-content:center;gap:clamp(18px,3.4vh,40px);
  padding:calc(var(--nav) + 2vh) 0 3vh}
.hhead{padding:0 var(--gut)}
.hhead .h2{max-width:24ch;margin-top:10px;font-size:clamp(1.55rem,3.1vw,2.55rem)}
/* min-width:0 stops this grid item from blowing out to its content width,
   which would leave no measurable overflow to scroll through */
.hrow{display:flex;gap:clamp(14px,1.8vw,26px);padding:0 var(--gut);will-change:transform;
  min-width:0;width:100%;
  transform:translate3d(calc(var(--p,0) * var(--shift,0px)),0,0)}
.card{flex:0 0 clamp(250px,30vw,380px);background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-d);box-shadow:0 22px 54px -30px rgba(8,9,11,.26)}
.card .ph{height:clamp(130px,20svh,190px);position:relative;overflow:hidden;
  background:linear-gradient(140deg,#3b444e,#1b2026)}
.card .ph::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='.5'/></svg>")}
.card .ph b{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;background:rgba(8,9,11,.5);padding:5px 10px;border-radius:99px;
  backdrop-filter:blur(8px)}
.card .bd{padding:18px 20px 22px}
.card h3{font-size:1.06rem;letter-spacing:-.025em}
.card p{margin-top:7px;font-size:.87rem;color:var(--steel-d);line-height:1.5}
.card dl{display:flex;gap:18px;margin:14px 0 0;font-size:.78rem}
.card dt{color:var(--steel);letter-spacing:.07em;text-transform:uppercase;font-size:.63rem}
.card dd{margin:3px 0 0;font-weight:600}

/* ============ REVEALS ============ */
/* reveals are gated on .js so the page is fully readable without JavaScript,
   and so above-the-fold text never waits on a script to become visible */
.js .rv:not(.in){opacity:0;transform:translateY(24px)}
.rv{transition:opacity .75s var(--t),transform .75s var(--t)}
.rv.d1.in{transition-delay:.07s}.rv.d2.in{transition-delay:.14s}.rv.d3.in{transition-delay:.21s}

/* ============ STANDARD SECTIONS ============ */
.sec{padding:clamp(76px,12vh,140px) 0}
.light{background:var(--paper);color:var(--ink)}
.light .lead{color:var(--steel-d)}
.light .eyebrow{color:var(--amber-dk)}
.grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tile{background:#fff;border:1px solid var(--line-d);border-radius:var(--r);padding:25px 23px 27px;
  transition:transform .45s var(--t),box-shadow .45s var(--t)}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 56px -32px rgba(8,9,11,.28)}
.tile .ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(140deg,var(--amber),#c2560f);margin-bottom:15px}
.tile h3{font-size:1.04rem;letter-spacing:-.024em}
.tile p{margin-top:8px;font-size:.9rem;color:var(--steel-d);line-height:1.55}
.tile a{display:inline-block;margin-top:13px;font-size:.86rem;font-weight:600;color:var(--amber-dk)}
.stats{position:relative;background:var(--ink2);overflow:hidden;padding:clamp(66px,10vh,112px) 0}
.stats::before{content:"";position:absolute;inset:-25% -10%;
  background:radial-gradient(50% 50% at 32% 30%,rgba(255,122,41,.15),transparent 68%);
  transform:translateY(calc(var(--p,0) * -80px))}
.stat b{display:block;font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.stat span{display:block;margin-top:9px;font-size:.82rem;color:var(--steel)}
.cta{background:linear-gradient(160deg,#12161b,#08090b);padding:clamp(76px,13vh,150px) 0;text-align:center}
.cta .h2{max-width:22ch;margin:0 auto}
.cta .row{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.tels{margin-top:24px;font-size:.88rem;color:var(--steel)}
.tels a{color:#fff;font-weight:600}
.areas{font-size:.92rem;color:#c3c9d0;line-height:2}
footer{background:#050607;border-top:1px solid var(--line);padding:54px 0 38px;font-size:.86rem;color:var(--steel)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:13px}
footer ul{padding:0;margin:0}
footer li{list-style:none;margin:0 0 8px}
footer a:hover{color:#fff}
.fbot{margin-top:42px;padding-top:20px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.79rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .ln>span{transform:none}
  .hero .lead,.hero-cta{opacity:1}
  .rv{opacity:1;transform:none}
  .fu{animation:none;opacity:1;transform:none}
  .hero-inner{transform:none;opacity:1}
  .slab{transform:rotateX(70deg)}
  .cue{display:none}
  .track{height:auto!important}
  .stage{position:relative;height:auto;padding:80px 0}
  .hstage{position:relative;height:auto;display:block;padding:80px 0}
  .hrow{transform:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px}
  .card{scroll-snap-align:start}
  .core{transform:none;height:auto;aspect-ratio:16/10}
  .crack,.water,.rust,.spall{display:none}
  .caps{min-height:0}
  .step{position:relative;opacity:1;transform:none;margin-bottom:26px}
  .pbar,.pcount{display:none}
  .stats::before{transform:none}
}

/* CSS-only entrance for above-the-fold content — no JS dependency */
.fu{animation:fadeup .85s var(--t) both}
.fu1{animation-delay:.07s}
.fu2{animation-delay:.15s}
.fu3{animation-delay:.23s}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============ INTERIOR PAGES ============ */
.pcta{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.phero{position:relative;overflow:hidden;padding:calc(var(--nav) + clamp(56px,11vh,120px)) 0 clamp(48px,9vh,96px);
  background:radial-gradient(110% 90% at 18% 0%,#1e242c 0%,#0c0e12 58%,#08090b 100%)}
.phero-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 90px),
    radial-gradient(60% 70% at 88% 12%,rgba(255,122,41,.14),transparent 70%)}
.phero .wrap{position:relative;z-index:2}
.ph1{max-width:22ch;font-size:clamp(2.05rem,4.9vw,4rem)}
.phero .lead{max-width:52ch;margin-top:20px}
.bcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px;
  font-size:.76rem;color:var(--steel-d);letter-spacing:.01em}
.bcrumb a{color:var(--steel)}
.bcrumb a:hover{color:#fff}
.bcrumb i{font-style:normal;opacity:.4}
.bcrumb span{color:#e2e6ea}
.pr{max-width:66ch;margin-top:18px;font-size:1.04rem;line-height:1.62;color:#c3c9d0}
.light .pr{color:#3f464e}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 26px;
  margin:38px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.light .spec{border-top-color:var(--line-d)}
.spec dt{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.spec dd{margin:7px 0 0;font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.faq{margin-top:40px;max-width:78ch}
.faq details{border-top:1px solid var(--line);padding:0}
.light .faq details{border-top-color:var(--line-d)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.light .faq details:last-child{border-bottom-color:var(--line-d)}
.faq summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font-weight:600;font-size:1.01rem;letter-spacing:-.022em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.5;transition:transform .3s var(--t)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 22px;max-width:66ch;color:var(--steel);line-height:1.6;font-size:.97rem}
.light .faq p{color:#4b525a}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips a{display:inline-block;padding:8px 15px;border-radius:99px;font-size:.85rem;
  border:1px solid var(--line);color:#c3c9d0;transition:border-color .25s,color .25s,background .25s}
.chips a:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.05)}
.light .chips a{border-color:var(--line-d);color:#454c54}
.light .chips a:hover{border-color:var(--ink);color:var(--ink);background:rgba(8,9,11,.04)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.note{margin-top:34px;padding:22px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:.95rem;color:#c3c9d0}
.light .note{background:#fff;border-color:var(--line-d);color:#4b525a}
.note b{color:#fff;font-weight:600}
.light .note b{color:var(--ink)}
.areah{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  margin-bottom:12px;font-weight:600}
.light .areah{color:var(--amber-dk)}
.areas div{line-height:1.95}

/* ============ PHOTOGRAPHY ============ */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:42px}
.shot{position:relative;border-radius:var(--r);overflow:hidden;background:#1b2026;
  aspect-ratio:4/3}
.shot.tall{aspect-ratio:3/4}
/* <picture> is inline by default and has no height of its own, so an
   img with height:100% inside it collapses — make the wrapper a block */
.shot picture{display:block;width:100%;height:100%}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--t)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-size:.78rem;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(180deg,transparent,rgba(8,9,11,.82))}
.shotnote{margin-top:20px;font-size:.84rem;color:var(--steel)}
.light .shotnote{color:var(--steel-d)}
/* photo band behind an interior hero */
.phero.haspic .phero-bg{opacity:1;
  background:linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.80) 34%,rgba(8,9,11,.40) 62%,rgba(8,9,11,.18) 100%)}
.phero.haspic .pic{position:absolute;inset:0;z-index:0}
.phero.haspic .pic img{width:100%;height:100%;object-fit:cover;display:block}
.phero.haspic .phero-bg{z-index:1}
@media(max-width:700px){
  .phero.haspic .phero-bg{background:linear-gradient(180deg,rgba(8,9,11,.86),rgba(8,9,11,.95))}
}

/* v15: transferred brand logo */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand .bmark{height:30px;width:auto;display:block}
.flogo{display:block;height:auto;max-width:220px;margin-bottom:12px;opacity:.94}

/* v16 */
.spec dd{overflow-wrap:anywhere}
.photoseq{position:relative;width:min(92vw,680px);aspect-ratio:5/3;margin:0 auto;border-radius:14px;overflow:hidden;background:#15181d;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.photoseq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s linear}
.photoseq .p0{opacity:1}
.photoseq .p1{opacity:clamp(0,calc((var(--p,0) - .24)*14),1)}
.photoseq .p2{opacity:clamp(0,calc((var(--p,0) - .49)*14),1)}
.photoseq .p3{opacity:clamp(0,calc((var(--p,0) - .74)*14),1)}
.photoseq .phlbl{position:absolute;right:14px;bottom:10px;z-index:5;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cityph{float:right;width:min(42%,470px);aspect-ratio:4/3;margin:6px 0 18px 34px;border-radius:14px;overflow:hidden}
.cityph img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.cityph{float:none;width:100%;margin:14px 0}}
.card .ph{position:relative;overflow:hidden;min-height:172px}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .ph b{position:absolute;left:12px;bottom:10px;z-index:2;background:rgba(10,12,16,.62);padding:4px 10px;border-radius:8px}

/* v16b */
.card .ph img{object-position:center 70%}
.cityph img{object-position:center 70%}

/* ============ v18 - SYSTEM TABLES, STEPS, CALLOUTS ============ */
.tscroll{margin-top:34px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.light .tscroll{border-color:var(--line-d)}
.stab{width:100%;border-collapse:collapse;font-size:.88rem;min-width:660px}
.stab caption{text-align:left;padding:18px 20px 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.light .stab caption{color:var(--steel-d)}
.stab th,.stab td{padding:13px 18px;text-align:left;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--line)}
.light .stab th,.light .stab td{border-bottom-color:var(--line-d)}
.stab thead th{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--steel);white-space:nowrap}
.light .stab thead th{color:var(--steel-d)}
.stab tbody th{font-weight:600;color:#fff;white-space:nowrap}
.light .stab tbody th{color:var(--ink)}
.stab td{color:#c3c9d0}
.light .stab td{color:#4b525a}
.stab tbody tr:last-child th,.stab tbody tr:last-child td{border-bottom:0}
.stab tbody tr:hover td,.stab tbody tr:hover th{background:rgba(255,255,255,.03)}
.light .stab tbody tr:hover td,.light .stab tbody tr:hover th{background:rgba(8,9,11,.025)}
.tnote{margin-top:12px;font-size:.82rem;color:var(--steel)}
.light .tnote{color:var(--steel-d)}
.steps{counter-reset:st;margin-top:34px;display:grid;gap:2px}
.steps li{list-style:none;position:relative;padding:20px 22px 20px 66px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.025)}
.light .steps li{border-color:var(--line-d);background:#fff}
.steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:22px;top:20px;font-size:.72rem;letter-spacing:.1em;font-weight:600;color:var(--amber)}
.steps li b{display:block;font-size:1rem;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.light .steps li b{color:var(--ink)}
.steps li p{font-size:.9rem;line-height:1.55;color:#c3c9d0;max-width:64ch}
.light .steps li p{color:#4b525a}
.pull{margin-top:34px;padding:26px 28px;border-left:2px solid var(--amber);background:rgba(255,122,41,.06);border-radius:0 var(--r) var(--r) 0}
.pull p{font-size:1.02rem;line-height:1.58;color:#e6e9ec;max-width:64ch}
.light .pull p{color:#3f464e}
.pull p+p{margin-top:12px}
.sysjump{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.sysjump a{display:inline-block;padding:9px 16px;border-radius:99px;font-size:.85rem;font-weight:600;border:1px solid var(--line-d);color:#454c54;transition:border-color .25s,color .25s,background .25s}
.sysjump a:hover{border-color:var(--ink);color:var(--ink);background:rgba(8,9,11,.04)}
@media(max-width:700px){.stab{min-width:560px;font-size:.84rem}.stab th,.stab td{padding:11px 14px}.steps li{padding:18px 18px 18px 58px}}
.note a{color:var(--amber);font-weight:600;border-bottom:1px solid rgba(255,122,41,.35);transition:border-color .2s}
.note a:hover{border-bottom-color:var(--amber)}
.light .note a{color:var(--amber-dk);border-bottom-color:rgba(194,86,15,.35)}
.light .note a:hover{border-bottom-color:var(--amber-dk)}
.pull a{color:var(--amber);font-weight:600}
.light .pull a{color:var(--amber-dk)}
/* ============ ENQUIRY FORM (2026-08-15) ============ */
.efm{margin-top:34px;max-width:780px}
.efm .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.efm .row2{grid-template-columns:1fr}}
.efm .fld{margin-top:16px}
.efm label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9aa3ad;margin-bottom:7px}
.efm input,.efm select,.efm textarea{width:100%;padding:13px 15px;border-radius:var(--r);background:rgba(255,255,255,.045);border:1px solid var(--line);color:#eef1f4;font:inherit;font-size:.97rem;transition:border-color .25s,background .25s}
.efm textarea{min-height:150px;resize:vertical;line-height:1.55}
.efm input:focus,.efm select:focus,.efm textarea:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.075)}
.efm input::placeholder,.efm textarea::placeholder{color:#7c848d}
.efm select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9aa3ad 50%),linear-gradient(135deg,#9aa3ad 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.efm option{background:#14171b;color:#eef1f4}
.efm .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.efm .act{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.efm .fine{font-size:.85rem;color:#9aa3ad;max-width:46ch;margin:0}
.efm .msg{margin-top:20px;padding:15px 18px;border-radius:var(--r);font-size:.95rem;display:none}
.efm .msg.ok{display:block;background:rgba(70,160,90,.13);border:1px solid rgba(120,200,140,.35);color:#d3ebd9}
.efm .msg.err{display:block;background:rgba(190,70,50,.13);border:1px solid rgba(220,120,100,.35);color:#f3d5cd}
.efm .req{color:var(--amber)}
.efm button[disabled]{opacity:.55;cursor:default}
.light .efm label,.light .efm .fine{color:#5a6068}
.light .efm input,.light .efm select,.light .efm textarea{background:#fff;border-color:var(--line-d);color:var(--ink)}

/* --- v22: narrow-phone nav fit (added 2026-09-06, supersedes v20) ---
   Below ~460px the nav needed 453px of content in a 356px bar: the wordmark was
   clipped, the call button rode over it, and .burger shrank to 0 so the menu
   could not be opened. Fix keeps the PHONE NUMBER visible at every width — it is
   the useful half of the label, and on a desktop it is the only half that works,
   since you cannot tap to dial. The word "Call" is what gets dropped instead. */
@media (max-width:460px){
  .nav .wrap{gap:8px;padding:0 12px}
  .brand{font-size:12.5px;gap:5px;min-width:0}
  .brand .bmark{width:32px}
  .ntel{font-size:12px;padding:7px 10px;letter-spacing:0}
  .ntel .nlbl{display:none}
  .burger{flex:0 0 34px;width:34px;height:34px}
}
@media (max-width:340px){
  .brand b{display:none}
  .ntel{font-size:11.5px;padding:6px 8px}
}

/* --- v21: footer grid on phones (added 2026-09-06) ---
   .fgrid was a hard 1.5fr 1fr 1fr 1fr with no breakpoint. On a 360px phone the
   first column's min-content floor (logo + address) forced the grid ~12px wider
   than the viewport, so EVERY page scrolled sideways. minmax(0,1fr) removes that
   floor; the column count now steps down with width. */
@media (max-width:700px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:430px){
  .fgrid{grid-template-columns:minmax(0,1fr);gap:26px}
}
.fgrid > *{min-width:0}
.flogo{max-width:100%;height:auto}

/* --- v23: nav safety valve under Android text scaling (added 2026-09-06) ---
   Android Chrome's accessibility Text-scaling multiplies computed px text, which
   px-based media queries cannot see. At 1.15x+ the nowrap wordmark grew past its
   flex box and ran UNDER the call button — the original reported symptom, which
   is why it appeared on a phone whose viewport looked wide enough. Priority when
   space runs out: the number and the menu stay whole, the wordmark truncates. */
.brand{min-width:0;overflow:hidden}
.ntel{flex:0 0 auto}
.burger{flex:0 0 auto}
/* ============ PROJECT CARD / BEFORE-AFTER (2026-09-08) ============ */
.pwork{margin-top:32px}
.pwork .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.pwork .pair{grid-template-columns:1fr}}
.pwork figure{margin:0}
.pwork img{width:100%;height:auto;display:block;border-radius:var(--r);background:rgba(255,255,255,.04)}
.pwork .cap{margin-top:14px;font-size:.88rem;line-height:1.6;color:#9aa3ad;max-width:72ch}
.light .pwork .cap{color:#5a6068}
.pwork .cap a{color:var(--amber);font-weight:600}
.light .pwork .cap a{color:var(--amber-dk)}
dl.spec.pspec{margin-top:26px}
/* tile/card headings inherit the section text colour; on a dark .sec that made them
   near-white on a white tile — invisible on 35 pages (found 2026-09-08). Tiles are always white. */
.tile h3,.tile b,.card h3{color:var(--ink)}
/* named project cards on the homepage link through to the page carrying that project section (2026-09-08); mirrors .tile a */
.card .bd a{display:inline-block;margin-top:13px;font-size:.86rem;font-weight:600;color:var(--amber-dk)}
/* ---- traffic coating cross-section (added 2026-09-14) ---- */
.tcs{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3.5vw,48px);align-items:center;margin-top:36px}
.tcs-fig{margin:0;min-width:0}
.tcs-svg{display:block;width:100%;height:auto;overflow:visible}
.tcs-svg text{font-family:inherit;font-weight:600;font-size:14px;fill:#fff}
.tcs-svg .tcs-sub{font-size:14px;font-weight:600;fill:#e6e9ee;opacity:.92}
.tcs-svg .tcs-sub2{font-size:12px;font-weight:500;fill:#aeb6c2}
.tcs-cap{margin-top:12px;font-size:.78rem;line-height:1.5;color:var(--steel,#8a93a0)}
.tcs-legend{list-style:none;margin:0;padding:0;counter-reset:tcs}
.tcs-legend li{counter-increment:tcs;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:start;padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}
.tcs-legend li:first-child{border-top:0;padding-top:0}
.tcs-legend li::before{content:counter(tcs);grid-row:1/3;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--amber,#ff7a29);color:#fff;font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center;background:#0f1216}
.tcs-legend b{display:block;font-size:.98rem;font-weight:600;color:#fff;line-height:1.3}
.tcs-legend span{display:block;font-size:.9rem;line-height:1.55;color:#aeb6c2;margin-top:3px}
@keyframes tcsrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .tcs.rv.in .band{animation:tcsrise .6s var(--t,cubic-bezier(.2,.7,.2,1)) both;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
.js .tcs.rv.in .band-sub{animation:none}
@media (max-width:820px){.tcs{grid-template-columns:1fr;gap:18px;margin-top:28px}.tcs-svg{max-width:520px;margin:0 auto}.tcs-svg text{font-size:16px}.tcs-svg .tcs-sub{font-size:15px}.tcs-svg .tcs-sub2{font-size:13px}.tcs-legend li{padding:9px 0}.tcs-legend span{font-size:.88rem}}
@media (prefers-reduced-motion:reduce){.js .tcs.rv.in .band{animation:none}}

/* 2026-09-28: the closed mobile menu showed a strip (its padding and border) under the nav */
.mobnav{padding-top:0;padding-bottom:0;border-bottom-width:0}
.nav.open+.mobnav{padding-top:8px;padding-bottom:20px;border-bottom-width:1px}
/* --- v30: phone touch targets (2026-10-01 review build) ---
   Below 460px the burger is 34x34 (v22 fit). The pseudo-element widens its tap area to 44x44 there and 48x48 above,
   without moving the icon or anything else in the bar. */
.burger{position:relative}.burger::before{content:"";position:absolute;inset:-5px}

/* --- v31: the email beside the numbers (2026-10-02) ---
   Header: the call pill and the email sit in one column (.ncta); the email line is hidden below 560px, where it is the last
   row of the mobile menu instead. Footer: the email follows the two numbers (no CSS needed). */
.ncta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.ncta .ntel{padding:5px 13px;font-size:.78rem}
.nmail{order:9;font-size:.68rem;line-height:1;letter-spacing:0;white-space:nowrap;color:#c3c9d0;transition:color .25s}
.nmail:hover{color:#fff}
.nav.light .nmail{color:#454c54}.nav.light .nmail:hover{color:var(--ink)}
@media(max-width:960px){.ncta{order:2;margin-left:0}}
@media (max-width:560px){.nmail{display:none}.ncta .ntel{padding:8px 15px;font-size:.82rem}}
@media (max-width:460px){.ncta .ntel{font-size:12px;padding:7px 10px}}
@media (max-width:340px){.ncta .ntel{font-size:11.5px;padding:6px 8px}}
.mobnav a.mmail{font-size:.92rem;color:#b9c0c7;word-break:break-all}

/* --- v32: hero line wrappers, room for descenders (2026-10-02) ---
   .ln clips for the rise reveal. With line-height 1.04 and .06em of padding the descenders of g, y and p were cut on fonts
   whose content area is taller than the line box (Segoe UI on Windows: 5.8 px at 72 px). The padding grows to .2em and the
   negative margin keeps every line and the text below exactly where they were; the reveal starts 116% down instead of 104%
   so no ascender shows through the taller clip box before the line rises. */
.ln{padding-bottom:.2em;margin-bottom:-.14em}
.ln>span{transform:translateY(116%)}
@media (prefers-reduced-motion: reduce){.ln>span{transform:none}}

/* --- v33: header contact column (2026-10-02; the email under the call pill sat against the bottom of the 54 px bar) ---
   From 561 px up, where the email line is shown, the bar is 64 px: pill 32 px + 4 px + email 12 px = 48 px, 8 px of air
   above and below. Everything that offsets from the bar (heroes, the mobile menu, the progress bar) follows --nav.
   Phones keep the 54 px bar with the pill alone. */
@media (min-width:561px){:root{--nav:64px}}
.ncta{gap:4px}
.ncta .ntel{padding:6px 14px;font-size:.8rem}
.nmail{font-size:.72rem;color:#d2d7dd}
@media (max-width:560px){.ncta .ntel{padding:8px 15px;font-size:.82rem}}
@media (max-width:460px){.ncta .ntel{font-size:12px;padding:7px 10px}}
@media (max-width:340px){.ncta .ntel{font-size:11.5px;padding:6px 8px}}

/* --- v34: the email line under the call pill is gone (2026-10-02) ---
   The header is the single call pill again (the .ncta wrapper and a.nmail were removed from the pages), so the bar returns
   to 54 px at every width. The email stays as the last row of the mobile menu and under the numbers in the footer. */
@media (min-width:561px){:root{--nav:54px}}