/* ═══════════════════════════════════════════════════════════════
   Gonzales Masonry Services — Design A (Weatherhead)
   Slot: [data-design="a"] — ZERO [data-design="a"].dq-design selectors
   Exposes --design-a-primary on the root block
   ═══════════════════════════════════════════════════════════════ */

/* ── Token binding ── */
[data-design="a"] {
  --design-a-primary: #2A3F5C;

  /* Palette — storm-watch / masonry earth */
  --cloud:      #E1DDD2;
  --cloud-deep: #CFCABB;
  --ink:        #101216;
  --ink-soft:   #383A3F;
  --muted:      #74766F;
  --rule:       #1F2127;
  --slate-blue: #2A3F5C;
  --copper:     #A0552D;
  --advisory:   #C2841F;
  --warning:    #A3251A;
  --moss:       #3A5A2F;

  /* Typography */
  --font-display: "Tungsten","Bebas Neue","Oswald",sans-serif;
  --font-body:    "Sentinel","Roboto Slab","PT Serif",Georgia,serif;
  --font-stencil: "Stencil Std","DIN Next Stencil",sans-serif;
  --font-data:    "IBM Plex Mono","JetBrains Mono",monospace;

  /* Spacing */
  --space-shingle:  4px;
  --space-em:       8px;
  --space-board:   16px;
  --space-bay:     24px;
  --space-eave:    48px;
  --space-ridge:   80px;
  --space-roof:   144px;

  /* Motion */
  --dur-tick:   120ms;
  --dur-snap:   240ms;
  --dur-damp:   520ms;
  --dur-sweep:  900ms;
  --dur-lay:   1100ms;
  --dur-flash:  600ms;
  --dur-ambient: 13000ms;
  --ease-damp:  cubic-bezier(.4,.8,.4,1);
  --ease-sweep: cubic-bezier(.22,1,.36,1);
  --ease-lay:   cubic-bezier(.65,.05,.36,1);
  --ease-flash: cubic-bezier(.7,0,.84,0);

  /* Radius / shadow */
  --radius-zero: 0;
  --radius-pin:  2px;
  --radius-cap:  50%;
  --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.32);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,.2);
  --shadow-shingle: 0 1px 0 var(--rule), 0 2px 0 var(--cloud-deep);
  --shadow-mount: 0 1px 0 var(--rule);

  color: var(--ink);
  background: var(--cloud);
  font-family: var(--font-body);
  box-sizing: border-box;
}
[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"] {
    --cloud:      #0C0E12;
    --cloud-deep: #15181E;
    --ink:        #E5E2D6;
    --ink-soft:   #B0ADA1;
    --muted:      #7E807A;
    --rule:       #92928A;
    --slate-blue: #5A7CA8;
    --copper:     #C57544;
    --advisory:   #E2A848;
    --warning:    #D2473A;
    --moss:       #75955F;
  }
}

/* ══════════════════════════════════════════════════════
   ELEMENT 1 — Header / The Front Strip
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  background: var(--cloud); border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); isolation: isolate;
}
[data-design="a"] .wh-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-board); max-width: 1280px; margin: 0 auto;
  padding: 14px clamp(16px,4vw,40px);
}
[data-design="a"] .wh-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
[data-design="a"] .wh-logo__dot {
  flex: 0 0 auto; width: 9px; height: 9px;
  border-radius: var(--radius-cap); background: var(--slate-blue);
  box-shadow: 0 0 0 1px var(--rule);
  animation: wh-dot-drift 13s var(--ease-damp) infinite;
}
[data-design="a"] .wh-logo__mark {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(18px,2.6vw,26px); line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@keyframes wh-dot-drift {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(2px); }
}

/* front-sweep — header's atmospheric layer */
[data-design="a"] .wh-header__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  overflow: hidden; pointer-events: none;
}
[data-design="a"] .wh-header__front::before {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 34%; height: 100%; opacity: .65;
  background: linear-gradient(100deg, transparent, var(--copper), transparent);
  animation: wh-front-sweep 26s linear infinite;
}
@keyframes wh-front-sweep {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(330%); }
}

