/* ============================================================================
   BSD DRYWALL — "BOARD & BEAD" bespoke art-direction
   ----------------------------------------------------------------------------
   One-of-one design for a DRYWALL company, built by MIXING two things:

   1) The CARUTH craft (Wayne's gold-standard): the confident tradesman voice —
      ANTON condensed display + JETBRAINS MONO "//" kickers + Barlow body,
      a full-bleed hi-vis STAT BAND, "TICKET" service cards, numbered feature
      rows, a giant outline word behind the CTA band, and a repeating diagonal
      "seam" rule used as a section signature. Squared corners, tactile buttons.

   2) BSD's own material identity (so it is NOT a Caruth clone): warm GYPSUM /
      plaster canvas instead of cold steel; a refined BRAND GOLD instead of
      safety yellow; the raking-light graze; and BSD's signature interactives —
      the ROUGH -> FINISHED reveal slider and the LEVELS OF FINISH (0-5) tool.

   The result reads like a real drywall outfit with the Caruth level of craft,
   in a palette (warm plaster + deep gold) that is unmistakably BSD, not Caruth.

   Loaded AFTER styles.css so it overrides the generic template look.
   ========================================================================== */

:root{
  /* Gypsum / plaster canvas */
  --plaster:      #F4F1EB;   /* warm gypsum white — primary page canvas */
  --plaster-2:    #ECE7DE;   /* joint-compound off-white */
  --compound:     #E2DCCF;   /* joint compound / setting mud grey-tan */
  --sanding:      #D7CFBF;   /* sanded dust edge */

  /* Board / charcoal (dark sections) — warm, never pure black */
  --board:        #17171A;   /* primed board charcoal */
  --board-2:      #202024;
  --board-3:      #2A2A2F;

  /* Re-map the template's core tokens onto the new palette */
  --paper:        #F4F1EB;
  --bone:         #ECE7DE;
  --bone-2:       #E2DCCF;
  --ink:          #17171A;
  --ink-2:        #202024;
  --steel:        #26262B;

  --text:         #23211C;   /* warm near-black ink for body on plaster */
  --text-80:      rgba(35,33,28,0.82);
  --text-65:      rgba(35,33,28,0.62);
  --text-45:      rgba(35,33,28,0.42);
  --text-25:      rgba(35,33,28,0.22);

  --paper-80:     rgba(244,241,235,0.86);
  --paper-65:     rgba(244,241,235,0.66);
  --paper-45:     rgba(244,241,235,0.48);
  --paper-25:     rgba(244,241,235,0.24);

  /* Refined brand gold (from the logo) — deep + warm, an intentional accent,
     NOT Caruth's safety yellow. */
  --gold-300:     #E2C989;
  --gold-400:     #D8BC79;
  --gold-500:     #CBA95F;
  --gold-600:     #B08F45;
  --gold-700:     #8A6E31;
  --on-gold:      #1A1710;   /* ink on a gold face */

  --divider-light: #DBD3C4;
  --divider-dark:  rgba(244,241,235,0.10);
  --rule:          #DBD3C4;
  --seam:          #CBA95F;

  /* Typographic voice borrowed from Caruth, retuned for drywall */
  --font-display: "Anton","Archivo","Inter",system-ui,sans-serif;
  --font-body:    "Barlow","Inter",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,monospace;
}

/* ── Typography overrides: adopt Anton/Barlow/mono without touching styles.css ─ */
body{ font-family: var(--font-body); }
.display, h1, h2, h3, h4,
.stat-cell .k, .process-num, .cred-card .num,
.price-band-amount .amt{ font-family: var(--font-display) !important; }

/* Anton is an all-caps condensed face; loosen tracking + line-height so big
   display type breathes and reads like a jobsite stencil, not squashed. */
.display, h1, h2{
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.02 !important;
  text-transform: uppercase;
}
h3, h4{ font-weight: 400 !important; letter-spacing: 0.01em !important; text-transform: uppercase; }
.tight{ letter-spacing: 0.005em !important; }
/* Fraunces serif italics stay as-is where explicitly used */

/* Warm the whole canvas + a barely-there gypsum tooth so flat areas aren't dead */
body{
  background-color: var(--plaster);
  color: var(--text);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(203,169,95,0.05), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
}
::selection{ background: var(--gold-500); color: var(--on-gold); }

