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

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

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

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

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

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

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

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

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

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

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

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

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

/* home-viz.css */
/* Home page floor visualizer: a framed, lite editor (js/home-viz.js). Loaded after every other stylesheet.
   Sharp and flat: one hairline frame, one radius (--r-s), no glow, no shadow, no gradient. Orange marks the selected blend and the dot
   that says the preview is live; white marks the active choice in a segmented control. */

/* ---------- layout: editor on the left, copy on the right; one column under 900px ---------- */
.h-viz{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"app copy";gap:48px;align-items:center}
.h-viz__copy{grid-area:copy}
.h-viz__copy h2{text-wrap:balance}
.hv{grid-area:app}
.h-viz [hidden]{display:none}

/* ---------- the frame ---------- */
.hv{
  --hv-ground:color-mix(in srgb,var(--white) 5%,var(--ink));
  --hv-strip:color-mix(in srgb,var(--white) 9%,var(--ink));
  --hv-line:var(--paper-alpha-14);
  min-width:0;overflow:hidden;color:var(--on-dark);
  background:var(--hv-ground);border:1px solid var(--hv-line);border-radius:var(--r-s);
}

/* title strip */
.hv__bar{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;background:var(--hv-strip);border-bottom:1px solid var(--hv-line);font:600 var(--t-caption)/1.2 var(--font-body);white-space:nowrap}
.hv__title{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.01em}
.hv__title svg{flex:none;color:var(--paper-alpha-70)}
.hv__room{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--paper-alpha-70)}
.hv__room::before{content:"/";margin-right:12px;color:var(--paper-alpha-35)}
.hv__live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.04em;color:var(--paper-alpha-70)}
.hv__live i{width:8px;height:8px;border-radius:var(--r-circle);background:var(--paper-alpha-35);transition:background-color var(--dur-2) var(--ease-standard)}
[data-hv-state=loading] .hv__live i{background:var(--paper-alpha-70)}
[data-hv-state=ready] .hv__live i{background:var(--orange)}
[data-hv-state=ready] .hv__live{color:var(--on-dark)}

/* ---------- the picture ---------- */
.hv__stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hv__stage picture{display:contents}
.hv__poster,.hv__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.hv__canvas{opacity:0;transition:opacity var(--dur-3) var(--ease-standard)}
.hv__canvas.is-on{opacity:1}
[data-hv-busy] .hv__canvas.is-on{opacity:.55}
[data-hv-state=static] .hv__stage{cursor:default;touch-action:auto}
[data-hv-state=static] :is(.hv__split,.hv__tag,.hv__hint){display:none}

.hv__tag,.hv__hint{position:absolute;padding:6px 10px;border-radius:var(--r-s);background:var(--scrim-alpha-65);color:var(--white);font:700 12px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.hv__tag{top:12px}
.hv__tag--l{left:12px}
.hv__tag--r{right:12px}
.hv__hint{bottom:12px;left:0;right:0;width:max-content;margin-inline:auto;letter-spacing:.04em;text-transform:none;font-size:13px}

/* before / after handle: a 2px rule and a 44px grip. The grip turns orange while it is held. */
.hv__split{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;display:grid;place-items:center;cursor:ew-resize;touch-action:pan-y}
.hv__split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;box-sizing:border-box;background:var(--white);background-clip:padding-box;border-inline:1px solid var(--scrim-alpha-35)}
.hv__grip{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-circle);background:var(--white);color:var(--ink);border:1px solid var(--scrim-alpha-35);transition:background-color var(--dur-1) var(--ease-standard)}
[data-hv-drag] .hv__grip{background:var(--orange)}
.hv__split:focus-visible{outline:none}
.hv__split:focus-visible .hv__grip{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- controls ---------- */
.hv__tray{display:grid;gap:16px;padding:16px 16px 18px}
.hv__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* segmented control: one bar, one radius, the active choice filled white */
.hv__seg{display:inline-flex;overflow:hidden;border:1px solid var(--paper-alpha-20);border-radius:var(--r-s);background:var(--ink)}
.hv__seg a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;color:var(--paper-alpha-85);font:700 var(--t-caption)/1 var(--font-body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard)}
.hv__seg a+a{border-left:1px solid var(--paper-alpha-20)}
.hv__seg a:focus-visible{outline-offset:-3px}
.hv__seg a[aria-current]{background:var(--white);color:var(--ink)}
@media (hover:hover){.hv__seg a:not([aria-current]):hover{background:var(--paper-alpha-12);color:var(--white)}}

