/* Complete Clean: glass and water. */

/* 4.4 tokens */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Yq6W-LOTXCb04q32xlpwtsZfrxE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Yq6W-LOTXCb04q32xlpwtMZfrxE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Yq6W-LOTXCb04q32xlpwtcZfrxE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Yq6W-LOTXCb04q32xlpwu8Zf.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --frost:#CFE3F5;--frost-lite:#E6F0FA;--frost-deep:#B8D4EF;--mist:#F4F8FD;--white:#FFFFFF;
  --ink:#0F2338;--ink-soft:#3F566F;--steam:#1D4F86;--night:#1B2129;
  --accent:#0792E3;--sky:#A9D2F6;--charcoal:#323132;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-text:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-hero:clamp(3.35rem,15.2vw,8rem);
  --fs-giant:clamp(3.6rem,22vw,7.25rem);
  --fs-h2:clamp(2.6rem,12vw,6.5rem);
  --fs-h3:clamp(1.25rem,5.2vw,1.75rem);
  --fs-lead:clamp(1.125rem,4.7vw,1.5rem);
  --fs-phone:clamp(1.75rem,9.4vw,3.25rem);
  --fs-wordmark:clamp(3rem,15vw,11rem);
  --gut:20px;--header:68px;
  --vh:1vh;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-wipe:cubic-bezier(.66,0,.3,1);
}
@supports (height:1svh){:root{--vh:1svh}}
:root{--stage:calc(100*var(--vh));--travel:calc(85*var(--vh));--slant:calc(22*var(--vh))}
@media (min-width:720px){:root{--gut:32px;--header:76px}}
@media (min-width:1100px){:root{--gut:56px;--travel:calc(95*var(--vh))}}

/* 4.5 base, type utilities, focus */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 8px);overflow-x:clip}
/* Section links jump to the requested work; long pages need no animated fly-through. */
html.menu-open{overflow:hidden}
body{margin:0;background:var(--mist);color:var(--ink);font:500 1rem/1.6 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
@media (min-width:1100px){body{font-size:1.0625rem}}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--sky)}
.skip{position:absolute;left:12px;top:-80px;z-index:300;padding:14px 18px;border-radius:6px;background:var(--ink);color:var(--white);font-weight:700}
.skip:focus{top:12px}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;white-space:nowrap}
.ln__in{display:block}
.h2{font:800 calc(var(--fs-h2)*var(--fit,1))/.95 var(--f-display);letter-spacing:-.035em}
.kicker{margin-bottom:10px;font:700 1rem/1.3 var(--f-text);color:var(--ink-soft)}
.lead{max-width:34rem;font:500 var(--fs-lead)/1.5 var(--f-text)}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.on-dark .kicker{color:var(--frost)}

/* Header, buttons, tabs and mobile menu */
.top{position:relative;z-index:61;padding:10px 16px;background:var(--accent);color:var(--ink);text-align:center;font:600 .875rem/1.35 var(--f-text)}
.site-header{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;height:var(--header);padding:0 var(--gut);transition:background-color .3s,box-shadow .3s}
.site-header.is-stuck{background:rgba(207,227,245,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(15,35,56,.14)}
.menu-open .site-header{z-index:90;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.brand{display:block;align-self:flex-start;margin-right:auto;text-decoration:none}
.nav{display:none}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border:0;border-radius:6px;overflow:hidden;font:700 1.0625rem/1 var(--f-text);text-align:center;text-decoration:none;cursor:pointer;transform:skewX(-10deg);transition:background-color .2s}
.btn>span{display:block;transform:skewX(10deg)}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--white{background:var(--white);color:var(--ink)}
.btn.header-call{display:none;min-height:48px}
.btn.menu-toggle{min-height:48px;padding:0 24px}

.tab{position:absolute;z-index:2;display:block;padding:11px 18px;border-radius:4px;background:var(--accent);color:var(--ink);font:700 .875rem/1.2 var(--f-text);transform:skewX(-10deg);pointer-events:none}
.tab>span{display:block;transform:skewX(10deg)}

.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header) + 64px) var(--gut) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--charcoal);opacity:0;pointer-events:none}
.force-motion .menu{transition:opacity 150ms ease-out}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__link{display:flex;align-items:center;min-height:64px;font:800 clamp(1.9rem,9vw,2.75rem)/1 var(--f-display);letter-spacing:-.025em;text-decoration:none}
.menu__call{margin-top:18px}
.menu__mail{display:flex;align-items:center;min-height:48px;margin-top:10px;font-weight:600;overflow-wrap:anywhere}
.menu__note{margin-top:10px;color:var(--ink-soft)}

@media (min-width:1100px){
  .nav{display:flex;gap:6px;margin-right:12px}
  .nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-weight:600;text-decoration:none}
  .nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;background:var(--ink);transform:skewX(-14deg) scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
  .nav a:hover::after,.nav a:focus-visible::after{transform:skewX(-14deg) scaleX(1)}
  .btn.header-call{display:inline-flex}
  .btn.menu-toggle,.menu{display:none}
}

/* 5.5 the sweep (squeegee pass) */
.pane__fog{position:absolute;inset:0;z-index:3;display:none;pointer-events:none}
.force-motion .pane__fog{display:block}
.pane--shower .pane__fog{transform:scaleX(-1)}
.sweep{--s:var(--slant);position:absolute;top:0;bottom:0;left:0;width:calc(100% + var(--s));transform:translate3d(calc(var(--p,0)*(100vw + var(--s)) - var(--s)),0,0);will-change:transform;pointer-events:none}
.sweep>i,.sweep>b{position:absolute;display:block}
.sweep__sheet{inset:0;z-index:1;clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%);background:url(../img/beads.svg?v=6) 20px 40px/520px 520px,url(../img/frost.svg) 0 0/240px 240px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}
.sweep__wet{top:0;bottom:0;left:-36px;width:calc(var(--s) + 36px);z-index:0;clip-path:polygon(var(--s) 0,calc(var(--s) + 36px) 0,36px 100%,0 100%);background:linear-gradient(270deg,rgba(255,255,255,.6),rgba(255,255,255,0))}
.sweep__chan{top:0;bottom:0;left:0;width:calc(var(--s) + 44px);z-index:2;clip-path:polygon(calc(var(--s) + 16px) 0,calc(var(--s) + 44px) 0,44px 100%,16px 100%);background:linear-gradient(90deg,#FFFFFF,#BAD3EC 50%,#86A9CF)}
.sweep__blade{top:0;bottom:0;left:0;width:calc(var(--s) + 16px);z-index:3;clip-path:polygon(var(--s) 0,calc(var(--s) + 16px) 0,16px 100%,0 100%);background:var(--night)}
.sweep__grip{z-index:4;top:50%;left:calc(var(--s)*.5 + 30px);width:34px;height:170px;margin:-85px 0 0 -17px;border-radius:17px;transform:rotate(12.4deg);background:linear-gradient(90deg,#D5F2FF,#0792E3 42%,#085786);box-shadow:0 6px 14px rgba(27,33,41,.35)}
.bead{--y:.5;--lag:20px;--d:14px;--run:60px;z-index:2;left:calc(var(--s)*(1 - var(--y)) - var(--lag) - var(--d)/2);top:calc(var(--y)*100%);width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 9%,rgba(255,255,255,.4) 10% 34%,rgba(255,255,255,.12) 62%,rgba(15,35,56,.22) 100%);box-shadow:inset -1px -2px 3px rgba(255,255,255,.6),0 2px 4px rgba(15,35,56,.28);transform:translate3d(0,calc(var(--p,0)*var(--run)),0)}
.bead::before{content:"";position:absolute;left:calc(50% - 1px);bottom:50%;width:2px;height:var(--run);transform-origin:50% 100%;transform:scaleY(var(--p,0));background:linear-gradient(to top,rgba(255,255,255,.75),rgba(255,255,255,0))}
.bead:nth-of-type(1){--y:.08;--lag:14px;--d:10px;--run:90px}
.bead:nth-of-type(2){--y:.18;--lag:30px;--d:16px;--run:150px}
.bead:nth-of-type(3){--y:.29;--lag:10px;--d:12px;--run:110px}
.bead:nth-of-type(4){--y:.41;--lag:38px;--d:20px;--run:190px}
.bead:nth-of-type(5){--y:.52;--lag:18px;--d:11px;--run:80px}
.bead:nth-of-type(6){--y:.63;--lag:28px;--d:15px;--run:130px}
.bead:nth-of-type(7){--y:.77;--lag:12px;--d:13px;--run:60px}
.bead:nth-of-type(8){--y:.88;--lag:34px;--d:18px;--run:40px}
@media (min-width:1100px) and (hover:hover){
  .pane{--fog-alpha:.76}
  .pane--shower{--fog-alpha:.8}
  .pane--biz{--fog-alpha:.84}
  .sweep__sheet{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
}

/* 6.2 hero */
.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:calc(-1*var(--header));padding:calc(var(--header) + 20px) var(--gut) 0;min-height:calc(100*var(--vh));background:linear-gradient(168deg,var(--frost-lite) 0%,var(--frost) 46%,var(--frost-deep) 100%)}
.hero__glass{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__glass i{position:absolute;display:block}
.hero__frost{inset:0;background:url(../img/frost.svg) 0 0/240px 240px;opacity:.55}
.hero__beads{inset:0;background:url(../img/beads.svg?v=6) 0 0/520px 520px;opacity:.85;-webkit-mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.22) 62%,#000 100%);mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.22) 62%,#000 100%)}
.hero__drips{top:0;right:0;bottom:0;width:100%;max-width:480px;background:url(../img/drips.svg?v=2) right top/480px 900px no-repeat;opacity:.9}
.hero__light{top:-10%;bottom:-10%;transform:skewX(-16deg)}
.hero__light--a{left:14vw;width:40vw;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62) 42%,rgba(255,255,255,.14) 72%,rgba(255,255,255,0))}
.hero__light--b{left:62vw;width:9vw;background:linear-gradient(90deg,rgba(15,35,56,0),rgba(15,35,56,.07),rgba(15,35,56,0))}
.hero__inner{position:relative;z-index:2}
.hero__title{font:800 calc(var(--fs-hero)*var(--fit,1))/.96 var(--f-display);letter-spacing:-.035em;isolation:isolate}
.hero__title .ln--2 .ln__in{font-weight:300}
.ln--3{position:relative}
.ln--3::before{content:"";position:absolute;z-index:0;left:0;right:.05em;bottom:.22em;height:.3em;background:var(--accent);transform:skewX(-14deg);transform-origin:0 50%}
.ln--3 .ln__in{position:relative;z-index:1}
.hero__foot .lead{margin-top:22px;max-width:22rem}
.hero__actions{display:grid;gap:6px;margin-top:22px;max-width:24rem}
.hero__actions .link{justify-self:start}
.hero__window{position:relative;z-index:2;height:calc(52*var(--vh));min-height:360px;margin:26px calc(-1*var(--gut)) 0}
.win{position:absolute;inset:0;overflow:hidden;background:var(--frost);border-radius:50%}
.win img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;object-position:50% 36%}
.win::after{content:"";position:absolute;inset:0;background:url(../img/beads.svg?v=6) 40px 20px/520px 520px;opacity:.5;pointer-events:none}
.hero__blade{position:absolute;z-index:3;right:-34px;top:2%;width:220px;transform:rotate(-24deg);filter:drop-shadow(0 8px 10px rgba(27,33,41,.3));pointer-events:none}
.hero__window .tab{left:var(--gut);top:20%}
@media (min-width:720px) and (max-width:1099px){
  .hero__window{max-width:860px;margin:32px auto 0}
  .hero__window .tab{left:24px}
}
@media (min-width:1100px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 520px;column-gap:48px;padding:calc(var(--header) + 40px) var(--gut) 0}
  .hero__inner{display:flex;flex-direction:column;justify-content:space-between;padding:12px 0 calc(9*var(--vh))}
  .hero__foot .lead{margin-top:0;max-width:34rem}
  .hero__actions{display:flex;align-items:center;gap:28px;max-width:none}
  .hero__window{align-self:end;height:auto;min-height:min(calc(84*var(--vh)),780px);margin:0 calc(-1*var(--gut)) 0 0}
  .hero__blade{right:auto;left:-150px;top:5%;width:300px;transform:rotate(-12deg)}
  .hero__window .tab{left:36px;top:24%}
  .hero__light--a{left:12vw;width:34vw}
}

/* 6.3 panes: Homes, Shower, Business */
.pane{--p:0;--fog-a:230 240 250;--fog-b:207 227 245;--fog-alpha:.95;position:relative;background:var(--mist);color:var(--ink)}
.pane__track{position:relative}
.pane__anchor{position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden}
.pane__stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:var(--stage);overflow:hidden;background:var(--mist)}
.pane__room{position:relative;z-index:1;grid-row:1;min-height:0;max-height:1100px;overflow:hidden;background:var(--frost)}
.pane__room img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;object-position:50% 38%;transform:translate3d(0,calc((var(--p) - .5)*-4%),0)}
.pane__room .tab{left:var(--gut);bottom:20px}
.pane__copy{position:relative;z-index:5;grid-row:2;padding:20px var(--gut)}
.pane__copy .lead{margin-top:12px;max-width:30rem;font-size:1.0625rem;line-height:1.55}
.pane__copy .btn{display:flex;width:100%;max-width:24rem;margin-top:18px}
.force-motion .pane__track{height:calc(var(--stage) + var(--travel))}
.force-motion .pane__stage{position:sticky;top:0;height:var(--stage);min-height:0}
.force-motion .pane__anchor{top:calc(var(--travel)*.86 + var(--header) + 8px)}

