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

/* 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-projects.css */
/* Projects, art direction pass (owner 2026-11-04): every case is one full-bleed photograph with a smoked-glass panel,
   in the language of the home reviews carousel. One ink field from the heading to the close. Playfair carries the
   voice (the case title and its one line), small tracked caps carry the data, orange stays a 6px dot and a hairline.
   The grid is a mosaic of full-bleed tiles (object-fit cover, no letterbox) with the floor type top-left.
   Scoped under #main so it outranks the shared card/heading rules. */

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

/* ---------- heading: same ink, no torn edge ---------- */
#main .pg-hero { padding-bottom: clamp(28px, 4vw, 56px); background: var(--pg-ink); }
#main .pg-hero .seam { display: none; }
#main .pg-hero .lead { max-width: 38em; }

/* ---------- case frames ---------- */
#main .pg-cases { padding: 0 0 clamp(8px, 1vw, 12px); background: var(--pg-ink); }
#main .pg-cases .craft-project { max-width: var(--wrap, 1160px); display: grid; gap: clamp(8px, .94vw, 12px); }
#main .pg-cases .project-card.pg-case {
  position: relative;
  display: block;
  min-height: clamp(520px, 46vw, 640px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-s);
  background: #1b1b1a;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
#main .pg-case .project-photo,
#main .pg-tile .project-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #1b1b1a;
}
#main .pg-case .project-photo picture,
#main .pg-tile .project-photo picture { display: block; width: 100%; height: 100%; }
#main .pg-case .project-photo img,
#main .pg-tile .project-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 58%;
}
/* The shared adapter's caption pill repeats the title below; the frame carries the title itself. */
#main .pg-case .photo-caption,
#main .pg-tile .photo-caption { display: none; }
#main .pg-case .photo-caption-host,
#main .pg-tile .photo-caption-host { margin: 0; }

/* inner vignette: soft depth, no border */
#main .pg-case::after,
#main .pg-tile::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 -160px 140px -90px rgba(0, 0, 0, .55);
}

/* smoked-glass panel */
#main .pg-case .project-copy {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 2.6vw, 36px);
  bottom: clamp(14px, 2.6vw, 36px);
  box-sizing: border-box;
  width: min(460px, calc(100% - 2 * clamp(14px, 2.6vw, 36px)));
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) clamp(8px, 1vw, 14px);
  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.project-card--reverse .project-copy { left: auto; right: clamp(14px, 2.6vw, 36px); }

#main .pg-case .project-meta,
#main .pg-tile .project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 700 12px/1.45 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}
#main .pg-case .project-meta::before,
#main .pg-tile .project-meta::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
#main .pg-case .project-copy h2 {
  margin: 0 0 12px;
  font: 600 clamp(28px, 3vw, 40px)/1.08 var(--pg-serif);
  letter-spacing: -.01em;
  text-transform: none;
  text-align: left;
  color: #fff;
}
#main .pg-case .project-copy h2::after { content: none; }
#main .pg-case .project-summary {
  margin: 0 0 18px;
  font: 400 clamp(18px, 1.5vw, 20px)/1.45 var(--pg-serif);
  color: rgba(255, 255, 255, .92);
  text-align: left;
}

/* details toggle: a hairline row, not a boxed button */
#main .pg-case .project-copy details { border-top: 1px solid var(--pg-hair); margin: 0; }
#main .pg-case .project-copy details > summary,
#main .pg-case .on-dark .project-copy details > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 36px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: rgba(255, 255, 255, .9) !important;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
#main .pg-case .project-copy details > summary > .ico-plus { right: 2px; }
#main .pg-case .project-copy details > p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
  text-align: left;
}
#main .pg-case .project-copy details[open] > summary { margin-bottom: 6px; }
#main .pg-case .more:not(#_),
#main .pg-tile .more:not(#_) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#main .pg-case .project-copy > .more { border-top: 1px solid var(--pg-hair); width: 100%; margin-top: 0; }

/* ---------- mosaic grid ---------- */
#main .pg-grid { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); background: var(--pg-ink); }
#main .pg-grid .sec__head, #main .pg-close .sec__head { max-width: 760px; margin-inline: auto; }
#main .pg-gridhead { margin: 0 auto clamp(24px, 3vw, 40px); }
#main .pg-gridhead h2, #main .pg-close__head h2 { color: #fff; }
#main .pg-eyebrow {
  display: block;
  margin: 0 0 12px;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

#main .pg-grid .completed-projects {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 21vw, 300px);
  gap: clamp(8px, .94vw, 12px);
  margin: 0;
  max-width: none;
}
#main .pg-grid .pg-tile {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-s);
  background: #1b1b1a;
  display: block;
  box-shadow: none;
  padding: 0;
}
#main .pg-grid .pg-tile:nth-child(10n+1) { grid-column: span 7; }
#main .pg-grid .pg-tile:nth-child(10n+2) { grid-column: span 5; }
#main .pg-grid .pg-tile:nth-child(10n+6) { grid-column: span 5; }
#main .pg-grid .pg-tile:nth-child(10n+7) { grid-column: span 7; }
#main .pg-tile .project-photo img { transition: none; }
#main .pg-tile::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .12) 42%, rgba(10, 10, 10, .26) 100%); }
#main .pg-tile .project-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.6vw, 22px);
  background: none;
  border: 0;
  pointer-events: none;
  text-align: left;
}
#main .pg-tile .project-meta { align-self: flex-start; padding: .5em .8em; border-radius: 6px; background: rgba(14, 14, 14, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin: 0; }
#main .pg-tile .project-copy h3 {
  margin: auto 0 4px;
  font: 600 clamp(19px, 1.7vw, 24px)/1.2 var(--pg-serif) !important;
  letter-spacing: -.005em;
  text-transform: none;
  text-align: left;
  color: #fff;
  text-wrap: balance;
}
#main .pg-tile .more:not(#_) { align-self: flex-start; justify-content: flex-start; gap: 10px; pointer-events: auto; text-decoration: none; letter-spacing: 0; font-size: 16px; text-transform: none; }
#main .pg-tile .more::after, #main .pg-case .more::after { margin-left: 0; }
#main .pg-tile:focus-within { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- one quiet closing frame ---------- */
#main .pg-close { padding: clamp(56px, 7vw, 96px) 0; background: var(--pg-ink); border-top: 1px solid var(--pg-hair); }
#main .pg-close__head { margin-bottom: clamp(28px, 3.4vw, 48px); }
#main .pg-close__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}
#main .pg-close__col { min-width: 0; text-align: left; }
#main .pg-close__col p {
  margin: 0 0 16px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  text-align: left;
}
#main .pg-close__col .pg-h3 {
  margin: 0 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--pg-hair);
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(255, 255, 255, .94);
}
#main .pg-close__col a { color: #fff; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1023.98px) {
  #main .pg-close__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #main .pg-close__col--lead { grid-column: 1 / -1; }
  #main .pg-grid .completed-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 30vw, 280px); }
  #main .pg-grid .pg-tile,
  #main .pg-grid .pg-tile:nth-child(n) { grid-column: span 1; }
  #main .pg-grid .pg-tile:nth-child(5n+1) { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  #main .pg-cases .project-card.pg-case { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: min(62vw, 340px); }
  #main .pg-case .project-copy,
  #main .pg-case.project-card--reverse .project-copy { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 0 12px 12px; }
  #main .pg-grid .completed-projects { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(220px, 62vw, 300px); }
  #main .pg-grid .pg-tile:nth-child(n) { grid-column: 1 / -1; }
  #main .pg-close__in { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #main .pg-tile .project-photo img { transition: none; }
}

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