/* ==============================================================
   WS Flooring LLC | styles
   World: a stone gallery. Large surfaces are slabs cut from one
   block and opened like a book, so the veining mirrors on a seam.
   Contents
     1. Font and tokens      7. Portfolio and lightbox
     2. Base                 8. Reviews
     3. Buttons and links    9. Why choose us
     4. Header and menu     10. How it works (3D stack)
     5. Hero                11. Quote form, areas, map
     6. About, Services     12. FAQ, footer, dock, legal, 404
   ============================================================== */

/* 1. Font and tokens ------------------------------------------- */
@font-face{
  font-family:"Kumbh Sans";
  src:url("../fonts/kumbh-sans-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --stone:#F3F1EC;
  --stone-2:#EAE7E0;
  --stone-3:#D9D5CC;
  --ink:#131415;
  --ink-2:#3A3D3F;
  --ink-3:#575B5D;
  --coal:#101112;
  --coal-2:#181A1B;
  --coal-3:#25282A;
  --on-coal:#F3F1EC;
  --on-coal-2:#BDBAB3;
  --bronze:#9A7445;
  --bronze-deep:#7A5A30;
  --bronze-light:#CDAA7A;
  --alert:#A3341F;
  --alert-on-coal:#F2A894;

  --font:"Kumbh Sans","Century Gothic","Avenir Next",Avenir,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  --gutter:clamp(20px,3.9vw,56px);
  --frame:clamp(10px,1.95vw,28px);
  --sec-y:clamp(72px,9.6vw,148px);
  --header-h:96px;
  --radius:3px;

  /* per-surface roles, overridden on coal */
  --bg:var(--stone);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --rule:rgba(19,20,21,.14);
  --tick:var(--bronze);
  --focus:var(--bronze-deep);
}

/* 2. Base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  scrollbar-color:#8E8A82 var(--stone);
  background:var(--coal);
}
body{
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,picture,svg,canvas,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
h1,h2,h3{font-weight:300;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--ink);color:var(--stone)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--stone);padding:12px 20px;border-radius:999px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:16px}

.wrap{width:100%;max-width:calc(1328px + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

h2{font-size:clamp(2.125rem,4.45vw,4rem);line-height:1.05;letter-spacing:-.035em}
h3{font-size:clamp(1.375rem,1.95vw,1.75rem);line-height:1.15;letter-spacing:-.02em;font-weight:400}

/* A section is one surface. The hairline frame runs down both page edges,
   with a bronze tick where it meets the top of each surface. */
.sec{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg);isolation:isolate}
.sec::after{
  content:"";position:absolute;z-index:1;inset:0 calc(var(--frame) - 3px);pointer-events:none;
  background:
    linear-gradient(var(--tick),var(--tick)) 0 0/7px 7px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 0/7px 7px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 3px 0/1px 100% no-repeat,
    linear-gradient(var(--rule),var(--rule)) calc(100% - 3px) 0/1px 100% no-repeat;
}
.sec > .wrap{position:relative;z-index:2}
.sec--stone-2{--bg:var(--stone-2)}
.sec--coal{
  --bg:var(--coal);--fg:var(--on-coal);--fg-2:var(--on-coal-2);
  --rule:rgba(243,241,236,.15);--tick:var(--bronze-light);--focus:var(--bronze-light);
}
.sec--coal ::selection{background:var(--stone);color:var(--ink)}
:where(.sec) p{color:var(--fg-2)}
.sec__head{max-width:900px;margin-bottom:clamp(36px,4.6vw,68px)}
.sec__cta{margin-top:clamp(40px,5vw,72px);display:flex;justify-content:center}

/* Bookmatched slab behind a surface: two halves of one image, the right one mirrored */
.slabs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.slabs i{position:absolute;top:0;bottom:0;width:50%;background-size:cover;background-repeat:no-repeat;background-position:100% 50%}
.slabs i:first-child{left:0}
.slabs i:last-child{right:0;scale:-1 1}
.slabs--black i{background-image:url("../img/slab-black-2000.jpg");background-image:image-set(url("../img/slab-black-2000.avif") type("image/avif"),url("../img/slab-black-2000.jpg") type("image/jpeg"))}
.slabs--white i{background-image:url("../img/slab-white-2000.jpg");background-image:image-set(url("../img/slab-white-2000.avif") type("image/avif"),url("../img/slab-white-2000.jpg") type("image/jpeg"))}

