/* ==========================================================
   TERRAZA GROUP — "Ground up" identity
   Basalt · Bluestone · Survey ochre · Moss
   ========================================================== */
:root{
  color-scheme:light;
  --basalt:#1B1917; --basalt-2:#25221F; --bluestone:#3A3531; --bluestone-2:#4C4640;
  --stone:#ECE5DB; --paper:#F6F2EC; --white:#FFFFFF;
  --ink:#1E1B18; --muted:#62594F; --line:#DDD4C8; --line-dark:rgba(255,255,255,.12);
  --ochre:#B5552B; --ochre-2:#F0B323; --ochre-soft:#F3E2D6;
  --moss:#56624F;
  --on-dark:#F2EBE2; --on-dark-2:#B3AAA0;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.62 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre-2);outline-offset:3px}
.container{max-width:var(--max);margin:0 auto;padding-inline:24px}
.draft{background:var(--ochre-soft);color:#5C3F0E;font:500 12.5px/1.4 var(--mono);text-align:center;padding:8px 16px}
.mono{font-family:var(--mono)}

/* ---------- top bar & header ---------- */
.topbar{background:var(--basalt);color:var(--on-dark-2);font:500 12px/1.3 var(--mono);letter-spacing:.02em;border-bottom:1px solid var(--line-dark)}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 26px;padding-block:9px}
.topbar span{white-space:nowrap}
.topbar span:last-child{margin-left:auto}
.topbar b{color:var(--on-dark);font-weight:600}
header.site{background:var(--basalt);color:var(--on-dark);position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:1px solid var(--line-dark)}
header.site .container{display:flex;align-items:center;gap:28px;min-height:76px;flex-wrap:wrap;padding-block:10px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-right:auto}
.logo-mark{width:38px;height:44px;display:block;flex:none}
.logo-text{display:grid;line-height:1}
.logo-text b{font:800 21px/1 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.14em}
.logo-text small{font:700 10px/1.2 var(--body);letter-spacing:.62em;text-transform:uppercase;color:#D96A36;margin-top:6px;padding-left:.2em}
nav.main{display:flex;gap:26px;flex-wrap:wrap;font-size:14.5px}
nav.main a{text-decoration:none;font-weight:500;color:var(--on-dark-2);transition:color .15s}
nav.main a:hover{color:var(--white)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--body);padding:15px 22px;border-radius:2px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn .arr{font-family:var(--mono);transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--ochre);color:#fff}
.btn-primary:hover{background:#9A4522}
.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--on-dark);background:transparent}
.btn-ghost:hover{border-color:var(--white)}
.btn-dark{background:var(--basalt);color:var(--white)}
.btn-dark:hover{background:var(--bluestone)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--basalt);color:var(--on-dark);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:48px 48px;opacity:.55;
  mask-image:radial-gradient(ellipse 80% 70% at 75% 45%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 75% 45%,#000 20%,transparent 75%)}
.hero .container{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;padding-block:80px 40px;align-items:center}
.coords{font:500 11.5px/1.4 var(--mono);text-transform:uppercase;color:var(--on-dark-2);letter-spacing:.06em;display:flex;gap:18px;flex-wrap:wrap;margin:0 0 26px}
.coords span{border-left:2px solid var(--ochre);padding-left:9px}
.hero .slogan{font:900 clamp(56px,10vw,138px)/.84 var(--display);font-stretch:66%;text-transform:uppercase;margin:0 0 26px;letter-spacing:-.005em}
.hero .slogan .ochre{color:var(--ochre-2)}
.hero .lead{font-size:19px;line-height:1.55;max-width:50ch;margin:0 0 32px;color:#C9CFD1}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.section-drawing{width:100%;height:auto;display:block}
.section-drawing text{font-family:var(--mono)}
.drawing-cap{font:500 11.5px/1.5 var(--mono);color:var(--on-dark-2);margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* credentials rail */
.rail{position:relative;border-top:1px solid var(--line-dark);background:var(--basalt)}
.rail .container{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding-block:0}
.rail div{padding:20px 16px;border-left:1px solid var(--line-dark);color:var(--on-dark)}
.rail div:first-child{border-left:0;padding-left:0}
.rail b{display:block;font:800 15px/1.2 var(--display);font-stretch:85%;text-transform:uppercase;letter-spacing:.02em}
.rail span{display:block;font:500 11.5px/1.4 var(--mono);color:var(--on-dark-2);margin-top:4px}

/* ---------- section scaffolding ---------- */
section.block{padding-block:104px}
section.alt{background:var(--stone)}
section.dark{background:var(--basalt);color:var(--on-dark)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:56px}
.kicker{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1.5px;background:currentColor}
section.dark .kicker{color:var(--ochre-2)}
h2.title{font:900 clamp(38px,5.4vw,72px)/.9 var(--display);font-stretch:68%;text-transform:uppercase;margin:0;text-wrap:balance}
.intro{font-size:18px;color:var(--muted);max-width:56ch;margin:0}
section.dark .intro{color:var(--on-dark-2)}
.sec-head .intro{justify-self:end}
.container > h2.title + .intro{margin-top:20px;margin-bottom:48px}
.container > h2.title + .faq,.container > h2.title + .areas,.container > h2.title + .reviews,.container > .intro + .areas{margin-top:40px}

/* ---------- ground-to-finish capability index ---------- */
.stages{border-top:1.5px solid var(--ink)}
.stage{display:grid;grid-template-columns:90px minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .2s,padding .2s}
.stage:hover{background:var(--white);padding-inline:18px}
.stage .no{font:500 13px/1 var(--mono);color:var(--muted)}
.stage .no b{display:block;font:900 44px/1 var(--display);font-stretch:66%;color:var(--ink);margin-top:6px}
.stage h3{font:900 clamp(26px,3vw,38px)/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0}
.stage h3 small{display:block;font:500 12px/1.4 var(--mono);text-transform:none;color:var(--ochre);letter-spacing:.04em;margin-top:8px}
.stage p{margin:0;color:var(--muted);font-size:15.5px}
.stage .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stage .tags span{font:500 11.5px/1 var(--mono);border:1px solid var(--line);padding:6px 8px;color:var(--ink);background:var(--paper)}
.stage .go{font:500 20px/1 var(--mono);color:var(--ochre);transition:transform .2s}
.stage:hover .go{transform:translateX(4px)}

/* ---------- scale ---------- */
.scale{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark)}
.scale div{padding:34px 30px 8px 0;border-right:1px solid var(--line-dark)}
.scale div+div{padding-left:30px}
.scale div:last-child{border-right:0}
.scale .size{font:500 12px/1 var(--mono);color:var(--ochre-2);letter-spacing:.1em;text-transform:uppercase}
.scale h3{font:900 44px/.9 var(--display);font-stretch:66%;text-transform:uppercase;margin:14px 0 12px;color:var(--white)}
.scale p{margin:0 0 20px;color:var(--on-dark-2);font-size:15.5px}
.scale ul{list-style:none;margin:0;padding:0;font:500 12.5px/1.9 var(--mono);color:var(--on-dark)}
.scale li::before{content:"— ";color:var(--ochre-2)}

/* ---------- project register ---------- */
.register{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.proj .photo{aspect-ratio:4/5}
.proj dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;font:500 12.5px/1.4 var(--mono);border-top:1px solid var(--line);padding-top:14px}
.proj dt{color:var(--muted)}
.proj dd{margin:0}
.proj h3{font:800 22px/1.05 var(--display);font-stretch:78%;text-transform:uppercase;margin:16px 0 0}

/* photo placeholders — replace with real project photography */
.photo{position:relative;display:flex;align-items:flex-end;padding:14px;color:#fff;max-width:100%;
  background:
   linear-gradient(180deg,rgba(19,23,24,0) 40%,rgba(19,23,24,.75)),
   repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 58px),
   repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 29px),
   linear-gradient(135deg,#8E8A7F,#B9B3A4 55%,#A39C8C)}
.photo span{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.45);padding:6px 9px}

/* ---------- builders ---------- */
.builders{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.spec{border-top:1px solid var(--line-dark)}
.spec div{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:15.5px}
.spec dt,.spec .k{font:500 12px/1.5 var(--mono);color:var(--ochre-2);letter-spacing:.06em;text-transform:uppercase}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist li{border:1px solid var(--line);padding:13px 16px;display:flex;gap:12px;font-size:15px;background:var(--white)}
.checklist li::before{content:"✓";color:var(--ochre);font-weight:700}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.story blockquote{margin:0;font:800 clamp(28px,3.4vw,46px)/1.02 var(--display);font-stretch:72%;text-transform:uppercase}
.story blockquote span{color:var(--ochre)}
.story cite{display:block;font:500 12px/1.4 var(--mono);color:var(--muted);font-style:normal;margin-top:20px;letter-spacing:.06em}
.story p{color:var(--muted);max-width:56ch}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:var(--white);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:14px;margin:0}
.stars{color:var(--ochre);letter-spacing:3px;font-size:16px}
.review p{margin:0;font-size:16px}
.review small{font:500 12px/1.4 var(--mono);color:var(--muted);margin-top:auto}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.areas h3{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;color:var(--ochre);padding-bottom:10px;border-bottom:1px solid var(--line)}
.areas ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15.5px}
.areas a{text-decoration:none}
.areas a:hover{color:var(--ochre);text-decoration:underline}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:22px 0;font:800 21px/1.15 var(--display);font-stretch:80%;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--ochre)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:70ch}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}

