/* fonts.css */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-0.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: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-1.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: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/figtree-3.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: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/figtree-4.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;
}

/* site.css */
/* New England Epoxy LLC - shared shell stylesheet (see SHELL.md).
   Two numbers drive every decorative edge: --r-s (8px) and --r-l (64px; 28px under 768px). */

/* ===== SECTION tokens: colour, shape, type scale, motion and the generated font/size/alpha tokens (the only place a literal value lives) ===== */
:root{
  --menu-fade:120ms;--menu-rows:200ms;--menu-title:24px;
  --dur-instant:80ms;--dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
  --dur-1:var(--dur-fast);--dur-2:var(--dur-base);--dur-3:var(--dur-slow);
  --ease-standard:cubic-bezier(0.2,0,0,1);--ease-exit:cubic-bezier(0.4,0,1,1);--ease-linear:linear;
  --ease-out:var(--ease-standard);--ease-in-out:var(--ease-standard);
  /* colour tokens */
  /* One shared palette: ink, paper, light surface, logo orange and muted text. */
  --orange:#f87000;--orange-deep:#7a3700;            /* logo orange: actions, icons, badges and short rules */
  --orange-hover:#f87000;
  --on-orange:#141414;         /* text on orange (6.4:1) */
  --ink:#141414;               /* header bar, dark bands, footer, headings, body */
  --ink-soft:#5a5a5a;          /* muted text on white / surface (6.9:1 on white, 6.3:1 on surface) */
  --white:#fff;
  --surface:#f3f3f1;
  /* back-compat aliases: older rules still reference these */
  --paper:#f3f3f1;--stone:#f3f3f1;--ink-2:#141414;--mid:#5a5a5a;           /* alternating sections and the trust strip */
  --line:#f3f3f1;              /* hairline on light */
  --line-dark:#141414;         /* dark hairline and nav hover tile */
  --on-dark:#fff;
  --on-dark-soft:#ffffff;      /* secondary text on ink */
  --error:#141414;
  --burnt:#5a5a5a;             /* small eyebrow text on light */
  /* shape: two numbers */
  --r-s:8px;
  --r-l:64px;
  --pill:999px;
  --input-r:8px;
  /* type */
  --font-head:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --wrap:1280px;
  --gut:60px;
  --sec:80px;
  /* Type scale: roles only; phone overrides below. */
  --t-hero-h1:64px;--t-h1:56px;--t-h2:40px;--t-h3:24px;--t-card-title:22px;
  --t-lead:18px;--t-body:16px;--t-caption:14px;--t-eyebrow:13px;--t-button:15px;--ink-alpha-24:rgba(20,20,20,.24);--dur-40ms:40ms;--scrim-alpha-82:rgba(0,0,0,.82);--scrim-alpha-45:rgba(0,0,0,.45);--ink-alpha-65:rgba(20,20,20,.65);--paper-alpha-70:rgb(255 255 255 / 70%);--t-fixed-19-2px:19.2px;--dur-0:0ms;--t-viz-coming-h2:clamp(24px,3vw,36px);--paper-alpha-12:rgba(255,255,255,.12);--font-600-14px-20px-body:600 14px/20px var(--font-body);--font-inquire:700 15px Figtree,Arial,sans-serif;--paper-alpha-20:rgba(255,255,255,.2);--font-700-11px-1_2-body:700 11px/1.2 var(--font-body);--font-500-14px-20px-body:500 14px/20px var(--font-body);--t-24px:24px;--font-600-16px-1_4-body:600 16px/1.4 var(--font-body);--font-500-16px-24px-body:500 16px/24px var(--font-body);--t-14px:14px;--font-500-13px-1_4-body:500 13px/1.4 var(--font-body);--font-500-16px-1_4-body:500 16px/1.4 var(--font-body);--t-20px:20px;--t-fixed-16px:16px;--t-fixed-18-2px:18.2px;--t-fixed-21px:21px;--paper-alpha-6:rgba(255,255,255,.06);--paper-alpha-35:rgba(255,255,255,.35);--ink-alpha-85:rgba(20,20,20,.85);--ink-alpha-0:rgba(20,20,20,0);--ink-alpha-64:rgba(20,20,20,.64);--ink-alpha-62:rgba(20,20,20,.62);--ink-alpha-35:rgba(20,20,20,.35);--ink-alpha-55:rgba(20,20,20,.55);--ink-alpha-92:rgba(20,20,20,.92);--ink-alpha-74:rgba(20,20,20,.74);--ink-alpha-14:rgba(20,20,20,.14);--ink-alpha-20:rgba(20,20,20,.2);--ink-alpha-22:rgba(20,20,20,.22);--ink-alpha-68:rgba(20,20,20,.68);--ink-alpha-60:rgba(20,20,20,.6);--t-fixed-30px:30px;--ink-alpha-40:rgba(20,20,20,.4);--scrim-alpha-55:rgba(0,0,0,.55);--ink-alpha-16:rgba(20,20,20,.16);--paper-alpha-85:rgba(255,255,255,.85);--t-fixed-14px:14px;--t-fixed-20px:20px;--ink-alpha-82:rgba(20,20,20,.82);--ink-alpha-48:rgba(20,20,20,.48);--ink-alpha-12:rgba(20,20,20,.12);--ink-alpha-78:rgba(20,20,20,.78);--ink-alpha-38:rgba(20,20,20,.38);--paper-alpha-18:rgba(255,255,255,.18);--scrim-alpha-35:rgba(0,0,0,.35);--scrim-alpha-65:rgba(0,0,0,.65);--ink-alpha-85:rgb(20 20 20 / 85%);--r-circle:50%;--t-icon-26px:26px;--t-icon-30px:30px;--t-reader-1-25rem:1.25rem;--t-reader-1-8rem:1.8rem;--dur-0s:0s;--ink-alpha-16:rgb(20 20 20 / .16);--ink-alpha-95:rgba(20,20,20,.95);--dur-300ms:300ms;--ease-ease-out:ease-out;--dur-160ms:160ms;--paper-alpha-8:rgba(255,255,255,.08);--ink-alpha-75:rgb(20 20 20 / 75%);--dur-1s:1s;--paper-alpha-8:rgb(255 255 255 / 8%);--t-home-help:14px;--t-home-hint:15px;--t-home-sub:20px;--t-home-form-heading:24px;--hero-scrim:rgba(0,0,0,.55);--hero-pause-border:rgba(255,255,255,.5);--hero-pause-fill:rgba(255,255,255,.15);--scrim-alpha-12:rgba(0,0,0,.12);--paper-alpha-14:rgba(255,255,255,.14);
}

/* ===== SECTION base: reset, document, links, focus ring, skip link ===== */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px;color:var(--ink);
}
body{margin:0;font-family:var(--font-body);font-weight:500;color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:var(--t-body);line-height:1.55;
}
video{max-width:100%;display:block}
img{max-width:100%;display:block;height:auto;
}
a{color:inherit}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.site-nav :focus-visible,.site-footer :focus-visible{outline-color:var(--white)}
.sr-only{width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only.sr-only.sr-only.sr-only{position:absolute;
}
.skip{position:absolute;left:16px;top:-100px;z-index:200;background:var(--ink);color:var(--white);padding:12px 18px;border-radius:var(--r-s);font-weight:700}
.skip:focus{top:12px}

/* ---------- type scale (desktop / mobile) ---------- */
h4{font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:900;text-transform:uppercase;color:inherit;margin:0 0 .5em;font-size:var(--t-body);line-height:1.2;letter-spacing:.02em;
}
h3{font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:uppercase;color:inherit;margin:0 0 .5em;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.005em;font-weight:900;
}
h2{font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:900;text-transform:uppercase;color:inherit;margin:0 0 .5em;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.015em;
}
h1{font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:uppercase;color:inherit;margin:0 0 .5em;font-size:var(--t-h1);line-height:1;letter-spacing:-.025em;font-weight:900;
}
/* form and legal pages use the smaller H1 */
.sbc-title h1{font-size:var(--t-h1);margin:0;letter-spacing:-.025em;font-weight:900;color:var(--white);
}
.pp-title h1{font-size:var(--t-h1);margin:0;font-weight:900;color:var(--white);letter-spacing:-.02em;word-spacing:.12em;
}
.fl-hero h1{font-size:var(--t-h1);letter-spacing:-.025em;color:var(--white);margin:0 0 16px;max-width:none;
}
.fq-hero h1{font-size:var(--t-h1);max-width:none;color:var(--white);margin:0 0 36px;letter-spacing:normal;
}
.ct-title h1{font-size:var(--t-h1);margin:0;text-align:center;color:var(--white);font-weight:900;
}
.lead{font-size:var(--t-lead);line-height:1.45;font-weight:500}
.small{font-size:var(--t-body);line-height:1.45}
.eyebrow{font:700 var(--t-eyebrow)/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--burnt);margin:0 0 14px}
.on-dark .eyebrow{color:var(--on-dark-soft)}
.on-dark{color:var(--on-dark)}
.muted{color:var(--ink-soft)}
.on-dark .muted{color:var(--on-dark-soft)}

/* contact format: phone always bold, email regular + ALL CAPS via one class */
a[href^="tel:"]{font-weight:700;text-decoration:none;white-space:nowrap}
.phone{text-decoration:none;white-space:nowrap;font-weight:700;
}
.email{text-transform:uppercase;letter-spacing:.03em;overflow-wrap:anywhere;font-size:var(--t-button);font-weight:400}
a.email{text-decoration:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec--white{background:var(--white)}
.sec--paper,.sec--stone{background:var(--surface)}
.sec--dark{background:var(--ink);color:var(--on-dark)}
.sec--flake{background:var(--ink) url("../img/flake-tile.svg") 0 0/320px 320px;color:var(--on-dark);background-image:none;
} /* signature pattern: use on at most two bands per page */
.sec__head{max-width:760px;margin-bottom:40px}
.sec__head.center{margin-inline:auto;text-align:center}
.sec__head p{margin:0}
.grid{display:grid;gap:60px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

/* ---------- crafted edges: at most ONE per section, built from --r-s / --r-l ---------- */
.dev-corner{border-top-right-radius:var(--r-l)}            /* one large asymmetric corner on a panel */
.dev-corner-photo{border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);overflow:hidden}
.dev-plate{position:relative;isolation:isolate}              /* flat tinted plate offset behind a key photo, no shadow */
.dev-plate::before{content:"";position:absolute;z-index:-1;inset:calc(var(--r-s)*2) calc(var(--r-s)*-2) calc(var(--r-s)*-2) calc(var(--r-s)*2);background:var(--surface);border-radius:var(--r-s)}

/* ---------- buttons: even padding, never wrap, 48px min ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 28px;border:2px solid transparent;border-radius:var(--r-s);font:700 var(--t-button)/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;background:none;color:var(--ink);transition:background-color var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard)}
.btn svg{flex:none;width:20px;height:20px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.link-under{font-weight:700;font-size:var(--t-lead);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;color:inherit}
.link-under:hover{text-decoration-thickness:3px}
.more{font-weight:700;color:var(--ink);text-underline-offset:4px}

/* ---------- header/nav: ONE dark bar (Nov 3 2026): logo left, nav centred between logo and CTAs, phone + estimate pill last. DOM order = tab order: logo, nav, CTAs ---------- */
.site-header{--hpad:24px;--hh:100px;position:sticky;top:0;background:var(--ink);color:var(--white);display:grid;grid-template-columns:var(--hpad) auto minmax(0,1fr) auto var(--hpad);grid-template-rows:var(--hh);background-color:var(--ink);z-index:60;
}

.logo{grid-column:2;grid-row:1;display:flex;align-items:center;min-width:40px;min-height:40px;text-decoration:none;align-self:center;margin-right:clamp(16px,2vw,32px)}
.logo img{width:200px;height:auto}
.hdr-right{grid-column:4;grid-row:1;display:flex;align-items:center;gap:6px;align-self:center;margin-left:clamp(12px,1.4vw,28px)}
.hdr-actions{display:flex;align-items:center;gap:12px}
.btn--phone .ph-short{display:none}
.nav-backdrop{display:none}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:124px;padding:12px 14px;border:2px solid var(--white);border-radius:var(--r-s);background:transparent;color:var(--white);font:700 var(--t-button)/1.2 var(--font-body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.menu-toggle:hover{background:var(--white);color:var(--ink)}
.menu-toggle svg{width:22px;height:22px;flex:none}
.menu-toggle__label{display:inline-block;min-width:4.4em;text-align:left}
.menu-toggle .mt-ico path{transform-box:view-box}
.menu-toggle .mt-ico path:nth-child(1){transform-origin:12px 6px}.menu-toggle .mt-ico path:nth-child(2){transform-origin:12px 12px}.menu-toggle .mt-ico path:nth-child(3){transform-origin:12px 18px}

.site-nav{--np:clamp(8px,.9vw,14px);grid-column:3;grid-row:1;align-self:stretch;min-width:0;background:transparent;color:var(--white);background-color:var(--ink);
}
.nav-list{display:flex;align-items:stretch;justify-content:flex-end;height:100%;list-style:none}
.nav-list>li{display:flex;position:relative}
.nav-list a,.nav-list button.nav-tab{display:flex;align-items:center;gap:7px;padding:0 var(--np);color:var(--white);font:800 var(--t-button)/1.2 var(--font-body);letter-spacing:clamp(.02em,.5vw - .1em,.08em);text-transform:uppercase;text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;position:relative}
.nav-list a:hover,.nav-list button.nav-tab:hover,.has-menu.open>button.nav-tab{color:var(--white);background:var(--line-dark)}
.nav-list a[aria-current="page"]::after{content:"";position:absolute;left:var(--np);right:var(--np);bottom:0;height:3px;background:var(--orange)}
.nav-tab .chev{position:relative;width:12px;height:12px;flex:none;color:var(--orange);
}
.nav-tab .chev path{position:absolute;transform-box:view-box;transform-origin:50% 50%}

/* ===== HERO+MENU (Nov 3 2026, owner spec notes/HERO-MENU-SPEC.md): mega-menu panels + collapse at 1024 ===== */
.nav-panel-ctas,.nav-cta .est-mid,.nav-cta .est-short{display:none}

/* Desktop: fixed-size two-column cards; long menus scroll within the viewport. */
.menu{position:absolute;top:calc(100% + 8px);left:var(--menu-left,0px);width:1120px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--menu-header-height,100px) - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);color:var(--ink);border:0;border-radius:calc(var(--r-s) * 2);padding:16px;display:block;visibility:hidden;pointer-events:none;box-shadow:0 18px 44px var(--ink-alpha-24);scrollbar-width:thin;scrollbar-color:var(--ink-soft) transparent;z-index:70;transition:none;transform:none;opacity:1;
}
/* Closed, unpositioned panels must not enlarge the document's scroll area. */
.has-menu:not(.open)>.menu{display:none}
.has-menu.open>.menu{visibility:visible;pointer-events:auto;transition:none;transform:none;opacity:1;
}
.has-menu.open::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.menu__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0}
.menu__list li{display:block;--menu-order:0}
.menu__list li:nth-child(2){--menu-order:1}
.menu__list li:nth-child(3){--menu-order:2}
.menu__list li:nth-child(4){--menu-order:3}
.menu__list li:nth-child(5){--menu-order:4}
.menu__list li:nth-child(6){--menu-order:5}
.nav-list .menu .menu__card{position:relative;display:block;aspect-ratio:16/9;padding:0;border-radius:calc(var(--r-s) * 1.5);overflow:hidden;background:var(--ink);color:var(--white);font:700 var(--menu-title)/1.2 var(--font-body);letter-spacing:.01em;text-transform:none;white-space:normal;text-decoration:none}
.nav-list .menu .menu__card:hover{background:var(--ink);color:var(--white)}
.nav-list .menu .menu__card:focus-visible{background:var(--ink);color:var(--white);outline:none;
}
.menu__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:none}
.nav-list .menu .menu__card:hover img,.nav-list .menu .menu__card:focus-visible img{transform:scale(1.04)}
.nav-list .menu .menu__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,transparent 45%,var(--scrim-alpha-82) 100%)}
.nav-list .menu .menu__card::after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:3;border:3px solid transparent;border-radius:calc(var(--r-s) * 1.5);background:none;pointer-events:none;transition:border-color var(--dur-1) var(--ease-standard)}
.nav-list .menu .menu__card:hover::after,.nav-list .menu .menu__card:focus-visible::after,.nav-list .menu .menu__card[aria-current="page"]::after{border-color:var(--orange)}
.menu__lab{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:0 20px 20px;color:var(--white);font:700 var(--menu-title)/1.2 var(--font-body);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.menu__lab .arr{display:inline-block;width:20px;height:20px;margin-left:8px;vertical-align:-3px;transition:none}
.menu .menu__card:hover .arr,.menu .menu__card:focus-visible .arr{transform:translateX(4px)}
.menu .menu__card[aria-current="page"] .menu__lab{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* <= 1279px: the inline nav no longer fits beside the phone + estimate buttons, so the nav becomes the Menu button + full-width accordion panel. Phone and estimate stay in the bar down to 1025px. */
/* Inline bar tiers (>=1280px). Floor Visualizer stays omitted while Coming Soon.
   Keep the nav's intrinsic width so flex sizing cannot compress item gaps. */
/* ---------- hero: edge-to-edge media, solid text panel ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,56%) minmax(0,1fr);min-height:640px;background:var(--ink);overflow:hidden}
.hero__media{position:absolute;top:0;bottom:0;right:0;left:calc(56% - var(--r-l));background:var(--ink)}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero__panel{position:relative;z-index:2;background:var(--ink);color:var(--white);padding:72px 48px 72px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-top-right-radius:var(--r-l)}
.hero h1{margin-bottom:.45em;max-width:14ch}
.hero__sub{font-size:var(--t-lead);line-height:1.45;max-width:34em;color:var(--on-dark-soft);margin-bottom:28px}
.hero .btn-row{margin-bottom:22px}

/* thin inline row of plain facts with rules between */
.facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;padding:18px 0;margin:0}
.facts li{padding:2px 26px;font-size:var(--t-lead);font-weight:600;border-left:1px solid var(--line);line-height:1.3}
.facts li:first-child{border-left:0}
.facts a{text-decoration:underline;text-underline-offset:4px}

/* ---------- media ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--surface)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover}
.ar-43{aspect-ratio:4/3}.ar-11{aspect-ratio:1/1}
.cap{font-size:var(--t-caption);line-height:1.4;color:var(--ink-soft);margin:10px 0 0}
.on-dark .cap{color:var(--on-dark-soft)}

/* carousel */
.carousel{position:relative}
.carousel__dots{display:flex;justify-content:center;gap:10px;margin-top:16px}
.carousel__dots button{width:18px;height:18px;border-radius:var(--pill);border:0;padding:0;background:var(--ink-soft);cursor:pointer;position:relative}
.carousel__dots button::after{content:"";position:absolute;inset:-14px -3px}
.carousel__dots button[aria-current="true"]{background:var(--ink)}

/* service cards */
.svc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;text-decoration:none;color:var(--ink);transition:none}
.svc:is(a:not(.cta-text),button,.card--link,[role=button]):hover{transform:translateY(-3px)}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc h3{margin:0 0 8px;font-size:var(--t-h3)}
.svc p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--ink-soft)}

/* plain lists */
.list.list{list-style:none;display:grid;gap:10px}
.list li{position:relative;padding-left:22px;line-height:1.5}
.list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:var(--r-s);transform:rotate(45deg);background:var(--orange);
}
.on-dark .list li::before{background:var(--orange);
}
.list--cols.list--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 36px}
.list strong{font-weight:800}

/* video cards + lightbox trigger */
.vcard{display:block;position:relative;border:0;padding:0;background:var(--ink);cursor:pointer;width:100%;border-radius:var(--r-s);overflow:hidden;text-align:left}
.vcard img{width:100%;height:100%;object-fit:cover}
.vcard__play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:var(--pill);background:var(--white);display:grid;place-items:center}
.vcard__play svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)}
.vcard:hover .vcard__play{background:var(--white)}
.lb{position:fixed;inset:0;z-index:300;background:var(--ink);display:none;align-items:center;justify-content:center;padding:24px}
.lb.is-open{display:flex}
.lb__in{position:relative;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb__in img,.lb__in video{max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);border-radius:var(--r-s);background:var(--ink)}
.lb__cap{color:var(--white);font-size:var(--t-body);text-align:center;margin:0}
.lb__btn{position:absolute;top:12px;width:48px;height:48px;border-radius:var(--pill);border:2px solid var(--white);background:var(--ink);color:var(--white);font-size:var(--t-h3);line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.lb__close{right:12px}.lb__prev{left:12px;top:50%}.lb__next{right:12px;top:50%}
[data-lightbox]{cursor:zoom-in}

/* before / after compare slider */
.compare{position:relative;overflow:hidden;border-radius:var(--r-s);aspect-ratio:3/2;background:var(--surface);touch-action:pan-y;user-select:none;--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare__after{clip-path:inset(0 0 0 var(--pos))}
.compare__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--white);pointer-events:none}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;min-height:44px;touch-action:none}

/* faq */
.faq{display:grid;gap:12px;max-width:900px}
.service-faq .faq{margin-inline:auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s)}
.faq summary:not(._){list-style:none;cursor:pointer;padding:18px 56px 18px 22px;font:700 var(--t-lead)/1.35 var(--font-body);position:relative;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:none;position:absolute;right:20px;top:50%;font:700 var(--t-h3)/1 var(--font-body);color:var(--orange);
}
.faq details[open] summary::after{content:none}
.faq details>div,.faq details>m-acc>m-in>div{padding:0 22px 20px}
.faq details>div p:last-child,.faq details>m-acc>m-in>div p:last-child{margin-bottom:0}

/* review cards */
.quote{margin:0;padding:28px 28px 26px;background:var(--white);border-radius:var(--r-s);border:1px solid var(--line)}
.quote p{font-size:var(--t-lead);line-height:1.5;margin:0 0 16px}
.quote footer{font-weight:700;font-size:var(--t-body)}
.quote footer span{font-weight:500;color:var(--ink-soft)}

/* process steps */
.step{position:relative}
.step__img{position:relative;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;background:var(--ink);margin-bottom:18px}
.step__img img{width:100%;height:100%;object-fit:cover}
.step__num{position:absolute;right:14px;bottom:8px;font:900 var(--t-h1)/1 var(--font-head);font-stretch:112%;color:var(--white);text-shadow:0 2px 12px var(--ink-alpha-65)}
.step h3{font-size:var(--t-h3);margin-bottom:8px}
.step p{margin:0;font-size:var(--t-lead);line-height:1.45}

/* swatches */
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.swatches li{font-size:var(--t-body);line-height:1.3}
.swatches img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-s);margin-bottom:8px}
.swatches strong{display:block;font-weight:800}

/* ---------- forms: estimate form (3 steps) ---------- */
.est{background:var(--white);color:var(--ink);border-radius:var(--r-s);padding:24px}
.est__top{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-body);font-weight:700;margin-bottom:10px}
.est__top span:last-child{font-weight:500;color:var(--ink-soft)}
.est__bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.est__bar i{height:6px;border-radius:var(--r-s);background:var(--surface)}
.est__bar i.is-on{background:var(--ink)}
.est h3{font-size:var(--t-h3);margin-bottom:6px}
.est__step{display:none;transition:none;
}
.est__step.is-on{display:block}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-weight:700;font-size:var(--t-body);margin-bottom:6px}
.field input,.field select{width:100%;min-height:54px;padding:12px 14px;border:1px solid var(--ink-soft);border-radius:var(--input-r);background:var(--white);font:500 var(--t-lead)/1.3 var(--font-body);color:var(--ink)}
.field textarea{width:100%;padding:12px 14px;border:1px solid var(--ink-soft);border-radius:var(--input-r);background:var(--white);font:500 var(--t-lead)/1.3 var(--font-body);color:var(--ink);min-height:110px;resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--ink);outline-offset:1px}
.field small{display:block;margin-top:6px;font-size:var(--t-caption);color:var(--ink-soft)}
.est :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.est .muted{color:var(--ink-soft)}
.est__hint{margin:0 0 14px;font-size:var(--t-body);line-height:1.4;color:var(--ink-soft);
}
.est__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.est__msg{margin:14px 0 0;padding:12px 14px;border-radius:var(--input-r);background:var(--surface);font-weight:600;display:none}
.est__msg.is-on{display:block}

/* ---------- page-level appointment CTA band (shell-owned) ---------- */
.cta-band{background:var(--ink);color:var(--white);padding-block:var(--sec)}
.cta-band__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.cta-band h2{margin-bottom:.4em}
.cta-band__copy p{color:var(--on-dark-soft);font-size:var(--t-button)}
.cta-band__nap{margin:22px 0 0;font-size:var(--t-button);color:var(--on-dark-soft);line-height:1.6}

/* ---------- footer ---------- */
.site-footer{background:var(--ink) url("../img/flake-tile.svg") 0 0/320px 320px;color:var(--white);font-size:var(--t-body);background-color:var(--ink);background-image:none;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-block:64px 48px}
.f-brand img{width:260px;margin-bottom:18px}
.f-brand p{margin:0 0 14px;color:var(--on-dark-soft);max-width:30em}
.f-nap{font-style:normal;line-height:1.7;margin-bottom:16px}
.f-nap a{color:var(--white);display:inline-block;padding:4px 0;
}
.f-h{font:800 var(--t-body)/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;color:var(--on-dark-soft)}
.f-h--next{margin-top:28px}
.f-col ul{list-style:none;display:grid;gap:0}
.f-col a{color:var(--white);text-decoration:none;display:inline-block;padding:6px 0}
.f-col a:hover{text-decoration:underline;text-underline-offset:4px}
.f-social{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 20px}
.f-social a:not(._){width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;color:var(--paper-alpha-70);transition:color var(--dur-1)}
.f-social a:hover,.f-social a:focus-visible{color:var(--orange)}
.f-social svg{width:24px;height:24px;fill:currentColor}
.f-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:20px 0 0;font-size:var(--t-body)}
.f-rating{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--white);text-decoration:none;flex-basis:100%}
.f-rating>svg{width:24px;height:24px;fill:currentColor;flex:none;color:var(--paper-alpha-70)}
.f-rating>span{display:grid;gap:4px}
.f-rating:hover,.f-rating:focus-visible,.f-rating:hover>svg,.f-rating:focus-visible>svg{color:var(--orange)}
.f-stars{display:flex;gap:2px;color:var(--orange)}
.f-stars svg{width:16px;height:16px;fill:currentColor}
.f-badge{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.f-badge::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.35em;vertical-align:-.05em;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.f-bar{background:var(--ink);background-color:var(--ink);
}
.f-bar__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;align-items:center;min-height:80px;padding-block:18px;font-size:var(--t-body);color:var(--on-dark-soft)}
.f-bar a{color:var(--white);display:inline-block;padding:6px 0}
.f-bar__legal{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none}
.f-credit{font-size:var(--t-caption);color:var(--on-dark-soft)}
.f-credit a{color:var(--on-dark-soft)}

/* Legacy contact bars are replaced by the shared Inquire floater. */
.mbar{display:none}

/* ---------- scroll reveal ---------- */
/* scroll reveals: css/motion.css */

/* utilities */.center{text-align:center}

/* ===== PAGE: contact (owner: contact page builder; do not edit above this block) ===== */
.ct-title{min-height:200px;display:grid;align-items:center}
.ct-title .wrap{padding-block:40px}
.ct-main{padding-block:80px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:60px;align-items:stretch}
.ct-info{background:var(--surface);border-radius:var(--r-s);padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;font-size:var(--t-lead);line-height:1.4}
.ct-h-sm{margin:0 0 14px}
.ct-rule{display:block;width:60px;height:3px;background:var(--ink);margin:0 auto 24px}
.ct-rule--left{margin-left:0}
.ct-addr{font-style:normal;font-size:var(--t-lead);line-height:26px;font-weight:500;margin:0 0 20px}
.ct-phone{width:100%;max-width:300px}
.ct-info .email{font-size:var(--t-caption);letter-spacing:.01em;overflow-wrap:normal;white-space:nowrap}
.ct-line{margin:16px 0 0;font-size:var(--t-lead);line-height:1.35}
.ct-hours{font-size:var(--t-body);max-width:100%}
.ct-hours__weekday,.ct-hours__weekend{display:inline-block;white-space:nowrap}
.ct-div{width:100%;border:0;border-top:1px solid var(--line);margin:24px 0}
.ct-small{font-size:var(--t-body);line-height:1.45;margin:0 0 18px}
.ct-more{margin:16px 0 0}
.ct-social{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin:0}
.ct-social a{display:inline-block;padding:11px 4px;font-size:var(--t-body);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.ct-social a:hover{color:var(--burnt);text-decoration-thickness:2px}
.ct-form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);padding:48px 40px}
.ct-form h2{margin:0 0 14px;font-size:var(--t-h2);
}
.ct-lede{font-size:var(--t-lead);line-height:1.4;margin:0 0 26px}
.cform .field{margin-bottom:10px;
}
.cform .field>span{font-size:var(--t-caption);line-height:21px;font-weight:600;margin-bottom:0;
}
.cform .field input,.cform .field select{min-height:52px;font-size:var(--t-body)}
.cform .field textarea{font-size:var(--t-body);min-height:124px;
}
.cform input[type=file]{min-height:56px;padding:3px 6px;line-height:1.2;
}
.req{color:var(--error);font-weight:700}
.cform .err{color:var(--error);font-size:var(--t-caption);font-weight:600;margin-top:5px}
.cform .err:empty{display:none}
.cform [aria-invalid="true"]{border-color:var(--error)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .est__msg{margin-top:16px}
.ct-expect{padding-block:80px}
.ct-expect .sec__head{margin-bottom:32px}
.ct-h-md{font-size:var(--t-h2);margin:0}
.ct-cards.ct-cards{gap:30px;align-items:stretch}
.ct-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);padding:30px}
.ct-card h3{margin:0 0 12px}
.ct-card p{font-size:var(--t-lead);line-height:1.5;margin:0 0 12px}
.ct-card p:last-child{margin-bottom:0}
.ct-card__link.ct-card__link{margin-top:16px}
.ct-strip{background:var(--white);padding-block:60px}
.ct-band{background:var(--ink);border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);padding:40px;min-height:139px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:center}
.ct-band__h{margin:0 0 10px}
.ct-band__copy p{margin:0;font-size:var(--t-lead);line-height:1.5;font-weight:600}
.ct-band__act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
/* ===== /PAGE: contact ===== */

/* ===== PAGE: faq (owned by the faq page builder; do not edit elsewhere) ===== */
.fq-hero{padding-block:40px 60px;
}
.fq-hero__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.fq-hero .btn-row{justify-content:center}
.fq-band{background:var(--surface);border-bottom:10px solid var(--burnt);padding:12px var(--gut) 10px;text-align:center}
.fq-band h2{margin:0;font-size:var(--t-h2);color:var(--ink);letter-spacing:normal;
}
.fq-block{background:var(--white)}
.fq-block__in{padding-block:40px 30px}
.qa{margin:0 0 10px}
.qa summary:not(._){display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:59px;padding:15px 20px;border-radius:var(--r-s);cursor:pointer;list-style:none;color:var(--ink);font:800 var(--t-h3)/1.3 var(--font-body);transition:background var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transition:none;width:13px;height:20px;border:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 20'%3E%3Cpath d='M6.5 0v18M1 12.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/13px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 20'%3E%3Cpath d='M6.5 0v18M1 12.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/13px 20px no-repeat;
}
.qa summary:hover{background:var(--surface);color:var(--ink);
}
.qa[open] summary{background:var(--burnt);color:var(--white);
}
.qa[open] summary::after{margin:0 4px 0 0;transform:rotate(180deg);
}
.qa summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.qa[open] summary:focus-visible{outline-color:var(--burnt)}
.qa__a{padding:20px;background:var(--white);font-size:var(--t-lead);line-height:1.4;font-weight:500;color:var(--ink)}
.qa__a p{margin:0}
.qa__a p+p{margin-top:12px}
.qa__a a:not(.link-under){text-decoration:underline;text-underline-offset:3px}
/* ===== /PAGE: faq ===== */

/* ===== PAGE: about ===== */
.ab-hero{min-height:500px}
.ab-hero .hero__panel{padding-block:56px}
.ab-hero h1{max-width:none;margin-bottom:.4em}
.ab-rule{display:block;width:120px;height:4px;border-radius:var(--r-s);background:var(--surface);margin:0 0 22px}
.ab-hero .hero__sub{margin-bottom:0;
}
.ab-burnt{color:var(--burnt)}
.ab-h3{font-size:var(--t-h3);line-height:1.2;margin:0 0 18px;letter-spacing:0}

.ab-intro{padding-block:56px}
.ab-intro__in{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,.8fr);gap:48px;align-items:center}
.ab-intro__text{font-size:var(--t-lead);line-height:1.35;margin:0;max-width:34em}
.ab-intro__rule{align-self:stretch;background:var(--line)}
.ab-intro__cta .btn-row{gap:12px}

.ab-founders{padding-block:72px}
.ab-founders__in{display:grid;grid-template-columns:minmax(0,605fr) minmax(0,495fr);gap:60px;align-items:center}
.ab-founders .ph{aspect-ratio:605/365}
.ab-founders h2{font-size:var(--t-h2);margin-bottom:20px}
.ab-founders p{font-size:var(--t-lead);line-height:1.3;margin-bottom:24px}
.ab-founders p:last-child{margin-bottom:0}

.ab-statement{padding-block:60px}
.ab-statement p{font-size:var(--t-h3);max-width:960px;margin:0;line-height:1.3;
}
.ab-statement .more{color:var(--white);text-decoration:underline;text-underline-offset:5px;font-weight:700;white-space:nowrap}

.ab-stats{padding-block:44px}
.ab-facts{padding:0}
.ab-facts li{font-size:var(--t-lead);padding:6px 26px}
.ab-facts strong{font:900 var(--t-h3)/1 var(--font-head);font-stretch:112%;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:-.01em;margin-right:6px;vertical-align:-1px}