/* The stone's own motion: surfaces open from the seam, like a book */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .open{animation:open-book linear both;animation-timeline:view();animation-range:entry 4% entry 62%}
    .open img{animation:settle linear both;animation-timeline:view();animation-range:entry 4% cover 38%}
  }
}
@keyframes open-book{from{clip-path:inset(0 42% 0 42%)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{scale:1.12}to{scale:1}}

/* 3. Buttons and links ------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:7px 7px 7px 28px;border-radius:999px;
  font-size:.875rem;font-weight:600;letter-spacing:.07em;line-height:1.2;text-align:left;
  transition:background-color .35s var(--ease),color .35s var(--ease),scale .2s var(--ease);
}
.btn__badge{
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--bronze);color:#fff;font-size:1.125rem;
  transition:background-color .35s var(--ease);
}
.btn__badge .icon{transition:translate .35s var(--ease)}
.btn:hover .btn__badge .icon{translate:2px -2px}
.btn:active{scale:.98}
.btn--ink{background:var(--ink);color:var(--stone)}
.btn--ink:hover{background:#2A2C2E}
.btn--stone{background:var(--stone);color:var(--ink)}
.btn--stone:hover{background:#fff}
.btn--sm{min-height:48px;padding:6px 6px 6px 22px;gap:14px;font-size:.875rem;letter-spacing:.02em}
.btn--sm .btn__badge{width:36px;height:36px;font-size:.9375rem}
.btn[disabled]{opacity:.6;cursor:progress}

.call{display:inline-flex;align-items:center;gap:12px;font-size:1.125rem;font-weight:500;white-space:nowrap}
.call__ring{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(19,20,21,.3);background:rgba(255,255,255,.55);font-size:1.0625rem;transition:background-color .3s var(--ease),color .3s var(--ease)}
.call:hover .call__ring{background:var(--ink);color:var(--stone)}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9375rem;padding-block:8px;border-bottom:1px solid currentColor}
.link-arrow .icon{font-size:1rem;transition:translate .3s var(--ease)}
.link-arrow:hover .icon{translate:3px -3px}

/* 4. Header and menu -------------------------------------------- */
.site-header{
  position:fixed;z-index:50;inset:0 0 auto 0;height:var(--header-h);
  display:flex;align-items:center;padding-inline:var(--gutter);
  transition:height .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.site-header.is-stuck{height:72px;background:rgba(243,241,236,.9);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 rgba(19,20,21,.12)}
.brand{flex:none;display:block}
.brand img{height:46px;width:auto;transition:height .45s var(--ease)}
.is-stuck .brand img{height:38px}
.pill-nav{
  position:absolute;left:50%;translate:-50% 0;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(19,20,21,.13);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pill-nav a{font-size:.90625rem;font-weight:500;padding:9px 18px;border-radius:999px;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pill-nav a:hover{background:rgba(19,20,21,.08)}
.pill-nav a[aria-current="true"]{background:var(--ink);color:var(--stone)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.header-actions .tel{font-size:.96875rem;font-weight:600;white-space:nowrap}
.header-actions .tel:hover{color:var(--bronze-deep)}
.menu-toggle{display:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(19,20,21,.2);background:rgba(255,255,255,.6);place-items:center;place-content:center;row-gap:6px}
.menu-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:translate .35s var(--ease),rotate .35s var(--ease)}

.menu-toggle[aria-expanded="true"] span:first-child{translate:0 3.75px;rotate:45deg}
.menu-toggle[aria-expanded="true"] span:last-child{translate:0 -3.75px;rotate:-45deg}

.menu{
  position:fixed;z-index:45;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:calc(var(--header-h) + 12px) var(--gutter) max(28px,env(safe-area-inset-bottom));
  background:var(--stone);overflow-y:auto;
  visibility:hidden;opacity:0;translate:0 -12px;
  transition:opacity .35s var(--ease),translate .45s var(--ease),visibility 0s .45s;
}
.menu.is-open{visibility:visible;opacity:1;translate:0 0;transition:opacity .35s var(--ease),translate .45s var(--ease),visibility 0s}
.menu ul{list-style:none;padding:0;border-top:1px solid var(--rule)}
.menu li{border-bottom:1px solid var(--rule)}
.menu li a{display:flex;align-items:center;justify-content:space-between;padding:17px 2px;font-size:1.75rem;font-weight:300;letter-spacing:-.025em}
.menu li .icon{font-size:1.125rem;color:var(--bronze-deep)}
.menu__foot{display:grid;gap:14px}
.menu__foot .btn{width:100%}

/* 5. Hero -------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(620px,91svh,880px);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 36px) var(--gutter) 84px;
  background:#D4D0C7;color:var(--ink);
}
.hero__slab{position:absolute;z-index:-3;top:0;bottom:0;width:50%;overflow:hidden}
.hero__slab--l{left:0}
.hero__slab--r{right:0;scale:-1 1}
.hero__slab picture,.hero__slab img{width:100%;height:100%}
.hero__slab img{object-fit:cover;object-position:100% 50%;scale:1.18;transform-origin:100% 50%}
.hero__sheen{position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) calc(var(--sx,44%) - 14%),rgba(255,255,255,.44) var(--sx,44%),rgba(255,255,255,0) calc(var(--sx,44%) + 12%))}
.hero__veil{position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:radial-gradient(ellipse min(46vw,660px) min(24vw,340px) at 50% 50%,rgba(243,241,236,.92) 0%,rgba(243,241,236,.74) 46%,rgba(243,241,236,0) 100%)}
.hero__seam{position:absolute;z-index:-1;left:50%;top:0;bottom:0;width:1px;background:rgba(19,20,21,.2);box-shadow:-1px 0 0 rgba(255,255,255,.75)}
.hero__frame{position:absolute;z-index:-1;inset:0 calc(var(--frame) - 3px);pointer-events:none;
  background:
    linear-gradient(var(--bronze),var(--bronze)) 0 calc(var(--header-h) - 3px)/7px 7px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) 100% calc(var(--header-h) - 3px)/7px 7px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 3px var(--header-h)/calc(100% - 6px) 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 3px 0/1px 100% no-repeat,
    linear-gradient(var(--rule),var(--rule)) calc(100% - 3px) 0/1px 100% no-repeat}
.stone-edge{position:absolute;z-index:0;left:0;right:0;bottom:0;height:16px;pointer-events:none;
  background:linear-gradient(180deg,#fff 0,#fff 1px,#DAD7CF 2px,#BBB8B0 9px,#8E8B84 100%)}
.hero__copy{width:100%;max-width:1040px;text-align:center}
.hero h1{font-size:clamp(2.5rem,6.11vw,5.5rem);font-weight:380;line-height:1.02;letter-spacing:-.04em}
.hero__sub{margin:clamp(20px,2.1vw,30px) auto 0;max-width:33.5rem;font-size:clamp(1.0625rem,1.32vw,1.1875rem);line-height:1.55;color:var(--ink-2)}
.hero .cta-row{margin-top:clamp(26px,2.5vw,36px);justify-content:center}

@media (prefers-reduced-motion:no-preference){
  .hero__slab--l{animation:part-l 1.5s var(--ease) both}
  .hero__slab--r{animation:part-r 1.5s var(--ease) both}
  .hero__seam{animation:seam-in .9s .7s var(--ease) both}
}
@keyframes part-l{from{translate:-22px 0}to{translate:0 0}}
@keyframes part-r{from{translate:22px 0}to{translate:0 0}}
@keyframes seam-in{from{opacity:0}to{opacity:1}}

/* 6. About, Services --------------------------------------------- */
.about .slabs{opacity:.55}
/* Darken the slab behind the copy so the text sits on a calm field; the veining stays alive under the photo */
.about::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,17,18,.88) 0%,rgba(16,17,18,.62) 48%,rgba(16,17,18,.2) 100%)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6.5vw,104px);align-items:center}
.about__copy h2{margin-bottom:clamp(26px,3vw,44px);font-size:clamp(2.25rem,4.9vw,4.5rem);line-height:1.02;letter-spacing:-.04em}
.about__copy h2 span{display:block;color:var(--on-coal-2)}
.about__copy p{max-width:33rem;font-size:clamp(1rem,1.15vw,1.0625rem)}
.about__copy .about__lead{max-width:31rem;font-size:clamp(1.1875rem,1.55vw,1.4375rem);line-height:1.45;letter-spacing:-.01em;color:var(--on-coal)}
.about__copy p + p{margin-top:1.15em}
.about__copy .btn{margin-top:clamp(30px,3.2vw,44px)}