/* ---------- quote ---------- */
.quote-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.promise{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.promise li{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:15.5px;color:var(--on-dark)}
.promise li b{font:500 12px/1.5 var(--mono);color:var(--ochre-2)}
.hero-card,.quote-card{background:var(--paper);color:var(--ink);padding:32px;border-radius:2px}
.hero-card h2,.quote-card h2{font:900 30px/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0 0 8px}
.hero-card p,.quote-card p{margin:0 0 20px;color:var(--muted);font-size:15px}
form.quote{display:grid;gap:14px}
form.quote .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:16px/1.4 var(--body);padding:13px 14px;border:1px solid #C3C2BB;border-radius:2px;background:var(--white);color:var(--ink);width:100%;text-transform:none;letter-spacing:0}
input:focus,select:focus,textarea:focus{border-color:var(--ochre);outline:none;box-shadow:0 0 0 3px rgba(201,138,46,.2)}
textarea{min-height:96px;resize:vertical}
.fine{font:400 12px/1.5 var(--mono);color:var(--muted);margin:0}
.form-msg{background:var(--ochre-soft);color:#5C3F0E;padding:13px 15px;font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font:500 12.5px/1.3 var(--mono);color:var(--on-dark-2)}
.chips span::before{content:"✓ ";color:var(--ochre-2)}

/* ---------- cta band ---------- */
.cta-band{background:var(--ochre);color:#fff}
.cta-band .container{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding-block:56px}
.cta-band h2{font:900 clamp(34px,4.6vw,60px)/.9 var(--display);font-stretch:68%;text-transform:uppercase;margin:0}
.cta-band p{margin:10px 0 0;font-size:16.5px;color:#F8E6DA}

/* ---------- footer ---------- */
footer.site{background:var(--basalt);color:var(--on-dark-2);font-size:14.5px}
footer.site .container.cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;padding-block:72px 40px}
footer.site h4{font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin:0 0 16px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--white)}
.bigname{font:900 clamp(64px,15vw,210px)/.8 var(--display);font-stretch:62%;text-transform:uppercase;color:#1F2628;letter-spacing:-.01em;padding-top:10px;white-space:nowrap;overflow:hidden}
.legal{border-top:1px solid var(--line-dark);padding-block:20px;font:400 12px/1.7 var(--mono);color:#7F898D}
.ack{font-size:13px;color:#8C969A;margin-top:18px;max-width:46ch}

/* ---------- mobile action bar ---------- */
.mobilebar{display:none}

/* ---------- inner pages ---------- */
.page-hero{background:var(--basalt);color:var(--on-dark);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:48px 48px;opacity:.45;mask-image:linear-gradient(90deg,transparent 35%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);pointer-events:none}
.page-hero .container{position:relative;padding-block:64px 64px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:center}
.crumbs{font:500 12px/1.3 var(--mono);color:var(--on-dark-2);margin:0 0 22px;letter-spacing:.04em}
.crumbs a{color:var(--on-dark);text-decoration:none}
.page-hero h1{font:900 clamp(46px,7vw,96px)/.86 var(--display);font-stretch:66%;text-transform:uppercase;margin:0 0 22px;text-wrap:balance}
.page-hero p{font-size:18.5px;color:#C9CFD1;margin:0 0 26px;max-width:54ch}
.materials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.material{background:var(--white);border:1px solid var(--line)}
.material .swatch{height:130px}
.material .body{padding:22px}
.material h3{font:900 26px/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0 0 8px}
.material p{margin:0 0 12px;color:var(--muted);font-size:15px}
.material dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font:500 12px/1.4 var(--mono);border-top:1px solid var(--line);padding-top:12px}
.material dt{color:var(--muted)}
.material dd{margin:0}
.sw-travertine{background:repeating-linear-gradient(90deg,#E9DCC6 0 118px,#d6c6aa 118px 120px),#E9DCC6}
.sw-bluestone{background:repeating-linear-gradient(90deg,#4F5A60 0 88px,#3a4449 88px 90px),#4F5A60}
.sw-limestone{background:repeating-linear-gradient(90deg,#E6E1D3 0 148px,#cdc6b3 148px 150px),#E6E1D3}
.sw-porcelain{background:repeating-linear-gradient(90deg,#BDB9B1 0 178px,#a09b92 178px 180px),#BDB9B1}
.sw-granite{background:radial-gradient(#6d6d6d 1px,transparent 1.5px) 0 0/7px 7px,#9a9892}
.sw-concrete{background:radial-gradient(#8a8173 1.5px,transparent 2px) 0 0/9px 9px,#C8C1B4}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.prose h2{font:900 38px/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:48px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#34393C;font-size:16.5px}
.prose li{margin:6px 0}
.aside{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);padding:26px}
.aside h3{font:900 26px/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0 0 8px}
.aside p{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.tablebox{overflow-x:auto;border:1px solid var(--line);background:var(--white);margin:16px 0}
table.cost{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
table.cost th,table.cost td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
table.cost tr:last-child td{border-bottom:0}
table.cost th{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--stone)}
table.cost td:first-child{font-weight:600}
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fleet div{background:var(--white);padding:22px}
.fleet b{display:block;font:900 34px/1 var(--display);font-stretch:66%;text-transform:uppercase}
.fleet span{display:block;font:500 12px/1.5 var(--mono);color:var(--muted);margin-top:8px}

/* ---------- nav dropdown + mobile menu ---------- */
nav.main{align-items:center}
.dd{position:relative;padding-block:14px}
.dd-top{cursor:pointer}
.dd-top::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.dd-menu{position:absolute;top:100%;left:-18px;min-width:260px;background:var(--basalt-2);border:1px solid var(--line-dark);border-top:2px solid var(--ochre);padding:8px 0;display:none;z-index:50;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
nav.main .dd-menu a{display:block;padding:10px 18px;color:var(--on-dark-2)}
nav.main .dd-menu a:hover,nav.main .dd-menu a:focus-visible{background:var(--bluestone);color:#fff}
.dd-menu small{display:block;font:500 11px/1.3 var(--mono);color:#7F898D;margin-top:2px}
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;font:600 14px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.35);padding:11px 14px}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--ochre);color:#fff;border-color:var(--ochre)}
.mnav .panel{position:absolute;left:0;right:0;top:100%;background:var(--basalt-2);border-top:2px solid var(--ochre);padding:10px 24px 22px;display:grid;gap:0;z-index:50}
.mnav .panel a{display:block;padding:13px 0;border-bottom:1px solid var(--line-dark);color:var(--on-dark);text-decoration:none;font-weight:500}
.mnav .panel b{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ochre-2);padding:18px 0 4px}
@media (max-width:680px){ .mnav{display:block} header.site .container{position:relative} }

/* ---------- real photography ---------- */
.photo{overflow:hidden}
.photo img,.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption,.shot figcaption{position:relative;z-index:1;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(19,23,24,.72);color:#fff;padding:6px 9px}
.photo::after,.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(19,23,24,.55));pointer-events:none}
.shot{position:relative;margin:0;overflow:hidden;display:flex;align-items:flex-end;padding:14px;background:var(--bluestone)}

/* showcase band under the hero */
.showcase{background:var(--basalt);padding-block:0 8px}
.showcase .grid{display:grid;grid-template-columns:1.5fr .75fr 1fr;grid-template-rows:280px 280px;gap:8px}
.showcase .a{grid-row:1/3}
.showcase .b{grid-row:1/3}
.showcase .shot img{transition:transform .6s ease}
.showcase .shot:hover img{transform:scale(1.03)}

/* stage thumbnails */
.stage.has-thumb{grid-template-columns:90px 150px minmax(0,1fr) minmax(0,1.3fr) auto}
.stage .thumb{width:150px;height:110px;object-fit:cover;display:block;filter:saturate(.9)}
.stage:hover .thumb{filter:none}

/* before & after */
.ba{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ba figure{margin:0}
.ba img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ba figcaption{font:500 12px/1.5 var(--mono);color:var(--on-dark-2);margin-top:12px}
.ba figcaption b{display:block;font:800 18px/1.1 var(--display);font-stretch:80%;text-transform:uppercase;color:var(--white);margin-bottom:4px;letter-spacing:.01em}

/* process strip (inner pages) */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:ph}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.strip figcaption{font:500 12.5px/1.5 var(--mono);color:var(--muted);margin-top:10px}
.strip figcaption::before{counter-increment:ph;content:"0" counter(ph) " · ";color:var(--ochre);font-weight:600}

/* gallery page */
.gallery{columns:3 320px;column-gap:16px}
.gallery figure{break-inside:avoid;margin:0 0 16px;background:var(--white);border:1px solid var(--line)}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:12px 14px;font-size:14px;color:var(--muted)}
.gallery figcaption b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.filters a{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);padding:10px 12px;background:var(--white)}
.filters a:hover{border-color:var(--ink)}
.gal-sec{scroll-margin-top:100px;margin-bottom:64px}
.gal-sec h2{font:900 34px/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0 0 22px;padding-bottom:14px;border-bottom:1.5px solid var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero .container,.page-hero .container,.builders,.story,.two-col,.quote-wrap,.faq-wrap,.sec-head{grid-template-columns:1fr}
  .sec-head .intro{justify-self:start}
  .register,.reviews,.materials{grid-template-columns:1fr 1fr}
  .rail .container{grid-template-columns:repeat(3,1fr)}
  .rail div:nth-child(4){border-left:0;padding-left:0}
  .rail div{border-top:1px solid var(--line-dark)}
  .areas,.fleet{grid-template-columns:1fr 1fr}
  footer.site .container.cols{grid-template-columns:1fr 1fr}
  .aside{position:static}
  .stage,.stage.has-thumb{grid-template-columns:70px 1fr auto}
  .stage p,.stage .tags{grid-column:2/3}
  .stage .go{grid-row:1;grid-column:3}
  .stage .thumb{grid-column:2/3;width:100%;height:180px}
  .showcase .grid{grid-template-columns:1fr 1fr;grid-template-rows:320px 220px 220px}
  .showcase .a{grid-column:1/3;grid-row:auto}
  .showcase .b{grid-row:2/4}
  .ba,.strip{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  nav.main,.topbar span:nth-child(n+2){display:none}
  header.site .btn{display:none}
  .register,.reviews,.materials,.scale,.areas,.fleet{grid-template-columns:1fr}
  .scale div,.scale div+div{padding:26px 0;border-right:0;border-bottom:1px solid var(--line-dark)}
  .rail .container{grid-template-columns:1fr 1fr}
  .rail div:nth-child(odd){border-left:0;padding-left:0}
  .rail div:nth-child(4){border-left:1px solid var(--line-dark);padding-left:16px}
  form.quote .row{grid-template-columns:1fr}
  .cta-band .container{grid-template-columns:1fr}
  footer.site .container.cols{grid-template-columns:1fr}
  section.block{padding-block:72px}
  .stage,.stage.has-thumb{grid-template-columns:1fr;gap:10px}
  .stage p,.stage .tags,.stage .go,.stage .thumb{grid-column:1;grid-row:auto}
  .showcase .grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:260px}
  .showcase .a,.showcase .b{grid-column:auto;grid-row:auto}
  .showcase .b{grid-row:span 2}
  .ba{grid-template-columns:1fr}
  .spec div{grid-template-columns:1fr;gap:4px}
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--basalt);border-top:1px solid var(--line-dark)}
  .mobilebar a{padding:16px;text-align:center;font:600 15px/1 var(--body);text-decoration:none;color:var(--on-dark)}
  .mobilebar a+a{background:var(--ochre);color:#fff}
  body{padding-bottom:60px}
}


.strip.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){.strip.three{grid-template-columns:1fr}}

/* group brands in story */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.brands > div{display:flex;align-items:center;gap:14px}
.brands p{margin:0;font:500 12.5px/1.5 var(--mono);color:var(--muted)}
.brands p b{display:block;font:700 14px/1.3 var(--body);color:var(--ink)}
.brands a{color:inherit}
.brand-dot{width:72px;height:72px;flex:none;border-radius:50%;background:var(--ochre);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--display);letter-spacing:.06em}
@media (max-width:680px){.brands{grid-template-columns:1fr}}