/* Hamburger */
[data-design="a"] .wh-burger {
  flex: 0 0 auto; display: inline-flex; flex-direction: column;
  justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px;
  cursor: pointer; background: var(--cloud-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-pin);
}
[data-design="a"] .wh-burger__line {
  display: block; width: 100%; height: 2px; background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-sweep), opacity var(--dur-snap) linear;
}
[data-design="a"] .wh-burger[aria-expanded="true"] .wh-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .wh-burger[aria-expanded="true"] .wh-burger__line:nth-child(2) { opacity: 0; }
[data-design="a"] .wh-burger[aria-expanded="true"] .wh-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="a"] .wh-burger:focus-visible { outline: 3px solid var(--advisory); outline-offset: 3px; }

/* Drawer */
[data-design="a"] .wh-drawer {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cloud); border-bottom: 1px solid var(--rule);
  padding: var(--space-bay) clamp(16px,4vw,40px);
  display: grid; gap: var(--space-board);
  transform: translateY(-8px); opacity: 0;
  transition: transform var(--dur-sweep) var(--ease-sweep), opacity var(--dur-snap) linear;
  z-index: 49;
}
[data-design="a"] .wh-drawer[hidden] { display: none; }
[data-design="a"] .wh-drawer.is-open  { transform: translateY(0); opacity: 1; }
[data-design="a"] .wh-drawer__nav { display: grid; gap: 12px; }
[data-design="a"] .wh-drawer__nav a {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 20px; color: var(--ink); text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wh-drawer__nav a:hover { color: var(--copper); }
}
[data-design="a"] .wh-drawer__line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; text-decoration: none;
  background: var(--cloud-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-pin); padding: 12px 16px;
}
[data-design="a"] .wh-drawer__line-id {
  font-family: var(--font-stencil); letter-spacing: .14em; font-size: 11px; color: var(--muted);
}
[data-design="a"] .wh-drawer__line-num {
  font-family: var(--font-data); font-size: 22px; color: var(--slate-blue);
}
[data-design="a"] .wh-drawer__cta { margin-top: 8px; }

/* ══════════════════════════════════════════════════════
   ELEMENT 2 — CTA (funnel-anchor dispatch button)
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-cta {
  --cta-shift: 0px;
  position: relative; display: inline-flex; align-items: center;
  gap: 12px; max-width: 100%; padding: 14px 26px;
  border: none; cursor: pointer; text-decoration: none;
  background: var(--slate-blue); color: var(--cloud);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: 18px;
  border-radius: var(--radius-pin); box-shadow: var(--shadow-bezel);
  transform: translate(var(--cta-shift), 0);
  transition: background var(--dur-snap) var(--ease-sweep), transform var(--dur-tick) var(--ease-sweep);
  animation: wh-cta-breath 4.5s var(--ease-damp) infinite;
}
[data-design="a"] .wh-cta__arrow svg { width: 30px; height: 10px; display: block; }
[data-design="a"] .wh-cta__arrow path {
  fill: none; stroke: var(--copper); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-design="a"] .wh-cta__arrow { transition: transform var(--dur-snap) var(--ease-sweep); }
[data-design="a"] .wh-cta__flash {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; background: var(--copper);
  /* scaleX from 0 → 1 with transform-origin left — GPU-only, no layout prop */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-snap) var(--ease-sweep);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wh-cta:hover { background: color-mix(in oklab, var(--slate-blue), black 4%); }
  [data-design="a"] .wh-cta:hover .wh-cta__flash { transform: scaleX(1); }
  [data-design="a"] .wh-cta:hover .wh-cta__arrow { transform: translateX(5px); }
}
[data-design="a"] .wh-cta:focus-visible { outline: 3px solid var(--advisory); outline-offset: 4px; }
[data-design="a"] .wh-cta:focus-visible .wh-cta__flash { transform: scaleX(1); }
[data-design="a"] .wh-cta:active { transform: translate(var(--cta-shift), 2px); box-shadow: var(--shadow-press); }
[data-design="a"] .wh-cta.is-received .wh-cta__flash { transform: scaleX(1); }
@keyframes wh-cta-breath {
  0%,100% { box-shadow: var(--shadow-bezel), 0 0 0 0 color-mix(in oklab, var(--slate-blue), transparent 100%); }
  50%     { box-shadow: var(--shadow-bezel), 0 0 0 6px color-mix(in oklab, var(--slate-blue), transparent 86%); }
}

