/* Imperial Concrete Coatings. World: the showroom floor. */
@font-face{font-family:"Red Hat Display";src:url("../fonts/red-hat-display.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("../fonts/red-hat-text.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --ink-0:#060607;--ink-1:#0e0f11;--ink-2:#191a1d;--ink-3:#2a2c30;--ink-4:#474a50;
  --dim:#858992;--fog:#c6c9cf;--white:#fff;--gloss:#eef0f1;--gloss-ink:#101113;
  --brass:#c8a24e;--brass-hi:#ecd592;--brass-lo:#8c6d2c;--alert:#ffa28f;--line:rgba(154,158,166,.26);
  /* Lift for media on the black ground: a hairline edge, a deep drop and a faint cool spill of light. */
  --lift:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -24px #000,0 24px 70px -12px rgba(154,158,166,.34);
  --display:"Red Hat Display","Avenir Next","Segoe UI",sans-serif;
  --text:"Red Hat Text","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Brass: smooth metal with a quiet top to bottom ramp. No grain or texture, by client decision. */
  --brushed:linear-gradient(180deg,#d9b965 0%,var(--brass) 55%,#bb9541 100%) #c8a24e;
  --pad:clamp(4.5rem,10vw,8.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scrollbar-color:var(--ink-4) var(--ink-0);scrollbar-width:thin;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-0);color:var(--white);font:400 1.0625rem/1.6 var(--text);caret-color:var(--brass);accent-color:var(--brass);-webkit-font-smoothing:antialiased}
/* The ground is the black marble the logo sits on, held very dark and fixed under every section. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,7,.8),rgba(6,6,7,.9)),url("../img/black-marble-wide.webp") center/cover var(--ink-0)}
::selection{background:var(--brass);color:var(--ink-0)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
h2{font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.03;letter-spacing:-.03em;margin-bottom:clamp(1.75rem,3.4vw,2.75rem)}
h3{font-weight:700;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
section{padding-block:var(--pad);scroll-margin-top:72px}
.wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:99;background:var(--brass);color:var(--ink-0);padding:.7rem 1rem;font-weight:700}
.skip:focus{top:1rem}
.sprite{position:absolute}
.ico{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lead{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.45;color:var(--white)}
.note{margin-top:1.25rem;font-size:.85rem;color:var(--dim)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 1.5rem;border:0;border-radius:3px;font:800 .82rem/1.25 var(--display);letter-spacing:.13em;text-transform:uppercase;text-wrap:balance;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,filter .25s}
.btn .ico{transition:transform .35s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn-brass{background:var(--brushed);background-color:var(--brass);color:var(--ink-0);box-shadow:0 12px 22px -14px rgba(0,0,0,.95)}
.btn-brass:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 18px 28px -14px rgba(0,0,0,.95)}
.btn-ink{background:var(--ink-0);color:var(--white);box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--ink-4)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--fog)}
.btn-sm{padding:.8rem 1.1rem;font-size:.74rem}
section>.wrap>.btn,.about-copy .btn{margin-top:clamp(2rem,4vw,3rem)}
/* Sections built as title, full width block, button: title and button sit on the center axis. */
:is(.services,.spaces,.compare,.projects,.reviews,.process) h2{text-align:center}
:is(.services,.projects,.reviews,.process)>.wrap>.btn{display:flex;width:fit-content;margin-inline:auto}

/* Header */
.site-head{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .4s,box-shadow .4s}
.site-head.is-stuck{background:rgba(6,6,7,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ink-3)}
.head-in{display:flex;align-items:center;gap:1.5rem;height:72px}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;color:var(--white)}
.brand-mark{width:46px;height:32px}
.brand-text{display:grid;gap:.28rem}
.brand-word{display:flex;align-items:center;font:900 1.42rem/1 var(--display);letter-spacing:.03em}
.brand-e{display:inline-grid;gap:.13em;width:.6em;height:.72em;margin-inline:.06em}
.brand-e b{background:var(--brushed);border-radius:1px}
.brand-sub{font:700 .54rem/1 var(--display);letter-spacing:.36em;text-transform:uppercase;color:var(--fog)}
.nav{display:flex;gap:1.6rem}
.nav .nav-cta{display:none}
.nav a.nav-cta,.nav a.nav-cta:hover,.nav a.nav-cta.is-on{color:var(--ink-0)}
.nav a{position:relative;font-size:.95rem;font-weight:500;text-decoration:none;color:var(--fog);padding:.4rem 0;transition:color .2s}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover,.nav a.is-on{color:var(--white)}
.nav a:hover::after,.nav a.is-on::after{transform:scaleX(1)}
.head-phone{display:inline-flex;align-items:center;gap:.5rem;font:800 1rem/1 var(--display);text-decoration:none;white-space:nowrap}
.head-phone .ico{color:var(--brass)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;color:var(--white);cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn i:nth-of-type(1){top:17px}.menu-btn i:nth-of-type(2){top:26px}
.menu-btn[aria-expanded="true"] i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-of-type(2){top:21px;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:100svh;padding:0;display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,7,.72) 0%,rgba(6,6,7,.16) 20%,rgba(6,6,7,.3) 46%,rgba(6,6,7,.9) 80%,var(--ink-0) 100%)}
.streaks{position:absolute;inset:40% 0 0;z-index:-1;overflow:hidden;mix-blend-mode:screen;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.streaks i{position:absolute;top:-10%;bottom:-10%;width:16vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-28deg)}
.streaks i:nth-child(1){left:8%}.streaks i:nth-child(2){left:46%;width:9vw}.streaks i:nth-child(3){left:78%;width:22vw}
.hero-copy{align-self:end;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;padding-top:110px;padding-bottom:clamp(3.25rem,10vh,6.5rem)}
h1{position:relative;font-weight:800;font-size:clamp(2.35rem,min(5.7vw,9.4vh),5.2rem);line-height:.98;letter-spacing:-.035em;max-width:19.5ch}
.mirror::after{content:attr(data-text) / "";position:absolute;left:0;top:calc(100% + .06em);width:100%;transform:scaleY(-1);opacity:.2;filter:blur(1.5px);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 62%);mask-image:linear-gradient(to top,#000 0%,transparent 62%);pointer-events:none;user-select:none}
.hero-cta{display:none}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;color:var(--fog);max-width:36ch;padding-bottom:.35em}
.band{position:relative;background:var(--brushed);background-color:var(--brass);color:var(--ink-0);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);transform:translateX(var(--sheen,-60%));pointer-events:none}
.band-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:1.05rem}
.band-tag{margin-right:auto;font:800 .82rem/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase}
.band-phone{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.band-phone .ico{width:1.6rem;height:1.6rem}
.band-phone span{display:grid;gap:.2rem}
.band-phone b{font:900 1.3rem/1 var(--display);letter-spacing:-.01em}
.band-phone small{font:700 .72rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase}


/* About */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,7rem);align-items:center}
/* The photo stands on the floor with a short reflection at its foot. */
.about-shot{aspect-ratio:4/5;border-radius:4px;box-shadow:var(--lift);transition:box-shadow 1.2s var(--ease);-webkit-box-reflect:below 6px linear-gradient(transparent 84%,rgba(255,255,255,.28))}
.about-shot img,.room img{width:100%;height:100%;object-fit:cover}
.about-shot img{border-radius:4px}
.about-copy p+p{margin-top:1.1rem;color:var(--fog);max-width:58ch}