/* swatches */
.hv__pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.hv__sw{display:flex;gap:10px}
.hv__s{position:relative;flex:none;display:block;width:44px;height:44px;box-sizing:border-box;border:1px solid var(--paper-alpha-20);border-radius:var(--r-s);background:var(--paper-alpha-8) 50% 20%/130% auto no-repeat;outline:2px solid transparent;outline-offset:3px;transition:outline-color var(--dur-1) var(--ease-standard)}
.hv__s--metal{background:var(--hv-grad)}
.hv__s[aria-current]{outline-color:var(--orange);border-color:var(--orange)}
.hv__s:focus-visible{outline-color:var(--white);outline-width:3px}
/* name and code on hover or focus (pointer devices; the caption beside them always says it) */
.hv__s::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;padding:6px 10px;border-radius:var(--r-s);background:var(--white);color:var(--ink);font:700 13px/1.2 var(--font-body);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%);transition:opacity var(--dur-1) var(--ease-standard)}
.hv__s:first-child::after{left:0;transform:none}
.hv__s:last-child::after{left:auto;right:0;transform:none}
@media (hover:hover){.hv__s:hover::after{opacity:1;visibility:visible}}
.hv__s:focus-visible::after{opacity:1;visibility:visible}

.hv__cap{margin:0;min-width:0;text-align:right;line-height:1.25}
.hv__cap b{display:block;font:800 var(--t-body)/1.25 var(--font-body)}
.hv__cap span{display:block;margin-top:2px;color:var(--paper-alpha-70);font-size:var(--t-caption)}

/* ---------- copy column ---------- */
.h-viz__copy .btn{white-space:normal}
.h-viz__alt{display:inline-block;margin-top:16px;min-height:44px;padding:10px 0;font-weight:700;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.h-viz__alt:hover{color:var(--orange)}
.h-viz__alt:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- phones and tablets: copy, then the editor, then the button ---------- */
@media (max-width:899.98px){
  .h-viz{display:flex;flex-direction:column;gap:20px}
  .h-viz__copy{display:contents}
  .h-viz__copy h2{order:1;margin-bottom:0}
  .h-viz__copy p{order:2;margin:0 auto 4px;max-width:36em;text-align:center}
  .hv{order:3;width:100%;max-width:720px;margin-inline:auto}
  .h-viz__copy .btn{order:4;align-self:center}
  .h-viz__alt{order:5;align-self:center;margin-top:0}
}
@media (max-width:639.98px){
  .h-viz__copy .btn{align-self:stretch;width:100%}
  .hv__bar{gap:10px;padding:0 12px}
  .hv__tray{padding:12px 12px 16px;gap:14px}
  .hv__row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hv__seg{display:flex}
  .hv__seg a{flex:1 1 0;min-width:0;padding:0 8px}
  .hv__pick{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .hv__sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .hv__s{width:100%;height:44px}
  .hv__cap{text-align:left}
  .hv__tag{top:8px}
  .hv__tag--l{left:8px}
  .hv__tag--r{right:8px}
  .hv__hint{bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .hv *,.hv *::before,.hv *::after{transition:none}
}
@media (max-width:479.98px){.hv__room{display:none}}

/* ---------- the intro: the handle sweeps by itself, and one call to action sits over the picture ---------- */
.hv__intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:44px 16px 20px;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 54%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%),linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%)}
.hv__file{position:absolute}
.hv__cta{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hv__cam{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:var(--r-circle);background:var(--orange);color:var(--ink);transition:transform var(--dur-2) var(--ease-standard)}
.hv__cam svg{width:32px;height:32px}
.hv__cam::before{content:"";position:absolute;inset:0;border-radius:var(--r-circle);border:1.5px solid var(--orange);pointer-events:none;animation:hv-ring 2.8s var(--ease-standard) infinite}
@keyframes hv-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.75);opacity:0}}
.hv__cta:hover .hv__cam{transform:scale(1.05)}
.hv__cta:active .hv__cam{transform:scale(.97)}
.hv__file:focus-visible+.hv__cta .hv__cam,.hv__file:focus-visible+.hv__alt{outline:3px solid var(--white);outline-offset:4px}
.hv__cta-t{font:800 clamp(20px,2.4vw,26px)/1.15 var(--font-head);color:var(--white);text-shadow:0 1px 12px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.45);text-wrap:balance}
.hv__cta-s{font:500 var(--t-caption)/1.35 var(--font-body);color:var(--white);text-shadow:0 1px 10px rgba(0,0,0,.75)}
.hv__alt{display:none;pointer-events:auto;margin-top:10px;padding:8px 10px;color:var(--white);font:600 13px/1.2 var(--font-body);text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 8px rgba(0,0,0,.8);cursor:pointer}
@media (pointer:coarse){.hv__alt{display:block}}
/* while the handle sweeps it rides near the top so the call to action stays clear */
[data-hv-sweep] .hv__split{place-items:start center}
[data-hv-sweep] .hv__grip{margin-top:46px}
[data-hv-sweep] .hv__hint{display:none}
/* once the visitor takes the handle, the call to action settles into a compact bar under the picture */
.hv__stage.is-used .hv__intro{justify-content:flex-end;padding:0 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 38%)}
.hv__stage.is-used .hv__cta{flex-direction:row;gap:12px}
.hv__stage.is-used .hv__cam{width:44px;height:44px;margin:0}
.hv__stage.is-used .hv__cam svg{width:22px;height:22px}
.hv__stage.is-used .hv__cam::before{animation:none;opacity:0}
.hv__stage.is-used .hv__cta-t{font-size:15px;text-align:left}
.hv__stage.is-used :is(.hv__cta-s,.hv__alt){display:none}
.hv__stage.is-used .hv__hint{display:none}
[data-hv-state=static] .hv__stage{cursor:default}
@media (max-width:639.98px){
  .hv__intro{padding:58px 12px 6px}
  .hv__cam{width:64px;height:64px;margin-bottom:4px}
  .hv__cam svg{width:28px;height:28px}
  .hv__cta-t{font-size:18px;max-width:270px}
  .hv__cta-s{font-size:12.5px;max-width:250px}
  [data-hv-sweep] .hv__grip{margin-top:12px}
  .hv__alt{margin-top:2px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  .hv__cam::before{animation:none;opacity:.5;transform:scale(1.25)}
  .hv__cam{transition:none}
}
html.a11y-motion .hv__cam::before{animation:none;opacity:.5;transform:scale(1.25)}

/* home-art.css */
/* Home page art direction (owner 2026-11-04): every frame in the language of the reviews carousel.
   Ink field, real project photos full bleed, smoked-glass panels that carry the text, Playfair Display for the voice,
   small tracked caps for meta, orange only as a thin rule, a 6px dot or an arrow. Loaded after every other home stylesheet.
   Scope: the sections of index.html carrying .h-art (kit, sys, proc, area, flk, faq). Nothing here touches the hero (.hh),
   the reviews carousel or the before/after (.h-ba).
   - Playfair Display is declared by css/reviews-premium.css (same file the reviews frame uses).
   - Only existing words, figures and photos are used; no photo appears twice (the flake tiles are the manufacturer's
     full-resolution swatches, img/flakes-hi/, which have no printed frame, so they fill the tile uncropped).
   - Links that were outlined buttons are the shared .cta-text arrow link, set in tracked caps.
   - Motion: none added. Reveals stay on the shared .rv system; the layer drawings keep js/system-layers.js and js/home-proof.js. */

.h-art {
  --ha-ink: #141414;
  --ha-panel: #1b1b1a;
  --ha-glass: rgba(12, 12, 12, .64);
  --ha-glass-line: rgba(255, 255, 255, .14);
  --ha-hair: rgba(255, 255, 255, .13);
  --ha-soft: rgba(255, 255, 255, .78);
  --ha-serif: var(--font-body);
  --ha-gap: clamp(8px, .94vw, 12px);
  --ha-lift: 0 34px 60px -36px rgba(0, 0, 0, .9), 0 14px 26px -20px rgba(0, 0, 0, .65);
}
body main .h-art.sec--dark { background: var(--ha-ink); }

/* One arrow link everywhere an outlined button used to float: tracked caps, the shared orange arrow, 48px to tap. */
body main a.cta-text.h-art__link:not(#_):not(#_) {
  min-height: 48px; padding: 0; gap: 12px;
  font: 700 13px/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
}
body main .h-art--sys a.cta-text.h-art__link:not(#_):not(#_) { color: var(--white); }

/* A glass panel is dark, lightly blurred and edged by one hairline. */
.h-art .ha-glass {
  background: var(--ha-glass); border: 1px solid var(--ha-glass-line); border-radius: var(--r-s);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* =====================================================================
   1. Pro coatings vs hardware-store kits
   ===================================================================== */
body main .h-art--kit.h-proof:not(.h-proof--systems) { padding-bottom: 96px; border-top: 1px solid rgba(255, 255, 255, .07); }
.h-art--kit .sec__head .lead { color: var(--ha-soft); }
.h-art--kit .h-pv { gap: var(--ha-gap); }
.h-art--kit .h-pv__card {
  position: relative; display: grid; grid-template-areas: "f"; grid-template-rows: minmax(0, 1fr);
  border-radius: var(--r-s); overflow: hidden; background: var(--ha-panel); isolation: isolate;
  box-shadow: var(--ha-lift);
}
.h-art--kit .h-pv__card > * { grid-area: f; min-width: 0; }
.h-art--kit .h-pv__card::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, .08), inset 0 -120px 110px -90px rgba(0, 0, 0, .6);
}

/* figures: big condensed numerals, a tracked caps label, one line of voice */
.h-art--kit .h-pv__cap { color: #fff; padding: 0; column-gap: 16px; }
.h-art--kit .h-pv__v {
  font-size: clamp(64px, 7.4vw, 112px); line-height: .84; letter-spacing: -.035em; color: #fff;
}
.h-art--kit .h-pv__l {
  align-self: end; padding-bottom: .5em;
  font: 700 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.h-art--kit .h-pv__t {
  margin-top: 16px; max-width: 34ch;
  font: 400 19px/1.4 var(--ha-serif); letter-spacing: 0; color: #fff;
}

/* the drawing: the cap becomes the footer of the ink frame */
.h-art--kit .h-pv__card--thick { grid-template-areas: none; display: flex; flex-direction: column; }
.h-art--kit .h-pv__card--thick > * { grid-area: auto; }
.h-art--kit .h-pv__card--thick .h-pv__media { background: transparent; border-radius: 0; flex: 1 1 auto; }
.h-art--kit .h-pv__card--thick .h-pv__cap {
  flex: none; position: relative; z-index: 4; padding: 26px clamp(22px, 3vw, 40px) 30px;
  border-top: 1px solid var(--ha-hair);
}
.h-art--kit .h-pv__card--thick .h-pv__t { max-width: 46ch; }
.h-art--kit .h-pv__col b { font: 700 15px/1.2 var(--font-body); color: #fff; }
.h-art--kit .h-pv__col span { color: var(--ha-soft); }

/* the two photos: full bleed, the figure sits on a smoked-glass panel */
.h-art--kit .h-pv__card--wear,
.h-art--kit .h-pv__card--uv { min-height: 340px; }
.h-art--kit .h-pv__photo { position: relative; aspect-ratio: auto; height: 100%; min-height: inherit; background: var(--ha-panel); border-radius: 0; }
.h-art--kit .h-pv__photo picture { position: absolute; inset: 0; display: block; }
.h-art--kit .h-pv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.h-art--kit .h-pv__card--wear .h-pv__cap,
.h-art--kit .h-pv__card--uv .h-pv__cap {
  z-index: 4; align-self: end; justify-self: start; box-sizing: border-box;
  width: min(400px, calc(100% - 32px)); margin: 0 0 16px 16px; padding: 18px 22px 20px;
  background: var(--ha-glass); border: 1px solid var(--ha-glass-line); border-radius: var(--r-s);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.h-art--kit .h-pv__card--wear .h-pv__v,
.h-art--kit .h-pv__card--uv .h-pv__v { font-size: clamp(56px, 5.2vw, 76px); }
.h-art--kit .h-pv__card--wear .h-pv__t,
.h-art--kit .h-pv__card--uv .h-pv__t { font-size: 17px; margin-top: 12px; max-width: 36ch; }

.h-art--kit .h-stats__note { color: rgba(255, 255, 255, .7); }
.h-art--kit .h-proof__cta { margin-top: 12px; }

@media (min-width: 1180px) {
  .h-art--kit .h-pv { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .h-art--kit .h-pv__photo { aspect-ratio: auto; }
}
@media (min-width: 640px) and (max-width: 1179.98px) {
  .h-art--kit .h-pv__card--wear,
  .h-art--kit .h-pv__card--uv { min-height: 400px; }
}
@media (max-width: 639.98px) {
  body main .h-art--kit.h-proof:not(.h-proof--systems) { padding-bottom: 64px; }
  .h-art--kit .h-pv { gap: 8px; }
  .h-art--kit .h-pv__card--wear,
  .h-art--kit .h-pv__card--uv { min-height: 420px; }
  .h-art--kit .h-pv__card--wear .h-pv__cap,
  .h-art--kit .h-pv__card--uv .h-pv__cap { width: calc(100% - 24px); margin: 0 0 12px 12px; padding: 18px 18px 20px; }
  .h-art--kit .h-pv__v { font-size: 72px; }
  .h-art--kit .h-pv__l { font-size: 11px; }
  .h-art--kit .h-pv__t { font-size: 17px; }
  .h-art--kit .h-pv__card--thick .h-pv__cap { padding: 22px 20px 26px; }
  .h-art--kit .h-pv__key { border-top-color: var(--ha-hair); }
  .h-art--kit .h-proof__cta .btn { width: auto; }
}

/* =====================================================================
   2. What is in your floor (paper ground, three tall ink frames)
   ===================================================================== */
body main .h-art--sys.h-proof--systems { padding-top: 96px; padding-bottom: 96px; }
.h-art--sys .h-sys__grid { gap: var(--ha-gap); }
.h-art--sys .h-sys__card {
  position: relative; isolation: isolate; border: 0; border-radius: var(--r-s); background: var(--ha-ink);
  box-shadow: 0 40px 64px -38px rgba(0, 0, 0, .55), 0 16px 28px -20px rgba(0, 0, 0, .4);
}
.h-art--sys .h-sys__card::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 sits in a quiet glass plate at the head of the frame */
.h-art--sys .h-sys__fig {
  background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--ha-hair);
  padding: 28px 18px 24px;
}
.h-proof.h-art--sys .h-sys__fig .h-sys__lbl li { color: #fff; }
.h-proof.h-art--sys .h-sys__lname { color: #fff; font-weight: 700; }
.h-proof.h-art--sys .h-sys__ldesc { color: rgba(255, 255, 255, .72); }
.h-art--sys .h-sys__body { padding: 32px clamp(24px, 2.6vw, 36px) 30px; position: relative; }
.h-art--sys .h-sys__body::before { content: ""; display: block; width: 36px; height: 3px; margin: 0 0 18px; background: var(--orange); }
.h-art--sys .h-sys__name {
  font-size: clamp(30px, 2.9vw, 40px); line-height: .98; letter-spacing: -.02em; color: #fff; margin: 0 0 16px;
}
.h-art--sys .h-sys__card p {
  margin: 0; font: 400 19px/1.45 var(--ha-serif); letter-spacing: 0; color: rgba(255, 255, 255, .88);
}
.h-art--sys .h-sys__spec { display: block; margin: auto 0 14px; padding-top: 28px; }
.h-art--sys .h-sys__spec li {
  display: block; margin: 0; padding: 13px 0; border: 0; border-top: 1px solid var(--ha-hair); border-radius: 0;
  font: 700 12px/1.35 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86);
}
.h-art--sys .h-sys__spec li:last-child { border-bottom: 1px solid var(--ha-hair); }
.h-art--sys .h-sys__body .h-art__link { margin-top: 4px; align-self: flex-start; }

/* =====================================================================
   5. How a floor coating job works (dark bento: four full-bleed tiles)
   ===================================================================== */
.h-art--proc { padding-bottom: 96px; }
.h-art--proc .sec__head .lead { color: var(--ha-soft); }
.h-art--proc .h-proc {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 8px;
}
/* Penntek-style: a square looping clip, the words underneath */
.h-art--proc .h-proc .step { display: flex; flex-direction: column; min-width: 0; }
.h-art--proc .h-proc .step__img {
  position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-s); background: var(--ha-panel);
  box-shadow: var(--ha-lift);
}
.h-art--proc .h-proc .step__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-art--proc .h-proc .step__copy { padding: 18px 2px 0; }
.h-art--proc .h-proc .step__copy::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 0 12px; background: var(--orange); }
body main .h-art--proc .h-proc .step h3:not(#_):not(#_):not(#_) { margin: 0 0 6px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.15; letter-spacing: -.005em; color: #fff; }
body main .h-art--proc .h-proc .step p { margin: 0; font: 500 15px/1.5 var(--font-body); color: rgba(255, 255, 255, .8); max-width: 38ch; }
.h-art--proc .h-proc-cta { margin-top: 48px; }

@media (max-width: 1023.98px) {
  .h-art--proc .h-proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
  .h-art--proc { padding-bottom: 64px; }
  .h-art--proc .h-proc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .h-art--proc .h-proc .step__img { aspect-ratio: 4 / 3; }
  .h-art--proc .h-proc-cta { margin-top: 28px; }
}

/* =====================================================================
   4. Floor coatings across Maine (dark field, the map is the hero)
   ===================================================================== */
.h-art--area { padding-block: 96px; }
.h-art--area .h-area { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.h-art--area .h-area > .rv { display: flex; flex-direction: column; justify-content: center; order: 1; }
.h-art--area .h-area__map {
  order: 2; position: relative; isolation: isolate; align-items: center; justify-content: center; min-height: 660px; padding: 28px 24px;
  border-radius: var(--r-s); background: var(--ha-panel); box-shadow: var(--ha-lift);
}
.h-art--area .h-area__map::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 140px 20px rgba(0, 0, 0, .55);
}
.h-art--area .maine-map { position: relative; z-index: 1; width: 100%; height: 610px; max-height: 100%; color: #fff; }
.h-art--area .maine-map__outline { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .72); stroke-width: 1.25; }
.h-art--area .maine-map__mark text {
  fill: #fff; font-weight: 600; letter-spacing: .01em;
  paint-order: stroke fill; stroke: var(--ha-panel); stroke-width: 5px; stroke-linejoin: round;
}
.h-art--area .maine-map__hq text { font-weight: 800; }
.h-art--area .maine-map__hq circle { stroke: #fff; }
.h-art--area .lead { color: var(--ha-soft); }
.h-art--area .h-area > .rv > p:not(.lead) { color: var(--ha-soft); max-width: 46ch; }
.h-art--area .h-area > .rv a:not(.cta-text) { color: #fff; }

/* the six regions: hairline-separated labels, a 6px dot each */
.h-art--area .h-regions.list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 26px 0 18px; padding: 0; list-style: none;
}
.h-art--area .h-regions li {
  position: static; padding: 15px 0 15px 20px; border-top: 1px solid var(--ha-hair); display: flex; align-items: center; min-height: 48px;
  font: 700 13px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #fff; position: relative;
}
.h-art--area .h-regions li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  transform: none; background: var(--orange);
}
.h-art--area .h-regions li:nth-last-child(-n+2) { border-bottom: 1px solid var(--ha-hair); }

@media (max-width: 1023.98px) {
  .h-art--area { padding-block: 64px; }
  .h-art--area .h-area { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
  .h-art--area .h-area__map { order: 2; min-height: 0; padding: 20px 12px; }
  .h-art--area .h-area > .rv { order: 1; }
  .h-art--area .maine-map { height: 480px; }
}
@media (max-width: 559.98px) {
  .h-art--area .h-area__map { padding: 12px 8px; }
  .h-art--area .maine-map { height: 400px; }
  .h-art--area .h-regions.list { gap: 0 18px; }
  .h-art--area .h-regions li { font-size: 12px; letter-spacing: .12em; }
}

/* =====================================================================
   3. Flake colors (ink ground, the swatches as a full-bleed mosaic)
   ===================================================================== */
body main .h-art--flk.h-tease { padding-block: 96px 88px; }
.h-art--flk .sec__head { margin-bottom: 44px; }
.h-art--flk .sec__head .lead { color: var(--ha-soft); }
.h-art--flk .h-art__mosaic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 320px);
  gap: var(--ha-gap); margin: 0; padding: 0; list-style: none;
}
.h-art--flk .h-art__mosaic > li { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; border-radius: 0; background: var(--ha-panel); isolation: isolate; min-width: 0; }
.h-art--flk .h-art__mosaic > li:nth-child(1) { grid-column: span 5; }
.h-art--flk .h-art__mosaic > li:nth-child(2) { grid-column: span 4; }
.h-art--flk .h-art__mosaic > li:nth-child(3) { grid-column: span 3; }
.h-art--flk .h-art__mosaic > li:nth-child(4) { grid-column: span 3; }
.h-art--flk .h-art__mosaic > li:nth-child(5) { grid-column: span 4; }
.h-art--flk .h-art__mosaic > li:nth-child(6) { grid-column: span 5; }
.h-art--flk .h-art__mosaic a {
  position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; font-size: 12px; line-height: 1.3;
}
.h-art--flk .h-art__mosaic a:hover strong { text-decoration: none; }
.h-art--flk .h-art__mosaic picture { display: contents; }
.h-art--flk .h-art__mosaic 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% 50%;
}
.h-art--flk .h-art__mosaic a::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 42%; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 10, 10, .7), rgba(10, 10, 10, 0));
}
.h-art--flk .h-art__mosaic strong {
  position: absolute; z-index: 2; top: clamp(12px, 1.4vw, 20px); left: clamp(12px, 1.4vw, 20px);
  max-width: calc(100% - 2 * clamp(12px, 1.4vw, 20px)); padding: .26em .6em .32em; border-radius: 6px;
  background: var(--ha-glass); border: 1px solid var(--ha-glass-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 clamp(18px, 1.7vw, 26px)/1.1 var(--ha-serif); letter-spacing: -.005em; color: #fff; text-wrap: balance;
}
.h-art--flk .h-art__code {
  position: absolute; z-index: 2; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.2vw, 18px);
  font: 700 12px/1.3 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.h-art--flk .h-art__more { margin-top: 32px; display: flex; justify-content: center; }
@media (hover: hover) {
  .h-art--flk .h-art__mosaic a:hover strong { border-color: rgba(255, 255, 255, .4); }
}
.h-art--flk .h-art__mosaic a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

@media (max-width: 899.98px) {
  body main .h-art--flk.h-tease { padding-block: 64px; }
  .h-art--flk .sec__head { margin-bottom: 28px; }
  .h-art--flk .h-art__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  body main .h-art--flk .h-art__mosaic > li:nth-child(n) { display: block; grid-column: span 1; }
  body main .h-art--flk .h-art__mosaic > li:nth-child(1),
  body main .h-art--flk .h-art__mosaic > li:nth-child(6) { grid-column: span 2; }
}
@media (min-width: 560px) and (max-width: 899.98px) {
  .h-art--flk .h-art__mosaic { grid-auto-rows: 30vw; }
}

/* =====================================================================
   6. FAQ (ink ground; a tall photo frame, the questions in smoked glass)
   ===================================================================== */
body main .h-art--faq.faq-p { padding-block: 96px; }
.h-art--faq .sec__head { margin-bottom: 44px; }
.h-art--faq .faq-p__grid { gap: clamp(24px, 3vw, 40px); }

/* left: one full-bleed photo; the help block is a glass panel on its foot */
body main .h-art--faq .faq-p__aside {
  position: sticky; top: 124px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  min-height: 740px; border-radius: var(--r-s); overflow: hidden; background: var(--ha-panel); isolation: isolate;
  box-shadow: var(--ha-lift);
}
body main .h-art--faq .faq-p__aside::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -160px 120px -100px rgba(0, 0, 0, .65);
}
.h-art--faq .faq-p__photo { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; min-height: 0; background: var(--ha-panel); }
.h-art--faq .faq-p__photo picture { display: block; position: absolute; inset: 0; }
.h-art--faq .faq-p__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
body main .h-art--faq .faq-p__help {
  position: relative; z-index: 3; box-sizing: border-box; margin: 16px; padding: 26px 26px 24px; align-self: end;
  background: var(--ha-glass); border: 1px solid var(--ha-glass-line); border-radius: var(--r-s);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.h-art--faq .faq-p__help::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 0 14px; background: var(--orange); }
