/* =========================================================
   HOME — tiles (full-bleed, stacked, 12px apart)
   ========================================================= */
.page-home main{padding-top:var(--nav-height)}
.tile{position:relative; display:flex; flex-direction:column; align-items:center; overflow:hidden; text-align:center;
  height:clamp(600px,62vw,740px); padding-top:clamp(44px,4.4vw,56px); isolation:isolate}
.tile + .tile,.tile + .tile-grid,.tile-grid + .band{margin-top:var(--tile-gap)}
.tile--frost{background:var(--surface-canvas)}
.tile--white{background:var(--white)}
.tile--wash{background:var(--surface-wash)}
.tile--dark{background:var(--onyx); color:var(--text-on-dark)}

.tile__copy{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:0 var(--gutter)}
.tile__eyebrow{font-size:var(--text-subheading); font-weight:600; letter-spacing:.011em; color:var(--text-secondary); margin-bottom:6px}
.tile__title{font-size:var(--text-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance}
.tile__title--hero{font-size:clamp(44px,6.2vw,88px); line-height:1.04; letter-spacing:-.03em}
.tile__title--sm{font-size:var(--text-heading); line-height:var(--lh-heading); letter-spacing:var(--ls-heading)}
.tile__tagline{margin-top:6px; font-size:var(--text-tagline); line-height:var(--lh-tagline); font-weight:400; letter-spacing:.004em; text-wrap:balance}
.tile__tagline--sm{font-size:var(--text-subheading); line-height:var(--lh-subheading)}
.tile__note{margin-top:var(--space-3); font-size:var(--text-body-sm); color:var(--text-secondary)}
.tile--dark .tile__note{color:var(--text-on-dark-secondary)}
.tile__ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); margin-top:var(--space-5)}

.tile__media{position:relative; flex:1; width:100%; min-height:0; margin:var(--space-8) 0 0; overflow:hidden}
.tile__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.js .tile__media img{transform:scale(1.08)}
.js .tile.is-in .tile__media img{transform:none}
.tile__media--fade{mask-image:linear-gradient(180deg,transparent 0,#000 34%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.tile__media--inset{flex:1; width:min(1040px,calc(100% - 2 * var(--gutter))); margin-bottom:clamp(32px,4vw,56px); border-radius:var(--radius-card)}

/* hero: the photograph opens out to full bleed as the page begins to move */
.tile--hero{height:max(640px,min(calc(100svh - var(--nav-height)),920px)); padding-top:clamp(40px,5.5vh,72px)}
.tile__media--hero{margin-top:clamp(28px,4vh,44px); --g:0;
  clip-path:inset(0 calc((1 - var(--g)) * max(var(--gutter),(100% - 1200px) / 2)) 0 round calc((1 - var(--g)) * 8px) calc((1 - var(--g)) * 8px) 0 0)}
.tile__media--hero img{object-position:50% 6%; transform-origin:50% 0}
.js .tile__media--hero img,.js .tile.is-in .tile__media--hero img{transform:scale(calc(1.08 - var(--g) * .08)); transition:none}
.js .tile--hero .tile__media--hero{opacity:0; animation:hero-photo 1.4s .25s var(--ease) forwards}
@keyframes hero-photo{from{opacity:0; transform:translateY(40px)}to{opacity:1; transform:none}}

.tile-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--tile-gap); padding:0 var(--tile-gap)}
.tile--half{height:clamp(520px,50vw,620px); padding-top:clamp(40px,4vw,52px)}
.tile-grid .tile + .tile{margin-top:0}

/* =========================================================
   Bands (sections) and shared section heads
   ========================================================= */
