/* Shared responsive layer for the home page and all server-rendered pages. */
html{scroll-padding-top:76px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.wrap,.nav,.hero-copy,.section-head>*,.config-layout>*,.craft-layout>*,.proof-inner>*,.quote-layout>*,.footer-top>*,.page-hero-inner,.page-section-head>*,.page-item>*,.project-detail-inner>*{min-width:0}
.section-head h2,.page-section-head h2,.page-hero h1,.project-info h3,.work-card-info h2,.page-item h3,.page-item p{overflow-wrap:anywhere}
.btn,.filter,.chip,.swatch,.toggle,.hamb,.newsletter button,.slide-control{min-height:42px}
.field input,.field select,.field textarea,.newsletter input{font-size:16px}
.field input,.field select,.field textarea{min-height:46px}
.drop{min-height:76px;display:grid;place-items:center}
.filters,.material-swatches{scrollbar-width:thin;scrollbar-color:rgba(215,243,106,.5) transparent}

@media(max-width:1080px){
  .wrap{width:calc(100% - 64px)}
  .links{gap:16px}
  .brandname{font-size:12px}
  .navright{gap:8px}
  .navright .btn{padding-inline:13px}
  .section-head{gap:28px}
  .config-layout{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .config-controls{padding:28px}
  .material-swatches{flex-wrap:wrap}
  .estimate{gap:16px;align-items:flex-start}
  .estimate .btn{max-width:48%;text-align:center}
  .craft-layout{gap:52px}
  .quote-layout{gap:48px}
  .footer-top{gap:28px}
}

@media(max-width:920px){
  .wrap{width:calc(100% - 52px)}
  .header{height:70px}
  .nav{position:relative}
  .hamb{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--darkline);background:transparent;color:var(--ink);font-size:20px}
  .navright .btn{display:inline-flex}
  .navtext{display:none}
  .links{display:none;position:absolute;z-index:30;top:calc(100% + 1px);left:-26px;right:-26px;background:rgba(243,242,237,.98);backdrop-filter:blur(18px);padding:12px 26px 20px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--darkline);box-shadow:0 18px 30px rgba(16,19,16,.1)}
  .links.open{display:flex}
  .links a{min-height:46px;display:flex;align-items:center;border-bottom:1px solid rgba(16,19,16,.08);font-size:13px}
  .links a:last-child{border-bottom:0}
  .hero{min-height:620px}
  .hero-inner{min-height:620px}
  .hero-copy{width:min(690px,72%)}
  .hero-note{right:4%;bottom:96px}
  .config-layout{grid-template-columns:1fr}
  .config-visual{min-height:clamp(400px,56vw,560px)}
  .config-controls{padding:34px 36px}
  .material-swatches{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .swatch{flex:0 0 auto}
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap{min-height:225px;padding:25px 24px 28px 0}
  .cap:not(:first-child){padding-left:24px}
  .cap:nth-child(2){border-right:0}
  .cap:nth-child(3),.cap:nth-child(4){border-top:1px solid var(--darkline)}
  .cap:nth-child(3){padding-left:0}
  .cap:nth-child(4){padding-right:0}
  .gallery-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .project{min-height:330px}
  .project-stack{grid-template-rows:repeat(2,minmax(0,1fr))}
  .craft-layout{gap:42px}
  .craft-image{height:420px}
  .proof-inner{gap:42px}
  .quote-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px}
  .steps{justify-content:space-between}
  .step{font-size:8px;gap:6px;white-space:nowrap}
  .step-line{width:clamp(9px,2vw,24px);margin-inline:4px;flex:1}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:380px}
  .certs{flex-wrap:wrap;justify-content:flex-start;gap:15px 26px}
  .cert{flex:1 1 27%;min-width:170px}
  .page-hero:after{right:-190px}
  .page-section-head{gap:30px}
  .page-index{right:26px}
  .project-detail-inner{gap:46px}
}

