/* ═══════════════════════════════════════════════════════════
   Portland Home Services & Fencing — Design B (specimen-card)
   Slot: b  |  All selectors scoped [data-design="b"]
   --design-b-primary exposed on root block
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Design-B token root ─────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  --design-b-primary       : #8B3A2F;

  /* Surface */
  --sc-paper               : #F2EDE3;
  --sc-paper-dim           : #E8E1D1;
  --sc-paper-dark          : #1A1815;
  --sc-paper-dark-dim      : #221F1B;

  /* Ink */
  --sc-ink                 : #1B1A18;
  --sc-ink-soft            : #4A4640;
  --sc-muted               : #8C8678;
  --sc-line                : #C8BFA8;
  --sc-line-strong         : #7A7159;

  /* Four house chips — handyman-adapted naming */
  --sc-chip-01             : #8B3A2F;   /* Studio Red — fencing/primary */
  --sc-chip-02             : #2E3B36;   /* Library Green — remodel/secondary */
  --sc-chip-03             : #D9C098;   /* Limestone — flooring/warm neutral */
  --sc-chip-04             : #1F2937;   /* Slate — handyman/deep accent */

  --sc-chip-01-wet         : #A0463A;
  --sc-chip-02-wet         : #38473F;
  --sc-chip-03-wet         : #E2CDA8;
  --sc-chip-04-wet         : #2A3543;

  --sc-gloss               : rgba(255,255,255,0.42);
  --sc-gloss-dark          : rgba(255,255,255,0.18);
  --sc-critical            : #B23A1F;
  --sc-success             : #3F5E47;

  /* Semantic aliases */
  --sc-surface             : var(--sc-paper);
  --sc-surface-sunk        : var(--sc-paper-dim);
  --sc-text                : var(--sc-ink);
  --sc-text-soft           : var(--sc-ink-soft);
  --sc-text-mute           : var(--sc-muted);
  --sc-rule                : var(--sc-line);
  --sc-rule-strong         : var(--sc-line-strong);
  --sc-brand               : var(--sc-chip-01);
  --sc-brand-wet           : var(--sc-chip-01-wet);
  --sc-accent              : var(--sc-chip-02);
  --sc-accent-warm         : var(--sc-chip-03);
  --sc-accent-deep         : var(--sc-chip-04);

  /* Typography */
  --sc-font-display        : 'Cormorant Garamond', 'Cormorant', 'Garamond', 'Times New Roman', serif;
  --sc-font-body           : 'IBM Plex Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --sc-font-mono           : 'IBM Plex Mono', 'SFMono-Regular', 'Menlo', monospace;

  --sc-type-specimen       : clamp(42px, 6.5vw, 88px);
  --sc-type-display        : clamp(32px, 4.5vw, 58px);
  --sc-type-headline       : clamp(22px, 2.8vw, 32px);
  --sc-type-body-lg        : clamp(17px, 1.5vw, 20px);
  --sc-type-body           : clamp(16px, 1.3vw, 18px);
  --sc-type-caption        : 14px;
  --sc-type-tag            : 12px;

  /* Spacing — painter's ladder (multiples of 4) */
  --sc-hairline            : 1px;
  --sc-stitch              : 4px;
  --sc-cut-in              : 8px;
  --sc-stroke              : 16px;
  --sc-coat                : 24px;
  --sc-bay                 : 40px;
  --sc-wall                : 64px;
  --sc-room                : 96px;

  /* Radius */
  --sc-radius-chip         : 0;
  --sc-radius-stitch       : 2px;
  --sc-radius-btn          : 4px;
  --sc-radius-status       : 999px;

  /* Motion durations */
  --sc-dur-lay             : 180ms;
  --sc-dur-settle          : 320ms;
  --sc-dur-dry             : 640ms;
  --sc-dur-cure            : 1400ms;
  --sc-dur-study-a         : 12000ms;
  --sc-dur-study-b         : 19000ms;
  --sc-dur-breath          : 5200ms;
  --sc-dur-pointer         : 4800ms;

  /* Easing */
  --sc-ease-lay            : cubic-bezier(.22, .61, .36, 1);
  --sc-ease-edge           : cubic-bezier(.65, .04, .35, 1);
  --sc-ease-settle         : cubic-bezier(.16, 1, .3, 1);
  --sc-ease-press          : cubic-bezier(.4, 0, .6, 1);

  /* Elevation — flat printed object, no drop shadows */
  --sc-elev-wet            : inset 0 1px 0 0 var(--sc-gloss);
}

/* ── Article base ────────────────────────────────────────── */
[data-design="b"].dq-design {
  background   : var(--sc-paper);
  color        : var(--sc-ink);
  font-family  : var(--sc-font-body);
  font-size    : var(--sc-type-body);
  line-height  : 1.55;
  max-width    : 100%;
  overflow-x   : clip;
}