/* Shower: steam, right-to-left pass */
.pane--shower{--fog-a:38 82 134;--fog-b:27 62 106;background:var(--ink);color:var(--white)}
.pane--shower .pane__stage{grid-template-rows:auto minmax(0,1fr) auto;padding-top:calc(var(--header) + 4px);background:radial-gradient(120% 90% at 50% 38%,var(--steam) 0%,var(--ink) 72%)}
.shower__word{grid-row:1;position:relative;z-index:5;padding:0 var(--gut);font:800 calc(var(--fs-giant)*var(--fit,1))/.9 var(--f-display);letter-spacing:-.04em}
.shower__word .w2 .ln__in{text-align:right;color:var(--sky)}
.pane--shower .pane__room{grid-row:2;justify-self:center;height:100%;aspect-ratio:878/1177;max-width:calc(100% - 2*var(--gut));max-height:none;margin:8px 0;border:10px solid var(--night);border-radius:4px;background:var(--night);box-shadow:0 0 0 2px rgba(255,255,255,.16),0 30px 60px rgba(0,0,0,.35)}
.pane--shower .pane__room::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.22) 0 14%,rgba(255,255,255,0) 14% 100%)}
.pane--shower .pane__room .tab{left:12px;bottom:18px;z-index:3}
.pane--shower .pane__copy{grid-row:3}
.pane--shower .lead{color:var(--white)}
.pane--shower .link{color:var(--white)}

/* Business: night, the drawing fills the stage */
.pane--biz{--fog-a:48 56 68;--fog-b:33 39 48;background:var(--night);color:var(--white)}
.pane--biz .pane__stage{background:var(--night)}
.pane--biz .pane__room{position:absolute;inset:0;max-height:none;background:var(--night)}
.pane--biz .pane__room img{object-position:50% 42%}
.pane--biz .pane__copy{grid-row:2;padding-top:120px;background:linear-gradient(to top,rgba(27,33,41,.97) 56%,rgba(27,33,41,0))}
.pane--biz .lead{color:var(--white)}
.biz__shine{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.biz__shine i{position:absolute;top:44%;bottom:-6%;left:32%;width:34%;background:linear-gradient(90deg,rgba(7,146,227,0),rgba(7,146,227,.3),rgba(7,146,227,0));transform:translate3d(calc((var(--p) - .5)*60vw),0,0) skewX(-14deg)}

@media (min-width:720px){
  .pane__room{width:100%;max-width:860px;justify-self:center}
  .pane__copy{width:100%;max-width:640px;justify-self:center;padding-bottom:28px}
  .pane--shower .pane__room{width:auto;max-width:calc(100% - 2*var(--gut))}
  .pane--biz .pane__room{max-width:none}
}
@media (min-width:1100px){
  .pane__stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr)}
  .pane__copy{grid-column:1;grid-row:1;align-self:end;justify-self:stretch;max-width:none;padding:0 var(--gut) 72px}
  .pane__copy .lead{font-size:1.125rem}
  .pane__copy .btn{display:inline-flex;width:auto}
  .pane__room{grid-column:2;grid-row:1;justify-self:end;margin-top:var(--header)}
  .pane__room .tab{left:28px;bottom:48px}

  .pane--shower .pane__stage{grid-template-columns:1fr minmax(0,500px) 1fr;padding:calc(var(--header) + 24px) var(--gut) 56px}
  .shower__word{grid-column:1/-1;grid-row:1;align-self:stretch;display:flex;justify-content:space-between;padding:0}
  .shower__word .w1{align-self:flex-start}
  .shower__word .w2{align-self:flex-end}
  .pane--shower .pane__room{grid-column:2;grid-row:1;max-width:none;margin:0;justify-self:stretch}
  .pane--shower .pane__copy{grid-column:1;grid-row:1;align-self:end;max-width:26rem;padding:0 0 4px}

  .pane--biz .pane__room{grid-column:auto;grid-row:auto;margin-top:0;max-width:none}
  .pane--biz .pane__copy{grid-row:1;align-self:center;justify-self:start;width:100%;max-width:640px;padding:0 var(--gut);background:none}
}
@media (max-height:560px){
  .force-motion .pane__track{height:auto}
  .force-motion .pane__stage{position:relative;display:block;height:auto;min-height:0}
  .force-motion .pane__fog{display:none}
  .force-motion .pane__anchor{top:0}
  .pane__room,.pane--shower .pane__room,.pane--biz .pane__room{position:relative;inset:auto;display:block;width:auto;height:min(70vw,420px);margin:0 auto}
  .pane--shower .pane__room{width:min(52vw,300px);aspect-ratio:auto;margin:16px auto}
}

/* 6.4 rooms: swipe rail */
.rooms{position:relative;padding:72px 0 88px;background:var(--white)}
.rooms__head{padding:0 var(--gut)}
.rooms__aside .lead{margin-top:18px}
.rooms__aside .link{margin-top:8px}
.rail{display:flex;gap:14px;margin-top:20px;padding:12px var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.card{position:relative;flex:0 0 78vw;max-width:340px;scroll-snap-align:start}
.card__img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--frost)}
.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__img .tab{left:12px;bottom:18px;z-index:1}
.card__title{margin-top:16px;font:700 var(--fs-h3)/1.15 var(--f-display);letter-spacing:-.01em}
.card__fog{display:none}
.card:nth-child(1){--i:0}.card:nth-child(2){--i:1}.card:nth-child(3){--i:2}.card:nth-child(4){--i:3}
.force-motion .card__fog{display:block;position:absolute;inset:0 -14% 0 0;z-index:2;pointer-events:none;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);background:url(../img/beads.svg?v=6) 10px 20px/520px 520px,url(../img/frost.svg) 0 0/240px 240px,linear-gradient(162deg,rgba(230,240,250,.96),rgba(207,227,245,.96));transition:transform 1s var(--ease-wipe) calc(var(--i,0)*90ms)}
.force-motion .card.is-visible .card__fog{transform:translate3d(118%,0,0)}
@media (min-width:720px){.card{flex-basis:300px}}
@media (min-width:1100px){
  .rooms{padding:112px 0 120px}
  .rooms__head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
  .rooms__aside .lead{margin-top:0}
  .rail{gap:24px;margin-top:56px;padding-bottom:0;overflow:visible}
  .card{flex:1 1 0;max-width:none}
  .card:nth-child(2){margin-top:56px}
  .card:nth-child(3){margin-top:112px}
  .card:nth-child(4){margin-top:168px}
}