.band{padding:var(--section-y) 0}
.band--white{background:var(--white)}
.band--frost{background:var(--surface-canvas)}
.band__head{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:var(--content); margin:0 auto clamp(48px,5vw,80px); padding:0 var(--gutter)}
.band__head--left{align-items:flex-start; text-align:left; max-width:var(--wide); margin-bottom:var(--space-10)}
.band__kicker{font-size:var(--text-subheading); font-weight:600; letter-spacing:.011em; color:var(--text-secondary); margin-bottom:var(--space-2)}
.band__title{font-size:var(--text-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance}
.band__title--xl{font-size:clamp(44px,6vw,80px); line-height:1.04; letter-spacing:-.03em}
.band__lead{margin-top:var(--space-5); font-size:var(--text-subheading); line-height:1.38; color:var(--text-secondary); max-width:38ch; text-wrap:balance}
.band--cta .tile__ctas{margin-top:var(--space-8)}
.band--cta{padding-block:clamp(96px,11vw,180px)}

/* =========================================================
   HOME — statement + numbers
   ========================================================= */
.band__inner{max-width:var(--content); margin:0 auto; padding:0 var(--gutter)}
.band__eyebrow{font-size:var(--text-subheading); font-weight:600; letter-spacing:.011em; color:var(--text-secondary); margin-bottom:var(--space-5)}
.statement{font-family:var(--font-display); font-size:clamp(28px,3.6vw,48px); line-height:1.12; font-weight:600; letter-spacing:-.022em; text-wrap:pretty}
.statement .w{color:#d2d2d7; transition:color .4s linear}
.statement .w.is-lit{color:var(--text-primary)}
.numbers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); margin:clamp(64px,8vw,112px) 0 0; padding-top:var(--space-10); border-top:1px solid var(--border-hairline)}
.numbers__item{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:var(--space-2)}
.numbers dd{margin:0; font-family:var(--font-display); font-size:clamp(44px,5.4vw,72px); line-height:1; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.numbers dd small{font-size:.38em; font-weight:600; letter-spacing:-.01em; margin-left:.12em}
.numbers dt{font-size:var(--text-body); color:var(--text-secondary)}

/* =========================================================
   HOME — process: an exploded driveway, taken apart as you scroll
   ========================================================= */
.build{background:var(--onyx); color:var(--text-on-dark); padding-top:var(--section-y); overflow:clip}
.build .band__kicker,.build .band__lead{color:var(--mist)}
.build__head{margin-bottom:0}

/* without JS (or with reduced motion) everything sits in normal flow, fully exploded */
.build__track{position:relative}
.build__stage{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr); align-items:center; gap:clamp(24px,4vw,72px);
  max-width:1240px; margin:0 auto; padding:clamp(48px,6vw,96px) var(--gutter) var(--section-y)}
.js .build__track{height:420vh}
.js .build__stage{position:sticky; top:0; height:100vh; height:100svh; padding:calc(var(--nav-height) + 2vh) var(--gutter) 2vh}

.build__scene{position:relative; height:min(80vh,740px); min-height:440px; display:grid; place-items:center; --W:clamp(200px,22vw,340px); --gap:calc(var(--W) * .2)}
.build__view{position:relative; width:var(--W); height:var(--W); margin-right:clamp(120px,15vw,220px); margin-top:calc(var(--W) * .62)}

.stack{position:absolute; inset:0; --e:1; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(45deg)}
.js .stack{--e:0}
.slab{position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(calc(var(--z) + var(--e) * var(--gap) * var(--i)))}
.slab__top,.slab__side{position:absolute; background-image:var(--tex); background-size:cover; background-position:center; transition:opacity .5s var(--ease)}
.slab__top{inset:0; transform:translateZ(var(--t))}
.slab__top::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%,rgba(0,0,0,.18))}
.slab__side--s{left:0; top:100%; width:100%; height:var(--t); transform-origin:top; transform:rotateX(90deg);
  background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),var(--side,var(--tex))}
.slab__side--e{left:100%; top:0; width:var(--t); height:100%; transform-origin:left; transform:rotateY(-90deg);
  background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42)),var(--side,var(--tex))}
.slab__pin{position:absolute; left:50%; top:0; width:1px; height:1px}
.slab.is-dim > *{opacity:.16}