.about__figure{position:relative;margin-left:auto;width:100%;max-width:640px}
.about__photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--coal-3);box-shadow:0 70px 100px -50px rgba(0,0,0,.9),0 0 0 1px rgba(243,241,236,.1)}
.about__photo picture{height:100%}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
/* Gallery mount: a hairline set inside the photo, like a print behind glass */
.about__photo::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.28);border-radius:1px;pointer-events:none}

/* Services: three slabs standing side by side. The open slab widens and shows its text;
   the others stay narrow and dim, like stone leaning in a showroom. */
.services__wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "set" "cta";gap:clamp(36px,4.2vw,64px)}
.services__title{grid-area:title;text-align:center}
.services__title span{display:block;color:var(--ink-3)}
.services__cta{grid-area:cta;justify-self:center;margin-top:clamp(4px,1vw,12px)}
.slabset{grid-area:set;display:flex;gap:clamp(10px,1.1vw,16px);height:clamp(520px,43vw,660px)}
.slab{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--coal);color:var(--on-coal);cursor:pointer;
  box-shadow:0 50px 70px -46px rgba(19,20,21,.55);transition:flex-grow .85s var(--ease)}
.slab.is-open{flex-grow:2.7;cursor:default}
.slab__media{position:absolute;z-index:-2;inset:0}
.slab__media picture,.slab__media img{width:100%;height:100%}
.slab__media img{object-fit:cover;scale:1.06;transition:scale 1.4s var(--ease)}
.slab.is-open .slab__media img{scale:1}
/* Dim on the closed slabs, a floor of shade under the text on all of them */
.slab__media::after{content:"";position:absolute;z-index:1;inset:0;background:rgba(16,17,18,.5);transition:opacity .8s var(--ease)}
.slab.is-open .slab__media::after{opacity:0}
.slab::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,17,18,0) 0%,rgba(16,17,18,0) 40%,rgba(16,17,18,.6) 66%,rgba(16,17,18,.92) 100%)}
/* Gallery mount, the same hairline as the About photo */
.slab__media::before{content:"";position:absolute;z-index:2;inset:12px;border:1px solid rgba(255,255,255,.26);pointer-events:none}
.slab__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,2.4vw,36px)}
.slab h3{max-width:14ch;font-size:clamp(1.5rem,2.1vw,2.125rem);font-weight:300;letter-spacing:-.03em;line-height:1.08;color:var(--stone)}
.slab.is-open h3{max-width:none}
.slab__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.slab__more > div{min-height:0;overflow:hidden;opacity:0;transition:opacity .3s var(--ease)}
.slab.is-open .slab__more{grid-template-rows:1fr}
.slab.is-open .slab__more > div{opacity:1;transition:opacity .5s .3s var(--ease)}
.slab__more p{max-width:27rem;margin-top:12px;font-size:clamp(1rem,1.2vw,1.125rem);color:rgba(243,241,236,.86)}
.slab__more .btn{margin:22px 0 2px}
.slab:not(.is-open):hover .slab__media::after{opacity:.6}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .slab{animation:open-book linear both;animation-timeline:view();animation-range:entry 4% entry 58%}
  }
}

.slab__media .slabs{opacity:1}
.slab__media .slabs i:first-child{width:100%;background-position:24% 50%}
.slab__media .slabs i:last-child{display:none}

/* 7. Portfolio and lightbox -------------------------------------- */
.work .slabs{opacity:.4}
.work__head{max-width:none;text-align:center}
/* Reel: full width inside the page frame, edges fading into the coal. One "half" of the track
   holds three runs of the four photos, so moving it by -50% loops without a seam. */