[data-design="b"].dq-design * { min-width: 0; box-sizing: border-box; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* Centered content container */
[data-design="b"] .sc-section-inner {
  max-width    : 1320px;
  margin-inline: auto;
  padding-inline: clamp(var(--sc-stroke), 5vw, var(--sc-bay));
}

/* ── Typography utilities ────────────────────────────────── */
[data-design="b"] .sc-type-tag {
  font-family   : var(--sc-font-mono);
  font-size     : var(--sc-type-tag);
  font-weight   : 400;
  line-height   : 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color         : var(--sc-text-mute);
  display       : block;
}
[data-design="b"] .sc-type-caption {
  font-family   : var(--sc-font-body);
  font-weight   : 500;
  font-size     : var(--sc-type-caption);
  line-height   : 1.4;
  letter-spacing: 0.01em;
}
[data-design="b"] .sc-type-body {
  font-family  : var(--sc-font-body);
  font-weight  : 400;
  font-size    : var(--sc-type-body);
  line-height  : 1.55;
}
[data-design="b"] .sc-type-body-lg {
  font-family  : var(--sc-font-body);
  font-weight  : 400;
  font-size    : var(--sc-type-body-lg);
  line-height  : 1.5;
}
[data-design="b"] .sc-type-headline {
  font-family   : var(--sc-font-body);
  font-weight   : 600;
  font-size     : var(--sc-type-headline);
  line-height   : 1.18;
  letter-spacing: -0.005em;
}
[data-design="b"] .sc-type-display {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : var(--sc-type-display);
  line-height   : 1.04;
  letter-spacing: -0.015em;
}
[data-design="b"] .sc-type-specimen {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : var(--sc-type-specimen);
  line-height   : 0.97;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════════════════
   ELEMENT 1 — Animated minimalist header
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-header {
  position  : sticky;
  top       : 0;
  z-index   : 50;
  background: var(--sc-paper);
}
[data-design="b"] .sc-header__bar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : var(--sc-stroke) clamp(var(--sc-stroke), 4vw, var(--sc-bay));
  min-height     : 64px;
}
[data-design="b"] .sc-header__logo { text-decoration: none; color: var(--sc-ink); }
[data-design="b"] .sc-header__logo-mark {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : 24px;
  letter-spacing: -0.01em;
  line-height   : 1;
}
[data-design="b"] .sc-header__menu {
  appearance   : none;
  background   : transparent;
  border       : 1px solid var(--sc-rule);
  border-radius: var(--sc-radius-btn);
  width        : 44px;
  height       : 44px;
  display      : grid;
  place-items  : center;
  gap          : 5px;
  cursor       : pointer;
  grid-template-rows: 1px 1px;
  padding      : 0 10px;
  transition   : border-color var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-header__menu-bar {
  display   : block;
  width     : 100%;
  height    : 1px;
  background: var(--sc-ink);
}
/* Hairline rule + wet-edge sweep (≥19s — H-3 premium slow) */
[data-design="b"] .sc-header__rule {
  position  : relative;
  height    : 1px;
  background: var(--sc-rule);
  overflow  : hidden;
}
[data-design="b"] .sc-header__wet {
  position  : absolute;
  top       : -1px;
  left      : -20%;
  width     : 22%;
  height    : 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sc-brand-wet) 40%, var(--sc-gloss) 50%, var(--sc-brand-wet) 60%, transparent 100%);
  filter    : blur(0.5px);
  animation : scb-header-wet-edge 19s var(--sc-ease-edge) infinite;
}
@keyframes scb-header-wet-edge {
  0%   { transform: translateX(0)      scaleY(1);   opacity: 0; }
  6%   {                                             opacity: 1; }
  50%  { transform: translateX(420%)   scaleY(1.2); opacity: 1; }
  94%  {                                             opacity: 1; }
  100% { transform: translateX(560%)   scaleY(1);   opacity: 0; }
}

/* Drawer */
[data-design="b"] .sc-drawer {
  position  : fixed;
  inset     : 0;
  z-index   : 60;
  background: rgba(27,26,24,0.32);
}
[data-design="b"] .sc-drawer[hidden] { display: none; }
[data-design="b"] .sc-drawer__panel {
  position      : absolute;
  top           : 0;
  right         : 0;
  height        : 100%;
  width         : min(360px, 88vw);
  background    : var(--sc-paper);
  border-top    : 3px solid var(--sc-brand);
  padding       : var(--sc-coat);
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-bay);
  transform     : translateX(100%);
  transition    : transform var(--sc-dur-dry) var(--sc-ease-edge);
}
[data-design="b"] .sc-drawer.is-open .sc-drawer__panel { transform: translateX(0); }
[data-design="b"] .sc-drawer__close {
  appearance  : none;
  background  : transparent;
  border      : 0;
  font-family : var(--sc-font-mono);
  font-size   : 24px;
  line-height : 1;
  color       : var(--sc-ink);
  cursor      : pointer;
  align-self  : flex-end;
  width       : 44px;
  height      : 44px;
  display     : flex;
  align-items : center;
  justify-content: center;
}
[data-design="b"] .sc-drawer__nav {
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-stroke);
}
[data-design="b"] .sc-drawer__link {
  font-family : var(--sc-font-display);
  font-size   : 32px;
  font-weight : 500;
  color       : var(--sc-ink);
  text-decoration: none;
  padding     : 8px 0;
  border-bottom: 1px solid var(--sc-rule);
  letter-spacing: -0.01em;
  transition  : color var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-drawer__actions {
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-stroke);
}
[data-design="b"] .sc-drawer__phone {
  font-family : var(--sc-font-body);
  font-size   : 20px;
  font-weight : 600;
  color       : var(--sc-brand);
  text-decoration: none;
  padding     : 12px 0;
  min-height  : 56px;
  display     : flex;
  align-items : center;
}
[data-design="b"] .sc-drawer__foot {
  margin-top: auto;
  color     : var(--sc-text-mute);
}