.slab--soil{--i:0; --z:0px; --t:calc(var(--W) * .2); --tex:url("../img/tex-soil.webp")}
.slab--membrane{--i:1; --z:calc(var(--W) * .2); --t:3px; --tex:repeating-linear-gradient(45deg,#ececf0 0 2px,#d5d5da 2px 4px)}
.slab--type1{--i:2; --z:calc(var(--W) * .2 + 3px); --t:calc(var(--W) * .15); --tex:url("../img/tex-type1.webp")}
.slab--sand{--i:3; --z:calc(var(--W) * .35 + 3px); --t:calc(var(--W) * .05); --tex:url("../img/tex-sand.webp")}
.slab--blocks{--i:4; --z:calc(var(--W) * .4 + 3px); --t:calc(var(--W) * .05); --tex:url("../img/tex-blocks.webp");
  --side:repeating-linear-gradient(90deg,#55565b 0 calc(var(--W) * .09),#2a2a2d calc(var(--W) * .09) calc(var(--W) * .095))}

.build__shadow{position:absolute; left:50%; top:62%; width:210%; height:120%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),rgba(255,255,255,0))}

/* callouts: positioned each frame against the pin on each layer's front corner */
.build__labels{display:none; position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none}
.js .build__labels{display:block}
.build__labels li{position:absolute; left:0; top:0; display:grid; gap:1px; transform:translate(var(--lx,0),calc(var(--ly,0) - 50%)); opacity:var(--lo,0);
  white-space:nowrap; transition:opacity .3s linear}
.build__labels li::before{content:""; position:absolute; right:calc(100% + 10px); top:50%; width:var(--lw,0px); height:1px; background:rgba(255,255,255,.3)}
.build__labels li::after{content:""; position:absolute; right:calc(100% + 10px + var(--lw,0px) - 3px); top:calc(50% - 2.5px); width:5px; height:5px; border-radius:50%; background:var(--frost)}
.build__labels strong{font-size:var(--text-body-sm); font-weight:600; color:var(--frost)}
.build__labels span{font-size:var(--text-caption); color:var(--mist)}

.build__caption{position:absolute; left:50%; bottom:2%; transform:translateX(-50%); font-size:var(--text-body-sm); color:var(--mist); white-space:nowrap; opacity:var(--co,0); transition:opacity .3s linear}
.build__caption-num{color:var(--frost); font-weight:600}

/* step panel */
.build__panel{position:relative; padding-left:28px}
.build__rail{position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden}
.build__rail span{display:block; width:100%; height:calc(var(--p,1) * 100%); background:var(--frost)}
.build__steps{margin:0; padding:0; list-style:none}
.build__step-head{display:flex; align-items:baseline; gap:14px; width:100%; padding:12px 0; border:0; background:none; color:var(--graphite); text-align:left; cursor:pointer; transition:color .4s var(--ease)}
.build__step-head:hover{color:var(--mist)}
.build__step-num{font-size:var(--text-body-sm); font-weight:600; font-variant-numeric:tabular-nums}
.build__step-title{font-family:var(--font-display); font-size:clamp(24px,2.4vw,34px); line-height:1.1; font-weight:600; letter-spacing:-.018em}
.build__step-body{overflow:hidden}
.build__step-body p{font-size:var(--text-body); line-height:var(--lh-body); color:#a1a1a6; max-width:38ch}
.build__step-body .feature-list{margin:var(--space-4) 0 var(--space-2)}
.build__step-body .feature-list li{border-color:rgba(255,255,255,.22); color:var(--frost); font-size:12px; padding:5px 12px}
.build__step.is-active .build__step-head,.no-steps .build__step-head{color:var(--frost)}
.js .build__step-body{max-height:0; opacity:0; transition:max-height .6s var(--ease), opacity .4s var(--ease)}
.js .build__step.is-active .build__step-body{max-height:260px; opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .build__track{height:auto}
  .js .build__stage{position:static; height:auto; padding:clamp(48px,6vw,96px) var(--gutter) var(--section-y)}
  .js .stack{--e:1}
  .js .build__step-body{max-height:none; opacity:1}
  .build__step-head{color:var(--frost); cursor:default}
}


/* =========================================================
   HOME — projects carousel
   ========================================================= */
.carousel{--inset:max(var(--gutter),calc((100% - var(--wide)) / 2 + var(--gutter)))}
.carousel__track{display:flex; gap:20px; margin:0; padding:var(--space-2) var(--inset) var(--space-6); list-style:none; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--inset); scrollbar-width:none; overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{display:none}
.pcard{position:relative; flex:0 0 clamp(280px,29vw,400px); height:clamp(460px,46vw,600px); overflow:hidden; border-radius:var(--radius-card); background:var(--carbon); color:var(--white); scroll-snap-align:start; isolation:isolate}
.pcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.pcard::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 72%,rgba(0,0,0,.45) 100%)}
.pcard:hover img{transform:scale(1.04)}
.pcard__copy{padding:var(--space-8) var(--space-8) 0}
.pcard__kicker{font-size:var(--text-caption); font-weight:600; letter-spacing:0; opacity:.86; margin-bottom:6px}
.pcard__title{font-size:var(--text-heading-sm); line-height:var(--lh-heading-sm); letter-spacing:var(--ls-heading-sm); text-wrap:balance}
.pcard__meta{position:absolute; left:var(--space-8); bottom:var(--space-6); font-size:var(--text-body-sm); opacity:.88}
.carousel__controls{display:flex; justify-content:flex-end; gap:18px; padding:0 var(--inset)}
.carousel__btn{display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--pebble); color:var(--carbon); cursor:pointer; transition:background-color var(--duration-fast), opacity var(--duration-fast)}
.carousel__btn:hover{background:#dfdfe4}
.carousel__btn:disabled{opacity:.42; cursor:default}
.carousel__btn svg{width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* =========================================================
   HOME — reviews + features
   ========================================================= */

.features{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-10) var(--space-8); max-width:var(--wide); margin:0 auto; padding:0 var(--gutter); list-style:none; text-align:center}
.features li{display:flex; flex-direction:column; align-items:center; gap:var(--space-2)}
.features svg{width:44px; height:44px; margin-bottom:var(--space-3); fill:none; stroke:var(--decor); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.features h3{font-size:var(--text-subheading); line-height:var(--lh-subheading); letter-spacing:var(--ls-subheading)}
.features p{font-size:var(--text-body); color:var(--text-secondary); max-width:26ch}

/* =========================================================
   INNER — services
   ========================================================= */
.service-section{padding:var(--section-y) 0; background:var(--white)}
.service-section__head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-3); margin-bottom:clamp(40px,5vw,72px)}
.service-section__title{display:flex; flex-direction:column; align-items:center; gap:var(--space-4)}
.service-section__price{font-size:var(--text-subheading); color:var(--text-secondary)}
.service-section .grid-2{align-items:center; gap:clamp(32px,5vw,80px)}
.service-section .card{border:0; padding:0}
.service-section .card .d-sm{font-size:var(--text-heading); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin-bottom:var(--space-5)}
.service-section .card .body-sm{font-size:var(--text-body)}
.materials__figure{position:relative; margin:0; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3; background:var(--pebble)}
.materials__figure img{width:100%; height:100%; object-fit:cover}
.materials__figure--band{aspect-ratio:21/8}