.reel{--reel-w:clamp(236px,24vw,360px);--reel-gap:clamp(14px,1.6vw,24px);position:relative;z-index:2;margin-inline:var(--frame);overflow:hidden;padding-bottom:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.reel__track{display:flex;gap:var(--reel-gap);width:max-content;padding-inline:var(--gutter);align-items:flex-start}
.reel__track > li{flex:none;width:var(--reel-w)}
.reel__track > li:nth-child(even){margin-top:clamp(28px,3vw,48px)}
.reel.is-live .reel__track{padding-inline:0;animation:reel var(--reel-dur,110s) linear infinite}
.reel.is-live:hover .reel__track,.reel.is-live:focus-within .reel__track,.reel.is-off .reel__track{animation-play-state:paused}
@keyframes reel{from{translate:0 0}to{translate:-50% 0}}
/* Still row (no JS or reduced motion): the visitor swipes it */
.reel:not(.is-live){overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
.reel:not(.is-live)::-webkit-scrollbar{display:none}
.reel:not(.is-live) .reel__track > li{scroll-snap-align:start}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reel{animation:open-book linear both;animation-timeline:view();animation-range:entry 4% entry 55%}
  }
}
.shot{display:block;width:100%;text-align:left;color:inherit}
.shot__img{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:6/7;background:var(--coal-3)}
.shot__img img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.shot:hover .shot__img img{scale:1.05}
.shot__zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--stone);color:var(--ink);font-size:1rem;opacity:0;translate:0 6px;transition:opacity .3s var(--ease),translate .4s var(--ease)}
.shot:hover .shot__zoom,.shot:focus-visible .shot__zoom{opacity:1;translate:0 0}
.work__note{margin-top:clamp(28px,3vw,44px);font-size:.9375rem}

/* Photo viewer: the photo always fits the screen, whole. Arrows sit on the sides,
   the caption and the four thumbnails below. */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;overflow:hidden;
  background:#0C0D0E;color:var(--on-coal)}
.lightbox::backdrop{background:rgba(10,11,12,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:fade .3s var(--ease)}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(14px,env(safe-area-inset-top)) var(--gutter) 10px}
.lightbox__count{font-size:.9375rem;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--on-coal-2)}
.lightbox__stage{position:relative;min-height:0;outline:0}
.lightbox__pic{position:absolute;inset:0 calc(var(--gutter) + 72px);display:flex;align-items:center;justify-content:center}
.lightbox__pic img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);animation:photo-in .45s var(--ease) both}
@keyframes photo-in{from{opacity:0;scale:.985}to{opacity:1;scale:1}}
.round{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,241,236,.28);color:var(--on-coal);font-size:1.125rem;transition:background-color .3s var(--ease),color .3s var(--ease)}
.round:hover{background:var(--stone);color:var(--ink)}
.lightbox :focus-visible{outline-color:var(--bronze-light)}
.lightbox__arrow{position:absolute;z-index:2;top:50%;translate:0 -50%;background:rgba(16,17,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lightbox__arrow--prev{left:var(--gutter)}
.lightbox__arrow--next{right:var(--gutter)}
.lightbox__foot{display:grid;justify-items:center;padding:18px var(--gutter) max(20px,env(safe-area-inset-bottom));text-align:center}
.lightbox__thumbs{display:flex;gap:10px}
.lightbox__thumbs button{width:64px;aspect-ratio:1;border-radius:2px;overflow:hidden;opacity:.45;outline:1px solid transparent;outline-offset:3px;transition:opacity .3s var(--ease),outline-color .3s var(--ease)}
.lightbox__thumbs button:hover{opacity:.8}
.lightbox__thumbs button[aria-current="true"]{opacity:1;outline-color:var(--bronze-light)}
.lightbox__thumbs img{width:100%;height:100%;object-fit:cover}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* 8. Reviews ------------------------------------------------------ */
.reviews__head{max-width:none;text-align:center}
/* Three cards stepping down. Each is drawn by hairlines that run past its corners,
   with a bronze cross where the top and left lines meet. */
.reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.2vw,32px);max-width:1080px;margin:16px auto calc(6rem + 16px)}
.review{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px 32px 26px;background:#F8F7F3;box-shadow:0 1px 2px rgba(19,20,21,.05)}
.review:nth-child(2){translate:0 3rem}
.review:nth-child(3){translate:0 6rem}
.review::before{content:"";position:absolute;top:-16px;bottom:-16px;left:-1px;right:-1px;pointer-events:none;
  background:linear-gradient(var(--rule),var(--rule)) 0 0/1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) 100% 0/1px 100% no-repeat}
.review::after{content:"";position:absolute;top:-1px;bottom:-1px;left:-16px;right:-16px;pointer-events:none;
  background:linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat}
.review__plus{position:absolute;z-index:1;top:0;left:0;width:14px;height:14px;translate:calc(-50% - .5px) calc(-50% - .5px);stroke:var(--bronze-deep);stroke-width:1.5}
.review__quote{display:flex;gap:16px}
.review__mark{flex:none;width:24px;height:24px;fill:none;stroke:var(--ink-3);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.review .review__text{flex:1;font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.review__by{display:flex;align-items:center;gap:12px}
.review__avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--stone-3);color:var(--ink);font-weight:600;font-size:.9375rem;
  box-shadow:0 0 0 2px #F8F7F3,0 0 0 4px rgba(19,20,21,.12);transition:box-shadow .3s var(--ease)}
.review:hover .review__avatar{box-shadow:0 0 0 2px #F8F7F3,0 0 0 4px rgba(19,20,21,.3)}
.review .review__by p{font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
.review__by b{display:block;font-size:.9375rem;font-weight:600;color:var(--ink)}
.review__by a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
/* Placeholder until the client's real reviews arrive: a small tag riding the top line */
.pending-tag{position:absolute;z-index:1;top:0;right:20px;translate:0 -50%;padding:4px 11px;border-radius:999px;
  background:var(--bronze-deep);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* 9. Why choose us ------------------------------------------------ */
.why{overflow:hidden}
.why .slabs{opacity:.9}
.why__veil{position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,rgba(243,241,236,.94) 0%,rgba(243,241,236,.86) 45%,rgba(243,241,236,.72) 100%)}
.why__grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.why__title{margin-bottom:clamp(24px,2.8vw,40px)}
.why__title span{display:block;color:var(--ink-3)}
.why__copy p{max-width:34rem;font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--ink-2)}
.why__copy .btn{margin-top:clamp(28px,3vw,44px)}

/* Three cards stepping down to the right, each one a mounted sample */
.why__bento{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,20px)}
.why__card{width:56%;min-height:clamp(104px,8.4vw,124px);justify-content:center}
.why__card:nth-child(2){margin-left:22%}
.why__card:nth-child(3){margin-left:44%}
.why__card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:clamp(28px,2.6vw,38px) clamp(22px,2.2vw,32px);text-align:center;
  background:#FBFAF7;border:1px solid rgba(19,20,21,.1);border-radius:var(--radius);box-shadow:0 1px 0 #fff inset,0 40px 70px -48px rgba(19,20,21,.5)}
.why__card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(19,20,21,.06);pointer-events:none}
.why__card h3{font-size:clamp(1.375rem,1.9vw,1.75rem);font-weight:300;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}