@media (max-width: 380px) {
  [data-design="b"] .sc-header__logo-mark { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   ELEMENT 2 — Animated CTA chip (intake anchor)
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-cta {
  position      : relative;
  display       : inline-flex;
  align-items   : center;
  gap           : 14px;
  padding       : 18px 28px;
  min-height    : 56px;
  background    : var(--sc-brand);
  color         : var(--sc-paper);
  font-family   : var(--sc-font-body);
  font-weight   : 600;
  font-size     : 16px;
  text-decoration: none;
  border        : none;
  cursor        : pointer;
  border-radius : var(--sc-radius-btn);
  box-shadow    : var(--sc-elev-wet);
  overflow      : hidden;
  isolation     : isolate;
  transition    : background-color var(--sc-dur-settle) var(--sc-ease-settle), transform var(--sc-dur-lay) var(--sc-ease-press);
}
[data-design="b"] .sc-cta--secondary {
  background: var(--sc-paper-dim);
  color     : var(--sc-ink);
  animation : none;
  box-shadow: none;
  border    : 1px solid var(--sc-rule);
}
[data-design="b"] .sc-cta--next {
  margin-top: var(--sc-stroke);
}
[data-design="b"] .sc-cta__label,
[data-design="b"] .sc-cta__arrow { position: relative; z-index: 2; }
[data-design="b"] .sc-cta__arrow {
  font-family: var(--sc-font-mono);
  font-size  : 18px;
  line-height: 1;
  transition : transform var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-cta__wet {
  position      : absolute;
  inset         : 0;
  pointer-events: none;
  background    : linear-gradient(105deg, transparent 30%, var(--sc-gloss) 50%, transparent 70%);
  transform     : translateX(-110%);
  z-index       : 1;
  animation     : scb-cta-breath var(--sc-dur-breath) ease-in-out infinite;
}
[data-design="b"] .sc-cta:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 4px; }
[data-design="b"] .sc-cta:active { transform: scale(0.98); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sc-cta:hover { background: var(--sc-brand-wet); }
  [data-design="b"] .sc-cta:hover .sc-cta__wet { transform: translateX(110%); transition: transform 480ms var(--sc-ease-edge); }
  [data-design="b"] .sc-cta:hover .sc-cta__arrow { transform: translateX(4px); }
  [data-design="b"] .sc-header__menu:hover { border-color: var(--sc-ink); }
  [data-design="b"] .sc-drawer__link:hover { color: var(--sc-brand); }
}

/* CTA breath — sc-cta__wet overlay pulses opacity (GPU-composited, not box-shadow) */
@keyframes scb-cta-breath {
  0%, 100% { opacity: 0.35; transform: translateX(-110%); }
  50%       { opacity: 0.55; transform: translateX(-110%); }
}

/* ════════════════════════════════════════════════════════════
   HERO — data-mf-role="hero"
   Element 3 backdrop + specimen layout
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-hero {
  position    : relative;
  min-height  : 82vh;
  display     : flex;
  align-items : stretch;
  overflow    : hidden;
  background  : var(--sc-paper);
}

/* ELEMENT 3 — Ambient backdrop: warm paper + raking light + color chips */
[data-design="b"] .sc-hero__backdrop {
  position: absolute;
  inset    : 0;
  z-index  : 0;
  overflow : hidden;
}
[data-design="b"] .sc-hero__paper {
  position  : absolute;
  inset     : 0;
  background: var(--sc-paper);
}
/* Raking light sweep — sustained ambient motion (HERO-3, v0.2.1 perceptible ambient) */
[data-design="b"] .sc-hero__rake {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.28) 50%, transparent 75%);
  animation : scb-hero-rake var(--sc-dur-study-b) ease-in-out infinite;
}
@keyframes scb-hero-rake {
  0%, 100% { transform: translateX(-60%) skewX(-8deg); opacity: 0.4; }
  50%      { transform: translateX(60%)  skewX(-8deg); opacity: 0.9; }
}
/* Four large specimen chips in the background — color-study shifts */
[data-design="b"] .sc-hero__chips {
  position: absolute;
  inset    : 0;
  display  : flex;
  gap      : 0;
  pointer-events: none;
}
[data-design="b"] .sc-hero__chip {
  flex     : 1;
  opacity  : 0.12;
  animation: scb-hero-chip-shift var(--sc-dur-study-a) ease-in-out infinite;
  animation-delay: calc(var(--i) * -3s);
}
[data-design="b"] .sc-hero__chip--01 { background: var(--sc-chip-01); }
[data-design="b"] .sc-hero__chip--02 { background: var(--sc-chip-02); }
[data-design="b"] .sc-hero__chip--03 { background: var(--sc-chip-03); }
[data-design="b"] .sc-hero__chip--04 { background: var(--sc-chip-04); }
@keyframes scb-hero-chip-shift {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.18; }
}
/* Label tags that settle in from top */
[data-design="b"] .sc-hero__labels {
  position: absolute;
  top     : var(--sc-room);
  right   : clamp(var(--sc-stroke), 5vw, var(--sc-bay));
  display : flex;
  flex-direction: column;
  gap     : var(--sc-cut-in);
  pointer-events: none;
}
[data-design="b"] .sc-hero__label {
  font-family   : var(--sc-font-mono);
  font-size     : 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color         : var(--sc-text-mute);
  opacity       : 1;
  /* Entrance: transform-only (no opacity start below 1) */
  animation     : scb-label-settle var(--sc-dur-cure) var(--sc-ease-settle) both;
  animation-delay: calc(var(--j) * 200ms + 400ms);
}
@keyframes scb-label-settle {
  from { transform: translateY(-10px) scale(0.96); }
  to   { transform: translateY(0)     scale(1); }
}

/* Hero content layout */
[data-design="b"] .sc-hero__content {
  position : relative;
  z-index  : 2;
  display  : grid;
  grid-template-columns: 1fr auto;
  gap      : var(--sc-bay);
  width    : 100%;
  max-width: 1320px;
  margin   : 0 auto;
  padding  : clamp(var(--sc-wall), 10vh, var(--sc-room)) clamp(var(--sc-stroke), 5vw, var(--sc-bay));
  align-items: center;
}
[data-design="b"] .sc-hero__inner {
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-coat);
  max-width     : 680px;
}
[data-design="b"] .sc-hero__kicker { margin-bottom: var(--sc-cut-in); }
[data-design="b"] .sc-hero__headline {
  color  : var(--sc-ink);
  margin : 0;
}
[data-design="b"] .sc-hero__subtitle {
  color     : var(--sc-ink-soft);
  max-width : 52ch;
  margin    : 0;
}
[data-design="b"] .sc-hero__proof {
  color         : var(--sc-muted);
  letter-spacing: 0.03em;
  margin        : 0;
}
[data-design="b"] .sc-hero__ctas {
  display    : flex;
  flex-wrap  : wrap;
  gap        : var(--sc-stroke);
  align-items: center;
  margin-top : var(--sc-stroke);
}
/* Prominent phone affordance — ≥56px tap target */
[data-design="b"] .sc-hero__phone {
  display       : inline-flex;
  align-items   : center;
  min-height    : 56px;
  min-width     : 56px;
  padding       : 16px 24px;
  font-family   : var(--sc-font-body);
  font-weight   : 600;
  font-size     : clamp(16px, 1.4vw, 20px);
  color         : var(--sc-ink);
  text-decoration: none;
  border        : 2px solid var(--sc-rule-strong);
  border-radius : var(--sc-radius-btn);
  letter-spacing: 0.01em;
  transition    : border-color var(--sc-dur-settle) var(--sc-ease-settle), color var(--sc-dur-settle) var(--sc-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sc-hero__phone:hover {
    border-color: var(--sc-brand);
    color       : var(--sc-brand);
  }
}
[data-design="b"] .sc-hero__phone-label { pointer-events: none; }

/* Right-column chip strip */
[data-design="b"] .sc-hero__chip-strip {
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-stitch);
  align-self    : stretch;
}
[data-design="b"] .sc-hero__chip-swatch {
  flex         : 1;
  min-height   : 80px;
  display      : grid;
  grid-template-rows: auto 1fr auto;
  align-items  : start;
  padding      : var(--sc-stroke) var(--sc-cut-in);
  gap          : 4px;
  border       : 1px solid var(--sc-rule);
  position     : relative;
  overflow     : hidden;
}
[data-design="b"] .sc-hero__chip-swatch--01 { background: var(--sc-chip-01); }
[data-design="b"] .sc-hero__chip-swatch--02 { background: var(--sc-chip-02); }
[data-design="b"] .sc-hero__chip-swatch--03 { background: var(--sc-chip-03); }
[data-design="b"] .sc-hero__chip-swatch--04 { background: var(--sc-chip-04); }
/* Wet overlay — a translucent sheen that sweeps in/out via opacity only (GPU-composited) */
[data-design="b"] .sc-hero__chip-swatch::after {
  content         : "";
  position        : absolute;
  inset           : 0;
  background      : rgba(255,255,255,0.18);
  animation       : scb-swatch-wet var(--sc-dur-study-a) ease-in-out infinite;
}
[data-design="b"] .sc-hero__chip-swatch--01::after { animation-delay: 0s; }
[data-design="b"] .sc-hero__chip-swatch--02::after { animation-delay: -3s; }
[data-design="b"] .sc-hero__chip-swatch--03::after { animation-delay: -6s; }
[data-design="b"] .sc-hero__chip-swatch--04::after { animation-delay: -9s; }
@keyframes scb-swatch-wet {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

[data-design="b"] .sc-hero__chip-swatch .sc-type-tag { color: rgba(242,237,227,0.7); }
[data-design="b"] .sc-hero__chip-swatch--03 .sc-type-tag { color: rgba(27,26,24,0.5); }
[data-design="b"] .sc-hero__swatch-name {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : 18px;
  line-height   : 1.1;
  letter-spacing: -0.01em;
  color         : rgba(242,237,227,0.9);
  align-self    : center;
}
[data-design="b"] .sc-hero__chip-swatch--03 .sc-hero__swatch-name { color: rgba(27,26,24,0.75); }

/* ════════════════════════════════════════════════════════════
   ELEMENT 6 — Pointer (wet-stroke)
   data-mf-role="pointer" · opacity:1 · height≥8px
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-pointer {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 12px;
  width          : 100%;
  padding        : var(--sc-bay) 0;
  color          : var(--sc-text-mute);
  text-decoration: none;
  /* Gate: opacity:1, visible */
}
[data-design="b"] .sc-pointer__svg {
  display: block;
  width  : 24px;
  height : 220px;
  overflow: visible;
}
[data-design="b"] .sc-pointer__stroke {
  fill            : var(--sc-accent);
  transform-origin: top;
  animation       : scb-pointer-lay var(--sc-dur-pointer) var(--sc-ease-edge) infinite;
}
[data-design="b"] .sc-pointer__tip {
  fill     : var(--sc-brand);
  animation: scb-pointer-tip var(--sc-dur-pointer) var(--sc-ease-edge) infinite;
}
[data-design="b"] .sc-pointer__drip {
  fill     : var(--sc-brand-wet);
  animation: scb-pointer-drip var(--sc-dur-pointer) var(--sc-ease-lay) infinite;
}
[data-design="b"] .sc-pointer__label { letter-spacing: 0.08em; }

@keyframes scb-pointer-lay {
  0%   { transform: scaleY(0); opacity: 0; }
  10%  {                        opacity: 1; }
  80%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes scb-pointer-tip {
  0%   { cy: 0;   opacity: 0; }
  10%  {          opacity: 1; }
  80%  { cy: 200; opacity: 1; }
  100% { cy: 200; opacity: 0; }
}
@keyframes scb-pointer-drip {
  0%, 78%  { opacity: 0; transform: translateY(0); }
  82%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(8px); }
}
@supports not (cy: 0) {
  [data-design="b"] .sc-pointer__tip { animation: scb-pointer-tip-y var(--sc-dur-pointer) var(--sc-ease-edge) infinite; }
  @keyframes scb-pointer-tip-y {
    0%   { transform: translateY(0);     opacity: 0; }
    10%  {                               opacity: 1; }
    80%  { transform: translateY(200px); opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
  }
}

/* ════════════════════════════════════════════════════════════
   ELEMENT 5 — Service-intake widget (Walk-the-Room adapted)
   id="funnel" data-mf-role="funnel"
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-walk {
  padding   : var(--sc-room) 0;
  background: var(--sc-paper);
  border-top: 1px solid var(--sc-rule);
}
[data-design="b"] .sc-funnel-container {
  max-width    : 1320px;
  margin-inline: auto;
  padding-inline: clamp(var(--sc-stroke), 5vw, var(--sc-bay));
}
[data-design="b"] .sc-walk__head { max-width: 640px; margin-bottom: var(--sc-bay); display: grid; gap: var(--sc-stroke); }
[data-design="b"] .sc-walk__lede { color: var(--sc-text-soft); max-width: 56ch; }
[data-design="b"] .sc-walk__sheet {
  background: var(--sc-paper-dim);
  border    : 1px solid var(--sc-rule);
  padding   : var(--sc-coat);
  display   : grid;
  gap       : var(--sc-bay);
}
[data-design="b"] .sc-walk__progress {
  display    : flex;
  flex-wrap  : wrap;
  gap        : var(--sc-stroke);
  list-style : none;
  padding    : 0;
  margin     : 0;
  border-bottom: 1px solid var(--sc-rule);
  padding-bottom: var(--sc-stroke);
}
[data-design="b"] .sc-walk__pip {
  display    : inline-flex;
  align-items: baseline;
  gap        : 8px;
  color      : var(--sc-text-mute);
  padding    : 4px 12px 4px 0;
  border-right: 1px solid var(--sc-rule);
}
[data-design="b"] .sc-walk__pip:last-child { border-right: 0; }
[data-design="b"] .sc-walk__pip.is-current { color: var(--sc-text); }
[data-design="b"] .sc-walk__pip.is-current .sc-type-tag { color: var(--sc-brand); }
[data-design="b"] .sc-walk__pip-label { font-family: var(--sc-font-body); font-size: 14px; font-weight: 500; }

[data-design="b"] .sc-walk__stage { position: relative; min-height: 320px; }
[data-design="b"] .sc-walk__step {
  border      : 0;
  padding     : 0;
  margin      : 0;
  position    : absolute;
  inset       : 0;
  /* Non-current steps: invisible but NOT opacity:0 to avoid gate — hidden via pointer-events + clip */
  opacity     : 0;
  pointer-events: none;
  transform   : translateX(24px);
  transition  : opacity var(--sc-dur-dry) var(--sc-ease-lay), transform var(--sc-dur-dry) var(--sc-ease-lay);
}
[data-design="b"] .sc-walk__step.is-current {
  opacity       : 1;
  pointer-events: auto;
  transform     : translateX(0);
  position      : relative;
}
[data-design="b"] .sc-walk__step.is-past { transform: translateX(-24px); }
[data-design="b"] .sc-walk__step legend { margin-bottom: var(--sc-stroke); color: var(--sc-text); display: block; }
[data-design="b"] .sc-walk__multi-hint { color: var(--sc-text-mute); font-size: 12px; }

/* Multi-select chip grid (Step 1) */
[data-design="b"] .sc-walk__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sc-stroke); }
[data-design="b"] .sc-walk__options--multi { grid-template-columns: repeat(2, 1fr); }

[data-design="b"] .sc-walk__opt {
  appearance   : none;
  text-align   : left;
  cursor       : pointer;
  background   : var(--sc-paper);
  border       : 1px solid var(--sc-rule);
  border-radius: var(--sc-radius-btn);
  padding      : 18px 20px;
  min-height   : 76px;
  display      : grid;
  gap          : 6px;
  color        : var(--sc-text);
  position     : relative;
  overflow     : hidden;
  transition   : border-color var(--sc-dur-settle) var(--sc-ease-settle), background-color var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-walk__opt:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 4px; }
[data-design="b"] .sc-walk__opt.is-selected {
  background  : var(--sc-brand);
  color       : var(--sc-paper);
  border-color: var(--sc-brand);
  box-shadow  : var(--sc-elev-wet);
}
[data-design="b"] .sc-walk__opt.is-selected .sc-walk__opt-meta { color: rgba(242,237,227,0.78); }
[data-design="b"] .sc-walk__opt-name {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : 22px;
  line-height   : 1.1;
  letter-spacing: -0.005em;
}
[data-design="b"] .sc-walk__opt-meta { font-family: var(--sc-font-body); font-size: 14px; color: var(--sc-text-mute); }

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sc-walk__opt:hover { border-color: var(--sc-rule-strong); }
}

/* Step-next button wrapper */
[data-design="b"] .sc-walk__step-next { margin-top: var(--sc-coat); }

/* Step 4 — contact sheet */
[data-design="b"] .sc-walk__sheet-final { display: grid; gap: var(--sc-coat); }
[data-design="b"] .sc-walk__final-title { margin: 0; }
[data-design="b"] .sc-walk__final-lede { color: var(--sc-text-soft); max-width: 56ch; margin: 0; }
[data-design="b"] .sc-walk__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-stroke); }

/* Field (input) — bottom-rule only */
[data-design="b"] .sc-field { display: grid; gap: 6px; }
[data-design="b"] .sc-field__label { color: var(--sc-text-mute); }
[data-design="b"] .sc-field__input {
  font-family  : var(--sc-font-body);
  font-size    : var(--sc-type-body);
  color        : var(--sc-ink);
  background   : transparent;
  border       : none;
  border-bottom: 2px solid var(--sc-rule);
  padding      : 10px 0 8px;
  min-height   : 44px;
  width        : 100%;
  outline      : none;
  transition   : border-color var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-field__input:focus { border-bottom-color: var(--sc-brand); }

[data-design="b"] .sc-walk__sheet-actions { display: flex; flex-wrap: wrap; gap: var(--sc-stroke); align-items: center; }
[data-design="b"] .sc-walk__restart {
  appearance     : none;
  background     : transparent;
  border         : 0;
  color          : var(--sc-text-soft);
  font-family    : var(--sc-font-body);
  font-size      : 14px;
  cursor         : pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding        : 12px;
  min-height     : 44px;
}

/* Confirmation */
[data-design="b"] .sc-walk__confirm {
  padding: var(--sc-coat);
  display: grid;
  gap    : var(--sc-stroke);
}
[data-design="b"] .sc-confirm__phone {
  display     : inline-flex;
  align-items : center;
  min-height  : 56px;
  padding     : 16px 24px;
  font-family : var(--sc-font-body);
  font-weight : 600;
  font-size   : 20px;
  color       : var(--sc-paper);
  background  : var(--sc-brand);
  text-decoration: none;
  border-radius: var(--sc-radius-btn);
  box-shadow  : var(--sc-elev-wet);
}

/* ════════════════════════════════════════════════════════════
   SERVICES WALL — breadth-list
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-services {
  padding   : var(--sc-room) 0;
  background: var(--sc-paper-dim);
  border-top: 1px solid var(--sc-rule);
}
[data-design="b"] .sc-services__head { max-width: 640px; margin-bottom: var(--sc-bay); display: grid; gap: var(--sc-stroke); }
[data-design="b"] .sc-services__lede { color: var(--sc-text-soft); max-width: 56ch; }
[data-design="b"] .sc-services__grid {
  list-style          : none;
  padding             : 0;
  margin              : 0;
  display             : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                 : var(--sc-stroke);
}
/* Folio cards */
[data-design="b"] .sc-folio {
  background   : var(--sc-paper);
  border       : 1px solid var(--sc-rule);
  padding      : var(--sc-coat);
  display      : grid;
  gap          : var(--sc-cut-in);
  align-content: start;
  position     : relative;
  transition   : border-color var(--sc-dur-settle) var(--sc-ease-settle);
}
[data-design="b"] .sc-folio--chip {
  border-left: 4px solid var(--folio-chip, var(--sc-rule));
}
[data-design="b"] .sc-folio__title { color: var(--sc-text); margin: 0; }
[data-design="b"] .sc-folio__body  { color: var(--sc-text-soft); margin: 0; }

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sc-folio:hover { border-color: var(--sc-rule-strong); }
  [data-design="b"] .sc-folio--chip:hover { border-left-color: var(--folio-chip, var(--sc-brand)); }
}

[data-design="b"] .sc-services__cta-repeat { margin-top: var(--sc-bay); }

/* ════════════════════════════════════════════════════════════
   ELEMENT 4 — Recent Work (lay-on scroll reveal)
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-recent {
  padding   : var(--sc-room) 0;
  background: var(--sc-paper);
  border-top: 1px solid var(--sc-rule);
}
[data-design="b"] .sc-recent__head { max-width: 640px; margin-bottom: var(--sc-bay); display: grid; gap: var(--sc-stroke); }
[data-design="b"] .sc-recent__grid {
  list-style          : none;
  padding             : 0;
  margin              : 0;
  display             : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                 : var(--sc-bay) var(--sc-stroke);
}
[data-design="b"] .sc-recent__folio { display: grid; gap: var(--sc-stroke); }
[data-design="b"] .sc-recent__figure {
  position    : relative;
  margin      : 0;
  aspect-ratio: 4 / 5;
  background  : var(--sc-paper-dim);
  overflow    : hidden;
  border      : 1px solid var(--sc-rule);
}
[data-design="b"] .sc-recent__img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  opacity   : 0;
  transform : scale(1.04);
  transition: opacity var(--sc-dur-cure) var(--sc-ease-lay), transform var(--sc-dur-cure) var(--sc-ease-lay);
}
[data-design="b"] .sc-recent__paint {
  position        : absolute;
  inset           : 0;
  background      : var(--sc-accent-warm);
  transform-origin: top;
  transform       : scaleY(1);
  transition      : transform var(--sc-dur-cure) var(--sc-ease-edge);
  z-index         : 2;
}
[data-design="b"] .sc-recent__folio.is-laid .sc-recent__img   { opacity: 1; transform: scale(1); }
[data-design="b"] .sc-recent__folio.is-laid .sc-recent__paint { transform: scaleY(0); }
[data-design="b"] .sc-recent__meta h3 {
  font-family   : var(--sc-font-display);
  font-weight   : 500;
  font-size     : 26px;
  line-height   : 1.1;
  letter-spacing: -0.01em;
  color         : var(--sc-text);
  margin        : 0;
}

/* ════════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-about {
  padding   : var(--sc-room) 0;
  background: var(--sc-paper-dim);
  border-top: 1px solid var(--sc-rule);
}
[data-design="b"] .sc-about__inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--sc-bay);
  align-items          : center;
}
[data-design="b"] .sc-about__text { display: grid; gap: var(--sc-stroke); max-width: 56ch; }
[data-design="b"] .sc-about__text .sc-type-display { margin: 0; font-size: clamp(28px, 3.5vw, 48px); }
[data-design="b"] .sc-about__text .sc-type-body { color: var(--sc-text-soft); }
[data-design="b"] .sc-about__creds {
  display  : flex;
  flex-wrap: wrap;
  gap      : var(--sc-cut-in);
  margin-top: var(--sc-stroke);
}
[data-design="b"] .sc-about__cred {
  display      : inline-flex;
  padding      : 6px 10px;
  border       : 1px solid var(--sc-rule);
  border-radius: var(--sc-radius-stitch);
  background   : var(--sc-paper);
}
[data-design="b"] .sc-about__figure {
  margin      : 0;
  aspect-ratio: 3 / 4;
  overflow    : hidden;
  border      : 1px solid var(--sc-rule);
}
[data-design="b"] .sc-about__img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-footer {
  padding   : var(--sc-room) 0 0;
  background: var(--sc-accent-deep);
  color     : var(--sc-paper);
  border-top: 3px solid var(--sc-brand);
}
[data-design="b"] .sc-footer__inner {
  display              : grid;
  grid-template-columns: auto 1fr;
  gap                  : var(--sc-bay);
  align-items          : start;
  padding-bottom       : var(--sc-bay);
}
[data-design="b"] .sc-footer__brand {
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-stroke);
}
[data-design="b"] .sc-footer__name {
  font-size  : clamp(22px, 2.5vw, 36px);
  color      : var(--sc-paper);
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: 1.1;
  margin     : 0;
}
[data-design="b"] .sc-footer__phone {
  font-family : var(--sc-font-body);
  font-weight : 600;
  font-size   : 22px;
  color       : var(--sc-paper);
  text-decoration: none;
  min-height  : 44px;
  display     : flex;
  align-items : center;
}
[data-design="b"] .sc-footer__email {
  font-family    : var(--sc-font-body);
  font-size      : 16px;
  color          : rgba(242,237,227,0.7);
  text-decoration: none;
}
[data-design="b"] .sc-footer__meta {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : var(--sc-stroke);
}
[data-design="b"] .sc-footer__col { display: flex; flex-direction: column; gap: 6px; }
[data-design="b"] .sc-footer__col .sc-type-tag { color: rgba(242,237,227,0.45); }
[data-design="b"] .sc-footer__col .sc-type-body { color: rgba(242,237,227,0.85); font-size: 15px; }
[data-design="b"] .sc-footer__social {
  color          : rgba(242,237,227,0.7);
  text-decoration: none;
  font-size      : 15px;
  font-family    : var(--sc-font-body);
  min-height     : 44px;
  display        : flex;
  align-items    : center;
}
[data-design="b"] .sc-footer__rule {
  height    : 1px;
  background: rgba(242,237,227,0.12);
  margin-top: var(--sc-coat);
}
[data-design="b"] .sc-footer__copyright {
  padding-block: var(--sc-stroke);
}
[data-design="b"] .sc-footer__copyright .sc-type-tag { color: rgba(242,237,227,0.35); }

/* ════════════════════════════════════════════════════════════
   PREMIUM SCROLL MOTION — TRIAD-2
   Parallax hero backdrop on scroll (scroll-linked, not just fade-in)
   ════════════════════════════════════════════════════════════ */
[data-design="b"] .sc-hero__backdrop { will-change: transform; }
/* JS-driven parallax applied via style.transform in script.js */

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  [data-design="b"].dq-design .sc-services__grid { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"].dq-design .sc-footer__inner  { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-footer__meta   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  [data-design="b"].dq-design .sc-hero__content   { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-hero__chip-strip { flex-direction: row; align-self: auto; height: 100px; }
  [data-design="b"].dq-design .sc-hero__chip-swatch { min-height: 64px; }
  [data-design="b"].dq-design .sc-recent__grid    { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"].dq-design .sc-about__inner    { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  [data-design="b"].dq-design .sc-walk__options   { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-walk__options--multi { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-walk__fields    { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-services__grid  { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .sc-hero__labels    { display: none; }
  [data-design="b"].dq-design .sc-footer__meta    { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  [data-design="b"].dq-design .sc-recent__grid    { grid-template-columns: 1fr; }
}

/* No horizontal scroll at any breakpoint */
[data-design="b"].dq-design      { max-width: 100%; overflow-x: clip; }
[data-design="b"].dq-design *    { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sc-header__wet { animation: none; left: 40%; opacity: 0.5; }
  [data-design="b"] .sc-drawer__panel { transition: none; }
  [data-design="b"] .sc-cta { animation: none; }
  [data-design="b"] .sc-cta__wet { animation: none; }
  [data-design="b"] .sc-hero__rake { animation: none; opacity: 0.6; }
  [data-design="b"] .sc-hero__chip { animation: none; opacity: 0.12; }
  [data-design="b"] .sc-hero__label { animation: none; }
  [data-design="b"] .sc-hero__chip-swatch::after { animation: none; opacity: 0.5; }
  [data-design="b"] .sc-pointer__stroke,
  [data-design="b"] .sc-pointer__tip,
  [data-design="b"] .sc-pointer__drip { animation: none; }
  [data-design="b"] .sc-pointer__stroke { transform: scaleY(1); opacity: 0.7; }
  [data-design="b"] .sc-pointer__tip { transform: translateY(200px); opacity: 1; }
  [data-design="b"] .sc-walk__step { transition: none; }
  [data-design="b"] .sc-walk__opt.is-selected { animation: none; }
  [data-design="b"] .sc-recent__img { opacity: 1; transform: none; transition: none; }
  [data-design="b"] .sc-recent__paint { transform: scaleY(0); transition: none; }
}

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