@media(max-width:680px){
  html{scroll-padding-top:64px}
  .wrap{width:calc(100% - 40px)}
  .topline{height:30px;padding:0 12px;font-size:8px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topline span{margin:0 6px}
  .header{height:64px}
  .brand{gap:8px}
  .brandmark{width:32px;height:32px}
  .brandname{font-size:11px;letter-spacing:0}
  .brandname small{font-size:7px;letter-spacing:.12em}
  .navright{gap:8px}
  .navright .btn{display:none}
  .links{left:-20px;right:-20px;padding-inline:20px}
  .hero{min-height:740px}
  .hero-inner{min-height:740px;justify-content:flex-start;padding-top:74px;padding-bottom:180px}
  .hero-img{inset:0;background-position:58% center;opacity:.58}
  .hero:after{background:linear-gradient(90deg,rgba(16,19,16,.9),rgba(16,19,16,.57)),linear-gradient(0deg,#101310 0%,rgba(16,19,16,.68) 24%,transparent 67%)}
  .hero-copy{width:100%;max-width:560px}
  h1{font-size:clamp(43px,11.2vw,66px);line-height:1.01;letter-spacing:-.075em;margin:22px 0 17px}
  .hero-copy>p{font-size:13px;line-height:1.75;max-width:460px}
  .hero-actions{align-items:flex-start;flex-wrap:wrap;gap:16px;margin-top:23px}
  .hero-actions .btn{min-height:48px}
  .play-link{min-height:44px;font-size:9px}
  .hero-note{right:20px;bottom:94px;left:20px;min-width:0;width:max-content;max-width:calc(100% - 40px);padding:11px 14px}
  .hero-note strong{font-size:11px;margin:4px 0}
  .hero-note span{font-size:8px}
  .hero-stats{width:100%;padding-inline:20px;height:67px}
  .stat{gap:6px}
  .stat b{font-size:15px}
  .stat span{font-size:7px;line-height:1.5}
  .stat.rule{height:20px}
  .trust{padding:22px 0}
  .trust-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .trust-label{grid-column:1/-1;width:auto;max-width:none}
  .logos{grid-column:1/-1;order:initial;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;justify-content:start}
  .logos span{font-size:13px!important}
  .trust-proof{grid-column:1/-1;text-align:left;margin:0}
  .trust-proof b{display:inline;font-size:15px;margin-right:7px}
  .section{padding:70px 0}
  .section-head{display:block;margin-bottom:30px}
  .section-head h2{font-size:clamp(34px,9vw,48px);margin-top:15px}
  .section-head p{font-size:13px;max-width:460px;margin:15px 0 0}
  .config-section{padding:70px 0 76px}
  .config-layout{min-height:0}
  .config-visual{min-height:0;aspect-ratio:1.13/1}
  .config-controls{padding:25px 20px}
  .config-top{gap:12px;font-size:8px}
  .option-block{margin-top:23px}
  .option-label{gap:10px;font-size:9px;flex-wrap:wrap}
  .option-label b{font-size:9px;text-align:right}
  .chips{gap:7px}
  .chip{padding:9px 10px;font-size:9px;min-height:40px}
  .material-swatches{margin-inline:-2px}
  .swatch{min-height:42px;padding:7px 9px 7px 7px}
  .estimate{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:16px;margin-top:22px}
  .estimate strong{font-size:25px}
  .estimate .btn{max-width:none;width:100%;min-height:48px}
  .estimate-note{max-width:360px}
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap{min-height:215px;padding:20px 14px 22px 0}
  .cap:not(:first-child){padding-left:14px}
  .cap:nth-child(3){padding-left:0}
  .cap h3{font-size:14px;line-height:1.35}
  .cap p{font-size:11px;line-height:1.65}
  .cap .arrow{right:12px;top:20px}
  .filters{max-width:calc(100vw - 40px);overflow-x:auto;scroll-snap-type:x proximity;gap:7px;padding:0 0 8px}
  .filter{flex:0 0 auto;min-height:42px;scroll-snap-align:start}
  .gallery-grid{grid-template-columns:1fr;gap:12px}
  .project{min-height:320px}
  .project-stack{grid-template-rows:repeat(2,minmax(235px,1fr));gap:12px}
  .project-info{left:17px;right:17px;bottom:16px}
  .gallery-caption{align-items:flex-start;flex-direction:column;gap:10px;line-height:1.6}
  .craft-layout{grid-template-columns:1fr;gap:36px}
  .craft-image{height:auto;min-height:300px;aspect-ratio:1.05/1;margin-right:12px}
  .material-card{right:-12px;bottom:18px;padding:15px 17px;min-width:138px}
  .material-card b{font-size:24px}
  .craft-copy .section-head{margin-bottom:23px}
  .spec{gap:18px;align-items:flex-start}
  .spec strong{font-size:12px}
  .spec span{text-align:right;max-width:55%;line-height:1.5}
  .freight{padding:15px;gap:11px}
  .freight p{font-size:11px}
  .proof{padding:64px 0}
  .proof-inner{grid-template-columns:1fr;gap:25px}
  .proof-stats{max-width:none}
  .proof-stat{padding:17px 8px 17px 0}
  .proof-stat:nth-child(even){padding-left:15px}
  .proof-stat b{font-size:30px}
  .quote{padding:68px 0}
  .quote-layout{grid-template-columns:1fr;gap:30px}
  .quote-intro h2{font-size:clamp(42px,12vw,55px);margin:17px 0}
  .quote-note{margin-top:20px}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:23px}
  .step{font-size:0;justify-content:center;min-width:0}
  .step b{width:32px;height:32px;font-size:10px}
  .step-line{width:auto;height:1px;margin:0 4px;min-width:4px}
  .form-panel{padding-top:18px}
  .form-panel h3{font-size:18px;line-height:1.3}
  .form-panel>p{font-size:12px;line-height:1.6}
  .fields{grid-template-columns:1fr;gap:14px}
  .field-wide,.consent-field,.drop,.file-list{grid-column:1}
  .field label{font-size:9px}
  .field input,.field select,.field textarea{padding:13px;min-height:48px}
  .quote-actions{gap:12px;align-items:flex-end}
  .quote-actions small{font-size:8px;line-height:1.5}
  .quote-actions .btn{min-width:120px;padding-inline:14px}
  footer{padding:52px 0 18px}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:34px}
  .footer-brand{grid-column:1/-1}
  .footer-col b{font-size:8px;margin-bottom:13px}
  .footer-col a{font-size:11px;line-height:1.45;margin:12px 0}
  .footer-note{font-size:11px}
  .newsletter{min-height:43px}
  .newsletter input{font-size:16px}
  .certs{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:17px 0}
  .cert{min-width:0;flex:auto;font-size:7px;line-height:1.45;gap:6px}
  .cert i{flex:none}
  .footer-bottom{display:grid;grid-template-columns:1fr;gap:10px;font-size:8px;line-height:1.5}
  .page-hero{min-height:0}
  .page-hero-inner{padding-top:72px;padding-bottom:76px}
  .page-hero h1{font-size:clamp(43px,11.2vw,66px);line-height:1.02;margin:19px 0 15px}
  .page-hero p{font-size:13px;line-height:1.7}
  .page-hero:after{width:430px;height:430px;right:-270px;opacity:.7}
  .page-index{right:20px;bottom:17px;font-size:8px}
  .page-section{padding:68px 0}
  .page-section-head{display:block;margin-bottom:27px}
  .page-section-head h2,.project-detail h2{font-size:clamp(34px,9vw,47px)}
  .page-section-head>p{font-size:12px;line-height:1.7;max-width:470px;margin:14px 0 0}
  .page-item{grid-template-columns:48px minmax(0,1fr) 22px;gap:10px;padding:19px 0}
  .page-number{font-size:8px;overflow-wrap:anywhere}
  .page-item h3{font-size:15px;line-height:1.35}
  .page-item p{font-size:12px;line-height:1.65}
  .page-cta{padding:58px 0}
  .page-cta h2{font-size:clamp(40px,11vw,58px)}
  .work-section{padding-top:29px}
  .work-disclaimer{font-size:8px;line-height:1.6}
  .work-grid{grid-template-columns:1fr;gap:14px}
  .work-photo{height:auto;aspect-ratio:1.2/1}
  .work-card-info{padding:16px}
  .work-card-info h2{font-size:16px;line-height:1.3}
  .project-hero .page-hero-inner{padding-bottom:60px}
  .project-hero .project-type{margin-top:27px;line-height:1.6}
  .project-photo-large{height:auto;aspect-ratio:1.15/1;margin-top:26px}
  .project-detail-inner{grid-template-columns:1fr;gap:12px}
  .project-detail-inner>div:last-child{padding-top:0}
  .legal-hero{min-height:0}
  .legal-copy article{padding:18px 0}
  .legal-copy h2{font-size:16px}
  .legal-copy p{font-size:12px;line-height:1.75}
}

@media(max-width:420px){
  .wrap{width:calc(100% - 32px)}
  .topline{font-size:7px}
  .hero{min-height:760px}
  .hero-inner{min-height:760px;padding-top:66px;padding-bottom:190px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:11px}
  .hero-actions .btn{width:100%;justify-content:space-between}
  .hero-note{left:16px;right:16px;bottom:94px;max-width:calc(100% - 32px)}
  .hero-stats{padding-inline:16px}
  .stat{gap:5px}
  .stat b{font-size:14px}
  .stat span{font-size:6px;letter-spacing:0}
  .stat.rule{margin-inline:1px}
  .section-head h2{font-size:35px}
  .config-visual{aspect-ratio:1/1}
  .config-controls{padding:22px 16px}
  .config-top{font-size:7px}
  .visual-caption{max-width:calc(100% - 24px);padding:9px;font-size:7px;letter-spacing:.06em}
  .visual-caption b{padding-left:6px}
  .visual-coordinate{font-size:8px;padding:7px 8px}
  .sign-preview{max-width:76%;padding:16px 12px}
  .sign-pylon{max-width:none}
  .cap-grid{grid-template-columns:1fr}
  .cap,.cap:not(:first-child),.cap:nth-child(3),.cap:nth-child(4){min-height:0;padding:20px 4px 22px 0;border-right:0;border-top:1px solid var(--darkline)}
  .cap:first-child{border-top:0}
  .cap-icon{margin:17px 0 13px}
  .cap p{max-width:340px}
  .project{min-height:285px}
  .project-stack{grid-template-rows:repeat(2,minmax(215px,1fr))}
  .craft-image{min-height:260px}
  .freight{align-items:flex-start}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .step-line{margin-inline:2px}
  .quote-actions{align-items:stretch;flex-direction:column}
  .quote-actions .btn{width:100%}
  .footer-top{grid-template-columns:1fr;gap:25px}
  .footer-brand{grid-column:auto}
  .certs{grid-template-columns:1fr 1fr}
  .page-item{grid-template-columns:40px minmax(0,1fr) 18px;gap:8px}
  .work-photo{aspect-ratio:1/1}
  .project-photo-large{aspect-ratio:1/1.05}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