/* 10. How it works ------------------------------------------------ */
/* Default: the steps as a list beside a still of the finished floor.
   main.js adds .is-live when WebGL and motion are available; then the
   stage pins and the floor is laid as the visitor scrolls the three steps. */
.how{padding-block:0}
.how .slabs{opacity:.35}
.how__stage{position:relative;z-index:2;padding-block:var(--sec-y)}
.how__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.how__copy h2{margin-bottom:clamp(28px,3.4vw,52px)}
/* Steps on a hairline rail; the open step fills its stretch of the rail in bronze */
.how__steps{list-style:none;padding:0;border-left:1px solid var(--rule)}
.step{position:relative;padding:clamp(18px,1.9vw,28px) 0 clamp(18px,1.9vw,28px) clamp(22px,2.2vw,34px)}
.step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--bronze-light);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease)}
.step.is-active::before{transform:scaleY(1)}
.step h3{font-size:clamp(1.5rem,2.3vw,2.125rem);font-weight:300;letter-spacing:-.03em;color:var(--on-coal)}
.step p{margin-top:8px}
.how__cta{margin-top:clamp(28px,3.4vw,48px)}
.how__media{display:grid;gap:18px;justify-items:center;min-height:0}
.how__visual{position:relative;width:100%;aspect-ratio:1/1;max-height:720px}
/* The installation stages under the 3D; the current one is filled in stone */
.how__process{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.how__process li{padding:7px 14px;border-radius:999px;border:1px solid rgba(243,241,236,.2);font-size:.8125rem;font-weight:500;letter-spacing:.03em;line-height:1.2;color:var(--on-coal-2);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.how__process li.is-on{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.how__canvas{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:pan-y}
.how__poster,.how__poster img{width:100%;height:100%}
.how__poster img{object-fit:contain}
.how__dots{display:none}

.how.is-live .how__canvas{display:block}
.how.is-live .how__poster{display:none}
.how.is-live .step{transition:opacity .6s var(--ease)}
.how.is-live .step:not(.is-active){opacity:.4}

@media (min-width:981px){
  .how.is-live{height:calc(100svh + 420vh)}
  .how.is-live .how__stage{position:sticky;top:0;height:100svh;min-height:620px;padding-block:calc(72px + 3svh) 4svh;display:grid;align-items:center}
  .how.is-live .how__visual{aspect-ratio:auto;height:min(72svh,700px);max-height:none}
}
@media (max-width:980px){
  .how__inner{grid-template-columns:minmax(0,1fr)}
  .how__copy{display:contents}
  .how__copy h2{order:1;margin-bottom:0}
  .how__media{order:2}
  .how__visual{max-width:560px;justify-self:center}
  .how__steps{order:3}
  .how__dots{order:4}
  .how__cta{order:5;margin-top:0}
  .how.is-live{height:calc(100svh + 360vh)}
  .how.is-live .how__stage{position:sticky;top:0;height:100svh;min-height:560px;padding-block:88px max(22px,env(safe-area-inset-bottom));display:grid}
  .how.is-live .how__inner{grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:14px;height:100%}
  .how.is-live .how__media{grid-template-rows:minmax(0,1fr) auto;gap:10px;height:100%}
  .how.is-live .how__visual{aspect-ratio:auto;height:100%;max-width:none;width:100%}
  .how__process{flex-wrap:nowrap;gap:4px}
  .how__process li{padding:7px 10px;font-size:.6875rem;letter-spacing:0;white-space:nowrap}
  .how.is-live .how__steps{display:grid;border-left:0}
  .how.is-live .step{grid-area:1/1;padding:0;text-align:center;transition:opacity .5s var(--ease),translate .6s var(--ease)}
  .how.is-live .step::before{display:none}
  .how.is-live .step:not(.is-active){opacity:0;translate:0 10px;pointer-events:none}
  .how.is-live .how__dots{display:flex;justify-content:center;gap:8px}
  .how__dots i{width:26px;height:2px;background:rgba(243,241,236,.25);transition:background-color .5s var(--ease)}
  .how__dots i.is-on{background:var(--bronze-light)}
  .how.is-live .how__cta{display:flex;justify-content:center}
}

/* 11. Quote form, areas, map --------------------------------------- */
.quote__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:start}
.quote__info{position:sticky;top:110px}
.quote__info h2{margin-bottom:clamp(26px,3vw,44px)}
/* Contact rows: ring icon, small label over the value, an arrow that wakes on hover */
.contact-list{list-style:none;padding:0;border-top:1px solid var(--rule)}
.contact-list li{border-bottom:1px solid var(--rule)}
.contact-list a,.contact-list li > div{display:flex;align-items:center;gap:18px;padding:16px 2px}
.contact-list__ring{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(122,90,48,.4);color:var(--bronze-deep);font-size:1.125rem;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.contact-list__txt{display:grid;gap:2px;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.3;overflow-wrap:anywhere}
.contact-list__txt small{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.contact-list__go{margin-left:auto;font-size:1.125rem;color:var(--bronze-deep);opacity:0;translate:-6px 6px;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.contact-list a:hover .contact-list__ring{background:var(--ink);border-color:var(--ink);color:var(--stone)}
.contact-list a:hover .contact-list__go,.contact-list a:focus-visible .contact-list__go{opacity:1;translate:0 0}
/* Service area: the cities in an endless band under the map. The list is written twice;
   the copy is hidden from screen readers and closes the loop. */
.areas{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px);
  padding-block:clamp(18px,2vw,26px);border-block:1px solid var(--rule)}
.areas h3{font-size:clamp(1.125rem,1.5vw,1.375rem);white-space:nowrap}
.areas__band{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.areas__track{display:flex;width:max-content}
.areas__list{list-style:none;padding:0;display:flex;flex:none}
.areas__list li{display:flex;align-items:center;gap:clamp(20px,2.2vw,32px);padding-right:clamp(20px,2.2vw,32px);white-space:nowrap;
  font-size:clamp(1.25rem,2vw,1.75rem);font-weight:300;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.areas__list li::after{content:"";flex:none;width:7px;height:7px;rotate:45deg;background:var(--bronze)}
@media (prefers-reduced-motion:no-preference){
  .areas__track{animation:areas-loop 48s linear infinite}
  .areas:hover .areas__track{animation-play-state:paused}
}
@keyframes areas-loop{to{translate:-50% 0}}
/* Without motion the band wraps into a plain list */
@media (prefers-reduced-motion:reduce){
  .areas__band{-webkit-mask-image:none;mask-image:none}
  .areas__track{width:auto}
  .areas__list{flex-wrap:wrap;row-gap:6px}
  .areas__list[aria-hidden]{display:none}
}

/* Map: a wide framed strip under the form, our own marker and service radius on top */
.map{position:relative;margin-top:clamp(48px,5.4vw,84px);height:clamp(260px,24vw,360px);border-radius:var(--radius);overflow:hidden;background:var(--stone-3);
  box-shadow:0 0 0 1px var(--rule),0 40px 70px -50px rgba(19,20,21,.5)}
.map iframe{position:absolute;inset:-60px 0 0;width:100%;height:calc(100% + 60px);border:0;pointer-events:none;filter:grayscale(1) contrast(1.06) brightness(1.02) sepia(.12)}
.map::after{content:"";position:absolute;inset:12px;border:1px solid rgba(19,20,21,.12);pointer-events:none}
.map__area{position:absolute;left:50%;top:calc(50% - 30px);width:clamp(180px,17vw,250px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(154,116,69,.2) 0%,rgba(154,116,69,.08) 60%,rgba(154,116,69,0) 72%);border:1px dashed rgba(122,90,48,.55)}
.map__pin{position:absolute;left:50%;top:calc(50% - 30px);width:16px;height:16px;translate:-50% -50%;border-radius:50%;background:var(--bronze-deep);box-shadow:0 0 0 5px rgba(243,241,236,.9),0 6px 14px rgba(19,20,21,.4)}
@media (prefers-reduced-motion:no-preference){
  .map__pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--bronze);animation:pin-pulse 2.6s var(--ease) infinite}
}
@keyframes pin-pulse{from{opacity:.9;scale:1}to{opacity:0;scale:2.6}}
.map__tag{position:absolute;left:clamp(22px,2.4vw,32px);bottom:clamp(22px,2.4vw,32px);display:grid;gap:2px;padding:14px 18px;border-radius:var(--radius);
  background:var(--stone);box-shadow:0 18px 40px -20px rgba(19,20,21,.45);font-size:.875rem;line-height:1.35;color:var(--ink-3)}
.map__tag b{font-size:1.0625rem;font-weight:500;color:var(--ink)}

.qform{
  --rule:rgba(243,241,236,.2);--focus:var(--bronze-light);--fg-2:var(--on-coal-2);
  position:relative;display:grid;gap:26px;padding:clamp(26px,3.4vw,52px);border-radius:var(--radius);
  background:var(--coal);color:var(--on-coal);box-shadow:0 60px 90px -50px rgba(19,20,21,.75);
  caret-color:var(--bronze-light);
}
.qform::after{content:"";position:absolute;inset:12px;border:1px solid rgba(243,241,236,.08);pointer-events:none}
.qform ::selection{background:var(--stone);color:var(--ink)}
.qform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.field{display:grid;gap:6px}
.field label,.field legend{font-size:.9375rem;font-weight:500;color:var(--on-coal-2);padding:0}
.field input,.field textarea{
  width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;
  font-size:1.125rem;color:var(--on-coal);transition:border-color .3s var(--ease);
}
.field textarea{min-height:92px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#9D9A93}
.field input:hover,.field textarea:hover{border-bottom-color:rgba(243,241,236,.45)}
.field input:focus-visible,.field textarea:focus-visible{outline:0;border-bottom-color:var(--bronze-light);box-shadow:0 1px 0 var(--bronze-light)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--on-coal);box-shadow:0 0 0 60px var(--coal) inset;caret-color:var(--bronze-light)}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:var(--alert-on-coal)}
.field__err{display:none;align-items:center;gap:8px;font-size:.9375rem;color:var(--alert-on-coal)}
.field.is-bad .field__err{display:flex}
fieldset.field{border:0;padding:0;min-width:0}
/* Steps. Without JS (.is-stepped absent) every step shows and the form reads top to bottom. */
.qstep{display:grid;gap:26px;min-width:0;margin:0;padding:0;border:0}
.qstep .qstep__title{padding:0;margin-bottom:4px;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--on-coal)}
.qform.is-stepped .qstep{display:none}
.qform.is-stepped .qstep.is-current{display:grid;animation:step-in .5s var(--ease) both}
@keyframes step-in{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
.qform__progress{display:grid;gap:12px}
.qform__progress[hidden]{display:none}
.qform__count{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-coal-2)}
.qform__count b{color:var(--bronze-light);font-weight:600}
.qform__bar{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qform__bar li{padding-top:10px;border-top:2px solid rgba(243,241,236,.16);font-size:.8125rem;color:var(--on-coal-2);transition:border-color .5s var(--ease),color .5s var(--ease)}
.qform__bar li.is-on{border-top-color:var(--bronze-light);color:var(--on-coal)}
/* Service options: large rows with a round check */
.opts{display:grid;gap:10px}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.opt__box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 20px 20px 22px;border-radius:var(--radius);
  border:1px solid rgba(243,241,236,.18);background:rgba(243,241,236,.02);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.opt__name{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.25;color:var(--on-coal)}
.opt__tick{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid rgba(243,241,236,.4);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.opt__tick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;rotate:45deg;opacity:0;transition:opacity .2s var(--ease)}
.opt input:hover + .opt__box{border-color:rgba(243,241,236,.45)}
.opt input:checked + .opt__box{border-color:var(--bronze-light);background:rgba(205,170,122,.08)}
.opt input:checked + .opt__box .opt__tick{background:var(--bronze-light);border-color:var(--bronze-light)}
.opt input:checked + .opt__box .opt__tick::after{opacity:1}
.opt input:focus-visible + .opt__box{outline:2px solid var(--bronze-light);outline-offset:3px}
/* Step navigation */
.qnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
.qnav[hidden],.qnav__back[hidden]{display:none}
.qnav__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:.9375rem;font-weight:600;color:var(--on-coal-2);transition:color .3s var(--ease)}
.qnav__back:hover{color:var(--on-coal)}
.qform__send .qnav__back{justify-self:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform__send{display:grid;gap:16px;padding-top:6px}
.qform__send .btn{width:100%}
.qform__note{font-size:.9375rem;color:var(--on-coal-2);max-width:none;text-align:center}
.qform__note a{color:var(--on-coal);text-decoration:underline;text-underline-offset:3px}
.qform__alert{display:none;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--alert-on-coal);color:var(--alert-on-coal);font-size:1rem}
.qform__alert.is-on{display:flex}
.qform__alert .icon{font-size:1.25rem;margin-top:2px}
.qform__alert a{text-decoration:underline;text-underline-offset:3px}
.qform__done{display:none;gap:14px;align-content:center;min-height:360px;text-align:left}
.qform__done h3{font-size:clamp(2rem,3.4vw,3rem);font-weight:300;letter-spacing:-.035em}
.qform__done p{color:var(--on-coal-2);max-width:30rem;font-size:1.125rem}
.qform__done .icon{font-size:2.5rem;color:var(--bronze-light);stroke-width:1.25}
.qform.is-sent > :not(.qform__done){display:none}
.qform.is-sent .qform__done{display:grid}

/* 12. FAQ, footer, dock, legal, 404 -------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);justify-items:center}
.faq__grid > h2{text-align:center}
.faq__list{width:100%;max-width:880px}
.faq__list{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 2px;cursor:pointer;list-style:none;font-size:clamp(1.1875rem,1.7vw,1.5rem);line-height:1.25;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{font-size:1.25rem;color:var(--bronze-deep);transition:rotate .4s var(--ease)}
.faq details[open] summary .icon{rotate:45deg}
.faq summary:hover{color:var(--bronze-deep)}
.faq details p{padding:0 48px 26px 2px;max-width:44rem}

.site-footer{--rule:rgba(243,241,236,.15);--focus:var(--bronze-light);position:relative;isolation:isolate;background:var(--coal);color:var(--on-coal);padding-block:clamp(56px,6.6vw,104px) 28px}
.site-footer .slabs{opacity:.5;z-index:-1}
.site-footer ::selection{background:var(--stone);color:var(--ink)}
.footer__grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.4fr));gap:clamp(28px,4vw,64px)}
.footer__brand img{height:58px;width:auto}
.footer__brand p{margin-top:22px;max-width:25rem;color:var(--on-coal-2)}
.footer__social{margin-top:22px;display:inline-flex;align-items:center;gap:12px;font-weight:500}
.footer__social .round{width:46px;height:46px}
.footer__h{font-size:.9375rem;font-weight:600;color:var(--on-coal-2);margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;display:grid;gap:4px}
.footer__grid li a{display:inline-block;padding-block:5px;transition:color .3s var(--ease)}
.footer__grid li a:hover{color:var(--bronze-light)}
.footer__base{margin-top:clamp(40px,5vw,72px);padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;font-size:.9375rem;color:var(--on-coal-2)}
.footer__base ul{display:flex;gap:22px}
.footer__base a{padding-block:8px;display:inline-block}
.footer__base a:hover{color:var(--on-coal)}

/* Mobile action dock: call and quote always within thumb reach */
.dock{display:none}

/* Legal pages and the 404 share the stone surface */
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--header-h) + clamp(40px,6vw,88px)) var(--gutter) clamp(48px,6vw,88px);background:#D4D0C7;text-align:center}
.page-hero .slabs{opacity:1;z-index:-2}
.page-hero .hero__veil{background:radial-gradient(ellipse min(60vw,720px) 260px at 50% 60%,rgba(243,241,236,.94) 0%,rgba(243,241,236,.76) 50%,rgba(243,241,236,0) 100%)}
.page-hero h1{font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.04;letter-spacing:-.04em}
.page-hero p{margin:18px auto 0;max-width:36rem;color:var(--ink-2)}
.legal{padding-block:clamp(48px,6vw,96px) var(--sec-y)}
.legal .wrap{max-width:calc(46rem + var(--gutter)*2)}
.legal h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;font-weight:400;margin:2.2em 0 .6em}
.legal p,.legal li{color:var(--ink-2)}
.legal p + p,.legal ul + p,.legal p + ul{margin-top:1em}
.legal ul{padding-left:1.2em;display:grid;gap:.4em}
.legal a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.legal__box{margin-top:2.4em;padding:24px 26px;border-radius:var(--radius);background:#fff;border:1px solid var(--rule)}
.notfound{min-height:100svh;display:grid;place-items:center}
.notfound .cta-row{justify-content:center;margin-top:30px}

/* Responsive ------------------------------------------------------- */
@media (max-width:1180px){
  .pill-nav{display:none}
  .menu-toggle{display:grid}
}
@media (min-width:1181px){
  .menu{display:none}
}
@media (max-width:980px){
  .about__grid,.why__grid,.quote__grid,.faq__grid{grid-template-columns:minmax(0,1fr)}
  .quote__info{display:contents}
  .quote__info h2{order:1;margin-bottom:0}
  .contact-list{order:2}
  .qform{order:3}
  .quote__info{position:static}
  .areas{grid-template-columns:minmax(0,1fr);gap:12px}
  .quote__grid{row-gap:clamp(28px,6vw,40px)}
  .map__tag{bottom:auto;top:22px;left:22px;padding:10px 14px}
  .why__veil{background:rgba(243,241,236,.88)}
  .why__copy{text-align:center}
  .why__copy p{margin-inline:auto}
  .about__figure{order:-1;max-width:none}
  .about__photo{aspect-ratio:5/4}
  .about::before{background:linear-gradient(180deg,rgba(16,17,18,.3) 0%,rgba(16,17,18,.85) 55%)}
  .slabset{display:grid;height:auto;gap:14px}
  .slab{display:flex;flex-direction:column;cursor:default}
  .slab::before{display:none}
  .slab__media{position:relative;z-index:0;aspect-ratio:16/10;min-height:0;overflow:hidden}
  .slab__media picture{position:absolute;inset:0}
  .slab__body{position:relative;padding:22px 22px 26px}
  .slab h3,.slab.is-open h3{max-width:none}
  .slab__more p{margin-top:8px}
  .slab__more .btn{margin-top:18px}
  .slab .slab__media img{scale:1}
  .slab .slab__media::after{opacity:0}
  .slab .slab__more{grid-template-rows:1fr}
  .slab .slab__more > div{opacity:1}
  .reviews__grid{grid-template-columns:minmax(0,1fr);max-width:560px;gap:40px;margin-bottom:16px}
  .review:nth-child(n){translate:none}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
  .dock{
    position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding:8px 12px max(8px,env(safe-area-inset-bottom));background:rgba(243,241,236,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 rgba(19,20,21,.14);
    translate:0 110%;transition:translate .5s var(--ease);
  }
  .dock.is-on{translate:0 0}
  .dock .btn{min-height:52px;font-size:.875rem;letter-spacing:.04em;white-space:nowrap}
  .dock .btn--ink{padding-left:18px;gap:10px}
  .dock .btn--call{justify-content:center;padding:6px 16px;gap:10px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(19,20,21,.2)}
  .dock .btn--call .icon{font-size:1.0625rem}
  .dock .btn__badge{width:40px;height:40px}
  .site-footer{padding-bottom:96px}
}
@media (max-width:640px){
  :root{--header-h:76px}
  .site-header.is-stuck{height:64px}
  .brand img{height:38px}
  .is-stuck .brand img{height:34px}
  .header-actions{gap:10px}
  .header-actions .tel{display:none}
  .hero{min-height:clamp(560px,86svh,760px);padding-bottom:64px}
  .hero__veil{background:radial-gradient(ellipse 96vw 300px at 50% 52%,rgba(243,241,236,.93) 0%,rgba(243,241,236,.8) 55%,rgba(243,241,236,0) 100%)}
  .hero .cta-row{flex-direction:column}
  .hero .btn{width:100%;max-width:340px}
  .qform__row{grid-template-columns:minmax(0,1fr)}
  .slab__media{aspect-ratio:4/3}
  .reel__track > li:nth-child(even){margin-top:24px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .faq details p{padding-right:8px}
  .why__card{width:84%}
  .why__card:nth-child(2){margin-left:8%}
  .why__card:nth-child(3){margin-left:16%}
  .review::after{left:-6px;right:-6px}
  .lightbox__pic{inset:0 10px}
  .lightbox__arrow{width:44px;height:44px;font-size:1rem}
  .lightbox__arrow--prev{left:14px}
  .lightbox__arrow--next{right:14px}
  .lightbox__thumbs button{width:52px}
  .btn{min-height:56px}
}
@media (max-width:400px){
  .header-actions .btn--sm{padding-left:16px;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media print{
  .site-header,.dock,.menu,.map,.how__canvas{display:none !important}
  .sec--coal,.site-footer{--bg:#fff;--fg:#000;--fg-2:#222;background:#fff;color:#000}
}