/* ═══════════════════════════════════════════════════════════════
   Sign Painter · Phil's Painting West Islip · Design A
   All selectors scoped to [data-design="a"].dq-design or
   [data-design="a"] .dq-design per the no-leak rule.
   Slot-scoped: [data-design="a"] — ZERO [data-design="a"] left.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Allerta+Stencil&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Token system (slot-scoped to [data-design="a"]) ── */
[data-design="a"]{
  --design-a-primary: #B8862A;

  --gesso:#F2EAD3; --gesso-deep:#E5D9B7; --ink:#16130E; --ink-soft:#3D3526;
  --muted:#8A7E5E; --rule:#2D281C; --gold:#B8862A; --vermillion:#B8341E;
  --cobalt:#1F4A7A; --moss:#3D5A2E; --ochre:#A87325; --critical:#7C1A12;
  --sp-today:var(--vermillion);

  --font-display:"Cooper Black","Goudy Old Style","Bodoni 72",serif;
  --font-script:"Tangerine","Allura","Caveat Brush",cursive;
  --font-body:"Crimson Pro","Adobe Caslon Pro",Georgia,serif;
  --font-stencil:"Allerta Stencil","Stencil Std","DIN Next Stencil",sans-serif;
  --font-data:"JetBrains Mono","Söhne Mono",monospace;

  --space-bristle:2px; --space-quad:4px; --space-em:8px; --space-coat:16px;
  --space-pull:32px; --space-panel:56px; --space-shop:96px; --space-mural:144px;

  --dur-tick:120ms; --dur-stroke:480ms; --dur-shadow:320ms;
  --dur-letter:720ms; --dur-dry:1400ms; --dur-ambient:21000ms;
  --ease-brush:cubic-bezier(.65,.05,.36,1);
  --ease-snap:cubic-bezier(.7,0,.84,0);
  --ease-drop:cubic-bezier(.34,1.4,.64,1);
  --ease-dry:cubic-bezier(.45,.05,.55,.95);

  --radius-zero:0; --radius-pin:50%; --radius-tab:6px;
  --shadow-letter:4px 6px 0 var(--ink);
  --shadow-panel:2px 2px 0 var(--gesso-deep), 4px 4px 0 var(--rule);
  --shadow-press:inset 0 2px 0 rgba(0,0,0,.18);
  --shadow-wet:0 0 0 1px var(--rule), inset 0 0 12px rgba(0,0,0,.06);

  color:var(--ink); background:var(--gesso);
  font-family:var(--font-body); font-size:17px; line-height:1.7;
}
[data-design="a"].dq-design *,
[data-design="a"].dq-design *::before,
[data-design="a"].dq-design *::after{ box-sizing:border-box; }

@media (prefers-color-scheme: dark){
  [data-design="a"]{
    --gesso:#0F0D0A; --gesso-deep:#1A1611; --ink:#EDE4C9; --ink-soft:#BFB48E;
    --muted:#857B5D; --rule:#9B8E69; --gold:#D8A640; --vermillion:#D85939;
    --cobalt:#5089C2; --moss:#789A60; --ochre:#D8A04A; --critical:#C0382C;
    --sp-today:var(--vermillion);
    --shadow-wet:0 0 0 1px var(--rule), inset 0 0 12px rgba(0,0,0,.20);
  }
}