/* ── Section themes ──────────────────────────────────────────────────────── */
.section-light  { background: var(--plaster); color: var(--text); }
.section-bone   { background: var(--plaster-2); color: var(--text); }
.section-dark   { background: var(--board); color: var(--paper); }
.section-darker { background: #101012; color: var(--paper); }

/* Raking light: dark sections get a soft directional graze */
.section-dark, .section-darker{ position: relative; }
.section-dark::before, .section-darker::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(203,169,95,0.10), transparent 55%),
    linear-gradient(105deg, rgba(255,255,255,0.045) 0%, transparent 34%);
}
.section-dark > *, .section-darker > *{ position: relative; z-index: 1; }

/* ============================================================================
   CARUTH VOICE 1 — the "//" mono kicker (eyebrow)
   Caruth's single most recognisable tell. Retooled: instead of the plain tick,
   a mono "//" lead-in, wide-tracked, in gold. Adapted to drywall by reading as
   a taped-seam marker.
   ========================================================================== */
.eyebrow, .smallcaps{
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before{
  content: "//"; display: inline; width: auto; height: auto; margin: 0;
  background: none; font-weight: 700; letter-spacing: 0; color: inherit;
  vertical-align: baseline;
}
.smallcaps::before{ content: "// "; font-weight: 700; letter-spacing: 0; }
.section-dark .eyebrow, .section-darker .eyebrow,
.section-dark .smallcaps, .section-darker .smallcaps{ color: var(--gold-400); }

/* Standfirst / lead copy in Barlow */
.standfirst{ font-family: var(--font-body) !important; font-weight: 400; }

/* ── The "seam" motif: gold rule → a feathered, taped joint line ─────────── */
.gold-rule{
  height: 2px; width: 60px;
  background: linear-gradient(90deg, transparent, var(--seam) 12%, var(--seam) 88%, transparent);
  position: relative; border: 0;
}
.gold-rule::after{
  content:''; position:absolute; left:-6px; right:-6px; top:-2px; height:6px;
  background: radial-gradient(ellipse at center, rgba(203,169,95,0.28), transparent 70%);
}

/* ============================================================================
   CARUTH VOICE 2 — the diagonal "seam band" rule
   Caruth uses a hi-vis hazard stripe as a section signature. Reinterpreted for
   drywall as a soft taped-seam feather band: same graphic rhythm, gentler read.
   Add class="seam-band" to a thin divider element.
   ========================================================================== */
.seam-band{
  height: 8px; border: 0;
  background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(203,169,95,0.18) 14px 28px);
  opacity: 0.9;
}
.seam-band.on-dark{ background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(23,23,26,0) 14px 28px); }

/* ── Buttons: squarer, tactile, gold face with a soft "troweled" hover ────── */
.btn{
  font-family: var(--font-body) !important;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 2px;
  background: var(--gold-500);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn:hover{ background: var(--gold-400); color: var(--on-gold); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(176,143,69,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-outline-light{ border-color: rgba(244,241,235,0.42); color: var(--paper); border-radius:2px; }
.btn-outline-light:hover{ background: var(--paper); color: var(--board); }
.btn-outline-dark{ border-color: rgba(35,33,28,0.4); color: var(--text); border-radius:2px; }
.btn-outline-dark:hover{ background: var(--board); color: var(--paper); }
.btn .arr, .btn svg{ transition: transform .18s ease; }
.btn:hover .arr{ transform: translateX(4px); }

/* ============================================================================
   CARUTH VOICE 3 — hi-vis STAT BAND (full-bleed gold)
   A confident 4-up stat strip on a solid gold band, ink text, left seam ticks.
   BSD palette: brand gold face (not safety yellow), warm ink.
   ========================================================================== */
.statband{ background: var(--gold-500); color: var(--on-gold); position: relative; overflow: clip; }
.statband::before{
  content:''; position:absolute; top:0; left:0; right:0; height:8px;
  background: repeating-linear-gradient(135deg, var(--board) 0 14px, transparent 14px 28px);
  opacity: 0.16;
}
.statband-inner{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem;
  padding: clamp(1.8rem,4vw,2.8rem) 0;
}
.statband .stat{ border-left: 3px solid var(--on-gold); padding-left: 1.1rem; }
.statband .stat .sv{ font-family: var(--font-display); font-size: clamp(2rem,4.4vw,3.4rem); line-height: 1; }
.statband .stat .sl{ font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.4rem; color: rgba(26,23,16,0.82); }
@media(max-width:900px){ .statband-inner{ grid-template-columns: 1fr 1fr; gap: 1.4rem 0.9rem; } }

/* ============================================================================
   CARUTH VOICE 4 — "TICKET" service cards
   Caruth numbers each service card like a work ticket (mono "TICKET 01") with a
   gold top-edge that scales in on hover. BSD keeps its warm plaster card face.
   The service grid renderer (partials.js) injects .svc-ticket spans.
   ========================================================================== */
.service-card, .cred-card, .testimonial{
  border-radius: 3px;
  border-color: var(--divider-light);
  background: #FBF9F4;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  position: relative;
}
.service-card{ transition: border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; overflow: hidden; }
.service-card::before{  /* gold ticket top-edge, scales in on hover (Caruth) */
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1); z-index: 3;
}
.service-card:hover::before{ transform: scaleX(1); }
.service-card:hover{ border-color: var(--gold-500); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(35,33,28,0.4); }
.service-card::after{  /* taped seam that "sands in" on hover, bottom */
  content:''; position:absolute; left:28px; right:28px; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.service-card:hover::after{ transform: scaleX(1); }
.service-card.dark{ background: var(--board-2); border-color: rgba(244,241,235,0.08); }
.cred-card{ background: var(--board-2); border-color: rgba(244,241,235,0.08); border-radius:3px; }
.cred-card:hover{ border-color: rgba(203,169,95,0.4); }
.cred-card .num{ color: var(--gold-500); }

/* The mono ticket tag Caruth puts on each card */
.svc-ticket{
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-600);
  display: inline-block; margin-bottom: 0.35rem;
}
.section-dark .svc-ticket, .service-card.dark .svc-ticket{ color: var(--gold-400); }

/* Service/gallery image slots: soft joint-compound sweep when unloaded */
.service-card .img-slot,
.gallery-tile{
  background-image: linear-gradient(120deg, var(--compound), var(--plaster-2) 55%, var(--sanding));
  background-size: cover;
}

/* ── Gallery tiles: subtle raking-light hover ────────────────────────────── */
.gallery-tile{ border-radius: 3px; }
.gallery-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, transparent 30%);
  opacity: 0; transition: opacity .4s ease;
}
.gallery-tile:hover::after{ opacity: 1; }