.ab-install{padding-block:80px}
.ab-install__in{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:0;align-items:center}
.ab-card{background:var(--white);color:var(--ink);border-radius:var(--r-s);padding:50px;position:relative;z-index:2}
.ab-card h2{font-size:var(--t-h2);margin-bottom:22px}
.ab-links{list-style:none;display:grid;gap:4px 28px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 20px}
.ab-links a{display:block;padding:7px 0;font-size:var(--t-lead);line-height:1.25;font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.ab-links a:hover{text-decoration-color:var(--ink)}
.ab-card__note{font-size:var(--t-lead);line-height:1.4;margin-bottom:22px}
.ab-circles{position:relative;min-height:440px}
.ab-circle{position:absolute;border-radius:var(--pill);overflow:hidden;background:var(--surface)}
.ab-circle img{width:100%;height:100%;object-fit:cover}
.ab-circle--a{width:312px;height:312px;top:0;right:8%}
.ab-circle--b{width:269px;height:269px;top:190px;left:-44px}

.ab-how{padding-block:80px 0}
.ab-how__head h2{font-size:var(--t-h2);margin-bottom:40px}
.ab-how__grid{display:grid;grid-template-columns:minmax(0,calc((100% - 1160px)/2 + 549px)) minmax(0,1fr);align-items:stretch}
.ab-how__photo{border-radius:var(--r-s) var(--r-s) var(--r-s) var(--r-s);height:549px;margin-bottom:80px}
.ab-how__acc{padding:0 max(var(--gut),calc((100% - 1160px)/2)) 0 29px;align-self:center;margin-bottom:80px;margin-top:0}
.ab-acc{display:grid;gap:10px;max-width:642px}
.ab-acc h3{margin:0;font-size:var(--t-h3)}
.ab-acc__btn{width:100%;min-height:59px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:var(--white);border:0;border-radius:var(--r-s);padding:12px 22px;cursor:pointer;font:900 var(--t-h3)/1.1 var(--font-head);font-stretch:112%;font-variation-settings:"wdth" 112;text-transform:uppercase;text-align:left}
.ab-acc__btn:hover{background:var(--line-dark)}
.ab-acc__btn:focus-visible{outline-color:var(--ink);outline-offset:3px}
.ab-acc__btn svg{flex:none;width:20px;height:20px;transition:none}
.ab-acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ab-acc__body{background:var(--white);border-radius:var(--r-s);padding:18px 22px;margin-top:-6px}
.ab-acc__body[hidden]{display:none}
.ab-acc__body p{margin:0;font-size:var(--t-lead);line-height:1.5}
.ab-acc__body a{text-decoration:underline;text-underline-offset:3px}

.ab-reviews .sec__head{margin-bottom:36px}
/* ===== /PAGE: about ===== */

/* ===== PAGE: basement-floor-coatings (owned by the basement page builder; do not edit elsewhere) ===== */
/* benefits band: left intro + four equal cards */

/* photo carousel: text left, 757x500 carousel right, round arrows on both edges */

/* coating steps: horizontal scroll-snap cards with a layer diagram */

/* choose a finish: three cards */

/* review */

/* guide prose */
/* ===== /PAGE: basement-floor-coatings ===== */

/* ===== PAGE: concrete-polishing (owned by the concrete-polishing page builder; do not edit elsewhere) ===== */
/* hero: solid panel + photo at the right edge; h1 on this page runs 64px */
/* lead card overlapping the hero by --r-l */
/* key points: thin inline row, rules between */
/* accordion (process + faq): one open at a time, 0.3s height */
.acc{display:grid;gap:10px}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:58px;padding:12px 20px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:900 var(--t-h3)/1.1 var(--font-head);font-stretch:112%;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:-.005em;border-radius:var(--r-s);transition:background-color var(--dur-1) var(--ease-standard);
}
.acc__btn svg{flex:none;width:22px;height:22px;transition:none}
.acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc__panel>div{padding:0 20px}
.acc__panel p{margin:0;padding-bottom:18px;font-size:var(--t-lead);line-height:1.5}
.acc__panel a{font-weight:700;text-underline-offset:4px}
/* process layout */
/* finish options */
/* full-bleed photo carousel */
/* where it fits: scroll row with a peek of the next card */
/* polished or coated */
/* cost */
/* closing quote panel */
/* ===== /PAGE: concrete-polishing ===== */

/* ===== PAGE: commercial-floor-coatings (owned by the commercial page builder; do not edit elsewhere) ===== */

.cfc-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.cfc-quotes .quote p{font-size:var(--t-lead);line-height:1.5}
/* ===== /PAGE: commercial-floor-coatings ===== */

/* ===== PAGE: acrylic-flake-flooring ===== */
/* hero: photo right, solid panel left (shared .hero); extra bottom room for the overlapping intro card */

/* how it is built: stack graphic + accordion */

/* project slider: full-bleed photo, dots over the bottom edge */

/* where installed: scroll row of linked photo cards */

/* choosing a blend */

/* cost and timeline */

/* reviews */
.afl-rev__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}

/* other systems */
/* ===== /PAGE: acrylic-flake-flooring ===== */

/* ===== PAGE: custom-floor-design ===== */
/* ===== /PAGE: custom-floor-design ===== */

/* ===== PAGE: flakes (owned by the flakes page builder; do not edit elsewhere) ===== */
.fl-hero{background:var(--ink);padding:40px 0 60px;text-align:center}
.fl-hero__in{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut);display:flex;flex-direction:column;align-items:center}
.fl-crumb{font:500 var(--t-body)/var(--t-fixed-19-2px) var(--font-body);color:var(--white);margin:0 0 30px}
.fl-crumb a{font-weight:700;text-decoration:underline;text-decoration-thickness:1.76px;text-underline-offset:4px;text-decoration-color:var(--on-dark-soft)}
.fl-crumb a:hover{text-decoration-color:var(--white)}
.fl-grid-band{background:var(--surface);padding:80px 0}
.fl-grid-band .wrap{padding-inline:var(--gut)}
.fl-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 20px}
.fl-pills[hidden],.fl-tile[hidden]{display:none}
.fl-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 16px;border:0;border-radius:var(--r-s);background:var(--white);color:var(--ink);font:800 var(--t-body)/var(--t-fixed-16px) var(--font-body);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.fl-pill span{font-weight:600;letter-spacing:0;opacity:.75}
.fl-pill:hover{background:var(--surface)}
.fl-pill[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.fl-pill[aria-pressed="true"]:hover{background:var(--ink)}
.fl-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0}
.fl-tile{position:relative;aspect-ratio:1/1;border-radius:var(--r-s);display:grid;place-items:center;margin:0;padding:0}
.fl-tile img{width:83%;height:83%;border-radius:var(--pill);object-fit:cover}
.fl-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:max-content;text-align:center;pointer-events:none;background:var(--ink);color:var(--white);padding:4px 10px 5px;border-radius:var(--r-s);max-width:94%;white-space:normal;
}
.fl-name{font:900 var(--t-lead)/1.1 var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:uppercase;font-weight:900;text-shadow:1px 1px 2px var(--ink),0 0 6px var(--ink-alpha-55);
}
.fl-code{font:700 var(--t-eyebrow)/1.3 var(--font-body);letter-spacing:.06em;font-weight:700;text-shadow:1px 1px 2px var(--ink),0 0 6px var(--ink-alpha-55);
}
.has-reveal .fl-tile.rv,.has-reveal .fl-tile.rv.is-in{transform:none;}
.fl-guide__in{max-width:960px;margin-inline:auto}
.fl-guide h2{font-size:var(--t-h2);letter-spacing:-.01em;text-transform:none;margin-bottom:.6em}
.fl-guide .lead{max-width:44em}
.fl-guide__cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;margin-top:32px}
.fl-guide h3{font-size:var(--t-h3);text-transform:none;margin:0 0 .6em}
.fl-guide .list li{margin-bottom:.5em}
.fl-guide__note{margin:1.2em 0 0}
.fl-links{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin:40px 0 0;padding:0}
/* ===== /PAGE: flakes ===== */

/* ===== PAGE: privacy-policy (owned by the privacy-policy page builder; do not edit elsewhere) ===== */
.pp-title{height:200px;display:flex;align-items:center;justify-content:center;padding:0 40px;text-align:center}
.pp-body{background:var(--white);padding-block:80px}
.pp-col{font-size:var(--t-lead);font-weight:500;color:var(--ink);line-height:26px;
}
.pp-col p{margin:0 0 20px}
.pp-col a{color:var(--burnt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pp-col a:hover{color:var(--ink)}
body main .pp-col a.prose-link{padding-block:11px}
.pp-col a.email{text-decoration:none;font-weight:400}
.pp-col strong{font-weight:700}
.pp-sec{border-top:1px solid var(--line);margin-top:45px;padding-top:40px;
}
.pp-sec h2{margin:0 0 20px;font-size:var(--t-h2);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.pp-list{list-style:none;margin:0 0 20px}
.pp-list li{position:relative;padding-left:35px;margin:0 0 10px;
}
.pp-list li:last-child{margin-bottom:0;
}
.pp-list li::before{content:"";position:absolute;left:10px;width:15px;height:15px;box-sizing:border-box;border:3px solid var(--burnt);border-radius:var(--pill);background:var(--ink);top:7px;
}
.pp-cta{background:var(--white);padding-block:60px;
}
.pp-cta__box{background:var(--ink);border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);padding:20px 40px 24px;
}
.pp-cta__h{font-size:var(--t-lead);line-height:27px;font-weight:600;color:var(--white);margin:0 0 14px;
}
/* ===== /PAGE: privacy-policy ===== */

/* ===== PAGE: garage-floor-coatings (owned by the garage page builder; do not edit elsewhere) ===== */
/* hero: quote card on the photo side */

/* resistances: intro + four cards */

/* photo carousel: text left, 757x500 carousel right */

/* systems: two cards with a layer stack, then the five steps */

/* choose a finish */

/* photo band with scrim and white card */

/* reviews */

/* service area band */

/* pricing panel */

/* faq links row */
/* ===== /PAGE: garage-floor-coatings ===== */

/* ===== PAGE: home (owned by the home page builder; do not edit elsewhere) ===== */
.h-proc-cta{margin-top:44px}
/* services: compact rows on phones */
/* why coat: 440 text + 660 carousel */
.h-why{display:grid;grid-template-columns:minmax(0,440px) minmax(0,660px);justify-content:space-between;gap:60px;align-items:center}
/* pro versus kits: three square photos, label below */
/* before / after: two sliders 3:2 */
.h-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:start}
/* reviews: card with arrows left, photo right */
.h-rev{display:grid;grid-template-columns:minmax(0,495px) minmax(0,616px);justify-content:space-between;gap:48px;align-items:start}
.h-rev__stage{display:grid}
.h-rev__q{grid-area:1/1;margin:0;visibility:hidden;opacity:0;}
.h-rev__q.is-on{visibility:visible;opacity:1}
.h-rev__q p{font-size:var(--t-h3);line-height:1.4;font-weight:500;margin:0 0 18px}
.h-rev__q footer{font-size:var(--t-lead);line-height:1.3}
.h-rev__q footer strong{display:block;font-weight:800}
.h-rev__q footer span{color:var(--ink-soft);font-size:var(--t-body)}
.h-rev__cta{margin-top:28px}
/* crew: full-bleed photo band with a white card at the right */
.h-crew{position:relative;min-height:600px;display:flex;align-items:center;background:var(--ink);overflow:hidden}
.h-crew>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.h-crew .wrap{position:relative;display:flex;justify-content:flex-end;padding-block:60px}
.h-crew__card{width:min(500px,100%);background:var(--white);color:var(--ink);border-radius:var(--r-s);padding:40px;font-size:var(--t-lead);line-height:1.5}
.h-crew__card h2{margin-bottom:.5em}
.h-crew__card p{margin:0 0 14px}
/* service area: copy left, shared map right; map first on phones */
.h-area{display:grid;grid-template-columns:minmax(0,495px) minmax(0,1fr);gap:60px;align-items:center}
.h-area__map{display:flex;justify-content:center;order:2;min-width:0}
.maine-map{display:block;width:100%;height:360px;overflow:visible;color:var(--ink);font-family:var(--font-body)}
.maine-map__outline{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.on-dark .maine-map{color:var(--white)}
.on-dark .maine-map__outline{fill:var(--paper-alpha-6);stroke:var(--paper-alpha-35)}
.maine-map__mark circle{fill:var(--orange);transform-box:fill-box;transform-origin:center;transition:none}
.maine-map__mark text{fill:currentColor;font-size:var(--t-eyebrow);font-weight:600}
.maine-map__hq circle{stroke:var(--white);stroke-width:2;vector-effect:non-scaling-stroke}
.maine-map__hq text{font-weight:800}

.areas-hero{align-items:center}
.areas-hero__map{grid-column:2;grid-row:1;min-width:0;padding-inline:24px}
.areas-hero__map .maine-map{height:420px}
.areas-hero .hero__panel{grid-column:1;grid-row:1}
.h-regions{margin:18px 0 26px}
/* flake tiles are links */
.swatches a{display:block;color:inherit;text-decoration:none}
.swatches a:hover strong{text-decoration:underline;text-underline-offset:4px}
/* ===== /PAGE: home ===== */

/* ===== PAGE: services (owned by the services page builder; do not edit elsewhere) ===== */
/* hero: shared .hero panel + photo, with a quote card over the photo at the right edge */
.sv-hero{min-height:540px;
}
.sv-quote{position:absolute;z-index:3;top:50%;transform:translateY(-50%);right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));width:420px;background:var(--white);color:var(--ink);border-radius:var(--r-s);overflow:hidden}
.sv-quote h2{margin:0;padding:14px 28px;background:var(--ink);color:var(--white);font-size:var(--t-h2);letter-spacing:.04em}
.sv-quote__body{padding:24px 28px 26px;display:grid;gap:14px}
.sv-quote__body p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--ink-soft)}
.sv-quote__alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;font-size:var(--t-body)}
.sv-quote__alt .email{font-size:var(--t-caption);color:var(--ink)}

/* trust band: heading left, four plain cards right */
.sv-trust__in{display:grid;grid-template-columns:minmax(0,341px) minmax(0,1fr);gap:40px 48px;align-items:start}
.sv-trust h2{color:var(--white)}
.sv-trust__cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sv-trust__cards li{background:var(--ink);border-radius:var(--r-s);padding:24px 20px 26px}
.sv-trust__cards h3{font-size:var(--t-h3);line-height:1.2;margin:0 0 10px;color:var(--white)}
.sv-trust__cards p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--on-dark-soft)}

/* services grid: nine cards, three across */
.sv-links{margin-top:40px}

/* cost and timing: two plain tables */
.sv-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px 56px;align-items:start}
.sv-cost h3{margin-bottom:14px}
.sv-table{width:100%;border-collapse:collapse;font-size:var(--t-lead);line-height:1.4;margin-bottom:14px}
.sv-table thead th{text-align:left;font:700 var(--t-caption)/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.sv-table td{text-align:left;vertical-align:top;padding:14px 14px 14px 0;border-bottom:1px solid var(--line);font-weight:500;
}
.sv-table tbody th{text-align:left;vertical-align:top;padding:14px 14px 14px 0;border-bottom:1px solid var(--line);font-weight:800;width:44%;
}
.sv-cost__cta{margin-top:40px;justify-content:center}
/* ===== /PAGE: services ===== */
/* ===== PAGE: small-business-connection ===== */
.sbc-title{height:200px;display:flex;align-items:center;justify-content:center;padding:0 40px;text-align:center}
.sbc-body{background:var(--white);padding-block:80px}
.sbc-col{font-size:var(--t-lead);line-height:26px;font-weight:500;color:var(--ink)}
.sbc-col p{margin:0 0 20px}
.sbc-list{list-style:none;margin:0;padding:0}
.sbc-list li{position:relative;margin:0 0 12px;padding-left:35px}
.sbc-list li:last-child{margin-bottom:0}
.sbc-list li::before{content:"";position:absolute;left:10px;top:5px;width:15px;height:15px;box-sizing:border-box;border:3px solid var(--burnt);border-radius:var(--pill);background:var(--ink)}
.sbc-list a{color:var(--burnt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sbc-list a:hover{color:var(--ink)}
.sbc-list a:focus-visible{outline:2px solid var(--burnt);outline-offset:2px}
.sbc-cta{background:var(--white);padding-block:60px;
}
.sbc-cta__box{background:var(--ink);border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);padding:40px}
.sbc-cta__h{margin:0 0 18px;font-size:var(--t-lead);line-height:27px;font-weight:600;color:var(--white)}
/* ===== /PAGE: small-business-connection ===== */

/* ===== PAGE: gallery (owned by the gallery page builder; do not edit elsewhere) ===== */
.gal-hero.gal-hero{display:block;height:500px;min-height:500px;background:var(--ink);
}
.gal-hero .hero__media img{object-position:50% 55%;
}
.gal-hero .hero__panel{padding-block:48px 176px;position:relative;z-index:2;display:block;background:transparent;border-radius:var(--r-s);margin:0;padding:112px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 0;
}
.gal-hero h1{max-width:none;margin:0;font-size:var(--t-h1);letter-spacing:-.025em;font-weight:900;
}
.gal-hero .hero__sub{font-size:var(--t-lead);line-height:1.3;color:var(--white);margin-bottom:26px;max-width:28em}
.gal-hero .hero__sub::after{content:"";display:block;width:120px;height:4px;margin-top:22px;border-radius:var(--r-s);background:var(--orange);
}
.gal-introwrap{padding-bottom:0;
}
.gal-intro{position:relative;z-index:3;margin-top:-140px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px;background:var(--white);color:var(--ink);border:0;border-radius:var(--r-s);box-shadow:0 10px 32px var(--ink-alpha-14);
}
.gal-intro h2{margin-bottom:.55em;font-size:var(--t-h2);letter-spacing:-.015em;color:var(--burnt);margin:0 0 12px;
}
.gal-intro p{margin:0;font-size:var(--t-lead);line-height:1.3;font-weight:500;
}
.gal-intro__video{aspect-ratio:16/9}
.gal-intro__video img{object-position:50% 50%}
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:185px;grid-auto-flow:dense;gap:32px 20px}
.gal-tile{position:relative;margin:0;transition-delay:calc(var(--i,0)*var(--dur-1));min-width:0;display:block;height:auto;border-radius:var(--r-s);background:var(--ink)}
.gal-tile[hidden]{display:none}
.gal-tile--p{grid-row:span 2}
.gal-tile img{transition:none;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:var(--r-s)}
.gal-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:scale(1.03)}
.gal-pager{align-items:center;display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;margin-top:40px;
}
.gal-pager__btn{width:48px;height:48px;border-radius:var(--pill);display:grid;place-items:center;cursor:pointer;padding:0;border:0;background:var(--white);color:var(--ink);box-shadow:0 2px 10px var(--ink-alpha-20);
}
.gal-pager__btn svg{width:22px;height:22px}
.gal-pager__btn:hover:not(:disabled){background:var(--ink);color:var(--white);
}
.gal-pager__btn:disabled{opacity:.4;cursor:default}
.gal-viz__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px 48px}
.gal-viz__in>div{flex:1 1 440px;max-width:760px}
.gal-viz h2{margin-bottom:.4em}
.gal-viz p{margin:0;font-size:var(--t-lead);line-height:1.4}
.gal-vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.gal-vgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.gal-vgrid--4 .gal-vtab{font-size:var(--t-body);padding:10px 14px}@media (max-width:1099.98px){.gal-vgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gal-vtab{position:absolute;left:0;bottom:0;border-top-right-radius:var(--r-s);text-transform:uppercase;background:var(--orange);color:var(--on-orange);font:700 var(--t-h3)/1.2 var(--font-head);font-stretch:100%;letter-spacing:.01em;white-space:nowrap;max-width:100%;padding:12px 18px;
}
.gal-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.gal-pair{margin:0}
.gal-casegrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.gal-case h3{margin:26px 0 12px}
.gal-case .list{margin-bottom:16px}
.gal-rq{margin:0}
.gal-rq[hidden]{display:none}
.gal-rq p{margin:0 0 20px;font-size:var(--t-card-title);line-height:1.4;text-align:center;
}
.gal-rq footer{display:flex;flex-direction:column;gap:2px;align-items:center;font-size:var(--t-lead);
}
.gal-rq footer span{color:var(--ink-soft)}
/* ===== /PAGE: gallery ===== */

/* ===== PAGE: metallic-epoxy (owned by the metallic-epoxy builder; all selectors prefixed .mx-) ===== */
.mx-acc{display:grid;gap:10px;align-content:start}
.mx-acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px 20px;border:0;border-radius:var(--r-s);background:var(--ink);color:var(--white);font-family:var(--font-head);font-stretch:112%;font-variation-settings:"wdth" 112;font-weight:900;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.005em;text-transform:uppercase;text-align:left;cursor:pointer;transition:background-color var(--dur-1) var(--ease-standard)}
.mx-acc__btn:hover{background:var(--ink)}
.mx-acc__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mx-acc__chev{flex:none;transition:none}
.mx-acc__btn[aria-expanded="true"] .mx-acc__chev{transform:rotate(180deg)}
.mx-gal{background:var(--ink)}
.mx-gal__dots{display:flex;gap:10px}
.mx-gal__dots button{position:relative;width:20px;height:20px;padding:0;border:0;border-radius:var(--pill);background:var(--white);cursor:pointer}
.mx-gal__dots button::after{content:"";position:absolute;inset:-6px -3px}
.mx-gal__dots button[aria-current="true"]{background:var(--white)}
/* ===== /PAGE: metallic-epoxy ===== */

/* ===== PAGE: shop-floor-coatings (owned by the shop-floor-coatings page builder; do not edit elsewhere) ===== */
.sfc-hero.sfc-hero{--sfc-pad:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:48px;align-items:start;min-height:500px;padding:64px var(--sfc-pad);background:var(--ink);
}
.sfc-hero h1{font-size:var(--t-h1);letter-spacing:-.0225em;word-spacing:.1em;font-variation-settings:"wdth" 86;margin:0;max-width:none;text-wrap:balance;
}
.sfc-hero .hero__sub{font-size:var(--t-card-title);line-height:31px;font-weight:500;color:var(--white);max-width:590px;margin:0;
}
.sfc-form{grid-column:2;grid-row:1;position:relative;z-index:2;align-self:center;justify-self:end;width:100%;max-width:420px;padding:0;border-radius:var(--r-s);overflow:hidden;margin:48px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 48px 0}
.sfc-form__head{margin:0;display:flex;align-items:center;text-transform:uppercase;justify-content:center;text-align:center;min-height:50px;padding:12px 20px;background:var(--orange);color:var(--on-orange);font:900 var(--t-body)/1.2 var(--font-body);letter-spacing:.08em;
}
.sfc-form .field{margin-bottom:12px;
}
.sfc-form .field>span{font-size:var(--t-body);margin-bottom:5px}
.sfc-form textarea{min-height:76px;
}

/* shared slider arrows: 48px white discs inset from the edge */

/* busy shops: text left, photo slider right with the next slide peeking */
.sfc-busy{overflow:hidden;--ext:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.sfc-busy__grid{display:grid;grid-template-columns:377px minmax(0,1fr);gap:26px;align-items:center}
.sfc-busy__rule{display:block;width:120px;height:3px;border-radius:var(--r-s);margin:0 0 18px;background:var(--orange);
}
.sfc-busy h2{font-size:var(--t-h2);letter-spacing:-.015em;max-width:none;text-wrap:balance;
}
.sfc-busy__copy p{font-size:var(--t-lead);line-height:1.35}
.sfc-busy__copy .list{margin:0 0 1em;font-size:var(--t-lead)}
.sfc-busy__more:not(#_){font-size:var(--t-lead)}
.sfc-busy__copy a{font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* installation steps: two-up cards, scroll-snap */

/* cost and timeline: two plain lists with rules between rows */

/* related projects: photo cards, scroll row with a peek of the next card */
/* ===== /PAGE: shop-floor-coatings ===== */

/* ===== PAGE: visualizer ===== */
.viz-stage{display:grid;grid-template-columns:minmax(0,880fr) minmax(0,400px);width:100%;max-width:1280px;margin-inline:auto;height:800px;background:var(--white);position:relative;
}
.viz-canvas{background:var(--ink);color:var(--white);display:flex;flex-direction:column;min-width:0;position:relative;padding:0 40px;justify-content:flex-start;gap:0;
}
.viz-cols[hidden],.viz-grid li[hidden]{display:none}
.viz-prev{margin:0}
.viz-prev img{width:100%;height:150px;object-fit:cover;transform:scale(1.3)}
.viz-prev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px;font-size:var(--t-caption);line-height:1.3}
.viz-prev figcaption strong{font-weight:800;font-size:var(--t-caption)}
.viz-prev figcaption span{color:var(--ink-soft)}
.viz-prev figcaption span:last-child{flex-basis:100%;font-size:var(--t-caption)}
.viz-search{display:flex;gap:8px;margin:0}
.viz-search input{flex:1 1 auto;min-width:0;padding:0 14px;border:1px solid var(--ink);font:500 var(--t-body)/1 var(--font-body);color:var(--ink);background:var(--white);height:48px;border-radius:var(--r-s);
}
.viz-cols{display:flex;flex-wrap:wrap;gap:6px}
.viz-count{color:var(--ink-soft);font-size:var(--t-caption);line-height:1.2}
.viz-grid{list-style:none;display:grid;justify-content:space-between;overflow-y:auto;flex:1 1 auto;grid-template-columns:repeat(3,100px);gap:12px 0;min-height:130px;padding:3px 3px 6px;align-content:start;
}
/* ===== /PAGE: visualizer ===== */

/* ===== HERO+MENU: home hero (full-bleed video, scrim, centred stack, step-by-step quote card) ===== */
.hh{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--white);text-align:center;padding-block:64px 44px}
.hh__media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hh__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:saturate(1.12);transform:scale(1.05)}
.hh__media video{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:none;transform:scale(1.05)}
.hh::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink-alpha-64) 0,var(--ink-alpha-62) 100%)} /* scrim: white over a pure-white pixel = #606060 = 6.4:1, above 4.5:1 */
.hh__in{display:flex;flex-direction:column;align-items:center}
.hh__eyebrow{margin:0 0 18px;font:700 var(--t-eyebrow)/1.3 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.hh h1{margin:0 0 18px;font-size:var(--t-h1);line-height:.98;letter-spacing:-.025em;color:var(--white);max-width:none}
.hh h1 span{display:block}
.hh__note{margin:14px 0 0;font-size:var(--t-body);line-height:1.4;color:var(--white)}

.hq{width:100%;max-width:1150px;background:var(--white);color:var(--ink);border-radius:var(--r-s);padding:24px 32px 28px;text-align:left;box-shadow:0 22px 50px var(--ink-alpha-35)}
.hq :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hq__bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px}
.hq__bar i{height:6px;border-radius:var(--r-s);background:var(--line)}
.hq__bar i.is-on{background:var(--orange)}
.hq__pane{display:none;border:0;margin:0;padding:0;min-width:0;transition:none;
}
.hq__pane.is-on{display:block}
.hq__pane>legend{padding:0;float:left;width:100%}
.hq h2{margin:0 0 6px;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.hq__err{margin:10px 0 0;min-height:0;font-size:var(--t-body);font-weight:700;color:var(--error)}
.hq__err:empty{display:none}
.hq__done{display:none;clear:both}
.hq__done.is-on{display:block}
.hq__done h2{margin-bottom:8px}
.hq__done p{margin:0 0 16px;font-size:var(--t-lead);line-height:1.45}
.hq__done .btn-row{margin-bottom:6px}

/* five orange stars before the Google line */
.stars{display:inline-flex;gap:3px;vertical-align:-3px;margin-right:10px;color:var(--orange);
}
.stars svg{width:20px;height:20px;fill:var(--orange);
}

/* ===== 404 page (page-owned block) ===== */

/* ===== PAGE: about / scavenger fixes r1 (owned by the about page builder; do not edit elsewhere) ===== */
p.ab-h3{font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:var(--t-h3);line-height:24px;margin:0 0 18px;color:var(--ink)}
/* ===== /PAGE: about fixes ===== */

/* ===== contact page overrides (page builder: contact-f) ===== */
.ct-line a,.ct-more a,.ct-card__link a{display:inline-flex;align-items:center;min-height:44px}
.ct-lede a{display:inline-block;padding-block:13px;margin-block:-13px;font-weight:700}
.cform input[type=file]::file-selector-button{box-sizing:border-box;height:48px;margin:0 14px 0 0;padding:0 20px;border:2px solid var(--ink);border-radius:var(--r-s);background:transparent;color:var(--ink);font:700 var(--t-button)/1 var(--font-body);letter-spacing:.02em;cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.cform input[type=file]::file-selector-button:hover{background:var(--ink);color:var(--white)}

/* areas page: six region cards */
.ar-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:32px 0 40px;padding:0}
.ar-grid li{background:var(--white);border:1px solid var(--surface);border-radius:var(--r-s);padding:28px 24px 30px}
.ar-grid h3{font-size:var(--t-h3);line-height:1.15;margin:0 0 8px;color:var(--ink)}
.ar-grid p{margin:0 0 10px;font-size:var(--t-body);line-height:1.5}
.ar-links h3{font-size:var(--t-h3);margin:0 0 10px}

/* ===== commercial-floor-coatings round 2 (page block) ===== */
/* ===== /commercial-floor-coatings round 2 ===== */

/* ===== PAGE: concrete-polishing, round 2 (owned by the concrete-polishing page builder) ===== */
/* hero on phones: short photo, tight panel, estimate button clear of the sticky bar */
/* carousel dots: 24px hit area, 14px visible dot; pause button */
/* accordion rows: visible hover change */
.acc__btn:hover{background:var(--surface)}
/* where-it-fits arrows stay on at phone width: 38px round buttons */
/* ===== /PAGE: concrete-polishing, round 2 ===== */

/* ===== PAGE: basement-floor-coatings / scavenger fixes r1 (owned by the basement page builder; do not edit elsewhere) ===== */
/* hero: shorter band so the benefits band starts in the first viewport */
/* carousel controls: 24px+ dots and a pause button */
/* systems arrows: in the side gutter at 1100+, below the cards under that */
/* review band: text only on the right */
/* guide: text plus a sticky photo column */
/* FAQ: heading plus related links on the left, accordion on the right */
/* ===== /PAGE: basement-floor-coatings / scavenger fixes r1 ===== */

/* ===== PAGE: acrylic-flake-flooring / queue round 1 ===== */
/* ===== /PAGE: acrylic-flake-flooring ===== */
/* ===== PAGE: flakes / builder round 2 (type + colour fixes) ===== */
.fl-long .fl-name{font-size:var(--t-button)}
/* ===== /PAGE: flakes / builder round 2 ===== */

/* ===== PAGE: faq, round 2 (hero rhythm, tracking, hover scope, arrow icon) ===== */
.qa[open] summary:hover{background:var(--burnt);color:var(--white)}
/* ===== /PAGE: faq, round 2 ===== */

/* ===== PAGE: custom-floor-design / scavenger fixes r1 (owned by the custom-floor-design page builder; do not edit elsewhere) ===== */
/* hero: full-bleed photo behind the text, dark left-to-right gradient, pill buttons */
/* intro card */
/* type scale: H2 46/41.4 caps centred, 20/26 sub */
/* accordion rows: brand orange, dark label, radius 14, height animates */
/* radius system: cards 16, rows 14, panel 24, pills 100 */
/* tile carousel: viewport is the 1160 column, tiles clip at its edges, arrows sit outside */
/* related cards */
/* quote band */
/* ===== /PAGE: custom-floor-design / scavenger fixes r1 ===== */

/* ===== PAGE: privacy-policy / scavenger fixes r1 (owned by the privacy-policy page builder) ===== */
.pp-col li{line-height:28px}
.pp-cta__box .btn-row{align-items:stretch}
/* ===== /PAGE: privacy-policy / scavenger fixes r1 ===== */

/* ===== PAGE: services / scavenger fixes r1 ===== */
.sv-ext-note{margin:32px auto 0;max-width:760px;text-align:center;font-size:var(--t-lead);line-height:1.5}
/* ===== /PAGE: services / scavenger fixes r1 ===== */

/* ===== PAGE: small-business-connection / scavenger fixes r1 ===== */
/* ===== /PAGE: small-business-connection / scavenger fixes r1 ===== */

/* ===== PAGE: metallic-epoxy / round 2 (owned by the metallic-epoxy builder; selectors prefixed .mx-) ===== */
.mx-gal__dots button:focus-visible{outline:3px solid var(--white);outline-offset:3px}
/* ===== /PAGE: metallic-epoxy / round 2 ===== */

/* ===== PAGE: garage-floor-coatings / round 2 (hero rebuild, systems carousel, steps band, beyond band) ===== */
/* hero: full-bleed muted video over the garage still, left-to-right black gradient, quote card on the right */

/* systems band: heading, one line, the two cards only; swipe row with arrows on mobile */

/* steps: own light band after the systems cards */

/* pricing panel: no nested quote card */

/* beyond: black band, carousel of related-floor photo tiles */
/* ===== /PAGE: garage-floor-coatings / round 2 ===== */

/* ===== PAGE: home / scavenger fixes r1 (owned by the home page builder; do not edit elsewhere) ===== */
/* services: plain two-column text list */
/* card and step type: 24px/900 desktop, 18px mobile; body 20px desktop, 18px mobile */
main .step h3{font-size:var(--t-h3)}
main .step p{font-size:var(--t-lead);line-height:1.3}
/* process: 2x2 on phones, 160px images, 56px numerals */
/* pause control for moving media (WCAG 2.2.2) */
/* ===== /PAGE: home / scavenger fixes r1 ===== */

/* ===== PAGE: gallery, builder round 2 (hero, intro, filters, grid, pager, tabs, reviews) ===== */
.gal-hero .hero__media{position:absolute;inset:0;left:0;height:auto;order:0}
.gal-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--ink-alpha-92) 0%,var(--ink-alpha-74) 45%,var(--ink-alpha-14) 100%)}
.gal-rule{display:block;width:120px;height:3px;margin:24px 0 30px;background:var(--white);border-radius:var(--r-s)}
.gal-gridsec{padding-top:56px}
.gal-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 44px}
.gal-pill{min-height:48px;padding:10px 16px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);font:700 var(--t-body)/1.2 var(--font-body);white-space:nowrap;cursor:pointer}
.gal-pill:hover,.gal-pill[aria-pressed=true]{background:var(--ink);color:var(--white)}
.gal-tile--cap img{max-height:none}
.gal-tile .gal-cap{position:static;width:auto;height:auto;max-width:100%;margin:6px 0 0;clip:auto;overflow:visible;white-space:normal;text-align:center;font:700 var(--t-caption)/1.25 var(--font-body);color:var(--ink)}
.gal-empty{margin:0 0 24px;text-align:center;font-size:var(--t-lead);font-weight:600}
.gal-empty[hidden],.gal-pager[hidden]{display:none}
.gal-band{height:10px;background:var(--orange)}
.gal-rq cite{font-style:normal;font-weight:500;color:var(--ink-soft)}
/* ===== /PAGE: gallery, builder round 2 ===== */

/* ===== PAGE: shop-floor-coatings / fixes r1 (owned by the shop-floor-coatings page builder; later rules override the page block above) ===== */
/* hero: one full-bleed photo with a dark overlay, text left, 420px two-step form right */
.sfc-hero .hero__media{position:absolute;inset:0;left:0;height:auto;order:0;background:var(--ink)}
.sfc-hero .hero__media::after{content:"";position:absolute;inset:0;background:var(--ink-alpha-60)}
.sfc-hero .hero__panel{grid-column:1;grid-row:1;display:block;background:none;border-radius:var(--r-s);margin:0;padding:0;max-width:700px}

.sfc-hero .sfc-form{grid-column:2;grid-row:1;align-self:start;justify-self:end;width:420px;max-width:100%;margin:0;padding:0;border-radius:var(--r-s);overflow:hidden;box-shadow:0 14px 44px var(--ink-alpha-40)}
.sfc-form .est__top{margin-bottom:10px}
.sfc-form .est__bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:18px}
.sfc-form .est__bar i{background:var(--line);border-radius:var(--r-s)}
.sfc-form .est__bar i:first-child,.sfc-form .est__bar i:last-child{border-radius:var(--r-s) var(--r-s) var(--r-s) var(--r-s)}
.sfc-form .est__bar i.is-on{background:var(--orange)}
.sfc-form .field small{font-size:var(--t-caption);line-height:21px}
.sfc-form .est__row{margin-top:4px;flex-wrap:nowrap}
.sfc-form .est__msg a[href^="tel"]{font-weight:800}