/* Services */
.services{background:linear-gradient(180deg,transparent,rgba(25,26,29,.7) 18%,rgba(25,26,29,.7) 82%,transparent)}
/* Each card is the photo itself. The description rises on hover while the photo dims. */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem)}
.card{position:relative;grid-column:span 2;aspect-ratio:4/5;overflow:hidden;isolation:isolate;border-radius:6px;background:var(--ink-0);box-shadow:0 26px 40px -30px #000}
.card:nth-child(n+4){grid-column:span 3;aspect-ratio:3/2}
.card a{position:absolute;inset:0;color:inherit;text-decoration:none}
.card a:focus-visible{outline-offset:-4px}
.card figure{position:absolute;inset:0;z-index:-1}
.card img{width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.card div{position:absolute;inset:auto 0 0;padding:5rem 1.5rem 1.5rem;background:linear-gradient(180deg,transparent,rgba(6,6,7,.76) 40%,rgba(6,6,7,.95))}
.card::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.card h3{font-size:clamp(1.4rem,2.1vw,1.85rem);font-weight:800;letter-spacing:-.02em}
.card p{margin-top:.5rem;color:var(--white);max-width:36ch}
@media (hover:hover){
  .card p{max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(.6rem);transition:max-height .6s var(--ease),margin-top .6s var(--ease),opacity .45s,transform .6s var(--ease)}
  .card:hover p,.card:focus-within p{max-height:8rem;margin-top:.5rem;opacity:1;transform:none}
  .card:hover img,.card:focus-within img{opacity:.32;transform:scale(1.05)}
  .card:hover::after,.card:focus-within::after{transform:scaleX(1)}
}

/* Finish selector */
.finishes{padding-bottom:var(--pad)}
/* The whole selector sits in one glass pane; the floor runs edge to edge inside it. */
.fin-card{--fp:clamp(1.25rem,4vw,3.5rem);--head:calc(var(--fp) + 5.75rem);position:relative;isolation:isolate;overflow:hidden;padding:var(--fp);border-radius:clamp(20px,3vw,34px);background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 45%,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 44px 70px -40px #000}
/* The floor fills the pane from under the title down to its bottom edge; the controls sit on it behind a dark veil. */
.fin-card .stage{position:absolute;inset:0;z-index:-1;height:auto;margin:0;perspective:1400px;-webkit-mask-image:linear-gradient(180deg,transparent var(--head),#000 calc(var(--head) + var(--fade,150px)));mask-image:linear-gradient(180deg,transparent var(--head),#000 calc(var(--head) + var(--fade,150px)))}
/* The horizon sits just under the title block, where the mask is still fully clear, so no edge shows. */
.fin-card .floor{top:var(--head)}
.fin-card .fin-ui{margin-top:clamp(130px,15vw,210px)}
.fin-card .fin-ui::before{content:"";position:absolute;z-index:-1;inset:-2.5rem calc(-1*var(--fp)) -14rem;background:linear-gradient(180deg,transparent,rgba(6,6,7,.7) 3.5rem,rgba(6,6,7,.86));pointer-events:none}
.fin-card::before{z-index:1}
.fin-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.5rem 2rem}
.fin-head h2{margin-bottom:0}
.fin-head p{color:var(--fog);max-width:34ch}
.stage{position:relative;height:clamp(260px,44vw,500px);margin-top:clamp(1.5rem,3vw,2.5rem);perspective:900px;overflow:hidden;
  /* The fade into the black ground is a mask on the stage itself, so it holds on every frame of the pour. */
  -webkit-mask-image:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.55) 38%,#000 58%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.55) 38%,#000 58%,#000 76%,transparent 100%)}
.floor{position:absolute;left:-30%;right:-30%;top:14%;height:240%;transform-origin:50% 0;transform:rotateX(64deg)}
.floor-a,.floor-b,.floor-light{position:absolute;inset:0}
.floor-a,.floor-b{background-color:var(--ink-2);background-size:340px 340px}
.floor-b{clip-path:circle(0% at var(--px,50%) 34%)}
.floor-light{background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.3) 47%,rgba(255,255,255,.08) 55%,transparent 68%);background-size:220% 100%;background-position:var(--lx,30%) 0;mix-blend-mode:screen}
.fin-ui{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(1.25rem,4vw,3.5rem);align-items:center;margin-top:-1.5rem;position:relative}
.swatches{display:flex;gap:.9rem}
.swatches button{display:grid;justify-items:center;gap:.6rem;padding:0;border:0;background:none;color:var(--fog);font:700 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .25s}
.swatches i{position:relative;width:clamp(58px,7vw,84px);aspect-ratio:1;border-radius:3px;background:var(--ink-2) center/160px;box-shadow:0 14px 22px -14px #000,inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .45s var(--ease),box-shadow .3s}
.swatches button:hover i{transform:translateY(-4px)}
.swatches [aria-checked="true"]{color:var(--white)}
.swatches [aria-checked="true"] i{box-shadow:0 14px 22px -14px #000,0 0 0 2px var(--ink-0),0 0 0 4px var(--brass)}
/* Stamped hallmark on the chosen tile */
.swatches i::after{content:"";position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060607' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center/13px no-repeat var(--brass);box-shadow:0 3px 6px -2px #000;transform:scale(0);transition:transform .45s var(--ease)}
.swatches [aria-checked="true"] i::after{transform:scale(1)}
.fin-info h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em}
.fin-info p{margin-top:.4rem;color:var(--fog);max-width:48ch}
.fin-info .fin-fit{font-size:.9rem;color:var(--dim)}
.fin-fit b{color:var(--white);font-weight:600}

/* Spaces */
.spaces{padding-top:0}
.rooms{display:flex;gap:6px;height:clamp(380px,46vw,560px);padding-inline:max(1.25rem,(100% - 1240px)/2);-webkit-box-reflect:below 6px linear-gradient(transparent 80%,rgba(255,255,255,.3))}
.room{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:4px;transition:flex .8s var(--ease)}
.room:hover,.room:focus-within,.rooms:not(:hover):not(:focus-within) .room:first-child{flex:2.6}
.room img{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.room:hover img{transform:scale(1.04)}
.room div{position:absolute;inset:auto 0 0;padding:3.5rem 1.25rem 1.25rem;background:linear-gradient(180deg,transparent,rgba(6,6,7,.9))}
.room h3{font-size:1.5rem;font-weight:800}
.room p{margin-top:.3rem;color:var(--fog);font-size:.95rem;max-width:30ch}

/* Compare: the one white gloss floor */
.compare{background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.75) 38%,transparent 47%),var(--gloss);color:var(--gloss-ink)}
.compare ::selection{background:var(--ink-0);color:var(--white)}
/* Matte against gloss: the bare slab is a flat gray panel, the coated floor a black one that catches the light. */
.vs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);max-width:1100px;margin-inline:auto}
.vs-card{padding:clamp(1.5rem,3.2vw,2.75rem);border-radius:clamp(18px,2.4vw,28px)}
.vs-card h3{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.02em}
.vs-card li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.15rem;align-items:center;padding:1.05rem 0;border-top:1px solid rgba(16,17,19,.12)}
.vs-card b{font:800 .72rem/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase}
.vs-card li>span:last-child{grid-column:2;font-size:1.06rem;line-height:1.4;font-weight:500}
.vs-ico{grid-row:span 2;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%}
.vs-ico .ico{width:1.05rem;height:1.05rem;stroke-width:2.4}
.vs-bare{background:#dcdfe2;color:#43464c;box-shadow:inset 0 0 0 1px rgba(16,17,19,.08)}
.vs-bare h3{color:#2a2c30}
.vs-bare b{color:#5a5d63}
.vs-bare .vs-ico{background:rgba(16,17,19,.1);color:#5a5d63}
.vs-coat{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#1b1c20,var(--ink-0) 62%);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.34),0 44px 60px -34px rgba(6,6,7,.6);transition:box-shadow .5s}
.vs-coat li{border-top-color:rgba(255,255,255,.14)}
.vs-coat b{color:var(--fog)}
.vs-coat .vs-ico{background:var(--brass);color:var(--ink-0)}
.vs-crown{width:2.4rem;height:1.65rem;color:var(--white)}
.vs-badge{position:absolute;left:50%;top:50%;z-index:2;translate:-50% -50%;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--white);color:var(--ink-0);font:900 .95rem/1 var(--display);letter-spacing:.04em;box-shadow:0 0 0 6px var(--gloss),0 16px 26px -12px rgba(6,6,7,.5)}
@media (max-width:860px){
  .vs{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  /* Stacked: the disc sits in the gap between the two panels instead of the middle of the block. */
  .vs-badge{position:relative;left:auto;top:auto;translate:none;justify-self:center;margin-block:-1.7rem}
}

/* Projects */
/* A reel of finished floors that runs on its own, fades at both edges and holds still under the pointer. */
.reel{overflow:hidden;padding-block:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.reel-track{--gap:clamp(.75rem,1.6vw,1.5rem);display:flex;width:max-content;animation:reel 48s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.reel-set{display:flex;gap:var(--gap);padding-right:var(--gap)}
.reel-item{position:relative;flex:none;width:clamp(210px,26vw,360px);aspect-ratio:1;overflow:hidden;border-radius:clamp(12px,1.4vw,18px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 26px 40px -26px #000;transition:transform .5s var(--ease),filter .4s}
.reel-item img{width:100%;height:100%;object-fit:cover}
.reel-item:hover{transform:scale(1.04);filter:brightness(1.1)}

/* Reviews */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.quote{display:grid;gap:1.5rem;align-content:space-between;padding:1.75rem;border-radius:4px;background:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-3)}
.quote p{font-size:1.1rem;line-height:1.5}
.quote footer{display:grid;gap:.15rem}
.quote footer b{font-family:var(--display)}
.quote footer span{font-size:.88rem;color:var(--dim)}

/* Why: a glass pane over the marble ground. The edge is a gradient hairline, bright at two corners. */
.why-panel{position:relative;isolation:isolate;display:grid;justify-items:center;text-align:center;padding:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,5vw,4rem);border-radius:clamp(20px,3vw,34px);background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 45%,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 44px 70px -40px #000}
.why-panel::before,.fin-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,.14) 30%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.why-panel h2{margin-bottom:1.25rem}
.why-panel p{font-size:1.12rem;max-width:54ch;color:var(--fog)}
.why-panel .btn{margin-top:2rem}
/* Three labels pinned around the panel at a slight tilt. Below 1180px they line up under the button. */
.why-list li{position:absolute;display:inline-flex;align-items:center;gap:.7rem;padding:.55rem 1.25rem .55rem .55rem;border-radius:999px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);color:var(--white);font:800 1rem/1.1 var(--display);white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.35),0 20px 30px -18px rgba(0,0,0,.85)}
.why-list li:nth-child(1){top:1.4rem;right:2.5%;transform:rotate(4deg)}
.why-list li:nth-child(2){bottom:1.5rem;left:2.5%;transform:rotate(-4deg)}
.why-list li:nth-child(3){bottom:1.7rem;right:3%;transform:rotate(-3deg)}
.why-ico{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--brass);color:var(--ink-0)}
.why-ico .ico{stroke-width:2.4}
@media (max-width:1180px){
  .why-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2rem}
  .why-list li,.why-list li:nth-child(n){position:static;transform:none}
}

/* Process */
/* Three panels. The numbers sit on one strip light, and a highlight runs along it from step 1 to step 3. */
.steps{--n:3.1rem;--top:clamp(1.4rem,2.4vw,2rem);position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.6vw,1.25rem);counter-reset:s}
.steps::before,.steps::after{content:"";position:absolute;z-index:1;top:calc(var(--top) + var(--n)/2 - 1px);left:16.667%;right:16.667%;height:2px;pointer-events:none}
.steps::before{background:var(--line)}
.steps::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent) 0 0/140px 100% no-repeat;animation:run 3.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{from{background-position:-140px 0}to{background-position:calc(100% + 140px) 0}}
.steps li{position:relative;counter-increment:s;padding:calc(var(--top) + var(--n) + 1.4rem) clamp(1.25rem,2.4vw,2rem) clamp(1.6rem,2.6vw,2.25rem);border-radius:clamp(16px,2vw,24px);background:linear-gradient(180deg,var(--ink-2),var(--ink-1));box-shadow:inset 0 0 0 1px var(--line),0 34px 50px -40px #000;text-align:center;top:0;transition:top .6s var(--ease),box-shadow .4s}
/* Lift with top, not transform: a transform would start a new layer and let the strip light cross the number. */
.steps li:hover{top:-5px;box-shadow:inset 0 0 0 1px var(--ink-4),0 40px 54px -36px #000}
.steps li::before{content:counter(s);position:absolute;z-index:2;top:var(--top);left:50%;translate:-50% 0;display:grid;place-items:center;width:var(--n);height:var(--n);border-radius:50%;background:var(--white);color:var(--ink-0);font:900 1.35rem/1 var(--display);box-shadow:0 0 0 6px var(--ink-1)}
.steps h3{font-size:1.45rem;font-weight:800}
.steps p{margin-top:.4rem;color:var(--fog)}

/* FAQ */
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,6vw,6rem);align-items:start}
.faq h2{position:sticky;top:104px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font:700 1.15rem/1.3 var(--display);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{color:var(--brass);transition:transform .45s var(--ease)}
.qa details[open] summary .ico{transform:rotate(45deg)}
.qa summary:hover{color:var(--brass-hi)}
.qa p{padding:0 2.5rem 1.4rem 0;color:var(--fog);max-width:62ch}

/* Estimate */
.estimate{background:linear-gradient(180deg,rgba(25,26,29,.8),transparent)}
.est-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.est-form h2{margin-bottom:.75rem}
.wizard{margin-top:1.75rem;padding:clamp(1.25rem,3vw,2.25rem);background:var(--ink-0);border-radius:6px;box-shadow:inset 0 0 0 1px var(--ink-3),0 30px 60px -40px #000}
.wiz-steps{display:flex;gap:6px}
.wiz-steps li{flex:1;padding-top:.75rem;box-shadow:inset 0 3px 0 var(--ink-3);font:700 .72rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .3s,box-shadow .3s}
.wiz-steps li.is-on{color:var(--white);box-shadow:inset 0 3px 0 var(--brass)}
fieldset{min-width:0;margin:1.75rem 0 0;padding:0;border:0}
legend{padding:0;margin-bottom:1rem;font:800 1.4rem/1.2 var(--display);letter-spacing:-.02em}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;inset:0}
.opts span{display:block;padding:1.05rem 1rem;border-radius:4px;box-shadow:inset 0 0 0 1px var(--ink-4);font:700 1rem/1.2 var(--display);transition:box-shadow .2s,background-color .2s}
.opts label:hover span{box-shadow:inset 0 0 0 1px var(--fog)}
.opts input:checked+span{background:rgba(200,162,78,.14);box-shadow:inset 0 0 0 2px var(--brass)}
.opts input:focus-visible+span{outline:2px solid var(--brass-hi);outline-offset:3px}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.field{display:grid;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--fog)}
.opts+.field{margin-top:1.1rem}
.field input,.field select{width:100%;padding:.95rem 1rem;border:0;border-radius:4px;background:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-4);color:var(--white);font:400 1rem/1.3 var(--text)}
.field input:focus,.field select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--brass)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--alert)}
.err{min-height:1.2em;font-style:normal;font-size:.82rem;font-weight:500;color:var(--alert)}
.hp{position:absolute;left:-9999px}
.wiz-nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.5rem}
.wiz-status{margin-top:1rem;min-height:1.5em;color:var(--brass-hi);font-weight:500}
.wiz-status:empty{margin:0;min-height:0}
html:not(.js) [data-back],html:not(.js) [data-next]{display:none}
.js .wizard fieldset:not(.is-on){display:none}
.js .wizard:not([data-at="2"]) [type="submit"],.js .wizard[data-at="2"] [data-next]{display:none}
.js .wizard[data-at="0"] [data-back]{visibility:hidden}
.wizard.is-done fieldset,.wizard.is-done .wiz-nav,.wizard.is-done .wiz-steps{display:none}
.est-alt{margin-top:1.25rem;color:var(--fog)}
.est-alt a{color:var(--white);font-weight:600}
.est-map{align-self:stretch}
.map{height:100%;min-height:360px;display:grid;place-items:center;overflow:hidden;border-radius:6px;background:var(--ink-2);box-shadow:var(--lift)}
.map iframe{width:100%;height:100%;border:0}
.map a{color:var(--fog);padding:1rem}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-top:clamp(3.5rem,7vw,6rem)}
.foot-in{display:flex;justify-content:space-between;gap:clamp(2rem,6vw,6rem)}
.foot-brand{flex:0 1 380px;display:grid;gap:1.4rem;align-content:start;justify-items:start}
.foot-brand p{color:var(--fog);max-width:32ch}
.foot-social{display:flex;gap:.6rem}
.foot-social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;color:var(--fog);box-shadow:inset 0 0 0 1px var(--line);transition:color .25s,box-shadow .25s,transform .4s var(--ease)}
.foot-social a:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--fog);transform:translateY(-3px)}
.foot-cols{flex:0 1 640px;display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:clamp(1.5rem,4vw,4rem)}
.foot-cols h3{margin-bottom:1rem;font-size:1rem;font-weight:800}
.foot-cols ul{display:grid;gap:.7rem}
.foot-cols a{color:var(--fog);font-size:.95rem;text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
.foot-cols a:hover{color:var(--white)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.75rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--dim)}
.foot-bar a{color:var(--fog);font-weight:600;text-decoration:none;transition:color .2s}
.foot-bar a:hover{color:var(--white)}