/* ── Trust strip: board band with mono tracking + seam dots ──────────────── */
.trust-strip{ background: var(--board); border-top: 0; border-bottom: 0; color: var(--paper); }
.trust-strip-inner{ color: var(--paper-80); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.trust-strip .dot{ color: var(--gold-500); }

/* ── Process numbers: chiselled gold chips ───────────────────────────────── */
.process-num{ background: var(--gold-500); color: var(--on-gold); border-radius:2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
#site-nav.nav-solid{ background: rgba(23,23,26,0.92); backdrop-filter: blur(10px) saturate(1.1); border-bottom-color: rgba(203,169,95,0.18); }
.nav-link{ color: var(--paper-80); position: relative; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.nav-link:hover, .nav-link.active{ color: var(--gold-400); }
.nav-link::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--gold-500); transition: right .25s ease; }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

/* ── Modal: plaster panel, gold taped top ────────────────────────────────── */
.modal-box{ background: #FBF9F4; border-top: 4px solid var(--gold-500); border-radius: 4px; }

/* ============================================================================
   SIGNATURE MOTIF 1 — Raking-light hero wash + seam grid overlay
   ========================================================================== */
.rake-hero{ position: relative; }
.rake-hero .rake-light{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.10) 0%, transparent 26%),
    radial-gradient(90% 70% at 8% 12%, rgba(203,169,95,0.14), transparent 60%);
  mix-blend-mode: screen;
}
.seam-grid{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 100%;
  mask-image: linear-gradient(180deg, transparent, black 40%, black 75%, transparent);
}

/* Hero: mono geo-tag + a giant outline word behind the copy (Caruth device) */
.hero-tag{
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-400);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero-tag::before{ content:"//"; font-weight:700; letter-spacing:0; }
.hero-ghost{
  position:absolute; left:-0.02em; bottom:-0.12em; z-index:0;
  font-family: var(--font-display); font-size: clamp(5rem,15vw,13rem); line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(244,241,235,0.05);
  pointer-events:none; user-select:none; white-space:nowrap;
}
@media(max-width:1023px){ .hero-ghost{ display:none; } }

/* ============================================================================
   HERO — before/after reveal card, framed so the transformation reads
   ABOVE THE FOLD alongside the headline (bespoke to drywall).
   ========================================================================== */
.hero-ba-frame{ position: relative; z-index: 2; }
.hero-ba-frame .ba{
  aspect-ratio: 4/3;
  border: 1px solid rgba(203,169,95,0.30);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.2);
}
.hero-ba-cap{
  margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--paper-65); max-width: 46ch;
}
@media (max-width: 1023px){
  .hero-ba-frame{ margin-top: 4px; }
  .hero-ba-frame .ba{ aspect-ratio: 16/10; }
}

