/* 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}
}

/* service-looks-bento.css */
/* "Choose Your Look" on the eight service pages: a dark mosaic of full-bleed, borderless tiles.
   Owner brief 2026-11-04: bold, imposing, a brand-palette bento board (one tall lead tile, a grid of smaller tiles
   beside it) in the restrained language of the home reviews frame: ink field, smoked-glass labels, Playfair for the
   voice, small tracked caps for data, orange only as a small accent. No icons, no outlined buttons, no centred card copy.

   Two bands share the one grid language and mirror each other:
     1. Flake blends: every tile is filled with the real flake texture; the lead blend is the tall tile on the left.
     2. Finished floors: full-bleed photographs; one tall photograph on the right.
   Each band holds exactly one tile that is a link ("View colors" -> ../flakes/, "View gallery" -> ../gallery/).

   Rules this file keeps:
   - Photos and textures are <img> (counted by the one-photo-per-page test); alt text is untouched; no captions from alt.
   - The flake textures are the manufacturer's full-resolution top-down swatches (img/flakes-hi/), which carry no printed
     frame or name, so they fill the tile edge to edge with no crop or scale.
   - Only the link tiles are interactive, so only they get a hover state. Hover changes colour/width only (no transform).
   - Reduced motion: no transitions at all; the page's shared reveal already resolves instantly.
   - Sizes follow the container (cqw), so the board keeps its proportions from 960px to the 1280px wrap.
   Rows/columns: >=960px 12 columns, 640-959px 4 columns, <640px 2 columns (lead tile full width). */

.service-looks .look-bento {
  container-type: inline-size;
  display: grid;
  gap: clamp(8px, .94cqw, 12px);
  margin-top: 8px;
  --lb-ink: #141414;
  --lb-panel: #1b1b1a;
  --lb-glass: rgba(14, 14, 14, .70);
  --lb-serif: var(--font-body);
}
.service-looks .look-bento .lb-band {
  --lb-gap: clamp(8px, .94cqw, 12px);
  display: grid;
  gap: var(--lb-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--lb-rows), 20cqw);
}
.service-looks .look-bento .lb-band--flakes { --lb-rows: 16; }
.service-looks .look-bento .lb-band--photos { --lb-rows: 15; }

/* ---------- tile base ---------- */
.service-looks .look-bento .lb-tile {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: var(--r-s);
  background: var(--lb-panel);
  isolation: isolate;
  min-width: 0;
  min-height: 0;
}
.service-looks .look-bento .lb-tile picture { display: contents; }
.service-looks .look-bento .lb-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

/* ---------- flake tiles ---------- */
.service-looks .look-bento .lb-flake img {
  object-position: 50% 50%;
}
.service-looks .look-bento .lb-flake::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 10, 10, .66), rgba(10, 10, 10, 0));
}
.service-looks .look-bento .lb-name {
  position: absolute;
  z-index: 2;
  top: clamp(10px, 4.2cqi, 20px);
  left: clamp(10px, 4.2cqi, 20px);
  max-width: calc(100% - 2 * clamp(10px, 4.2cqi, 20px));
  padding: .24em .52em .3em;
  border-radius: 6px;
  background: var(--lb-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--lb-serif);
  font-weight: 600;
  font-size: clamp(17px, 8.4cqi, 44px);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.service-looks .look-bento .lb-meta {
  position: absolute;
  z-index: 2;
  left: clamp(10px, 4.2cqi, 20px);
  right: clamp(10px, 4.2cqi, 20px);
  bottom: clamp(10px, 3.6cqi, 18px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.service-looks .look-bento .lb-meta .lb-coll { display: none; flex-basis: 100%; font-weight: 600; letter-spacing: .12em; opacity: .9; }
@container (min-width: 300px) {
  .lb-meta .lb-coll { display: block; }
}
@container (max-width: 190px) {
  .lb-meta { flex-direction: column; align-items: flex-start; }
}

/* ---------- photo tiles ---------- */
.service-looks .look-bento .lb-photo img { object-position: 50% 58%; }
.service-looks .look-bento .lb-photo img.is-port { object-position: 50% 66%; }
.service-looks .look-bento .lb-photo.lb-p1 img { object-position: 50% 54%; }

/* ---------- link tiles ---------- */
.service-looks .look-bento .lb-cta { background: var(--lb-panel); }
.service-looks .look-bento .lb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%);
}
.service-looks .look-bento .lb-cta > a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 5.2cqi, 28px);
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
}
.service-looks .look-bento .lb-cta > a,
.service-looks .look-bento .lb-cta > a:hover,
.service-looks .look-bento .lb-cta > a span { text-decoration: none; background-image: none; }
.service-looks .look-bento .lb-cta .lb-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.service-looks .look-bento .lb-cta .lb-eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--orange);
}
.service-looks .look-bento .lb-cta .lb-lede {
  display: block;
  max-width: 15em;
  font-family: var(--lb-serif);
  font-weight: 600;
  font-size: clamp(22px, 9cqi, 42px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.service-looks .look-bento .lb-cta .lb-go {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.service-looks .look-bento .lb-cta .lb-go::after {
  content: "";
  flex: none;
  width: 40px;
  height: 10px;
  /* a thin orange rule that ends in a small head: the one orange accent on the tile */
  background:
    linear-gradient(var(--orange), var(--orange)) left 50% / 100% 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right 1px top 0 / 2px 6px no-repeat;
  transition: width var(--dur-2) var(--ease-standard);
}
.service-looks .look-bento .lb-cta > a:focus-visible { outline: none; }
.service-looks .look-bento .lb-cta:has(> a:focus-visible) {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
@media (hover: hover) {
  .service-looks .look-bento .lb-cta { transition: background-color var(--dur-2) var(--ease-standard); }
  .service-looks .look-bento .lb-cta:hover { background: #262625; }
  .service-looks .look-bento .lb-cta:hover .lb-go::after { width: 64px; }
}

/* ---------- phone: 2 columns, lead tile full width ---------- */
.service-looks .look-bento .lb-f1 { grid-area: 1 / 1 / 5 / 3; }
.service-looks .look-bento .lb-f2 { grid-area: 5 / 1 / 8 / 2; }
.service-looks .look-bento .lb-f3 { grid-area: 5 / 2 / 8 / 3; }
.service-looks .look-bento .lb-f4 { grid-area: 8 / 1 / 11 / 2; }
.service-looks .look-bento .lb-f5 { grid-area: 8 / 2 / 11 / 3; }
.service-looks .look-bento .lb-f6 { grid-area: 11 / 1 / 14 / 3; }
.service-looks .look-bento .lb-band--flakes .lb-cta { grid-area: 14 / 1 / 17 / 3; }
.service-looks .look-bento .lb-p1 { grid-area: 1 / 1 / 7 / 3; }
.service-looks .look-bento .lb-p2 { grid-area: 7 / 1 / 10 / 3; }
.service-looks .look-bento .lb-p3 { grid-area: 10 / 1 / 13 / 2; }
.service-looks .look-bento .lb-p4 { grid-area: 10 / 2 / 13 / 3; }
.service-looks .look-bento .lb-band--photos .lb-cta { grid-area: 13 / 1 / 16 / 3; }

/* ---------- tablet: 4 columns ---------- */
@media (min-width: 640px) {
  .service-looks .look-bento .lb-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(var(--lb-rows), 11cqw);
  }
  .service-looks .look-bento .lb-band--flakes { --lb-rows: 9; }
  .service-looks .look-bento .lb-band--photos { --lb-rows: 7; }
  .service-looks .look-bento .lb-f1 { grid-area: 1 / 1 / 6 / 3; }
  .service-looks .look-bento .lb-f2 { grid-area: 1 / 3 / 3 / 5; }
  .service-looks .look-bento .lb-f3 { grid-area: 3 / 3 / 6 / 4; }
  .service-looks .look-bento .lb-f4 { grid-area: 3 / 4 / 6 / 5; }
  .service-looks .look-bento .lb-f5 { grid-area: 6 / 1 / 8 / 3; }
  .service-looks .look-bento .lb-f6 { grid-area: 6 / 3 / 8 / 5; }
  .service-looks .look-bento .lb-band--flakes .lb-cta { grid-area: 8 / 1 / 10 / 5; }
  .service-looks .look-bento .lb-p1 { grid-area: 1 / 3 / 6 / 5; }
  .service-looks .look-bento .lb-p2 { grid-area: 1 / 1 / 3 / 3; }
  .service-looks .look-bento .lb-p3 { grid-area: 3 / 1 / 6 / 3; }
  .service-looks .look-bento .lb-p4 { grid-area: 6 / 3 / 8 / 5; }
  .service-looks .look-bento .lb-band--photos .lb-cta { grid-area: 6 / 1 / 8 / 3; }
}

/* ---------- desktop: 12 columns, tall lead left (flakes) and right (photos) ---------- */
@media (min-width: 960px) {
  .service-looks .look-bento .lb-band {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, 6.9cqw);
  }
  .service-looks .look-bento .lb-f1 { grid-area: 1 / 1 / 7 / 5; }
  .service-looks .look-bento .lb-f2 { grid-area: 1 / 5 / 4 / 9; }
  .service-looks .look-bento .lb-f3 { grid-area: 1 / 9 / 4 / 11; }
  .service-looks .look-bento .lb-f4 { grid-area: 1 / 11 / 4 / 13; }
  .service-looks .look-bento .lb-f5 { grid-area: 4 / 5 / 7 / 7; }
  .service-looks .look-bento .lb-f6 { grid-area: 4 / 7 / 7 / 9; }
  .service-looks .look-bento .lb-band--flakes .lb-cta { grid-area: 4 / 9 / 7 / 13; }
  .service-looks .look-bento .lb-band--photos .lb-cta { grid-area: 1 / 1 / 4 / 5; }
  .service-looks .look-bento .lb-p2 { grid-area: 1 / 5 / 4 / 9; }
  .service-looks .look-bento .lb-p3 { grid-area: 4 / 1 / 7 / 5; }
  .service-looks .look-bento .lb-p4 { grid-area: 4 / 5 / 7 / 9; }
  .service-looks .look-bento .lb-p1 { grid-area: 1 / 9 / 7 / 13; }
}

@media (prefers-reduced-motion: reduce) {
  .service-looks .look-bento .lb-cta,
  .service-looks .look-bento .lb-cta .lb-go::after { transition: none; }
}

/* svc-frames.css */
/* Service pages: the repeated frames brought to the art direction of the home reviews carousel
   (owner 2026-11-04: ink field, real project photo full bleed, smoked-glass panel, Playfair for voice,
   small tracked caps for meta, orange only as a small accent, no icons, no bordered white cards).

   Covers, on the eight service pages:
     .svc-conf      Warranty and Pricing: one glass strip over a section photo, two hairline-divided columns
                    (+ the page's "what makes it last" lead-in folded in as the strip's first row)
     .svc-spaces    More Spaces: an ink bento of full-bleed tiles; the link boxes become a hairline row
     .svc-trust     Reviews and Job Details: hairline-separated figures over a vignetted photo
     .svc-process   numbered ink tiles with outlined numerals (garage "Our 5-Step Process", commercial installation)
     .svc-faq       FAQ on ink: the existing photo with a glass question column (accordion untouched)
     .svc-related   related services as a hairline index
   The section photos are CSS backgrounds (--svc-bg / --svc-bg-lg set on the section), never <img>, so the
   one-photo-per-page rule keeps counting only real photographs.
   Headings stay on the shared system (css/headings.css): section H2s and card H3s keep their face and size.
   Only the Choose Your Look mosaic, the Purpose-built systems drawing and the commercial projects block are untouched. */

body main :is(.svc-band, .svc-spaces, .svc-process, .svc-faq, .svc-related) {
  --svc-ink: #141414;
  --svc-ink-2: #1b1b1a;
  --svc-glass: rgba(12, 12, 12, .62);
  --svc-hair: rgba(255, 255, 255, .15);
  --svc-text: rgba(255, 255, 255, .86);
  --svc-serif: var(--font-body);
}

/* ------------------------------------------------------------------ photo bands (warranty, reviews) */
body main .svc-band { position: relative; isolation: isolate; overflow: hidden; background: var(--svc-ink); }
body main .svc-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-color: var(--svc-ink); background-image: var(--svc-bg); background-size: cover; background-position: 50% 58%; background-repeat: no-repeat;
}
@media (min-width: 900px) { body main .svc-band::before { background-image: var(--svc-bg-lg, var(--svc-bg)); } }
body main .svc-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--svc-ink) 0, rgba(20, 20, 20, 0) 26%, rgba(20, 20, 20, 0) 74%, var(--svc-ink) 100%),
    radial-gradient(130% 95% at 50% 48%, rgba(10, 10, 10, .34) 0, rgba(10, 10, 10, .78) 100%);
}
body main .svc-trust::after {
  background:
    linear-gradient(180deg, var(--svc-ink) 0, rgba(20, 20, 20, 0) 30%, rgba(20, 20, 20, 0) 70%, var(--svc-ink) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(10, 10, 10, .70) 0, rgba(10, 10, 10, .92) 100%);
}
body main .svc-band h2 { color: #fff; }

/* ------------------------------------------------------------------ 1. warranty and pricing */
body main .svc-strip {
  max-width: 1060px; margin: 44px auto 0;
  background: rgba(12, 12, 12, .74);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-s);
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, .9), 0 20px 40px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--svc-text); text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body main .svc-strip { background: var(--svc-glass); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
}
body main .svc-lead { padding: clamp(26px, 3.4vw, 40px) clamp(22px, 4vw, 48px) clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--svc-hair); }
body main .svc-eyebrow { margin: 0 0 22px; font: 700 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
body main .svc-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
body main .svc-points li { margin: 0; padding: 4px clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--svc-hair); min-width: 0; }
body main .svc-points li:first-child { padding-left: 0; border-left: 0; }
body main .svc-points h3 { margin: 0; color: #fff; text-wrap: balance; }
body main .svc-lead__story:not(#_):not(#_):not(#_) { margin: 28px 0 0; max-width: 64ch; font: 400 clamp(18px, 1.55vw, 21px)/1.55 var(--svc-serif); color: rgba(255, 255, 255, .9); }

body main .svc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body main .svc-cols > * { margin: 0; padding: clamp(26px, 3.6vw, 44px) clamp(22px, 4vw, 48px); background: none; border-radius: 0; min-width: 0; }
body main .svc-cols > * + * { border-left: 1px solid var(--svc-hair); }
body main .svc-cols h3 { margin: 0 0 14px; color: #fff; }
body main .svc-cols p:not(#_):not(#_):not(#_) { margin: 0; max-width: 40ch; font: 500 18px/1.55 var(--font-body); color: var(--svc-text); }
body main .svc-cols a.cta-text {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 0;
  font: 700 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none;
}

/* ------------------------------------------------------------------ 3. reviews and job details */
body main .svc-trust { padding-block: clamp(64px, 8vw, 104px); }
body main .svc-figs { display: grid; grid-template-columns: var(--svc-cols, repeat(3, minmax(0, 1fr))); gap: 0; margin: 48px 0 0; text-align: left; align-items: stretch; }
body main .svc-figs--2 { --n: 2; }
body main .svc-figs--3 { --n: 3; }
body main .svc-figs--4 { --n: 4; }
body main .svc-fig {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; min-width: 0;
  padding: 6px clamp(18px, 3vw, 44px); border-left: 1px solid rgba(255, 255, 255, .2);
  color: #fff; text-decoration: none;
}
body main .svc-fig:first-child { padding-left: 0; border-left: 0; }
body main .svc-fig__n { display: block; font: 800 clamp(32px, 3.9vw, 56px)/.98 var(--font-head); font-stretch: 100%; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
body main .svc-figs--4 .svc-fig__n { font-size: clamp(26px, 2.8vw, 40px); }
body main .svc-fig__n { overflow-wrap: break-word; }
body main .svc-fig__s { display: block; max-width: 30ch; font: 500 16px/1.5 var(--font-body); color: var(--svc-text); }
body main .svc-fig--stars .service-stars { display: flex; gap: 6px; color: var(--orange); }
body main .svc-fig--stars .service-stars svg { width: clamp(26px, 2.5vw, 34px); height: clamp(26px, 2.5vw, 34px); fill: currentColor; }
body main .svc-fig--stars .svc-fig__n { font: 700 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-top: 6px; }
body main .svc-fig--stars:hover .svc-fig__n { color: #fff; }
body main .svc-fig--stars { min-height: 44px; }

body main .svc-why { margin: 0 0 clamp(52px, 6vw, 84px); }
body main .svc-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 40px 0 0; padding: 0; text-align: left; }
body main .svc-why__list li { margin: 0; padding: 4px clamp(18px, 3vw, 44px); border-left: 1px solid rgba(255, 255, 255, .2); min-width: 0; }
body main .svc-why__list li:first-child { padding-left: 0; border-left: 0; }
body main .svc-why__list h3 { margin: 0 0 12px; color: #fff; }
body main .svc-why__list p:not(#_):not(#_):not(#_) { margin: 0; max-width: 34ch; font: 500 17px/1.55 var(--font-body); color: var(--svc-text); }

/* ------------------------------------------------------------------ 2. more spaces */
body main .svc-spaces { background: var(--svc-ink); padding-block: clamp(56px, 7vw, 88px); }
body main .svc-bento {
  --svc-row: clamp(180px, 21vw, 300px); --svc-gap: clamp(8px, .94vw, 12px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--svc-row));
  gap: var(--svc-gap); margin-top: 40px;
}
body main .svc-t1 { grid-column: 1 / 6; grid-row: 1 / 3; }
body main .svc-t2 { grid-column: 6 / 13; grid-row: 1; }
body main .svc-t3 { grid-column: 6 / 10; grid-row: 2; }
body main .svc-t4 { grid-column: 10 / 13; grid-row: 2; }
body main .svc-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate; min-width: 0; min-height: 0;
  border-radius: var(--r-s); background: #1b1b1a; color: #fff; text-decoration: none;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85);
}
body main .svc-tile picture { display: contents; }
body main .svc-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 58%; }
body main .svc-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 10, 10, .58) 0, rgba(10, 10, 10, 0) 38%), linear-gradient(180deg, rgba(10, 10, 10, .30) 0, rgba(10, 10, 10, 0) 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
body main .svc-tile__name {
  position: absolute; z-index: 2; top: clamp(10px, 1.5vw, 20px); left: clamp(10px, 1.5vw, 20px); max-width: calc(100% - 2 * clamp(10px, 1.5vw, 20px));
  padding: .24em .56em .3em; border-radius: 6px; background: rgba(14, 14, 14, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 clamp(16px, 1.55vw, 24px)/1.12 var(--svc-serif); letter-spacing: -.005em; color: #fff; text-wrap: balance;
}
body main .svc-tile__go {
  position: absolute; z-index: 2; right: clamp(10px, 1.5vw, 20px); bottom: clamp(10px, 1.5vw, 20px);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(14, 14, 14, .55); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--dur-2, .25s) var(--ease-out, ease), color var(--dur-2, .25s) var(--ease-out, ease);
}
body main .svc-tile__go svg { display: block; width: 20px; height: 20px; }
@media (hover: hover) {
  body main .svc-tile:hover .svc-tile__go, body main .svc-tile:focus-visible .svc-tile__go { background: #fff; color: var(--svc-ink); }
}
body main .svc-tile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* the hairline footer row (the old bordered link boxes) */
body main .svc-footrow { margin-top: clamp(36px, 4vw, 56px); }
body main .svc-linkrow, body main .svc-related .related-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; align-items: start;
}
body main .svc-linkrow li { margin: 0; padding: 0; display: block; }
body main .svc-linkrow a.related-card:not(#_):not(#_) {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; margin: 0; padding: 18px 2px 16px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: none; color: #fff; text-decoration: none;
  font: 700 13px/1.35 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  transition: border-color var(--dur-2, .25s) var(--ease-out, ease);
}
body main .svc-linkrow a.related-card:not(#_):not(#_)::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; letter-spacing: 0; }
@media (hover: hover) { body main .svc-linkrow a.related-card:not(#_):not(#_):hover { border-top-color: #fff; background: none; } }
body main .svc-linkrow .related-card__t { display: grid; gap: 6px; min-width: 0; }
body main .svc-linkrow .related-card__d { font: 400 15px/1.4 var(--svc-serif); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .72); }
body main .svc-footrow .sfc-today:not(#_):not(#_):not(#_) { margin: 28px 0 0; font: 500 18px/1.5 var(--font-body); color: var(--svc-text); }
body main .svc-footrow .sfc-today a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* related services (garage, basement): the same hairline index on ink */
body main .svc-related { background: var(--svc-ink-2); padding-block: clamp(52px, 6vw, 80px); }
body main .svc-related .sec__head { text-align: center; margin-inline: auto; }
body main .svc-related .related-cards { margin-top: 36px; }
body main .svc-related :is(.garage-today, .landing-need-today) { margin-top: 32px; color: var(--svc-text); }

/* ------------------------------------------------------------------ 4. process steps */
body main .svc-process { background: var(--svc-ink-2); padding-block: clamp(56px, 7vw, 88px); }
body main .svc-process.svc-process--in { margin-top: clamp(56px, 7vw, 80px); background: none; padding-block: 0; }
body main .svc-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
  list-style: none; margin: 40px 0 0; padding: 0;
}
body main .svc-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Penntek-style: a square looping clip, the words underneath */
body main .svc-step { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; text-align: left; color: #fff; background: none; box-shadow: none; }
body main .svc-step .step__img { position: relative; margin: 0 0 18px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-s); background: #1f1f1e; box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .9); }
body main .svc-step .step__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
body main .svc-step h3:not(#_):not(#_):not(#_) { margin: 0 0 8px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.2; color: #fff; text-wrap: balance; }
body main .svc-step h3::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 12px; background: var(--orange); }
body main .svc-step p:not(#_):not(#_):not(#_) { margin: 0; max-width: 40ch; font: 500 15px/1.5 var(--font-body); color: var(--svc-text); }
body main .svc-process__note:not(#_):not(#_):not(#_) { max-width: 70ch; margin: 28px 0 0; font: 400 clamp(18px, 1.55vw, 21px)/1.55 var(--svc-serif); color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------------------ 5. FAQ on ink */
body main .svc-faq { background: var(--svc-ink); padding-block: clamp(56px, 7vw, 88px); }
body main .svc-faq .faq-p__grid {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.4fr); gap: 0; align-items: stretch;
  margin-top: 40px; overflow: hidden; border-radius: var(--r-s); background: #1b1b1a;
  box-shadow: 0 44px 90px -44px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
body main .svc-faq .faq-p__aside {
  position: static; top: auto; z-index: 1; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(14px, 1.8vw, 24px); background: none; border-radius: 0; overflow: visible;
}
body main .svc-faq .faq-p__photo { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; min-height: 0; background: #1b1b1a; }
body main .svc-faq .faq-p__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .72) 100%), linear-gradient(0deg, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, 0) 45%); }
body main .svc-faq .faq-p__photo picture { display: block; width: 100%; height: 100%; }
body main .svc-faq .faq-p__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body main .svc-faq .faq-p__help {
  padding: clamp(20px, 2.2vw, 28px); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-s);
  background: rgba(12, 12, 12, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8);
}
body main .svc-faq .faq-p__t:not(#_):not(#_):not(#_) { font: 700 13px/1.3 var(--font-body); letter-spacing: .2em; color: rgba(255, 255, 255, .78); margin: 0 0 12px; }
body main .svc-faq .faq-p__lead:not(#_):not(#_):not(#_) { font: 400 18px/1.5 var(--svc-serif); color: rgba(255, 255, 255, .92); margin: 0 0 20px; }
body main .svc-faq .faq-p__hours:not(#_):not(#_):not(#_) { font: 600 14px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

body main .svc-faq.faq-p .faq, body main .svc-faq.faq-p .faq {
  grid-column: 2; grid-row: 1; z-index: 1; margin: clamp(14px, 1.8vw, 24px); padding: clamp(6px, 1vw, 14px) 0;
  border: 1px solid rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-s);
  background: rgba(12, 12, 12, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85);
}
body main .svc-faq.faq-p .faq details { background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); border-radius: 0; }
body main .svc-faq.faq-p .faq details:last-child { border-bottom-color: transparent; }
body main .svc-faq.faq-p .faq details + details { margin-top: 0; }
body main .svc-faq.faq-p .faq details[data-m-open] { background: rgba(255, 255, 255, .06); border-color: transparent; border-bottom-color: rgba(255, 255, 255, .13); border-radius: 0; }
body main .svc-faq.faq-p .faq details > summary:not(#_):not(#_):not(#_) { color: #fff; }
body main .svc-faq.faq-p .faq details[data-m-open] > summary:not(#_):not(#_):not(#_) { color: #fff; }
body main .svc-faq.faq-p .faq details > summary:not(#_):not(#_):not(#_)::before { color: rgba(255, 255, 255, .55); }
body main .svc-faq.faq-p .faq details[data-m-open] > summary:not(#_):not(#_):not(#_)::before { color: var(--orange); }
@media (hover: hover) {
  body main .svc-faq.faq-p .faq details:not([data-m-open]) > summary:hover { background: rgba(255, 255, 255, .05); }
  body main .svc-faq.faq-p .faq details:not([data-m-open]) > summary:hover::before { color: #fff; }
}
body main .svc-faq.faq-p .faq details > summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
body main .svc-faq.faq-p .faq details p:not(#_) { color: rgba(255, 255, 255, .88); }
body main .svc-faq.faq-p .faq details a:not(.btn) { color: #fff; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 1023.98px) {
  body main .svc-linkrow, body main .svc-related .related-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body main .svc-faq .faq-p__grid { grid-template-columns: minmax(0, 1fr); }
  body main .svc-faq .faq-p__aside { position: relative; grid-column: 1; grid-row: 1; min-height: 0; padding-top: clamp(170px, 34vw, 300px); }
  body main .svc-faq.faq-p .faq, body main .svc-faq.faq-p .faq { grid-column: 1; grid-row: 2; margin: 0 clamp(12px, 2vw, 20px) clamp(12px, 2vw, 20px); }
  body main .svc-faq .faq-p__photo { position: absolute; inset: 0; z-index: 0; }
  body main .svc-faq .faq-p__help { position: relative; z-index: 1; }
  body main .svc-faq .faq-p__aside { isolation: isolate; }
}
@media (max-width: 899.98px) {
  body main .svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
  body main .svc-tile { aspect-ratio: 4 / 3; grid-column: auto; grid-row: auto; }
  body main .svc-t1, body main .svc-t2 { grid-column: 1 / -1; }
  body main .svc-t1 { aspect-ratio: 5 / 4; }
  body main .svc-t2 { aspect-ratio: 16 / 9; }
  body main .svc-t3, body main .svc-t4 { aspect-ratio: 1 / 1; }
  body main .svc-steps, body main .svc-steps--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body main .svc-steps .svc-step { grid-column: span 2; }
  body main .svc-steps--5 .svc-s4, body main .svc-steps--5 .svc-s5 { grid-column: span 3; }
  body main .svc-figs, body main .svc-figs--3, body main .svc-figs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  body main .svc-figs .svc-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
  body main .svc-why__list { grid-template-columns: minmax(0, 1fr); }
  body main .svc-why__list li, body main .svc-why__list li:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  body main .svc-why__list li:first-child { border-top: 0; padding-top: 4px; }
}
@media (max-width: 767.98px) {
  body main .svc-strip { margin-top: 32px; }
  body main .svc-points { grid-template-columns: minmax(0, 1fr); }
  body main .svc-points li, body main .svc-points li:first-child { padding: 16px 0; border-left: 0; border-top: 1px solid var(--svc-hair); }
  body main .svc-points li:first-child { border-top: 0; padding-top: 0; }
  body main .svc-cols { grid-template-columns: minmax(0, 1fr); }
  body main .svc-cols > * + * { border-left: 0; border-top: 1px solid var(--svc-hair); }
  body main .svc-cols p { max-width: none; }
  body main .svc-figs, body main .svc-figs--3, body main .svc-figs--4 { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 32px; }
  body main .svc-figs .svc-fig, body main .svc-figs .svc-fig:first-child, body main .svc-figs .svc-fig:nth-child(odd) { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  body main .svc-figs .svc-fig:first-child { border-top: 0; padding-top: 4px; }
  body main .svc-linkrow, body main .svc-related .related-cards { grid-template-columns: minmax(0, 1fr); }
  body main .svc-steps, body main .svc-steps--5 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body main .svc-steps .svc-step, body main .svc-steps--5 .svc-s4, body main .svc-steps--5 .svc-s5 { grid-column: 1 / -1; }
  body main .svc-step .step__img { aspect-ratio: 4 / 3; }
  body main .svc-faq.faq-p .faq details > summary:not(#_):not(#_):not(#_) { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  body main .svc-tile__go, body main .svc-linkrow a.related-card { transition: none; }
}

/* the basement guide column is 840px wide; the related index takes the full wrap */
body main .svc-related .wrap.basement-guide__copy:not(#_) { max-width: var(--wrap); }
body main .svc-fig.service-rating:not(#_) { align-items: flex-start; text-align: left; gap: 14px; }

/* svc-stage.css */
/* Service pages: "What it includes" as a stage, and the commercial application bento.

   .svc-stage  The shared photo slider runs full bleed behind a smoked-glass panel that carries the heading, the lead
               paragraph(s) and the bullets. Whatever copy does not fit the panel follows as a readable ink column.
               The slider keeps its engine (js/site.js): arrows, dots, swipe, keyboard, status text.
   .svc-apps   Commercial: the four application bands become one ink bento of four tiles of varied size.
               Photos are ones the site already owns and none is shown elsewhere on the page. The dealership line has no
               photo of its own (the Subaru and showroom photos are still owed by the client), so that tile is a note,
               never a stand-in. The existing sentence is the Playfair caption.
   Section H2s and card H3s stay on the shared heading system. */

/* ------------------------------------------------------------------ stage */
body main .svc-stage { --svc-serif: var(--font-body); background: #141414; padding: 0; overflow: hidden; }
body main .svc-stage__frame { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, 47vw, 700px); padding-block: clamp(36px, 5vw, 64px); }
body main .svc-stage__wrap { position: relative; z-index: 3; width: 100%; }

/* the slider shell fills the frame */
body main .svc-stage__frame > .photo-slider-shell {
  position: absolute; inset: 0; z-index: 0; width: auto; max-width: none; margin: 0 !important; padding: 0; overflow: hidden; background: #141414;
}
body main .svc-stage__frame > .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0;
}
body main .svc-stage__frame > .photo-slider-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 10, .72) 0, rgba(10, 10, 10, .34) 46%, rgba(10, 10, 10, 0) 78%), linear-gradient(0deg, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, 0) 30%);
}
body main .svc-stage .photo-slider__slide img { object-fit: cover; }

/* glass panel */
body main .svc-panel {
  position: relative; z-index: 3; width: min(100%, 560px); margin: 0; padding: clamp(24px, 3vw, 42px);
  background: rgba(12, 12, 12, .74); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-s);
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, .9), 0 20px 40px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88); text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body main .svc-panel { background: rgba(12, 12, 12, .62); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
}
body main .svc-panel h2 { color: #fff; margin-top: 0; }
body main .svc-panel p:not(#_):not(#_):not(#_) { margin: 0 0 14px; font: 500 17px/1.55 var(--font-body); color: rgba(255, 255, 255, .88); }
body main .svc-panel .list { margin: 18px 0 0; padding: 0; font: 500 17px/1.5 var(--font-body); color: #fff; }
body main .svc-panel .list li { color: #fff; }
body main .svc-panel a { color: #fff; }

/* ink column for the rest of the copy */
body main .svc-stage__tailwrap { padding-block: clamp(40px, 5vw, 64px); }
body main .svc-tail { max-width: 880px; margin-inline: auto; color: rgba(255, 255, 255, .88); text-align: left; }
body main .svc-tail p:not(#_):not(#_):not(#_) { margin: 0 0 16px; font: 500 18px/1.6 var(--font-body); color: rgba(255, 255, 255, .88); }
body main .svc-tail p:last-child:not(#_) { margin-bottom: 0; }
body main .svc-tail a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body main .svc-tail h3 { margin: 28px 0 10px; color: #fff; }
body main .svc-tail .step { margin-top: 28px; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); background: none; box-shadow: none; }
body main .svc-tail .step h3 { margin-top: 0; }
body main .svc-tail [data-landing-need-it-today] { font-size: 16px; }
body main .svc-tail [data-landing-need-it-today] a { display: inline-flex; align-items: center; min-height: 44px; }
body main .svc-tail #lighting-guide { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }

/* controls: a quiet cluster at the foot of the photo */
body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) {
  position: absolute; top: auto; left: auto; transform: none; bottom: clamp(18px, 2.4vw, 32px); z-index: 4; margin: 0;
  background: rgba(14, 14, 14, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body main .svc-stage .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { right: clamp(18px, 2.4vw, 32px); }
body main .svc-stage .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { right: calc(clamp(18px, 2.4vw, 32px) + 72px); }
@media (hover: hover) {
  body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:hover:not(:disabled):not(#_):not(#_):not(#_) { background: #fff; color: #141414; border-color: #fff; }
}
body main .svc-stage .photo-slider__dots button:not(#_):not(#_):not(#_)::before { background: #fff; opacity: .5; }
body main .svc-stage .photo-slider__dots button[aria-current="true"]:not(#_):not(#_):not(#_)::before { opacity: 1; background: #fff; }
/* the authored slide caption: a Playfair line at the foot of the photo, away from the panel */
body main .svc-stage .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
  position: absolute; left: auto; right: clamp(18px, 2.4vw, 32px); bottom: calc(clamp(18px, 2.4vw, 32px) + 62px); top: auto; transform: none; z-index: 4; width: auto; max-width: min(420px, 40%);
  margin: 0; padding: 7px 12px 8px; border: 0; border-radius: 6px; background: rgba(14, 14, 14, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none;
  font: 400 16px/1.3 var(--svc-serif); letter-spacing: 0; text-align: left; color: #fff; white-space: normal; overflow: visible; text-overflow: clip;
}
body main .svc-stage .photo-slider-shell > .photo-slider__caption[hidden] { display: none; }

@media (max-width: 899.98px) {
  body main .svc-stage__frame { display: block; min-height: 0; padding: 0; }
  body main .svc-stage__frame > .photo-slider-shell { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  body main .svc-stage__frame > .photo-slider-shell::after { background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0, rgba(10, 10, 10, 0) 45%); }
  body main .svc-stage__wrap { margin-top: -72px; padding-bottom: 0; }
  body main .svc-panel { width: 100%; }
  body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) { bottom: 88px; }
  body main .svc-stage .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) { left: clamp(14px, 2vw, 24px); right: auto; bottom: 138px; max-width: calc(100% - 28px); }
}

/* ------------------------------------------------------------------ commercial applications */
body main .svc-apps { --svc-serif: var(--font-body); background: #141414; padding-block: 0 clamp(56px, 7vw, 88px); }
body main .svc-appbento {
  --svc-row: clamp(300px, 27vw, 400px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--svc-row)); gap: clamp(8px, .94vw, 12px);
}
body main .svc-a1 { grid-column: 1 / 8; grid-row: 1; }
body main .svc-a2 { grid-column: 8 / 13; grid-row: 1 / 3; }
body main .svc-a3 { grid-column: 1 / 5; grid-row: 2; }
body main .svc-a4 { grid-column: 5 / 8; grid-row: 2; }
body main .svc-app {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 0; margin: 0; scroll-margin-top: 110px;
  border-radius: var(--r-s); background: #1b1b1a; color: #fff;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
body main .svc-app > img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 62%; }
body main .svc-app:not(.svc-app--note)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0, rgba(10, 10, 10, .12) 52%, rgba(10, 10, 10, .28) 100%); }
body main .svc-app--note { background: radial-gradient(120% 100% at 100% 0, rgba(255, 255, 255, .085) 0, rgba(255, 255, 255, 0) 60%), #1f1f1e; }
body main .svc-app__name:not(#_):not(#_):not(#_) {
  position: absolute; top: clamp(10px, 1.5vw, 20px); left: clamp(10px, 1.5vw, 20px); max-width: calc(100% - 2 * clamp(10px, 1.5vw, 20px)); margin: 0;
  padding: .24em .56em .3em; border-radius: 6px; background: rgba(14, 14, 14, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 clamp(17px, 1.7vw, 26px)/1.12 var(--svc-serif); letter-spacing: -.005em; color: #fff; text-wrap: balance;
}
body main .svc-app__line:not(#_):not(#_):not(#_) {
  position: absolute; left: clamp(10px, 1.5vw, 20px); right: clamp(10px, 1.5vw, 20px); bottom: clamp(10px, 1.5vw, 20px); margin: 0;
  padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 22px); border-radius: var(--r-s); background: rgba(12, 12, 12, .58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12);
  font: 400 clamp(16px, 1.3vw, 18px)/1.5 var(--svc-serif); color: rgba(255, 255, 255, .94);
}
body main .svc-app--note .svc-app__line:not(#_):not(#_):not(#_) { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.45; bottom: clamp(20px, 2.4vw, 34px); left: clamp(18px, 2.4vw, 34px); right: clamp(18px, 2.4vw, 34px); }

@media (max-width: 899.98px) {
  body main .svc-appbento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body main .svc-app { grid-column: auto !important; grid-row: auto !important; min-height: 440px; }
  body main .svc-a2 { min-height: 500px; }
  body main .svc-app__line:not(#_):not(#_):not(#_) { font-size: 16px; }
}
/* The wrap spans the photo; only the glass panel takes the pointer, so the photo still drags and its arrows still hover. */
body main .svc-stage__wrap { pointer-events: none; }
body main .svc-stage__wrap .svc-panel { pointer-events: auto; }