/* ══════════════════════════════════════════════════════
   ELEMENT 3 — Hero / Masonry Watch Board (unique animated hero)
   isolation: isolate on section; text z-index above backdrop
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px,5vw,64px); align-items: center;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(64px,8vw,var(--space-ridge)) clamp(16px,4vw,40px);
  isolation: isolate;
}
[data-design="a"] .wh-hero__banner {
  position: relative; z-index: 2; display: grid; gap: 0;
}
[data-design="a"] .wh-hero__kicker {
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 var(--space-board);
}
[data-design="a"] .wh-hero__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: .98; font-size: clamp(36px,6.5vw,96px); letter-spacing: .01em;
  margin: 0 0 var(--space-board); text-wrap: balance;
  opacity: 1; /* HARD: hero text opacity:1 at first paint */
}
[data-design="a"] .wh-hero__desc {
  font-family: var(--font-data); font-size: 14px; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 var(--space-board);
  opacity: 1;
}
[data-design="a"] .wh-hero__deck {
  font-family: var(--font-body); font-size: clamp(17px,2.2vw,20px);
  line-height: 1.6; color: var(--ink-soft); max-width: 46ch;
  margin: 0 0 var(--space-bay);
  opacity: 1;
}

/* Masonry watch board — the animated backdrop (Element 3) */
[data-design="a"] .wh-board {
  margin: 0; background: var(--cloud-deep); border: 1px solid var(--rule);
  box-shadow: var(--shadow-bezel); padding: var(--space-bay);
  display: grid; gap: var(--space-board); position: relative; z-index: 1;
}
[data-design="a"] .wh-board__id {
  font-family: var(--font-stencil); letter-spacing: .14em; font-size: 11px; color: var(--muted);
}
[data-design="a"] .wh-board__readouts {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-board); align-items: end;
}

/* Plumb instrument — the unique hero animation (analogous to barometer drift) */
[data-design="a"] .wh-plumb svg { width: 100%; height: auto; max-width: 100%; display: block; }
[data-design="a"] .wh-plumb__guide {
  stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 4;
}
[data-design="a"] .wh-plumb__needle {
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: wh-plumb-drift var(--dur-ambient) var(--ease-damp) infinite;
}
[data-design="a"] .wh-plumb__needle line { stroke: var(--slate-blue); stroke-width: 2.2; stroke-linecap: round; }
[data-design="a"] .wh-plumb__bob { fill: var(--copper); }
[data-design="a"] .wh-plumb__tick { stroke: var(--muted); stroke-width: 1.5; }
[data-design="a"] .wh-plumb__read {
  font-family: var(--font-data); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-soft); display: block; margin-top: var(--space-em);
}
@keyframes wh-plumb-drift {
  0%,100% { transform: rotate(-0.4deg); }
  50%     { transform: rotate(0.4deg); }
}

/* Course-lay indicator */
[data-design="a"] .wh-courses svg { width: 100%; height: auto; max-width: 100%; display: block; }
[data-design="a"] .wh-course {
  fill: var(--slate-blue); stroke: var(--rule); stroke-width: 1;
  transform-box: view-box; transform-origin: center;
  animation: wh-course-lay 11s var(--ease-lay) infinite;
  animation-delay: calc(var(--ci) * 0.5s);
}
@keyframes wh-course-lay {
  0%   { opacity: .5; transform: translateY(4px); }
  18%  { opacity: 1;  transform: translateY(0); }
  80%  { opacity: 1;  transform: translateY(0); }
  100% { opacity: .5; transform: translateY(4px); }
}
[data-design="a"] .wh-courses__read {
  font-family: var(--font-data); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-soft); display: block; margin-top: var(--space-em);
}

