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

/* flakes-chart.css */
/* Flake chart (flakes/ only): white cards, four across, name and code printed under the pile, magnifier lens in the enlarged view. */
body .fl-grid-band{background:#fff;--fl-ground:#fff}
body .fl-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
body .fl-tile{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;isolation:auto;background:#fff;border:1px solid #e3e3df;border-radius:16px;box-shadow:0 1px 2px rgba(20,20,20,.05),0 6px 18px -10px rgba(20,20,20,.18);transition:box-shadow .25s ease,border-color .25s ease}
body .fl-tile picture{position:relative;inset:auto;display:block;width:100%;aspect-ratio:1/1;background:#fff}
body .fl-tile picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;background:#fff}
@media (hover:hover){body .fl-tile:hover{border-color:#c9c9c4;box-shadow:0 2px 4px rgba(20,20,20,.06),0 12px 28px -12px rgba(20,20,20,.28)}}
body .fl-tile .fl-label{position:static;transform:none;z-index:auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;max-width:none;padding:6px 12px 16px;background:#fff;color:var(--ink);text-align:center}
body .fl-tile .fl-name{font:800 var(--t-lead)/1.2 var(--font-head);font-stretch:100%;font-variation-settings:"wdth" 100;text-transform:none;letter-spacing:0;color:var(--ink);text-shadow:none;text-wrap:balance}
body .fl-tile .fl-code{font:600 var(--t-caption)/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-shadow:none}
@media (max-width:899.98px){body .fl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:559.98px){
  body .fl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body .fl-tile .fl-name{font-size:var(--t-body)}
  body .fl-tile .fl-code{font-size:12px}
  body .fl-tile .fl-label{padding:4px 8px 12px}
}
/* magnifier (enlarged view) */
.lb__lensbox{position:relative;display:inline-block;line-height:0;max-width:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lb__lensbox img{display:block;background:#fff}
.lb__lensbox.is-lens{cursor:none}
.lb__glass{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:3px solid #fff;background-color:#fff;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(20,20,20,.35),0 10px 30px rgba(0,0,0,.45);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:3}
.lb__glass.is-on{opacity:1;visibility:visible}
@media (max-width:759.98px){.lb__glass{width:160px;height:160px;margin:-80px 0 0 -80px}}
@media (prefers-reduced-motion:reduce){.lb__glass{transition:none}}
/* wider chart band so four across gives big tiles */
body .fl-grid-band .wrap{max-width:1560px;padding-inline:clamp(16px,3vw,48px)}

/* Owner Nov 6: no boxes. One continuous white concrete pad; piles sit on it with a soft contact shadow; names read as stenciled onto the pad. */
body .fl-grid-band{
  background-color:#f7f6f3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .44  0 0 0 0 .42  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 80% 85%,rgba(0,0,0,.035),rgba(0,0,0,0) 70%);
  background-size:240px 240px,100% 100%,100% 100%;
  --fl-ground:#f7f6f3}
body .fl-grid{gap:clamp(4px,1vw,16px) clamp(8px,1.6vw,28px)}
body .fl-tile,body .fl-tile:hover{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
body .fl-tile picture{background:transparent;isolation:isolate}
/* contact shadow on the pad under each pile */
body .fl-tile picture::before{content:"";position:absolute;left:14%;right:14%;bottom:9%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,36,30,.30),rgba(40,36,30,.12) 55%,rgba(40,36,30,0));filter:blur(6px);z-index:-1;transition:transform .35s ease,opacity .35s ease}
body .fl-tile picture img{background:transparent;mix-blend-mode:multiply;transition:transform .35s ease}
@media (hover:hover){
  body .fl-tile:hover picture img{transform:translateY(-4px) scale(1.015)}
  body .fl-tile:hover picture::before{transform:scale(.92);opacity:.8}
}
body .fl-tile:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:12px}
/* stenciled on the pad */
body .fl-tile .fl-label{background:transparent;padding:0 8px 22px;margin-top:-4%;gap:3px}
body .fl-tile .fl-name{font:800 clamp(15px,1.25vw,19px)/1.1 var(--font-head);text-transform:uppercase;letter-spacing:.14em;color:#2b2a27;opacity:.86;mix-blend-mode:multiply}
body .fl-tile .fl-code{font:700 12px/1.2 var(--font-head);letter-spacing:.22em;color:#6f6c66;mix-blend-mode:multiply}
@media (max-width:559.98px){
  body .fl-tile .fl-name{font-size:13px;letter-spacing:.1em}
  body .fl-tile .fl-code{font-size:10.5px}
  body .fl-tile .fl-label{padding:0 4px 16px}
}
/* pure white pad so the photos' own white backgrounds disappear; contact shadow drawn over the photo in multiply */
body .fl-grid-band{background:#fff;--fl-ground:#fff}
body .fl-tile picture::before{content:none}
body .fl-tile picture::after{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:15%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,36,30,.22),rgba(40,36,30,.08) 60%,rgba(40,36,30,0));filter:blur(5px);mix-blend-mode:multiply;z-index:2;pointer-events:none;transition:transform .35s ease,opacity .35s ease}
body .fl-tile picture img{mix-blend-mode:normal;z-index:1}
@media (hover:hover){body .fl-tile:hover picture::after{transform:scale(.9);opacity:.75}}
/* 3D sample puck (enlarged view) */
.lb__in{padding-bottom:54px}
.lb__lensbox img{max-height:calc(100vh - 175px);max-height:calc(100dvh - 175px)}
.pk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;width:100%}
.pk-seg{display:inline-flex;border:2px solid #fff;border-radius:999px;overflow:hidden}
body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_){appearance:none;border:0;border-radius:0;background:rgba(20,20,20,.72);color:#fff!important;-webkit-text-fill-color:#fff;font:700 15px/1 var(--font-body);letter-spacing:.02em;padding:11px 18px;min-height:44px;cursor:pointer;text-transform:none}
body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_)+button.pk-opt{border-left:2px solid #fff}
body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_)[aria-pressed="true"]{background:#f87000;color:#141414!important;-webkit-text-fill-color:#141414}
body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_):hover:not([aria-pressed="true"]){background:#2a2a2a}
body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_):focus-visible,body .lb a.pk-garage.pk-garage:not(#_):not(#_):focus-visible{outline:3px solid #fff;outline-offset:3px}
body .lb a.pk-garage.pk-garage:not(#_):not(#_){-webkit-text-fill-color:currentColor;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font:700 15px/1.2 var(--font-body);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
body .lb a.pk-garage.pk-garage:not(#_):not(#_):hover{color:#f87000}
body .lb a.pk-garage.pk-garage:not(#_):not(#_)::after{content:none}
.pk-stage{--pk-w:min(86vw,560px);position:relative;width:min(var(--pk-w),calc(100dvh - 175px));aspect-ratio:1/1;border-radius:var(--r-s,8px);background:radial-gradient(ellipse at 50% 38%,#3a3a38 0,#232322 55%,#161616 100%);overflow:hidden}
.pk-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.pk-canvas.is-drag{cursor:grabbing}
.pk-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#e8e8e4;font:600 15px/1.3 var(--font-body)}
.pk-note{flex-basis:100%;margin:0;text-align:center;color:#e8e8e4;font:600 14px/1.3 var(--font-body)}
@media (max-width:559.98px){.lb__lensbox img{max-height:calc(100dvh - 250px)}.pk-stage{width:min(var(--pk-w),calc(100dvh - 250px))}body .lb .pk-seg button.pk-opt.pk-opt:not(#_):not(#_){padding:11px 14px}}
/* brighter, crisper lens (owner, Nov 6) */
.lb__glass{filter:brightness(1.07) contrast(1.06) saturate(1.04);image-rendering:auto;border-width:2px;box-shadow:0 0 0 1px rgba(20,20,20,.25),0 12px 32px rgba(0,0,0,.35)}
@media (min-width:760px){.lb__glass{width:240px;height:240px;margin:-120px 0 0 -120px}}
/* Touch hint: a looping finger drag and one line of text over the enlarged photo until the first drag. */
.lb__hint{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;line-height:1.2;transition:opacity .35s ease}
.lb__hint.is-gone{opacity:0}
.lb__hint-hand{display:block;width:56px;height:66px;color:#fff;filter:drop-shadow(0 0 2px rgba(20,20,20,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:lb-hint-drag 2.6s ease-in-out infinite}
.lb__hint-ring{stroke-width:2.4;fill:rgba(20,20,20,.35)}
.lb__hint-text{padding:8px 14px;border-radius:999px;background:rgba(20,20,20,.72);color:#fff;font:700 14px/1.2 var(--font-body);letter-spacing:.01em;text-align:center}
@keyframes lb-hint-drag{0%{transform:translate(-44px,-10px);opacity:0}10%,20%{transform:translate(-44px,-10px);opacity:1}65%,85%{transform:translate(44px,14px);opacity:1}95%{transform:translate(44px,14px);opacity:0}100%{transform:translate(-44px,-10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.lb__hint-hand{animation:none}}