/* section headings share one scale: 46/0.9 desktop, 32/0.9 mobile */

/* pillars: orange H2, left copy 341px, four dark bordered cards */

/* busy-shops slider is clipped at the container edge; orange rule */

/* install steps size to their copy, orange titles with a short rule */

/* related-work cards */

/* mobile rhythm: 30 to 32px bands */
/* ===== /PAGE: shop-floor-coatings / fixes r1 ===== */

/* ===== PAGE: visualizer / scavenger fixes r1 (owned by the visualizer builder; selectors prefixed .viz-) ===== */
.viz-scene{position:absolute;top:0;left:50%;height:100%;aspect-ratio:4/3;transform:translateX(-50%);transform-origin:50% 85%;transition:none}
.viz-scene.is-zoom{transform:translateX(-50%) scale(1.5)}
.viz-room{display:block;width:100%;height:100%;object-fit:cover}
.viz-floor{position:absolute;inset:0;clip-path:polygon(0 47%,37% 42%,58% 41.5%,77% 41.5%,100% 62%,100% 100%,0 100%);opacity:.92}
.viz-floor canvas{display:block;width:100%;height:100%}
.viz-floor[hidden]{display:none}
.viz-canvas:fullscreen{padding:0;background:var(--ink)}
/* intro dialog over the stage */
/* panel */
.viz-metals{padding:0;margin:0}
.viz-metals li{padding:0}
.viz-metal{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 4px;border:0;background:none;font:600 var(--t-body)/1.2 var(--font-body);color:var(--ink);text-align:left;cursor:pointer;border-radius:var(--r-s)}
.viz-metal:hover{background:var(--surface)}
.viz-metal[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
/* CTA */
/* tablet */
/* ===== /PAGE: visualizer / scavenger fixes r1 ===== */

/* ===== PAGE: shop-floor-coatings / fixes r1b (mobile length) ===== */
/* ===== /PAGE: shop-floor-coatings / fixes r1b ===== */

/* ===== PAGE: shop-floor-coatings / fixes r1c ===== */
/* ===== /PAGE: shop-floor-coatings / fixes r1c ===== */
/* the home page's #proc-h rules leak onto this page: restore the sub line on phones */

/* ===== SHELL + HOME: Nov 3 2026 owner review fixes ===== */
/* quote-card buttons on white: dark outline, even padding, 48px+ */
/* testimonial header: stars + Google mark */
/* kit comparison teaser */
/* back-to-top is not part of the shell */
/* home teasers: kit comparison and flake colors each have their own page, so home keeps a short band */
.h-tease{padding-block:56px}
.h-tease .sec__head{margin-bottom:24px}

/* ===== accents and actions (kept from the palette pass) ===== */
:is(.btn--estimate,.viz-save){background-color:var(--orange);border-color:var(--orange);color:var(--ink)}
.check{color:var(--orange)}
:is(.ct-rule,.ab-rule,.ab-intro__rule,.mx-rule,.gal-rule,.cfc-hero__rule,.gfc-hero__rule,.sfc-hero__rule,.sfc-busy__rule,.est__bar i.is-on,.hq__bar i.is-on){background:var(--orange)}
:is(.step__num,.bfc-card__n,.sfc-step__n,.afl-acc__n,.cfc-steps__n,.gfc-rc__n){background:var(--orange);color:var(--ink);text-shadow:none}
/* ===== /accents ===== */

/* Legacy inline illustration colours use shared neutral tokens. */
svg [fill="#34A853"],svg [fill="#363636"],svg [fill="#4285F4"],svg [fill="#4a4a4a"],svg [fill="#6a655d"],svg [fill="#7d776e"],svg [fill="#7d776f"],svg [fill="#8d8780"],svg [fill="#8f826e"],svg [fill="#9d9790"]{fill:var(--ink-soft)}

/* Legacy inline illustration colours use shared neutral tokens. */

/* Legacy inline illustration colours use shared neutral tokens. */
svg [stop-color="#3d3d3d"],svg [stop-color="#7a5a3c"]{stop-color:var(--ink-soft)}
:where(svg:not([fill])){fill:var(--ink)}
main :is(.sv-quote h2,.cfc-form__head,.pc-tag){color:var(--ink);background:var(--orange)}

input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:1}
::selection{background:var(--orange);color:var(--ink)}
/* Palette stays consistent before and after reveal/accordion animations. */
.est__bar i::before,.hq__bar i::before{background:var(--orange)}

main :is(.afl-acc__n,.step__num,.bfc-card__n,.sfc-step__n,.cfc-steps__n,.gfc-rc__n){color:var(--ink);background-color:var(--orange)}
/* Surfaces and their text stay paired by component, including open states.
   Dark cards/accordions retain their original ink backgrounds and light text. */
main :is(.gfc-qc,.cfc-steps li,.mx-acc__panel,.mx-cost dl,
  .ab-acc__body,.qa__a){background-color:var(--white);color:var(--ink)}
/* Solid caption plates remain readable over every project photo or swatch. */

/* dark text on orange fills (house rule) */
:is(.gal-pill,.mx-acc__btn,.mx-gal__pp,.viz-type,.cfd-tag,.cfc-form__head,.sv-quote h2){color:var(--ink)}

/* ---- home: floor systems, exploded layer diagrams ---- */
.h-sys__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.h-sys__card{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--ink);border-radius:var(--r-s);overflow:hidden}
.h-sys__fig{background:var(--white);padding:18px 10px 6px;display:block}
.h-sys__fig svg{display:block;width:100%;height:auto}
.h-sys__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.h-sys__name{color:var(--orange);margin:0;text-transform:uppercase;letter-spacing:.01em}
.h-sys__rule{width:52px;height:3px;background:var(--orange);border:0;margin:14px auto 16px}
.h-sys__card p{color:var(--on-dark-soft);margin:0 0 20px;font-size:var(--t-button);line-height:1.55}
.h-sys__spec{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.h-sys__spec li{font-size:var(--t-eyebrow);letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);border:1px solid var(--line-dark);border-radius:var(--pill);padding:5px 11px}
/* the exploded stack reads as depth, so motion-safe users get a short settle */

/* Shared project photos. All photo sliders use this structure, independent of page styles. */
.photo-slider{position:relative;isolation:isolate;width:100%;min-width:0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-s);background:var(--ink);touch-action:pan-y}
.photo-slider__track{position:absolute;inset:0;margin:0}
.photo-slider__slide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
}
.photo-slider__slide.is-on{opacity:1;pointer-events:auto}
.photo-slider__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.photo-slider__arrow--prev{left:16px}.photo-slider__arrow--next{right:16px}
.photo-slider__dots{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:0;margin:0;padding:0;background:none}
.photo-slider__dots button{position:relative;display:block;flex:0 0 40px;width:40px;height:40px;min-height:40px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--r-s);
}
.photo-slider__dots button::before{content:"";position:absolute;top:16px;left:16px;width:8px;height:8px;border-radius:var(--pill);background:var(--white);opacity:.45;transition:opacity var(--dur-2) var(--ease-standard)}
.photo-slider__dots button[aria-current="true"]::before{width:24px;left:8px;opacity:1}
.photo-slider:focus-visible,.photo-slider button:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.gal-grid+.photo-slider,.gal-filters+.photo-slider{margin-bottom:24px}
.gal-gridsec .photo-slider{margin-bottom:24px}

/* Shared drag carousel: transform owns position; the viewport alone clips. */
.carousel-viewport{margin:var(--viewport-margin,0);min-width:0;max-width:100%;touch-action:pan-y;cursor:grab;width:100%;box-sizing:border-box;overflow:hidden;
}
.carousel-viewport.is-dragging{cursor:grabbing;user-select:none}
.carousel-engine{touch-action:pan-y;transition:none;position:relative;transform:translate3d(0,0,0);overflow:visible;scroll-snap-type:none;scroll-behavior:auto}
.carousel-engine img{-webkit-user-drag:none}
.carousel-engine--grid{align-items:stretch;display:flex}
.carousel-engine--grid>*{flex:0 0 calc((100% - (var(--carousel-columns) - 1)*var(--carousel-gap,24px))/var(--carousel-columns));min-width:0}
.carousel-engine--single{display:flex;gap:0}
.carousel-engine--single>*{flex:0 0 100%;min-width:0;margin-inline:0;pointer-events:auto;transition:none;display:block;position:relative;inset:auto;visibility:visible;opacity:1;transform:none}
.photo-slider__track.carousel-engine{position:absolute;inset:0;display:flex}
.photo-slider__track.carousel-engine .photo-slider__slide{height:100%}
/* Beat the shell's broad orange-button rule for carousel controls. */
.service-photos__carousel>button.carousel-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);margin:0}
.service-photos__carousel>.service-photos__prev{left:8px}
.service-photos__carousel>.service-photos__next{right:8px}
/* A clipped track must not contribute its offscreen cards to a flex/grid parent's minimum width. */

/* Shared service reference components. Opt-in keeps other service pages intact. */


.service-reference .sfc-hero.sfc-hero{min-height:610px;align-items:center;padding-top:80px;padding-bottom:80px}
.service-reference .sfc-hero .hero__media::after{background:linear-gradient(90deg,var(--ink-alpha-82),var(--ink-alpha-48) 48%,var(--ink-alpha-12))}
.service-reference .sfc-hero .sfc-form{box-shadow:none;align-self:center}

.service-reference .sfc-busy__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:60px}
.service-reference .sfc-busy h2{font-size:var(--t-h2)}
.service-reference .sec__head{max-width:900px;margin:0 auto 44px}
.service-reference .sec__head p{margin:20px auto 0;max-width:720px}
.service-icon{display:grid;place-items:center;width:96px;height:96px;border:1px solid var(--orange);border-radius:var(--pill);margin:auto;color:var(--orange);transition:none;
}
.service-icon svg{width:48px;height:48px}
.service-shield svg{transition:none;width:140px;height:140px;display:block;margin:0 auto 24px;color:var(--orange);
}
.service-review-photo img,.service-space img{transition:none;width:100%;height:100%;object-fit:cover;
}
.service-look{transition:none;background:var(--white);border:1px solid var(--ink);border-radius:var(--r-s);padding:32px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;contain:layout;overflow:hidden;
}
.service-system{transition:none;flex:0 0 calc((100% - 48px)/3);min-width:0;background:var(--white);color:var(--ink);border-radius:var(--r-s);overflow:hidden;
}

.service-system-row{display:flex;gap:24px;align-items:stretch}

.service-diagram{background:var(--surface);padding:24px 12px}
.service-diagram>svg{display:block;width:100%;height:auto;aspect-ratio:568/362}
.service-card-copy{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.service-card-copy h3{margin:0}
.service-card-copy p{margin:0;font-size:var(--t-lead);min-height:112px;
}
.service-look-grid{display:grid;align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.service-look-icon{color:var(--orange)}
.service-look-icon svg{width:40px;height:40px}
.service-look h3{margin:18px 0 12px;font-size:var(--t-h3);line-height:1.2}
.service-look p{font-size:var(--t-lead);min-height:56px}
.service-inspiration{width:100%;margin:12px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--r-s);overflow:hidden;height:auto;grid-auto-rows:auto;align-items:start;
}
.service-inspiration img{width:100%;height:92px;object-fit:cover}
.service-confidence__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center}
.service-warranty{background:var(--white);padding:40px;border-radius:var(--r-s)}
.service-warranty p{font-size:var(--t-lead)}
.service-shield{text-align:center}
.service-shield strong{display:block;font-size:var(--t-h3)}
.service-shield p{font-size:var(--t-lead)}
.service-review{flex:0 0 100%;margin:0;min-width:0;padding:0}
.service-review p{font-size:var(--t-card-title);line-height:1.5;margin:24px 0}
.service-review footer{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-lead);gap:16px}
.service-stars{display:flex;gap:4px;color:var(--orange)}
.service-stars svg{width:24px;height:24px;fill:currentColor}
.service-review-photo{position:relative;display:block;overflow:hidden;border-radius:var(--r-s);background:var(--ink);color:var(--white);text-decoration:none;min-width:0}
.service-space{position:relative;display:block;overflow:hidden;border-radius:var(--r-s);background:var(--ink);color:var(--white);text-decoration:none;min-width:0;aspect-ratio:3/4;
}
.service-review-photo span{position:absolute;inset:auto 0 0;padding:60px 24px 24px;background:linear-gradient(transparent,var(--ink));font-size:var(--t-card-title);font-weight:800;line-height:1.2}
.service-space span{position:absolute;inset:auto 0 0;padding:60px 24px 24px;background:linear-gradient(transparent,var(--ink));font-size:var(--t-card-title);font-weight:800;line-height:1.2;display:flex;gap:12px;align-items:end;justify-content:space-between;
}
.service-review-photo:is(a:not(.cta-text),button,.card--link,[role=button]):hover img,.service-space:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:scale(1.035)}
.service-space-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.service-space b{color:var(--orange);font-size:var(--t-h3)}
.service-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;align-items:center;text-align:center}
.service-trust-grid>strong{font-size:var(--t-h3)}
.service-trust-grid>strong span{display:block;font-size:var(--t-body);font-weight:500}
.service-rating{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-size:var(--t-body)}
.service-rating strong{font-size:var(--t-h3)}

/* Quote delivery and security controls */
.quote-honeypot{width:1px;height:1px;overflow:hidden;position:absolute;left:-10000px}
.cf-turnstile{max-width:100%;min-width:0;margin:12px 0;grid-column:1/-1}
.quote-status{color:var(--ink);font-size:var(--t-body);line-height:1.5;grid-column:1/-1}
.quote-success{color:var(--ink);font-size:var(--t-body);line-height:1.5;grid-column:1/-1;background:var(--white);padding:24px;border-radius:var(--r-s);
}
.quote-status:empty{display:none}
.quote-success h3{margin-bottom:12px}
.quote-status a{display:inline-flex;align-items:center;min-height:40px}
form button:disabled{opacity:.65;cursor:wait}

/* Shared quote carryover: keep each step compact and every phone label at 16px. */
/* Global scroll padding is 104px; place a stepped form 88px below the viewport top. */
.nee-full,.nee-short{scroll-margin-top:-16px;min-width:0}
.nee-full .est__bar{margin-bottom:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nee-short .est__bar{margin-bottom:12px;grid-template-columns:repeat(3,minmax(0,1fr));
}
.nee-full .est__bar i.is-on,.nee-short .est__bar i.is-on{background:var(--orange)}
.nee-full h3{font-size:var(--t-h3);line-height:1.15;margin:0 0 12px}
.nee-full .field,.nee-short .field{min-width:0;margin:0 0 6px}
.nee-full .field>span,.nee-short .field>span{font-size:var(--t-body);line-height:1.2;margin-bottom:3px}
.nee-full .field :is(input,select,textarea),.nee-short .field :is(input,select,textarea){width:100%;min-width:0;min-height:40px;height:40px;padding:8px 10px;font-size:var(--t-body);line-height:1.2}
.nee-full .field textarea{min-height:40px;resize:vertical}
.nee-full .field input[type=file]{font-size:var(--t-body);padding:5px;max-width:100%}
.nee-contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.nee-town{display:flex;align-items:center;gap:5px;margin:-6px 0 8px}
.nee-town .field{margin:0;flex:1;min-width:0}
.nee-town .field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nee-town .field:last-child{flex:0 0 58px}
.nee-town .field input{border:0;border-bottom:1px solid var(--line);border-radius:var(--r-s);padding:4px 0;background:var(--white)}
.nee-condition{padding:0;margin:0 0 12px;border:0;min-width:0}
.nee-condition legend{font-size:var(--t-body);font-weight:700;padding:0;margin-bottom:6px}
.nee-condition>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nee-condition label{position:relative;cursor:pointer;min-width:0}
.nee-condition input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.nee-condition span{display:flex;justify-content:center;align-items:center;min-height:40px;border:1px solid var(--ink-soft);border-radius:var(--r-s);font-size:var(--t-body)}
.nee-condition input:checked+span{border:2px solid var(--orange);background:var(--surface)}
.nee-condition input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.nee-full .est__row,.nee-short .est__row{flex-wrap:nowrap;gap:8px;margin-top:8px}
.nee-full .est__top{margin-bottom:6px}
.nee-full .cf-turnstile{margin:0;max-width:100%}

/* Shared quote card: service heroes, home hero and full estimates. */
form:is(.est.est,.hq.hq,.home-quote.home-quote){
  padding:24px;border-radius:var(--r-s);background:var(--white);color:var(--ink);box-shadow:none;
}
form:is(.est.est,.hq.hq,.home-quote.home-quote) :is(h2,h3,.sfc-form__head){
  font:700 var(--t-h2)/1.3 var(--font-body);font-stretch:normal;letter-spacing:0;text-transform:none;
  color:var(--ink);background:none;padding:0;min-height:0;display:block;text-align:left;margin:0 0 16px;
}
form:is(.est.est,.hq.hq,.home-quote.home-quote) :is(.est__top,.hq__top,.home-quote__progress){
  font:400 var(--t-eyebrow)/1.4 var(--font-body);color:var(--ink-soft);margin:0 0 16px;gap:4px;
}
form:is(.est.est,.hq.hq) .est__top span{font-weight:400;color:var(--ink-soft)}
form:is(.est.est,.hq.hq) .est__bar{margin:0 0 16px;gap:8px}
form:is(.est.est,.hq.hq) .est__bar i{height:2px;border-radius:var(--r-s);background:var(--surface)}
form:is(.est.est,.hq.hq) .est__bar i.is-on{background:var(--orange)}
form:is(.est.est,.hq.hq,.home-quote.home-quote) :is(.field,.est__hint){margin:0 0 16px}
form:is(.est.est,.hq.hq,.home-quote.home-quote) .field :is(input,select,textarea){font-size:var(--t-body);min-height:44px}
form:is(.est.est,.hq.hq) .est__row{margin:16px 0 0;gap:16px;flex-wrap:wrap}

/* Arrows: one shared wing/blade control for every carousel and photo slider. */
main button.carousel-arrow.carousel-arrow.carousel-arrow,.arrow-blade {
  --arrow-surface:var(--white); --arrow-ink:var(--ink); --arrow-line:var(--scrim-alpha-12); --arrow-shift:3px; place-items:center; flex:none;
  box-shadow:inset 0 1px 0 var(--paper-alpha-18),0 8px 24px var(--scrim-alpha-35);
  backdrop-filter:none; opacity:1; cursor:pointer; z-index:6;
  transform:none; transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
main button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_),.arrow-blade:not(#_):not(#_){
  display:inline-grid;
  width:64px; height:44px; min-width:64px; min-height:44px;
  padding:0; margin:0; border:1px solid var(--arrow-line);
  border-radius:calc(var(--r-s) * 2.75) calc(var(--r-s) * 5.5) calc(var(--r-s) * 5.5) calc(var(--r-s) * 2.75);
  background:var(--arrow-surface); color:var(--arrow-ink);
}
main button.carousel-arrow.carousel-arrow[data-arrow-dark] { --arrow-surface:var(--ink-alpha-92); --arrow-ink:var(--white); --arrow-line:var(--paper-alpha-14)}
main button.carousel-arrow.carousel-arrow.carousel-arrow[data-arrow-direction="prev"] { --arrow-shift:-3px }
main button.carousel-arrow.carousel-arrow.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_){ border-radius:calc(var(--r-s) * 5.5) calc(var(--r-s) * 2.75) calc(var(--r-s) * 2.75) calc(var(--r-s) * 5.5);
}
main button.carousel-arrow.carousel-arrow svg,.arrow-blade svg { transition:none; width:24px; height:24px; transform:translateX(0)}
main button.carousel-arrow.carousel-arrow.carousel-arrow:hover:not(:disabled):not(#_):not(#_):not(#_) { background:var(--orange); color:var(--ink) }
main button.carousel-arrow.carousel-arrow:hover:not(:disabled) svg { transform:translateX(var(--arrow-shift)) }
main button.carousel-arrow.carousel-arrow:active:not(:disabled) { scale:.96 }
main button.carousel-arrow.carousel-arrow:disabled { cursor:default; opacity:.35 }
main button.carousel-arrow.carousel-arrow:focus-visible { outline:2px solid var(--orange); outline-offset:2px }
main button.carousel-arrow.carousel-arrow[data-arrow-positioned] { position:absolute; top:var(--arrow-top); bottom:auto; left:var(--arrow-left); right:auto; transform:translateY(-50%) }
.photo-slider-shell{position:relative;min-width:0;max-width:100%;overflow:visible}
body .photo-slider-shell>.photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){margin:0}
.photo-slider-shell>.photo-slider__arrow{position:absolute}
.photo-slider__mask { position:absolute; inset:0; overflow:hidden; border-radius:inherit }

/* Responsive sources share their image's existing layout box. Crops are exported
   at the measured desktop/phone aspects rather than enlarged by cover. */
picture[data-responsive]{display:contents}
.service-photo>picture[data-responsive]>img,.h-crew>picture[data-responsive]>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hh__media picture[data-responsive]>img{transform:none}

/* lead 2026-11-03: trust strip counters — keep the spaces between a counted number and its words (flex items swallow whitespace) */

/* lead 2026-11-03: the strip link is inline-flex, which drops the whitespace around the counter spans the motion script injects; inline-block keeps "5.0 on Google, 141 reviews" readable */

/* One content-sized review component for home, service and testimonial sections. */
.shared-reviews .shared-reviews__rating{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;font-size:var(--t-lead);line-height:1.5;margin:0 0 32px;text-align:center}
.shared-reviews__google{font-weight:700;letter-spacing:-.04em;font-size:var(--t-h3)}
.shared-reviews .shared-reviews__track.carousel-engine{width:100%;margin:0;padding:0}
.shared-reviews .shared-reviews__track.carousel-engine:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:flex;align-items:stretch;gap:24px;
}
.shared-reviews .shared-reviews__track>*{flex:0 0 calc((100% - 48px)/3);min-width:0;max-width:720px;box-sizing:border-box}
.shared-reviews .carousel-viewport{overflow:hidden;cursor:grab}
.shared-reviews .review-card{height:auto;align-self:stretch;padding:32px;margin:0;border:0;border-radius:var(--r-s);background:var(--ink);color:var(--white);text-align:left;box-shadow:none}
.shared-reviews.on-dark .review-card{background:var(--white);color:var(--ink)}
.shared-reviews .review-card__header{display:flex;align-items:center;flex-wrap:wrap;gap:12px;position:static;padding:0;margin:0;background:none;color:inherit}
.shared-reviews .review-card__avatar{display:block;position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:var(--pill);overflow:hidden;background:var(--surface);color:var(--ink);font-size:var(--t-caption);font-weight:700;line-height:40px;text-align:center}
.shared-reviews .review-card__avatar img{position:absolute;inset:0;width:40px;height:40px;object-fit:cover}
.shared-reviews .review-card__identity{flex:1;min-width:0}
.shared-reviews .review-card__identity strong{display:block;font-size:var(--t-button);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.shared-reviews .review-card__date{display:block;font-size:var(--t-eyebrow);line-height:1.4;color:var(--on-dark-soft);margin-top:4px}
.shared-reviews.on-dark .review-card__date{color:var(--ink-soft)}
.shared-reviews .review-card__stars{display:flex;gap:0;margin-left:auto;align-self:flex-start;flex:0 0 80px;line-height:1}
.shared-reviews .review-card__stars svg{width:16px;height:16px;fill:var(--orange)}
.shared-reviews .review-card__quote{position:relative;margin:24px 0 0;padding:0;border:0}
.shared-reviews .review-card__quote::before{content:'“';position:absolute;left:-22px;top:-9px;color:var(--orange);font:300 var(--t-h2)/1 Georgia,serif}
.shared-reviews .review-card__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-lead);line-height:1.55;font-weight:400;margin:0;padding:0;color:inherit}
.shared-reviews .review-card__text.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible}
.shared-reviews .review-card__more{display:inline-flex;min-height:40px;padding:8px 0 0;margin:8px 0 0;border:0;border-radius:var(--r-s);background:none;color:inherit;font:600 var(--t-button)/1.5 var(--font-body);text-decoration:none;text-transform:none;cursor:pointer}
.shared-reviews .review-card__more[hidden]{display:none}
.shared-reviews__controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}
.shared-reviews__dots{position:relative;display:flex;flex:0 1 160px;max-width:160px;overflow:hidden;scrollbar-width:none}
.shared-reviews .shared-reviews__dots button{position:relative;flex:0 0 40px;width:40px;min-width:40px;height:40px;padding:0;border:0;background:none;border-radius:var(--r-s);cursor:pointer}
.shared-reviews__dots button::after{content:'';position:absolute;top:16px;left:16px;width:8px;height:8px;border-radius:var(--pill);background:var(--ink-soft)}
.shared-reviews__dots button[aria-current="true"]::after{background:var(--orange)}
.shared-reviews .shared-reviews__work{height:300px;margin:0}
.shared-reviews .h-rev__cta{margin-top:24px;text-align:center}
/* These quiet controls override the shell's broad CTA button fill. */
main .shared-reviews .review-card__more:not(#_):not(#_),main .shared-reviews .shared-reviews__dots button:not(#_):not(#_){background:none;color:inherit}
.shared-reviews button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Captions: one band for authored photo labels across every page. */
.photo-caption-host{position:relative}
body .card-label,body .card-description{
  position:absolute;inset:auto 0 0;z-index:2;display:block;box-sizing:border-box;
  width:auto;height:auto;max-width:none;min-height:0;margin:0;padding:20px;
  background:linear-gradient(to bottom,transparent,var(--scrim-alpha-65));
  color:var(--white);font:500 var(--t-caption)/var(--t-fixed-20px) var(--font-body);text-align:left;
  border:0;border-radius:var(--r-s);clip:auto;white-space:normal;text-shadow:none;
  pointer-events:none;--palette-fg:var(--white);--palette-muted:var(--white);
}
/* Caption pill: authored photo copy only; service title bands are separate. */
body .photo-caption.photo-caption{
  position:absolute;inset:auto auto var(--caption-bottom,0px) var(--caption-left,50%);
  z-index:3;display:block;box-sizing:border-box;transform:translate(-50%,50%);
  width:max-content;height:auto;max-width:var(--caption-width,90%);min-height:0;
  margin:0;padding:10px 18px;border:1px solid var(--paper-alpha-12);border-radius:var(--pill);
  background:var(--ink);color:var(--white);font:var(--font-600-14px-20px-body);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  clip:auto;text-shadow:none;box-shadow:0 6px 18px var(--scrim-alpha-35);pointer-events:none;
  --palette-fg:var(--white);--palette-muted:var(--white);
}
body .photo-caption[hidden]{display:none}
body .photo-caption-host:not(.photo-slider__slide):not(.photo-slider){overflow:visible}
body .photo-caption-host>img{border-radius:var(--r-s)}
/* Give responsive thumbnails an explicit width so srcset sizes cannot collapse to 1px. */
body .gal-tile.photo-caption-host img{width:min(230px,100%,calc(150px * var(--caption-image-ratio,1.5)));height:auto;max-height:none}

body .photo-slider .photo-slider__dots{inset:12px 12px auto auto;justify-content:flex-end}
body .photo-slider .photo-slider__dots button::before{background:var(--white)}
body .photo-slider .photo-slider__dots button[aria-current="true"]::before{width:8px;left:16px}

body .photo-caption :is(h3,strong){
  position:static;inset:auto;margin:0;padding:0;background:none;color:var(--white);
  font:700 var(--t-h3)/1.3 var(--font-body);text-transform:none;letter-spacing:normal;
}
body .service-photo .service-photo__name{
  position:static;inset:auto;margin:0;padding:0;background:none;color:var(--white);
  font:700 var(--t-h3)/1.3 var(--font-body);
 text-transform:none;letter-spacing:0;white-space:normal;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
body .service-photo .service-photo__name:not(#_){
 font-size:var(--t-card-title);font-weight:800;line-height:1.2;
}
body .photo-caption :is(p,span){color:inherit;font-size:var(--t-caption);font-weight:inherit}
body .photo-caption :is(b,.arr,.service-photo__arrow){color:var(--orange);--palette-fg:var(--orange)}
body .service-photo::after{display:none}
body .compare input{z-index:4}
body .swatches .photo-caption-host{display:block;overflow:hidden}


/* Craft pass: one radius scale, three action treatments, scarce authored marks. */
body .cta-primary.cta-primary:not(#_):not(#_){border-radius:var(--pill);background:var(--orange);color:var(--ink);border-color:var(--orange)}
body .cta-secondary.cta-secondary:not(#_):not(#_){border-radius:var(--pill);background:transparent;color:var(--ink);border-color:var(--ink)}
body :is(.on-dark,.site-header,.site-footer,.mbar) .cta-secondary.cta-secondary:not(#_):not(#_){color:var(--white);border-color:var(--white)}
body .cta-secondary.cta--on-paper.cta--on-paper:not(#_):not(#_){color:var(--ink);border-color:var(--ink)}
a.cta-text{display:inline-flex;align-items:center;gap:8px;min-height:40px;position:relative;background:none;color:inherit;font-weight:700}
a.cta-text.cta-text{text-decoration:none;
}
a.cta-text.cta-text::after{content:'';display:inline-block;width:1em;height:1em;margin-left:.3em;vertical-align:-.12em;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:none}
a.cta-text::before{content:'';position:absolute;left:0;right:24px;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:none}
a.cta-text:hover::before,a.cta-text:focus-visible::before{transform:scaleX(1)}
a.cta-text:hover::after{transform:translateX(3px)}
.nav-list a.nav-tab{min-height:40px}
body .has-seam{position:relative;overflow:visible;z-index:1}
.seam{position:absolute;display:block;left:0;bottom:-31px;width:100%;height:32px;fill:var(--ink);pointer-events:none;z-index:2}
[data-job-photo]{position:relative}
.craft-photo{position:relative;margin:0;min-width:0;overflow:hidden;border-radius:var(--r-s);
}
.service-inspiration .craft-photo img{width:100%;height:108px;object-fit:cover}
.craft-contact>.ct-grid{display:block}
.craft-contact .ct-info{max-width:1160px;margin:0 auto;padding:56px 24px}
.craft-contact .ct-form{max-width:1160px;margin:0 auto;padding:56px 24px;border:0;border-radius:var(--r-s)}
.craft-contact{background:var(--surface)}
.craft-project{display:block;max-width:960px}
.craft-project .project-card{display:grid;grid-template-columns:1fr 1fr}
/* Dynamically created dots inherit the same small control radius. */

body button.cta-text.cta-text:not(#_):not(#_){background:transparent;color:inherit}
.service-inspiration .craft-photo{height:auto}

/* Service captions stay inside the clipped card; only the title adds height. */
body .service-photo{aspect-ratio:auto;overflow:hidden;background:var(--ink)}
body .service-photo>img,body .service-photo>picture[data-responsive]>img{position:static;display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
body .service-photo>picture{display:block}
body .f-bar .f-credit{order:0;margin:0 auto 0 0;font-size:var(--t-eyebrow);font-weight:500;color:var(--white);opacity:.45}
body .f-bar .f-bar__c{margin:0}
body .f-bar .f-bar__legal{order:1}
body .f-bar .f-credit a{color:inherit;font-size:var(--t-body);font-weight:inherit;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
body .f-bar .f-credit a:hover{color:inherit;text-decoration:underline}

/* Type scale contract (SHELL.md): semantic roles beat historical component sizes. */
body h1{text-transform:uppercase;font-size:var(--t-h1);font-weight:900;line-height:1.05}
body h2{text-transform:uppercase}
body h2:not(._){font-size:var(--t-h2);font-weight:900;line-height:1.05;
}
body h3:not(._):not(._):not(._){font-size:var(--t-h3);font-weight:800;line-height:1.2}
body :is(p,li,dd,address){line-height:1.55}
body .lead,body .hero__sub{font-size:var(--t-lead);line-height:1.55}
body .eyebrow,body .hh__eyebrow{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.08em}
body :is(.btn,button.cta-primary,button.cta-secondary,button.cta-text,a.cta-text,.menu-toggle){font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body :is(.btn,button.cta-primary,button.cta-secondary,button.cta-text,a.cta-text,.menu-toggle):not(#_){font-size:var(--t-button);
}
body :is(.job-caption,.cap,figcaption,time){font-size:var(--t-caption)}
/* The title band owns padding; the clamped title inside it owns no spacing. */
body .service-photo>.service-photo__name.photo-caption,body .service-card-copy{padding:20px}
body .svc h3,body .project-card h3,body .project-card h2,body .service-card-copy h3{
 text-transform:none;letter-spacing:0;white-space:normal;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
 max-height:2.4em;
}
body .svc h3:not(._):not(._),body .project-card h3:not(._):not(._),body .project-card h2:not(._):not(._),body .service-card-copy h3:not(._):not(._){
 font-size:var(--t-card-title);font-weight:800;line-height:1.2;
}
body .menu__lab>strong,body .service-photo .service-photo__name h3{letter-spacing:inherit;text-transform:inherit;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
 max-height:2.4em;
 font:inherit;
}
body .service-photo__ending{display:inline;white-space:normal}
body :is(.menu__lab,.service-photo__name,.service-space .card-label) :is(.arr,.service-photo__arrow svg){width:.8em;height:.8em;vertical-align:baseline;color:var(--orange)}
body .service-photo .service-photo__name :is(span,h3,strong){font-size:var(--t-card-title);font-weight:inherit;line-height:inherit}
body .project-card .project-copy{padding:20px}
/* Body copy remains on the body step even when a legacy component used a smaller size. */
body main p:not(.lead):not(.hero__sub):not(.eyebrow):not(.job-caption):not(.photo-caption):not(.home-quote__progress):not(.project-meta){font-size:var(--t-body)}
body main p.lead,body main p.hero__sub{font-size:var(--t-lead)}

body h3>button.cta-text{font-weight:800;line-height:1.2}

body h3>button.cta-text:not(#_){font-size:var(--t-h3);
}

/* Review text actions and slider indicators never inherit filled CTA treatments.
   Indicators keep 40px hit areas; only the 8px disc / 24px active pill is painted. */
body .shared-reviews .review-card__more{border-radius:0}
body .shared-reviews .review-card__more:not(#_):not(#_){background:transparent;color:var(--orange);
}
body .shared-reviews.on-dark .review-card__more:not(#_):not(#_):not(#_){color:var(--ink)}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots){gap:0;background:transparent;box-shadow:none}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button{position:relative;flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:0}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button:not(#_):not(#_){background:transparent;box-shadow:none;
}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button:not(._)::before{content:'';position:absolute;inset:16px auto auto 16px;width:8px;height:8px;margin:0;border:0;border-radius:var(--pill);opacity:.45;box-shadow:none;transition:opacity var(--dur-2)}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button::before{background:var(--white);
}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button[aria-current="true"]::before{width:24px;left:8px;opacity:1}
body :is(.carousel__dots,.photo-slider__dots,.shared-reviews__dots,.mx-gal__dots) button::after{content:none}

/* Floaters — shell-owned, keyboard accessible and clear of the mobile action bar. */
#floaters{--floater-bottom:16px;color:var(--ink);font-family:Figtree,Arial,sans-serif}
#floaters input,#floaters textarea,#floaters select{font:inherit}
#floaters button{font:inherit;cursor:pointer;min-height:44px;text-transform:none;letter-spacing:normal;
}
#floaters :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.feedback-tab{position:fixed;right:0;top:60%;width:44px;height:136px;padding:0;z-index:140;background:var(--orange);color:var(--ink);border:0;border-radius:var(--r-s) 0 0 var(--r-s)}
.feedback-tab span{display:block;white-space:nowrap;transform:rotate(-90deg);font-size:var(--t-eyebrow);font-weight:700}
.accessibility-button{position:fixed;left:16px;bottom:var(--floater-bottom);z-index:140;width:48px;height:48px;padding:9px;border:2px solid var(--white);border-radius:var(--r-circle);background:var(--ink);color:var(--white)}
.accessibility-button svg{display:block;width:26px;height:26px}
#floaters .accessibility-button:focus-visible{outline-color:var(--orange)}
.floater-panel{position:fixed;inset:auto 16px var(--floater-bottom) auto;margin:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--floater-bottom) - 24px);overflow-y:auto;padding:24px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);font-size:var(--t-body);line-height:1.5;z-index:150}
.floater-panel::backdrop{background:transparent}
#accessibility-panel{left:16px;right:auto}
#floaters .floater-panel h2{font-family:Figtree,Arial,sans-serif;text-transform:none;letter-spacing:normal;margin:0 40px 16px 0}
.floater-close{position:absolute;top:8px;right:8px;width:44px;padding:0;border:0;background:var(--white);color:var(--ink);font-size:var(--t-icon-26px)}
#feedback-form label{display:block;margin:12px 0 4px;color:var(--ink)}
#feedback-form textarea,#feedback-form input{display:block;width:100%;min-height:44px;padding:8px;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);font-size:var(--t-body);box-sizing:border-box}
.feedback-stars{display:flex;gap:4px}
.feedback-stars button{width:48px;padding:0;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);font-size:var(--t-icon-30px)}
.feedback-stars button[aria-pressed=true]{border-width:3px}
#floaters .floater-note{font-size:var(--t-eyebrow);line-height:1.5;margin:12px 0;color:var(--ink-soft)}
.feedback-status:empty{display:none}
#floaters .floater-send,#floaters .a11y-reset{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);padding:8px 18px;font-weight:700}
.reader-back{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);padding:8px 18px;font-weight:700;display:none;position:fixed;top:12px;left:16px;z-index:140;
}
.feedback-trap{position:absolute;overflow:hidden;width:1px;height:1px;clip-path:inset(50%)}
.a11y-size{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:8px 0}
.a11y-option{display:flex;align-items:center;gap:12px;min-height:48px;margin:8px 0;justify-content:flex-start;cursor:pointer;
}
.a11y-option input{width:24px;height:24px;accent-color:var(--ink)}
.a11y-size select{min-height:44px;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);padding:4px 8px}
.a11y-links body a{text-underline-offset:.2em}
.a11y-links body a:not(._):not(._){text-decoration:underline;
}
.a11y-font body:not(#_),.a11y-font body :is(p,li,a,button,input,textarea,select,h1,h2,h3,h4,label):not(#_){font-family:Arial,Helvetica,sans-serif;line-height:1.6}
.a11y-contrast body:not(#_):not(#_),.a11y-contrast body *:not(#_):not(#_){background-color:var(--white);color:var(--ink);border-color:var(--ink);text-shadow:none;box-shadow:none}
.a11y-contrast body .feedback-tab{background-color:var(--orange);color:var(--ink)}
.a11y-contrast body .accessibility-button{background-color:var(--ink);color:var(--white)}
.a11y-contrast body .accessibility-button svg:not(#_):not(#_),.a11y-contrast body .accessibility-button svg *:not(#_):not(#_){background:transparent;color:var(--white)}
html.a11y-motion{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--menu-fade:0ms;--menu-rows:0ms;scroll-behavior:auto}
.a11y-motion *:not(._),.a11y-motion *:not(._)::before,.a11y-motion *:not(._)::after{transition:none}
.a11y-motion *:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),.a11y-motion *::before:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),.a11y-motion *::after:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){animation:none;scroll-behavior:auto;
}
.a11y-reader body{background:var(--white);color:var(--ink);padding-top:80px}
.a11y-reader body> :is(header,footer,.mbar,.back-top):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),.a11y-reader :is(.hero__media,.hh__media,.photo-slider,[data-carousel],.carousel,.carousel-viewport,.dev-plate,.hero__scrim):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:none}
.a11y-reader #floaters .reader-back{display:block}
.a11y-reader main{font-size:var(--t-reader-1-25rem);line-height:1.6;width:calc(100% - 48px);max-width:min(65ch,720px);margin:0 auto}
.a11y-reader main :is(section,article,div,ul,ol,form,fieldset):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:block;position:static;width:auto;max-width:100%;min-width:0;height:auto;min-height:0;grid-template-columns:1fr;transform:none;opacity:1;background:var(--white);color:var(--ink);padding:12px 0;margin:0 0 16px}
.a11y-reader main :is(h1,h2,h3,h4,p,li,label):not(._):not(._):not(._){color:var(--ink);max-width:65ch;line-height:1.6}
.a11y-reader main :is(p,li,label):not(#_){font-size:var(--t-reader-1-25rem)}
.a11y-reader main :is(h1,h2){font-size:var(--t-reader-1-8rem)}
.a11y-reader main :is(img,video){max-width:100%;height:auto}
.a11y-reader main *:not(._)::before,.a11y-reader main *:not(._)::after{display:none}
/* Explicit floater treatments override the shell's automatic CTA classification. */
#floaters button.cta-text:not(#_):not(#_){background:var(--white);color:var(--ink);font-size:var(--t-body)}
#floaters .feedback-tab.cta-text:not(#_):not(#_){background:var(--orange);color:var(--ink)}
#floaters .accessibility-button.cta-text:not(#_):not(#_){background:var(--ink);color:var(--white)}
#floaters .feedback-stars button:not(#_):not(#_):not(#_){background:var(--white);color:var(--orange);font-size:var(--t-icon-30px)}
#floaters .floater-close{font-size:var(--t-icon-26px)}
#floaters button::before,#floaters button::after{display:none}
#floaters .feedback-tab{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
#floaters .feedback-tab span{width:136px;text-align:center;color:var(--ink);font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.06em}
#floaters .feedback-tab span:not(#_){background:transparent;
}

/* Captions belong to content photos, never hero/background media. */

/* Full carryover form: each step stays within a phone viewport. */
form.nee-full.nee-full.nee-full{padding:16px;color:var(--ink);background:var(--white);scroll-margin-top:-16px;
}
form.nee-full.nee-full .est__top{margin:0 0 6px;font-size:var(--t-body);line-height:20px}
form.nee-full.nee-full .est__bar{display:grid;margin:0 0 8px;gap:6px}
form.nee-full.nee-full h3{letter-spacing:0;text-transform:none;margin:0 0 8px}
form.nee-full.nee-full .field{margin:0 0 4px}
form.nee-full.nee-full .field>span{font-size:var(--t-body);line-height:19px;margin-bottom:2px}
form.nee-full.nee-full .field :is(input,select,textarea){font-size:var(--t-body);line-height:20px;height:40px;min-height:40px;padding:8px 10px}
form.nee-full.nee-full .field input[type=file]{padding:5px}
form.nee-full.nee-full .nee-town{margin:0 0 4px}
form.nee-full.nee-full .nee-town .field{margin:0}
form.nee-full.nee-full .nee-town input{padding:4px 0}
form.nee-full.nee-full .est__row{display:flex;flex-wrap:nowrap;gap:8px;margin:6px 0 0}
form.nee-full.nee-full .cf-turnstile{margin:0}
form.nee-full.nee-full .est__step.is-on{display:block}
form.nee-full.nee-full .nee-condition>div{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Plus icon — all disclosure bars share a centre, including during rotation. */
.ico-plus{position:relative;display:inline-block;flex:0 0 14px;width:14px;height:14px;vertical-align:middle}
.ico-plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--orange);transform:translate(-50%,-50%);transform-origin:50% 50%;border:0;border-radius:0;margin:0;padding:0;width:2px;height:14px;transition:none;
}
.ico-plus::before{content:"";position:absolute;top:50%;left:50%;background:var(--orange);transform:translate(-50%,-50%);transform-origin:50% 50%;border:0;border-radius:0;margin:0;padding:0;width:14px;height:2px;
}
[aria-expanded="true"]>.ico-plus::after,details[open]>summary:not([aria-expanded])>.ico-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
/* Retire legacy pseudo-icons without affecting the icon's own two bars. */
main summary.has-plus::after,main summary.has-plus::before{content:none;display:none}
.has-plus{min-height:44px;min-width:44px}
main summary.has-plus.has-plus{position:relative;padding-right:54px;list-style:none}
main summary.has-plus>.ico-plus{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
main summary.has-plus::-webkit-details-marker{display:none}
.menu-toggle.has-plus.has-plus,.nav-list a.nav-tab.has-plus.has-plus{min-height:44px}

/* Plain accent heading rules: one mark per heading, no drawn decoration. */
:is(.ct-rule,.ab-rule,.ab-intro__rule,.mx-rule,.gal-rule,.cfc-hero__rule,.gfc-hero__rule,.sfc-hero__rule,.sfc-busy__rule){height:3px;background:var(--orange);border:0;border-radius:0}

/* Motion engine owns all interruptible movement; curves are for fades only. */
.has-menu.open .menu__list>li{transition:none;transform:none;opacity:1}
.menu__list>li{transition:none;transform:none;opacity:1;visibility:visible;
}
.btn:active,.menu-toggle:active,.motion-tile:is(a,button,.card--link,[role=button]):hover{transform:none}
.slider,.slider__track{transition:none}

button.carousel-arrow.carousel-arrow.carousel-arrow.carousel-arrow:active{scale:none}

/* Inquire floater: a quiet nonmodal object above carousel controls. */
.inquire{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:112px;height:48px;overflow:hidden;z-index:160;border-radius:var(--pill);background:var(--ink);color:var(--white);box-shadow:0 8px 24px var(--scrim-alpha-35);font-family:Figtree,Arial,sans-serif}
.inquire .inquire__toggle.inquire__toggle{position:absolute;right:0;top:0;width:112px;height:48px;min-height:48px;padding:0;border:0;border-radius:var(--pill);cursor:pointer}
.inquire .inquire__toggle:not(#_){background:transparent;font:var(--font-inquire);letter-spacing:.04em;text-transform:none;
}
.inquire[data-open] .inquire__toggle{width:48px}
.inquire[data-open] .inquire__toggle:not(#_){font-size:var(--t-icon-26px);font-weight:400;
}
.inquire__rows{position:absolute;left:16px;right:16px;top:48px}
.inquire__rows a:not(._){display:flex;align-items:center;gap:12px;height:52px;color:var(--white);text-decoration:none;font-size:var(--t-body);font-weight:600;opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.inquire__rows a+a{border-top:1px solid var(--paper-alpha-20)}
.inquire__rows svg{width:20px;height:20px;flex:none;color:var(--orange)}
.inquire[data-open] .inquire__rows a{opacity:1;transform:translateY(0);transition-delay:calc(var(--row) * var(--dur-40ms))}
.inquire :focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.inquire button::before,.inquire button::after{display:none}

/* The mobile accordion spring also drives the vertical plus stroke. */

/* Message and estimate form controls retain phone-sized text and conditional fields. */
.cform{--t-button:16px}
.nee-space-detail[hidden]{display:none}
.nee-phone-note{font-size:var(--t-body);line-height:20px;color:var(--ink-soft)}

/* Exterior service and commercial application links (shared shell). */
.nav-list .menu .menu__applications a{min-height:48px;padding:12px 16px;color:var(--ink);font-size:var(--t-body);white-space:normal;justify-content:space-between;letter-spacing:0;text-transform:none;border:1px solid var(--ink);border-radius:var(--r-s)}
.nav-list .menu .menu__applications a:hover,.nav-list .menu .menu__applications a:focus-visible{background:var(--surface);outline:2px solid var(--orange);outline-offset:2px}
.menu__applications .arr{width:20px;height:20px;flex:none;color:var(--orange)}
.commercial-application{scroll-margin-top:100px}
.exterior-service .service-look>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s)}
.exterior-service .faq summary{min-height:44px}
.menu__list>li.menu__applications{display:flex;flex-direction:column;justify-content:center;gap:16px}
/* Keep long disclosures inside the viewport as header type finishes loading. */

/* Trust facts live in the benefits band; no fluff items. */
.proof-band{background:var(--ink);color:var(--white);padding:20px 24px}
.proof-band__list{list-style:none;margin:0 auto;padding:0;max-width:1392px;display:grid;grid-template-columns:1.65fr repeat(5,minmax(0,1fr));gap:24px;align-items:center}
.proof-band__list>li{min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-body);font-weight:600;line-height:1.3}
.proof-band__list svg{width:24px;height:24px;flex:none;color:var(--orange)}
.proof-band__rating a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;text-decoration:none;white-space:nowrap}
.proof-band__stars{display:flex;gap:2px;color:var(--orange)}
.proof-band__stars svg{width:16px;height:16px}

/* Shared system variants; see SHELL.md. No section may repaint these. */
.card--tile{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-s)}
body .chip{display:inline-flex;align-items:center;min-height:28px;margin:0 0 14px;padding:7px 12px;border:1px solid var(--orange);border-radius:var(--pill);background:var(--orange);color:var(--ink);font:var(--font-700-11px-1_2-body);letter-spacing:.08em;text-transform:uppercase}
body .chip--photo{position:absolute;top:12px;left:12px;z-index:3;margin:0;pointer-events:none}
body .chip--end{left:auto;right:12px}
body .caption--band.caption--band.caption--band{position:absolute;inset:auto 0 0;z-index:3;display:block;width:100%;max-width:none;min-height:0;height:auto;margin:0;padding:32px 20px 20px;border:0;border-radius:0;transform:none;background:linear-gradient(transparent,var(--ink-alpha-85));color:var(--white);font:var(--font-500-14px-20px-body);text-align:left;white-space:normal;overflow:hidden;clip:auto;box-shadow:none;pointer-events:none}
body .caption--description{position:absolute;inset:0 0 auto;z-index:4;margin:0;padding:16px;border:0;border-radius:0;background:var(--ink-alpha-85);color:var(--white);font:var(--font-500-14px-20px-body);opacity:0;transform:translateY(-100%);pointer-events:none}
body .card--tile:is(.is-open,:focus-visible)>.caption--description{opacity:1;transform:none}
.arrow-blade--glass{--arrow-surface:var(--paper-alpha-85);backdrop-filter:blur(8px)}
.compare__handle.arrow-blade{position:absolute;top:50%;left:var(--pos);z-index:3;transform:translate(-50%,-50%);pointer-events:none}
.compare:focus-within .arrow-blade{outline:2px solid var(--orange);outline-offset:3px}

/* Shared CTA layout variants; treatment belongs exclusively to cta-primary/secondary/text. */
.cta--grow{flex:1 1 auto}
.cta--stack{flex:1 1 100%}
.cta--wide{min-width:211px;height:54px}
.cta--fill{width:100%}
.cta--tall{min-height:54px}
.cta--tall-padded{min-height:54px;padding-block:14px;box-sizing:border-box}
.cta--card-footer{margin-top:auto;align-self:flex-start}
.cta--card-action{margin-top:auto;max-width:100%}
.cta--form-compact{min-height:40px;padding:10px 12px;min-width:0}
.cta--form-action{width:auto;flex:0 0 auto;min-height:44px}
.cta--form-row.cta--form-row{width:auto;flex:1;min-height:48px;padding:10px 8px}

.caption--copy{padding:20px;font:var(--font-500-14px-20px-body)}
.caption--tool{font:var(--font-500-14px-20px-body)}

body .caption--sr-only.caption--sr-only.caption--sr-only{position:absolute;inset:auto;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;transform:none;box-shadow:none}
body .card--tile.card--tile{overflow:hidden}

.arrow-blade--overlay{position:absolute}

/* Running-text links have exactly one underline and share the paragraph reveal. */
body main a.prose-link{display:inline;min-height:0;letter-spacing:inherit;text-transform:none;color:inherit;text-underline-offset:.18em;opacity:1}
body main a.prose-link:not(#_):not(#_){font:inherit;text-decoration:underline;text-decoration-thickness:1px;border-bottom:0;background-image:none;
}
body main a.prose-link::before,body main a.prose-link::after{background:none;border:0;content:none}
body main a.prose-link:hover,body main a.prose-link:focus-visible{color:var(--orange)}

/* owner 2026-11-03 12:55: no headline shadow, no card watermark; the hero video is dimmed instead */
.hh__media::after{content:"";position:absolute;inset:0;background:var(--scrim-alpha-45);pointer-events:none;z-index:1}
/*  ---------- media queries: every @media block, last, in the order the rules were first written ----------  */
@media (max-width:1099.98px){:root{--gut:32px}}
@media (max-width:767.98px){:root{--r-l:28px;--gut:24px;--sec:56px;--t-hero-h1:40px;--t-h1:40px;--t-h2:28px;--t-h3:20px;--t-card-title:18px;--t-caption:13px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-width:768px){.sec{font-size:var(--t-lead);line-height:1.45}}
@media (max-width:1099.98px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899.98px){.grid--3{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:559.98px){.grid--4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767.98px){.dev-plate::before{inset:var(--r-s) 0 calc(var(--r-s)*-1) var(--r-s)}}
@media (min-width:1280px){
  .menu__list>li{opacity:0;transform:translateY(-8px);}
  .has-menu.open .menu__list>li{opacity:1;transform:none;transition-delay:calc(var(--menu-order)*var(--dur-40ms))}
}
@media (prefers-reduced-motion:reduce){.menu,.has-menu.open>.menu,.menu__list>li,.has-menu.open .menu__list>li{transition:none}.menu__card img,.menu__lab .arr{transition:none}.menu .menu__card:hover img,.menu .menu__card:hover .arr{transform:none}}
@media (max-width:1279.98px){
  .nav-cta .est-full{display:none}
  .nav-cta .est-mid{display:inline}
  .site-header{--hh:84px;--hpad:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)))}
  .site-header .menu-toggle{display:inline-flex;min-width:88px;
  }
  .logo{margin-right:auto}
  .logo img{width:200px}
  .site-nav{display:none;position:fixed;left:0;right:0;top:var(--nav-top,80px);bottom:0;overflow:auto;overscroll-behavior:contain;padding-inline:0;border-top:1px solid var(--line-dark);background:var(--ink);z-index:80;
  }
  .nav-open .site-nav{display:block;height:calc(100dvh - var(--nav-top,100px));max-height:none;overflow-y:auto;
  }
  body.nav-open{overflow:hidden;
  }
  .nav-open .mbar{display:none}
  .nav-list{flex-direction:column;justify-content:flex-start;height:auto;padding:8px var(--gut) 0;min-height:0}
  .nav-list>li{display:block}
  .nav-list>li>a,.nav-list>li>button.nav-tab{width:100%;min-height:56px;justify-content:space-between;border-bottom:1px solid var(--line-dark);padding:0 4px}
  .nav-list>li>a:hover,.nav-list>li>button.nav-tab:hover{background:none;text-decoration:none}
  .nav-list>li>a[aria-current="page"]::after{left:0;right:auto;width:36px;bottom:-1px}
  .has-menu.open::after{display:none}
  .site-header .site-nav .has-menu>.menu{display:grid;position:static;width:auto;max-width:none;max-height:none;overflow:hidden;border:0;background:transparent;box-shadow:none;border-radius:var(--r-s);padding:0;transform:none;transition:none;grid-template-rows:0fr}
  .site-header .site-nav .has-menu.open>.menu{display:grid;grid-template-rows:1fr}
  .site-header .site-nav .has-menu[data-leaving]>.menu{visibility:visible;pointer-events:none}
  .site-header .site-nav .menu__list{grid-template-columns:minmax(0,1fr);min-height:0;opacity:1;overflow:hidden;transition:none}
  .site-header .site-nav .menu__list>li{margin:0}
  .site-header .site-nav .menu__list>li:first-child{margin-top:14px}
  .site-header .site-nav .menu__list>li:last-child{margin-bottom:18px}
  .nav-backdrop{display:block;position:fixed;inset:var(--nav-top,100px) 0 0;background:var(--ink);opacity:1;pointer-events:none;z-index:79}
  .nav-open .nav-backdrop{pointer-events:auto}
  body.nav-leaving{overflow:hidden}
  .nav-list .menu .menu__card{width:100%;height:180px;max-height:180px;aspect-ratio:auto}
  .nav-panel-ctas{flex-direction:column;gap:12px;padding:16px var(--gut) 32px;display:none;
  }
}
@media (max-width:1024.98px){
  .site-header{--hh:80px}
  .hdr-actions .nav-call,.nav-cta .est-full{display:none}
  .nav-cta .est-mid{display:inline}
  .nav-panel-ctas{display:flex}
  .logo{margin-right:0}
  .logo img{width:200px}
}
@media (min-width:1280px){
  .site-header{--hpad:24px}
  .logo{margin-right:0}
  .logo img{width:185px;height:50px;object-fit:contain}
  .site-nav{--np:0;display:flex;align-items:center;justify-content:center}
  .nav-list{width:max-content;flex:none;height:auto;gap:22px;justify-content:center;flex-wrap:nowrap;margin:0;padding:0}
  .nav-list>li{flex:none}
  .nav-list>li>a,.nav-list>li>button.nav-tab{min-height:44px;padding:0;gap:6px;letter-spacing:.02em}
  .nav-list>li>a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:6px}
  .nav-list>li>a[aria-current="page"]::after{content:none}
  .hdr-right{margin-left:0}
  .hdr-actions{gap:12px}
  .btn--phone svg,.nav-cta .est-full{display:none}
  .nav-cta .est-mid{display:inline}
}
@media (min-width:1360px){.btn--phone svg{display:block}}
@media (min-width:1500px){
  .nav-list{gap:28px}
  .btn--phone svg{display:none}
}
@media (min-width:1700px){
  .btn--phone svg{display:block}
  .nav-list>li>a,.nav-list>li>button.nav-tab{letter-spacing:.04em}
}
@media (min-width:1960px){
  .nav-list>li>a,.nav-list>li>button.nav-tab{letter-spacing:.06em}
  .nav-cta .est-full{display:inline}
  .nav-cta .est-mid{display:none}
}
@media (max-width:559.98px){
  .logo img{width:124px}
  .hdr-actions{gap:0}
  .nav-cta .est-mid{display:none}
  .nav-cta .est-short{display:inline}
  .menu-toggle{padding:12px}
  .menu-toggle__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:389.98px){
  .logo img{width:104px}
}
@media (max-width:339.98px){
  .site-header{--hpad:16px}
  .logo img{width:92px}
  .menu-toggle{padding:12px 10px}
}
@media (max-width:1099.98px){.hero__panel{padding:56px 32px 56px var(--gut)}}
@media (max-width:899.98px){
  .hero{display:flex;flex-direction:column}
  .hero__media{position:relative;left:auto;height:230px;order:-1}
  .hero__panel{margin-top:calc(var(--r-l)*-1);border-top-right-radius:var(--r-s);border-top-left-radius:var(--r-l);padding:36px var(--gut) 40px}
  .hero h1{max-width:none}
  .hero__sub{font-size:var(--t-lead);margin-bottom:22px}
}
@media (max-width:767.98px){.facts{flex-direction:column;align-items:flex-start;gap:0;padding:8px 0}.facts li{border-left:0;border-top:1px solid var(--line);padding:11px 0;width:100%}.facts li:first-child{border-top:0}}
@media (prefers-reduced-motion:reduce){.svc,.svc:is(a:not(.cta-text),button,.card--link,[role=button]):hover{transition:none;transform:none}}
@media (max-width:767.98px){.list--cols.list--cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1099.98px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:559.98px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.est{padding:24px 20px}}
@media (max-width:899.98px){.cta-band__in{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:559.98px){.f-social{justify-content:center}}
@media (max-width:1099.98px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.f-brand{grid-column:1/-1}}
@media (max-width:559.98px){.footer-grid{grid-template-columns:minmax(0,1fr);padding-block:48px 32px}}
@media print{
  *,*::before,*::after{transition:none;animation:none}
  .has-reveal .rv,.rv{opacity:1;transform:none}
  body{padding-bottom:0;color:var(--ink);background:var(--white)}
  .site-header.site-header.site-header.site-header,.mbar.mbar.mbar.mbar,.cta-band.cta-band.cta-band.cta-band,.lb.lb.lb.lb,video:not(._):not(._):not(._),.carousel__dots.carousel__dots.carousel__dots.carousel__dots,.f-social.f-social.f-social.f-social,.skip.skip.skip.skip{display:none}
  .on-dark.on-dark.on-dark,.sec--dark.sec--dark.sec--dark,.sec--flake.sec--flake.sec--flake,.f-bar.f-bar.f-bar{background:var(--white);color:var(--ink)}
  .site-footer{border-top:1px solid var(--ink);background:var(--white);color:var(--ink);background-image:none;
  }
  .on-dark *:not(._):not(._):not(._),.site-footer *:not(._):not(._):not(._){color:var(--ink)}
  .btn{border:1px solid var(--ink);color:var(--ink);background:var(--white)}
  a[href^="tel:"]::after{content:""}
  .svc,.faq details,details,figure,.vcard,.step,.quote,.swatches>*,.list li{break-inside:avoid}
  img{max-width:100%;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:var(--dur-1)!important;animation-iteration-count:1!important;transition:none;scroll-behavior:auto!important}.svc:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:none!important}}
@media (max-width:1099.98px){
  .ct-grid{gap:30px}
  .ct-form{padding:48px 28px}
}
@media (max-width:899.98px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-form{order:-1}
  .ct-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  .ct-main{padding:30px 0}
  .ct-info{padding:25px}
  .ct-form{padding:28px 15px;
  }
  .ct-form h2{text-align:center;font-size:var(--t-h2);
  }
  .ct-rule--left{margin-left:auto}
  .ct-lede{text-align:center;font-size:var(--t-lead)}
  .ct-expect{padding-block:48px}
  .ct-cards.ct-cards{gap:20px}
  .ct-strip{padding-block:36px}
  .ct-band{padding:28px 22px;text-align:center}
  .ct-band__act{align-items:center}
  .ct-band .btn-row{justify-content:center}
  .fq-hero{padding-block:30px;
  }
  .fq-hero .btn-row{width:auto;flex-direction:column;justify-content:center;gap:10px;
  }
  .fq-band{padding-inline:10px}
  .fq-block__in{padding-block:30px 20px}
  .qa summary:not(._){font-size:var(--t-lead);padding:15px 16px}
  .qa__a{font-size:var(--t-lead);padding:16px}
}
@media (prefers-reduced-motion:reduce){.qa summary:not(._),.qa summary:not(._)::after{transition:none}.ab-acc__btn svg{transition:none}}

@media (max-width:1099.98px){
  .ab-install__in{grid-template-columns:1fr;gap:0}
  .ab-card{max-width:700px}
  .ab-circles{min-height:0;display:flex;flex-direction:column;align-items:flex-end;padding-top:0;margin-top:-40px;margin-right:0}
  .ab-circle{position:relative;inset:auto}
  .ab-circle--a{width:245px;height:245px;margin-right:6%}
  .ab-circle--b{width:204px;height:204px;margin-top:-50px;margin-right:calc(6% + 150px)}
}
@media (max-width:899.98px){
  .ab-intro__in{grid-template-columns:1fr;gap:24px}
  .ab-intro__rule{width:100%}
  .ab-founders__in{grid-template-columns:1fr;gap:32px}
  .ab-how__grid{grid-template-columns:1fr}
  .ab-how__photo{height:auto;aspect-ratio:1/1;margin:0 var(--gut) 32px;border-radius:var(--r-s)}
  .ab-how__acc{padding:0 var(--gut) 56px;margin-bottom:0}
  .ab-how{padding-block:56px 0}
}
@media (max-width:767.98px){
  .ab-hero .hero__panel{padding-block:30px 32px;
  }
  .ab-intro{padding-block:40px}
  .ab-intro__text{font-size:var(--t-lead)}
  .ab-founders{padding-block:48px}
  .ab-founders h2{font-size:var(--t-h2)}
  .ab-founders p{font-size:var(--t-lead)}
  .ab-statement{padding-block:44px}
  .ab-statement p{font-size:var(--t-h3);line-height:31.2px;
  }
  .ab-facts li{font-size:var(--t-lead);width:100%;text-align:center;padding:0;border:0;
  }
  .ab-card{padding:24px 22px;
  }
  .ab-card h2{font-size:var(--t-h2);margin-bottom:14px;
  }
  .ab-links{grid-template-columns:1fr;gap:0;
  }
  .ab-links a{padding:3px 0;font-size:var(--t-lead);
  }
  .ab-how__head h2{font-size:var(--t-h2);margin-bottom:28px}
  .ab-acc__btn{font-size:var(--t-lead);padding:12px 16px}
  .ab-circle--b{margin-right:calc(6% + 90px);margin-top:-80px;
  }
}
@media (prefers-reduced-motion:reduce){.acc__btn svg{transition:none}}
@media (max-width:767.98px){.acc__btn{font-size:var(--t-lead);min-height:50px;padding:10px 16px}.acc__panel>div{padding:0 16px}.acc__panel p{font-size:var(--t-body);padding-bottom:16px}.cfc-quotes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1099.98px){.afl-rev__grid{grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto}.fl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:899.98px){.fl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fl-guide__cols{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:767.98px){
  .fl-hero{padding:40px 0 60px}
  .fl-hero h1{margin-bottom:16px;font-size:var(--t-h1);
  }
  .fl-grid-band{padding:60px 0}
  .fl-grid-band .wrap{padding-inline:10px}
  .fl-pill{width:calc(50% - 5px);padding:0 10px}
  .fl-links{flex-direction:column;gap:14px}
}
@media (max-width:559.98px){
  .fl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .fl-name{font-size:var(--t-caption)}
  .fl-code{font-size:var(--t-eyebrow)}
  .fl-label{padding:3px 8px 4px}
}
@media (max-width:767.98px){
  .pp-title{padding:0 20px;
  }
  .pp-body{padding-block:60px}
  .pp-col{padding-inline:30px;font-size:var(--t-body);line-height:20.8px;
  }
  .pp-col p{margin-bottom:20px}
  .pp-sec{margin-top:45px;padding-top:40px;
  }
  .pp-sec h2{font-size:var(--t-h2);margin-bottom:20px}
  .pp-list li{padding-left:35px}
  .pp-list li::before{left:15px;width:13px;height:13px;top:5px;
  }
  .pp-cta{padding-block:30px;
  }
  .pp-cta__box{text-align:center;padding:15px 25px 30px;
  }
  .pp-cta__box .btn-row{justify-content:center}
}
@media (max-width:899.98px){.h-why{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:899.98px){.h-ba{grid-template-columns:minmax(0,1fr);gap:28px}.h-rev{grid-template-columns:minmax(0,1fr);gap:32px}.h-rev__q p{font-size:var(--t-lead)}}
@media (prefers-reduced-motion:reduce){.h-rev__q{transition:none}}
@media (max-width:767.98px){
  .h-crew{display:block;min-height:0;background:var(--white)}
  .h-crew>img{position:relative;height:260px}
  .h-crew .wrap{padding-block:0;margin-top:-40px;padding-bottom:var(--sec)}
  .h-crew__card{padding:26px 22px}
}
@media (max-width:899.98px){
  .h-area{grid-template-columns:minmax(0,1fr);gap:32px}
  .h-area__map{order:-1}
  .h-area .maine-map{height:240px}
  .areas-hero__map{order:-1;padding:24px var(--gut)}
  .areas-hero .hero__panel{margin-top:0}
}
@media (max-width:1099.98px){
  .sv-hero{display:flex;flex-direction:column;min-height:0;
  }
  .sv-hero .hero__media{position:relative;left:auto;height:300px;order:-1}
  .sv-hero .hero__panel{margin-top:calc(var(--r-l)*-1);border-top-right-radius:var(--r-s);border-top-left-radius:var(--r-l);padding:40px var(--gut) 36px}
  .sv-hero h1{max-width:none}
  .sv-quote{position:relative;top:auto;right:auto;transform:none;width:auto;margin:0 var(--gut) 40px}
}
@media (max-width:767.98px){.sv-hero .hero__media{height:150px;
  }.sv-quote h2{padding:12px 20px}.sv-quote__body{padding:16px 20px 20px;gap:12px;
  }}
@media (max-width:1099.98px){.sv-trust__in{grid-template-columns:minmax(0,1fr)}.sv-trust__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559.98px){.sv-trust__cards{gap:10px}.sv-trust__cards li{padding:20px 16px 22px}.sv-trust__cards p{font-size:var(--t-body)}.sv-links li{border-left:0;padding:4px 14px}}
@media (max-width:899.98px){.sv-cost{grid-template-columns:minmax(0,1fr)}}
@media (max-width:559.98px){.sv-table{font-size:var(--t-body)}.sv-table tbody th{width:40%}}
@media (max-width:767.98px){
  .sbc-body{padding-block:60px}
  .sbc-col{padding-inline:30px;font-size:var(--t-body);line-height:21px}
  .sbc-list li{padding-left:35px}
  .sbc-list li::before{left:15px;top:3px;width:13px;height:13px}
  .sbc-list a{display:inline-block;padding-block:12px;margin-block:-12px}
  .sbc-cta{padding-block:30px;
  }
  .sbc-cta__box{padding:30px 20px;text-align:center}
  .sbc-cta__box .btn-row{justify-content:center}
}
@media (max-width:1099.98px){
  .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:150px}
  .gal-vgrid{gap:24px}
  .gal-casegrid{gap:36px}
}
@media (max-width:899.98px){
  .gal-hero .hero__panel{padding-bottom:96px}
  .gal-intro{margin-top:-56px}
  .gal-casegrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  .gal-hero .hero__sub{font-size:var(--t-body);line-height:1.3}
  .gal-hero .hero__sub::after{height:3px;margin-top:18px}
  .gal-hero .hero__panel{padding-bottom:84px;padding:100px var(--gut) 0;
  }
  .gal-intro{grid-template-columns:minmax(0,1fr);margin-top:-48px;padding:18px;gap:20px}
  .gal-intro h2{font-size:var(--t-h2);
  }
  .gal-intro p{font-size:var(--t-body);line-height:1.3;
  }
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:110px;gap:16px 12px;
  }
  .gal-vgrid{grid-template-columns:minmax(0,1fr);gap:20px}
  .gal-pairs{grid-template-columns:minmax(0,1fr);gap:28px}
  .gal-viz p,.gal-rq p{font-size:var(--t-lead)}
}
@media (prefers-reduced-motion:reduce){.gal-tile img{transition:none}.gal-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:none}}
@media (max-width:767.98px){
  .mx-acc__btn{font-size:var(--t-lead)}
}
@media (prefers-reduced-motion:reduce){.mx-acc__chev{transition:none}}
@media (max-width:1099.98px){.sfc-form{margin-right:var(--gut)}}
@media (max-width:899.98px){
  .sfc-hero{min-height:0}
  .sfc-form{grid-column:auto;grid-row:auto;justify-self:stretch;max-width:none;margin:0 var(--gut) 40px;width:auto}
}
@media (max-width:559.98px){.sfc-form__head{padding-inline:18px}}
@media (max-width:1099.98px){.sfc-busy__grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:767.98px){.sfc-busy__copy p{font-size:var(--t-lead)}}
@media (min-width:1280.02px){.viz-stage{max-width:none;padding-inline:calc((100% - 1280px)/2);background:linear-gradient(90deg,var(--ink) calc(50% + 240px),var(--white) calc(50% + 240px))}}
@media (max-width:1099.98px){.viz-canvas{padding:0 24px;
  }}
@media (max-width:899.98px){
  .viz-stage{grid-template-columns:minmax(0,1fr);display:flex;flex-direction:column;height:auto;background:var(--white);
  }
  .viz-canvas{padding:0 0 16px;background:var(--ink);
  }
  .viz-grid{max-height:560px;flex:none;
  }
}
@media (max-width:767.98px){
  .viz-canvas{padding:16px}
  .viz-grid{grid-template-columns:repeat(3,minmax(0,100px));max-height:560px;
  }
}
@media (max-width:1024.98px){
  .hh h1{font-size:var(--t-h1)}
}
@media (max-width:767.98px){
  .hh{padding-block:36px 32px;padding-bottom:72px;
  }
  .hh h1{font-size:var(--t-h1);line-height:1.02}
  .hh__eyebrow{font-size:var(--t-eyebrow);letter-spacing:.12em;margin-bottom:14px}
  .hq{padding:20px 18px 22px}
  .hq h2{font-size:var(--t-h2)}
  .ab-hero{min-height:0}
  .ab-hero .hero__media{height:150px}
  .ab-hero h1{font-size:var(--t-h1);margin-bottom:.3em}
  .ab-rule{margin-bottom:16px}
  .ab-hero .hero__sub{font-size:var(--t-body);line-height:1.4}
  .ab-facts{flex-direction:column;align-items:center;gap:24px;padding:0}
  .ab-facts li+li{padding-top:24px;border-top:1px solid var(--line)}
  .ab-facts strong{display:block;margin:0 0 6px;font-size:var(--t-h2);line-height:1;vertical-align:baseline;text-wrap:balance}
  .ab-facts li:nth-child(2) strong{font-size:var(--t-h2)}
  .ab-install{padding-block:48px 28px}
  .ab-card__note{font-size:var(--t-body);margin-bottom:12px}
  .ab-circles{margin-top:-60px}
}
@media (max-width:1024.98px){.ar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ar-grid{grid-template-columns:minmax(0,1fr);gap:16px}.ar-grid li{padding:22px 18px 24px}}
@media (max-width:559.98px){
  [aria-labelledby="proj-h"]{padding-block:40px}
  [aria-labelledby="proj-h"] .sec__head{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){.acc__btn{transition:none}}
@media (max-width:767.98px){
  .fl-name{font-size:var(--t-caption)}
  .fl-long .fl-name{font-size:var(--t-caption);overflow-wrap:anywhere}
  .fl-label{padding:0}
}
@media (hover:hover) and (pointer:fine){.qa summary:hover{background:var(--ink);color:var(--white)}}
@media (max-width:767.98px){
  .fq-hero h1{margin-bottom:28px}
  .pp-title h1{font-size:var(--t-h1);letter-spacing:-.01em;word-spacing:.12em}
  .pp-col li{line-height:22.4px}
  .sv-ext-note{margin-top:24px;font-size:var(--t-body)}
  .sv-hero ~ .sec{padding-block:40px}
  .sv-hero ~ .sec h2{font-size:var(--t-h2)}
  .sv-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:24px}
  .sv-hero .hero__panel{padding:28px var(--gut) 24px}
  .sv-quote{margin-bottom:28px}
  .sv-quote__body>p:first-child{display:none}
  .h-svcsec.sec{padding-block:32px}
  .h-svcsec .sec__head{margin-bottom:12px}main .step h3{font-size:var(--t-h3)}main .step p{font-size:var(--t-lead)}
  .h-proc{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .h-proc .step__img{margin-bottom:12px}
  .h-proc .step__num{font-size:var(--t-h1);right:8px;bottom:4px}
  .h-proc .step h3{margin-bottom:6px}
  .h-proc-cta{margin-top:28px}
  #proc-h+.lead{display:none}
  .h-procsec .sec__head{margin-bottom:24px}
}
@media (min-width:1100px){
  .gal-vgrid{gap:60px}
}
@media (max-width:767.98px){
  .gal-hero.gal-hero{height:421px;min-height:421px}
  .gal-hero::after{background:var(--ink-alpha-68)}
  .gal-hero h1{font-size:var(--t-h1)}
  .gal-rule{margin:20px 0 26px}
  .gal-gridsec{padding-top:40px}
  .gal-filters{gap:8px;margin-bottom:32px}
  .gal-pill{padding:10px 14px}
  .gal-tile{height:122px}
  .gal-tile img{max-height:none}
  .gal-tile--cap img{max-height:none}
  .gal-vtab{font-size:var(--t-body);padding:10px 14px}
}
@media (max-width:1023.98px){
  .sfc-hero.sfc-hero{grid-template-columns:minmax(0,1fr);row-gap:28px;padding:32px var(--gut)}
  .sfc-hero .hero__panel{max-width:none}
  .sfc-hero .sfc-form{grid-column:1;grid-row:2;justify-self:stretch;width:auto}
}
@media (max-width:767.98px){
  
  .sfc-hero h1{font-size:var(--t-h1);letter-spacing:-.02em;word-spacing:.12em;font-variation-settings:"wdth" 68}
  .sfc-hero .hero__sub{font-size:var(--t-lead);line-height:26px}
  .sfc-busy h2{font-size:var(--t-h2)}
  main>.sec,body:has(.sfc-hero) .cta-band{padding-block:32px}
  .sec__head{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.viz-scene{transition:none}}
@media (max-width:767.98px){
  .viz-prev{display:none}
  body:has(.sfc-hero) .cta-band__in{gap:24px}
}
@media (max-width:559.98px){
  .h-tease{padding-block:40px}
  .h-tease .swatches li:nth-child(n+5){display:none}
  
  
  
}
@media (max-width:767.98px){main :is(p,li,dd,small,cite){font-size:var(--t-body)}:is(button:not(.nav-tab),.btn):not(._){min-height:40px}}

@media (max-width:1100px){.h-sys__grid{grid-template-columns:1fr;max-width:620px;margin-inline:auto}}
@media (max-width:559.98px){.photo-slider{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.photo-slider__slide,.photo-slider__dots button::before{transition:none}}
@media (max-width:559.98px){
  body .photo-slider{position:relative;aspect-ratio:4/3;height:auto;margin-bottom:52px}
  body .photo-slider__dots{top:calc(100% + 12px);bottom:auto}
  body .on-dark .photo-slider .photo-slider__dots button::before{background:var(--white)}
}
@media(max-width:767.98px){.carousel-engine--grid{--carousel-columns:1}.carousel-engine--grid:not(.carousel-engine--single)>*{flex-basis:calc(100% - 48px)}}
@media(min-width:768px){
  .service-photos__carousel{--carousel-peek:min(48px,var(--gut))}
  .service-photos__carousel>.carousel-viewport{width:calc(100% + var(--carousel-peek));max-width:none}
  .service-photos__carousel>.carousel-viewport:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){margin-right:calc(-1 * var(--carousel-peek));
  }
  .service-photos__track.carousel-engine{width:calc(100% - var(--carousel-peek))}
}
@media(max-width:1023.98px){
 .service-reference .sfc-busy__grid{grid-template-columns:1fr;gap:32px}
 .service-system{flex-basis:82%}
 .service-look-grid{grid-template-columns:1fr}
 .service-look{max-width:600px;width:100%;margin:auto}
 .service-look p{min-height:0}
 .service-inspiration{max-width:360px}
 .service-confidence__grid{grid-template-columns:1fr}
 .service-review-photo{height:360px}
 .service-space-grid,.service-trust-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767.98px){
 
 .service-reference .sfc-hero.sfc-hero{padding:40px 24px;min-height:0;gap:32px}
 .service-reference .sfc-hero .hero__media::after{background:linear-gradient(90deg,var(--ink-alpha-78),var(--ink-alpha-38))}
 .service-reference .sec__head{margin-bottom:32px}
 .service-system{flex-basis:92%}
 .service-card-copy{padding:24px}
 .service-card-copy p{min-height:0}
 .service-look,.service-warranty{padding:24px}
 .service-confidence__grid{gap:36px}
 .service-review p{font-size:var(--t-lead)}
 .service-space-grid{gap:16px}
 .service-space{aspect-ratio:3/5}
 .service-space span{padding:40px 12px 18px;font-size:var(--t-lead);flex-direction:column;align-items:start}
 .service-trust-grid{gap:32px 20px}
 .service-trust-grid>strong{font-size:var(--t-lead)}
}
@media(max-width:559.98px){
  .ct-form:has(.nee-full){padding:24px 16px}
  .nee-full.est{padding:20px 16px}
  .nee-full.hq{padding:18px 16px}
}
@media(max-width:639.98px){
  form:is(.est.est,.hq.hq,.home-quote.home-quote){padding:20px}
}
@media(max-width:767.98px) {
  main button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_),.arrow-blade:not(#_):not(#_) { width:56px; min-width:56px; height:40px; min-height:40px }
}
@media(prefers-reduced-motion:reduce) {
  main button.carousel-arrow.carousel-arrow.carousel-arrow,main button.carousel-arrow.carousel-arrow svg { transition:none}
  main button.carousel-arrow.carousel-arrow:hover:not(:disabled) svg { transform:none!important }
}
@media(max-width:767.98px){.h-crew>picture[data-responsive]>img{position:relative;height:260px}.hh__media video{display:none}}
@media(prefers-reduced-motion:reduce){.hh__media video{display:none}}
@media(max-width:1100px) and (min-width:768px){.shared-reviews .shared-reviews__track>*{flex-basis:calc((100% - 48px)/2)}}
@media(max-width:767.98px){.shared-reviews .shared-reviews__track>*{flex-basis:100%;max-width:100%}.shared-reviews .shared-reviews__rating{font-size:var(--t-body)}.shared-reviews .review-card__header{column-gap:10px}.shared-reviews .review-card__stars{margin-top:0}.shared-reviews .review-card__quote{margin-top:20px}body .gal-tile.photo-caption-host img{width:min(230px,100%,calc(122px * var(--caption-image-ratio,1.5)))}}
@media(max-width:559.98px){
  body .photo-caption.photo-caption{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    white-space:normal;max-height:62px;
  }
}
@media(max-width:767.98px){
 .craft-project .project-card{display:block}
 main button.hh__pause.hh__pause{width:40px;height:40px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){a.cta-text::before,a.cta-text::after{transition:none}}
@media(max-width:767.98px){#accessibility-panel{left:0;right:0;bottom:var(--floater-bottom);width:100%;max-width:100%;box-sizing:border-box;border-radius:var(--r-s) var(--r-s) 0 0}.floater-panel{left:0;right:0;bottom:var(--floater-bottom);width:100%;max-width:100%;box-sizing:border-box;border-radius:var(--r-s) var(--r-s) 0 0;padding:20px;
  }.a11y-reader main{width:calc(100% - 48px)}}
@media print{#floaters{display:none}}
@media(width < 1024px){#floaters .feedback-tab,#floaters #feedback-panel{display:none}}
@media(min-width:1024px){.hh:has(form.nee-full[data-step="3"]){height:auto;min-height:600px;padding:32px 0}}
@media(prefers-reduced-motion:reduce){.ico-plus::after{transition:none}}
@media(max-width:1279.98px){.nav-leaving .site-nav{height:calc(100dvh - var(--nav-top,100px));max-height:none;overflow-y:auto}}
@media(prefers-reduced-motion:reduce){body *{transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:var(--dur-fast)!important;transition-timing-function:var(--ease-standard)!important}.inquire__rows a:not(._){transform:none;transition-duration:var(--dur-fast);transition-delay:var(--dur-0)!important}}
@media(min-width:1024px){.inquire{display:none}}
@media print{.inquire{display:none}}
@media(max-width:1279.98px){.nav-tab>.ico-plus::after{transform:translate(-50%,-50%) rotate(var(--plus-angle,0deg))}.nav-list .menu .menu__applications a{color:var(--white);border-color:var(--white)}.nav-list .menu .menu__applications a:hover,.nav-list .menu .menu__applications a:focus-visible{background:var(--ink)}}
@media(min-width:1280px){.menu{position:fixed;left:max(12px,calc(100vw - 1132px));top:calc(var(--menu-header-height,100px) + 8px)}}
@media(max-width:767.98px){
 .proof-band{padding:18px 16px}
 .proof-band__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px;align-items:start}
 .proof-band__list>li{flex-direction:column;text-align:center;gap:6px;overflow-wrap:anywhere}
 .proof-band__list>.proof-band__rating{grid-column:span 3;align-self:center}
 .proof-band__list>li:nth-child(2){align-self:center}
 .proof-band__rating a{white-space:normal}
}
@media(hover:hover) and (pointer:fine){body .card--tile:hover>.caption--description{opacity:1;transform:none}}
@media (max-width:1279.98px){.cta--fill{width:100%}}
@media (min-width:1280px){.cta--bar{padding-inline:20px}}
@media (min-width:1960px){.cta--bar{padding-inline:28px}}
@media (max-width:559.98px){.cta--bar-primary{padding:12px 16px}}
@media (max-width:389.98px){.cta--bar-primary{padding:12px 12px}}
@media (max-width:339.98px){.cta--bar-primary{padding:12px 10px}}
@media (max-width:899.98px){.cta--stack{flex:1 1 100%}}
@media (max-width:767.98px){.cta--fixed{flex:0 0 auto;min-height:48px}.cta--stack{flex:1 1 100%}.cta--fill-tall{height:54px;max-width:none;width:100%}}
@media (max-width:559.98px){.cta--fill-compact{width:100%;padding-inline:12px}}
@media (max-width:767.98px){.cta--fill-capped{width:100%;max-width:300px}}
@media (min-width:768px){.cta--tall-fixed{height:54px}}
@media (max-width:767.98px){.cta--fill{width:100%}}
@media (max-width:639.98px){.cta--form-action{width:100%;flex:1 1 100%}}
.hh__note .ico-check{display:inline-block;vertical-align:-2px;color:var(--orange)}
.feedback-stars button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.feedback-stars button.is-on svg{fill:currentColor}

.ico-arr{display:inline-block;vertical-align:-.15em;flex:none}

/* Closing estimate band (owner, 2026-11-04): a full-bleed photo per page under a black-to-clear gradient (solid on the left, clear on the right), and the form on gray glass with its content flipped to light. The photo is set by js/site.js as the band nears the viewport, chosen so it never repeats a photo already on the page. */
body section#estimate.cta-band{position:relative;isolation:isolate;overflow:hidden;background-color:#0c0c0d}
body section#estimate.cta-band::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--cta-photo,none);background-size:cover;background-position:70% 50%;background-repeat:no-repeat;opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
body section#estimate.cta-band.has-photo::before{opacity:1}
body section#estimate.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0c0c0d 0%,#0c0c0d 28%,rgba(12,12,13,.86) 44%,rgba(12,12,13,.5) 62%,rgba(12,12,13,.16) 82%,rgba(12,12,13,0) 100%)}
@media (max-width:899.98px){
  body section#estimate.cta-band::before{background-position:50% 100%}
  body section#estimate.cta-band::after{background:linear-gradient(180deg,#0c0c0d 0%,#0c0c0d 44%,rgba(12,12,13,.84) 58%,rgba(12,12,13,.5) 78%,rgba(12,12,13,.32) 100%)}
}
body section#estimate.cta-band form.est{
  --qg-ink:#f5f3ef;--qg-mute:rgba(245,243,239,.74);--qg-line:rgba(255,255,255,.26);--qg-fill:rgba(255,255,255,.07);--qg-orange:#ff8a2a;
  background:rgba(38,38,40,.55);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09);
  color:var(--qg-ink);color-scheme:dark
}
body section#estimate.cta-band form.est :is(h3,legend,label,.field,.field span){color:var(--qg-ink)}
body section#estimate.cta-band form.est :is(.est__top,.est__top span,.est__count,.est__hint,.nee-phone-note,.nee-short,.nee-space-detail,p){color:var(--qg-mute)}
body section#estimate.cta-band form.est .est__top .est__fast{color:var(--qg-orange)}
body section#estimate.cta-band form.est .est__bar i{background:rgba(255,255,255,.16)}
body section#estimate.cta-band form.est .est__bar i.is-on{background:#f87000}
body section#estimate.cta-band form.est :is(input:not([type=radio]):not([type=checkbox]),select,textarea){background-color:var(--qg-fill);border-color:var(--qg-line);color:var(--qg-ink)}
body section#estimate.cta-band form.est :is(input,textarea)::placeholder{color:rgba(245,243,239,.56);opacity:1}
body section#estimate.cta-band form.est :is(input,select,textarea):focus{border-color:var(--qg-orange)}
body section#estimate.cta-band form.est select option{color:#141414;background:#fff}
body section#estimate.cta-band form.est input:-webkit-autofill{-webkit-text-fill-color:var(--qg-ink);box-shadow:0 0 0 1000px #2a2a2e inset;caret-color:var(--qg-ink)}
body section#estimate.cta-band form.est :is(input[type=radio],input[type=checkbox]){accent-color:#f87000}
body section#estimate.cta-band form.est .nee-town .field input{background:transparent;border-color:transparent;border-bottom-color:var(--qg-line);border-radius:0}
body section#estimate.cta-band form.est input[type=file]{color:var(--qg-mute)}
body section#estimate.cta-band form.est input[type=file]::file-selector-button{background:rgba(255,255,255,.12);color:var(--qg-ink);border:1px solid var(--qg-line);border-radius:999px;padding:6px 14px;margin-right:10px}
body section#estimate.cta-band form.est .cta-secondary.cta--on-paper.cta--on-paper:not(#_):not(#_){color:var(--qg-ink);border-color:rgba(255,255,255,.55);background:transparent}
body section#estimate.cta-band form.est .est__msg{background:rgba(255,255,255,.08);color:var(--qg-ink)}
body section#estimate.cta-band form.est a:not(.btn){color:var(--qg-ink)}

/* carousel-arrows-phone.css */
/* Carousel arrows, phone form (below 768px): one control row under every overlay carousel.
   The blades never sit on photos, cards, captions or dots. This file reserves the band under
   the track; the shared engine (positionArrows in js/site.js) seats the pair side by side in it,
   centred, 16px apart. Review carousels already use this row (arrows beside the dots).
   Nothing here applies from 768px up, so desktop is untouched. */
@media (max-width: 767.98px) {
  /* Service cards: 12px gap + one 40px blade. */
  .service-photos__carousel { padding-bottom: 52px; }
  /* Photo slider: the caption pill hangs up to 31px below the photo (two lines), then 12px, then the 40px blade row. */
  .photo-slider-shell { padding-bottom: 83px; }
}

/* motion.css */
/* Shared motion styles. Duration/easing tokens live in css/site.css.
   js/motion.js adds finite entrances and the existing navigation springs.
   See SHELL.md, Motion. */

/* Navigation keeps the established shell timing and spring response. */
.site-header .logo img{transform-origin:0 50%;transition:none}
.nav-list a:not(._),.nav-list button.nav-tab.nav-tab{transition:background-color var(--menu-fade) var(--ease-standard)}
.menu{transform-origin:0 0;transition:none}
.has-menu[data-leaving]>.menu{display:block;pointer-events:none;visibility:visible}
.menu__card img,.menu__lab .arr{transition:none}
.nav-list .menu .menu__card::after{transition:border-color var(--dur-fast) var(--ease-standard)}
.nav-tab .chev{transform-origin:50% 50%}
.mbar{z-index:90}

/* ---------- mobile menu: sheet is moved by motion.js; accordion rows use the grid-rows technique on spring.smooth ---------- */
.nav-leaving .site-nav{display:block}
@media (max-width:1279.98px){
  .site-nav .has-menu>.menu{display:grid;grid-template-rows:0fr;padding:0;visibility:hidden;overflow:hidden;transition:none}
  .site-nav .has-menu.open>.menu{display:grid;padding:0;overflow:hidden;transition:none;grid-template-rows:1fr;visibility:visible;transition-delay:var(--dur-0s),var(--dur-0s)}
  .site-nav .menu__list{min-height:0;overflow:hidden;opacity:0;}
  .site-nav .has-menu.open .menu__list{opacity:1;}
  .site-nav .menu__list>li:first-child{margin-top:14px}
  .site-nav .menu__list>li:last-child{margin-bottom:18px}
}

/* ---------- stars fill left to right on first view ---------- */
.has-reveal .stars.is-in svg{fill:var(--orange);transition:fill var(--dur-base) var(--ease-standard) calc(var(--k,0) * var(--stagger-tight))}
.has-reveal .stars.is-instant svg{transition:none}

/* ---------- stepped forms ---------- */
.hq,.est{position:relative}
.hq__bar i,.est__bar i{position:relative;overflow:hidden;background:var(--line)}
.hq__bar i.is-on,.est__bar i.is-on{background:var(--line)}
.hq__bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--orange);transform:scaleX(var(--fill,0));transform-origin:0 50%}
.est__bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:scaleX(var(--fill,0));transform-origin:0 50%}
.hq__bar i.is-on:not([style*="--fill"])::before,.est__bar i.is-on:not([style*="--fill"])::before{transform:scaleX(1)}
.hq .field input,.est .field input,.est .field select,.est .field textarea{transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.m-check{display:block;width:56px;height:56px;margin:0 0 14px;overflow:visible}
.m-check circle,.m-check path{stroke:var(--orange)}

/* Review visibility is CSS state; its entrance belongs to motion.js. */
.h-rev__q{visibility:hidden;}
.h-rev__q.is-on{visibility:visible;}

/* ---------- hover lifts only where a pointer can hover ---------- */
@media (hover:none){.menu__card:hover img,.svc:hover,.svc:hover img{transform:none}}

/* Shared motion contract. The resting document is always complete and visible.
   Reveal opacity is owned exclusively by the JS fade track. */
.rv,[data-motion="reveal"]{opacity:1}
.site-header{grid-template-rows:100px;transition:none}
.site-header.is-stuck{grid-template-rows:72px}
.site-header.is-stuck .logo img{transform:scale(.86)}
.btn.btn,.menu-toggle.menu-toggle{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),filter var(--dur-1) var(--ease-out)}
.btn:hover,.menu-toggle:hover{filter:brightness(.94)}
.on-dark .btn--dark:hover{filter:brightness(1.06)}
.menu-toggle:active,.btn:active{transition:filter var(--dur-1) var(--ease-out);transform:none}
main a:not(.btn):not(:has(img)):not(._),.link-under.link-under,.more.more{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;text-decoration:none;transition:background-size var(--dur-2) var(--ease-out)}
main a:not(.btn):not(:has(img)):hover,.link-under:hover,.more:hover{background-size:100% 1px}
.motion-tile.motion-tile{transition:box-shadow var(--dur-2) var(--ease-out)}
.motion-tile img{transition:none}
@media(hover:hover){
  .motion-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover{box-shadow:0 12px 24px var(--ink-alpha-16);transform:none}
  .motion-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:none}
}
.motion-acc-panel,m-acc{display:grid;grid-template-rows:0fr;transition:none}
m-in{display:block;min-height:0;overflow:hidden;opacity:1}
.motion-acc-panel>:is(.ab-acc__body,.mx-acc__panel){display:block;min-height:0;overflow:hidden;opacity:1;margin:0;padding:0}
.motion-acc-panel>:is(.ab-acc__body,.mx-acc__panel)>p{padding:18px 22px}
details[data-m-open]>m-acc,.motion-acc-panel.is-open{grid-template-rows:1fr}
main details>summary:not(._),main .acc__btn.acc__btn,main .ab-acc__btn.ab-acc__btn,main .mx-acc__btn.mx-acc__btn{border-left:4px solid var(--orange);min-height:48px;transition:background-color var(--dur-2) var(--ease-out)}
main details>summary:not(._):not(._):not(._),main .acc__btn.acc__btn.acc__btn.acc__btn,main .ab-acc__btn.ab-acc__btn.ab-acc__btn.ab-acc__btn,main .mx-acc__btn.mx-acc__btn.mx-acc__btn.mx-acc__btn{background:var(--surface);color:var(--ink)}
main details[data-m-open]>summary:not(#_):not(#_),main .ab-acc__btn[aria-expanded="true"]:not(#_):not(#_),main .mx-acc__btn[aria-expanded="true"]:not(#_):not(#_){background:var(--orange);color:var(--ink)}
main details>summary::after{content:"";flex:none;width:10px;height:10px;border:0;background:none;mask:none;-webkit-mask:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transition:none;display:none;transform:rotate(45deg);margin:0}
main details[data-m-open]>summary::after{transform:rotate(225deg);margin:0}
.acc__btn svg,.ab-acc__btn svg,.mx-acc__chev{transition:none}
.motion-counter{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,[data-motion="reveal"]{opacity:1!important;translate:none!important;animation:none!important}
  .motion-tile.motion-tile,.motion-tile img:not(._),.site-header.site-header,.site-header .logo img:not(._){transition:none}
  .motion-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover,.motion-tile:is(a:not(.cta-text),button,.card--link,[role=button]):hover img{transform:none!important}
  m-acc,.motion-acc-panel,.acc__btn svg,.ab-acc__btn svg,.mx-acc__chev,main details>summary::after,.site-nav .has-menu>.menu,.site-nav .has-menu.open>.menu{transition:none}
  .menu,.site-nav,.carousel-engine,.est__step,.hq__pane{transition:none!important}
}

/* Spring values write these properties each frame, including during reversal. */
.menu__list>li,.has-menu.open .menu__list>li{opacity:1;transform:none;transition:none}
.site-nav,.carousel-engine,.est__step,.hq__pane{transition:none}


/* floaters.css */
/* Floaters: the Inquire pill and the accessibility button. js/floaters.js decides, at each scroll rest,
   whether each one is shown where it sits, shown a little higher in a clear gap, or tucked below the edge.
   This file owns their ground, their tuck motion and the footer's clearance. */

/* The legacy inline position/visibility written by site.js is superseded by the rules below. */
#floaters .accessibility-button{bottom:calc(16px + env(safe-area-inset-bottom))!important;visibility:visible!important}

/* Ground: a white ring around the ink pill. On ink bands the ring is what the eye sees, on paper the ink fill is. */
.inquire{box-shadow:0 0 0 2px var(--white),0 8px 24px var(--scrim-alpha-35)}

/* Tuck and shift. The independent translate property composes with any transform and never moves layout. */
.inquire,#floaters .accessibility-button{
  translate:0 calc(var(--fl-dy,0px) + var(--fl-tuck,0) * (100% + 48px + env(safe-area-inset-bottom)));
  transition:translate var(--dur-slow) var(--ease-standard)
}
.inquire[data-fl="tucked"],#floaters .accessibility-button[data-fl="tucked"]{pointer-events:none}
.inquire[data-fl="moving"],#floaters .accessibility-button[data-fl="moving"]{transition-duration:var(--dur-fast);transition-timing-function:var(--ease-exit)}
@media(prefers-reduced-motion:reduce){.inquire,#floaters .accessibility-button{transition:none}}

/* The last footer links clear the floaters at the very end of the page. */
@media(width < 1024px){.site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}

/* benefit-icons.css */
/* Proof-band benefit icons: two-tone line icons (orange primary, white secondary) with an ambient loop.
   Ported from notes/benefits-strip.html. Inline SVG + CSS keyframes only; js/benefit-icons.js adds .bi-live to the band
   while it is in view and the tab is visible. Without .bi-live (off screen, hidden tab, reduced motion, no JS) every
   icon sits on its finished, fully drawn frame. The row itself never moves; only transform, opacity and
   stroke-dashoffset change. Idle loop, not a hover effect: the icons are not interactive and have no hover state. */

/* Sizing and strokes */
.proof-band__list>li>svg.bi{width:44px;height:44px;flex:none;overflow:visible;color:var(--orange)}
.proof-band__list>li>svg.bi *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bi.b100{stroke-width:4.4}
.bi.b48{stroke-width:2.2;--u:.48}
.bi.b100{--u:1}
.bi .p{stroke:var(--orange,#f87000)}
.bi .s{stroke:#fff}
.bi .d,.bi .d2{stroke-dasharray:1;stroke-dashoffset:0}
.bi *{transform-box:fill-box;transform-origin:center}
.bi .m-hand{transform-box:view-box;transform-origin:58px 50px}
.bi .m-sweep{transform-box:view-box;transform-origin:62px 14px}
.bi .m-door{transform-origin:0 50%}
.bi .m-speed{transform-origin:100% 50%}
@media (max-width:640px){
  .proof-band__list>li>svg.bi{width:36px;height:36px}
}

/* Per-icon cycle length and starting phase (negative delay), so icons start on the resting frame and fire out of step. */
.proof-band__list>li>svg.bi{--d:5.4s;--ph:.7;--dl:calc(var(--d) * var(--ph) * -1)}
.proof-band__list>li:nth-child(2)>svg.bi{--d:5.2s;--ph:.8}
.proof-band__list>li:nth-child(3)>svg.bi{--d:5.8s;--ph:.56}
.proof-band__list>li:nth-child(4)>svg.bi{--d:5.4s;--ph:.7}
.proof-band__list>li:nth-child(5)>svg.bi{--d:6s;--ph:.62}
.proof-band__list>li:nth-child(6)>svg.bi{--d:5.6s;--ph:.76}

/* Loop. Timeline per cycle: 0-14% draw in, 20-50% the icon's own motion, rest to 92%, fade 92-96%. */
.bi-live svg.bi{animation:bi-fade var(--d) linear var(--dl) infinite}
.bi-live svg.bi .d{animation:bi-draw var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .d2{animation:bi-draw2 var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-pulse{animation:bi-pulse var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-sweep{animation:bi-sweep var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-spin{animation:bi-spin var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-hand{animation:bi-tick var(--d) cubic-bezier(.5,0,.2,1) var(--dl) infinite}
.bi-live svg.bi .m-rise{animation:bi-rise var(--d) ease-out var(--dl) infinite}
.bi-live svg.bi .m-lift{animation:bi-lift var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-wag{animation:bi-wag var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-tilt{animation:bi-tilt var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-pop{animation:bi-pop var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-shrink{animation:bi-shrink var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-door{animation:bi-door var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-sway{animation:bi-sway var(--d) ease-in-out calc(var(--dl) + var(--o,0s)) infinite}
.bi-live svg.bi .m-in{animation:bi-in var(--d) ease-out calc(var(--dl) + var(--o,0s)) infinite}
.bi-live svg.bi .m-speed{animation:bi-speed var(--d) ease-out calc(var(--dl) + var(--o,0s)) infinite}

@keyframes bi-fade{0%{opacity:0}3%{opacity:1}92%{opacity:1}96%,100%{opacity:0}}
@keyframes bi-draw{0%{stroke-dashoffset:1}14%,100%{stroke-dashoffset:0}}
@keyframes bi-draw2{0%,6%{stroke-dashoffset:1}22%,100%{stroke-dashoffset:0}}
@keyframes bi-pulse{0%,20%{transform:scale(1)}28%{transform:scale(1.07)}36%,100%{transform:scale(1)}}
@keyframes bi-sweep{0%,20%{transform:rotate(0)}28%{transform:rotate(-14deg)}38%{transform:rotate(10deg)}46%{transform:rotate(-6deg)}52%,100%{transform:rotate(0)}}
@keyframes bi-spin{0%,20%{transform:rotate(0)}36%{transform:rotate(18deg)}50%,100%{transform:rotate(0)}}
@keyframes bi-tick{0%,20%{transform:rotate(0)}46%,100%{transform:rotate(360deg)}}
@keyframes bi-rise{0%{transform:translateY(calc(var(--u) * 10px))}22%,100%{transform:translateY(0)}}
@keyframes bi-lift{0%,20%{transform:translateY(0)}34%{transform:translateY(calc(var(--u) * -6px))}48%,100%{transform:translateY(0)}}
@keyframes bi-wag{0%,20%{transform:rotate(0)}28%{transform:rotate(-10deg)}38%{transform:rotate(10deg)}48%,100%{transform:rotate(0)}}
@keyframes bi-tilt{0%,20%{transform:rotate(0)}34%{transform:rotate(-9deg)}48%,100%{transform:rotate(0)}}
@keyframes bi-pop{0%,20%{transform:scale(1)}32%{transform:scale(1.18)}44%,100%{transform:scale(1)}}
@keyframes bi-shrink{0%,20%{transform:scale(1)}34%{transform:scale(.86)}48%,100%{transform:scale(1)}}
@keyframes bi-door{0%,20%{transform:scaleX(1)}34%{transform:scaleX(.3)}50%,100%{transform:scaleX(1)}}
@keyframes bi-sway{0%,20%{transform:translateX(0)}30%{transform:translateX(calc(var(--u) * -4px))}42%{transform:translateX(calc(var(--u) * 4px))}52%,100%{transform:translateX(0)}}
@keyframes bi-in{0%,12%{transform:scale(0);opacity:0}30%,100%{transform:scale(1);opacity:1}}
@keyframes bi-speed{0%,12%{transform:translateX(calc(var(--u) * 14px));opacity:0}30%,100%{transform:translateX(0);opacity:1}}

/* Reduced motion (system setting or the site's own Reduce motion option): finished frame, no loop. */
@media (prefers-reduced-motion:reduce){
  .bi-live svg.bi,.bi-live svg.bi *{animation:none!important}
}
.a11y-motion .bi-live svg.bi,.a11y-motion .bi-live svg.bi *{animation:none!important}
.bi--uv .m-wag{transform-box:view-box;transform-origin:50px 54px}

/* Band layout around the larger icons. Desktop keeps one row; tablet reuses the phone grid so 44px icons never starve the text. */
@media(min-width:1200px){
  .proof-band{padding-block:18px}
  .proof-band .proof-band__list{grid-template-columns:1.2fr repeat(5,minmax(0,1fr));gap:16px}
  .proof-band .proof-band__list:has(.bi--quick){grid-template-columns:1.1fr repeat(4,minmax(0,1fr)) 1.7fr}
}
@media(min-width:768px) and (max-width:1199.98px){
  .proof-band .proof-band__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px;align-items:start}
  .proof-band .proof-band__list>li{flex-direction:column;text-align:center;gap:6px;overflow-wrap:anywhere}
  .proof-band .proof-band__list>.proof-band__rating{grid-column:span 3;align-self:center}
  .proof-band .proof-band__list>li:nth-child(2){align-self:center}
  .proof-band .proof-band__rating a{white-space:normal}
}

/* headings.css */
/* Heading system (SHELL.md "Heading system"). Loaded last on every page.
   ONE section-heading treatment: Archivo caps at --t-h2, centred, with ONE 52x3px
   accent rule under it. Documented exception: a heading in a split or document
   layout (text column beside a photo/video/form, legal sections, CTA boxes) is
   left-aligned and its rule is left-aligned with it; nothing else differs.
   ONE card-H3 treatment: Archivo caps at --t-h3. Cards whose title sits on or
   under a photo keep the --t-card-title caption role (sentence case). */

/* ---------- H1 word spaces: condensed face + negative tracking must never fuse words ---------- */
body h1{word-spacing:.12em}
body .hh h1{letter-spacing:-.01em;word-spacing:.16em}
@media (max-width:767.98px){
  body .hh h1{letter-spacing:-.012em;word-spacing:.18em}
}

/* ---------- section H2 ---------- */
/* Not section headings: form titles, card titles that happen to be H2, hidden text. */
body main h2:not(:where(.sr-only,.hq h2,.hq__done h2,form h2,.sv-quote h2,.project-card h2,.ct-h-sm)):not(.x){
  font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;
  text-transform:uppercase;letter-spacing:-.015em;word-spacing:.05em;
  text-align:center;margin:0 0 16px;
}
body main h2:not(:where(.sr-only,.hq h2,.hq__done h2,form h2,.sv-quote h2,.project-card h2,.ct-h-sm)):not(.x)::after{
  content:"";display:block;width:52px;height:3px;background:var(--orange);margin:16px auto 0;
}
/* Headings that already carry their own sibling rule keep that one (never two). */
body main h2:has(+ :is(.h-sys__rule,.ct-rule))::after{content:none}
body main :is(.h-sys__rule,.ct-rule){width:52px;height:3px;background:var(--orange);border:0;border-radius:0}
/* The old rule that stood ABOVE a split heading is replaced by the rule under it. */
.sfc-busy__rule{display:none}

/* Grey/burnt heading colours drift from the rest; headings are ink on light grounds. */
body main :is(h2.ab-burnt,.gal-intro h2){color:var(--ink)}

/* ---------- the exception: split / document / CTA layouts ---------- */
body main :is(.sfc-busy__copy,.h-crew__card,.ab-founders,.ab-card,.gal-intro__text,.ct-form,.ct-band__copy,.pp-sec,.pp-cta__box,.fv-cta,.recent-project__layout,.h-why,.h-area,.sv-trust,.gal-viz,.nf-col) h2:not(.x){
  text-align:left;
}
body main :is(.sfc-busy__copy,.h-crew__card,.ab-founders,.ab-card,.gal-intro__text,.ct-form,.ct-band__copy,.pp-sec,.pp-cta__box,.fv-cta,.recent-project__layout,.h-why,.h-area,.sv-trust,.gal-viz,.nf-col) h2:not(.x)::after{
  margin-left:0;margin-right:auto;
}

/* stacked section heads are always centred, lead included */
body main .sec__head{margin-inline:auto;text-align:center;max-width:760px}
body main .sec__head>p{margin-inline:auto}

/* ---------- card H3 ---------- */
body main h3:not(:where(.est__step h3,.home-quote h3,.nee-full h3,.quote-success h3,.service-photo h3,.service-card-copy h3,.project-card h3,.card-label h3,.menu__lab h3,.caption h3)):not(.x){
  font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;
  text-transform:uppercase;letter-spacing:-.005em;word-spacing:.06em;
}
/* accordion titles use the heading face, not a wider one nobody else uses */
body main :is(.acc__btn,.ab-acc__btn,.mx-acc__btn){font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:-.005em}

/* ---------- /services form bar ---------- */
body main .sv-quote h2{letter-spacing:-.015em}

/* ---------- a counter inside a link keeps the spaces around it ---------- */
body main a:is(.prose-link,.cta-text,.link-under):has(> .motion-counter){display:inline!important;min-height:0}

/* ---------- /about: card + circle pair ---------- */
/* The pair sits whole inside its own column (never tucked under the card), vertically centred on the card. */
body main .ab-install__in{align-items:center}
body main .ab-install .ab-card{align-self:center}
body main .ab-circles{position:relative;width:100%;max-width:500px;height:440px;min-height:0;margin-inline:auto}
body main .ab-circle--a{width:312px;height:312px;top:0;right:auto;left:176px;margin:0}
body main .ab-circle--b{width:269px;height:269px;top:171px;left:24px;right:auto;margin:0}
@media (max-width:1023.98px){
  body main .ab-install__in{grid-template-columns:minmax(0,1fr)}
  body main .ab-circles{height:auto;min-height:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:28px;margin-right:auto;padding-top:0;max-width:none}
  body main .ab-circle--a,body main .ab-circle--b{position:relative;left:auto;top:auto;flex:none;width:min(46vw,230px);height:min(46vw,230px);aspect-ratio:1}
  body main .ab-circle--b{margin:60px 0 0 -10%}
  body main .ab-circle--a{margin:0}
}
/* ---------- /about accordion: open panel text lines up with its title ---------- */
/* the title button carries a 4px orange rule + 22px padding, so panel text starts at 26px */
body main .motion-acc-panel>:is(.ab-acc__body,.mx-acc__panel)>p{padding-left:26px}
body main .faq details>div,body main .faq details>m-acc>m-in>div{padding-left:26px}
body main .ab-card .ab-card__note{margin-bottom:0}

/* ---------- /projects ---------- */
body main .projects-guide>.eyebrow{text-align:center}
body main .projects-guide>h3{margin:36px 0 12px}
/* "Project details" belongs to its card: transparent, hairline box, the card's own text colour. */
body main .project-copy details>summary{display:flex;align-items:center;min-height:48px;padding:0 54px 0 16px;border:1px solid rgba(20,20,20,.3);border-left:3px solid var(--orange);border-radius:0 var(--r-s) var(--r-s) 0;font:700 var(--t-body)/1.3 var(--font-body);color:inherit}
body main .project-copy details:not([data-m-open])>summary{background:transparent!important;color:inherit!important}
body main .on-dark .project-copy details>summary{border-color:rgba(255,255,255,.35);border-left-color:var(--orange)}
body main .project-copy details>summary>.ico-plus{right:16px}

/* ---------- /faq: group headings are ordinary section headings, clear of the hero's torn edge ---------- */
body main .fq-band{background:var(--white);border-bottom:0;padding:64px var(--gut) 8px}
body main .fq-band h2{margin-bottom:0}

/* ---------- legal CTA box: its heading is a real H2 ---------- */
body main .pp-cta__box .pp-cta__h{color:var(--white);margin:0 0 20px}

/* ---------- card-title role (title on or under a photo): one face, sentence case, caption size ---------- */
body main :is(.service-photo,.card-label,.service-card-copy,.caption,.project-card) h3{
  font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:none;letter-spacing:0;
  font-size:var(--t-card-title)!important;font-weight:800!important;line-height:1.2!important;
}

/* contact: the left rule stays left on phones too (its heading stays left) */
body main .ct-rule.ct-rule--left{margin-left:0;margin-right:auto}

/* ---------- the shared estimate band (every page, outside <main>): split layout, same treatment, left ---------- */
body .cta-band__copy h2{font-family:var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:uppercase;letter-spacing:-.015em;word-spacing:.05em;text-align:left;margin:0 0 16px}
body .cta-band__copy h2::after{content:"";display:block;width:52px;height:3px;background:var(--orange);margin:16px 0 0}

/* ---------- a centred heading's lead-in paragraph is centred with it (never left under a centred heading) ---------- */
body main h2:not(:where(.sr-only,.hq h2,.hq__done h2,form h2,.sv-quote h2,.project-card h2,.ct-h-sm)):not(:where(.sfc-busy__copy *,.h-crew__card *,.ab-founders *,.ab-card *,.gal-intro__text *,.ct-form *,.ct-band__copy *,.pp-sec *,.pp-cta__box *,.fv-cta *,.recent-project__layout *,.h-why *,.h-area *,.sv-trust *,.gal-viz *,.nf-col *)) + p{
  text-align:center;max-width:760px;margin-inline:auto;
}
body main .projects-guide>*{text-align:center}
body main .projects-guide>p{max-width:800px;margin-inline:auto}

/* media-and-swatches.css */
/* Service pages: the Colors & finishes card, captions that never sit on media controls, and the
   purpose-built system diagrams with real-text labels.
   Loaded after css/site.css; the selectors carry enough weight to win without !important
   (one exception is marked). */

/* ---- 1. Colors & finishes: six flake blends in a 3 x 2 grid of true circles ---- */
.service-look .service-look__swatches{
  list-style:none;margin:20px 0 28px;padding:0;width:100%;max-width:340px;height:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
  gap:20px 14px;justify-content:center;align-content:start;contain:none;overflow:visible;
}
.service-look__swatches .swatch{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;margin:0}
.service-look__swatches .swatch__disc{flex:none;position:relative;display:block;width:100%;max-width:96px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--surface)}
.service-look__swatches .swatch__disc picture{display:contents}
/* The source tiles carry a thin frame and a printed blend name along the bottom ~11%.
   The image is scaled to 116.3% and shifted so the disc shows only x 7-93%, y 1.5-87.5% of the
   tile: frame and printed name both fall outside the circle. */
.service-look__swatches .swatch__disc img{
  position:absolute;display:block;left:-8.14%;top:-1.74%;width:116.3%;height:116.3%;max-width:none;
  object-fit:cover;object-position:50% 50%;border-radius:0;
}
.service-look__swatches .swatch__name{
  display:block;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);text-align:center;text-wrap:balance;
}
/* the card is as tall as its content: the button sits at the foot, the photo card beside it fills the row */
.service-look .btn{margin-top:auto}
.service-look p{min-height:0}
.service-look .service-inspiration{flex:1 1 auto;grid-auto-rows:minmax(92px,1fr);align-items:stretch}
.service-look .service-inspiration .craft-photo{min-height:0}
.service-look .service-inspiration img{height:100%}
@media(max-width:767.98px){
  .service-look .service-look__swatches{max-width:300px;gap:18px 12px;margin:16px 0 24px}
}

/* ---- 2. Captions: half-overlap pill on photos only; video and before/after keep the pill clear ---- */
/* A video's play, volume and seek controls run along its bottom edge, and a before/after slider's
   handle and drag area are the picture itself. The caption pill goes under the media instead. */
body .photo-caption-host:has(>video,>.compare)>.photo-caption.photo-caption{
  position:static;inset:auto;transform:none;width:fit-content;max-width:100%;
  margin:14px auto 0;white-space:normal;
}
/* the runtime reserved half a pill of margin for the overlap; a pill below the media needs none (inline style, hence !important) */
body .photo-caption-host:has(>video,>.compare){margin-bottom:0!important}
/* a figure's default 40px side margins squeezed the video to two thirds of the column */
.photo-caption-host:has(>video){margin-inline:0;width:100%}
.photo-caption-host>video{width:100%;height:auto}
.recent-project .photo-caption-host>video{aspect-ratio:9/16}

/* ---- 3. System diagrams: labels as real text, art cropped to the stack ---- */
.service-system{container-type:inline-size}
.service-diagram{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:20px 16px 18px}
.service-diagram>svg{width:100%;max-width:200px;margin-inline:auto;height:auto;aspect-ratio:252/370}
.service-diagram>svg text{display:none}
/* stacked: the leader lines point at labels that sit below, so the list bullets stand in for them */
.service-diagram>svg path[stroke="#c9c9c4"][fill="none"],.service-diagram>svg circle[r="2.5"]{display:none}
.service-diagram .h-sys__lbl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.service-diagram .h-sys__lbl li{display:block;position:relative;padding-left:16px;font-size:var(--t-button);line-height:1.3;color:var(--ink)}
.service-diagram .h-sys__lbl li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.service-diagram .h-sys__lname{display:block;font-weight:700;font-size:var(--t-body);line-height:1.3;color:var(--ink)}
.service-diagram .h-sys__ldesc{display:block;font-weight:500;font-size:var(--t-button);line-height:1.35;color:var(--ink-soft)}
/* wide enough: labels beside the art, each one level with its leader line */
@container (min-width:340px){
  .service-diagram{grid-template-columns:minmax(0,47%) minmax(0,1fr);gap:0 4px;align-items:stretch;padding:20px 12px 18px 8px}
  .service-diagram>svg{max-width:none;margin:0;align-self:start}
  .service-diagram>svg path[stroke="#c9c9c4"][fill="none"],.service-diagram>svg circle[r="2.5"]{display:inline}
  .service-diagram .h-sys__lbl{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding-block:7% 14%}
  .service-diagram .h-sys__lbl li{padding-left:0}
  .service-diagram .h-sys__lbl li::before{display:none}
  .service-diagram .h-sys__lname{font-size:var(--t-caption)}
  .service-diagram .h-sys__ldesc{font-size:var(--t-eyebrow);line-height:1.3}
}

/* ---- 4. System card copy: no reserved blank band; the button rides the foot of the card ---- */
.service-system{display:flex;flex-direction:column}
.service-system .service-card-copy{flex:1 1 auto}
.service-system .service-card-copy p{min-height:0}
.service-system .service-card-copy .btn{margin-top:auto}

/* layout-fixes.css */
/* Layout fixes, phone audit batch F (2026-11-03). Linked last in every page <head>.
   Items: services fact cards, proof-band phone grid, areas region list and map labels, contact hero/file picker/spacing,
   footer link groups, small-business-connection list, related-service link cards.
   Tokens only (SHELL.md): spacing 8/12/16/24/32/40, radii --r-s and --pill, palette ink/paper/orange. */

/* ---------- 1. /services fact cards ---------- */
.sv-trust__in{gap:24px 48px}
.sv-trust__cards{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.sv-trust__cards li{padding:20px 20px 22px;border:1px solid var(--paper-alpha-14)}
.sv-trust__cards h3{margin:0 0 8px}
@media (min-width:560px){
  .sv-trust__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .sv-trust__in{grid-template-columns:minmax(0,341px) minmax(0,1fr)}
  .sv-trust__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

/* ---------- 1b. proof band on phones: two columns, rating first and full width ---------- */
@media (max-width:767.98px){
  .proof-band__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;align-items:start}
  .proof-band__list>.proof-band__rating{grid-column:1/-1;align-self:center}
  .proof-band__list>li:nth-child(2){align-self:start}
  .proof-band__list>li:last-child:nth-child(even){grid-column:1/-1}
}

/* ---------- 2. /areas ---------- */
.ar-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin:24px 0 32px}
.ar-grid li{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px}
.ar-grid li::before{content:"";flex:none;width:10px;height:10px;border-radius:var(--pill);background:var(--orange)}
.ar-grid h3{margin:0;font-size:var(--t-body);line-height:1.2;letter-spacing:.02em}
@media (min-width:560px){.ar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:1025px){.ar-grid{gap:16px}}
/* labels stay 13px on screen at any map size (site.js sets --map-label-size so scaled text never drops under 12px) */
.maine-map__mark text{font-size:var(--map-label-size,13px)}
/* an inline link mid-paragraph keeps the paragraph's own line height */
#main .ar-links p a{display:inline;min-height:0;min-width:0;vertical-align:baseline}
.ar-links p{line-height:1.55}

/* ---------- 3. /contact ---------- */
.ct-title{min-height:0}
.ct-title .wrap{padding-block:32px 36px;text-align:center}
.ct-title h1{margin:0 0 10px}
.ct-title p{margin:0 auto;max-width:34em;font-size:var(--t-lead);line-height:1.4;color:var(--on-dark-soft)}
.ct-title__act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 20px;margin-top:16px}
.ct-title__act .btn{min-height:48px;padding:10px 24px}
.ct-title__act a.cta-text{min-height:44px}
.ct-main{padding-block:32px}
.craft-contact .ct-form,.craft-contact .ct-info{padding:32px 24px}
.ct-info{gap:0}
.ct-start{margin-top:24px}
.ct-expect{padding-block:48px 40px}
.ct-expect .sec__head{margin-bottom:24px}
.ct-strip{padding-block:32px 48px}
@media (min-width:768px){
  .ct-title .wrap{padding-block:40px 44px}
  .ct-main{padding-block:56px}
  .craft-contact .ct-form,.craft-contact .ct-info{padding:48px 32px}
  .ct-expect{padding-block:64px 48px}
  .ct-strip{padding-block:40px 64px}
}
/* file picker: a dashed drop area with one orange pill button; the native input stays the control */
.cform input[type=file]{box-sizing:border-box;width:100%;min-height:72px;padding:12px;border:2px dashed var(--ink-alpha-40);border-radius:var(--r-s);background:var(--surface);color:var(--ink-soft);font:500 var(--t-body)/1.3 var(--font-body);cursor:pointer}
.cform input[type=file]:hover{border-color:var(--ink)}
.cform input[type=file]::file-selector-button{height:48px;margin:0 14px 0 0;padding:0 24px;border:2px solid var(--orange);border-radius:var(--pill);background:var(--orange);color:var(--on-orange);font:700 var(--t-button)/1 var(--font-body);cursor:pointer}
.cform input[type=file]::file-selector-button:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- 4. footer ---------- */
.f-nap a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
@media (max-width:559.98px){
  .footer-grid{gap:20px 12px;padding-block:36px 24px}
  .f-brand img{width:200px;margin-bottom:12px}
  .f-brand p{margin:0 0 8px}
  .f-badges{margin:8px 0 0;gap:0 16px}
  .f-rating{flex-basis:auto}
  .f-social{margin:8px 0 8px;gap:8px}
  .f-nap{line-height:1.5;margin-bottom:12px}
  .f-col{min-width:0}
  .f-h{margin:0 0 4px}
  .f-col ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .f-col a{display:flex;align-items:center;min-height:40px;padding:4px 0;line-height:1.25}
  .f-bar__in{padding-block:8px;gap:0 24px}
  .f-bar__legal a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}

/* ---------- 5. /small-business-connection ---------- */
.sbc-col{padding-inline:var(--gut)}
.sbc-col p{margin:0 0 16px}
.sbc-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px;margin-top:8px}
.sbc-list li{display:flex;margin:0;padding:0;border-top:1px solid var(--ink-alpha-14)}
.sbc-list li:last-child{border-bottom:1px solid var(--ink-alpha-14)}
.sbc-list li::before{position:static;flex:none;align-self:flex-start;width:8px;height:8px;margin:20px 14px 0 0;border:0;background:var(--orange)}
.sbc-list a{display:flex;align-items:center;min-height:48px;padding:10px 0;margin:0;font-size:var(--t-body);line-height:1.35}
@media (min-width:768px){
  .sbc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sbc-list li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--ink-alpha-14)}
}
.sbc-body{padding-block:48px 32px}
.sbc-cta{padding-block:0 56px}
@media (min-width:768px){.sbc-body{padding-block:64px 40px}.sbc-cta{padding-block:0 80px}}

/* ---------- 6. related-service link cards ---------- */
.related-cards{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:24px 0 0;padding:0}
@media (min-width:560px){.related-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.related-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.related-cards li{display:block;margin:0;padding:0}
body main .related-cards a.related-card{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;max-width:none;margin:0;padding:12px 16px;border:1px solid var(--ink-alpha-20);border-radius:var(--r-s);background:var(--white);color:var(--ink);font:700 var(--t-body)/1.3 var(--font-body);letter-spacing:normal;text-transform:none;text-decoration:none;vertical-align:baseline;transition:border-color var(--dur-1) var(--ease-standard),background-color var(--dur-1) var(--ease-standard)}
.related-card__t{display:grid;gap:2px;min-width:0}
.related-card__d{font-weight:500;font-size:var(--t-caption);line-height:1.35;color:var(--ink-soft)}
body main .related-cards a.related-card::after{content:'';display:inline-block;width:1em;height:1em;vertical-align:-.12em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;flex:none;color:var(--orange);font-weight:800}
body main .related-cards a.related-card:hover{border-color:var(--ink);background:var(--surface)}
body main .on-dark .related-cards a.related-card{border-color:var(--paper-alpha-20);background:var(--paper-alpha-6);color:var(--white)}
body main .on-dark .related-cards a.related-card .related-card__d{color:var(--on-dark-soft)}
body main .on-dark .related-cards a.related-card:hover{border-color:var(--white);background:var(--paper-alpha-12)}

/* contact: the projects/flakes line sits just under the hero (lead 2026-11-03) */
.ct-browse{padding-block:12px 0}
.ct-browse p{margin:0;text-align:center}

/* desktop dropdown: three-across cards (owner 2026-11-03: 540px photos "way too massive"; 2026-11-04: blocks and text +20% from 780px/16px) */
@media (min-width:1280px){
  .nav-list .has-menu>.menu{width:936px;padding:14px;border-radius:16px}
  .nav-list .menu .menu__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .nav-list .menu .menu__card{aspect-ratio:16/10;border-radius:12px;--menu-title:19px}
  .nav-list .menu .menu__card::after{border-radius:12px}
  .nav-list .menu .menu__lab{font-size:19px;line-height:1.2;padding:0 14px 14px}
  .nav-list .menu .menu__lab .arr{width:19px;height:19px}
  .nav-list .menu .menu__list>li.menu__applications{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .nav-list .menu .menu__applications a{min-height:53px;padding:12px 14px;font-size:18px}
}

/* home: the floor visualizer is live (in-house, until floorWIZ arrives) */
.h-viz{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:48px;align-items:center;max-width:1120px;margin-inline:auto}
.h-viz__copy{text-align:center}
.h-viz__copy p{font-size:var(--t-lead);margin-block:16px 24px}
@media (max-width:899.98px){.h-viz{grid-template-columns:minmax(0,1fr);gap:24px}.h-viz__copy p{font-size:var(--t-body)}}

/* header with the Visualizer link: below 1440 the call button is its icon (the number stays in its label) */
@media (min-width:1280px) and (max-width:1439.98px){
  .site-header .nav-call .ph-full,.site-header .nav-call .ph-short{display:none}
  .site-header .nav-call{min-width:48px;padding-inline:14px;gap:0}
  .site-header .btn--phone svg{display:block}
}

/* a two-system row (commercial: no metallic, Ian to Jebb 2026-10-19) centres */
@media (min-width:1024px){.service-system-row{justify-content:center}}

/* system cards: a quiet accent (owner 2026-11-03: "subtle, sophisticated accent").
   A numbered label led by a short orange dash (it lengthens on hover) and a hairline between drawing and copy. */
.service-system-row{counter-reset:sys}
.service-system{counter-increment:sys;position:relative}
.service-system .service-diagram{border-bottom:1px solid rgba(20,20,20,.08)}
.service-system .service-card-copy h3{position:relative}
.service-system .service-card-copy h3::before{content:"System " counter(sys,decimal-leading-zero);display:block;margin-bottom:10px;padding-left:30px;font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#6b6b66;background:linear-gradient(var(--orange),var(--orange)) left center/20px 2px no-repeat;transition:background-size var(--dur-fast,180ms) var(--ease-standard,ease),padding-left var(--dur-fast,180ms) var(--ease-standard,ease)}
.service-system:hover .service-card-copy h3::before,.service-system:focus-within .service-card-copy h3::before{background-size:32px 2px;padding-left:42px}
@media (prefers-reduced-motion:reduce){.service-system .service-card-copy h3::before{transition:none}}

/* "More spaces" card names read as headings, the same as the home service cards (owner 2026-11-03) */
body main .service-space .card-label.caption--band{font-size:var(--t-card-title);font-weight:800;line-height:1.2;letter-spacing:normal}
body main .service-space .card-label b{display:inline-block;margin-left:.3em;font-size:.8em;font-weight:800;color:var(--orange);transition:transform var(--dur-fast,180ms) var(--ease-standard,ease)}
body main .service-space:hover .card-label b,body main .service-space:focus-visible .card-label b{transform:translateX(4px)}
@media (max-width:767.98px){body main .service-space .card-label.caption--band{font-size:var(--t-lead)}}
@media (prefers-reduced-motion:reduce){body main .service-space .card-label b{transition:none}}
body main .service-space .card-label b.space-arrow{width:.8em;height:.8em;font-size:1em;vertical-align:baseline;white-space:nowrap}
body main .service-space .card-label b.space-arrow svg{display:block;width:100%;height:100%}
body main .service-space .card-label .space-end{position:static;inset:auto;display:inline;padding:0;margin:0;background:none;font:inherit;white-space:nowrap}

/* proof band: the same white Google "G" badge as the reviews section (owner 2026-11-03) */
.proof-band .proof-band__rating a{flex-direction:row;gap:14px}
.proof-band__google{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);line-height:1}
.proof-band__google .gmark{display:block;width:24px;height:24px}
.proof-band__copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
@media (min-width:1200px){
  .proof-band .proof-band__list{grid-template-columns:max-content repeat(5,minmax(0,1fr))}
  .proof-band .proof-band__list:has(.bi--quick){grid-template-columns:max-content repeat(4,minmax(0,1fr)) 1.6fr}
}

/* the shared slider caption pill never shows empty (gallery phone, 2026-11-04) */
.photo-slider__caption:empty,.photo-slider__caption:not(:has(*)):where(:empty){display:none}

/* Commercial projects (owner 2026-11-04 "looks incomplete"): the one photographed project leads; projects without a photo
   are dark case notes beside it, so no card reads as an image that failed to load. */
.proj-feature{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:24px}
.proj-feature .proj-lead{grid-row:1 / span 2;display:flex;flex-direction:column;min-width:0}
.proj-feature .proj-lead picture{display:flex;flex:1 1 auto;min-height:0}
.proj-feature .proj-lead picture,.proj-feature .proj-lead img{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:cover}
.proj-note{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:28px;background:var(--ink-2);color:var(--white);border-radius:var(--r-s)}
.proj-note .proj-note__label{display:flex;align-items:center;gap:10px;margin:0 0 auto;font:600 13px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.proj-note .proj-note__label::before{content:"";width:24px;height:2px;background:var(--orange)}
.proj-note h3{margin:24px 0 8px;font-family:var(--font-head);font-size:28px;line-height:1.15;color:var(--white)}
.proj-note .proj-note__text{margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.5}
.proj-note .proj-note__text a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
/* Caption pill (shared engine) hangs half below the photo: on the two-column grid the notes end level with the photo, so the
   grid reserves the pill's half-height itself (21px, one line) rather than the lead's margin. */
@media (min-width:900px){
  .proj-feature{padding-bottom:21px}
  body .proj-feature .proj-lead.photo-caption-host{margin-bottom:0!important}
}
@media (max-width:899.98px){
  .proj-feature{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .proj-feature .proj-lead{grid-row:auto}
  .proj-note{min-height:200px}
}
.proj-note .proj-note__text q{display:block;margin:0 0 10px;font:400 22px/1.35 var(--font-body);color:var(--white);quotes:"\201C" "\201D"}
/* Owner 2026-11-04: every estimate form's step row reads "Fast Inquiry" in orange (#c25700 = 4.5:1 on white). */
body .est__top .est__fast{color:#c25700;font-weight:700;letter-spacing:.02em}

/* desktop dropdown opens centered under its nav item (owner 2026-11-04); site.js sets --menu-x */
@media (min-width:1280px){
  .nav-list .has-menu>.menu{left:var(--menu-x,max(12px,calc(100vw - 792px)));transform-origin:50% 0}
}

/* desktop dropdown: the same dark smoked glass as the home hero quote card (owner 2026-11-04) */
@media (min-width:1280px){
  body .nav-list .has-menu>.menu{
    background:rgba(16,16,18,.56);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);
    color:#f5f3ef;color-scheme:dark;scrollbar-color:rgba(255,255,255,.3) transparent
  }
  body .nav-list .menu .menu__applications a{color:#f5f3ef;border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.07)}
  body .nav-list .menu .menu__applications a:hover,body .nav-list .menu .menu__applications a:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
  body .nav-list .menu .menu__applications .arr{color:#ff8a2a}
}

/* quote-form buttons: one shape everywhere, the hero's (owner 2026-11-04) — 24px sides, 48px tall, arrow 10px from the word */
body form.est .cta--form-action.cta--form-action{min-height:48px;padding:12px 24px;gap:10px}

/* lightbox controls: light glyph on an ink disc, never the text-link ink (owner 2026-11-04: "fix button color") */
body .lb button.lb__btn.lb__btn.cta-text:not(#_):not(#_):not(#_){color:#fff!important;-webkit-text-fill-color:#fff;background:rgba(20,20,20,.72);border:2px solid #fff;font-size:30px;line-height:1;text-decoration:none}
body .lb button.lb__btn.lb__btn.cta-text:not(#_):not(#_):not(#_)::after{content:none}
body .lb button.lb__btn.lb__btn.cta-text:not(#_):not(#_):not(#_):hover,body .lb button.lb__btn.lb__btn.cta-text:not(#_):not(#_):not(#_):focus-visible{background:#f87000;border-color:#f87000;color:#141414!important;-webkit-text-fill-color:#141414}

/* sticky quote forms (owner 2026-11-04): the form holds while its section scrolls and is pushed out by the section's
   bottom edge. overflow:clip clips exactly like hidden but, unlike hidden, does not stop position:sticky. */
@media (min-width:900px){
  body section.sfc-hero.sfc-hero,body section.hh.hh,body section#estimate.cta-band.cta-band{overflow:clip}
  body form.nee-stick.nee-stick{position:sticky;top:var(--stick-top,120px);z-index:3;overflow-anchor:none}
}


/* service-page hero quote form: the same dark smoked glass as the home hero card (owner 2026-11-04: "this should match the styling of the others") */
body section.sfc-hero.sfc-hero form.est.sfc-form{
  --qg-ink:#f5f3ef;--qg-mute:rgba(245,243,239,.74);--qg-line:rgba(255,255,255,.26);--qg-fill:rgba(255,255,255,.07);--qg-orange:#ff8a2a;
  background:rgba(16,16,18,.56);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);
  color:var(--qg-ink);color-scheme:dark
}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(h3,legend,label,.field,.field span,.sfc-form__head){color:var(--qg-ink)}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(.est__top,.est__top span,.est__count,.est__hint,.nee-phone-note,.nee-short,.nee-space-detail,p){color:var(--qg-mute)}
body section.sfc-hero.sfc-hero form.est.sfc-form .est__top .est__fast{color:var(--qg-orange)}
body section.sfc-hero.sfc-hero form.est.sfc-form .est__bar i{background:rgba(255,255,255,.16)}
body section.sfc-hero.sfc-hero form.est.sfc-form .est__bar i.is-on{background:#f87000}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(input:not([type=radio]):not([type=checkbox]),select,textarea){background-color:var(--qg-fill);border-color:var(--qg-line);color:var(--qg-ink)}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(input,textarea)::placeholder{color:rgba(245,243,239,.56);opacity:1}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(input,select,textarea):focus{border-color:var(--qg-orange)}
body section.sfc-hero.sfc-hero form.est.sfc-form select option{color:#141414;background:#fff}
body section.sfc-hero.sfc-hero form.est.sfc-form input:-webkit-autofill{-webkit-text-fill-color:var(--qg-ink);box-shadow:0 0 0 1000px #2a2a2e inset;caret-color:var(--qg-ink)}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(input[type=radio],input[type=checkbox]){accent-color:#f87000}
body section.sfc-hero.sfc-hero form.est.sfc-form .nee-town .field input{background:transparent;border-color:transparent;border-bottom-color:var(--qg-line);border-radius:0}
body section.sfc-hero.sfc-hero form.est.sfc-form input[type=file]{color:var(--qg-mute)}
body section.sfc-hero.sfc-hero form.est.sfc-form input[type=file]::file-selector-button{background:rgba(255,255,255,.12);color:var(--qg-ink);border:1px solid var(--qg-line);border-radius:999px;padding:6px 14px;margin-right:10px}
body section.sfc-hero.sfc-hero form.est.sfc-form .cta-secondary.cta--on-paper.cta--on-paper:not(#_):not(#_){color:var(--qg-ink);border-color:rgba(255,255,255,.55);background:transparent}
body section.sfc-hero.sfc-hero form.est.sfc-form .est__msg{background:rgba(255,255,255,.08);color:var(--qg-ink)}
body section.sfc-hero.sfc-hero form.est.sfc-form a:not(.btn){color:var(--qg-ink)}
body section.sfc-hero.sfc-hero form.est.sfc-form :is(input,select,textarea):focus-visible{outline:2px solid var(--qg-orange);outline-offset:1px}
body section.sfc-hero.sfc-hero form.est.sfc-form .sfc-form__head.sfc-form__head{color:var(--qg-ink)}

/* sticky quote forms need room to travel: a sticky box only moves inside its own grid row / flex column, so the hero
   row takes the full hero height (padding folded into the row; the form stays centred where it was) and the home
   hero column stretches to the section. The home card's own position:relative rule outranks the generic sticky rule. */
@media (min-width:900px){
  body section.hh.hh>.hh__in{align-self:stretch;justify-content:center}
  body section.hh.hh form.home-quote.home-quote.nee-stick.nee-stick{position:sticky;top:var(--stick-top,120px);z-index:3;overflow-anchor:none}
}

/* service hero (two columns from 1280px): the 80px top/bottom padding becomes grid rows above and below the text, and
   the form spans all three, so it can travel the full hero height; text and form sit exactly where they did */
@media (min-width:1280px){
  body.service-reference section.sfc-hero.sfc-hero{padding-top:0;padding-bottom:0;grid-template-rows:80px auto 80px;row-gap:0}
  body.service-reference section.sfc-hero.sfc-hero>.hero__panel{grid-row:2}
  body.service-reference section.sfc-hero.sfc-hero>form.sfc-form{grid-row:1/4}
}

/* Floor condition: the picked choice reads on the dark glass cards (owner 2026-11-05 "fix color"):
   solid brand orange with dark text, the same pairing as the Continue button. */
body form.est .nee-condition.nee-condition input:checked+span{background:var(--orange,#f87000);color:#141414;border-color:var(--orange,#f87000)}

/* Quote-card buttons match the fields (owner 2026-11-05 "these buttons should match radius and spacing of other fields"):
   the fields' 8px corners and height, and the same 12px gap above them that separates the card's other blocks. */
body form.est{--nee-field-h:40px}
body form.home-quote.est{--nee-field-h:48px}
body form.est .cta--form-action.cta--form-action:not(#_):not(#_):not(#_){border-radius:var(--r-s,8px);min-height:0;height:var(--nee-field-h);padding-block:0;padding-inline:22px}
body form.est .est__step>.cta--form-action.cta--form-action,body form.est .est__step>.est__row.est__row{margin-top:12px}

/* ---------- 4b. footer v2 (2026-11-05): brand + three link columns + contact column, ruled headings, socials in the bottom bar ---------- */
body .site-footer .f-brand img{max-width:100%}
body .site-footer .f-brand p{margin-bottom:0}
body .site-footer .f-h{white-space:nowrap}
body .site-footer .f-h::after{content:"";display:block;width:40px;height:2px;margin-top:8px;background:var(--orange)}
body .site-footer .f-phone{display:inline-flex;align-items:center;min-height:44px;margin:0 0 4px;font:800 var(--t-h3)/1.1 var(--font-head);letter-spacing:.01em;color:var(--white);text-decoration:none;white-space:nowrap;transition:color var(--dur-1)}
body .site-footer .f-phone:hover,body .site-footer .f-phone:focus-visible{color:var(--orange)}
body .site-footer .f-nap{margin-bottom:0}
body .site-footer .f-nap .email{text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
body .site-footer .f-bar__in{position:relative}
body .site-footer .f-bar__in::before{content:"";position:absolute;inset:0 var(--gut) auto;height:1px;background:var(--paper-alpha-14)}
body .site-footer .f-bar .f-social{order:2;margin:0 -12px;gap:0}
@media (min-width:560px){
  body .site-footer .f-h{margin-bottom:20px}
  body .site-footer .f-h::after{margin-top:14px}
  body .site-footer .f-phone{margin:-8px 0 8px}
}
@media (min-width:1100px){
  body .site-footer .footer-grid{grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:36px;padding-block:72px 56px}
  body .site-footer .f-brand{grid-column:1/-1}
  body .site-footer .f-col a{white-space:nowrap}
  body .site-footer .f-bar__in{min-height:0;padding-block:16px}
}
@media (min-width:1280px){
  body .site-footer .footer-grid{grid-template-columns:minmax(200px,1fr) repeat(4,max-content)}
  body .site-footer .f-brand{grid-column:auto}
}
@media (min-width:560px) and (max-width:1279.98px){
  body .site-footer .f-bar__in{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:0 28px;padding-block:16px}
  body .site-footer .f-bar .f-bar__c{grid-column:1;grid-row:1}
  body .site-footer .f-bar .f-credit{grid-column:1;grid-row:2}
  body .site-footer .f-bar .f-bar__legal{grid-column:2;grid-row:1/3}
  body .site-footer .f-bar .f-social{grid-column:3;grid-row:1/3}
}
@media (max-width:559.98px){body .site-footer .f-bar .f-social{flex-basis:100%;justify-content:center;margin:0}}

/* batch-g.css */
/* Phone audit batch G (2026-11-03). Linked last in every page <head>.
   Items: /flakes swatches and filter chips, small low-contrast labels, tap targets, gallery chips,
   review cards and dots, Colors & finishes icon (HTML), gallery caption pill on the dark band.
   Tokens only (SHELL.md). Where an older rule is !important, the rule here carries a more
   specific selector and !important too. */

/* ---------- 1. /flakes: one name per swatch, a cropped disc, real filter chips, gutter-aligned search ---------- */
/* Flake finder: each blend is a round pile of loose flakes on a white photo, set on the paper ground with multiply so the
   white drops out and the baked shadow reads as a shadow (model: Penntek's flake page, 5 across, name on the pile, no card, no caption).
   The tile paints the ground itself, so the blend works inside the reveal's own stacking context; the scale for hover sits on the
   img (the element that blends), never on a wrapper, because a transformed wrapper would isolate the blend. */
.fl-grid-band{--fl-ground:var(--surface)}
body .fl-grid{gap:clamp(4px,1vw,14px) clamp(4px,1vw,14px)}
body .fl-tile{aspect-ratio:1/1;display:block;position:relative;isolation:isolate;overflow:hidden;min-width:0;margin:0;padding:0;border-radius:18px;background:var(--fl-ground);text-align:center}
body .fl-tile picture{display:block;position:absolute;inset:0}
body .fl-tile picture img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:0;mix-blend-mode:multiply;background:none;transition:transform .45s var(--ease-out,ease-out)}
@media (hover:hover){body .fl-tile:hover picture img{transform:scale(1.025)}}
/* the name stands on the pile, centred, as in the model: bold white caps with a dark shadow; the code sits under it in small tracked caps */
body .fl-tile .fl-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;width:max-content;max-width:78%;margin:0;padding:0;background:none;border-radius:0;color:#fff;pointer-events:none}
body .fl-tile .fl-name{display:block;font:900 var(--t-lead)/1.12 var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:1px 1px 2px #000,0 0 6px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.5);overflow-wrap:anywhere;text-wrap:balance}
body .fl-tile .fl-code{display:block;margin:0;font:700 var(--t-eyebrow)/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:1px 1px 2px #000,0 0 6px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.45)}
/* the collections stay in the tile for search and screen readers; nothing is printed under the pile */
body .fl-tile small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;font:500 var(--t-eyebrow)/1.35 var(--font-body)}

body .fl-grid-band label[for="fl-search"]{display:block;margin:0 0 8px;font-weight:700}
body .fl-pills{gap:8px;margin:20px 0 20px}
body .fl-pills .fl-pill{flex:none;width:auto;height:44px;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:var(--pill);background:var(--white)!important;color:var(--ink)!important;white-space:nowrap;box-shadow:none}
body .fl-pills .fl-pill span{opacity:1;font-weight:600;color:var(--ink-soft)}
body .fl-pills .fl-pill:hover{background:var(--surface)!important}
body .fl-pills .fl-pill[aria-pressed="true"]{background:var(--ink)!important;border-color:var(--ink);color:var(--white)!important}
body .fl-pills .fl-pill[aria-pressed="true"] span{color:var(--white)}
@media (max-width:767.98px){
  body .fl-grid-band .wrap{padding-inline:var(--gut)}
  /* one row you swipe, fading out at the right edge */
  body .fl-pills{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  body .fl-pills::-webkit-scrollbar{display:none}
  body .fl-pills::after{content:"";flex:none;width:24px}
}
@media (max-width:559.98px){
  body .fl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .fl-tile .fl-name{font-size:var(--t-caption)}
  body .fl-tile .fl-code{font-size:11px}
}

/* ---------- 2. small low-contrast labels ---------- */
body .chip.chip{font-size:12px!important;color:var(--on-orange)!important;line-height:1.2}
body main .hh button.hero-reviews__toggle.hero-reviews__toggle.cta-text{color:var(--ink)!important;font-size:var(--t-eyebrow)!important;font-weight:700!important;text-decoration:underline;text-underline-offset:3px}

/* ---------- 3. tap targets: 40px minimum ---------- */
main .hh button.hh__pause.hh__pause{width:40px!important;height:40px!important;min-height:40px!important;padding:10px!important}
body main .shared-reviews__rating a.prose-link,body main p.testimonials-rating a.prose-link.prose-link,body main .qa__more a.prose-link,body main .sfc-today a{display:inline-block!important;min-height:40px!important;line-height:40px;padding-block:0} /* inline-block, not flex: a flex link swallows the spaces around a .motion-counter */
body main .sfc-related a{min-height:40px!important}

/* ---------- 4. gallery chips: one swipeable row; review cards pin the foot link ---------- */
@media (max-width:767.98px){
  body .gal-filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  body .gal-filters::-webkit-scrollbar{display:none}
  body .gal-filters::after{content:"";flex:none;width:24px}
  body .gal-filters .gal-pill{flex:none}
}
body .gal-filters .gal-pill{background:var(--white)!important;color:var(--ink)!important}
body .gal-filters .gal-pill:hover{background:var(--surface)!important}
body .gal-filters .gal-pill[aria-pressed="true"]{background:var(--ink)!important;color:var(--white)!important}
body .shared-reviews .review-card{display:flex;flex-direction:column}
body .shared-reviews .review-card__quote{flex:0 1 auto}
body .shared-reviews .review-card__more{align-self:flex-start;margin-top:auto}
body .shared-reviews .review-card__quote+.review-card__more{margin-top:auto}
body .shared-reviews .review-card__quote{margin-bottom:12px}

/* ---------- 5. carousel and review dots: visible on light sections, unchanged on dark ones ---------- */
body :is(.carousel__dots,.shared-reviews__dots) button:not(#_):not(#_)::before{background:#6f6f6b!important;opacity:1!important}
body :is(.carousel__dots,.shared-reviews__dots) button[aria-current="true"]:not(#_):not(#_)::before{background:var(--orange)!important;opacity:1!important;box-shadow:0 0 0 1px var(--orange-deep)!important}
body :is(.on-dark,.sec--dark) :is(.carousel__dots,.shared-reviews__dots) button:not(#_):not(#_)::before{background:var(--white)!important;opacity:.45!important}
body :is(.on-dark,.sec--dark) :is(.carousel__dots,.shared-reviews__dots) button[aria-current="true"]:not(#_):not(#_)::before{background:var(--white)!important;opacity:1!important;box-shadow:none!important}

/* ---------- 7. caption pill under a before/after slider on a dark band ---------- */
body :is(.on-dark,.sec--dark) .photo-caption-host:has(>.compare)>.photo-caption.photo-caption{background:var(--white);color:var(--ink);border-color:var(--white);--palette-fg:var(--ink);--palette-muted:var(--ink)}

/* system-layers.css */
/* Floor-system layer diagrams ("What is in your floor" on the home page, "Purpose-built systems" on the service pages).
   js/system-layers.js owns the motion: the layers install bottom to top when a card scrolls in, and a label and its
   layer light up together. Movement runs on the shared spring engine (NEEMotion), so there is no CSS transition,
   keyframe or animation here. Without JS, or with reduced motion, the finished stack simply renders.
   This file holds only what the script needs to draw: room for the lift, the label pill, the layer outline. */

/* The top plate lowers in from above the art and lifts past its edge on hover. */
.sl-fig svg{overflow:visible}
.sl-fig{-webkit-tap-highlight-color:transparent}

/* Label highlight: a soft pill behind the text. JS drives its opacity; at rest it is invisible (JS writes 0). */
.sl-fig .sl-li{position:relative;isolation:isolate}
.sl-fig .sl-pill{position:absolute;z-index:-1;inset:-5px -8px;border-radius:8px;background:rgba(248,112,0,.1);box-shadow:inset 0 0 0 1px rgba(248,112,0,.55);pointer-events:none}

/* Layer highlight: an outline copy of the layer's faces, travelling with the layer. */
.sl-fig .sl-hl{pointer-events:none}

/* "Purpose-built systems", wide screens only: the dark margins either side of the cards carry a faint section drawing of a
   floor (surface coat, flake band, base coat, hatched concrete, a break line, an unlabelled scale rule) in img/system-section.svg.
   Pure decoration: no text, no motion, no pointer events, clipped to the band so it can never widen the page.
   The drawing ends 16px short of the outer card edge; a two-card row (commercial) is narrower than three, so its inset is 1/6 of the row + 4px. */
@media (min-width:1200px){
  body .service-systems.has-seam{overflow-x:clip}
  .service-systems .service-system-row{position:relative;--sys-inset:0px}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(3))){--sys-inset:calc(100% / 6 + 4px)}
  .service-systems .service-system-row::before,
  .service-systems .service-system-row::after{content:"";position:absolute;top:0;width:640px;height:560px;background:url(../img/system-section.svg) right top/640px 560px no-repeat;opacity:.1;pointer-events:none;z-index:0}
  .service-systems .service-system-row::before{right:calc(100% - var(--sys-inset) + 16px)}
  .service-systems .service-system-row::after{left:calc(100% - var(--sys-inset) + 16px);transform:scaleX(-1)}
}
@media (max-width:1199.98px){
  .service-systems .service-system-row::before,
  .service-systems .service-system-row::after{content:none}
}
/* Three-card rows leave under ~200px of margin below 1600px; a cropped sliver there reads as a glitch, so the drawing waits for room. */
@media (min-width:1200px) and (max-width:1599.98px){
  .service-systems .service-system-row:has(.service-system:nth-child(3))::before,
  .service-systems .service-system-row:has(.service-system:nth-child(3))::after{content:none}
}

/* "Purpose-built systems" as the home page's "What Is in Your Floor" frames (css/home-art.css .h-art--sys): tall ink frames,
   soft layered shadow and an inner vignette instead of borders, the layer drawing in a quiet glass plate at the head with white
   labels, an orange rule, the big condensed name, the description in Playfair, and "Learn more" as a tracked-caps arrow link.
   CSS only: the markup, the ids and js/system-layers.js (the layers install and light up with their labels) are untouched. */
.service-systems{--sy-ink:#171716;--sy-hair:rgba(255,255,255,.13);--sy-serif:var(--font-body);--sy-gap:clamp(12px,1.1vw,16px)}
.service-systems .service-system-row:not(#_){gap:var(--sy-gap)}
@media (min-width:1024px){
  .service-systems .service-system:not(#_){flex-basis:calc((100% - 2 * var(--sy-gap)) / 3)}
  .service-systems .service-system-row:has(.service-system:nth-child(2)):not(:has(.service-system:nth-child(3))){justify-content:center}
  .service-systems .service-system-row:has(.service-system:nth-child(2)):not(:has(.service-system:nth-child(3))) > .service-system:not(#_){flex-basis:calc((100% - var(--sy-gap)) / 2);max-width:560px}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(2))){justify-content:center}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(2))) > .service-system:not(#_){flex-basis:min(520px,100%);max-width:520px}
}
.service-systems .service-system:not(#_):not(#_){position:relative;isolation:isolate;border:0;border-radius:var(--r-s);background:var(--sy-ink);color:var(--white);box-shadow:0 40px 64px -38px rgba(0,0,0,.9),0 16px 28px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07)}
.service-systems .service-system:not(#_)::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -140px 120px -100px rgba(0,0,0,.7)}

/* the drawing in a glass plate, labels in white */
.service-systems .service-system .service-diagram:not(#_):not(#_){background:rgba(255,255,255,.035);border-bottom:1px solid var(--sy-hair);padding:28px 18px 24px}
@container (min-width:340px){
  .service-systems .service-system .service-diagram:not(#_):not(#_){padding:26px 14px 22px 10px}
}
.service-systems .service-system .service-diagram .h-sys__lbl li:not(#_){color:#fff}
.service-systems .service-system .service-diagram .h-sys__lname:not(#_){color:#fff;font-weight:700}
.service-systems .service-system .service-diagram .h-sys__ldesc:not(#_){color:rgba(255,255,255,.72)}

/* the copy: orange rule, the condensed name (the home frame's 24px caps), Playfair description */
.service-systems .service-system .service-card-copy:not(#_):not(#_){padding:32px clamp(24px,2.6vw,36px) 30px;gap:0}
.service-systems .service-system .service-card-copy h3:not(#_):not(#_),
.service-systems .service-system:hover .service-card-copy h3:not(#_):not(#_){display:block;overflow:visible;max-height:none;-webkit-line-clamp:unset;line-clamp:unset;margin:0 0 16px;color:#fff;letter-spacing:-.02em;text-transform:uppercase}
.service-systems .service-system .service-card-copy h3:not(#_):not(#_)::before,
.service-systems .service-system:hover .service-card-copy h3:not(#_):not(#_)::before,
.service-systems .service-system:focus-within .service-card-copy h3:not(#_):not(#_)::before{content:"";display:block;width:36px;height:3px;margin:0 0 18px;padding:0;background:var(--orange);background-size:auto;font:0/0 serif}
.service-systems .service-system .service-card-copy p:not(#_):not(#_){margin:0 0 20px;font:400 16px/1.45 var(--sy-serif);letter-spacing:0;color:rgba(255,255,255,.88)}

/* "Learn more": the shared arrow link, tracked caps, 48px to tap */
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_){margin-top:auto;display:inline-flex;align-items:center;align-self:flex-start;gap:12px;min-height:48px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:none;color:var(--white);font:700 13px/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_)::after{content:"";display:inline-block;flex:none;width:1em;height:1em;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_):hover::after{transform:translateX(3px)}
@media (max-width:767.98px){
  .service-systems .service-system .service-card-copy:not(#_):not(#_){padding:28px 24px 24px}
}

/* reviews-premium.css */
/* Google reviews, premium cards (owner 2026-11-03: "gravy", modelled on a social-post review card).
   Each slide is one finished-floor photo with a large translucent dark panel on it: five stars, the review in a serif
   between curly quotes, the reviewer's first name and last initial, a small letter-spaced "Google review" label.
   js/site.js (the 'reviews' runtime) builds the cards and owns the carousel; this file only draws them.
   - The photo is a CSS background set per card through --rv-img / --rv-img-lg, so it is never an <img> in main
     (the one-photo-per-page rule counts <img>) and is never blurred: no filter, no backdrop-filter.
   - Contrast: the panel is rgba(10,10,10,.76). Over a pure-white photo pixel, the worst case, it resolves to about
     #454545: white text 9.6:1, the 82% white label 7.1:1, the orange stars 3.35:1 (graphics need 3:1).
   - No keyframes and no transitions: the slide moves on the shared spring carousel (NEECarousel). Reduced motion
     shows the same finished state, because nothing here animates.
   Scoped to .shared-reviews__track so the static testimonials grid keeps its own cards. */

/* Rating line: the real Google G, then the linked count (both generated by js/site.js from data/reviews.json). */
body .shared-reviews .shared-reviews__rating { gap: 14px; margin-bottom: 28px; }
body .shared-reviews .shared-reviews__google {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); line-height: 1;
}
body .shared-reviews .shared-reviews__google .gmark { width: 24px; height: 24px; display: block; }

/* The viewport that clips the track shows one slide at a time. */
body .shared-reviews .carousel-viewport:has(.shared-reviews__track:focus-visible) {
  outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--r-s);
}
body .shared-reviews .shared-reviews__track:focus-visible { outline: none; }

/* Slide: the photo. */
body .shared-reviews .shared-reviews__track > .review-card {
  --rv-serif: var(--font-body);
  flex: 0 0 100%; max-width: 100%; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: stretch; justify-content: center;
  min-height: 520px; padding: 44px;
  position: relative; overflow: hidden;
  border: 0; border-radius: var(--r-s); box-shadow: none;
  background-color: #1b1b1b; background-image: var(--rv-img, none);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #fff; text-align: center;
}
@media (min-width: 900px) {
  body .shared-reviews .shared-reviews__track > .review-card { background-image: var(--rv-img-lg, var(--rv-img, none)); }
}

/* Panel: translucent dark, photo visible through it and all round it. */
body .shared-reviews .shared-reviews__track .review-card__panel {
  box-sizing: border-box; width: min(100%, 860px); min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 64px 38px;
  background: rgba(10, 10, 10, .76);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-s);
  color: #fff;
}

body .shared-reviews .shared-reviews__track .review-card__stars {
  display: flex; justify-content: center; gap: 8px; flex: none;
  width: auto; margin: 0 0 16px; align-self: center;
}
body .shared-reviews .shared-reviews__track .review-card__stars svg { width: 24px; height: 24px; fill: var(--orange); }
body .shared-reviews .shared-reviews__track .review-card__stars svg.is-off { fill: rgba(255, 255, 255, .3); }

/* The review in curly quotes. The mark is set above and below the text, so the text node stays exactly the review. */
body .shared-reviews .shared-reviews__track .review-card__quote {
  position: relative; margin: 0; padding: 0; width: 100%; border: 0; text-align: center;
  font-family: var(--rv-serif); font-weight: 500; color: #fff;
  quotes: "\201C" "\201D";
}
body .shared-reviews .shared-reviews__track .review-card__quote::before,
body .shared-reviews .shared-reviews__track .review-card__quote::after {
  display: block; position: static; left: auto; top: auto; height: 30px;
  font: 700 64px/1 var(--rv-serif); color: var(--orange); letter-spacing: 0;
}
body .shared-reviews .shared-reviews__track .review-card__quote::before { content: open-quote; margin: 0 0 4px; }
body .shared-reviews .shared-reviews__track .review-card__quote::after { content: close-quote; height: 22px; margin: 6px 0 0; }

body .shared-reviews .shared-reviews__track .review-card__text:not(#_) {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 auto; padding: 0;
  font: inherit; color: #fff; line-height: 1.34; letter-spacing: -.005em;
  white-space: normal; overflow-wrap: anywhere; text-wrap: pretty;
  font-size: 34px; -webkit-line-clamp: 6;
}
/* Type follows the length of the review (js/site.js sets data-size), so short praise is large and long praise fits. */
body .shared-reviews .shared-reviews__track .review-card[data-size="xs"] .review-card__text:not(#_) { font-size: 44px; line-height: 1.2; -webkit-line-clamp: 4; text-wrap: balance; }
body .shared-reviews .shared-reviews__track .review-card[data-size="s"] .review-card__text:not(#_) { font-size: 32px; line-height: 1.28; -webkit-line-clamp: 5; }
body .shared-reviews .shared-reviews__track .review-card[data-size="m"] .review-card__text:not(#_) { font-size: 26px; line-height: 1.36; -webkit-line-clamp: 6; }
body .shared-reviews .shared-reviews__track .review-card[data-size="l"] .review-card__text:not(#_) { font-size: 21px; line-height: 1.5; -webkit-line-clamp: 6; }
body .shared-reviews .shared-reviews__track .review-card__text.is-expanded:not(#_) { white-space: pre-line; display: block; -webkit-line-clamp: unset; overflow: visible; }
body .shared-reviews .shared-reviews__track .review-card[data-size] .review-card__text.is-expanded:not(#_) { -webkit-line-clamp: unset; }

/* Read more: white on the panel (the orange link colour fails 4.5:1 on a photo). */
body .shared-reviews .shared-reviews__track .review-card__more:not(#_):not(#_):not(#_) {
  align-self: center; margin: 14px 0 0; padding: 0 4px; min-height: 40px; align-items: center;
  color: #fff; background: transparent; font: 600 16px/1.4 var(--font-body);
}
body .shared-reviews .shared-reviews__track .review-card__quote + .review-card__more { margin-top: 14px; }

/* Byline: avatar, first name and last initial, the label. */
body .shared-reviews .shared-reviews__track .review-card__header {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 22px 0 0; padding: 0; position: static; background: none; color: #fff; text-align: left; flex: none;
}
body .shared-reviews .shared-reviews__track .review-card__avatar {
  flex: 0 0 52px; width: 52px; height: 52px; line-height: 52px; font-size: 16px;
  border: 2px solid rgba(255, 255, 255, .75); border-radius: 999px; box-sizing: border-box;
  background: var(--surface); color: var(--ink); overflow: hidden;
}
body .shared-reviews .shared-reviews__track .review-card__avatar img { width: 100%; height: 100%; }
body .shared-reviews .shared-reviews__track .review-card__identity { flex: 0 1 auto; min-width: 0; }
body .shared-reviews .shared-reviews__track .review-card__identity strong {
  display: block; font: 700 19px/1.3 var(--font-body); color: #fff; letter-spacing: 0;
}
body .shared-reviews .shared-reviews__track .review-card__date {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; margin: 4px 0 0;
  font: 600 12px/1.5 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
body .shared-reviews .shared-reviews__track .review-card__date .gmark { flex: none; width: 14px; height: 14px; }
body .shared-reviews .shared-reviews__track .review-card__when { letter-spacing: .12em; }

/* Closing controls keep the existing arrows and dots; a little air under the photo. */
body .shared-reviews .shared-reviews__controls { margin-top: 28px; }

/* Service pages: the trailing "See our work" slide takes the same full width. */
body .shared-reviews .shared-reviews__track > .shared-reviews__work:not(#_):not(#_) { flex: 0 0 100%; max-width: 100%; height: auto; min-height: 520px; }
body .shared-reviews .shared-reviews__track > .shared-reviews__work { position: relative; overflow: hidden; }
body .shared-reviews .shared-reviews__track > .shared-reviews__work :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tablet */
@media (max-width: 899.98px) {
  body .shared-reviews .shared-reviews__track > .review-card { padding: 32px; min-height: 0; }
  body .shared-reviews .shared-reviews__track .review-card__panel { padding: 40px 40px 36px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="xs"] .review-card__text:not(#_) { font-size: 38px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="s"] .review-card__text:not(#_) { font-size: 30px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="m"] .review-card__text:not(#_) { font-size: 25px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="l"] .review-card__text:not(#_) { font-size: 20px; }
}

/* Phone: a full-width panel on a thin frame of photo. */
@media (max-width: 767.98px) {
  body .shared-reviews .shared-reviews__rating { gap: 10px; }
  body .shared-reviews .shared-reviews__track > .review-card { padding: 12px; }
  body .shared-reviews .shared-reviews__track .review-card__panel { width: 100%; padding: 30px 20px 26px; }
  body .shared-reviews .shared-reviews__track .review-card__stars { gap: 6px; margin-bottom: 18px; }
  body .shared-reviews .shared-reviews__track .review-card__stars svg { width: 22px; height: 22px; }
  body .shared-reviews .shared-reviews__track .review-card__quote::before { font-size: 54px; height: 24px; }
  body .shared-reviews .shared-reviews__track .review-card__quote::after { font-size: 54px; height: 18px; }
  body .shared-reviews .shared-reviews__track .review-card__text:not(#_) { -webkit-line-clamp: 9; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="xs"] .review-card__text:not(#_) { font-size: 28px; -webkit-line-clamp: 7; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="s"] .review-card__text:not(#_) { font-size: 23px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="m"] .review-card__text:not(#_) { font-size: 20px; }
  body .shared-reviews .shared-reviews__track .review-card[data-size="l"] .review-card__text:not(#_) { font-size: 18px; line-height: 1.5; }
  body .shared-reviews .shared-reviews__track .review-card__header { flex-direction: column; margin-top: 20px; gap: 10px; text-align: center; }
  body .shared-reviews .shared-reviews__track .review-card__identity { text-align: center; }
  body .shared-reviews .shared-reviews__track .review-card__date { justify-content: center; }
  body .shared-reviews .shared-reviews__track .review-card__avatar { flex-basis: 46px; width: 46px; height: 46px; line-height: 46px; }
  body .shared-reviews .shared-reviews__track .review-card__identity strong { font-size: 18px; }
  body .shared-reviews .shared-reviews__track .review-card__date { letter-spacing: .14em; font-size: 12px; }
  body .shared-reviews .shared-reviews__track .review-card__when { letter-spacing: .08em; }
  body .shared-reviews .shared-reviews__track > .shared-reviews__work { min-height: 320px; }
}

/* faq-premium.css */
/* FAQ section, home + services (.faq-p). Loaded last.
   Layout: the section's one centred H2 (css/headings.css, untouched) sits above a two-column grid.
   Left: one photo + ink contact block, sticky on desktop, joined as ONE unit with the section's single crafted corner.
   Right: the accordion as hairline-divided numbered rows. The open row is a white panel with an ink outline, not an orange slab.
   Open/close motion is js/motion.js initDetails (grid-rows spring, answer fade); single-open is js/site.js [data-service-faq].
   No shadows, glow or gradients. Orange is only the plus mark (it is not text). */

.faq-p__grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:64px;align-items:start}

/* ---------- left: photo + help, one unit ---------- */
.faq-p__aside{position:sticky;top:124px;display:flex;flex-direction:column;background:var(--ink);color:var(--white);
  border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);overflow:hidden}
.faq-p__photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.faq-p__photo picture{display:block;width:100%;height:100%}
.faq-p__photo img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.faq-p__help{padding:28px 28px 30px}
.faq-p__t{margin:0 0 10px;font:800 var(--t-card-title)/1.15 var(--font-head);text-transform:uppercase;letter-spacing:-.005em;color:var(--white)}
.faq-p__lead{margin:0 0 22px;font:500 var(--t-body)/1.55 var(--font-body);color:var(--on-dark-soft)}
.faq-p__acts{display:grid;gap:12px}
.faq-p__acts .btn{width:100%;min-height:52px;padding-inline:20px;white-space:nowrap}
body main .faq-p__acts .btn--phone svg{display:block}
.faq-p__hours{margin:18px 0 0;font:500 var(--t-caption)/1.4 var(--font-body);color:var(--on-dark-soft)}

/* ---------- right: the accordion ---------- */
body main .faq-p .faq{display:block;max-width:none;margin:0;counter-reset:faqn;border-top:2px solid var(--ink)}
body main .faq-p .faq details{position:relative;counter-increment:faqn;background:transparent;border:1px solid transparent;border-bottom-color:var(--ink-alpha-24);border-radius:0;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out)}
body main .faq-p .faq details+details{margin-top:-1px}
body main .faq-p .faq details[data-m-open]{z-index:1;background:var(--white);border-color:var(--ink);border-radius:var(--r-s)}

body main .faq-p .faq details>summary:not(#_):not(#_):not(#_){display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:20px;
  min-height:84px;padding:18px 66px 18px 22px;border:0;border-radius:inherit;background:transparent;color:var(--ink);cursor:pointer;list-style:none;
  font:700 20px/1.3 var(--font-body);letter-spacing:-.005em;text-wrap:balance;transition:background-color var(--dur-2) var(--ease-out)}
body main .faq-p .faq details[data-m-open]>summary:not(#_):not(#_):not(#_){background:transparent;color:var(--ink)}
body main .faq-p .faq details>summary::-webkit-details-marker{display:none}
body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{content:counter(faqn,decimal-leading-zero);content:counter(faqn,decimal-leading-zero) / "";display:block;
  font:800 14px/1 var(--font-head);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-soft);transition:color var(--dur-2) var(--ease-out)}
body main .faq-p .faq details[data-m-open]>summary:not(#_):not(#_):not(#_)::before{color:var(--ink)}
body main .faq-p .faq details>summary.has-plus>.ico-plus{right:26px}
body main .faq-p .faq details>summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  body main .faq-p .faq details:not([data-m-open])>summary:hover{background:var(--white)}
  body main .faq-p .faq details:not([data-m-open])>summary:hover::before{color:var(--ink)}
}

/* answer: starts under the question, not under the number */
body main .faq-p .faq details>m-acc>m-in>div,body main .faq-p .faq details>div{padding:0 62px 28px 76px}
body main .faq-p .faq details p:not(#_){margin:0;font:500 18px/1.6 var(--font-body);color:var(--ink)}
body main .faq-p .faq details p:not(#_)+p:not(#_){margin-top:12px}
body main .faq-p .faq details a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:700;color:var(--ink)}
body main .faq-p .faq details a:not(.btn):hover{text-decoration-thickness:2px}

/* no photo (Exterior Coatings has no outdoor job photography yet): the ink block stands alone with its one crafted corner */
.faq-p__aside--solo{border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s)}
.faq-p__aside--solo .faq-p__help{padding:36px 30px 38px}

/* ---------- tablet: photo and help sit side by side above the accordion ---------- */
@media (max-width:1023.98px){
  .faq-p__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq-p__aside{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .faq-p__aside--solo{display:block}
  .faq-p__photo{aspect-ratio:auto;min-height:100%}
  .faq-p__help{align-self:center}
}

/* ---------- phone: compact photo, help block attached, accordion full width ---------- */
@media (max-width:767.98px){
  .faq-p__grid{gap:28px}
  .faq-p__aside{display:flex;border-top-right-radius:var(--r-l)}
  .faq-p__photo{aspect-ratio:16/10}
  .faq-p__help{padding:22px 20px 24px}
  .faq-p__t{font-size:20px}
  body main .faq-p .faq details>summary:not(#_):not(#_):not(#_){grid-template-columns:26px minmax(0,1fr);column-gap:14px;min-height:68px;padding:16px 46px 16px 14px;font-size:17px}
  body main .faq-p .faq details>summary.has-plus>.ico-plus{right:16px}
  body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{font-size:13px}
  body main .faq-p .faq details>m-acc>m-in>div,body main .faq-p .faq details>div{padding:0 18px 24px 54px}
  body main .faq-p .faq details p:not(#_){font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  body main .faq-p .faq details,body main .faq-p .faq details>summary:not(#_):not(#_):not(#_),body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{transition:none}
}

/* =====================================================================================================
   /faq page: the grouped .qa rows take the same numbered accordion as .faq-p (hairline rows, white open
   panel with a 1px ink outline, plus mark at the right). Numbers restart in each group. One open at a
   time is js/pages/faq.js. The "Still have questions?" block closes the page as ONE joined unit
   (photo + ink panel, the section's single crafted corner), laid out wide instead of as a sticky column.
   ===================================================================================================== */
body main .fq-group{background:var(--surface)}
body main .fq-group .fq-band{background:transparent;padding-bottom:12px}
body main .fq-group .fq-block{background:transparent}
body main .fq-group .fq-block__in{max-width:calc(960px + 2 * var(--gut));counter-reset:qan;padding-block:24px 48px}

body main .fq-group .qa{position:relative;counter-increment:qan;margin:0;background:transparent;border:1px solid transparent;border-bottom-color:var(--ink-alpha-24);border-radius:0;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out)}
body main .fq-group .qa:first-of-type{border-top:2px solid var(--ink)}
body main .fq-group .qa+.qa{margin-top:-1px}
body main .fq-group .qa[data-m-open]{z-index:1;background:var(--white);border-color:var(--ink);border-radius:var(--r-s)}

body main .fq-group .qa>summary:not(#_):not(#_):not(#_){display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:20px;
  min-height:84px;padding:18px 66px 18px 22px;border:0;border-radius:inherit;background:transparent;color:var(--ink);cursor:pointer;list-style:none;
  font:700 20px/1.3 var(--font-body);letter-spacing:-.005em;text-wrap:balance;transition:background-color var(--dur-2) var(--ease-out)}
body main .fq-group .qa[open]>summary:not(#_):not(#_):not(#_),body main .fq-group .qa[open]>summary:not(#_):not(#_):not(#_):hover{background:transparent;color:var(--ink)}
body main .fq-group .qa>summary::-webkit-details-marker{display:none}
body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::after{content:none;display:none}
body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{content:counter(qan,decimal-leading-zero);content:counter(qan,decimal-leading-zero) / "";display:block;
  font:800 14px/1 var(--font-head);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-soft);transition:color var(--dur-2) var(--ease-out)}
body main .fq-group .qa[data-m-open]>summary:not(#_):not(#_):not(#_)::before{color:var(--ink)}
body main .fq-group .qa>summary.has-plus>.ico-plus{right:26px}
body main .fq-group .qa>summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  body main .fq-group .qa:not([data-m-open])>summary:not(#_):not(#_):not(#_):hover{background:var(--white);color:var(--ink)}
  body main .fq-group .qa:not([data-m-open])>summary:hover::before{color:var(--ink)}
}

/* answer starts under the question, not under the number */
body main .fq-group .qa__a{padding:0 62px 28px 76px;background:transparent;font:500 18px/1.6 var(--font-body);color:var(--ink)}
body main .fq-group .qa__a p{margin:0}
body main .fq-group .qa__a p+p{margin-top:12px}
body main .fq-group .qa__a p.qa__more{margin-top:16px}
body main .fq-group .qa__a a:not(.link-under){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:700;color:var(--ink)}
body main .fq-group .qa__a a:not(.link-under):hover{text-decoration-thickness:2px}

/* ---------- closing help block: photo + ink panel, wide ---------- */
body main .faq-p--ask{padding-block:72px}
body main .faq-p__aside--wide{position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:1060px;margin-inline:auto}
body main .faq-p__aside--wide .faq-p__photo{position:relative;aspect-ratio:auto;min-height:400px}
body main .faq-p__aside--wide .faq-p__photo picture{position:absolute;inset:0}
body main .faq-p__aside--wide .faq-p__help{align-self:center;padding:48px 52px}
body main .faq-p__aside--wide .faq-p__t{font-size:var(--t-h3)}
body main .faq-p__aside--wide .faq-p__lead{max-width:46ch;margin-bottom:26px}
body main .faq-p__aside--wide .faq-p__acts{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1023.98px){
  body main .faq-p__aside--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body main .faq-p__aside--wide .faq-p__help{padding:32px 30px}
  body main .faq-p__aside--wide .faq-p__photo{min-height:320px}
  body main .faq-p__aside--wide .faq-p__acts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  body main .fq-group .fq-block__in{padding-block:16px 36px}
  body main .fq-group .qa>summary:not(#_):not(#_):not(#_){grid-template-columns:26px minmax(0,1fr);column-gap:14px;min-height:68px;padding:16px 46px 16px 14px;font-size:17px}
  body main .fq-group .qa>summary.has-plus>.ico-plus{right:16px}
  body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{font-size:13px}
  body main .fq-group .qa__a{padding:0 18px 24px 54px;font-size:17px}
  body main .faq-p--ask{padding-block:48px}
  body main .faq-p__aside--wide{display:flex;flex-direction:column;border-top-right-radius:var(--r-l)}
  body main .faq-p__aside--wide .faq-p__photo{aspect-ratio:16/10;min-height:0}
  body main .faq-p__aside--wide .faq-p__help{padding:22px 20px 24px}
}
@media (prefers-reduced-motion:reduce){
  body main .fq-group .qa,body main .fq-group .qa>summary:not(#_):not(#_):not(#_),body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{transition:none}
}

/* why-premium.css */
/* Home "Why Coat a Concrete Floor" (section.why-p, index.html only).
   Split layout: copy on the left, one confident photo stage on the right.
   - Ground: the shared light surface, as the model site does.
   - Copy: lead, then the four benefits as a numbered ledger (hairline rows, ink numerals, short orange rule).
   - Stage: the shared photo slider, framed in ink. The photo sits on top; beneath it one control bar
     carries the count ("03 / 06"), the authored caption and the shared blades. Nothing hangs off the photo.
     The dots become a four-pixel segmented progress line along the bottom edge of the photo.
   Everything is the shared slider (js/site.js): same markup, same engine, same arrows; this file only restyles it
   inside .why-p. js/site.js writes --slide and --slides on the shell; the count is read from them with CSS counters.
   No motion of its own: colour fades only. */

.why-p { --why-r: 16px; --why-bar: 64px; }

/* ---------- layout ---------- */
body main .why-p .h-why { align-items: center; }
body main .why-p .why-p__copy { min-width: 0; }
body main .why-p .why-p__stage { min-width: 0; }
body main .why-p .lead { font-size: 20px; line-height: 1.5; margin: 0 0 28px; max-width: 30em; }

/* ---------- the numbered ledger ---------- */
body main .why-p .why-p__list.why-p__list { counter-reset: why; display: block; margin: 0 0 32px; border-bottom: 1px solid var(--ink-alpha-14); }
body main .why-p .why-p__list li {
  counter-increment: why; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start;
  column-gap: 0; padding: 18px 0 18px 0; margin: 0; border-top: 1px solid var(--ink-alpha-14);
  font-size: var(--t-body); line-height: 1.5; font-weight: 500; color: var(--ink);
}
body main .why-p .why-p__list li::before {
  content: counter(why, decimal-leading-zero); position: static; transform: none; width: auto; height: auto; border-radius: 0; background: none;
  font: 800 24px/1.1 var(--font-head); font-stretch: 100%; letter-spacing: -.005em; color: var(--ink); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
body main .why-p .why-p__list li::after {
  content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 3px; background: var(--orange);
}

/* ---------- the photo stage: ink frame, one control bar ---------- */
body main .why-p .photo-slider-shell {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 12px; grid-template-rows: auto var(--why-bar);
  align-items: center; padding: 0; max-width: 100%; overflow: hidden;
  background: var(--ink); border-radius: var(--why-r);
}
body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  grid-area: 1 / 1 / 2 / -1; margin: 0; aspect-ratio: 4 / 3; border-radius: 0;
}
/* count: "03 / 06", read from --slide and --slides */
body main .why-p .photo-slider-shell::before {
  content: counter(slide, decimal-leading-zero) " / " counter(slides, decimal-leading-zero);
  counter-reset: slide var(--slide, 1) slides var(--slides, 1);
  grid-area: 2 / 1; align-self: center; padding: 0 0 0 22px;
  font: 800 18px/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--white); white-space: nowrap;
}
/* caption: authored text, mirrored by the shared engine into .photo-slider__caption */
body main .why-p .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
  grid-area: 2 / 2; position: static; inset: auto; transform: none; width: auto; max-width: none; min-width: 0; margin: 0;
  padding: 0 20px 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 600 var(--t-body)/1.3 var(--font-body); text-align: left; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center;
}
/* blades: the shared control, seated in the bar */
body main .why-p .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) {
  position: relative; inset: auto; top: auto; left: auto; right: auto; transform: none; align-self: center; margin: 0 0 0 8px;
  border-radius: var(--pill); background: transparent; color: var(--white); border-color: var(--paper-alpha-20); box-shadow: none; z-index: 2;
}
body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { grid-area: 2 / 3; }
body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { grid-area: 2 / 4; }
body main .why-p .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:hover:not(:disabled):not(#_):not(#_):not(#_):not(#_) { background: var(--orange); color: var(--ink); border-color: var(--orange); }

/* dots: a four-pixel segmented progress line on an ink track at the foot of the photo; the targets stay 40px */
body main .why-p .photo-slider .photo-slider__dots:not(#_):not(#_) {
  inset: auto 0 0 0; height: 40px; justify-content: stretch; gap: 0; z-index: 3; pointer-events: none;
}
body main .why-p .photo-slider .photo-slider__dots::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink); z-index: 0;
}
body main .why-p .photo-slider .photo-slider__dots button:not(#_):not(#_):not(#_) {
  flex: 1 1 0; width: auto; min-width: 40px; z-index: 1; pointer-events: auto; border-radius: 0;
}
body main .why-p .photo-slider .photo-slider__dots button:not(#_):not(#_):not(#_)::before {
  inset: auto 1px 0 1px; width: auto; height: 4px; border-radius: 0; background: var(--white); opacity: .4;
  transition: opacity var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
body main .why-p .photo-slider .photo-slider__dots button[aria-current="true"]:not(#_):not(#_):not(#_)::before { width: auto; left: 1px; background: var(--orange); opacity: 1; }
body main .why-p .photo-slider .photo-slider__dots button:hover:not(#_):not(#_):not(#_)::before { opacity: .7; }
body main .why-p .photo-slider .photo-slider__dots button[aria-current="true"]:hover:not(#_):not(#_):not(#_)::before { opacity: 1; }

/* ---------- between phone and desktop: one column, wider stage ---------- */
@media (max-width: 899.98px) {
  body main .why-p .h-why { gap: 36px; }
  body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { aspect-ratio: 16 / 10; }
  body main .why-p .lead { max-width: none; }
}

/* ---------- phone: ledger, then the stage with caption above the count and blades ---------- */
@media (max-width: 559.98px) {
  .why-p { --why-r: 12px; }
  body main .why-p .h-why { gap: 28px; }
  body main .why-p .lead { font-size: var(--t-lead); margin-bottom: 20px; }
  body main .why-p .why-p__list.why-p__list { margin-bottom: 24px; }
  body main .why-p .why-p__list li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; }
  body main .why-p .why-p__copy .btn { display: flex; width: 100%; justify-content: center; }
  body main .why-p .photo-slider-shell {
    grid-template-columns: minmax(0, 1fr) auto auto 12px; grid-template-rows: auto auto auto; padding: 0 0 12px;
  }
  body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { aspect-ratio: 4 / 3; }
  body main .why-p .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
    grid-area: 2 / 1 / 3 / -1; padding: 16px 16px 4px; white-space: normal; text-overflow: clip; align-self: start;
  }
  body main .why-p .photo-slider-shell::before { grid-area: 3 / 1; padding-left: 16px; font-size: 16px; }
  body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { grid-area: 3 / 2; margin-left: 0; }
  body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { grid-area: 3 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  body main .why-p .photo-slider .photo-slider__dots button::before { transition: none; }
}

/* fixes-nov4.css */
/* fixes-nov4: small layout repairs (Nov 4 2026). Each block names the page it serves. */

/* Gallery, phone: the carousel's reserved band (caption hang + arrow row, 83px, see carousel-arrows-phone.css) already
   sits under the photo, so the grid gap goes BELOW the arrow row, not above it. Before this the 20px photo margin pushed the
   arrows 20px lower and left them touching the first tile. The shell carries an inline margin from site.js, hence !important. */
@media (max-width: 767.98px) {
  body .gal-gridsec .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin-bottom: 0; }
  body .gal-gridsec .photo-slider-shell { margin-bottom: var(--gap) !important; }
}

/* Nov 5 call: on a laptop the proof strip sat a quarter of the way up the screen.
   Grow the service hero so that strip lands on the bottom edge of the first screen.
   Phone stays as it was. Exterior has no proof strip, so it is left out. */
/* Nov 6: the strip is one row only from 1200px up, and the old rule guessed its height (104px, it was 80px), which left a
   24px gap under it. The strip now has a set height, taller with larger icons, and the hero is sized from that same number. */
@media (min-width: 1200px) {
  :root { --proof-h: 120px; }
  body .proof-band.proof-band { height: var(--proof-h); padding-block: 0; box-sizing: border-box; display: grid; align-content: center; }
  body .proof-band .proof-band__list { width: 100%; gap: 20px; }
  body .proof-band .proof-band__list > li { gap: 12px; }
  body .proof-band .proof-band__list > li > svg.bi { width: 56px; height: 56px; }
  body .proof-band .proof-band__google { width: 56px; height: 56px; }
  body .proof-band .proof-band__google .gmark { width: 30px; height: 30px; }
  body .proof-band .proof-band__stars svg { width: 18px; height: 18px; }
  body.service-reference:not(.exterior-service) .sfc-hero.sfc-hero {
    min-height: calc(100svh - 100px - var(--proof-h));
    box-sizing: border-box;
  }
}

.look-wait {
  max-width: 62ch;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--ink);
  font: 500 18px/1.5 var(--font-body);
}
.wood-note {
  max-width: 68ch;
  margin: 0 auto;
  font: 500 18px/1.55 var(--font-body);
  color: var(--ink);
}
.wood-note + .wood-note { margin-top: 14px; }

/* Nov 5 call (Cody): the metallic floor video from the home page rolls behind the Metallic Epoxy header.
   The photo shows until the video can play (motion.js fades it in); phones and reduced motion keep the photo. */
.sfc-hero .hero__media > video[data-svc-hero-video] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; }
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) { .sfc-hero .hero__media > video[data-svc-hero-video] { display: none; } }

/* Nov 5 call: flake blends on the Exterior page (garage, basement, exterior and acrylic flake are the flake pages). */
.ex-flakes .look-bento { display: block; }

/* flex-wood twist removed: the wood diagram is now the interactive demo in css/flex-demo.css */

/* menus-penntek.css */
/* Header dropdowns, Penntek format (Nov 6 2026). Loaded last in the stamped head; owns every .menu rule.
   Residential: one column of photo cards. Commercial: two columns of photo cards. Systems: text columns plus a tools row.
   Desktop >= 1280px: white rounded panel under the tab. Below that the nav is the Menu button and each dropdown is an accordion row. */

/* ---------- shared card look ---------- */
body .nav-list .menu .menu__list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0}
body .nav-list .menu .menu__list>li{opacity:1;transform:none;visibility:visible;transition:none}
body .nav-list .menu .menu__card{position:relative;display:block;height:var(--card-h,120px);aspect-ratio:auto;max-height:none;padding:0;border-radius:12px;overflow:hidden;background:#141414;color:#fff;text-decoration:none}
body .nav-list .menu .menu__card:hover,body .nav-list .menu .menu__card:focus-visible{background:#141414;color:#fff}
body .nav-list .menu .menu__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2a2a;transition:transform .35s ease}
body .nav-list .menu .menu__card:hover img,body .nav-list .menu .menu__card:focus-visible img{transform:scale(1.04)}
body .nav-list .menu .menu__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,.84) 100%)}
body .nav-list .menu .menu__card::after{border-radius:12px;border-width:3px}
body .nav-list .menu .menu__lab{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:0 16px 12px;font:700 19px/1.15 var(--font-body);letter-spacing:.005em;text-transform:none;color:#fff;-webkit-line-clamp:2;line-clamp:2}
body .nav-list .menu .menu__lab .arr{display:inline-block;width:.85em;height:.85em;margin-left:8px;vertical-align:baseline;color:var(--orange)}
body .nav-list .menu .menu__card:hover .arr,body .nav-list .menu .menu__card:focus-visible .arr{transform:translateX(4px)}

/* ---------- systems: text columns ---------- */
/* the header's `.nav-list a` rule (flex, uppercase, white, hover fill, current-page bar) must not reach links inside the panel */
.nav-list .msys a.msys__link{display:block;position:static;gap:0;padding:0;background:none;color:inherit;font:inherit;letter-spacing:normal;text-transform:none;white-space:normal;text-decoration:none}
.nav-list .msys a.msys__link::after{display:none}
.nav-list .msys a.msys__tool{display:flex;align-items:center;gap:16px;padding:10px 16px 10px 10px;background:#fff;color:#141414}
.nav-list .msys a.msys__tool:hover,.nav-list .msys a.msys__tool:focus-visible{background:#fff}

.msys{display:block;min-height:0}
.msys__cols{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0}
.msys__col{display:block;border-left:1px solid #e3e1dc}
.msys__col:first-child{border-left:0}
.msys__link{display:block;color:inherit;text-decoration:none}
.nav-list .msys .msys__col>a.msys__link{height:100%;padding:34px 30px 30px}
.msys__name{display:block;font:800 24px/1.05 var(--font-head,var(--font-body));letter-spacing:.01em;text-transform:uppercase;color:#141414}
.msys__sub{display:block;margin-top:6px;font:400 19px/1.2 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:#8b8782}
.msys__rule{display:block;width:44px;height:3px;margin:20px 0 18px;background:var(--orange)}
.msys__desc{display:block;font:400 16px/1.5 var(--font-body);color:#3d3b38}
.msys__go{display:flex;align-items:center;gap:8px;margin-top:18px;font:700 14px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#a24800}
.msys__go .arr,.msys__tool>.arr{width:16px;height:16px;flex:none;color:var(--orange)}
.nav-list .msys .msys__col>a.msys__link:hover .msys__name,.nav-list .msys .msys__col>a.msys__link:focus-visible .msys__name{color:#a24800}
.msys__link:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.msys__tools{display:flex;align-items:center;gap:26px;padding:20px 30px 24px;border-top:1px solid #e3e1dc}
.msys__tools-h{flex:none;margin:0;font:800 24px/1 var(--font-head,var(--font-body));letter-spacing:.01em;text-transform:uppercase;color:#8b8782}
.msys__tools-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;flex:1}
.msys__tool{display:flex;align-items:center;gap:16px;padding:10px 16px 10px 10px;border:1px solid #e3e1dc;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);color:#141414}
.msys__tool:hover,.msys__tool:focus-visible{border-color:var(--orange)}
.msys__tool img{width:84px;height:64px;flex:none;border-radius:8px;object-fit:cover;background:#2a2a2a}
.msys__tt{flex:1;min-width:0}
.msys__tt b{display:block;font:800 17px/1.1 var(--font-body);letter-spacing:.03em;text-transform:uppercase}
.msys__tt span{display:block;margin-top:4px;font:400 14px/1.35 var(--font-body);color:#4a4845}

/* ---------- desktop: dark glass panel (owner Nov 6: keep the original dark menu background) ---------- */
@media (min-width:1280px){
  html body .nav-list .has-menu>.menu{width:auto;max-width:calc(100vw - 24px);padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(16,16,18,.56);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);color:#f5f3ef;color-scheme:dark;box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);scrollbar-color:rgba(255,255,255,.3) transparent}
  html body .nav-list .has-menu>.menu.menu--res{width:310px;--card-h:124px}
  html body .nav-list .has-menu>.menu.menu--com{width:610px;--card-h:112px}
  html body .nav-list .has-menu>.menu.menu--com .menu__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .nav-list .has-menu>.menu.menu--sys{width:min(960px,calc(100vw - 24px));padding:0}
  body .nav-list .menu .menu__lab{font-size:19px}
}

/* ---------- phone / tablet: accordion rows inside the Menu sheet ---------- */
@media (max-width:1279.98px){
  body .site-header .site-nav .menu{background:transparent;color:#fff}
  body .site-header .site-nav .menu__list{padding:14px 0 18px;min-height:0;overflow:hidden}
  body .site-header .site-nav .menu__list>li:first-child,body .site-header .site-nav .menu__list>li:last-child{margin:0}
  /* a closed accordion row must collapse to 0: padding survives a 0fr grid row and leaked a strip of the first card photo */
  body .site-header .site-nav .has-menu:not(.open):not([data-leaving]) .menu__list,
  body .site-header .site-nav .has-menu:not(.open):not([data-leaving]) .msys{padding-top:0;padding-bottom:0}
  body .site-header .site-nav .menu--res{--card-h:150px}
  body .site-header .site-nav .menu--com{--card-h:104px}
  body .site-header .site-nav .menu--com .menu__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body .site-header .site-nav .menu--com .menu__lab{padding:0 10px 9px;font-size:14px}
  body .site-header .site-nav .menu--com .menu__lab .arr{margin-left:5px}
  .site-nav .menu--sys .msys{min-height:0;overflow:hidden;padding:6px 0 14px}
  .site-nav .msys__cols{grid-template-columns:minmax(0,1fr)}
  .site-nav .msys__col{border-left:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .site-nav .nav-list .msys .msys__col>a.msys__link{height:auto;padding:16px 4px}
  .site-nav .msys__name{font-size:21px;color:#fff}
  .site-nav .msys__sub{margin-top:4px;font-size:15px;color:#b9b5af}
  .site-nav .msys__rule{margin:12px 0 10px;width:36px}
  .site-nav .msys__desc{font-size:15px;color:#dcd8d2}
  .site-nav .msys__go{color:#ff9d52}
  .site-nav .nav-list .msys .msys__col>a.msys__link:hover .msys__name,.site-nav .nav-list .msys .msys__col>a.msys__link:focus-visible .msys__name{color:#ff9d52}
  .site-nav .msys__tools{display:block;padding:16px 0 4px;border-top:0}
  .site-nav .msys__tools-h{margin:0 0 10px;font-size:15px;color:#b9b5af}
  .site-nav .msys__tools-list{grid-template-columns:minmax(0,1fr);gap:10px}
  .site-nav .nav-list .msys a.msys__tool,.site-nav .nav-list .msys a.msys__tool:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);box-shadow:none;color:#fff}
  .site-nav .msys__tt span{color:#dcd8d2}
}

/* Nov 6: eight top-level tabs were wider than the room between the logo and the phone button below ~1530px,
   so "Residential" ran under the logo and "Contact" under the phone. Close the tab gap (22px) there. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  body .site-header .nav-list { gap: 10px; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  body .site-header .nav-list { gap: 12px; }
  body .site-header .nav-list > li > :is(a, button.nav-tab) { font-size: 14px; letter-spacing: 0; }
}

/* Owner Nov 6: menu panels keep the original dark glass background; Systems text columns recoloured for it. */
@media (min-width:1280px){
  .msys__col{border-left-color:rgba(255,255,255,.13)}
  .msys__name{color:#fff}
  .msys__sub{color:rgba(245,243,239,.62)}
  .msys__desc{color:rgba(245,243,239,.86)}
  .msys__go{color:var(--orange)}
  .nav-list .msys .msys__col>a.msys__link:hover .msys__name,.nav-list .msys .msys__col>a.msys__link:focus-visible .msys__name{color:var(--orange)}
  .msys__tools{border-top-color:rgba(255,255,255,.13)}
  .msys__tools-h{color:rgba(245,243,239,.62)}
  .nav-list .msys a.msys__tool,.nav-list .msys a.msys__tool:hover,.nav-list .msys a.msys__tool:focus-visible{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);box-shadow:none;color:#fff}
  .nav-list .msys a.msys__tool:hover,.nav-list .msys a.msys__tool:focus-visible{border-color:var(--orange)}
  .msys__tt span{color:rgba(245,243,239,.72)}
}

/* Owner Nov 6: Systems columns become full-photo cards with a glass caption panel (like the process step cards), tighter. */
@media (min-width:1280px){
  html body .nav-list .has-menu>.menu.menu--sys{width:min(900px,calc(100vw - 24px));padding:10px}
  .msys__cols{gap:10px}
  .msys__col,.msys__col:first-child{border-left:0}
  .nav-list .msys .msys__col>a.msys__card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:300px;padding:10px;border-radius:12px;overflow:hidden;isolation:isolate}
  .msys__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .msys__card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%)}
  .nav-list .msys .msys__col>a.msys__card:hover .msys__img,.nav-list .msys .msys__col>a.msys__card:focus-visible .msys__img{transform:scale(1.04)}
  .msys__panel{display:block;padding:14px 16px 15px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:linear-gradient(135deg,rgba(40,40,44,.78),rgba(22,22,24,.86));-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .msys__panel .msys__rule{order:-1;width:24px;height:2px;margin:0 0 10px}
  .msys__panel{display:flex;flex-direction:column}
  .msys__panel .msys__name{font-size:19px;line-height:1.05}
  .msys__panel .msys__sub{margin-top:3px;font-size:12px;letter-spacing:.12em}
  .msys__panel .msys__desc{margin-top:8px;font-size:14px;line-height:1.4}
  .msys__panel .msys__go{margin-top:10px;font-size:12px}
  .msys__tools{gap:16px;padding:12px 4px 2px;border-top:0}
  .msys__tools-h{font-size:16px}
  .msys__tools-list{gap:10px}
  .nav-list .msys a.msys__tool{padding:8px 14px 8px 8px}
  .msys__tool img{width:64px;height:48px}
}
@media (min-width:1280px){
  .nav-list .msys .msys__col>a.msys__card{height:330px;padding:8px}
  .msys__panel{padding:11px 13px 12px}
  .msys__panel .msys__rule{width:20px;margin-bottom:8px}
  .msys__panel .msys__name{font-size:17px}
  .msys__panel .msys__sub{font-size:11px}
  .msys__panel .msys__desc{margin-top:6px;font-size:13px;line-height:1.38;color:rgba(245,243,239,.8)}
  .msys__panel .msys__go{margin-top:8px;font-size:11px}
  .msys__tool img{object-fit:cover;background:#fff}
}
/* Owner Nov 6: Flake Colors tool shows the chip pile large, cut out, no box, floating for a 3D feel. */
@media (min-width:1280px){
  .nav-list .msys a.msys__tool{overflow:visible}
  .msys__tool img[src*="flake-pile-cutout"]{width:104px;height:104px;margin:-26px 4px -26px -6px;border-radius:0;background:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.35));transform:rotate(-8deg);transition:transform .35s ease}
  .nav-list .msys a.msys__tool:hover img[src*="flake-pile-cutout"],.nav-list .msys a.msys__tool:focus-visible img[src*="flake-pile-cutout"]{transform:rotate(-2deg) scale(1.06)}
  .msys__tools{padding-top:22px}
}
@media (max-width:1279.98px){
  .msys__tool img[src*="flake-pile-cutout"]{background:none;border-radius:0;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
}
/* Owner Nov 6: Visualizer tool gets the same floating 3D treatment as the flake pile: a before/after floor slab, cut out, no box. */
@media (min-width:1280px){
  .msys__tool img[src*="viz-slab"]{width:112px;height:112px;margin:-30px 0 -30px -8px;border-radius:0;background:none;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));transform:rotate(-4deg);transition:transform .35s ease}
  .nav-list .msys a.msys__tool:hover img[src*="viz-slab"],.nav-list .msys a.msys__tool:focus-visible img[src*="viz-slab"]{transform:rotate(0) translateY(-3px) scale(1.05)}
}
@media (max-width:1279.98px){
  .msys__tool img[src*="viz-slab"]{background:none;border-radius:0;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
}
@media (min-width:1280px){.msys__tool img[src*="viz-slab"]{width:128px;height:128px;margin:-38px -6px -38px -14px}}

/* Signature "3D" treatment (owner, Nov 6): like SaaS products mark their AI features, every 3D entry gets a gradient cube badge,
   a gradient border that slowly turns, and a soft glow. Static under reduced motion. */
@property --b3d-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.b3d{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-right:8px;filter:drop-shadow(0 1px 3px rgba(248,112,0,.55))}
.b3d svg{display:block;width:18px;height:18px}
.is-3d{position:relative;isolation:isolate}
a.is-3d:not(#_),button.is-3d:not(#_){display:inline-flex;align-items:center}
.h-viz__alt.is-3d:not(#_){margin-top:16px;padding:10px 18px 10px 12px;border:2px solid transparent;border-radius:999px;text-decoration:none;color:#fff;
  background:linear-gradient(#1b1b1b,#1b1b1b) padding-box,conic-gradient(from var(--b3d-a),#f87000,#ffd28a,#ff7a00,#7a3700,#f87000) border-box;box-shadow:0 0 24px -6px rgba(248,112,0,.55)}
.vz-mode a.is-3d:not(#_){gap:0;border:1.5px solid transparent;background:linear-gradient(#141414,#141414) padding-box,conic-gradient(from var(--b3d-a),#f87000,#ffd28a,#ff7a00,#7a3700,#f87000) border-box;color:#fff}
.vz-mode a.is-3d[aria-current="page"]:not(#_){background:linear-gradient(135deg,#ff9a3c,#f87000) padding-box,conic-gradient(from var(--b3d-a),#ffd28a,#fff,#ffd28a,#f87000,#ffd28a) border-box;color:#141414}
body .lb .pk-seg button.pk-opt.is-3d.is-3d:not(#_):not(#_){padding-left:14px;background:linear-gradient(rgba(20,20,20,.86),rgba(20,20,20,.86)) padding-box,conic-gradient(from var(--b3d-a),#f87000,#ffd28a,#ff7a00,#7a3700,#f87000) border-box;border:2px solid transparent;border-radius:0 999px 999px 0}
body .lb .pk-seg button.pk-opt.is-3d.is-3d:not(#_):not(#_)[aria-pressed="true"]{background:linear-gradient(135deg,#ff9a3c,#f87000) padding-box,conic-gradient(from var(--b3d-a),#ffd28a,#fff,#ffd28a,#f87000,#ffd28a) border-box;color:#141414!important;-webkit-text-fill-color:#141414}
@media (prefers-reduced-motion:no-preference){.is-3d{animation:b3dSpin 6s linear infinite}}
@keyframes b3dSpin{to{--b3d-a:360deg}}
.is-3d:hover .b3d{transform:rotate(-8deg) scale(1.08);transition:transform .25s ease}

/* Nov 10: phone/tablet Systems = same photo-card rows as Residential (one column, 150px, caption bottom-left, orange arrow).
   The desktop card rules above are min-width:1280px only, so the photo and caption panel were stacking at full size in the Menu sheet. */
@media (max-width:1279.98px){
  body .site-header .site-nav .menu--sys .msys{padding:14px 0 18px}
  body .site-header .site-nav .menu--sys .msys__cols{gap:10px}
  body .site-header .site-nav .menu--sys .msys__col{border:0}
  body .site-header .site-nav .nav-list .msys .msys__col>a.msys__card{position:relative;display:block;height:150px;padding:0;border-radius:12px;overflow:hidden;isolation:isolate;background:#141414}
  body .site-header .site-nav .msys__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
  body .site-header .site-nav .msys__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,.84) 100%)}
  html body .site-header .site-nav .menu--sys .msys__panel{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;padding:0 16px 12px;border:0;border-radius:0;background:none!important;background-image:none!important;background-color:transparent!important;box-shadow:none}
  body .site-header .site-nav .msys__panel .msys__name{font:700 19px/1.15 var(--font-body);letter-spacing:.005em;text-transform:none;color:#fff}
  body .site-header .site-nav .msys__panel .msys__sub,body .site-header .site-nav .msys__panel .msys__rule,body .site-header .site-nav .msys__panel .msys__desc{display:none}
  body .site-header .site-nav .msys__panel .msys__go{display:inline-flex;align-items:center;margin:0 0 0 8px;font-size:0;line-height:0}
  body .site-header .site-nav .msys__panel .msys__go .arr{width:.85rem;height:.85rem;font-size:19px;color:var(--orange)}
  body .site-header .site-nav .nav-list .msys .msys__col>a.msys__card:hover .msys__name,body .site-header .site-nav .nav-list .msys .msys__col>a.msys__card:focus-visible .msys__name{color:#fff}
}

/* black-glass.css */
/* Owner Nov 6: every gray glass background becomes black glass: #171717 (RGB 23,23,23) at 80% opacity, no blur. Loads last. */
:root{--black-glass:rgba(23,23,23,.8)}
html body :is(
  .nav-list .has-menu>.menu,
  .msys__panel,
  form.home-quote, form.est.nee-full, form.est.sfc-form,
  .service-photo__description, .h-pv__cap, .chip--photo, .step__txt, .faq-p__help,
  .h-art--faq .faq details, div.faq,
  .photo-slider__arrow, .photo-slider__caption, .svc-panel, .svc-strip, .lb-name, .svc-tile__name, .svc-tile__go,
  .vcard__play, .pg-vcap__t, .gal-vtab, .pg-case__panel, .project-copy, .project-meta,
  .vz-tools button, .vz-caption, .pa-glass, .ex-glass, .ex-tile__name
){background-color:var(--black-glass)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .compare__handle.arrow-blade{--arrow-surface:var(--black-glass)!important;background-color:var(--black-glass)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* phone: the menus open inside the Menu sheet, which stays as it is */
@media (max-width:1279.98px){html body .site-nav .nav-list .has-menu>.menu{background-color:transparent!important}}
/* Nov 10: the FAQ list on light (paper) sections was never gray glass. It keeps its light rows and dark text (services, exterior, pool deck, driveway, patio pages). */
html body .sec--paper.faq-p div.faq{background-color:transparent!important}

/* service-photos.css */
/* Photo service row, used only on home and services. */
.service-photos.sec{background:var(--ink);color:var(--white);padding-block:56px}
.service-photos .sec__head{margin-bottom:32px;text-align:left}
.service-photos h2,.service-photos .lead{color:var(--white)}
.service-photos__carousel{position:relative}
.service-photos__track{display:flex;gap:16px;list-style:none;margin:0;padding:4px 0;overscroll-behavior-x:contain;scrollbar-width:none}
.service-photos__track::-webkit-scrollbar{display:none}
.service-photos__track>li{flex:0 0 85%;min-width:0;scroll-snap-align:start}
.service-photo{position:relative;display:block;isolation:isolate;aspect-ratio:3/4;border-radius:var(--r-s);overflow:hidden;background:var(--ink);color:var(--white);text-decoration:none}
.service-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-photo::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(to bottom,var(--ink-alpha-0),var(--ink-alpha-95));z-index:1;pointer-events:none}
.service-photo .service-photo__name{position:absolute;z-index:2;bottom:0;left:0;right:0;margin:0;padding:24px 16px;font-size:var(--t-lead);line-height:1.15;text-transform:uppercase}
.service-photo__ending{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.service-photo__arrow{display:inline-flex;flex:none;color:var(--orange)}
.service-photo__arrow svg{display:block;width:28px;height:28px}
.service-photo .service-photo__description{position:absolute;z-index:2;inset:0 0 auto;margin:0;padding:22px 24px;background:var(--ink-alpha-78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--white);font-size:var(--t-lead);line-height:1.4;opacity:0;transform:translateY(-12px);transition:opacity var(--dur-300ms) var(--ease-ease-out),transform var(--dur-300ms) var(--ease-ease-out);pointer-events:none}
.service-photo:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.service-photo:focus-visible .service-photo__description,.service-photo.is-open .service-photo__description{opacity:1;transform:translateY(0)}
.service-photos__prev,.service-photos__next{display:none}
.service-photos .sv-ext-note,.service-photos .sv-links,.service-photos .sv-ext-note a,.service-photos .sv-links a{color:var(--white)}
@media(hover:hover) and (pointer:fine){.service-photo:hover .service-photo__description{opacity:1;transform:translateY(0)}}
@media(min-width:768px){
  .service-photos.sec{padding-block:80px}
  .service-photo .service-photo__name{padding:24px;font-size:var(--t-h3)}
  .service-photos__track{gap:24px}
  .service-photos__track>li{flex-basis:calc((100% - 48px)/3)}
  .service-photos__next{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid var(--white);border-radius:var(--pill);background:var(--ink);color:var(--white);cursor:pointer;transform:translateY(-50%);right:-24px}
  .service-photos__prev{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid var(--white);border-radius:var(--pill);background:var(--ink);color:var(--white);cursor:pointer;transform:translateY(-50%);left:-24px}
  .service-photos__next svg{width:24px;height:24px}
  .service-photos__prev svg{width:24px;height:24px;transform:rotate(180deg)}
  .service-photos__prev:focus-visible,.service-photos__next:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
  .service-photos__prev:disabled,.service-photos__next:disabled{opacity:.5;cursor:default}
}
@media(prefers-reduced-motion:reduce){.service-photo .service-photo__description{transition:none;transform:none}}
/* Keep this photo band readable under the shell's automatic band palette. */
main>.service-photos.sec{--palette-fg:var(--white);--palette-muted:var(--white)}
main>.service-photos.sec:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){background-color:var(--ink)}
.service-photos .service-photo__arrow{--palette-fg:var(--orange)}
/* Touch drape: first tap rolls it down over the card; the second tap (anywhere on it) follows the link; sliding up closes it. */
.service-photo__drape{display:none}
@media (hover:none),(pointer:coarse){
  body .service-photo>.caption--description,body .service-photo>.service-photo__description{display:none}
  body .service-photo>.service-photo__drape{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:24px;text-align:left;color:var(--white);background:rgba(20,20,20,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translateY(-102%);visibility:hidden;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,.8,.2,1),visibility 0s linear .5s}
  body .service-photo.is-open>.service-photo__drape{transform:none;visibility:visible;pointer-events:auto;transition:transform .5s cubic-bezier(.22,.8,.2,1),visibility 0s}
  body .service-photo>.card-label{transition:opacity .3s ease}
  body .service-photo.is-open>.card-label{opacity:0}
  .service-photo__drape .drape__text{margin:0;font:500 var(--t-lead)/1.4 var(--font-body);color:var(--white)}
  .service-photo__drape .drape__foot{display:flex;flex-direction:column;gap:14px}
  .service-photo__drape .drape__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .service-photo__drape .drape__title{font:800 var(--t-h3)/1.15 var(--font-body);color:var(--white)}
  .service-photo__drape .drape__go{display:inline-flex;flex:none;align-items:center;color:var(--orange)}
  .service-photo__drape .drape__go svg{display:block;width:22px;height:30px;opacity:.35;margin-left:-6px}
  .service-photo__drape .drape__go svg:first-child{margin-left:0}
  .service-photo.is-open .drape__go svg{animation:drape-pulse 1.3s ease-in-out infinite}
  .service-photo.is-open .drape__go svg:last-child{animation-delay:.22s}
  .service-photo__drape .drape__close{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--white)}
  .service-photo__drape .drape__close svg{display:block;width:160px;max-width:100%;height:22px;opacity:.9}
  .service-photo__drape .drape__close small{font:500 12px/1.2 var(--font-body);letter-spacing:.04em;opacity:.8}
}
@keyframes drape-pulse{0%,100%{opacity:.3;transform:translateX(-3px)}50%{opacity:1;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  body .service-photo>.service-photo__drape,body .service-photo.is-open>.service-photo__drape{transition:none}
  .service-photo.is-open .drape__go svg{animation:none;opacity:1}
}