/* Forecast strip (material readout) */
[data-design="a"] .wh-forecast {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-shingle);
}
[data-design="a"] .wh-forecast__cell {
  background: var(--cloud); border: 1px solid var(--rule);
  padding: 10px 12px; display: grid; gap: 2px;
}
[data-design="a"] .wh-forecast__cell b {
  font-family: var(--font-stencil); font-size: 10px; letter-spacing: .12em; color: var(--muted);
}
[data-design="a"] .wh-forecast__cell span {
  font-family: var(--font-data); font-size: 18px; color: var(--ink);
}
[data-design="a"] .wh-forecast__cell i {
  font-family: var(--font-data); font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .04em;
}
[data-design="a"] .wh-forecast__cell.is-today { border-color: var(--slate-blue); }
[data-design="a"] .wh-forecast__cell.is-advisory i { color: var(--advisory); }
[data-design="a"] .wh-hero[data-paused] .wh-plumb__needle { animation-play-state: paused; }
[data-design="a"] .wh-hero[data-paused] .wh-course { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════
   PORTFOLIO / WORK SECTION
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-work {
  padding: clamp(64px,8vw,var(--space-ridge)) clamp(16px,4vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .wh-work__inner { max-width: 1280px; margin: 0 auto; }
[data-design="a"] .wh-work__kicker {
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 var(--space-board);
}
[data-design="a"] .wh-work__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px,4.5vw,44px); line-height: 1.04; margin: 0 0 var(--space-board); max-width: 22ch;
}
[data-design="a"] .wh-work__lead {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-soft);
  max-width: 60ch; margin: 0 0 clamp(32px,5vw,56px);
}
[data-design="a"] .wh-work__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
[data-design="a"] .wh-plate {
  background: var(--cloud-deep); border: 1px solid var(--rule);
  padding: var(--space-bay); display: grid; gap: var(--space-board); align-content: start;
}
[data-design="a"] .wh-plate__icon svg {
  width: 48px; height: 48px; stroke: var(--slate-blue); fill: none;
  stroke-width: 2; stroke-linecap: round;
}
[data-design="a"] .wh-plate__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 20px; color: var(--ink); margin: 0;
}
[data-design="a"] .wh-plate__body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0;
}

/* ══════════════════════════════════════════════════════
   ELEMENT 4 — Mid-page Cross-Section Lay
   Masonry wall coursing upward (ambient B)
   TRIAD-2: scroll-linked pause/play via IntersectionObserver
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-section {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px,5vw,56px);
  align-items: center; background: var(--cloud-deep);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  max-width: none; padding: clamp(64px,8vw,var(--space-ridge)) clamp(16px,4vw,40px);
}
[data-design="a"] .wh-xsec { margin: 0; max-width: 560px; width: 100%; }
[data-design="a"] .wh-xsec__svg { width: 100%; height: auto; max-width: 100%; display: block; }
[data-design="a"] .wh-xsec__rafter { stroke: var(--ink); stroke-width: 2; }
[data-design="a"] .wh-xsec__deck  { fill: color-mix(in oklab, var(--cloud), var(--ink) 8%); stroke: var(--rule); stroke-width: 1; }
[data-design="a"] .wh-xsec__mortar { stroke: var(--cloud-deep); stroke-width: 1.5; opacity: .6; }
[data-design="a"] .wh-xsec__shingle {
  fill: var(--slate-blue); stroke: var(--rule); stroke-width: 1;
  transform-box: view-box; transform-origin: center;
  animation: wh-shingle-lay 16s var(--ease-lay) infinite;
  animation-delay: calc(var(--i) * 0.7s);
}
@keyframes wh-shingle-lay {
  0%   { opacity: .5; transform: translateY(5px); }
  16%  { opacity: 1;  transform: translateY(0); }
  82%  { opacity: 1;  transform: translateY(0); }
  100% { opacity: .5; transform: translateY(5px); }
}
[data-design="a"] .wh-xsec__label {
  font-family: var(--font-stencil); font-size: 8px; letter-spacing: .12em; fill: var(--muted);
}
[data-design="a"] .wh-section[data-paused] .wh-xsec__shingle { animation-play-state: paused; }

[data-design="a"] .wh-section__content { padding-right: clamp(0px, 2vw, 32px); }
[data-design="a"] .wh-section__kicker {
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 var(--space-board);
}
[data-design="a"] .wh-section__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px,4.5vw,44px); line-height: 1.04; margin: 0 0 var(--space-bay); max-width: 18ch;
}
[data-design="a"] .wh-section__body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 58ch;
}
[data-design="a"] .wh-section__body p { margin: 0 0 1em; }
[data-design="a"] .wh-section__body p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════
   PROCESS
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-process {
  padding: clamp(64px,8vw,var(--space-ridge)) clamp(16px,4vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .wh-process__inner { max-width: 1280px; margin: 0 auto; }
[data-design="a"] .wh-process__kicker {
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 var(--space-board);
}
[data-design="a"] .wh-process__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px,4.5vw,44px); line-height: 1.04; margin: 0 0 clamp(32px,5vw,56px); max-width: 24ch;
}
[data-design="a"] .wh-phases {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  counter-reset: none;
}
[data-design="a"] .wh-phase {
  background: var(--cloud-deep); border: 1px solid var(--rule);
  padding: var(--space-bay); display: grid; gap: var(--space-board); align-content: start;
}
[data-design="a"] .wh-phase__num {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .12em;
  color: var(--copper);
}
[data-design="a"] .wh-phase__name {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 18px; color: var(--ink); margin: 0;
}
[data-design="a"] .wh-phase__body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0;
}

/* Repeated funnel CTA block */
[data-design="a"] .wh-refunnel {
  padding: clamp(32px,5vw,56px) clamp(16px,4vw,40px);
  display: flex; justify-content: center; align-items: center;
  border-top: 1px solid var(--rule);
}

/* ══════════════════════════════════════════════════════
   ELEMENT 6 — Pointer (plumb-line wayfinding)
   data-mf-role="pointer" — IMMEDIATELY before #funnel
   Computed opacity: 1, height > 8px at all breakpoints
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-pointer {
  display: flex; justify-content: center; align-items: center;
  padding: clamp(24px, 4vw, 48px) clamp(16px,4vw,40px);
  border-top: 1px solid var(--rule);
  background: var(--cloud);
  opacity: 1; /* HARD: pointer must be visible */
  min-height: 80px; /* > 8px guaranteed */
}
[data-design="a"] .wh-pointer__inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 400px; width: 100%;
}
[data-design="a"] .wh-pointer__svg {
  width: 100%; height: auto; max-width: 320px; display: block; min-height: 56px;
}
/* Course line — draws in from left to right using scaleX */
[data-design="a"] .wh-pointer__course {
  stroke: var(--slate-blue); stroke-width: 2; stroke-linecap: round;
  transform-box: view-box; transform-origin: left center;
  animation: wh-course-draw 1.8s var(--ease-sweep) forwards, wh-course-pulse 4s var(--ease-damp) 1.8s infinite;
}
@keyframes wh-course-draw {
  from { transform: scaleX(0); opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes wh-course-pulse {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; }
}
/* Plumb drop — draws in top to bottom using scaleY */
[data-design="a"] .wh-pointer__drop {
  stroke: var(--copper); stroke-width: 2; stroke-linecap: round;
  transform-box: view-box; transform-origin: center top;
  animation: wh-drop-draw 0.9s var(--ease-lay) 1.6s both;
}
@keyframes wh-drop-draw {
  from { transform: scaleY(0); opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}
/* Plumb bob — reveal after drop */
[data-design="a"] .wh-pointer__bob {
  fill: var(--copper); opacity: 1;
  animation: wh-bob-settle 0.5s var(--ease-damp) 2.4s both, wh-bob-drift 5s var(--ease-damp) 3s infinite;
}
@keyframes wh-bob-settle {
  from { transform: translateY(-6px); opacity: 1; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes wh-bob-drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(3px); }
}
[data-design="a"] .wh-pointer__label {
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--copper); text-align: center;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   ELEMENT 5 — Qualifying Funnel (mason 5-step)
   id="funnel" data-mf-role="funnel"
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-watch {
  background: var(--cloud);
  padding: clamp(64px,8vw,var(--space-ridge)) clamp(16px,4vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .wh-watch__wrap {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-bay);
  align-items: start;
}
[data-design="a"] .wh-watch__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px,4.5vw,44px); line-height: 1.04; margin: 0 0 8px;
}
[data-design="a"] .wh-watch__count {
  font-family: var(--font-stencil); letter-spacing: .14em; font-size: 12px;
  color: var(--copper); margin: 0 0 var(--space-bay);
}

[data-design="a"] .wh-step { border: 0; padding: 0; margin: 0 0 var(--space-bay); min-inline-size: 0; }
[data-design="a"] .wh-step.is-active { animation: wh-step-in var(--dur-snap) var(--ease-sweep) both; }
@keyframes wh-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-design="a"] .wh-step__legend {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 20px; color: var(--ink); padding: 0 0 var(--space-board);
}
[data-design="a"] .wh-step__hint {
  font-family: var(--font-data); font-size: 13px; color: var(--warning); margin-top: var(--space-board);
}

/* Chips (radio + checkbox) */
[data-design="a"] .wh-chips { display: flex; flex-wrap: wrap; gap: 10px; }
[data-design="a"] .wh-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--rule); background: var(--cloud-deep);
  cursor: pointer; font-family: var(--font-body); font-size: 16px;
  min-height: 44px; /* tap target floor */
  transition: border-color var(--dur-tick), background var(--dur-tick);
}
[data-design="a"] .wh-chip input { width: 16px; height: 16px; accent-color: var(--slate-blue); }
[data-design="a"] .wh-chip:has(input:checked) {
  border-color: var(--slate-blue);
  background: color-mix(in oklab, var(--slate-blue), transparent 90%);
}
[data-design="a"] .wh-chip:has(input:focus-visible) { outline: 3px solid var(--advisory); outline-offset: 2px; }

/* Structural concern branch */
[data-design="a"] .wh-structural { margin-top: var(--space-bay); }
[data-design="a"] .wh-structural__prompt {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 var(--space-board);
}

/* Form fields */
[data-design="a"] .wh-field { display: grid; gap: 6px; margin-bottom: var(--space-board); }
[data-design="a"] .wh-field > span {
  font-family: var(--font-stencil); letter-spacing: .12em; font-size: 11px; color: var(--muted);
}
[data-design="a"] .wh-field input {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--cloud-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-pin); padding: 12px 14px;
  box-shadow: var(--shadow-bezel); width: 100%;
}
[data-design="a"] .wh-field input:focus-visible {
  outline: none; border-color: var(--slate-blue); border-width: 2px; padding: 11px 13px;
}
[data-design="a"] .wh-field--inline { margin-top: var(--space-board); }

/* Funnel nav */
[data-design="a"] .wh-funnel__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-bay); }
[data-design="a"] .wh-btn {
  cursor: pointer; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-size: 16px; border-radius: var(--radius-pin);
  padding: 12px 22px; border: 1px solid var(--rule); min-height: 44px;
}
[data-design="a"] .wh-btn--ghost { background: transparent; color: var(--ink); }
[data-design="a"] .wh-btn--next  { background: var(--slate-blue); color: var(--cloud); border-color: transparent; }
[data-design="a"] .wh-btn--dispatch { background: var(--slate-blue); color: var(--cloud); border-color: transparent; box-shadow: var(--shadow-bezel); }
[data-design="a"] .wh-btn:focus-visible { outline: 3px solid var(--advisory); outline-offset: 3px; }
[data-design="a"] .wh-btn:active { transform: translateY(2px); box-shadow: var(--shadow-press); }

/* Live preview panel */
[data-design="a"] .wh-preview {
  position: sticky; top: 84px; background: var(--cloud-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-pin);
  padding: var(--space-bay); box-shadow: var(--shadow-bezel);
  transition: box-shadow var(--dur-snap) linear;
}
[data-design="a"] .wh-preview[data-state="watch"]    { box-shadow: var(--shadow-bezel), inset 0 0 0 2px var(--slate-blue); }
[data-design="a"] .wh-preview[data-state="advisory"] { box-shadow: var(--shadow-bezel), inset 0 0 0 2px var(--advisory); }
[data-design="a"] .wh-preview[data-state="warning"]  { box-shadow: var(--shadow-bezel), inset 0 0 0 2px var(--warning); }
[data-design="a"] .wh-preview__id {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-board);
  font-family: var(--font-stencil); letter-spacing: .12em; font-size: 12px; color: var(--muted);
}
[data-design="a"] .wh-preview__lamp {
  width: 9px; height: 9px; border-radius: var(--radius-cap); flex: 0 0 auto; background: var(--slate-blue);
}
[data-design="a"] .wh-preview[data-state="advisory"] .wh-preview__lamp { background: var(--advisory); }
[data-design="a"] .wh-preview[data-state="warning"]  .wh-preview__lamp {
  background: var(--warning); animation: wh-flash var(--dur-flash) var(--ease-flash) infinite;
}
@keyframes wh-flash { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
[data-design="a"] .wh-preview__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
[data-design="a"] .wh-preview__rows li {
  display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rule); font-family: var(--font-body); font-size: 13px; color: var(--ink-soft);
}
[data-design="a"] .wh-preview__rows b { font-family: var(--font-data); font-size: 14px; color: var(--ink); }
[data-design="a"] .wh-preview__note {
  font-family: var(--font-data); font-size: 12px; letter-spacing: .04em;
  color: var(--muted); margin: var(--space-board) 0 0;
}
[data-design="a"] .wh-preview__ack {
  font-family: var(--font-data); color: var(--moss); min-height: 20px;
  margin: var(--space-board) 0 0; font-size: 14px;
}

/* Done state */
[data-design="a"] .wh-done { text-align: center; padding: var(--space-eave) 0; }
[data-design="a"] .wh-done__mark { width: 64px; height: 64px; }
[data-design="a"] .wh-done__mark path {
  fill: none; stroke: var(--moss); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: wh-done-draw var(--dur-lay) var(--ease-lay) forwards;
}
@keyframes wh-done-draw { to { stroke-dashoffset: 0; } }
[data-design="a"] .wh-done__title { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; margin: var(--space-board) 0 var(--space-em); }
[data-design="a"] .wh-done__body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink-soft); max-width: 48ch; margin: 0 auto;
}

/* Trust strip */
[data-design="a"] .wh-funnel__trust {
  max-width: 1100px; margin: var(--space-bay) auto 0;
  padding-top: var(--space-bay); border-top: 1px solid var(--rule);
  font-family: var(--font-data); font-size: 13px; color: var(--muted); display: grid; gap: 8px;
}
[data-design="a"] .wh-funnel__trust-note { color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════
   INLINE LINK
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-inline-link { color: var(--slate-blue); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wh-inline-link:hover { color: var(--copper); }
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-footer {
  background: var(--cloud-deep); border-top: 2px solid var(--rule);
  padding: clamp(40px,6vw,80px) clamp(16px,4vw,40px);
}
[data-design="a"] .wh-footer__inner {
  max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-bay);
}
[data-design="a"] .wh-footer__firm { display: grid; gap: 4px; }
[data-design="a"] .wh-footer__name {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(22px,4vw,36px); color: var(--ink);
}
[data-design="a"] .wh-footer__area {
  font-family: var(--font-data); font-size: 13px; color: var(--muted); letter-spacing: .08em;
}
[data-design="a"] .wh-footer__contact {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
[data-design="a"] .wh-footer__phone {
  font-family: var(--font-data); font-size: 24px; color: var(--slate-blue); text-decoration: none;
}
[data-design="a"] .wh-footer__cta {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
  font-size: 16px; background: var(--slate-blue); color: var(--cloud);
  padding: 10px 20px; text-decoration: none; border-radius: var(--radius-pin);
}
[data-design="a"] .wh-footer__copy {
  font-family: var(--font-data); font-size: 13px; color: var(--ink-soft); letter-spacing: .04em;
}
[data-design="a"] .wh-footer__legal {
  font-family: var(--font-data); font-size: 12px; color: var(--muted); letter-spacing: .04em; margin: 0;
}

/* ══════════════════════════════════════════════════════
   SCROLL-LINKED PARALLAX — TRIAD-2
   Hero board shifts subtly on scroll (CSS custom property driven by JS)
   ══════════════════════════════════════════════════════ */
[data-design="a"] .wh-board {
  will-change: transform;
  transform: translateY(var(--board-parallax, 0px));
  transition: transform 0ms linear; /* linear for scroll-linked */
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  [data-design="a"] .wh-phases { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  [data-design="a"] .wh-hero    { grid-template-columns: 1fr; }
  [data-design="a"] .wh-board   { order: -1; }
  [data-design="a"] .wh-section { grid-template-columns: 1fr; }
  [data-design="a"] .wh-work__grid { grid-template-columns: 1fr; }
  [data-design="a"] .wh-watch__wrap { grid-template-columns: 1fr; }
  [data-design="a"] .wh-preview { position: static; }
  [data-design="a"] .wh-phases  { grid-template-columns: 1fr 1fr; }
  [data-design="a"] .wh-header__bar { max-width: none; }
}
@media (max-width: 560px) {
  [data-design="a"] .wh-cta { width: 100%; justify-content: center; font-size: 16px; }
  [data-design="a"] .wh-hero__deck { font-size: 17px; }
  [data-design="a"] .wh-board__readouts { grid-template-columns: 1fr 1fr; }
  [data-design="a"] .wh-header__bar { padding: 12px 16px; }
  [data-design="a"] .wh-logo__mark { font-size: 18px; }
}
@media (max-width: 390px) {
  [data-design="a"] .wh-funnel__nav { flex-direction: column-reverse; }
  [data-design="a"] .wh-btn { width: 100%; }
  [data-design="a"] .wh-section__body { max-width: none; }
  [data-design="a"] .wh-phases { grid-template-columns: 1fr; }
}
@media (max-width: 320px) {
  [data-design="a"] .wh-hero   { padding-left: 14px; padding-right: 14px; }
  [data-design="a"] .wh-watch  { padding-left: 14px; padding-right: 14px; }
  [data-design="a"] .wh-section { padding-left: 14px; padding-right: 14px; }
  [data-design="a"] .wh-forecast__cell span { font-size: 16px; }
  [data-design="a"] .wh-burger { width: 40px; height: 40px; }
  [data-design="a"] .wh-logo__mark { font-size: 16px; letter-spacing: .02em; }
}

/* ── Mobile overflow guard 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; }

/* ══════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION fallbacks
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .wh-header__front::before { animation: none; transform: translateX(120%); opacity: .4; }
  [data-design="a"] .wh-logo__dot            { animation: none; }
  [data-design="a"] .wh-burger__line,
  [data-design="a"] .wh-drawer               { transition: none; }
  [data-design="a"] .wh-cta                  { animation: none; transform: none; }
  [data-design="a"] .wh-cta__arrow           { transition: none; }
  [data-design="a"] .wh-cta__flash           { transition: none; transform: scaleX(0); }
  [data-design="a"] .wh-plumb__needle        { animation: none; transform: rotate(0deg); }
  [data-design="a"] .wh-course               { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .wh-xsec__shingle        { animation: none; opacity: 1; transform: translateY(0); }
  [data-design="a"] .wh-step.is-active       { animation: none; }
  [data-design="a"] .wh-preview             { transition: none; }
  [data-design="a"] .wh-preview[data-state="warning"] .wh-preview__lamp { animation: none; opacity: 1; }
  [data-design="a"] .wh-done__mark path     { animation: none; stroke-dashoffset: 0; }
  [data-design="a"] .wh-pointer__course     { animation: none; transform: scaleX(1); opacity: 1; }
  [data-design="a"] .wh-pointer__drop       { animation: none; transform: scaleY(1); opacity: 1; }
  [data-design="a"] .wh-pointer__bob        { animation: none; transform: none; opacity: 1; }
}

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