/* ── Mobile no-h-scroll floor (scoped to .dq-design) ── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design{ max-width:100%; overflow-x:clip; }
[data-design="a"].dq-design *{ min-width:0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]){ max-width:100%; height:auto; }

/* ═══════════════════════════════════════════════════════════════
   E1 — Header (The Marquee Bar)
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-header{
  position:sticky; top:0; z-index:40; background:var(--gesso);
  border-bottom:1px solid var(--rule);
}
[data-design="a"] .sp-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-coat); max-width:1280px; margin:0 auto;
  padding:var(--space-coat) clamp(16px,5vw,40px);
}
[data-design="a"] .sp-logo{ text-decoration:none; }
[data-design="a"] .sp-logo__mark{
  font-family:var(--font-display); font-size:clamp(20px,4vw,30px);
  color:var(--ink); letter-spacing:.01em;
  text-shadow:3px 4px 0 color-mix(in oklab, var(--gold) 70%, var(--ink));
}
/* Atmospheric bristle-line: gold, ~26s pull across bottom edge */
[data-design="a"] .sp-header__bristle{
  position:absolute; left:0; bottom:-1px; height:3px; width:100%;
  background:linear-gradient(90deg, transparent 0, var(--gold) 12%,
    var(--gold) 88%, transparent 100%);
  transform-origin:left center; transform:scaleX(0); opacity:.9;
  animation:a-bristle-pull 26s var(--ease-brush) infinite;
}
@keyframes a-bristle-pull{
  0%{ transform:scaleX(0); opacity:0; }
  18%{ opacity:.95; }
  46%{ transform:scaleX(1); opacity:.95; }
  60%{ transform:scaleX(1); transform-origin:left center; }
  61%{ transform-origin:right center; }
  88%{ transform:scaleX(0); transform-origin:right center; opacity:.5; }
  100%{ transform:scaleX(0); opacity:0; }
}
[data-design="a"] .sp-burger{
  display:inline-flex; flex-direction:column; gap:5px; padding:10px;
  min-width:44px; min-height:44px; background:transparent; cursor:pointer;
  border:1px solid var(--rule); border-radius:var(--radius-tab);
}
[data-design="a"] .sp-burger__line{
  display:block; width:22px; height:2px; background:var(--ink);
  transition:transform var(--dur-tick) var(--ease-brush),
             opacity var(--dur-tick) var(--ease-brush);
}
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(2){ opacity:0; }
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Drawer */
[data-design="a"] .sp-drawer{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:color-mix(in oklab, var(--ink) 55%, transparent);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-shadow) var(--ease-brush);
}
[data-design="a"] .sp-drawer[data-open="true"]{ opacity:1; pointer-events:auto; }
[data-design="a"] .sp-drawer[hidden]{ display:none; }
[data-design="a"] .sp-drawer__panel{
  width:min(90vw,380px); background:var(--gesso); border:1px solid var(--rule);
  box-shadow:var(--shadow-panel); padding:var(--space-pull);
  transform:translateY(-18px) rotate(-3deg); opacity:0;
  transition:transform var(--dur-shadow) var(--ease-drop),
             opacity var(--dur-shadow) var(--ease-brush);
  display:flex; flex-direction:column; gap:var(--space-coat);
}
[data-design="a"] .sp-drawer[data-open="true"] .sp-drawer__panel{
  transform:translateY(0) rotate(0); opacity:1;
}
[data-design="a"] .sp-drawer__sig{
  font-family:var(--font-script); font-size:clamp(28px,6vw,34px);
  color:var(--gold); margin:0;
}
[data-design="a"] .sp-drawer__nav{
  display:flex; flex-direction:column; gap:var(--space-coat);
}
[data-design="a"] .sp-drawer__nav a{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.14em; font-size:14px; color:var(--ink);
  text-decoration:none; padding:6px 0; border-bottom:1px solid var(--rule);
}
@media (hover: hover) and (pointer: fine){
  [data-design="a"] .sp-drawer__nav a:hover{ color:var(--vermillion); }
}
[data-design="a"] .sp-drawer__phone{
  font-family:var(--font-data); font-size:16px; color:var(--ink);
  text-decoration:none; letter-spacing:.04em;
}
[data-design="a"] .sp-drawer__close{
  background:none; border:0; cursor:pointer;
  font-family:var(--font-script); font-size:clamp(20px,4vw,28px);
  color:var(--ink-soft); align-self:flex-start;
  min-height:44px; min-width:44px;
}