/* =========================================================
   INNER — projects
   ========================================================= */
.proj{display:flex; flex-direction:column; gap:var(--space-4)}
.proj__media{overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3; background:var(--pebble)}
.proj__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.proj:hover .proj__media img{transform:scale(1.04)}
.proj__body{display:flex; flex-direction:column; gap:4px}
.proj__body h3{font-size:var(--text-subheading); line-height:var(--lh-subheading); letter-spacing:var(--ls-subheading)}
.proj__body p{font-size:var(--text-body-sm); color:var(--text-secondary)}

.ba{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6)}
.ba figure{margin:0}
.ba__img{overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3}
.ba__img img{width:100%; height:100%; object-fit:cover}
.ba figcaption{display:grid; gap:var(--space-2); margin-top:var(--space-4)}
.ba__stage{font-size:var(--text-body); font-weight:600; color:var(--text-primary)}
.ba__note{font-size:var(--text-body); color:var(--text-secondary); max-width:46ch}

.compare{position:relative; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:16/10; background:var(--pebble); user-select:none; touch-action:pan-y; --pos:50%}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.compare__after{clip-path:inset(0 0 0 var(--pos))}
.compare__handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--white)}
.compare__knob{position:absolute; top:50%; left:50%; display:grid; place-items:center; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:var(--radius-pill);
  background:rgba(245,245,247,.85); color:var(--carbon); font-size:11px; letter-spacing:-1px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.compare__tag{position:absolute; top:var(--space-5); padding:5px 12px; border-radius:var(--radius-pill); background:rgba(245,245,247,.78); color:var(--carbon); font-size:12px; font-weight:600;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.compare__tag--before{left:var(--space-5)}
.compare__tag--after{right:var(--space-5)}
.compare__range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.compare:has(.compare__range:focus-visible) .compare__knob{outline:2px solid var(--focus); outline-offset:3px}
.compare-notes{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); margin-top:var(--space-6)}

/* =========================================================
   INNER — about
   ========================================================= */
.about-intro{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-6); max-width:var(--content); margin:0 auto}
.about-intro .label{font-size:var(--text-subheading); font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-3)}
.about-intro__copy{display:grid; gap:var(--space-4); justify-items:center}
.about-intro__copy .lead{color:var(--text-primary); max-width:36ch}
.about-specs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); max-width:var(--content); margin:clamp(64px,7vw,112px) auto 0; padding-top:var(--space-10); border-top:1px solid var(--border-hairline)}
.about-spec{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:var(--space-2)}
.about-spec strong{font-family:var(--font-display); font-size:clamp(40px,4.6vw,64px); line-height:1; font-weight:600; letter-spacing:-.03em}
.about-spec span{font-size:var(--text-body); color:var(--text-secondary)}
.crew-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8)}
.crew-card{margin:0}
.crew-card__image{overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/5; background:var(--pebble)}
.crew-card__image img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.crew-card:hover .crew-card__image img{transform:scale(1.03)}
.crew-card figcaption{padding-top:var(--space-5)}
.crew-card__role{font-size:var(--text-caption); font-weight:600; color:var(--text-secondary)}
.crew-card h3{margin:4px 0 var(--space-2); font-size:var(--text-heading-sm); letter-spacing:var(--ls-heading-sm)}
.crew-card figcaption p:last-child{font-size:var(--text-body); color:var(--text-secondary)}
.about-demo-note{margin-top:var(--space-12); text-align:center; font-size:var(--text-caption); color:var(--text-secondary)}
.about-values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-10) var(--space-8)}
.about-value{padding-top:var(--space-6); border-top:1px solid var(--border-hairline)}
.about-value__number{font-family:var(--font-display); font-size:var(--text-heading); font-weight:600; color:var(--decor); letter-spacing:-.02em; margin-bottom:var(--space-6)}
.about-value .d-sm{margin-bottom:var(--space-3)}
.about-value p:last-child{color:var(--text-secondary)}

/* =========================================================
   INNER — quote form
   ========================================================= */
.form{padding:0}
.form .d-md{font-size:var(--text-heading)}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-size:var(--text-caption); color:var(--text-secondary)}
.field input,.field select,.field textarea{width:100%; min-height:52px; padding:14px 16px; background:var(--white); border:1px solid var(--hairline);
  border-radius:var(--radius-card); font-size:var(--text-body); transition:border-color var(--duration-fast), box-shadow var(--duration-fast)}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 1px var(--focus)}
.field :disabled{cursor:not-allowed; background:var(--frost); color:var(--text-secondary)}
.form__actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); margin-top:var(--space-8)}
.form__note{font-size:var(--text-caption); color:var(--text-secondary); max-width:42ch}

/* =========================================================
   INNER — privacy panel (sits where the photograph would)
   ========================================================= */
.privacy-hero__panel{width:min(640px,calc(100% - 2 * var(--gutter))); margin:0 auto clamp(56px,6vw,96px); padding:clamp(28px,4vw,48px); text-align:left; background:var(--white); border-radius:var(--radius-card)}
.privacy-hero__mark{width:40px; height:40px; margin-bottom:var(--space-5); color:var(--decor)}
.privacy-hero__mark svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.privacy-hero__panel .label{font-size:var(--text-body); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-3)}
.privacy-hero__list div{display:grid; gap:2px; padding:var(--space-4) 0; border-top:1px solid var(--border-hairline)}
.privacy-hero__list strong{font-size:var(--text-body); font-weight:600}
.privacy-hero__list span{font-size:var(--text-body-sm); color:var(--text-secondary)}
.privacy-hero__foot{margin-top:var(--space-4); font-size:var(--text-caption); color:var(--text-secondary)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1068px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers,.about-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:833px){
  .tile{height:auto; min-height:560px}
  .tile__media{flex:none; height:clamp(300px,72vw,520px)}
  .tile--hero{height:auto; min-height:0}
  .tile__media--hero{height:clamp(360px,90vw,560px)}
  .tile-grid{grid-template-columns:1fr; padding:0}
  .tile--half{height:auto; min-height:0}
  .tile--half .tile__media{height:clamp(280px,70vw,440px)}
  .tile__media--inset{height:clamp(260px,62vw,480px); flex:none}
  .about-values,.crew-grid{grid-template-columns:1fr 1fr}
  .compare-notes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tile__ctas{gap:var(--space-3)}
  .tile__ctas .btn{padding:10px 18px}
  .numbers,.about-specs{grid-template-columns:1fr 1fr; gap:var(--space-8) var(--space-4)}
  .features{grid-template-columns:1fr}
  .about-values,.crew-grid{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .compare{aspect-ratio:4/3.4}
  .pcard{flex-basis:82%}
  .pcard__copy{padding:var(--space-6) var(--space-6) 0}
  .pcard__meta{left:var(--space-6)}
}

/* process build on phones: the slab sits on top, one step at a time underneath */
@media (max-width:833px){
  .build__stage{grid-template-columns:1fr; gap:var(--space-4)}
  .js .build__stage{grid-template-rows:minmax(0,1fr) auto; align-items:stretch; padding-bottom:var(--space-6)}
  .build__scene{height:auto; min-height:360px; --W:min(34vw,24vh); justify-items:start}
  .js .build__scene{min-height:0}
  .build__view{margin:calc(var(--W) * .5) 0 0 calc(var(--W) * .22)}
  .build__labels span{display:none}
  .build__labels strong{font-size:12px}
  .build__caption{font-size:13px}
  .build__panel{padding-left:0}
  .build__rail{position:relative; top:auto; bottom:auto; width:100%; height:2px; margin-bottom:var(--space-2)}
  .build__rail span{height:100%; width:calc(var(--p,1) * 100%)}
  .js .build__step:not(.is-active){display:none}
  .build__step-head{padding:8px 0}
  .build__step-title{font-size:26px}
}

/* =========================================================
   HOME — finish picker (one stage, a frosted pill of swatches)
   ========================================================= */
.picker{width:min(var(--wide),calc(100% - 2 * var(--gutter))); margin:0 auto}
.picker__stage{position:relative; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:16/8.2; background:#e9e8e6}
.picker__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .7s var(--ease), transform 1.2s var(--ease)}
.picker__img.is-active{opacity:1; transform:none}
.picker__pill{position:absolute; left:50%; bottom:var(--space-6); transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 10px 8px 18px;
  background:rgba(250,250,252,.78); border-radius:var(--radius-pill); -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px)}
.picker__name{min-width:9ch; margin-right:4px; font-size:var(--text-body-sm); font-weight:600}
.picker__dot{position:relative; width:26px; height:26px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--c); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:transform var(--duration-fast) var(--ease)}
.picker__dot::after{content:""; position:absolute; inset:-4px; border-radius:inherit; border:2px solid transparent; transition:border-color var(--duration-fast)}
.picker__dot[aria-checked="true"]::after{border-color:var(--carbon)}
.picker__dot:hover{transform:scale(1.08)}
.picker__info{max-width:var(--content); margin:var(--space-10) auto 0}
.picker__panel{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); margin:0; animation:panel-in .6s var(--ease)}
.picker__panel[hidden]{display:none}
.picker__panel div{padding-top:var(--space-4); border-top:1px solid var(--border-hairline)}
.picker__panel dt{font-size:var(--text-caption); color:var(--text-secondary); margin-bottom:4px}
.picker__panel dd{margin:0; font-size:var(--text-body); font-weight:600; letter-spacing:-.01em}
@keyframes panel-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* =========================================================
   HOME / SERVICES — compare surfaces
   ========================================================= */
.ctable{max-width:var(--wide); margin:0 auto; padding:0 var(--gutter); overflow-x:auto; scrollbar-width:none; outline-offset:6px}
.ctable::-webkit-scrollbar{display:none}
.ctable__grid{display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); grid-template-rows:repeat(9,auto); column-gap:clamp(16px,3vw,48px)}
.ctable__col{display:grid; grid-row:span 9; grid-template-rows:subgrid; justify-items:center; text-align:center}
.ctable__col img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-card); margin-bottom:var(--space-6)}
.ctable__col h3{font-size:var(--text-subheading); line-height:var(--lh-subheading); letter-spacing:var(--ls-subheading)}
.ctable__price{margin:6px 0 var(--space-4); font-size:var(--text-body); color:var(--text-secondary)}
.ctable__col .btn{align-self:start; justify-self:center; margin-bottom:var(--space-8)}
.ctable__col > p:not(.ctable__price){display:grid; gap:2px; align-content:start; width:100%; padding:var(--space-5) 0; border-top:1px solid var(--border-hairline); font-size:var(--text-body-sm); color:var(--text-secondary)}
.ctable__col > p strong{font-size:var(--text-body); font-weight:600; color:var(--text-primary)}
.fine-note{max-width:var(--content); margin:var(--space-10) auto 0; padding:0 var(--gutter); text-align:center; font-size:var(--text-caption); color:var(--text-secondary)}

/* =========================================================
   HOME — reviews, one story at a time
   ========================================================= */
.stories{display:grid; grid-template-columns:1fr; max-width:var(--wide); margin:0 auto; padding:0 var(--gutter)}
.story{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); margin:0; grid-area:1 / 1}
.story[hidden]{display:none}
.story.is-active{animation:panel-in .7s var(--ease)}
.story__media{overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3.3; background:var(--pebble)}
.story__media img{width:100%; height:100%; object-fit:cover}
.story__kicker{font-size:var(--text-body-sm); font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-4)}
.story blockquote{margin:0 0 var(--space-8)}
.story blockquote p{font-family:var(--font-display); font-size:clamp(28px,3.2vw,44px); line-height:1.12; font-weight:600; letter-spacing:-.022em; text-wrap:balance}
.story figcaption{display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-body-sm); color:var(--text-secondary)}
.story figcaption img{width:44px; height:44px; border-radius:var(--radius-pill); object-fit:cover; object-position:50% 20%}
.story figcaption span{display:grid}
.story figcaption strong{color:var(--text-primary); font-weight:600}
.stories__nav{display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-8)}
.stories__pick{position:relative; width:48px; height:48px; padding:0; border:0; border-radius:var(--radius-pill); background:none; cursor:pointer; opacity:.5; transition:opacity var(--duration-fast)}
.stories__pick img{width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:50% 20%}
.stories__pick::after{content:""; position:absolute; inset:-4px; border-radius:inherit; border:2px solid transparent}
.stories__pick[aria-pressed="true"]{opacity:1}
.stories__pick[aria-pressed="true"]::after{border-color:var(--carbon)}
.stories__pick:hover{opacity:1}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:var(--content); margin:0 auto; padding:0 var(--gutter)}
.faq__item{border-bottom:1px solid var(--border-hairline)}
.faq__item summary{position:relative; display:block; padding:var(--space-6) 48px var(--space-6) 0; font-family:var(--font-display); font-size:var(--text-subheading); font-weight:600; letter-spacing:var(--ls-subheading); cursor:pointer; list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before,.faq__item summary::after{content:""; position:absolute; right:8px; top:50%; width:14px; height:1.5px; background:var(--carbon); border-radius:1px; transition:transform .35s var(--ease)}
.faq__item summary::after{transform:rotate(90deg)}
.faq__item[open] summary::after{transform:rotate(0)}
.faq__item summary:hover{color:var(--action-link)}
.faq__body{padding:0 48px var(--space-6) 0}
.faq__body p{font-size:var(--text-body); color:var(--text-secondary); max-width:62ch}
.faq__item[open] .faq__body{animation:panel-in .45s var(--ease)}

@media (max-width:833px){
  .picker__stage{aspect-ratio:4/3.2}
  .picker__pill{bottom:var(--space-4); padding:6px 8px 6px 14px; gap:8px}
  .picker__name{display:none}
  .picker__panel{grid-template-columns:1fr 1fr}
  .story{grid-template-columns:1fr; gap:var(--space-8)}
  .stories__nav{justify-content:center}
  .ctable{padding-right:0; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter)}
  .ctable__col{scroll-snap-align:start}
  .ctable__grid{grid-template-columns:repeat(4,minmax(220px,64vw)); padding-right:var(--gutter)}
}

/* =========================================================
   SERVICES — each surface as a product module: wide photograph, then specs
   ========================================================= */
.service-section .grid-2{grid-template-columns:1fr; gap:clamp(32px,4vw,56px)}
.service-section .materials__figure{order:-1; aspect-ratio:21/9; min-height:0}
.service-section .materials__figure img{transition:transform 1.6s var(--ease)}
.service-section .materials__figure.is-in img{transform:none}
.js .service-section .materials__figure img{transform:scale(1.06)}
.js .service-section .materials__figure.is-in img{transform:none}
.service-section .card{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:clamp(32px,6vw,96px); align-items:start; max-width:var(--content); margin:0 auto; width:100%}
.service-section .card > .d-sm{grid-row:1 / span 3; margin:0}
.service-section .card > :not(.d-sm){grid-column:2}
.service-section .card .body-sm{font-size:var(--text-body)}
.service-section .card .body-sm + .body-sm{margin-top:var(--space-4)!important; color:var(--text-primary)}
.service-section .feature-list{margin-top:var(--space-6)}
.service-section__title .icon-badge{width:48px; height:48px}
.service-section__title .icon-badge svg{width:40px; height:40px}

/* =========================================================
   PROJECTS — filter chips
   ========================================================= */
.filter{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2); margin:0 auto var(--space-12)}
.filter button{padding:8px 18px; border:1px solid var(--border-hairline); border-radius:var(--radius-pill); background:var(--white); font-size:var(--text-body-sm); cursor:pointer;
  transition:background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast)}
.filter button:hover{border-color:var(--carbon)}
.filter button[aria-pressed="true"]{background:var(--carbon); border-color:var(--carbon); color:var(--white)}
.filter__status{flex-basis:100%; text-align:center; margin-top:var(--space-2); font-size:var(--text-caption); color:var(--text-secondary)}
.proj[hidden]{display:none}

/* =========================================================
   PROJECTS — where we work
   ========================================================= */