/* ============================================================================
   SIGNATURE MOTIF 2 — "Rough → Finished" before/after reveal slider
   ========================================================================== */
.ba{
  position: relative; width: 100%; aspect-ratio: 16/10;
  overflow: hidden; border-radius: 4px; user-select: none; touch-action: none;
  border: 1px solid rgba(244,241,235,0.12);
  background: #1b1b1e;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba .ba-after{ clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba .ba-line{
  position:absolute; top:0; bottom:0; left: var(--pos, 50%); width:2px;
  background: var(--gold-500); transform: translateX(-1px); z-index:3;
  box-shadow: 0 0 14px 2px rgba(203,169,95,0.5);
}
.ba .ba-handle{
  position:absolute; top:50%; left: var(--pos, 50%);
  width:46px; height:46px; transform: translate(-50%,-50%);
  background: var(--gold-500); color: var(--on-gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:4;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6); cursor: ew-resize; font-weight:900;
}
.ba .ba-tag{
  position:absolute; bottom:14px; z-index:3; font-family: var(--font-mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em; padding:6px 12px; border-radius:2px;
  background: rgba(17,17,18,0.72); color: var(--paper); backdrop-filter: blur(4px);
}
.ba .ba-tag.left{ left:14px; }
.ba .ba-tag.right{ right:14px; color: var(--gold-300); }

/* ============================================================================
   SIGNATURE MOTIF 3 — "Levels of Finish (0 → 5)" interactive
   ========================================================================== */
.lof{ display:grid; gap: 22px; }
@media(min-width:900px){ .lof{ grid-template-columns: 200px 1fr; align-items:start; } }
.lof-scale{ display:flex; flex-direction:column; gap:6px; }
.lof-btn{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:12px 14px; border:1px solid rgba(244,241,235,0.12); border-radius:2px;
  background: rgba(255,255,255,0.02); color: var(--paper-80); cursor:pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.lof-btn .n{
  font-family: var(--font-display); font-weight:400; font-size:16px;
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:2px; background: rgba(244,241,235,0.08); color: var(--paper);
}
.lof-btn:hover{ border-color: rgba(203,169,95,0.4); color: var(--paper); }
.lof-btn.active{ border-color: var(--gold-500); background: rgba(203,169,95,0.10); color: var(--paper); }
.lof-btn.active .n{ background: var(--gold-500); color: var(--on-gold); }
.lof-panel{ border:1px solid rgba(244,241,235,0.12); border-radius:3px; padding:26px 28px; background: rgba(255,255,255,0.015); min-height: 220px; }
.lof-panel h3{ color: var(--paper); }
.lof-swatch{
  height: 92px; border-radius:2px; margin-bottom:18px; position:relative; overflow:hidden;
  background: #cfc7b6; box-shadow: inset 0 0 40px rgba(0,0,0,0.12);
}
.lof-swatch::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(110deg, rgba(255,255,255,0.35), transparent 40%),
    repeating-linear-gradient(115deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 7px);
  opacity: var(--rough, 0.9); transition: opacity .5s ease;
}
.lof-swatch::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(255,255,255,0.5) 0%, transparent 35%);
  opacity: var(--smooth, 0); transition: opacity .5s ease;
}

/* ── Stat / number strip (secondary, used on inner pages) ────────────────── */
.stat-strip{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--divider-light); border:1px solid var(--divider-light); border-radius:3px; overflow:hidden; }
@media(min-width:768px){ .stat-strip{ grid-template-columns: repeat(4,1fr); } }
.stat-cell{ background: #FBF9F4; padding:26px 22px; }
.stat-cell .k{ font-family: var(--font-display); font-weight:400; font-size:2.4rem; letter-spacing:0; color: var(--text); line-height:1; }
.stat-cell .l{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color: var(--text-65); margin-top:8px; font-weight:500; }
.section-dark .stat-strip, .section-darker .stat-strip{ background: rgba(244,241,235,0.08); border-color: rgba(244,241,235,0.08); }
.section-dark .stat-cell, .section-darker .stat-cell{ background: var(--board-2); }
.section-dark .stat-cell .k, .section-darker .stat-cell .k{ color: var(--gold-400); }
.section-dark .stat-cell .l, .section-darker .stat-cell .l{ color: var(--paper-65); }

/* ============================================================================
   CARUTH VOICE 5 — giant outline word behind a CTA / feature block
   Add <div class="giant-ghost">WORD</div> inside a positioned dark section.
   ========================================================================== */
.giant-ghost{
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.8rem,7.5vw,6rem); line-height:.92;
  color: transparent; -webkit-text-stroke: 1.4px rgba(203,169,95,0.30);
  user-select:none; pointer-events:none; max-width:100%; overflow:hidden;
}
.cta-ghost{
  position:absolute; left:0; right:0; bottom:-1vw; z-index:0; text-align:center;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(4rem,15vw,12rem); line-height:.8;
  color: transparent; -webkit-text-stroke: 1.4px rgba(203,169,95,0.16);
  user-select:none; pointer-events:none; white-space:nowrap; overflow:hidden;
}