/* ═══════════════════════════════════════════════════════════════
   E2 — CTA Button (The Marquee Button) — SLOT a
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-cta{
  position:relative; display:inline-flex; align-items:center;
  isolation:isolate; padding:16px 32px;
  background:var(--gesso-deep); border:1px solid var(--rule);
  border-radius:var(--radius-tab); text-decoration:none; cursor:pointer;
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(16px,2.6vw,20px); color:var(--gold);
  transform:translate(var(--mx,0),var(--my,0));
  transition:transform var(--dur-tick) var(--ease-brush);
}
[data-design="a"] .sp-cta__shadow{
  position:absolute; inset:0; z-index:-1; border-radius:var(--radius-tab);
  background:linear-gradient(135deg, var(--ink), var(--ink-soft));
  transform:translate(4px,6px);
  animation:a-cta-breath 4.5s var(--ease-dry) infinite;
}
[data-design="a"] .sp-cta__face{
  position:relative; z-index:1;
}
[data-design="a"] .sp-cta__bristle{
  position:absolute; left:8px; right:8px; bottom:-4px; height:2px;
  background:var(--vermillion); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-stroke) var(--ease-brush);
}
@keyframes a-cta-breath{
  0%,100%{ transform:translate(4px,6px); }
  50%{ transform:translate(6px,9px); }
}
@media (hover: hover) and (pointer: fine){
  [data-design="a"] .sp-cta:hover .sp-cta__shadow,
  [data-design="a"] .sp-cta:focus-visible .sp-cta__shadow{ transform:translate(6px,9px); animation-play-state:paused; }
  [data-design="a"] .sp-cta:hover .sp-cta__bristle,
  [data-design="a"] .sp-cta:focus-visible .sp-cta__bristle{ transform:scaleX(1); }
}
[data-design="a"] .sp-cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
[data-design="a"] .sp-cta:active{ transform:translate(3px,2px); box-shadow:var(--shadow-press); }
[data-design="a"] .sp-cta:active .sp-cta__shadow{ transform:translate(1px,2px); }

/* ═══════════════════════════════════════════════════════════════
   E3 — Hero (Storefront) — transformation-motif backdrop
   isolation:isolate on section; text z-index above all backdrop layers.
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-hero{
  position:relative;
  min-height:clamp(480px,72vh,820px);
  background:var(--gesso-deep);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:var(--space-pull);
  padding:var(--space-shop) clamp(16px,5vw,40px) var(--space-mural);
  /* isolation:isolate is set inline on the section element */
}
/* Transformation backdrop: color-wash panels fill from left, cycling */
[data-design="a"] .sp-hero__backdrop{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
[data-design="a"] .sp-hero__wash{
  position:absolute; inset:0;
  opacity:0;
}
[data-design="a"] .sp-hero__wash--a{
  background:linear-gradient(115deg,
    color-mix(in oklab, var(--vermillion) 22%, transparent) 0%,
    transparent 60%);
  animation:a-wash-cycle 9s var(--ease-dry) infinite;
}
[data-design="a"] .sp-hero__wash--b{
  background:linear-gradient(115deg,
    color-mix(in oklab, var(--cobalt) 18%, transparent) 0%,
    transparent 55%);
  animation:a-wash-cycle 9s var(--ease-dry) 4.5s infinite;
}
@keyframes a-wash-cycle{
  0%{ opacity:0; transform:scaleX(0.82); transform-origin:left center; }
  15%{ opacity:0.32; }
  42%{ opacity:0.28; transform:scaleX(1); }
  72%{ opacity:0.28; transform:scaleX(1); }
  100%{ opacity:0; transform:scaleX(0.82); transform-origin:left center; }
}
/* Wet-edge advancing across hero bottom */
[data-design="a"] .sp-hero__wet-edge{
  position:absolute; bottom:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  transform:scaleX(0); transform-origin:left;
  animation:a-wet-edge 7s var(--ease-brush) infinite;
}
@keyframes a-wet-edge{
  0%{ transform:scaleX(0); opacity:.7; }
  55%{ transform:scaleX(1); opacity:.9; }
  85%{ transform:scaleX(1); opacity:.5; }
  100%{ transform:scaleX(0); opacity:0; }
}
/* Today's Color (ambient, top-right) */
[data-design="a"] .sp-today{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  align-self:start; padding-top:var(--space-coat);
  pointer-events:none;
}
[data-design="a"] .sp-today__chip{
  width:84px; height:84px; border-radius:var(--radius-pin);
  background:var(--sp-today); box-shadow:var(--shadow-wet);
  animation:a-wet-sheen 9s var(--ease-dry) infinite;
}
[data-design="a"] .sp-today__name{
  font-family:var(--font-script); font-size:clamp(18px,3vw,22px);
  color:var(--ink);
}
[data-design="a"] .sp-today__code{
  font-family:var(--font-data); font-size:11px; color:var(--muted);
  letter-spacing:.04em;
}
@keyframes a-wet-sheen{
  0%,100%{ filter:saturate(1) brightness(1); box-shadow:var(--shadow-wet); }
  50%{ filter:saturate(1.16) brightness(.95);
       box-shadow:0 0 0 1px var(--rule), inset 0 0 18px rgba(0,0,0,.12); }
}
/* Rotating brush (ambient decoration, positioned absolute) */
[data-design="a"] .sp-hero__brush{
  position:absolute; right:clamp(16px,6vw,80px); bottom:24px;
  width:40px; height:170px;
  transform-origin:20px 144px;
  animation:a-brush-twirl var(--dur-ambient) linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes a-brush-twirl{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
/* Hero text — above all backdrop, z-index:3 */
[data-design="a"] .sp-hero__copy{
  position:relative; z-index:3;
  display:flex; flex-direction:column; gap:var(--space-coat);
  max-width:680px;
}
[data-design="a"] .sp-hero__descriptor{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.16em; font-size:13px; color:var(--muted); margin:0;
}
[data-design="a"] .sp-hero__title{
  font-family:var(--font-display); font-size:clamp(36px,7vw,72px);
  line-height:1.05; margin:0; color:var(--ink);
  text-shadow:var(--shadow-letter); max-width:16ch;
}
[data-design="a"] .sp-hero__sig{
  font-family:var(--font-script); font-size:clamp(28px,5vw,34px);
  color:var(--gold); margin:0;
}
[data-design="a"] .sp-hero__deck{
  font-size:clamp(17px,2.2vw,22px); color:var(--ink-soft);
  max-width:50ch; margin:0; line-height:1.5;
}
[data-design="a"] .sp-hero__proof{
  font-family:var(--font-data); font-size:14px; color:var(--muted);
  margin:0; letter-spacing:.02em;
}
[data-design="a"] .sp-hero__trust{
  font-family:var(--font-stencil); text-transform:uppercase;
  font-size:12px; color:var(--moss); letter-spacing:.12em; margin:0;
}

/* ═══════════════════════════════════════════════════════════════
   E6 — Pointer (wet-edge / coverage wayfinding)
   NOT a button. min-height 32px for gate. Visible at all viewports.
   Immediately before #funnel (ZERO siblings between).
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-pointer{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-em); padding:clamp(32px,5vw,48px) clamp(16px,5vw,40px);
  background:var(--gesso-deep); position:relative; overflow:hidden;
  min-height:80px;
  opacity:1;
}
[data-design="a"] .sp-pointer__rule{
  display:block; height:2px; background:var(--gold);
  border-radius:1px; transform-origin:left center; transform:scaleX(0);
}
[data-design="a"] .sp-pointer__rule--1{ width:min(320px,60vw); }
[data-design="a"] .sp-pointer__rule--2{ width:min(160px,30vw); }
[data-design="a"] .sp-pointer.is-in .sp-pointer__rule--1{
  transform:scaleX(1);
  transition:transform var(--dur-stroke) var(--ease-brush);
}
[data-design="a"] .sp-pointer.is-in .sp-pointer__rule--2{
  transform:scaleX(1);
  transition:transform var(--dur-stroke) var(--ease-brush) calc(var(--dur-stroke)*0.4);
}
[data-design="a"] .sp-pointer__label{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.18em; font-size:13px; color:var(--muted);
}
/* Arrow: a painted chevron pointing down — transform only, no opacity:0 at rest */
[data-design="a"] .sp-pointer__arrow{
  width:24px; height:24px; border-right:3px solid var(--gold);
  border-bottom:3px solid var(--gold); border-radius:2px;
  transform:rotate(45deg) translateY(-4px);
  animation:a-pointer-bob 3.2s var(--ease-dry) infinite;
}
@keyframes a-pointer-bob{
  0%,100%{ transform:rotate(45deg) translateY(-4px); }
  50%{ transform:rotate(45deg) translateY(2px); }
}

/* ═══════════════════════════════════════════════════════════════
   E5 — Funnel (Estimate Request — 4-step qualifying intake)
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-estimate{
  background:var(--gesso);
  padding:var(--space-shop) clamp(16px,5vw,40px);
}
[data-design="a"] .sp-estimate__inner{
  max-width:680px; margin:0 auto;
}
[data-design="a"] .sp-estimate__title{
  font-family:var(--font-display); font-size:clamp(28px,5vw,44px);
  color:var(--ink); text-shadow:var(--shadow-letter);
  margin:0 0 var(--space-coat);
}
[data-design="a"] .sp-estimate__progress{
  display:flex; gap:6px; margin-bottom:var(--space-pull);
}
[data-design="a"] .sp-estimate__progress i{
  height:4px; flex:1; background:var(--gesso-deep);
  border:1px solid var(--rule);
}
[data-design="a"] .sp-estimate__progress i.is-done{ background:var(--gold); }
[data-design="a"] .sp-step{
  border:0; padding:0; margin:0;
  animation:a-step-in var(--dur-stroke) var(--ease-brush);
}
[data-design="a"] .sp-step legend{
  font-family:var(--font-display); font-size:clamp(20px,3.5vw,28px);
  color:var(--ink); padding:0; margin-bottom:var(--space-coat);
  display:block; width:100%;
}
@keyframes a-step-in{
  from{ opacity:0; transform:translateX(18px); }
  to{ opacity:1; transform:translateX(0); }
}
[data-design="a"] .sp-chips{
  display:flex; flex-wrap:wrap; gap:var(--space-em);
}
[data-design="a"] .sp-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; min-height:44px;
  border:1px solid var(--rule); border-radius:var(--radius-tab);
  cursor:pointer; font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.1em; font-size:13px;
  transition:background var(--dur-tick) var(--ease-brush),
             box-shadow var(--dur-tick) var(--ease-brush);
}
[data-design="a"] .sp-chip:has(:checked){
  background:var(--gold); color:var(--gesso); box-shadow:var(--shadow-letter);
}
[data-design="a"] .sp-chip input{ width:0; height:0; opacity:0; position:absolute; }
[data-design="a"] .sp-field{
  display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-coat);
}
[data-design="a"] .sp-field span{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.14em; font-size:12px; color:var(--muted);
}
[data-design="a"] .sp-field input{
  background:transparent; border:0;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-body); font-style:italic;
  font-size:var(--text-body,17px); color:var(--ink);
  padding:8px 2px; min-height:44px;
}
[data-design="a"] .sp-field input:focus-visible{
  outline:0; border-bottom-color:var(--vermillion);
}
[data-design="a"] .sp-field__err{
  color:var(--vermillion); font-family:var(--font-script); font-size:22px;
  margin-top:var(--space-em);
}
[data-design="a"] .sp-done{ text-align:center; padding:var(--space-pull) 0; }
[data-design="a"] .sp-done__sig{
  font-family:var(--font-script); font-size:clamp(32px,6vw,44px);
  color:var(--gold); margin:0;
}
[data-design="a"] .sp-done__note{
  font-family:var(--font-body); color:var(--ink-soft); margin:var(--space-em) 0 0;
}
[data-design="a"] .sp-done__note a{ color:var(--ink); }
[data-design="a"] .sp-funnel__nav{
  display:flex; gap:var(--space-coat); margin-top:var(--space-pull); flex-wrap:wrap;
}
[data-design="a"] .sp-next,
[data-design="a"] .sp-back,
[data-design="a"] .sp-submit{
  min-height:44px; padding:12px 26px; cursor:pointer;
  border-radius:var(--radius-tab);
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.04em; font-size:16px;
}
[data-design="a"] .sp-next,
[data-design="a"] .sp-submit{
  background:var(--gesso-deep); color:var(--gold);
  border:1px solid var(--rule); box-shadow:var(--shadow-letter);
}
[data-design="a"] .sp-next:active,
[data-design="a"] .sp-submit:active{
  transform:translate(3px,2px); box-shadow:var(--shadow-press);
}
[data-design="a"] .sp-back{
  background:transparent; color:var(--ink-soft); border:1px solid var(--rule);
}

/* ── Shared section layout ── */
[data-design="a"] .sp-section-inner{
  max-width:1280px; margin:0 auto; padding:0 clamp(16px,5vw,40px);
}
[data-design="a"] .sp-section__head{
  font-family:var(--font-display); font-size:clamp(28px,5vw,44px);
  color:var(--ink); margin:0 0 var(--space-pull);
  text-shadow:var(--shadow-letter);
}
[data-design="a"] .sp-section__sub{
  font-size:clamp(17px,2vw,20px); color:var(--ink-soft);
  max-width:60ch; margin:0 0 var(--space-pull); line-height:1.6;
}

/* ── Before/After section ── */
[data-design="a"] .sp-beforeafter{
  background:var(--gesso); padding:var(--space-shop) 0;
}
[data-design="a"] .sp-ba-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px; margin-bottom:var(--space-shop);
}
[data-design="a"] .sp-ba-card{
  display:flex; gap:var(--space-pull); align-items:flex-start;
  border:1px solid var(--rule); padding:var(--space-pull);
  box-shadow:var(--shadow-panel);
}
[data-design="a"] .sp-ba-card__swatch{
  width:56px; height:56px; flex-shrink:0;
  background:var(--swatch-color,var(--gold));
  border-radius:var(--radius-pin); box-shadow:var(--shadow-wet);
}
[data-design="a"] .sp-ba-card__label{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.12em; font-size:12px; color:var(--muted); margin:0 0 8px;
}
[data-design="a"] .sp-ba-card__desc{
  font-size:16px; color:var(--ink-soft); margin:0; line-height:1.6;
}
[data-design="a"] .sp-ba-cta{
  display:flex; justify-content:flex-start;
}

/* ── Services ── */
[data-design="a"] .sp-services{
  background:var(--gesso-deep); padding:var(--space-shop) 0;
}
[data-design="a"] .sp-svc-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
}
[data-design="a"] .sp-svc-card{
  border:1px solid var(--rule); padding:var(--space-pull);
  box-shadow:var(--shadow-panel);
}
[data-design="a"] .sp-svc-card__label{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; color:var(--muted); margin:0 0 var(--space-em);
}
[data-design="a"] .sp-svc-card__body{
  font-size:17px; color:var(--ink-soft); margin:0; line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════════
   E4 — Ambient segment B — Back Wall (Process section)
   ═══════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-backwall{
  background:var(--gesso); padding:var(--space-shop) 0;
  position:relative;
}
[data-design="a"] .sp-backwall__rule{
  display:block; height:3px; width:calc(100% - clamp(32px,10vw,80px));
  background:linear-gradient(90deg, var(--ink) 0, var(--ink-soft) 100%);
  margin-bottom:var(--space-pull); margin-left:clamp(16px,5vw,40px);
  transform-origin:left center; transform:scaleX(0);
}
[data-design="a"] .sp-backwall.is-in .sp-backwall__rule{
  transform:scaleX(1);
  transition:transform var(--dur-stroke) var(--ease-brush);
}
[data-design="a"] .sp-backwall__title{
  font-family:var(--font-display); font-size:clamp(28px,5vw,44px);
  color:var(--ink); margin:0 0 var(--space-pull);
  text-shadow:var(--shadow-letter);
  padding:0 clamp(16px,5vw,40px);
}
[data-design="a"] .sp-process-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px; padding:0 clamp(16px,5vw,40px); margin-bottom:var(--space-shop);
}
[data-design="a"] .sp-process-step{ border-top:2px solid var(--rule); padding-top:var(--space-coat); }
[data-design="a"] .sp-process-step__num{
  font-family:var(--font-data); font-size:11px; color:var(--muted); display:block; margin-bottom:4px;
}
[data-design="a"] .sp-process-step__label{
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; color:var(--gold); margin:0 0 8px;
}
[data-design="a"] .sp-process-step__body{
  font-size:16px; color:var(--ink-soft); margin:0; line-height:1.6;
}
[data-design="a"] .sp-backwall__grid{
  display:grid; grid-template-columns:repeat(8,1fr);
  gap:var(--space-em); padding:0 clamp(16px,5vw,40px);
}
[data-design="a"] .sp-backwall__grid span{
  aspect-ratio:1; border-radius:var(--radius-tab); box-shadow:var(--shadow-wet);
  animation:a-wet-dry 16s var(--ease-dry) infinite;
}
@keyframes a-wet-dry{
  0%,100%{ filter:saturate(1) brightness(1); }
  40%{ filter:saturate(1.18) brightness(.94); }
  70%{ filter:saturate(1) brightness(1); }
}
[data-design="a"] .sp-backwall.is-paused .sp-backwall__grid span{ animation-play-state:paused; }

/* ── About ── */
[data-design="a"] .sp-about{
  background:var(--gesso-deep); padding:var(--space-shop) 0;
}
[data-design="a"] .sp-about__inner{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(32px,5vw,64px);
  align-items:start;
}
[data-design="a"] .sp-about__copy p{
  font-size:17px; color:var(--ink-soft); line-height:1.7; margin:0 0 var(--space-coat);
}
[data-design="a"] .sp-about__sig{
  font-family:var(--font-script); font-size:clamp(28px,5vw,34px); color:var(--gold); margin-top:var(--space-coat) !important;
}
[data-design="a"] .sp-mono-table{
  width:100%; border-collapse:collapse; font-family:var(--font-data); font-size:14px;
}
[data-design="a"] .sp-mono-table td{
  padding:8px 4px; border-bottom:1px solid var(--rule); vertical-align:top;
  line-height:1.5;
}
[data-design="a"] .sp-mono-table td:first-child{
  color:var(--muted); white-space:nowrap; padding-right:16px;
  text-transform:uppercase; letter-spacing:.1em; font-size:11px;
}
[data-design="a"] .sp-mono-table td a{ color:var(--ink); text-decoration:none; }

/* ── Service Area ── */
[data-design="a"] .sp-area{
  background:var(--gesso); padding:var(--space-panel) 0;
}
[data-design="a"] .sp-area p{
  font-size:17px; color:var(--ink-soft); line-height:1.6; margin:0;
}
[data-design="a"] .sp-area a{ color:var(--ink); }

/* ── Footer ── */
[data-design="a"] .sp-footer{
  background:var(--gesso-deep); border-top:2px solid var(--rule);
  padding:var(--space-shop) 0;
}
[data-design="a"] .sp-footer__inner{
  display:grid; grid-template-columns:1fr auto auto; gap:clamp(32px,5vw,64px);
  align-items:start;
}
[data-design="a"] .sp-footer__name{
  font-family:var(--font-display); font-size:clamp(22px,4vw,30px);
  color:var(--ink); text-shadow:var(--shadow-letter); margin:0 0 var(--space-em);
}
[data-design="a"] .sp-footer__sig-line{
  font-family:var(--font-script); font-size:22px; color:var(--gold); margin:0 0 var(--space-em);
}
[data-design="a"] .sp-footer__phone a{
  font-family:var(--font-data); font-size:17px; color:var(--ink); text-decoration:none;
}
[data-design="a"] .sp-footer__meta p{
  font-size:14px; color:var(--muted); margin:0 0 6px; line-height:1.5;
}
[data-design="a"] .sp-footer__copy{ margin-top:var(--space-coat) !important; }

/* ═══════════════════════════════════════════════════════════════
   SCROLL-PARALLAX — hero scroll-linked (TRIAD-2)
   Uses CSS scroll-driven animation: hero backdrop scales on scroll.
   GPU-composited transform only — not a layout prop.
   ═══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()){
  [data-design="a"] .sp-hero__backdrop{
    animation:a-hero-parallax linear both;
    animation-timeline:scroll(root);
    animation-range:0px 400px;
  }
  @keyframes a-hero-parallax{
    from{ transform:translateY(0) scale(1); }
    to{ transform:translateY(-60px) scale(1.04); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced-motion fallbacks
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  [data-design="a"] .sp-header__bristle{ animation:none; transform:scaleX(1); opacity:.9; }
  [data-design="a"] .sp-drawer,
  [data-design="a"] .sp-drawer__panel,
  [data-design="a"] .sp-burger__line{ transition:none; }
  [data-design="a"] .sp-cta{ transform:none; }
  [data-design="a"] .sp-cta__shadow{ animation:none; transform:translate(4px,6px); }
  [data-design="a"] .sp-cta__bristle{ transition:none; }
  [data-design="a"] .sp-hero__wash{ animation:none; opacity:0.22; transform:none; }
  [data-design="a"] .sp-hero__wet-edge{ animation:none; transform:scaleX(1); opacity:.7; }
  [data-design="a"] .sp-today__chip{ animation:none; }
  [data-design="a"] .sp-hero__brush{ animation:none; }
  [data-design="a"] .sp-pointer__rule{ transition:none; transform:scaleX(1); }
  [data-design="a"] .sp-pointer__arrow{ animation:none; }
  [data-design="a"] .sp-step{ animation:none; }
  [data-design="a"] .sp-next:active,
  [data-design="a"] .sp-submit:active{ transform:none; }
  [data-design="a"] .sp-backwall__grid span{ animation:none; }
  [data-design="a"] .sp-backwall__rule{ transform:scaleX(1); transition:none; }
  [data-design="a"] .sp-hero__backdrop{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — mobile / narrow
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  [data-design="a"] .sp-hero{
    grid-template-columns:1fr;
    padding-bottom:var(--space-shop);
  }
  [data-design="a"] .sp-today{
    flex-direction:row; align-items:center; gap:var(--space-coat);
    order:-1;
  }
  [data-design="a"] .sp-today__chip{ width:56px; height:56px; }
  [data-design="a"] .sp-hero__brush{ display:none; }
  [data-design="a"] .sp-about__inner{
    grid-template-columns:1fr;
  }
  [data-design="a"] .sp-footer__inner{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  [data-design="a"] .sp-funnel__nav button{ flex:1; }
  [data-design="a"] .sp-ba-card{ flex-direction:column; }
  [data-design="a"] .sp-backwall__grid{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:390px){
  [data-design="a"] .sp-cta{ padding:14px 22px; width:100%; justify-content:center; }
  [data-design="a"] .sp-hero__title{ font-size:clamp(32px,11vw,48px); }
  [data-design="a"] .sp-backwall__grid{ grid-template-columns:repeat(4,1fr); }
  [data-design="a"] .sp-ba-grid{ grid-template-columns:1fr; }
}
@media (max-width:320px){
  [data-design="a"] .sp-header__bar{ gap:8px; padding:var(--space-coat); }
  [data-design="a"] .sp-logo__mark{ font-size:18px; }
  [data-design="a"] .sp-hero{ padding:var(--space-panel) 14px; }
  [data-design="a"] .sp-estimate{ padding:var(--space-panel) 14px; }
  [data-design="a"] .sp-chip{ width:100%; }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }