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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* pg-gallery.css */
/* Gallery, art direction pass (owner 2026-11-04): hero and intro on one ink ground (the white card that overlapped the
   hero's bottom edge and looked clipped is gone), the project videos large with a smoked-glass caption and a hairline
   label (no orange fills), Featured Projects as full-bleed photographs with a glass panel, and the Flake Colors band
   folded into the grid's footer as one arrow link. The filters, pager, lightbox and before/after sliders are untouched.
   Scoped under #main so it outranks the shared rules without !important. */

#main {
  --pg-ink: #141414;
  --pg-glass: rgba(12, 12, 12, .62);
  --pg-hair: rgba(255, 255, 255, .15);
  --pg-serif: var(--font-body);
}

/* ---------- hero: shorter, nothing hangs off its foot ---------- */
#main .gal-hero.gal-hero { height: auto; min-height: clamp(360px, 31vw, 440px); display: flex; align-items: flex-end; }
#main .gal-hero .hero__panel { width: 100%; box-sizing: border-box; padding: 112px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) clamp(40px, 5vw, 64px); }

/* ---------- intro: ink, copy left, the film large on the right ---------- */
#main .pg-intro { background: var(--pg-ink); padding: 0 0 clamp(56px, 7vw, 96px); }
#main .pg-intro .gal-intro {
  margin: 0;
  padding: clamp(36px, 5vw, 64px) 0 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
#main .pg-intro .gal-intro h2 { color: #fff; margin: 0 0 20px; }
#main .pg-intro .gal-intro p { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
#main .pg-intro .gal-intro .gal-guide { margin-top: 14px; font-size: 16px; color: rgba(255, 255, 255, .72); }

/* shared film card: ink ground, smoked-glass play, hairline-framed caption */
#main .pg-intro .gal-intro__video,
#main .pg-v {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-s);
  background: #1b1b1a;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
#main .pg-intro .gal-intro__video { aspect-ratio: 16 / 10; width: 100%; }
#main .pg-intro .gal-intro__video picture,
#main .pg-v picture { display: block; width: 100%; height: 100%; }
#main .pg-intro .gal-intro__video img,
#main .pg-v img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
#main .pg-intro .gal-intro__video::after,
#main .pg-v::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 10, 10, .7) 0%, rgba(10, 10, 10, .06) 46%, rgba(10, 10, 10, .22) 100%);
}
#main .pg-intro .gal-intro__video .vcard__play,
#main .pg-v .vcard__play {
  z-index: 2;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(14, 14, 14, .5);
  border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
}
#main .pg-intro .gal-intro__video .vcard__play svg,
#main .pg-v .vcard__play svg { fill: #fff; width: 28px; height: 28px; }
#main .pg-intro .gal-intro__video:hover .vcard__play,
#main .pg-v:hover .vcard__play { background: rgba(14, 14, 14, .5); }
#main .pg-intro .gal-intro__video:focus-visible,
#main .pg-v:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

#main .pg-vcap {
  position: absolute;
  z-index: 2;
  left: clamp(12px, 1.8vw, 22px);
  right: clamp(12px, 1.8vw, 22px);
  bottom: clamp(12px, 1.8vw, 22px);
  display: block;
  pointer-events: none;
}
#main .pg-vcap__t {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: .5em .8em .55em;
  border-radius: 6px;
  background: rgba(14, 14, 14, .62);
  border: 1px solid var(--pg-hair);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 clamp(16px, 1.45vw, 19px)/1.3 var(--pg-serif);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-align: left;
  text-wrap: balance;
}

/* ---------- videos: one ink field, a mosaic of large films ---------- */
#main .pg-vids { background: var(--pg-ink); padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
#main .pg-vids .sec__head { margin-bottom: clamp(24px, 3vw, 40px); }
#main .pg-vids .sec__head h2 { color: #fff; }
#main .pg-vids .sec__head > p { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
#main .pg-vids .gal-vgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(260px, 29vw, 400px);
  gap: clamp(8px, .94vw, 12px);
}
#main .pg-vids .pg-v { grid-column: span 6; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; cursor: pointer; }
#main .pg-vids .pg-v:nth-child(4n+1), #main .pg-vids .pg-v:nth-child(4n) { grid-column: span 7; }
#main .pg-vids .pg-v:nth-child(4n+2), #main .pg-vids .pg-v:nth-child(4n+3) { grid-column: span 5; }
/* the label: a hairline, not a fill */
#main .pg-v .gal-vtab {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 1.8vw, 22px);
  left: clamp(12px, 1.8vw, 22px);
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .55em .85em;
  border-radius: 6px;
  border: 1px solid var(--pg-hair);
  background: rgba(14, 14, 14, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
}
#main .pg-v .gal-vtab::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---------- grid footer: the flake colors link ---------- */
#main .pg-gridfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 40px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(20, 20, 20, .16);
}
#main .pg-gridfoot__p { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
#main .pg-gridfoot__p a { display: inline; min-height: 0; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#main .pg-gridfoot__p a::after, #main .pg-gridfoot__p a::before { content: none; }
#main .pg-gridfoot__go {
  min-height: 48px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- featured projects: full-bleed photographs with a glass panel ---------- */
#main .pg-cases .gal-casegrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, .94vw, 12px);
  align-items: stretch;
}
#main .pg-cases .pg-case {
  position: relative;
  min-height: clamp(580px, 50vw, 720px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-s);
  background: #1b1b1a;
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .7);
}
#main .pg-cases .pg-case .ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: #1b1b1a;
}
#main .pg-cases .pg-case .ph picture { display: block; width: 100%; height: 100%; }
#main .pg-cases .pg-case .ph img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 40%; border-radius: 0; }
#main .pg-cases .pg-case .photo-caption { display: none; }
#main .pg-cases .pg-case .photo-caption-host { margin: 0 !important; }
#main .pg-cases .pg-case::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -180px 140px -100px rgba(0, 0, 0, .5);
}
#main .pg-case__panel {
  position: absolute;
  z-index: 2;
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  box-sizing: border-box;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(6px, .8vw, 10px);
  background: var(--pg-glass);
  border: 1px solid var(--pg-hair);
  border-radius: var(--r-s);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  color: #fff;
  text-align: left;
}
#main .pg-case__panel h3 {
  margin: 0 0 14px;
  font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--pg-serif);
  letter-spacing: -.01em;
  text-transform: none;
  text-align: left;
  color: #fff;
}
#main .pg-case__panel .list { margin: 0 0 4px; padding: 0; list-style: none; }
#main .pg-case__panel .list li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 20px;
  border-top: 1px solid var(--pg-hair);
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}
#main .pg-case__panel .list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  transform: none;
}
#main .pg-case__panel > p { margin: 0; border-top: 1px solid var(--pg-hair); }
#main .pg-case__panel .more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#main .pg-case__panel .more::after { margin-left: 0; }

/* ---------- tablet and phone ---------- */
@media (max-width: 899.98px) {
  #main .pg-intro .gal-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #main .pg-cases .gal-casegrid { grid-template-columns: minmax(0, 1fr); }
  #main .pg-cases .pg-case { min-height: 0; padding-top: min(70vw, 420px); display: flex; flex-direction: column; justify-content: flex-end; }
  #main .pg-case__panel { position: relative; left: auto; right: auto; bottom: auto; margin: 0 12px 12px; }
  #main .pg-cases .pg-case .ph { bottom: auto; height: min(78vw, 480px); }
  #main .pg-cases .pg-case::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
}
@media (max-width: 767.98px) {
  #main .gal-hero.gal-hero { min-height: 340px; }
  #main .gal-hero .hero__panel { padding: 100px var(--gut) 36px; }
  #main .pg-intro .gal-intro { padding-top: 32px; }
  #main .pg-vids .gal-vgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(240px, 66vw, 340px); }
  #main .pg-vids .pg-v:nth-child(n) { grid-column: 1 / -1; }
  #main .pg-gridfoot { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #main .pg-v, #main .pg-intro .gal-intro__video { transition: none; }
}

/* ---------- Before and after pairs: the home treatment (css/home-hero.css .h-ba), scoped to this section.
   Smoked-glass chips with white tracked caps and a 6px orange dot on "After", a round glass handle on a thin bar,
   the caption in Playfair italic across the foot of the frame, soft depth and an inner vignette. The strength of each
   selector matches home-hero.css: batch-g.css forces `body .chip.chip{color!important}` and site.css styles
   `.arrow-blade:not(#_)`. ---------- */
body main .gal-ba .gal-pairs{position:relative}
body main .gal-ba .gal-pairs::before{content:"";position:absolute;inset:-60px -8% -40px;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 50% 45%,rgba(255,255,255,.055),rgba(255,255,255,0) 70%)}
body main .gal-ba .gal-pair{position:relative;margin:0}
body main .gal-ba .compare.card{border:0;border-radius:18px;background:var(--ink-2);box-shadow:0 40px 80px -36px rgba(0,0,0,.85),0 18px 36px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
body main .gal-ba .compare::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 1px 0 rgba(255,255,255,.12),inset 0 -140px 120px -80px rgba(0,0,0,.7),inset 0 90px 90px -70px rgba(0,0,0,.35)}
body main .gal-ba .compare__bar{width:1px;margin-left:0;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 18px rgba(0,0,0,.45)}
body main .gal-ba .compare__handle.arrow-blade:not(#_):not(#_):not(#_){width:52px;min-width:52px;height:52px;min-height:52px;--arrow-surface:rgba(20,20,20,.42);padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(20,20,20,.42);color:var(--white);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
body main .gal-ba .compare__handle.arrow-blade:not(#_):not(#_):not(#_) svg{width:22px;height:22px;color:var(--white)}
body main .gal-ba .chip.chip--photo,body main .gal-ba .chip--photo{top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(20,20,20,.5);color:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;box-shadow:none}
body main .gal-ba .chip.chip--photo.chip--end,body main .gal-ba .chip--photo.chip--end{left:auto;right:16px}
body main .gal-ba .chip--photo.chip--end::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* the caption lies across the foot of the frame, as on the home page */
body main .gal-ba .gal-pair>figcaption.photo-caption.photo-caption.photo-caption{position:absolute;inset:auto 0 0;z-index:3;display:block;width:100%;max-width:none;min-height:0;height:auto;max-height:none;margin:0;padding:56px 24px 22px;border:0;border-radius:0 0 18px 18px;transform:none;background:linear-gradient(to top,rgba(14,14,14,.82),rgba(14,14,14,0));box-shadow:none;overflow:visible;clip:auto;white-space:normal;text-align:left;pointer-events:none;font: 400 19px/1.35 var(--font-body);letter-spacing:0;text-transform:none;color:var(--white);text-shadow:0 1px 12px rgba(0,0,0,.4)}
@media (max-width:899.98px){body main .gal-ba .gal-pairs::before{display:none}}
@media (max-width:639.98px){
  body main .gal-ba .gal-pair>figcaption.photo-caption.photo-caption.photo-caption{font-size:17px;padding:44px 18px 16px}
  body main .gal-ba .compare__handle.arrow-blade:not(#_):not(#_):not(#_){width:48px;min-width:48px;height:48px;min-height:48px}
}
/* phones: another layer opens .compare to overflow:visible; keep the frame clipped to its rounded corners */
body main .gal-ba .compare.card.card{overflow:hidden!important}