/* 6.5 up close: blade-cut frames */
.closer{position:relative;overflow:clip;padding:72px var(--gut) 96px;background:var(--frost)}
.closer::before{content:"";position:absolute;top:0;right:0;width:520px;height:520px;background:url(../img/beads.svg?v=6) 0 0/520px 520px;opacity:.5;pointer-events:none}
.closer__head{position:relative}
.closer__head .lead{margin-top:14px}
.closer__blade{position:relative;right:-24px;display:block;width:210px;margin:14px 0 0 auto;transform:rotate(-14deg);pointer-events:none}
.closer__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:36px}
.closer__col{display:grid;gap:12px}
.closer__col:nth-child(2){margin-top:44px}
.shot__img{position:relative;overflow:hidden;background:var(--frost-deep);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.shot__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot--range .shot__img{aspect-ratio:1/1}
.shot--range img{object-position:50% 40%}
.shot--island .shot__img{aspect-ratio:5/7}
.shot--island img{left:-14%;width:114%;object-position:50% 45%}
.shot--sink .shot__img{aspect-ratio:4/5}
.shot--sink img{object-position:50% 60%}
.shot--chair .shot__img{aspect-ratio:3/4}
.shot__cap{display:grid;gap:2px;margin-top:10px}
.shot__cap b{font:600 .9375rem/1.3 var(--f-text)}
.shot__cap span{font:500 .875rem/1.3 var(--f-text);color:var(--ink-soft)}
@media (min-width:1100px){
  .closer{display:grid;grid-template-columns:4fr 8fr;gap:48px;padding:128px var(--gut) 144px}
  .closer__head{align-self:start}
  .closer__blade{position:static;display:block;width:360px;margin-top:56px;transform:rotate(-10deg)}
  .closer__grid{margin-top:0;gap:24px}
  .closer__col{gap:24px}
  .closer__col:nth-child(2){margin-top:72px}
  .shot__cap b{font-size:1rem}
}

/* 6.6 contact and questions */
.contact{--cut:34px;position:relative;z-index:2;margin-top:calc(-1*var(--cut));padding:calc(var(--cut) + 60px) var(--gut) 88px;background:linear-gradient(115deg,rgba(255,255,255,.34) 0 16%,rgba(255,255,255,0) 16% 100%),var(--accent);color:var(--ink);clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.contact__in{max-width:1328px;margin:0 auto}
.contact__lead .lead{margin-top:18px}
.town{margin-top:18px;font-weight:600}
.contact__lead .link{display:flex}
.reach{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:30px}
.reach__a{position:relative;isolation:isolate;display:block;min-width:0;min-height:76px;padding:16px 22px;text-decoration:none}
.reach__a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:var(--white);transform:skewX(-6deg)}
.reach__a--call{color:var(--sky)}
.reach__a--call::before{background:var(--ink)}
.reach__k{display:block;font:700 1rem/1.3 var(--f-text)}
.reach__v{display:block;margin-top:4px;font:600 1.0625rem/1.35 var(--f-text);overflow-wrap:anywhere}
.reach__v--phone{font:800 calc(var(--fs-phone)*var(--fit,1))/1.05 var(--f-display);letter-spacing:-.03em;overflow-wrap:normal}
.faq{margin-top:28px}
.faq details{margin-top:10px;border-radius:8px;background:rgba(255,255,255,.66)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 18px;font:700 1.0625rem/1.35 var(--f-text);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 18px;max-width:40rem}
@media (min-width:1100px){
  .contact{--cut:72px;padding:calc(var(--cut) + 96px) var(--gut) 120px}
  .contact__in{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:start}
  .contact__lead{grid-column:1;grid-row:1}
  .faq{grid-column:1;grid-row:2;margin-top:48px}
  .reach{grid-column:2;grid-row:1/span 2;margin-top:12px;gap:18px}
  .reach__a{padding:24px 30px}
  .reach__a--call{padding:32px 30px 36px}
}

/* 6.7 footer */
.foot{position:relative;overflow:clip;padding:72px var(--gut) calc(44px + env(safe-area-inset-bottom));background:var(--night);color:var(--white)}
.foot__line{position:relative;z-index:1;max-width:24rem;margin-top:24px;font:500 1.0625rem/1.55 var(--f-text)}
.foot__nav,.foot__motion{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:20px}
.foot__nav a,.foot__nav button,.foot__motion a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;border:0;background:none;font:600 1rem/1 var(--f-text);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.foot__photos,.foot__notice{position:relative;z-index:1;margin-top:16px;color:var(--frost);font-size:.875rem;line-height:1.6}
.foot__blade{display:none}
@media (min-width:1100px){
  .foot{padding:128px var(--gut) 56px}
  .foot__blade{display:block;position:absolute;z-index:0;right:-40px;bottom:-20px;width:480px;transform:rotate(-12deg);opacity:.9;pointer-events:none}
}

/* 6.8 consent banner and settings dialog (consent.js is unchanged) */
.cc-banner{position:fixed;z-index:100;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);padding:20px;border-radius:8px;background:var(--white);color:var(--ink);box-shadow:0 12px 50px rgba(27,33,41,.28)}
.cc-banner[hidden]{display:none}
.menu-open .cc-banner{visibility:hidden;pointer-events:none}
.cc-title{font:800 1.25rem/1.1 var(--f-display)}
.cc-text{margin-top:10px;font-size:.9375rem;line-height:1.6}
.cc-text a{font-weight:600;text-decoration:underline}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cc-btn,.cc-link{min-width:72px;min-height:44px;padding:10px 16px;border:2px solid var(--ink);border-radius:6px;background:transparent;font:700 .9375rem/1 var(--f-text);cursor:pointer}
.cc-btn[data-cc=accept],.cc-primary{background:var(--ink);color:var(--white)}
.cc-link{border-color:transparent;text-decoration:underline}
.cc-gpc{margin-top:10px;font-size:.875rem;line-height:1.5}
.cc-dialog{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:28px 24px;border:0;border-radius:10px;background:var(--white);color:var(--ink);overflow:auto}
.cc-dialog::backdrop{background:rgba(27,33,41,.6)}
.cc-dialog h2{font:800 1.5rem/1.1 var(--f-display)}
.cc-dialog p{margin-top:14px;font-size:.9375rem;line-height:1.65}
.cc-dialog fieldset{margin:16px 0 0;padding:0;border:0}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:16px 0;border-top:1px solid rgba(15,35,56,.18);font-size:.9375rem}
.cc-row span{display:block;margin-top:4px;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.cc-row input{flex:none;width:24px;height:24px;accent-color:var(--ink)}
@media (min-width:1100px){.cc-banner{left:auto;right:24px;bottom:24px;width:440px}}

/* 6.9 legal pages */
.legal{padding:48px var(--gut) 96px;background:var(--mist)}
.legal__in{max-width:46rem;margin:0 auto}
.legal h1{margin-top:6px;font:800 clamp(2.2rem,10vw,4.5rem)/1.02 var(--f-display);letter-spacing:-.035em;overflow-wrap:anywhere}
.legal h2{margin-top:36px;font:700 clamp(1.375rem,5.6vw,1.75rem)/1.2 var(--f-display);letter-spacing:-.01em}
.legal p:not(.kicker){margin-top:14px;font-size:1.0625rem;line-height:1.7}
.legal p a{font-weight:600;text-decoration:underline;overflow-wrap:anywhere}
.legal .link{margin-top:28px}

/* 7.9 motion (last block) */
.force-motion .hero__title .ln__in{animation:rise .95s var(--ease) both}
.force-motion .ln--1 .ln__in{animation-delay:1.55s}
.force-motion .ln--2 .ln__in{animation-delay:1.65s}
.force-motion .ln--3 .ln__in{animation-delay:1.75s}
.force-motion .ln--3::before{animation:streak .7s var(--ease) 2.05s both}
.force-motion .hero__window{animation:arrive .9s var(--ease) 1.7s both}
.force-motion .hero__foot{animation:arrive .8s var(--ease) 1.95s both}
.force-motion .hero__light{animation:lightDrift 16s ease-in-out infinite alternate}
.force-motion .hero__light--b{animation-duration:22s}
.force-motion .reveal{transform:translate3d(0,12px,0);transition:transform .4s var(--ease)}
.force-motion .reveal.is-visible{opacity:1;transform:none}
.force-motion .closer__col .shot:nth-child(2){transition-delay:.12s}
@media (hover:hover){.btn:hover>span{text-decoration:underline;text-underline-offset:.2em}}
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes rise{from{transform:translate3d(0,112%,0)}to{transform:translate3d(0,0,0)}}
@keyframes streak{from{transform:skewX(-14deg) scaleX(0)}to{transform:skewX(-14deg) scaleX(1)}}
@keyframes arrive{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes lightDrift{from{transform:skewX(-16deg) translate3d(-3vw,0,0)}to{transform:skewX(-16deg) translate3d(3vw,0,0)}}

/* Refinements */
/* Phone: short screens keep a real photo and a one-line shower title. The Rooms bar cell covers the two hidden links. */
@media (max-width:719px) and (max-height:760px){
  .shower__word{display:flex;justify-content:space-between;align-items:baseline;gap:.2em;font-size:calc(14vw*var(--fit,1))}
  .shower__word .ln{flex:none}
  .pane--shower .pane__copy .link{display:none}
  .pane--shower .pane__room .tab{white-space:nowrap}
  .hero__actions .link{display:none}
  .hero__window{margin-top:14px}
  .hero__foot .lead{margin-top:14px}
  .hero__actions{margin-top:14px}
}
@media (max-width:719px) and (max-height:620px){.pane--shower .pane__room .tab{display:none}}
/* Kitchen island fills its frame (the global img max-width was clamping the 114 percent width) */
.shot--island img{max-width:none}
/* Phone: the header keeps no backdrop blur during the wipes */
@media (max-width:1099px){.site-header.is-stuck{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(207,227,245,.96)}}
/* Phone: sentences at 16px or more */
.foot__photos,.foot__notice,.cc-text,.cc-gpc,.cc-dialog p,.cc-row span{font-size:1rem}
/* Lime budget: the Menu and the header call go ink */
.top{background:var(--ink);color:var(--white)}
.btn.menu-toggle,.btn.header-call{background:var(--ink);color:var(--white)}
/* Surfaces: beads stay off the photo; the fog on the dark panes reads as steam */
.win::after{display:none}
.pane--shower .sweep__sheet,.pane--biz .sweep__sheet{background:url(../img/beads.svg?v=6) 20px 40px/520px 520px,url(../img/frost-dark.svg?v=5) 0 0/480px 480px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}
.pane--homes .pane__stage{background:url(../img/frost.svg) 0 0/240px 240px,linear-gradient(168deg,var(--mist) 0%,var(--frost-lite) 100%)}
/* Business: a white floor shine that fades in and out, with no hard slab on the wall */
.biz__shine i{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));opacity:calc(var(--p)*(1 - var(--p))*4);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
/* Sweep: the wrapper ends 60px past the edge, so no bead is left at the screen edge after a pass */
.sweep{transform:translate3d(calc(var(--p,0)*(100vw + var(--s) + 60px) - var(--s)),0,0)}
/* The resting squeegee slides into place. */
.hero__blade{--r:-24deg;transform:rotate(var(--r))}
@media (min-width:1100px){.hero__blade{--r:-12deg}}
.force-motion .hero__blade{animation:bladeRest 1.1s var(--ease) 1.85s both}
@keyframes bladeRest{from{opacity:0;transform:translate3d(-120px,-46px,0) rotate(var(--r))}to{opacity:1;transform:rotate(var(--r))}}
/* Desktop: the headline stops short of the lit door, and "gone." clears it */
@media (min-width:1100px){.pane--biz .h2{font-size:calc(clamp(3.5rem,5.4vw,6.5rem)*var(--fit,1))}}
@media (min-width:1100px) and (max-width:1365px){
  .pane--shower .pane__stage{grid-template-columns:1fr 34vw 1fr}
  .shower__word{font-size:calc(7.6vw*var(--fit,1))}
}
/* The lime streak stops at the word */
.ln--3::before{right:auto;width:min(100%,5.7em)}

/* Refinements */
/* The wipe's grip is a ribbed squeegee handle, not a lime pill */
.sweep__grip{width:30px;height:138px;margin:-69px 0 0 -15px;border-radius:12px;background:repeating-linear-gradient(0deg,rgba(7,71,110,0) 0 11px,rgba(7,71,110,.42) 11px 14px,rgba(255,255,255,.28) 14px 16px) center/100% 62% no-repeat,linear-gradient(90deg,#D5F2FF,#66C8FF 28%,#0792E3 64%,#085786);box-shadow:0 8px 16px rgba(27,33,41,.4),inset 0 0 0 1px rgba(7,71,110,.25)}
/* Fog on the dark panes: lower contrast, wider haze (steam, not pool water) */
.pane--shower .sweep__sheet,.pane--biz .sweep__sheet{background:url(../img/beads.svg?v=6) 20px 40px/520px 520px,url(../img/frost-dark.svg?v=6) 0 0/960px 960px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}
/* Phone: the squeegee drawing clears the Kitchen tab */
@media (max-width:719px){.hero__blade{right:-56px;width:196px;top:3%}}
/* Phone, short screens: the Business ceiling light sits below the header and off the copy */
@media (max-width:719px) and (max-height:760px){.pane--biz .pane__room img{top:-10%}}
/* Tablet: the Business copy is a band across the drawing, not a 640px dark box with hard edges */
@media (min-width:720px) and (max-width:1099px){.pane--biz .pane__copy{max-width:none;padding-left:calc((100% - 576px)/2);padding-right:calc((100% - 576px)/2)}}
/* Desktop: Up close keeps its heading beside the photos as they scroll */
@media (min-width:1100px){
  .closer__head{position:sticky;top:calc(var(--header) + 40px)}
  .closer__blade{width:300px;margin-top:40px}
}
/* Big monitors: the shower door fills the stage height and "gone." clears it */
@media (min-width:1100px) and (min-aspect-ratio:3/2){
  .pane--shower{--door:min(calc((var(--stage) - var(--header) - 80px)*.746),820px)}
  .pane--shower .pane__stage{grid-template-rows:minmax(0,1fr);grid-template-columns:1fr var(--door) 1fr}
  .pane--shower .pane__room{height:100%;max-height:1040px;align-self:center}
  .pane--shower .pane__copy{padding-right:24px}
  .shower__word{font-size:calc(min(14rem,(100vw - 112px - var(--door))/7.2)*var(--fit,1))}
}
/* Big monitors: Homes fills its frame instead of leaving a pale wall */
@media (min-width:1500px) and (min-height:960px){
  .pane--homes .pane__room{max-width:940px}
  .pane--homes .h2{font-size:calc(clamp(6.5rem,8.4vw,11rem)*var(--fit,1))}
  .pane--homes .pane__copy .lead{font-size:1.375rem;max-width:40rem}
  .pane--homes .pane__copy{padding-bottom:96px}
}
/* Typography: the a and n of Clean are not fused at the largest sizes (the a is wrapped in i.ka) */
.ka{font-style:normal;margin-right:.05em}
/* Typography: the comma in "Rooms," clears the descender line below it */
.rooms__head .h2 .ln+.ln{margin-top:.07em}

/* Refinements */
.h2{letter-spacing:-.022em}
.shower__word{letter-spacing:-.025em}
.hero__title{letter-spacing:-.028em}
@media (min-width:1100px){:root{--fs-wordmark:min(15vw,18rem)}}
@media (max-width:719px){.pane--biz .pane__room img{top:-12%}}
@media (max-width:719px) and (min-height:761px){.pane--shower .pane__stage{padding-top:calc(var(--header) + 14px)}}
/* Header over the night panes and the footer: ink glass, pale mark. The menu keeps its frost sheet look. */
.site-header.over-dark{background:rgba(27,33,41,.94);color:var(--white);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.site-header.over-dark .btn.menu-toggle,.site-header.over-dark .btn.header-call{background:var(--frost);color:var(--ink)}
.site-header.over-dark .nav a::after{background:var(--accent)}
.site-header.over-dark :focus-visible{outline-color:var(--sky)}
.menu-open .site-header.over-dark{background:transparent;color:var(--ink);box-shadow:none}
.menu-open .site-header.over-dark .btn.menu-toggle{background:var(--ink);color:var(--white)}
/* Photo edges: the screen capture left a dark column at one edge; the 0.5 percent crop removes it. Files are not changed. */
.card__img img,.pane--homes .pane__room img,.shot--sink img,.shot--chair img,.shot--range img{left:-.5%;width:101%;max-width:none}
/* Fog on the dark panes: finer beads and the wider haze tile */
.pane--shower .sweep__sheet,.pane--biz .sweep__sheet{background:url(../img/beads.svg?v=6) 20px 40px/340px 340px,url(../img/frost-dark.svg?v=6) 0 0/960px 960px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}
/* Desktop hero: the photo's left edge melts into the frost */
@media (min-width:1100px){.win::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:84px;background:linear-gradient(90deg,rgba(207,227,245,.95),rgba(207,227,245,0));pointer-events:none}}
/* Big monitors: the headline and the window scale up from 1600 px */
@media (min-width:1600px){:root{--fs-hero:clamp(8rem,8.6vw,12rem)}.hero{grid-template-columns:minmax(0,1fr) 720px}}
/* Up close: the column stops growing, so the island photo never scales past its pixels */
.closer__grid{max-width:1520px;justify-self:end}
/* Phone hero contact links */
@media (max-width:719px){.hero__actions .link{display:none}}
/* Up close: the grid keeps its full column width */
.closer__grid{width:100%}
/* Up close: the heading fits its own column, so the photos keep 8 of 12 columns from 1100 px up */
@media (min-width:1100px){.closer{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
/* Phone and tablet: the stuck header is solid, so no text or corridor light shows through it */
@media (max-width:1099px){
}
/* Phone: the g of "gone." clears the door frame */
@media (max-width:719px) and (min-height:761px){.shower__word{padding-bottom:10px}}
/* Phone: Up close photos stand large, alternating left and right */
@media (max-width:719px){
  .closer__grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:20px}
  .closer__col{gap:22px}
  .closer__col:nth-child(2){margin-top:0}
  .shot{width:84%}
  .shot--island,.shot--chair{margin-left:auto}
}
/* Kitchen island: the file is cropped, so the frame shows it whole */
.shot--island img{left:0;width:100%}
/* Fog: fine condensation under the big beads, and no visible repeat */
.sweep__sheet{background:url(../img/beads.svg?v=6) 20px 40px/520px 520px,url(../img/beads.svg?v=6) 7px 13px/211px 211px,url(../img/beads.svg?v=6) 91px 57px/143px 143px,url(../img/frost.svg) 0 0/240px 240px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}
.pane--shower .sweep__sheet,.pane--biz .sweep__sheet{background:url(../img/beads.svg?v=6) 20px 40px/340px 340px,url(../img/beads.svg?v=6) 7px 13px/149px 149px,url(../img/frost-dark.svg?v=6) 0 0/960px 960px,linear-gradient(162deg,rgb(var(--fog-a)/var(--fog-alpha)),rgb(var(--fog-b)/var(--fog-alpha)))}

/* ===== Interaction styles, 2026-11-05 ===== */
/* A sideways wipe must never read as the browser's back gesture */
html,body{overscroll-behavior-x:none}
/* Type floor: nothing under 16 px, and phone numbers never wrap inside a button */
.top,.tab,.shot__cap b,.shot__cap span,.cc-text,.cc-btn,.cc-link,.cc-row,.cc-row span,.cc-dialog p,.cc-gpc{font-size:1rem}
.btn{white-space:nowrap}
/* Header: quote button; the phone number shows in full from 1280 px, and "Call" below that */
.btn.header-quote{display:none;min-height:48px;padding:0 22px}
.call-long{display:none}
.call-short{display:inline}
@media (min-width:1100px){
  .btn.header-quote{display:inline-flex}
  .nav{gap:2px;margin-right:6px}
  .nav a{padding:0 10px;white-space:nowrap}
  .nav a[aria-current]::after{transform:skewX(-14deg) scaleX(1)}
  .btn.header-call{padding:0 20px}
}
@media (min-width:1280px){
  .call-short{display:none}
  .call-long{display:inline}
  .nav a{padding:0 14px}
  .btn.header-call{padding:0 26px}
}
/* Phone menu: seven links and two buttons still fit a short screen */
.menu{justify-content:flex-start;padding-top:calc(var(--header) + 44px)}
.menu__link{min-height:50px;font-size:clamp(1.5rem,7vw,2.25rem)}
.menu__quote{margin-top:16px}
.menu__call{margin-top:10px}
/* Two actions side by side in a pane; the wide label comes back when there is room */
.pane__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:26rem;margin-top:16px}
.pane__btns .btn{margin-top:0;width:100%;padding:0 10px}
.pane__btns .wide{display:none}
@media (min-width:1100px){
  .pane__btns{display:flex;flex-wrap:wrap;max-width:none}
  .pane__btns .btn{width:auto;padding:0 28px}
  .pane__btns .wide{display:inline}
}

/* Hero glass: the fog on the arch is a canvas the visitor wipes */
.win{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.is-wiping .win{cursor:grabbing}
.win img{pointer-events:none;-webkit-user-drag:none}
.win__fog{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;transition:opacity .9s ease}
.win__fog.is-clear{opacity:0}
.calm .win{cursor:default;touch-action:auto}
.hero__hint{position:absolute;z-index:3;left:50%;top:40%;padding:11px 18px;border-radius:4px;background:var(--ink);color:var(--white);font:700 1rem/1.2 var(--f-text);white-space:nowrap;pointer-events:none;transform:translateX(-50%) skewX(-10deg);opacity:0;transition:opacity .35s ease}
.hero__hint>span{display:block;transform:skewX(10deg)}
.hero__hint .h-mouse{display:none}
@media (hover:hover) and (pointer:fine){.hero__hint .h-touch{display:none}.hero__hint .h-mouse{display:inline}}
.force-motion .hero__hint{animation:hintIn .6s ease 3.2s forwards}
.is-wiped .hero__hint,.calm .hero__hint{display:none}
@keyframes hintIn{to{opacity:1}}
@media (min-width:1100px){.hero__hint{top:auto;bottom:14%}}
/* Held squeegee follows the hand, then glides home */
.hero__blade.is-held{animation:none;opacity:1;transform:translate3d(var(--bx,0),var(--by,0),0) rotate(var(--r))}
.hero__blade.is-settling{transition:transform .6s var(--ease)}
/* Desktop hero: the photo and its fog melt into the frost, with no seam */
@media (min-width:1100px){
  .win{background:none}
  .win::before{display:none}
  .win img,.win__fog{-webkit-mask-image:linear-gradient(90deg,transparent,#000 120px);mask-image:linear-gradient(90deg,transparent,#000 120px)}
}
/* Tablet landscape: the headline leaves room for the kitchen on the first screen */
@media (min-width:720px) and (max-width:1099px) and (max-height:860px){
  :root{--fs-hero:clamp(3.35rem,9.2vw,5.5rem)}
  .hero__foot .lead{max-width:none}
  .hero__actions{margin-top:14px}
  .hero__window{margin-top:18px}
}
/* Phone on its side: the headline fits the short screen */
@media (max-height:560px) and (min-width:560px){:root{--fs-hero:clamp(2.6rem,15svh,4.5rem)}}
/* Hero actions: quote sits beside call where there is room */
.hero__actions .link--quote{display:inline-flex}

.hero__actions{align-items:center}
@media (max-width:719px){.hero__actions .link--quote{justify-self:start}}

/* Squeegee passes: a wider wet edge with fine streaks, the photo settling as it clears, the date tab arriving last */
.sweep__wet{left:-110px;width:calc(var(--s) + 110px);clip-path:polygon(var(--s) 0,calc(var(--s) + 110px) 0,110px 100%,0 100%);background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.14) 9px 10px),linear-gradient(270deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 55%,rgba(255,255,255,0))}
.force-motion .pane__room img{transform:translate3d(0,calc((var(--p) - .5)*-4%),0) scale(calc(1.05 - var(--p)*.05));will-change:transform}
.force-motion .pane__room .tab{opacity:clamp(0,calc(var(--p)*4 - 2.6),1);transform:skewX(-10deg) translate3d(0,calc((1 - clamp(0,var(--p)*4 - 2.6,1))*10px),0)}
.force-motion .pane__copy{transform:translate3d(0,calc((1 - var(--p))*12px),0)}
.force-motion .shower__word .w2 .ln__in{transform:translate3d(calc((1 - var(--p))*6%),0,0)}
@media (max-width:719px){.bead:nth-of-type(n+6){display:none}}
@media (max-height:560px){.force-motion .pane__room .tab{opacity:1;transform:skewX(-10deg)}}
/* Footer wordmark: even a and n at this tracking */

/* Rooms and up close: hover and tap answer with a glint across the glass */
.card__img::after,.shot__img::after{content:"";position:absolute;z-index:1;top:-10%;bottom:-10%;left:-45%;width:30%;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-12deg)}
.force-motion .card__img img,.force-motion .shot__img img{transition:transform .7s var(--ease)}
@media (hover:hover){
  .force-motion .card:hover .card__img img,.force-motion .shot:hover .shot__img img{transform:scale(1.035)}
  .force-motion .card:hover .card__img::after,.force-motion .shot:hover .shot__img::after{transform:translate3d(520%,0,0) skewX(-12deg);transition:transform .85s var(--ease)}
  .force-motion .reach__a:hover::before{transform:skewX(-6deg) translate3d(6px,0,0)}
}
.force-motion .reach__a::before{transition:transform .35s var(--ease)}
.force-motion .card:active .card__img,.force-motion .shot:active .shot__img{transform:scale(.985)}
.force-motion .card__img,.force-motion .shot__img{transition:transform .2s ease}
.rooms__more{padding:6px var(--gut) 0}
.rooms__more .btn{margin-top:12px}
@media (min-width:1100px){.rooms__more{padding-top:48px}}
@media (min-width:1700px){.rail,.rooms__head,.rooms__more{max-width:1600px;margin-left:auto;margin-right:auto}}

/* Before and after: the centerpiece */
.after{position:relative;z-index:1;overflow:clip;padding:76px var(--gut) 96px;background:linear-gradient(170deg,var(--night) 0%,var(--ink) 60%,var(--steam) 130%);color:var(--white)}
.after__in{max-width:1180px;margin:0 auto}
.after .lead{margin-top:14px;max-width:34rem;font-size:1.0625rem}
.after .h2 .ln:last-child .ln__in{color:var(--sky)}
.after__body{display:grid;gap:22px;margin-top:24px;justify-items:center}
.ba-stage{--split:50%;--x:50;position:relative;width:100%;max-width:500px;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.21);touch-action:pan-y pinch-zoom;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.ba-stage figure{position:absolute;inset:0;margin:0}
.ba-ready .ba:not(.is-on){display:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba__before{clip-path:inset(0 0 0 var(--split))}
.ba figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ba--panel img{object-position:50% 30%}
.ba--faucet img{object-position:50% 10%}
.ba--oven-door .ba__before{object-position:50% 40%}
.ba--fan img{object-position:50% 20%}
.ba--vault img{object-position:50% 60%}
.ba-blade{position:absolute;inset:0;z-index:3;pointer-events:none}
.ba-blade::before{content:"";position:absolute;inset-block:0;left:var(--split);width:2px;transform:translateX(-50%);background:white;box-shadow:0 0 2px #123}
.ba-blade i{position:absolute;left:clamp(18px,var(--split),calc(100% - 18px));top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border:2px solid white;border-radius:50%;background:#15344b;box-shadow:0 1px 6px #182e3e66;display:flex;align-items:center;justify-content:center;gap:4px}
.ba-blade i::before,.ba-blade i::after{content:"";width:7px;height:7px;border:solid white;border-width:2px 2px 0 0;transform:rotate(-135deg)}
.ba-blade i::after{transform:rotate(45deg)}
.ba-stage.is-drag .ba-blade i{background:#07547b}
.ba-tab{top:12px;bottom:auto;z-index:1;transition:none;transform:none;background:#122c3de8;color:white;border-radius:5px;padding:5px 9px;font-size:.8125rem;line-height:1.25}
.ba-tab>span{transform:none}
.ba-tab--after{left:14px;opacity:clamp(0,calc((var(--x) - 16)/16),1)}
.ba-tab--before{right:14px;left:auto;opacity:clamp(0,calc((84 - var(--x))/16),1)}
.ba-range{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba-stage:has(.ba-range:focus-visible){outline:3px solid var(--sky);outline-offset:4px}
.ba-side{display:grid;gap:16px;width:100%;max-width:500px;min-width:0}
.ba-chips{display:flex;flex-wrap:wrap;gap:8px}
.ba-picker{display:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:700 1rem/1 var(--f-text);text-decoration:none;white-space:nowrap;cursor:pointer;transform:skewX(-10deg);transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chip>span{display:block;transform:skewX(10deg)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
@media (hover:hover){.chip:hover{transform:skewX(-10deg) translate3d(0,-2px,0)}}
.chip:active{transform:skewX(-10deg) scale(.97)}
.ba-cap{font-weight:600;font-size:1.0625rem;line-height:1.4;min-height:1.4em}
.ba-note{color:var(--frost);justify-self:start}
.ba-side .btn{justify-self:start}
@media (min-width:720px){
  .after__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:end}
  .after .lead{margin-top:0}
}
@media (min-width:900px){
  .after__body{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px;align-items:start;justify-items:stretch;margin-top:40px}
  .ba-side{max-width:none;padding-top:6px}
}
@media (min-width:1100px){.after{padding:128px var(--gut) 136px}}
.after:not(.ba-ready) .ba{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 12px}
.after:not(.ba-ready) .ba img{position:static;height:auto;clip-path:none}
.after:not(.ba-ready) .ba::before,.after:not(.ba-ready) .ba::after{grid-row:1;font-weight:700}
.after:not(.ba-ready) .ba::before{content:"After";grid-column:1}
.after:not(.ba-ready) .ba::after{content:"Before";grid-column:2}
.after:not(.ba-ready) .ba-stage{aspect-ratio:auto;overflow:visible;max-width:none;box-shadow:none;cursor:auto}
.after:not(.ba-ready) .ba-stage figure{position:relative}
.after:not(.ba-ready) :is(.ba-blade,.ba-tab,.ba-range,.ba-chips,.ba-cap){display:none}
.after:not(.ba-ready) .ba figcaption{position:static;width:auto;height:auto;grid-column:1/-1;clip:auto;white-space:normal}

/* What they clean */
.svc{position:relative;padding:72px var(--gut) 84px;background:url(../img/frost.svg) 0 0/240px 240px,linear-gradient(168deg,var(--frost-lite) 0%,var(--frost) 100%)}
.svc__in{max-width:1328px;margin:0 auto}
.svc__head .lead{margin-top:14px;font-size:1.0625rem;max-width:36rem}
.svc__list{margin-top:26px;border-top:2px solid rgba(15,35,56,.22)}
.svc__item{border-bottom:2px solid rgba(15,35,56,.22)}
.svc__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font:700 clamp(1.25rem,5.4vw,2rem)/1.15 var(--f-display);letter-spacing:-.015em;list-style:none;cursor:pointer}
.svc__item summary::-webkit-details-marker{display:none}
.svc__item summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .25s}
.svc__item[open] summary::after{transform:rotate(45deg)}
.svc__body{padding:0 0 22px}
.svc__body q,.svc__body p{display:block;quotes:none;font:500 1.125rem/1.5 var(--f-text);max-width:38rem}
.svc__body cite{display:block;margin-top:10px;font:600 1rem/1.4 var(--f-text);font-style:normal;color:var(--ink-soft)}
@media (min-width:1100px){
  .svc{padding:120px var(--gut) 128px}
  .svc__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .svc__list{position:relative;margin-top:0;padding-right:48%;min-height:440px}
  .svc__item summary{min-height:72px;padding:0 16px 0 0}
  .svc__body{position:absolute;top:0;right:0;width:44%;padding:26px 28px;border-radius:6px;background:var(--white);box-shadow:0 14px 40px rgba(15,35,56,.14)}
}

/* Reviews */
.words{position:relative;padding:72px 0 88px;background:var(--white)}
.words__head{padding:0 var(--gut)}
.words__head .lead{margin-top:14px;font-size:1.0625rem;max-width:36rem}
.words__rail{display:flex;gap:14px;margin-top:22px;padding:8px var(--gut) 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.word{position:relative;flex:0 0 min(84vw,420px);scroll-snap-align:start;margin:0;padding:24px 22px 22px;border-radius:6px;background:linear-gradient(162deg,var(--frost-lite),var(--frost))}
.word::before{content:"";display:block;width:44px;height:8px;margin-bottom:16px;background:var(--accent);transform:skewX(-14deg)}
.word blockquote{margin:0;font:500 1.0625rem/1.55 var(--f-text)}
.word blockquote p+p{margin-top:12px}
.word figcaption{margin-top:16px;font:700 1rem/1.35 var(--f-text)}
.word figcaption span{display:block;font-weight:500;color:var(--ink-soft)}
.force-motion .word{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s ease,transform .7s var(--ease)}
.force-motion .word.is-visible{opacity:1;transform:none}
.words__foot{padding:8px var(--gut) 0;display:grid;gap:4px}
.award{display:block;margin-top:18px;padding:14px 16px;border-left:8px solid var(--accent);background:var(--mist);max-width:38rem;font-weight:600;line-height:1.4}
.award b{display:block;font:800 1.125rem/1.2 var(--f-display)}
.award span{display:block;margin-top:4px;font-weight:500;color:var(--ink-soft)}
@media (min-width:1100px){
  .words{padding:120px 0 128px}
  .words__head,.words__foot{padding-left:max(var(--gut),calc((100vw - 1328px)/2));padding-right:max(var(--gut),calc((100vw - 1328px)/2))}
  .words__rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin:40px auto 0;max-width:calc(1328px + 2*var(--gut));overflow:visible;align-items:start}
  .word{grid-column:span 4}
  .word--wide{grid-column:span 8;grid-row:span 2}
  .word--wide blockquote{font-size:1.25rem}
}
/* Where they clean */
.area{position:relative;padding:72px var(--gut) 92px;background:var(--mist)}
.area__in{max-width:1328px;margin:0 auto}
.area .lead{margin-top:14px;font-size:1.0625rem;max-width:36rem}
.area__towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.area__towns .chip{color:var(--ink);background:var(--white);border-color:rgba(15,35,56,.28);min-height:48px;font-size:1.0625rem}
.area__towns .chip--home{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media (hover:hover){.area__towns .chip:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}}
.area__src{margin-top:18px;color:var(--ink-soft);max-width:38rem}
@media (min-width:1100px){
  .area{padding:112px var(--gut) 150px}
  .area__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .area__towns{margin-top:0}
}
/* Contact: quote card */
.reach__a--quote{color:var(--ink)}
.reach__a--quote::before{background:var(--white)}
.reach__a--quote .reach__v{font:700 clamp(1.25rem,5vw,1.75rem)/1.2 var(--f-display)}
.foot__nav,.foot__motion{row-gap:0}

/* Secondary pages */
.page-hero{position:relative;overflow:clip;padding:36px var(--gut) 40px;background:url(../img/frost.svg) 0 0/240px 240px,linear-gradient(168deg,var(--frost-lite) 0%,var(--frost) 46%,var(--frost-deep) 100%)}
.page-hero__in{position:relative;z-index:1;max-width:1328px;margin:0 auto}
.page-hero h1{font:800 calc(clamp(2.5rem,11vw,6.5rem)*var(--fit,1))/.98 var(--f-display);letter-spacing:-.028em}
.page-hero .lead{margin-top:16px;max-width:38rem}
.page-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(46vw,520px);background:url(../img/beads.svg?v=6) 0 0/520px 520px;opacity:.7;pointer-events:none;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.force-motion .page-hero h1 .ln__in{animation:rise .95s var(--ease) 1.2s both}
.force-motion .page-hero .lead{animation:arrive .8s var(--ease) 1.5s both}
@media (min-width:1100px){.page-hero{padding:72px var(--gut) 72px}}

/* Gallery page */
.gal-wrap{padding:28px var(--gut) 96px;background:var(--white)}
.gal-wrap__in{max-width:1520px;margin:0 auto}
.gal-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gal-filter .chip{color:var(--ink);border-color:rgba(15,35,56,.32)}
.gal__count{margin:14px 0 20px;color:var(--ink-soft);font-weight:600}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.gal__item{margin:0}
.gal__item[hidden]{display:none}
.gal__item--lead{grid-column:1/-1}
.gal__img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--frost)}
.gal__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal__item figcaption{margin-top:10px;display:grid;gap:2px}
.gal__item figcaption b{font:700 1rem/1.3 var(--f-text)}
.gal__item figcaption span{color:var(--ink-soft);font:500 1rem/1.3 var(--f-text)}
@media (min-width:720px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}.gal__item--lead{grid-column:auto}}
@media (min-width:1100px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}.gal-wrap{padding:44px var(--gut) 128px}}
.gal-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

/* About page */
.about-sec{padding:64px var(--gut) 72px;background:var(--white)}
.about-sec__in{max-width:1180px;margin:0 auto}
.about-sec--mist{background:var(--mist)}
.about-sec .h2{font-size:calc(clamp(2.2rem,9vw,4.5rem)*var(--fit,1))}
.owner-grid{display:grid;gap:28px;margin-top:26px}
.owner{display:grid;gap:14px;align-items:start}
.owner__img{position:relative;width:min(100%,300px);aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--frost)}
.owner__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.owner h3,.mate h3{font:700 var(--fs-h3)/1.15 var(--f-display);letter-spacing:-.01em}
.owner__role,.mate__role{font-weight:600;color:var(--ink-soft)}
.owner blockquote{margin:10px 0 0;font:500 1.0625rem/1.55 var(--f-text)}
.owner cite{display:block;margin-top:8px;font:600 1rem/1.4 var(--f-text);font-style:normal;color:var(--ink-soft)}
@media (min-width:900px){.owner-grid{grid-template-columns:1fr 1fr;gap:48px}.owner--photo{grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
.jrny{--j:0;position:relative;margin-top:30px;padding-left:22px}
.jrny::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:3px;background:rgba(15,35,56,.16)}
.jrny::after{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:3px;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--j))}
.calm .jrny::after{transform:none}
.jrny__item{position:relative;display:grid;gap:12px;padding:0 0 38px}
.jrny__item:last-child{padding-bottom:0}
.jrny__item::before{content:"";position:absolute;left:-23px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--ink)}
.jrny__date{font:700 1rem/1.3 var(--f-text);color:var(--ink-soft)}
.jrny__item h3{font:700 clamp(1.25rem,4.8vw,1.75rem)/1.2 var(--f-display);letter-spacing:-.012em}
.jrny__item blockquote{margin:0;font:500 1.0625rem/1.55 var(--f-text)}
.jrny__item blockquote+blockquote{margin-top:10px}
.jrny__item cite{display:block;margin-top:6px;font:500 1rem/1.4 var(--f-text);font-style:normal;color:var(--ink-soft)}
.jrny__fig{margin:0;position:relative;max-width:520px;overflow:hidden;border-radius:4px;background:var(--frost)}
.jrny__fig img{display:block;width:100%;height:auto}
.force-motion .jrny__item{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s ease,transform .7s var(--ease)}
.force-motion .jrny__item.is-visible{opacity:1;transform:none}
@media (min-width:1100px){
  .about-sec{padding:112px var(--gut) 120px}
  .jrny__item{grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:56px;padding-bottom:56px}
  .jrny__item>:not(.jrny__fig){grid-column:1}
  .jrny__fig{grid-column:2;grid-row:1/span 4}
}
.team{display:grid;gap:22px;margin-top:28px}
.mate{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;margin:0;padding:18px;border-radius:6px;background:var(--white)}
.mate__img{position:relative;width:120px;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--frost)}
.mate__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mate p{margin-top:8px;line-height:1.5}
.mate dl{margin:10px 0 0}
.mate dt{font-weight:700;margin-top:8px}
.mate dd{margin:2px 0 0}
.mate__date{margin-top:10px;color:var(--ink-soft)}
.force-motion .mate{opacity:0;transform:translate3d(0,20px,0);transition:opacity .55s ease,transform .65s var(--ease)}
.force-motion .mate.is-visible{opacity:1;transform:none}
@media (min-width:720px){.mate{grid-template-columns:150px minmax(0,1fr)}.mate__img{width:150px}}
@media (min-width:1100px){.team{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.mate{grid-template-columns:minmax(0,1fr)}.mate__img{width:175px}}
.team-photo{margin:28px 0 0;position:relative;max-width:640px;overflow:hidden;border-radius:4px;background:var(--frost)}
.team-photo img{display:block;width:100%;height:auto}
.team-note{margin-top:10px;color:var(--ink-soft)}
.about-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:28px}