.area{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr); gap:clamp(32px,5vw,72px); align-items:center}
.area__map{margin:0; overflow:hidden; border-radius:var(--radius-card); background:var(--frost)}
.area__map svg{display:block; width:100%; height:auto}
.area__sea{fill:#e3ecf6}
.area__river{fill:none; stroke:#c9daee; stroke-width:7; stroke-linecap:round}
.area__ring{fill:none; stroke:var(--decor); stroke-width:1; stroke-dasharray:4 6; opacity:.6}
.area__ring-label{font-family:var(--font-text); font-size:12px; fill:var(--decor); text-anchor:middle}
.area__towns circle{fill:var(--white); stroke:var(--carbon); stroke-width:1.5}
.area__towns text{font-family:var(--font-text); font-size:14px; fill:var(--carbon); letter-spacing:-.01em}
.area__dot{fill:var(--apple-blue); stroke:var(--white); stroke-width:2.5}
.area__pulse{fill:var(--signal-blue); opacity:.25; transform-box:fill-box; transform-origin:center; animation:area-pulse 2.6s var(--ease) infinite}
.area__home text{font-family:var(--font-text); font-size:15px; font-weight:600; fill:var(--carbon)}
@keyframes area-pulse{0%{transform:scale(.6); opacity:.45}100%{transform:scale(3); opacity:0}}
.area__list{display:grid; gap:var(--space-6)}
.area__list div{padding-top:var(--space-4); border-top:1px solid var(--border-hairline)}
.area__list h3{font-size:var(--text-subheading); margin-bottom:4px}
.area__list p{color:var(--text-secondary)}

@media (max-width:833px){
  .service-section .materials__figure{aspect-ratio:4/3}
  .service-section .card{grid-template-columns:1fr}
  .service-section .card > .d-sm{grid-row:auto; margin-bottom:var(--space-4)}
  .service-section .card > :not(.d-sm){grid-column:auto}
  .area{grid-template-columns:1fr}
  .area__list{grid-template-columns:1fr 1fr}
}

/* =========================================================
   QUOTE — configurator: the finish on the left, choices on the right
   ========================================================= */
.config__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:clamp(32px,5vw,80px); align-items:start}
.config__visual{position:sticky; top:calc(var(--nav-height) + var(--lnav-height) + 24px)}
.config__stage{position:relative; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3.3; background:var(--pebble)}
.config__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .6s var(--ease), transform 1.1s var(--ease)}
.config__img.is-active{opacity:1; transform:none}
.config__summary{display:grid; gap:2px; margin-top:var(--space-5); padding:var(--space-5) var(--space-6); background:var(--frost); border-radius:var(--radius-card)}
.config__summary-label{font-size:var(--text-caption); color:var(--text-secondary)}
.config__total{font-family:var(--font-display); font-size:clamp(28px,2.6vw,36px); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.config__summary-note{font-size:var(--text-body-sm); color:var(--text-secondary)}
.config__intro{margin:var(--space-3) 0 var(--space-10); font-size:var(--text-body); color:var(--text-secondary)}
.config__group{margin:0 0 var(--space-10); padding:0; border:0; display:grid; gap:var(--space-3)}
.config__group legend{padding:0; margin-bottom:var(--space-4); font-family:var(--font-display); font-size:var(--text-heading-sm); font-weight:600; letter-spacing:var(--ls-heading-sm)}
.config__group legend span{color:var(--text-secondary)}
.opt{position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:16px 18px; border:1px solid var(--mist); border-radius:var(--radius-card); cursor:pointer;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast)}
.opt:hover{border-color:var(--carbon)}
.opt input,.chip input{position:absolute; opacity:0; pointer-events:none}
.opt__body{display:grid; gap:2px}
.opt__body strong{font-size:var(--text-body); font-weight:600}
.opt__body span{font-size:var(--text-body-sm); color:var(--text-secondary)}
.opt__price{font-size:var(--text-body-sm); white-space:nowrap}
.opt:has(input:checked){border-color:var(--apple-blue); box-shadow:inset 0 0 0 1px var(--apple-blue)}
.opt:has(input:focus-visible),.chip:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:3px}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.chip{position:relative; cursor:pointer}
.chip span{display:block; padding:12px 18px; border:1px solid var(--mist); border-radius:var(--radius-card); font-size:var(--text-body-sm); transition:border-color var(--duration-fast), box-shadow var(--duration-fast)}
.chip:hover span{border-color:var(--carbon)}
.chip input:checked + span{border-color:var(--apple-blue); box-shadow:inset 0 0 0 1px var(--apple-blue)}
.config__fine{margin:-16px 0 var(--space-12); font-size:var(--text-caption); color:var(--text-secondary)}
.config__form{padding-top:var(--space-10); border-top:1px solid var(--border-hairline)}
.config__form-title{font-size:var(--text-heading-sm); margin-bottom:var(--space-2)}
.config__form .body-sm{margin-bottom:var(--space-6); font-size:var(--text-body-sm)}
.config__features{margin-top:clamp(64px,8vw,120px); padding-top:var(--space-12); border-top:1px solid var(--border-hairline); grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:833px){
  .config__grid{grid-template-columns:1fr}
  .config__visual{display:contents}
  .config__stage{order:1}
  .config__steps{order:2}
  .config__summary{order:3; position:sticky; bottom:12px; z-index:5; margin-top:0; background:rgba(245,245,247,.86); border:1px solid rgba(0,0,0,.06);
    -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px)}
  .config__features{grid-template-columns:1fr}
}

/* map labels stay legible when the whole map shrinks to a phone */
@media (max-width:640px){
  .area__towns text{font-size:32px}
  .area__minor text{display:none}
  .area__towns circle{r:8}
  .area__home text{font-size:34px; text-anchor:middle; transform:translate(14px,46px)}
  .area__sub{display:none}
  .area__ring-label{font-size:26px}
  .area__list{grid-template-columns:1fr}
}

/* keep the crew's faces in frame however wide the tile gets */
.tile__media img[src*="about-team"]{object-position:50% 10%; transform-origin:50% 15%}