/* Mobile action dock */
.dock{display:none}

/* Soft entrances. The hero copy and header arrive on load; blocks further down arrive as they scroll in. */
@keyframes enter{from{opacity:0;transform:translateY(26px) scale(.985)}}
@keyframes enter-soft{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}}
.site-head{animation:drop 1s var(--ease) backwards}
.hero-copy>*{animation:enter-soft 1.3s var(--ease) .1s backwards}
.hero-copy>.hero-sub{animation-delay:.28s}
.in:not(.is-in){opacity:0}
.in.is-in{animation:enter 1.1s var(--ease) backwards}
.in-soft.is-in{animation-name:enter-soft}

/* Light sweep reveal */
.js .reveal{clip-path:inset(0 100% 0 0)}
.js .reveal.is-in{clip-path:inset(0);transition:clip-path 1.2s var(--ease)}
/* The About photo reveals on its image, so the figure stays unclipped and its reflection can show. */
.js .about-shot.reveal{clip-path:none}
.js .about-shot.reveal:not(.is-in){box-shadow:none}
.js .about-shot.reveal img{clip-path:inset(0 100% 0 0)}
.js .about-shot.reveal.is-in img{clip-path:inset(0);transition:clip-path 1.2s var(--ease)}

@media (max-width:1040px){
  .nav{position:absolute;inset:72px 0 auto;display:grid;gap:0;padding:.5rem 1.25rem 1.25rem;background:var(--ink-0);box-shadow:0 1px 0 var(--ink-3),0 30px 40px -20px #000;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
  .nav.is-open{visibility:visible;opacity:1;transform:none}
  .nav a{padding:1rem 0;font-size:1.1rem;box-shadow:inset 0 -1px 0 var(--ink-3)}
  .nav a::after{display:none}
  /* Open menu: the bar goes solid with it, and the estimate button closes the list. */
  .site-head:has(.nav.is-open){background:var(--ink-0)}
  .nav .nav-cta{display:block;margin-top:1rem;padding:1.05rem 1rem;border-radius:3px;background:var(--brushed);background-color:var(--brass);color:var(--ink-0);box-shadow:none;font:800 .82rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;text-align:center}
  .menu-btn{display:block}
  .head-in{gap:.75rem}
}
@media (max-width:860px){
  .hero-copy,.about,.cards,.faq-in,.est-in{grid-template-columns:minmax(0,1fr)}
  .card,.card:nth-child(n+4){grid-column:auto;aspect-ratio:4/3}
  .faq h2{position:static}
  .foot-in{flex-direction:column}
  .foot-brand,.foot-cols{flex:none}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .foot-cols>div:last-child{grid-column:span 2}
  .map{height:auto;min-height:0;aspect-ratio:4/3}
  /* The reflection keeps one line of room under the headline before the subhead starts. */
  .mirror{margin-bottom:.75em}
  .mirror::after{-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 27%);mask-image:linear-gradient(to top,#000 0%,transparent 27%)}
  .band-in{justify-content:space-between}
  .about-shot{aspect-ratio:1;max-height:420px;-webkit-box-reflect:unset}
  .about-shot img{object-position:72% 50%}
  .fin-ui{grid-template-columns:minmax(0,1fr);margin-top:1rem}
  .swatches{justify-content:space-between}
  .rooms{-webkit-box-reflect:unset;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
  .room,.room:hover,.rooms:not(:hover):not(:focus-within) .room:first-child{flex:0 0 76vw;height:400px;scroll-snap-align:center}
  .quotes,.steps{grid-template-columns:minmax(0,1fr)}
  .steps::before,.steps::after{display:none}
  .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:center;padding:1.25rem;text-align:left}
  .steps li::before{position:static;translate:none;grid-row:span 2;box-shadow:none}
  .steps p{margin-top:.15rem}
}
@media (max-width:640px){
  body{padding-bottom:60px}
  .head-phone,.head-cta{display:none}
  .brand-word{font-size:1.25rem}
  .hero-copy{padding-bottom:clamp(2.75rem,8vh,4.5rem);gap:1rem}
  h1{font-size:clamp(2.2rem,10.4vw,3rem)}
  .band-in{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.85rem;padding-block:1rem}
  .band-tag{margin:0;text-align:center;font-size:.72rem}
  .band-phone{justify-content:center}
  .fields,.opts-5{grid-template-columns:minmax(0,1fr)}
  .wiz-nav .btn{flex:1;padding-inline:.9rem}
  .dock{position:fixed;inset:auto 0 0;z-index:60;display:grid;grid-template-columns:1fr 1.6fr;height:60px;background:var(--ink-1);box-shadow:0 -1px 0 var(--ink-3),0 -18px 30px -18px #000;transition:transform .5s var(--ease)}
  .js .dock:not(.is-on){transform:translateY(100%)}
  .dock a{display:flex;align-items:center;justify-content:center;gap:.5rem;font:800 .8rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
  .dock .dock-cta{background:var(--brushed);color:var(--ink-0)}
}
.opts-5 label:last-child{grid-column:span 2}
/* Touch screens: no sticky hover states. */
@media (hover:none){
  .reel:hover .reel-track{animation-play-state:running}
  .reel-item:hover{transform:none;filter:none}
  .steps li:hover{top:0}
}
/* Phone and small tablet finish: centered section heads, roomier tap targets, tighter forms. */
@media (max-width:860px){
  .mirror{margin-bottom:1em}
  .mirror::after{opacity:.26;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 30%);mask-image:linear-gradient(to top,#000 0%,transparent 30%)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:last-child{grid-column:span 2;aspect-ratio:2/1}
  .fin-head{justify-content:center;text-align:center}
  .fin-card{--head:calc(var(--fp) + 8.4rem);--fade:36px}
  .fin-card .fin-ui{margin-top:150px}
  .faq h2,.est-form>h2,.est-form>.lead,.est-alt{text-align:center}
  .brand{min-height:44px}
  .band-phone{padding-block:.35rem}
  .est-alt{line-height:1.3}
  .est-alt a{display:inline-block;padding-block:.7rem}
  .foot-cols{row-gap:1.25rem}
  .foot-cols h3{margin-bottom:.35rem}
  .foot-cols ul{gap:0}
  .foot-cols a,.foot-bar a{display:inline-block;padding-block:.75rem}
  .foot-bar{align-items:center;row-gap:0}
}
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .card,.card:nth-child(n+4),.card:last-child{grid-column:auto;aspect-ratio:1}
  .opts-5{grid-template-columns:repeat(2,1fr)}
  /* The forward button takes the full row, Back sits under it. */
  .wiz-nav{flex-direction:column-reverse}
  .js .wizard[data-at="0"] [data-back]{display:none}
}
/* Short phones: keep the brass band and its button inside the first screen. */
@media (max-width:640px) and (max-height:720px){
  .hero-copy{padding-top:84px;padding-bottom:1.5rem}
  .mirror{margin-bottom:.35em}
  .mirror::after{display:none}
  .hero-sub{font-size:1rem}
}
/* Narrow screens and touch: service cards rest in their revealed state, with no hover step. */
@media (max-width:860px),(hover:none){
  .card p{max-height:none;margin-top:.5rem;opacity:1;transform:none}
  .card img,.card:hover img,.card:focus-within img{opacity:.32;transform:none}
  .card::after{transform:scaleX(1)}
}
/* Phone hero: no brass band. A heavier scrim carries the copy, the button sits under it and the dock holds Call and Free Estimate. */
@media (max-width:640px){
  .band,.streaks{display:none}
  .hero::before{background:linear-gradient(180deg,rgba(6,6,7,.78) 0%,rgba(6,6,7,.38) 16%,rgba(6,6,7,.74) 40%,rgba(6,6,7,.94) 68%,var(--ink-0) 100%)}
  .hero-copy{padding-bottom:calc(60px + 1.75rem)}
  .mirror{margin-bottom:0}
  .mirror::after{display:none}
  h1,.hero-sub{text-shadow:0 2px 16px rgba(0,0,0,.65)}
  .hero-sub{color:var(--white)}
  .hero-cta{display:flex;margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .reveal,.js .about-shot.reveal img{clip-path:none}
  .steps::after{animation:none;background:none}
  .reel{overflow-x:auto}
  .in{opacity:1!important;animation:none!important}
  .site-head,.hero-copy>*{animation:none}
  .reel-track{animation:none}
}