.h-art--faq .faq-p__t { color: #fff; font-size: 24px; }
.h-art--faq .faq-p__lead { font: 400 18px/1.45 var(--ha-serif); color: rgba(255, 255, 255, .88); margin-bottom: 20px; }
.h-art--faq .faq-p__hours { margin-top: 16px; font: 500 13px/1.5 var(--font-body); letter-spacing: .02em; color: rgba(255, 255, 255, .8); }

/* right: the accordion as glass rows; behaviour and markup are the shared ones */
body main .h-art--faq .faq { display: grid; gap: 8px; border-top: 0; max-width: none; margin: 0; counter-reset: faqn; }
body main .h-art--faq .faq details {
  position: relative; margin: 0; counter-increment: faqn; border-radius: var(--r-s);
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body main .h-art--faq .faq details + details { margin-top: 0; }
body main .h-art--faq .faq details[data-m-open] {
  background: rgba(255, 255, 255, .095); border-color: rgba(255, 255, 255, .26); border-radius: var(--r-s);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 40px -28px rgba(0, 0, 0, .8);
}
body main .h-art--faq .faq details > summary:not(#_):not(#_):not(#_):not(#_) {
  min-height: 84px; color: #fff; background: transparent; font: 600 20px/1.3 var(--font-body); letter-spacing: -.005em;
}
body main .h-art--faq .faq details[data-m-open] > summary:not(#_):not(#_):not(#_):not(#_) { color: #fff; background: transparent; }
body main .h-art--faq .faq details > summary:not(#_):not(#_):not(#_):not(#_)::before { color: rgba(255, 255, 255, .62); }
body main .h-art--faq .faq details[data-m-open] > summary:not(#_):not(#_):not(#_):not(#_)::before { color: #fff; }
body main .h-art--faq .faq details > summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@media (hover: hover) {
  body main .h-art--faq .faq details:not([data-m-open]) > summary:not(#_):not(#_):not(#_):hover { background: rgba(255, 255, 255, .05); }
  body main .h-art--faq .faq details:not([data-m-open]) > summary:hover::before { color: #fff; }
}
body main .h-art--faq .faq details p:not(#_) { font: 400 19px/1.55 var(--ha-serif); color: rgba(255, 255, 255, .9); }
body main .h-art--faq .faq details a:not(.btn) { color: #fff; text-decoration-thickness: 1px; }

@media (max-width: 1023.98px) {
  body main .h-art--faq.faq-p { padding-block: 64px; }
  .h-art--faq .sec__head { margin-bottom: 28px; }
  body main .h-art--faq .faq-p__aside { position: relative; top: auto; min-height: 560px; display: grid; }
  body main .h-art--faq .faq-p__help { align-self: end; }
  .h-art--faq .faq-p__photo { min-height: 0; }
}
@media (max-width: 767.98px) {
  body main .h-art--faq .faq-p__aside { min-height: 600px; display: grid; border-top-right-radius: var(--r-s); }
  body main .h-art--faq .faq-p__help { margin: 12px; padding: 20px 18px 20px; }
  body main .h-art--faq .faq details > summary:not(#_):not(#_):not(#_):not(#_) { min-height: 68px; font-size: 17px; }
  body main .h-art--faq .faq details p:not(#_) { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body main .h-art--faq .faq details { transition: none; }
}