/* Quote page */
.quote{display:grid;background:var(--mist)}
.quote__glass{--p:0;--s:80px;--fog-a:230 240 250;--fog-b:207 227 245;--fog-alpha:.97;position:relative;margin:0;height:30svh;min-height:170px;max-height:320px;overflow:hidden;background:var(--frost)}
.q-summary .quote__glass{height:40svh;max-height:400px}
.quote__glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.quote__glass .sweep{--s:80px;left:0;width:calc(100% + 80px);transform:translate3d(calc(var(--p)*(100% - 20px) - (1 - var(--p))*80px),0,0);transition:transform .32s var(--ease)}
.calm .quote__glass .sweep{transition:none}
.quote__glass .tab{left:var(--gut);bottom:14px;opacity:0}
.quote__glass.is-clear .tab{opacity:1}
.quote__panel{min-width:0;padding:26px var(--gut) 48px}
.quote__panel h1{font:800 calc(clamp(2.2rem,10vw,4.25rem)*var(--fit,1))/1 var(--f-display);letter-spacing:-.028em}
.quote__intro{margin-top:12px;max-width:34rem}
.quote__count{display:block;margin-top:18px;font-weight:700}
#quote-form{margin-top:18px;max-width:38rem}
.qs{margin:0;padding:0;border:0;min-width:0}
#quote-form .qs:not(.is-on){display:none}
.qs legend,.qs h2{display:block;padding:0;font:700 clamp(1.375rem,5.4vw,1.875rem)/1.2 var(--f-display);letter-spacing:-.012em}
.qs legend:focus,.qs h2:focus{outline:none}
.q-help{margin-top:8px;color:var(--ink-soft)}
.q-opts{display:grid;gap:10px;margin-top:16px}
.q-opt{position:relative;display:block}
.q-opt[hidden]{display:none}
.q-opt input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.q-opt span{display:flex;align-items:center;min-height:56px;padding:12px 16px;border:2px solid rgba(15,35,56,.28);border-radius:6px;background:var(--white);font-weight:600;line-height:1.3;transition:background-color .15s,border-color .15s,transform .15s var(--ease)}
.q-opt input:checked+span{background:var(--accent);border-color:var(--ink)}
.q-opt input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
@media (hover:hover){.q-opt:hover span{border-color:var(--ink)}}
.q-opt:active span{transform:scale(.99)}
.q-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.q-field{display:block;margin-top:16px}
.q-field[hidden]{display:none}
.q-field>span{display:block;font-weight:700;margin-bottom:6px}
.q-field em{font-style:normal;font-weight:500;color:var(--ink-soft)}
.q-field input,.q-field select,.q-field textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid rgba(15,35,56,.32);border-radius:6px;background:var(--white);color:var(--ink);font:500 1rem/1.4 var(--f-text);font-size:16px}
.q-field textarea{min-height:124px;resize:vertical}
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{outline:3px solid var(--ink);outline-offset:2px}
[aria-invalid=true]{border-color:#A32C14!important}
.q-error{margin-top:12px;padding:10px 14px;border-left:6px solid #A32C14;background:#FBEDE8;color:#6F1D0C;font-weight:600}
.q-error[hidden]{display:none}
.q-group{margin:0;padding:0;border:0;min-width:0}
.qs .q-group legend{margin-top:20px;font:700 1rem/1.3 var(--f-text);letter-spacing:0}
.quote__nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.quote__nav .btn{min-height:56px}
.quote__nav .btn[hidden],.quote__nav .q-back[hidden]{display:none}
.q-back{min-height:56px;padding:0 20px;border:2px solid rgba(15,35,56,.32);border-radius:6px;background:transparent;font:700 1.0625rem/1 var(--f-text);cursor:pointer}
.q-sum{margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:0}
.q-sum dt{margin-top:12px;font-weight:700}
.q-sum dd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:2px 0 0;padding-bottom:12px;border-bottom:1px solid rgba(15,35,56,.2);overflow-wrap:anywhere;white-space:pre-line}
.q-sum dd span{min-width:0}
.q-change{flex:none;min-height:44px;min-width:44px;margin:-10px 0 -10px;padding:0 6px;border:0;background:none;font:600 1rem/1 var(--f-text);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.q-honest{margin-top:20px;padding:16px 18px;border-left:8px solid var(--accent);background:var(--white);font-weight:600;line-height:1.5}
.q-actions{display:grid;gap:12px;margin-top:16px;justify-items:start}
.q-actions .btn{min-height:60px}
.q-note{margin-top:12px;padding:12px 16px;background:var(--frost-lite);line-height:1.5}
.q-note[hidden]{display:none}
.q-plain{margin-top:14px}
.q-plain summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.q-plain textarea{width:100%;min-height:220px;padding:12px 14px;border:2px solid rgba(15,35,56,.32);border-radius:6px;background:var(--white);font:500 16px/1.5 var(--f-text);color:var(--ink)}
@media (min-width:1100px){
  .quote{grid-template-columns:minmax(0,1fr) minmax(0,757px);min-height:calc(100svh - 42px)}
  .quote__panel{order:1;padding:56px var(--gut) 96px}
  .quote__glass,.q-summary .quote__glass{order:2;position:sticky;top:0;height:min(100svh,1006px);max-height:none;align-self:start}
  .quote__glass .sweep{--s:160px;width:calc(100% + 160px);transform:translate3d(calc(var(--p)*(100% - 40px) - (1 - var(--p))*160px),0,0)}
}
.q-noscript{margin-top:14px;padding:14px 16px;border-left:8px solid var(--accent);background:var(--white)}

/* Phone: a smaller first-visit cookie panel, so the first screen keeps its photo */
@media (max-width:719px){
  .cc-banner{left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);padding:12px 14px}
  .cc-title{display:none}
  .cc-text{margin-top:0;line-height:1.4}
  .cc-actions{display:grid;grid-template-columns:auto auto auto;gap:6px;margin-top:10px}
  .cc-btn,.cc-link{min-width:0;padding:8px 10px;white-space:nowrap}
}
/* Quote page, phone: after the first step the headline steps aside, so the glass and the question share the screen */
@media (max-width:1099px){
  .q-started .quote__panel>.kicker,.q-started .quote__intro{display:none}
  .q-started .quote__panel>h1{position:absolute;width:1px;height:1px;overflow:hidden;margin:-1px;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
  .q-started .quote__count{margin-top:0}
  .quote__glass{height:24svh;min-height:150px}
  html.force-motion:has(.page-quote){scroll-behavior:auto}
}
/* Reviews are short lines now: larger type, and the wide card leads */
.word blockquote{font:600 clamp(1.125rem,4.6vw,1.375rem)/1.35 var(--f-text)}
.owner__text{margin-top:10px;font:500 1.0625rem/1.55 var(--f-text);max-width:32rem}
@media (min-width:1100px){
  .word--wide{grid-column:span 12;grid-row:auto;padding:36px 40px}
  .word--wide blockquote{font:800 clamp(2rem,3.4vw,3.25rem)/1.1 var(--f-display);letter-spacing:-.02em}
}
.jrny__item>p:not(.jrny__date){max-width:38rem;line-height:1.55}
/* A single native job picker leaves more room for the photo on a phone. */
@media (max-width:899px), (pointer:coarse) and (max-width:1099px) and (max-height:520px) and (orientation:landscape){
  .ba-ready .ba-picker{display:grid;gap:6px;width:100%;max-width:500px;font:600 .9375rem/1.4 var(--f-text)}
  .ba-picker select{width:100%;height:46px;padding:0 12px;border:1px solid #9dabb5;border-radius:8px;color-scheme:dark;background:#263947;color:white;font:600 1rem/1.3 var(--f-text)}
  .ba-ready .ba-chips{display:none}
  .ba-ready .ba-stage{aspect-ratio:1/1;max-height:54svh}
  .after__body{gap:14px}
  .ba-side{gap:8px}
}
@media (min-width:600px) and (max-width:899px) and (max-height:520px) and (orientation:landscape), (pointer:coarse) and (min-width:900px) and (max-width:1099px) and (max-height:520px) and (orientation:landscape){
  .ba-ready .after__body{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;align-items:start;justify-items:start}
  .ba-ready .ba-stage{grid-column:1;grid-row:1/3;max-width:70svh;aspect-ratio:1;max-height:none}
  .ba-ready .ba-picker,.ba-ready .ba-side{grid-column:2}
}
/* Round three, from looking at the shots */
/* Phone cookie panel: all three choices fit at 360 px, unclipped */
@media (max-width:400px){.cc-actions{gap:4px}.cc-btn,.cc-link{padding:8px 6px}}
/* Hero links stay on one line; short laptops keep Call and Quote, the nav has the rest */
.hero__actions .link{white-space:nowrap}
@media (min-width:1100px) and (max-width:1399px){.hero__actions .link:not(.link--quote){display:none}}
/* About: cards and timeline rows keep their own height */
.mate{align-content:start}
.about-sec .lead{margin-top:14px}
@media (min-width:1100px){
  .jrny__item{grid-template-rows:repeat(5,auto) 1fr}
  .jrny__fig{grid-row:1/-1}
  .words__head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:72px;align-items:end}
  .words__head .h2{grid-row:1/span 2}
  .words__head .lead{margin-top:0;align-self:end}
}
/* Before and after: the phone heading breathes, and the chip row snaps */
.after__head>div{margin-top:16px}
@media (min-width:720px){.after__head>div{margin-top:0}}
/* Quote page keeps its fog in the calm view too, so its words stay true */
.js .quote__glass .pane__fog{display:block}
/* The blade travels far enough that no wet streak is left at the screen edge after a pass */
.sweep{transform:translate3d(calc(var(--p,0)*(100vw + var(--s) + 130px) - var(--s)),0,0)}
.quote__glass .sweep{transform:translate3d(calc(var(--p)*(100% + 120px) - (1 - var(--p))*80px),0,0)}
@media (min-width:1100px){.quote__glass .sweep{transform:translate3d(calc(var(--p)*(100% + 120px) - (1 - var(--p))*160px),0,0)}}
.menu{padding-top:calc(var(--header) + 64px)}

/* ===== Audit fixes, 2026-11-06 ===== */
picture{display:contents}
/* Keep text and photos visible as they settle into place; contact actions stay still. */
@keyframes titleSettle { from { transform:translateX(-.2em) } to { transform:translateX(0) } }
@keyframes homeTitleSettle { from { transform:translateY(6px) } to { transform:translateY(0) } }
.force-motion .hero__title { animation:homeTitleSettle .32s var(--ease) backwards; }
.force-motion .hero__title .ln__in, .force-motion .hero__window { animation:none; }
.force-motion .page-hero h1 .ln__in { animation:titleSettle .48s var(--ease) backwards; }
.force-motion .hero__foot, .force-motion .page-hero .lead { animation:none; }
.foot__motion a[aria-current="true"] { text-decoration-thickness: 3px; }
.foot__motion a[aria-current="true"]::before { content:"✓" / ""; margin-inline-end:.4em; }
.force-motion .ln--1 .ln__in,.force-motion .page-hero h1 .ln__in{animation-delay:.02s}
.force-motion .ln--2 .ln__in{animation-delay:.08s}
.force-motion .ln--3 .ln__in{animation-delay:.14s}
.force-motion .ln--3::before{animation-delay:.3s}
.force-motion .hero__foot,.force-motion .page-hero .lead{animation-delay:.16s}
.force-motion .hero__blade{animation-delay:.2s}
.force-motion .hero__hint{animation:none}
.force-motion .wipe-ready .hero__hint{opacity:1}
/* Owners: two equal cards */
.owner-grid{grid-template-columns:minmax(0,1fr)}
.owner{display:block;padding:26px 24px 28px;border-radius:6px;background:linear-gradient(162deg,var(--frost-lite),var(--frost))}
.owner::before{content:"";display:block;width:44px;height:8px;margin-bottom:18px;background:var(--accent);transform:skewX(-14deg)}
.owner h3{font-size:clamp(1.625rem,5.4vw,2.5rem);line-height:1.08;letter-spacing:-.02em}
.owner__role{margin-top:8px}
.owner__text{margin-top:14px;font-size:clamp(1.0625rem,2.4vw,1.25rem);line-height:1.5}
.about-sec .team-note{margin-top:18px}
.team-note a{font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media (min-width:720px){.owner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
/* Team: a card without a photo carries the person's initial */
.mate__img--mark{display:flex;align-items:center;justify-content:center;background:linear-gradient(162deg,var(--frost-lite),var(--frost-deep))}
.mate__img--mark span{font:800 clamp(3.5rem,8vw,5.5rem)/1 var(--f-display);color:var(--ink);transform:skewX(-6deg)}

/* ===== Window-size fixes from the real-wheel walk, 2026-11-06 ===== */
/* Short pages on tall windows: below the footer matches the footer, not a pale strip */
html{background:var(--night)}
/* "gone." slides in from inside its line, so it is never clipped during the wipe */
.shower__word .ln{overflow:visible}
.force-motion .shower__word .w2 .ln__in{transform:translate3d(calc((var(--p) - 1)*6%),0,0)}
/* Hero on tablets: the arch has soft sides, not a hard edge on the frost */
@media (min-width:720px) and (max-width:1099px){
  .win{background:none}
  .win img,.win__fog{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
}
@media (min-width:1100px){
  :root{--travel:min(calc(95*var(--vh)),1100px)}
  /* Service names stay on one line at every laptop width */
  .svc__item summary{font-size:clamp(1.25rem,1.65vw,2rem)}
  /* Business copy stays clear of the lit door at any window shape */
  .pane--biz .pane__copy .lead{max-width:min(30rem,calc(50vw - max(9.56vw,16.5vh) - 80px))}
  /* Quote: the photo never grows past its pixels, and the form keeps room */
  .quote{grid-template-columns:minmax(0,1fr) minmax(0,min(757px,50%));min-height:min(calc(100svh - 42px),1100px)}
  .quote__panel{justify-self:center;width:min(100%,800px)}
}
/* Quote on wide tablets and portrait monitors: one centered column at the photo's own width */
@media (min-width:758px) and (max-width:1099px){
  .quote{justify-items:center}
  .quote__glass,.q-summary .quote__glass{width:757px}
  .quote__panel{width:757px}
}
/* Big landscape monitors: the hero window and the Homes photo use their full pixels */
@media (min-width:1600px) and (min-height:1200px) and (min-aspect-ratio:6/5){
  .hero{grid-template-columns:minmax(0,1fr) 840px}
  .hero__window{min-height:min(calc(84*var(--vh)),1140px)}
}
@media (min-width:1500px) and (min-height:1240px) and (min-aspect-ratio:6/5){
  .pane--homes .pane__room{align-self:center;height:1170px;max-height:none}
  .pane--homes .pane__copy{align-self:center;padding:var(--header) var(--gut) 0}
}
/* Tall windows and portrait monitors: each section is one centered poster, so no pinned pane leaves a gap */
@media (min-width:720px) and (min-height:1200px) and (max-aspect-ratio:6/5){
  :root{--fs-hero:clamp(6rem,10vw,9.5rem);--travel:min(calc(85*var(--vh)),1100px)}
  .hero{display:flex;flex-direction:column;padding:calc(var(--header) + 40px) var(--gut) 0}
  .hero__inner{display:block;flex:none;padding:0 0 36px}
  .hero__foot .lead{margin-top:24px;max-width:34rem}
  .hero__actions{display:flex;align-items:center;gap:28px;max-width:none;margin-top:22px}
  .hero__window{flex:none;align-self:center;width:100%;max-width:900px;height:min(1140px,calc(var(--stage) - var(--header) - 620px));min-height:360px;margin:auto auto 0}
  .hero__window .tab{left:28px;top:22%}
  .hero__blade{--r:-18deg;left:auto;right:-20px;top:1%;width:250px}
  .hero__hint{top:auto;bottom:12%}
  .win{background:none}
  .win img,.win__fog{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}

  .pane--homes .pane__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;padding-top:var(--header)}
  .pane--homes .pane__room{grid-column:1;grid-row:1;justify-self:center;align-self:auto;width:min(calc(100vw - 2*var(--gut)),940px);max-width:none;max-height:none;height:min(1170px,calc(var(--stage) - var(--header) - 440px));margin-top:0}
  .pane--homes .pane__room .tab{left:28px;bottom:32px}
  .pane--homes .pane__copy{grid-column:1;grid-row:2;align-self:start;justify-self:center;width:min(calc(100vw - 2*var(--gut)),940px);max-width:none;padding:26px 0 16px}
  .pane--homes .h2{font-size:calc(clamp(4.5rem,9vw,7rem)*var(--fit,1))}
  .pane--homes .pane__copy .lead{font-size:1.25rem;max-width:40rem}

  .pane--shower{--door:min(833px,calc(100vw - 2*var(--gut)),calc((var(--stage) - var(--header) - 440px)*.746))}
  .pane--shower .pane__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;justify-items:center;padding:calc(var(--header) + 8px) 0 24px}
  .shower__word{grid-column:1;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;align-self:auto;width:var(--door);padding:0;font-size:calc(min(8.5rem,var(--door)/6.2)*var(--fit,1))}
  .shower__word .ln{flex:none}
  .shower__word .w1,.shower__word .w2{align-self:baseline}
  .pane--shower .pane__room{grid-column:1;grid-row:2;justify-self:center;align-self:auto;width:var(--door);height:auto;aspect-ratio:878/1177;max-width:none;max-height:none;margin:14px 0 0}
  .pane--shower .pane__copy{grid-column:1;grid-row:3;align-self:auto;justify-self:center;width:var(--door);max-width:none;padding:18px 0 0}
}
@media (min-width:1100px) and (min-height:1200px) and (max-aspect-ratio:6/5){
  .pane--biz .pane__stage{grid-template-columns:minmax(0,1fr)}
  .pane--biz .pane__copy{grid-column:1;grid-row:1;align-self:end;justify-self:stretch;width:100%;max-width:none;padding:160px calc((100% - 720px)/2) 88px;background:linear-gradient(to top,rgba(27,33,41,.97) 56%,rgba(27,33,41,0))}
  .pane--biz .pane__copy .lead{max-width:40rem}
}
/* Second walk: squarer landscape windows and small touches */
@media (min-width:1100px){
  .quote{min-height:min(calc(100svh - 42px),1006px)}
  /* "Business." stops short of the lit door */
  .pane--biz .h2{font-size:calc(min(clamp(3.5rem,5.4vw,6.5rem),(50vw - max(9.56vw,16.5vh) - 72px)/6.3)*var(--fit,1))}
}
/* Taller landscape windows: the hero window grows, so the squeegee stays clear of the headline */
@media (min-width:1100px) and (min-height:1000px) and (min-aspect-ratio:6/5){
  .hero__window{min-height:min(calc(84*var(--vh)),1140px)}
}
/* Squarer landscape windows: the shower door fills the stage height instead of stopping short */
@media (min-width:1100px) and (min-aspect-ratio:6/5) and (max-aspect-ratio:3/2){
  .pane--shower{--door:min(calc((var(--stage) - var(--header) - 80px)*.746),50vw,813px)}
  .pane--shower .pane__stage{grid-template-rows:minmax(0,1fr);grid-template-columns:1fr var(--door) 1fr}
  .pane--shower .pane__room{height:100%;max-height:1040px;align-self:center}
  .pane--shower .pane__copy{padding-right:24px}
  .shower__word{font-size:calc(min(14rem,(100vw - 112px - var(--door))/7.2)*var(--fit,1))}
}
@media (min-width:720px) and (min-height:1200px) and (max-aspect-ratio:6/5){
  .force-motion .shower__word .w2 .ln__in{transform:none}
  .shower__word{font-size:calc(min(8.5rem,var(--door)/6.7)*var(--fit,1))}
}
@media (min-width:1100px) and (min-height:1200px) and (max-aspect-ratio:6/5){
  .pane--biz .h2{font-size:calc(clamp(4rem,6vw,6.5rem)*var(--fit,1))}
}
/* Last look: the email address stays on one line at 360 px, and About lines up with its own heading */
@media (max-width:400px){.reach__a{padding-left:18px;padding-right:14px}.reach__v{font-size:1rem;overflow-wrap:normal}}
.about-sec__in{max-width:1328px}
/* Light streaks are sized from the window, not the hero, so a font arriving can't move them */
.hero__light{top:calc(-10*var(--vh));bottom:auto;height:calc(220*var(--vh));transform-origin:50% calc(70*var(--vh))}
/* Phone cookie panel keeps its height when the web font arrives, so nothing moves */
@media (max-width:719px){.cc-text{min-height:5.6em}}
@media (max-width:380px){.cc-text{min-height:7em}}

/* Logo and colors, 2026-11-06. Colors from the finished artwork: blue #0792E3, charcoal #323132, white.
   Header: the charcoal plate on light states and with the menu open, the transparent version on the dark bar. Larger at the top of the page, inside the bar once stuck.
   Footer and curtain: the round badge. All of it is the artwork's own SVG, unchanged. */
.brand{margin-top:6px}
.site-header.is-stuck .brand,.site-header.over-dark .brand,.menu-open .brand{margin-top:3px}
.brand__logo{display:block;width:auto;max-width:none;height:min(84px,calc((100vw - 140px)/2.4));transition:height .3s var(--ease)}
.brand__logo--clear{display:none}
.site-header.is-stuck .brand__logo,.site-header.over-dark .brand__logo,.menu-open .brand__logo{height:calc(var(--header) - 6px)}
html:not(.menu-open) .site-header.over-dark .brand__logo--plate{display:none}
html:not(.menu-open) .site-header.over-dark .brand__logo--clear{display:block}
@media (min-width:720px){.site-header:not(.is-stuck):not(.over-dark) .brand__logo{height:92px}.menu-open .site-header .brand__logo{height:calc(var(--header) - 6px)!important}}
.foot__lockup{position:relative;z-index:1;display:grid;gap:26px;justify-items:start;align-items:center}
.foot__mark{display:block;width:clamp(220px,62vw,300px);border-radius:50%}
.foot__mark img{width:100%;height:auto}
.foot__tagline{max-width:16ch;font:800 clamp(1.75rem,8vw,2.75rem)/1.08 var(--f-display);letter-spacing:-.012em;color:var(--white)}
.foot__tagline span{display:block;color:var(--sky)}
@media (min-width:720px){
  .foot__lockup{grid-template-columns:auto minmax(0,1fr);gap:48px}
  .foot__mark{width:clamp(260px,30vw,420px)}
  .foot__tagline{max-width:none;font-size:clamp(2.25rem,4.6vw,5rem)}
}
@media (max-width:1099px){.hero{padding-top:calc(var(--header) + 36px)}}

/* Home headline, 2026-11-06: her tagline over three lines. Sizes come from the longest line, "we clean them." (9.17 em wide); data-fit does the fine trim.
   On the two-column hero the title stops short of the squeegee, which also moves 60 px toward the photo. */
:root{--fs-hero:clamp(1.75rem,calc((100vw - 40px)/9.3),8rem)}
@media (min-width:720px){:root{--fs-hero:calc((100vw - 64px)/9.3)}}
@media (min-width:1100px){:root{--fs-hero:calc((100vw - 749px)/9.3)}}
@media (min-width:1600px){:root{--fs-hero:min(calc((100vw - 949px)/9.3),12rem)}}
@media (min-width:1600px) and (min-height:1200px) and (min-aspect-ratio:6/5){:root{--fs-hero:min(calc((100vw - 1069px)/9.3),12rem)}}
@media (min-width:720px) and (max-width:1099px) and (max-height:860px){:root{--fs-hero:clamp(3.35rem,9.2vw,5.5rem)}}
@media (max-height:560px) and (min-width:560px){:root{--fs-hero:clamp(2.6rem,15svh,4.5rem)}}
@media (min-width:720px) and (min-height:1200px) and (max-aspect-ratio:6/5){:root{--fs-hero:clamp(6rem,10vw,9.5rem)}}
@media (min-width:1100px) and (max-height:1199px),(min-width:1100px) and (min-aspect-ratio:6/5){
  .hero__title{max-width:calc(100% - 69px)}
  .hero__blade{left:-90px}
}
.ln--3::before{width:min(100%,9.35em)}
html:not(.js) .hero__title .ln{white-space:normal}

/* Keep the room recognizable while the glass clears between quote steps. */

.quote__glass { --fog-alpha: .34; }
.quote__glass .sweep__sheet {
  background: linear-gradient(145deg, rgb(230 240 250 / .65), rgb(207 227 245 / .22));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.calm .quote__glass .pane__fog { display: none; }
.q-opt input + span { pointer-events: none; }
.quote__progress { max-width: 38rem; margin-top: 24px; }
.quote__progress[hidden], #quote-form[hidden] { display: none; }
.quote__count { margin: 0 0 6px; color: var(--ink-soft); font-size: .875rem; }
.quote__progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; background: var(--frost); color: var(--steam); }
.quote__progress progress::-webkit-progress-bar { background: var(--frost); }
.quote__progress progress::-webkit-progress-value { background: var(--steam); }
.quote__progress progress::-moz-progress-bar { background: var(--steam); }
.quote__nav { align-items: center; }
.q-noscript { overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .quote__glass, .q-summary .quote__glass { height: clamp(80px, 15svh, 130px); min-height: 0; }
  .q-started .quote__glass { height: 56px; }
  .quote__panel { padding-top: 20px; }
  .q-started .quote__progress { margin-top: 0; }
}

/* Compare the three residential services side by side, then carry the choice into a quote. */
.svc-compare { max-width: 1328px; margin: clamp(48px, 7vw, 96px) auto 0; scroll-margin-top: 30px; }
.svc-compare h3 { max-width: 20em; font: 750 clamp(1.65rem, 4vw, 2.65rem)/1.13 var(--f-display); letter-spacing: -.025em; }
.svc-compare > p { max-width: 54rem; margin: 14px 0 24px; color: var(--ink-soft); }
.svc-compare__grid { display: grid; gap: 14px; }
.svc-compare article { min-width: 0; display: flex; flex-direction: column; align-items: start; padding: clamp(18px, 3vw, 32px); background: var(--mist); border-top: 4px solid var(--steam); border-radius: 5px; }
.svc-compare h4 { margin: 0; font: 700 clamp(1.15rem, 2.1vw, 1.5rem)/1.25 var(--f-display); }
.svc-compare article p { margin: 10px 0 14px; }
.svc-compare ul { list-style: none; margin: 0 0 12px; padding: 0; }
.svc-compare li { position: relative; border-top: 1px solid var(--frost); padding: 9px 0 9px 1.4em; }
.svc-compare li::before { position: absolute; left: 0; content: '✓'; color: var(--steam); font-weight: 700; }
.svc-compare a { margin-top: auto; }
@media(min-width: 850px) { .svc-compare__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#repeat-form, .q-receipt { max-width: 38rem; margin-top: 20px; }
#repeat-form[hidden], .q-receipt[hidden], .quote__panel [hidden]:not(.qs) { display: none; }
.q-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.q-windows, .q-photo { margin-top: 24px; padding-top: 0; }
.q-windows legend, .q-photo legend { padding: 0; font: 700 1rem/1.4 var(--f-text); }
.q-windows .q-help, .q-photo .q-help { font-size: .9375rem; }
.q-window { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 16px; }
.q-window + .q-window { margin-top: 22px; }
.q-window > .q-field { flex: 1 1 15rem; min-width: 0; margin: 0; }
.q-window .q-field > .q-date-box {
  position: relative; display: flex; align-items: center; width: 100%; min-width: 0; height: 54px;
  margin: 0; padding: 0 12px; border: 2px solid rgba(15,35,56,.32); border-radius: 6px; background: var(--white);
}
/* Keep the chrome on the wrapper. iOS may add padding to a native date input's declared width. */
.q-window .q-date-box input {
  display: block; width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink);
}
.q-window .q-date-box:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.q-window .q-date-box input:focus { outline: none; }
.q-date-hint {
  position: absolute; inset: 0 2.5rem 0 12px; display: flex; align-items: center;
  pointer-events: none; background: inherit; font: 500 16px/1.4 var(--f-text); color: var(--ink-soft);
}
.q-date-box:focus-within .q-date-hint, .q-date-hint[hidden] { display: none; }
.q-window select { height: 54px; }
.q-window select:disabled, .q-window .q-field > .q-date-box.is-disabled { color: var(--ink-soft); background: var(--frost-lite); }
.q-photo .q-field input { padding: 8px; height: auto; font-size: .9375rem; }
.q-photo input::file-selector-button { min-height: 40px; padding: 4px 12px; background: var(--ink); color: white; border: 0; border-radius: 4px; font: 600 .9375rem var(--f-text); margin-right: 8px; cursor: pointer; }
.q-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.q-thumbs li { width: min(104px, 30%); }
.q-thumbs img, .owner-photos img { display: block; width: 100%; border-radius: 5px; aspect-ratio: 4/3; object-fit: cover; }
.q-thumbs button { border: 0; background: transparent; color: var(--ink); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }
.q-receipt h2 { font: 750 clamp(1.8rem, 5vw, 3rem)/1.1 var(--f-display); margin-bottom: 16px; }
.q-receipt h3 { font: 700 clamp(1.2rem, 3vw, 1.6rem)/1.25 var(--f-display); margin: 26px 0 10px; }
.q-reference, .q-return-summary { padding: 14px 18px; border-left: 5px solid var(--accent); background: white; }
.q-reference { margin-top: 18px; }
.q-reference strong { display: block; letter-spacing: .025em; }
.q-return-summary { font-weight: 700; margin-bottom: 12px; }
.q-actions button:disabled { opacity: .65; }
@media(max-width: 1099px) { .q-received .quote__glass { height: 80px; } }

.owner-portal { background: var(--mist); color: var(--ink); font: 1rem/1.5 system-ui, sans-serif; }
.owner-portal [hidden] { display: none; }
.owner-top { background: var(--night); color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px max(20px, calc((100vw - 900px)/2)); }
.owner-top img { display: block; width: 144px; height: auto; }
.owner-top button { min-height: 44px; background: transparent; color: white; padding: 0 14px; font: inherit; border: 1px solid #a9d2f6; border-radius: 4px; cursor: pointer; }
.owner-main { width: min(900px, calc(100% - 40px)); margin: clamp(32px, 7vw, 76px) auto; padding-bottom: 56px; }
.owner-main h1 { font: 750 clamp(2rem, 5vw, 3.2rem)/1.1 system-ui, sans-serif; margin: 0 0 12px; }
#owner-login { max-width: 32rem; }
#owner-login .btn { margin-top: 16px; }
#inbox-status { margin: 12px 0; }
.owner-card { background: white; border: 1px solid var(--frost); border-radius: 6px; margin: 12px 0; }
.owner-card summary { padding: 16px 20px; cursor: pointer; overflow-wrap: anywhere; }
.owner-card summary span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--ink-soft); }
.owner-detail { padding: 0 20px 20px; }
.owner-detail dl { padding: 12px 0; display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); gap: 8px 12px; border-top: 1px solid var(--frost); }
.owner-detail dt { font-weight: 700; }
.owner-detail dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.owner-photos { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }

.owner-photos button { background: transparent; border: 0; padding: 0; cursor: zoom-in; }
.owner-viewer { width: fit-content; max-width: 94vw; max-height: 94vh; margin: auto; padding: 12px; border: 0; border-radius: 6px; color: var(--ink); background: white; }
.owner-viewer::backdrop { background: rgba(15,35,56,.8); }
.owner-viewer img { display: block; max-width: 100%; max-height: 76vh; object-fit: contain; }

/* Only show enhanced controls when their scripts can operate them. */
.foot__nav [hidden], html:not(.js) .gal-filter, html:not(.js) .foot__motion,
html:not(.js) .btn.menu-toggle { display: none; }
@media (max-width: 1099px) {
  html:not(.js):not(.nav-loading) .site-header { position: relative; height: auto; flex-wrap: wrap; padding-block: 8px; }
  html:not(.js):not(.nav-loading) .site-header .nav { display: flex; order: 4; width: 100%; flex-wrap: wrap; gap: 4px 14px; }
  html:not(.js):not(.nav-loading) .site-header .nav a { display: inline-flex; min-height: 44px; align-items: center; }
}

/* The badge's charcoal ground, blue outer ring and white inner line. */
.site-header, .site-header.is-stuck, .site-header.over-dark,
.menu-open .site-header, .menu-open .site-header.over-dark, .owner-top {
  background: var(--charcoal);
  color: white;
  box-shadow: inset 0 -1px rgb(255 255 255 / .14);
  backdrop-filter: none;
}
.site-header { align-items: center; }
.site-header .brand, .site-header.is-stuck .brand, .site-header.over-dark .brand, .menu-open .brand {
  align-self: center;
  margin-top: 0;
}
.site-header .brand__logo, .site-header:not(.is-stuck):not(.over-dark) .brand__logo,
.site-header.is-stuck .brand__logo, .site-header.over-dark .brand__logo, .menu-open .site-header .brand__logo {
  height: calc(var(--header) - 12px) !important;
  transition: none;
}
@media (max-width: 1099px) {
  .site-header { gap: 8px; }
  .site-header .brand { min-width: 0; }
  .site-header .brand__logo { max-width: 100%; object-fit: contain; object-position: left center; }
  .site-header .header-quote, .site-header .menu-toggle, .page-quote .site-header .header-call {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 1rem;
  }
  .site-header .header-quote, .page-quote .site-header .header-call { display: inline-flex; }
  .page-quote .site-header .header-quote { display: none; }
  .menu-open .site-header .header-quote, .menu-open .site-header .header-call { visibility: hidden; }
}
@media (max-width: 380px) {
  .site-header { padding-inline: 12px; }
}
.foot__nav.foot__actions { gap: 4px 18px; }
.foot__actions a { color: var(--sky); }
.site-header .brand__logo--plate { display: none; }
.site-header .brand__logo--clear { display: block; }
.site-header :focus-visible, .hero :focus-visible, .menu :focus-visible { outline-color: var(--sky); }
.site-header .nav a::after { background: var(--accent); border-radius: 2px; }
.btn, .chip { border-radius: 999px; transform: none; }
.btn > span, .chip > span { transform: none; }
.chip:active { transform: scale(.98); }
@media (hover: hover) { .force-motion .chip:hover { transform: translateY(-2px); } }
.site-header .btn.header-call, .site-header .btn.menu-toggle, .site-header.over-dark .btn.header-call,
.site-header.over-dark .btn.menu-toggle, .menu-open .site-header .btn.menu-toggle {
  border: 1px solid #8d9ca5;
  background: var(--charcoal);
  color: white;
}
.btn--accent { color: #071c29; }
.menu {
  color: white;
  background: radial-gradient(ellipse at 94% 12%, #23455a, transparent 52%), var(--charcoal);
}
.menu .menu__note { color: #d7e2e8; }
.menu .menu__call { background: white; color: var(--ink); }
.foot { background: var(--charcoal); border-top: 3px solid var(--accent); }
.foot__tagline span { color: #6ac6fb; }

/* The kitchen sits inside the two rings of the round mark. The logo itself stays intact. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 62px);
  margin: 0;
  min-height: 0;
  padding: clamp(32px, 5vw, 78px) var(--gut) clamp(36px, 6vw, 92px);
  color: white;
  background: radial-gradient(ellipse at 93% 39%, #234b65 0%, transparent 53%),
              linear-gradient(118deg, #29282a 6%, var(--charcoal) 51%, #232f38);
}
.hero__glass { overflow: hidden; }
.hero__glass::after {
  content: "";
  position: absolute;
  width: max(86%, 680px);
  aspect-ratio: 1;
  right: -21%;
  top: -20%;
  border: 1px solid rgb(156 213 248 / .17);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgb(93 185 244 / .035), 0 0 0 26px rgb(156 213 248 / .1);
}
.hero__glass .hero__frost, .hero__glass .hero__drips, .hero__glass .hero__light { display: none; }
.hero__glass .hero__beads { opacity: .13; }
.hero__inner { display: block; padding: 0; min-width: 0; container-type: inline-size; }
.hero__title { max-width: none; font-size: clamp(1.85rem, 5vw, 7rem); line-height: 1.02; }
@supports (font-size: 1cqw) { .hero__title { font-size: calc(clamp(1.7rem, 10.7cqw, 7.5rem) * var(--fit, 1)); } }
.hero__title .ln--2 .ln__in { color: #56bdff; font-weight: 600; }
.hero__title .ln--3::before { display: none; }
.force-motion .hero__title .ln--3::before { animation: none; }
.hero__foot { margin-top: clamp(16px, 2.3vw, 36px); }
.hero__foot .lead { color: #e0e9ee; max-width: 29em; margin: 0; }
.hero__actions { margin-top: 20px; }
.hero__actions .link { color: white; text-decoration-color: #64c4ff; }
.hero .hero__window {
  justify-self: center;
  align-self: center;
  width: min(100%, 555px);
  height: auto;
  min-height: 0;
  max-width: none;
  aspect-ratio: 1;
  margin: 0;
}
.hero .win {
  inset: 3.4%;
  overflow: hidden;
  background: #a9c5d7;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero .win img, .hero .win__fog { -webkit-mask-image: none; mask-image: none; }
.hero .win img { top: 0; height: 100%; object-position: center 49%; }
.hero .win::before { display: none; }
.window-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.window-rim__track { stroke: #52758a; stroke-width: .65; }
.window-rim__blue { stroke: var(--accent); stroke-width: 1.35; stroke-dasharray: 100; }
.window-rim__inner { stroke: #edf7fd; stroke-width: .34; }
.hero .hero__blade { --r: 12deg; left: auto; right: -2%; top: 8%; width: 37%; }
.force-motion .hero .hero__blade { animation: none; }
.hero .hero__window .tab {
  top: auto;
  left: 2%;
  bottom: 12%;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #bde8ff;
  background: #f1f8fc;
  color: var(--ink);
  transform: none;
}
.hero .tab > span, .hero__hint > span { transform: none; }
.hero .hero__hint { top: 57%; bottom: auto; border-radius: 999px; transform: translateX(-50%); background: #263440; }
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    min-height: clamp(520px, calc(91svh - var(--header)), 950px);
    padding-inline: max(var(--gut), calc((100vw - 1530px) / 2));
  }
  .hero .hero__window { width: min(100%, 74svh, 700px); }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero__inner { width: min(100%, 37rem); }
  .hero .hero__window { width: min(76%, 450px); }
}

@keyframes traceRim { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.page-hero {
  color: white;
  background: radial-gradient(ellipse at 92% 10%, #234d67, transparent 62%), var(--charcoal);
}
.page-hero .lead, .page-hero .kicker { color: #dbeaf3; }
.page-hero::after {
  width: 76vw;
  height: 76vw;
  max-width: 780px;
  max-height: 780px;
  inset: auto -27% -65% auto;
  background: none;
  border: 1px solid rgb(134 211 255 / .38);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgb(134 211 255 / .08), 0 0 0 16px rgb(134 211 255 / .25);
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (min-width: 900px) {
  .page-hero__in { padding-right: 24%; }
  .page-hero::before {
    content: "";
    position: absolute;
    right: max(10%, calc((100% - 1160px) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: clamp(120px, 14vw, 210px);
    aspect-ratio: 1;
    background: var(--charcoal) url(../img/complete-clean-icon.svg?v=1) center / 87% no-repeat;
    border: 3px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--charcoal), 0 0 0 4px rgb(238 249 255 / .64);
    z-index: 1;
  }
}

.after { background: radial-gradient(ellipse at 85% 12%, #253e4e, transparent 62%), #252628; }
.after .h2 .ln:last-child .ln__in { color: #63c5ff; }
.ba-stage { border-radius: 18px; }
.ba-stage .ba.is-on { z-index: 1; }
.ba-ready .ba-stage .ba.is-leaving { display: block; z-index: 0; }
.ba-stage .ba-tab { z-index: 2; }
.force-motion .ba.is-arriving { animation: comparePhoto .18s ease-out; }
@keyframes comparePhoto { from { opacity: 0; } to { opacity: 1; } }

.quote__progress { display: flex; align-items: center; gap: 10px; }
.quote__count { margin: 0; font-weight: 700; color: var(--ink); }
.quote-ring { position: relative; width: 44px; height: 44px; flex: none; }
.quote-ring svg { width: 100%; stroke-width: 3px; }
.quote-ring img { position: absolute; inset: 7px; }
.quote-ring__track { stroke: #ccdeea; }
.quote-ring__value { stroke: #087cbe; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--remaining, 100); }
.receipt-check { width: 44px; height: 44px; margin-bottom: 12px; fill: none; stroke: #087cbe; stroke-width: 3; }
.receipt-check path { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.force-motion .receipt-check path { stroke-dasharray: 100; animation: traceRim .28s var(--ease); }
@media (forced-colors: active) {
  .window-rim__blue, .quote-ring__value, .receipt-check { stroke: Highlight; }
  .quote-ring__track { stroke: GrayText; }
}


/* Commercial service selection and its storefront photograph. */
.commercial {
  color: white;
  background: #262a2e;
  border-block: 1px solid #48515a;
  padding: clamp(28px, 5vw, 84px) var(--gut);
}
.commercial__inner {
  display: grid;
  grid-template-areas: "heading" "photo" "options";
  gap: clamp(19px, 3vw, 30px);
  max-width: 1360px;
  margin-inline: auto;
}
.commercial__heading { grid-area: heading; min-width: 0; }
.commercial__area {
  display: flex; align-items: center; gap: 11px; margin: 0 0 12px;
  color: #bfdff0; font: 600 .78rem/1.5 var(--f-text); letter-spacing: .075em; text-transform: uppercase;
}
.commercial__area::before { content: ""; width: 30px; height: 2px; flex: none; background: var(--accent); }
.commercial h2 {
  margin: 0; font: 720 clamp(2.2rem, 7.9vw, 4.5rem)/1.02 var(--f-display); letter-spacing: -.045em; overflow-wrap: anywhere;
}
.commercial h2 span { color: #75cafa; }
.commercial__photo {
  grid-area: photo; position: relative; overflow: hidden; border-radius: 8px;
  background: #3b464a; aspect-ratio: 1.65;
}
.commercial__photo picture, .commercial__photo img { display: block; width: 100%; height: 100%; }
.commercial__photo img { object-fit: cover; object-position: 46% 24%; }
.commercial__options { grid-area: options; min-width: 0; }
.commercial__intro { color: #d5dfe4; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; }
.commercial__services { margin-top: 14px; border-top: 1px solid #53616a; }
.commercial__services li { border-bottom: 1px solid #53616a; }
.commercial__services a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 68px; padding: 13px 2px; text-decoration: none;
}
.commercial__services strong, .commercial__services small { display: block; }
.commercial__services strong { font: 650 clamp(1.04rem, 1.55vw, 1.36rem)/1.28 var(--f-text); }
.commercial__services small { margin-top: 4px; color: #c6d2d9; font-size: .9375rem; line-height: 1.45; }
.commercial__arrow {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid #69bcf0; border-radius: 50%; color: #8bd4ff; font: 500 1.25rem/1 system-ui, sans-serif;
}
.commercial__services a:focus-visible .commercial__arrow { background: var(--accent); color: var(--ink); }
.commercial__work { min-height: 48px; margin-top: 10px; color: #a9ddff; font-size: .9375rem; }
@media (hover: hover) {
  .commercial__services a:hover .commercial__arrow { background: var(--accent); color: var(--ink); }
  .force-motion .commercial__arrow { transition: transform .2s var(--ease), background-color .2s; }
  .force-motion .commercial__services a:hover .commercial__arrow { transform: translateX(3px); }
}
@media (min-width: 900px) {
  .commercial__inner {
    grid-template-areas: "heading photo" "options photo";
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    column-gap: clamp(36px, 5vw, 85px); row-gap: 20px;
  }
  .commercial__heading { align-self: end; }
  .commercial h2 { font-size: clamp(3rem, 4.7vw, 4.85rem); }
  .commercial h2 span { display: block; }
  .commercial__photo { aspect-ratio: auto; min-height: clamp(410px, 38vw, 590px); }
  .commercial__photo picture { position: absolute; inset: 0; }
  .commercial__options { align-self: start; }
  .commercial__services a { padding-block: 17px; }
}
.quote__glass .tab[hidden] { display: none; }
.q-field input[name="space"]::placeholder, .q-field input[name="bizsize"]::placeholder { color: #53687b; opacity: 1; }
@media (max-width: 719px) {
  .q-started .quote__glass[data-space="business"] { display: none; }
}
.quote__glass[data-space="business"] img { object-position: 43% 34%; }
.quote__glass[data-space="neutral"] {
  background: radial-gradient(ellipse at 70% 30%, #34556b, var(--night) 80%);
}

/* The two documented storefront projects are easier to see in a wider frame. */
.gal[data-category="commercial"] { max-width: 1140px; grid-template-columns: minmax(0, 1fr); }
.gal[data-category="commercial"] .gal__img { aspect-ratio: 4/3; }
.gal[data-category="commercial"] #commercial-work { scroll-margin-block-start: clamp(112px, 16vh, 144px); }
@media (min-width: 600px) {
  .gal[data-category="commercial"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.faq p a { text-decoration: underline; text-underline-offset: .16em; }
.cc-dialog { margin: auto; }