/* ── Feathered section divider ───────────────────────────────────────────── */
.edge-feather{ position: relative; }
.edge-feather::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:34px; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, rgba(203,169,95,0.0), rgba(203,169,95,0.0));
}

/* ============================================================================
   STICKY MOBILE CALL / QUOTE BAR (every page, thumb-reach)
   ========================================================================== */
#mobile-cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(23,23,26,0.96); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(203,169,95,0.28);
  box-shadow: 0 -6px 20px -8px rgba(0,0,0,0.5);
  padding: max(10px, env(safe-area-inset-bottom, 0px)) 12px 12px;
  gap: 10px;
}
@media(min-width: 1024px){ #mobile-cta-bar{ display: none; } }
#mobile-cta-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-size: 13px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  padding: 13px 10px; border-radius: 3px;
}
#mobile-cta-bar .mc-call{ background: transparent; color: var(--paper); border:1px solid rgba(244,241,235,0.35); }
#mobile-cta-bar .mc-quote{ background: var(--gold-500); color: var(--on-gold); }
@media(max-width:1023px){
  body{ padding-bottom: 74px; }
  footer{ padding-bottom: 90px !important; }
}

/* ── Modal day/time picker ───────────────────────────────────────────────── */
.bk-days{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.bk-day{
  flex:0 0 auto; min-width:74px; text-align:center; padding:12px 10px;
  border:1.5px solid rgba(35,33,28,0.14); border-radius:6px; background:#fff; cursor:pointer;
  font-weight:700; transition: border-color .15s, background .15s;
}
.bk-day .dow{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-65); }
.bk-day .dnum{ font-family: var(--font-display); font-weight:400; font-size:1.5rem; line-height:1.1; color: var(--text); }
.bk-day.active{ border-color: var(--gold-500); background: rgba(203,169,95,0.12); }
.bk-times{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-top:16px; }
.bk-time{
  padding:11px 6px; border:1.5px solid rgba(35,33,28,0.14); border-radius:6px; background:#fff;
  font-family: var(--font-mono); font-weight:700; font-size:0.85rem; cursor:pointer; text-align:center;
  transition: border-color .15s, background .15s, color .15s;
}
.bk-time:hover{ border-color: var(--gold-500); }
.bk-time.active{ border-color: var(--gold-500); background: var(--gold-500); color: var(--on-gold); }

/* ── Reveal easing ───────────────────────────────────────────────────────── */
.reveal{ transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* logo placeholder recolor */
.logo-placeholder{ background: var(--gold-500); color: var(--on-gold); font-family: var(--font-display); }

/* ── Unified photo grade ─────────────────────────────────────────────────────
   One subtle warm grade over every real photo so mixed-source shots
   (cool white walls vs golden-hour site shots) read as one set. */
.service-card .img-slot,
.gallery-tile img,
.ba img,
img.photo-grade,
#hero-img{
  filter: saturate(0.9) sepia(0.08) contrast(1.03) brightness(0.99);
}

/* ── Service index (numbered editorial list, home) ──────────────────────────
   Deliberately a different shape from the photo card grid. */
.svc-index{ border-top: 1px solid var(--divider-light); }
.svc-index-row{
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 18px; padding: 22px 6px;
  border-bottom: 1px solid var(--divider-light);
  transition: background .2s ease, padding-left .25s cubic-bezier(.16,1,.3,1);
}
.svc-index-num{
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  color: var(--gold-600); letter-spacing: 0.08em;
}
.svc-index-main{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-index-title{
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.1; color: var(--text); letter-spacing: 0.01em;
}
.svc-index-short{ font-size: 14px; line-height: 1.55; color: var(--text-65); max-width: 46em; }
.svc-index-arrow{ color: var(--gold-600); font-size: 1.25rem; transition: transform .2s ease; }
.svc-index-row:hover{ background: rgba(203,169,95,0.08); padding-left: 14px; }
.svc-index-row:hover .svc-index-arrow{ transform: translateX(6px); }
@media (min-width: 768px){
  .svc-index-main{ flex-direction: row; align-items: baseline; gap: 20px; }
  .svc-index-title{ flex: 0 0 34%; }
}