/* ═══════════════════════════════════════════════════════════════════════
   Design B — Hikari × Burch & Sons Construction LLC (Sultan, WA)
   Tadao Ando board-formed concrete · Sugimoto greys · shokunin plasterwork.
   All selectors scoped under [data-design="b"]. All keyframes prefixed bk-.
   Tokens (12–16, trade-rooted) live on the [data-design="b"] block.
   ═══════════════════════════════════════════════════════════════════════ */

[data-design="b"] {
  /* ── Chassis: warm-paper gallery neutrals (Hikari "paper") ── */
  --bk-paper:      #F3EFE7;   /* page surface — lime-wash warm white, never #FFF */
  --bk-paper-sub:  #ECE6D9;   /* nested panels */
  --bk-ink:        #1A1815;   /* body, display, hairlines */
  --bk-ink-2:      #5A544A;   /* secondary text, captions */
  --bk-ink-3:      #8B8273;   /* tertiary — meta, dates */
  --bk-rule:       #D8D1BF;   /* hairlines, panel edges */
  --bk-shadow:     #C9C0AB;   /* the single permitted warm-grey shadow */

  /* ── Field atmospheres (section-scale only) ── */
  --bk-field-lime: #EAE3D2;   /* lime-wash, north morning — default field */
  --bk-field-ando: #9C988E;   /* board-formed concrete, overcast — Element 4 band */
  --bk-field-sumi: #272422;   /* sumi ink wash — footer; one per page */

  /* ── The single chromatic accent (Sugimoto blue) — twice per screen ── */
  --bk-accent:     #34536A;
  --bk-accent-ink: #22384B;   /* deepened for :active */
  --bk-critical:   #7A2A1B;   /* iron-oxide — invalid spec */

  /* ── Blueprint hero line work ── */
  --bk-bp-line:    #5A544A;
  --bk-bp-dim:     #8B8273;

  /* ── Forge-bar swatch contract: SITE B dot reads this ── */
  --design-b-primary: var(--bk-accent);

  /* ── Type ── */
  --bk-font-display: "Cormorant Garamond", "Tiempos Headline", "Iowan Old Style", Georgia, serif;
  --bk-font-body:    "Söhne", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --bk-font-meta:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ── Spacing (4px base, named for the trade) ── */
  --bk-hair: 1px; --bk-tape: 4px; --bk-batten: 8px; --bk-stretcher: 16px;
  --bk-span: 24px; --bk-bay: 40px; --bk-court: 64px; --bk-elevation: 96px;

  /* ── Motion: settle harder than it arrives ── */
  --bk-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bk-ease-light:  cubic-bezier(0.4, 0, 0.2, 1);
  --bk-tick: 120ms; --bk-stroke: 240ms; --bk-cure: 600ms;
  --bk-drift: 19000ms; --bk-light: 24000ms; --bk-cloud: 31000ms;

  /* ── Radius: walls have corners ── */
  --bk-r-edge: 0px; --bk-r-tape: 2px;
}

/* ── Base reset within the slice ── */
[data-design="b"].dq-design,
[data-design="b"] {
  background: var(--bk-paper);
  color: var(--bk-ink);
  font-family: var(--bk-font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[data-design="b"] *, [data-design="b"] *::before, [data-design="b"] *::after { box-sizing: border-box; }
[data-design="b"] h1, [data-design="b"] h2, [data-design="b"] h3,
[data-design="b"] p, [data-design="b"] ol, [data-design="b"] ul,
[data-design="b"] figure, [data-design="b"] blockquote { margin: 0; }
[data-design="b"] ol, [data-design="b"] ul { list-style: none; padding: 0; }
[data-design="b"] .bk-mono {
  font-family: var(--bk-font-meta); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
[data-design="b"] .bk-link { color: var(--bk-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
[data-design="b"] .bk-missing {
  font-family: var(--bk-font-meta); font-size: 0.85em;
  color: var(--bk-critical); background: color-mix(in oklab, var(--bk-critical), transparent 90%);
  padding: 1px 6px; border-radius: var(--bk-r-tape);
}

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 1 — Animated minimalist header + Liner drawer
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bk-paper);
  border-bottom: 1px solid var(--bk-rule);
  isolation: isolate; overflow: hidden;
}
[data-design="b"] .bk-header__light { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-design="b"] .bk-header__pool {
  position: absolute; top: -40%; width: 60vmax; height: 240%;
  border-radius: 50%; filter: blur(40px); opacity: 0.5; will-change: transform;
}
[data-design="b"] .bk-header__pool--a {
  left: -30vmax;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bk-field-ando), transparent 64%), transparent 70%);
  animation: bk-drift-a var(--bk-drift) var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-header__pool--b {
  right: -30vmax;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bk-accent), transparent 80%), transparent 70%);
  animation: bk-drift-b var(--bk-cloud) var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bk-stretcher);
  padding: var(--bk-batten) clamp(var(--bk-stretcher), 4vw, var(--bk-bay));
  min-height: 64px;
}
[data-design="b"] .bk-header__logo {
  display: flex; flex-direction: column; line-height: 1;
  color: var(--bk-ink); text-decoration: none;
}
[data-design="b"] .bk-header__mark {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em;
}
[data-design="b"] .bk-header__mark-sub {
  font-family: var(--bk-font-meta); font-size: 9px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--bk-ink-3);
  margin-top: 3px;
}
[data-design="b"] .bk-hamburger {
  appearance: none; background: transparent; border: 1px solid var(--bk-rule);
  border-radius: var(--bk-r-tape); width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer; color: var(--bk-ink);
  transition: border-color var(--bk-stroke) var(--bk-ease-settle);
}
[data-design="b"] .bk-hamburger:hover,
[data-design="b"] .bk-hamburger:focus-visible { border-color: var(--bk-ink); outline: none; }
[data-design="b"] .bk-hamburger__line {
  display: block; width: 18px; height: 1px; background: currentColor;
  transition: transform var(--bk-stroke) var(--bk-ease-settle);
}
[data-design="b"] .bk-hamburger[aria-expanded="true"] .bk-hamburger__line:nth-child(1) { transform: translateY(3px) rotate(45deg); }
[data-design="b"] .bk-hamburger[aria-expanded="true"] .bk-hamburger__line:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

[data-design="b"] .bk-liner {
  position: fixed; inset: 64px 0 0 0; z-index: 35;
  background: var(--bk-paper-sub);
  padding: var(--bk-bay) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation));
  display: flex; flex-direction: column; gap: var(--bk-span);
  transform: translateY(-8px); opacity: 0;
  transition: transform var(--bk-cure) var(--bk-ease-settle), opacity var(--bk-cure) var(--bk-ease-settle);
}
[data-design="b"] .bk-liner[data-open="true"] { transform: translateY(0); opacity: 1; }
[data-design="b"] .bk-liner__link {
  font-family: var(--bk-font-display); font-weight: 300;
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.015em;
  color: var(--bk-ink); text-decoration: none;
  padding-bottom: var(--bk-batten); border-bottom: 1px solid var(--bk-rule);
}
[data-design="b"] .bk-liner__link--cta { color: var(--bk-accent); }
[data-design="b"] .bk-liner__phone {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--bk-ink); margin-top: var(--bk-batten);
  min-height: 44px; justify-content: center;
}
[data-design="b"] .bk-liner__phone-meta {
  font-family: var(--bk-font-meta); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-ink-3);
}
[data-design="b"] .bk-liner__phone-num { font-family: var(--bk-font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 300; }

@keyframes bk-drift-a { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(20vmax,4%,0);} 100%{transform:translate3d(0,0,0);} }
@keyframes bk-drift-b { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(-22vmax,-3%,0);} 100%{transform:translate3d(0,0,0);} }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 2 — The Stroke (funnel-anchor CTA). Satin sheen sweep every 5s.
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-stroke {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--bk-stretcher);
  padding: 15px 24px; min-height: 44px; border-radius: var(--bk-r-tape);
  font-family: var(--bk-font-body); font-weight: 500; font-size: 15px;
  line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--bk-stroke) var(--bk-ease-settle),
              background-color var(--bk-stroke) var(--bk-ease-settle),
              box-shadow var(--bk-stroke) var(--bk-ease-settle);
}
[data-design="b"] .bk-stroke--field {
  background: var(--bk-accent); color: var(--bk-paper);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--bk-accent-ink), transparent 50%);
}
[data-design="b"] .bk-stroke--ghost { background: transparent; color: var(--bk-ink); border-color: var(--bk-rule); }
[data-design="b"] .bk-stroke--meta {
  background: transparent; color: var(--bk-ink); border-color: var(--bk-ink);
  font-family: var(--bk-font-meta); font-size: 12px; letter-spacing: 0.08em;
}
[data-design="b"] .bk-stroke__sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in oklab, var(--bk-paper), transparent 80%) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: bk-sheen 5000ms var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-stroke--ghost .bk-stroke__sheen,
[data-design="b"] .bk-stroke--meta .bk-stroke__sheen { display: none; }
[data-design="b"] .bk-stroke__label,
[data-design="b"] .bk-stroke__arrow { position: relative; z-index: 1; }
[data-design="b"] .bk-stroke__arrow { display: inline-flex; transition: transform var(--bk-stroke) var(--bk-ease-settle); }
[data-design="b"] .bk-stroke--field:hover,
[data-design="b"] .bk-stroke--field:focus-visible {
  outline: none; transform: translateY(-1px);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--bk-accent-ink), transparent 30%),
              0 0 0 2px color-mix(in oklab, var(--bk-accent), transparent 70%);
}
[data-design="b"] .bk-stroke--field:hover .bk-stroke__sheen { animation-duration: 1800ms; }
[data-design="b"] .bk-stroke--field:hover .bk-stroke__arrow { transform: translateX(3px); }
[data-design="b"] .bk-stroke--field:active {
  background: var(--bk-accent-ink); transform: translateY(0.5px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bk-ink), transparent 60%);
}
[data-design="b"] .bk-stroke--ghost:hover,
[data-design="b"] .bk-stroke--meta:hover,
[data-design="b"] .bk-stroke--ghost:focus-visible,
[data-design="b"] .bk-stroke--meta:focus-visible { outline: none; background: var(--bk-paper-sub); }
@keyframes bk-sheen { 0%{transform:translateX(-130%);} 60%{transform:translateX(130%);} 100%{transform:translateX(130%);} }

/* ═══════════════════════════════════════════════════════════════════════
   HERO — blueprint-reveal field (ELEMENT 3) + text at opacity:1
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(560px, 78vh, 820px);
  padding: clamp(var(--bk-bay), 9vw, 140px) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation));
  background: var(--bk-paper);
  border-bottom: 1px solid var(--bk-rule);
}
[data-design="b"] .bk-hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-design="b"] .bk-hero__wash {
  /* Static themed tint beneath the single animated layer (hero.md permits a static wash). */
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 72% 18%, color-mix(in oklab, var(--bk-field-lime), #fff 6%), transparent 62%),
    radial-gradient(90% 80% at 18% 92%, color-mix(in oklab, var(--bk-field-ando), transparent 55%), transparent 60%),
    var(--bk-field-lime);
}
[data-design="b"] .bk-hero__blueprint {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.5;
}
[data-design="b"] .bk-bp__l {
  stroke-dasharray: 1700; stroke-dashoffset: 1700;
  animation: bk-bp-draw 1700ms var(--bk-ease-settle) forwards;
}
[data-design="b"] .bk-bp__l:nth-child(2){animation-delay:160ms} [data-design="b"] .bk-bp__l:nth-child(3){animation-delay:320ms}
[data-design="b"] .bk-bp__l:nth-child(4){animation-delay:440ms} [data-design="b"] .bk-bp__l:nth-child(5){animation-delay:560ms}
[data-design="b"] .bk-bp__l:nth-child(6){animation-delay:680ms} [data-design="b"] .bk-bp__l:nth-child(7){animation-delay:760ms}
[data-design="b"] .bk-bp__d {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: bk-bp-draw 900ms var(--bk-ease-settle) 900ms forwards;
}
[data-design="b"] .bk-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, color-mix(in oklab, var(--bk-paper), transparent 8%) 0%, color-mix(in oklab, var(--bk-paper), transparent 42%) 52%, transparent 100%);
}
[data-design="b"] .bk-hero__content {
  position: relative; z-index: 1;
  max-width: 64ch; opacity: 1;   /* hero text never reveal-gated */
  display: flex; flex-direction: column; gap: var(--bk-span);
}
[data-design="b"] .bk-hero__chip {
  display: inline-flex; align-items: center; gap: var(--bk-batten);
  align-self: flex-start; color: var(--bk-ink-2);
  padding: 7px 12px; border: 1px solid var(--bk-rule); border-radius: var(--bk-r-tape);
  background: color-mix(in oklab, var(--bk-paper), transparent 20%);
}
[data-design="b"] .bk-hero__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bk-accent); }
[data-design="b"] .bk-hero__headline {
  font-family: var(--bk-font-display); font-weight: 300;
  font-size: clamp(44px, 7vw, 88px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--bk-ink); text-wrap: balance; max-width: 14ch;
}
[data-design="b"] .bk-hero__subtitle {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--bk-ink-2); max-width: 32ch;
}
[data-design="b"] .bk-hero__proof { color: var(--bk-ink-3); }
[data-design="b"] .bk-hero__cta { align-self: flex-start; }

@keyframes bk-bp-draw { to { stroke-dashoffset: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 6 — drafted pointer between hero and funnel (wayfinding, not a button)
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-pointer {
  display: flex; justify-content: center;
  padding: clamp(var(--bk-bay), 8vw, 80px) var(--bk-stretcher) clamp(var(--bk-court), 10vw, var(--bk-elevation));
  background: var(--bk-paper);
}
[data-design="b"] .bk-pointer__hit {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none; color: var(--bk-ink-2);
}
[data-design="b"] .bk-pointer__label { color: var(--bk-ink-3); }
[data-design="b"] .bk-pointer__rule {
  display: block; width: 1px; height: 56px; background: currentColor; opacity: 0.5;
  transform-origin: top; animation: bk-pointer-rule 6s var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-pointer__tick { display: block; width: 14px; height: 1px; background: var(--bk-accent); }
@keyframes bk-pointer-rule { 0%,100%{opacity:0.3;transform:scaleY(0.86);} 50%{opacity:0.7;transform:scaleY(1);} }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 5 — The funnel (Spec/Stamp components)
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-funnel {
  padding: var(--bk-elevation) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation));
  background: var(--bk-paper-sub); border-block: 1px solid var(--bk-rule);
}
[data-design="b"] .bk-funnel__shell { max-width: 760px; margin: 0 auto; }
[data-design="b"] .bk-funnel__head { display: flex; flex-direction: column; gap: var(--bk-batten); max-width: 56ch; margin-bottom: var(--bk-bay); }
[data-design="b"] .bk-funnel__eyebrow { color: var(--bk-ink-2); }
[data-design="b"] .bk-funnel__title { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
[data-design="b"] .bk-funnel__lede { color: var(--bk-ink-2); max-width: 52ch; }
[data-design="b"] .bk-funnel__progress { display: flex; gap: var(--bk-batten); margin-bottom: var(--bk-bay); }
[data-design="b"] .bk-funnel__tick {
  flex: 1; height: 2px; background: var(--bk-rule);
  transition: background-color var(--bk-stroke) var(--bk-ease-settle);
}
[data-design="b"] .bk-funnel__tick.is-on { background: var(--bk-accent); }
[data-design="b"] .bk-funnel__tick.is-active { background: color-mix(in oklab, var(--bk-accent), var(--bk-paper) 45%); }

[data-design="b"] .bk-form__step { border: 0; padding: 0; margin: 0; }
[data-design="b"] .bk-form__legend {
  font-family: var(--bk-font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.01em; color: var(--bk-ink);
  margin-bottom: var(--bk-span);
}
[data-design="b"] .bk-form__note { color: var(--bk-ink-3); margin: calc(-1 * var(--bk-batten)) 0 var(--bk-span); }
[data-design="b"] .bk-chips { display: flex; flex-wrap: wrap; gap: var(--bk-batten); }
[data-design="b"] .bk-chip { position: relative; cursor: pointer; font-size: 14px; color: var(--bk-ink); }
[data-design="b"] .bk-chip input { position: absolute; opacity: 0; pointer-events: none; }
[data-design="b"] .bk-chip span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--bk-rule); border-radius: var(--bk-r-tape);
  background: var(--bk-paper);
  transition: border-color var(--bk-tick) var(--bk-ease-settle),
              background-color var(--bk-tick) var(--bk-ease-settle),
              color var(--bk-tick) var(--bk-ease-settle);
}
[data-design="b"] .bk-chip:hover span,
[data-design="b"] .bk-chip input:focus-visible + span { border-color: var(--bk-ink); }
[data-design="b"] .bk-chip input:checked + span { background: var(--bk-accent); color: var(--bk-paper); border-color: var(--bk-accent); }

[data-design="b"] .bk-spec { display: flex; flex-direction: column; gap: var(--bk-batten); margin-bottom: var(--bk-span); }
[data-design="b"] .bk-spec__label { font-family: var(--bk-font-meta); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-ink-2); }
[data-design="b"] .bk-spec__req { color: var(--bk-accent); }
[data-design="b"] .bk-spec__hint { text-transform: none; letter-spacing: 0; color: var(--bk-ink-3); }
[data-design="b"] .bk-spec__input {
  font-family: var(--bk-font-body); font-size: 16px; color: var(--bk-ink);
  background: var(--bk-paper); border: 1px solid var(--bk-rule); border-radius: var(--bk-r-tape);
  padding: 12px 14px; width: 100%; min-height: 44px;
  transition: border-color var(--bk-tick) var(--bk-ease-settle), box-shadow var(--bk-tick) var(--bk-ease-settle);
}
[data-design="b"] .bk-spec__input:focus-visible { outline: none; border-color: var(--bk-accent); box-shadow: inset 0 -2px 0 var(--bk-accent); }
[data-design="b"] textarea.bk-spec__input { resize: vertical; min-height: 88px; }
[data-design="b"] .bk-form__submit { margin-top: var(--bk-batten); }

[data-design="b"] .bk-form__nav { display: flex; flex-wrap: wrap; gap: var(--bk-stretcher); margin-top: var(--bk-bay); }
[data-design="b"] .bk-form__done { text-align: left; padding-top: var(--bk-batten); }
[data-design="b"] .bk-form__done .bk-stamp { color: var(--bk-accent); margin-bottom: var(--bk-batten); }
[data-design="b"] .bk-form__done-title { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.015em; margin-bottom: var(--bk-stretcher); }
[data-design="b"] .bk-form__done-body { color: var(--bk-ink-2); max-width: 48ch; }

[data-design="b"] .bk-funnel__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-batten);
  margin-top: var(--bk-bay); padding-top: var(--bk-span);
  border-top: 1px solid var(--bk-rule); color: var(--bk-ink-2);
}
[data-design="b"] .bk-funnel__trust-sep { color: var(--bk-ink-3); }

/* ═══════════════════════════════════════════════════════════════════════
   SERVICES — numbered index, hairline rules, no card grid
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-services { padding: var(--bk-elevation) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation)); }
[data-design="b"] .bk-services__head { max-width: 56ch; margin-bottom: var(--bk-bay); display: flex; flex-direction: column; gap: var(--bk-batten); }
[data-design="b"] .bk-services__eyebrow { color: var(--bk-ink-2); }
[data-design="b"] .bk-services__title { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
[data-design="b"] .bk-services__lede { color: var(--bk-ink-2); max-width: 60ch; }
[data-design="b"] .bk-index__row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--bk-span);
  align-items: baseline; padding: var(--bk-span) 0; border-top: 1px solid var(--bk-rule);
}
[data-design="b"] .bk-index__row:last-child { border-bottom: 1px solid var(--bk-rule); }
[data-design="b"] .bk-index__num { color: var(--bk-ink-3); }
[data-design="b"] .bk-index__name { font-family: var(--bk-font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.01em; margin-bottom: var(--bk-tape); }
[data-design="b"] .bk-index__desc { color: var(--bk-ink-2); max-width: 64ch; }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 4 — Ando concrete band with cloud drift (process + craft quote)
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-ambient-b {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(80px, 16vw, 200px) clamp(var(--bk-stretcher), 8vw, var(--bk-elevation));
  background: var(--bk-field-ando); color: var(--bk-paper);
  border-block: 1px solid color-mix(in oklab, var(--bk-field-ando), var(--bk-ink) 25%);
}
[data-design="b"] .bk-ambient-b__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-design="b"] .bk-ambient-b__board {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 122px,
      color-mix(in oklab, var(--bk-ink), transparent 88%) 122px,
      color-mix(in oklab, var(--bk-ink), transparent 88%) 124px),
    radial-gradient(120% 80% at 30% 20%, color-mix(in oklab, var(--bk-paper), transparent 78%), transparent 70%);
}
[data-design="b"] .bk-ambient-b__cloud {
  position: absolute; width: 140%; height: 200%; top: -50%;
  border-radius: 50%; filter: blur(60px); will-change: transform, opacity;
}
[data-design="b"] .bk-ambient-b__cloud--1 {
  left: -50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bk-paper), transparent 70%), transparent 65%);
  animation: bk-cloud-drift var(--bk-cloud) var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-ambient-b__cloud--2 {
  right: -55%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bk-ink), transparent 82%), transparent 65%);
  animation: bk-cloud-drift-rev calc(var(--bk-cloud) * 1.4) var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-ambient-b.is-paused .bk-ambient-b__cloud { animation-play-state: paused; }
[data-design="b"] .bk-ambient-b__inner { position: relative; z-index: 1; display: grid; gap: var(--bk-bay); }
[data-design="b"] .bk-ambient-b__quote { max-width: 36ch; }
[data-design="b"] .bk-ambient-b__quote p {
  font-family: var(--bk-font-display); font-weight: 300;
  font-size: clamp(26px, 3.6vw, 48px); line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance; margin-bottom: var(--bk-span);
}
[data-design="b"] .bk-ambient-b__attr { display: flex; flex-direction: column; gap: 4px; color: color-mix(in oklab, var(--bk-paper), transparent 35%); }
[data-design="b"] .bk-ambient-b__attr-name { color: var(--bk-paper); }
[data-design="b"] .bk-process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bk-stretcher) var(--bk-bay); max-width: 640px; }
[data-design="b"] .bk-process__step { display: flex; align-items: baseline; gap: var(--bk-stretcher); padding-bottom: var(--bk-batten); border-bottom: 1px solid color-mix(in oklab, var(--bk-paper), transparent 78%); }
[data-design="b"] .bk-process__num { color: color-mix(in oklab, var(--bk-paper), transparent 45%); }
[data-design="b"] .bk-process__label { font-size: 15px; }

@keyframes bk-cloud-drift { 0%{transform:translate3d(0,0,0);opacity:.7;} 50%{transform:translate3d(28%,-8%,0);opacity:1;} 100%{transform:translate3d(0,0,0);opacity:.7;} }
@keyframes bk-cloud-drift-rev { 0%{transform:translate3d(0,0,0);opacity:.55;} 50%{transform:translate3d(-22%,6%,0);opacity:.85;} 100%{transform:translate3d(0,0,0);opacity:.55;} }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT 3 (mid-page) — materials sample board with single light sweep
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-ambient-a {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--bk-court) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation));
  background: var(--bk-paper); border-block: 1px solid var(--bk-rule);
}
[data-design="b"] .bk-ambient-a__head { display: flex; flex-direction: column; gap: var(--bk-batten); max-width: 56ch; margin-bottom: var(--bk-bay); }
[data-design="b"] .bk-ambient-a__eyebrow { color: var(--bk-ink-2); }
[data-design="b"] .bk-ambient-a__title { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
[data-design="b"] .bk-ambient-a__board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bk-stretcher); }
[data-design="b"] .bk-sample { display: flex; flex-direction: column; background: var(--bk-paper-sub); border: 1px solid var(--bk-rule); overflow: hidden; }
[data-design="b"] .bk-sample__field { aspect-ratio: 3 / 4; width: 100%; position: relative; }
[data-design="b"] .bk-sample:nth-child(1) .bk-sample__field { background: var(--bk-field-lime); --bk-sheen: 0.04; }
[data-design="b"] .bk-sample:nth-child(2) .bk-sample__field { background: color-mix(in oklab, var(--bk-field-lime), var(--bk-ink) 5%); --bk-sheen: 0.10; }
[data-design="b"] .bk-sample:nth-child(3) .bk-sample__field { background: color-mix(in oklab, var(--bk-field-lime), var(--bk-ink) 9%); --bk-sheen: 0.20; }
[data-design="b"] .bk-sample:nth-child(4) .bk-sample__field { background: color-mix(in oklab, var(--bk-field-lime), var(--bk-ink) 13%); --bk-sheen: 0.30; }
[data-design="b"] .bk-sample:nth-child(5) .bk-sample__field { background: color-mix(in oklab, var(--bk-field-ando), var(--bk-paper) 30%); --bk-sheen: 0.08; }
[data-design="b"] .bk-sample__field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,250,240,var(--bk-sheen,0.12)) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: bk-board-sweep var(--bk-light) var(--bk-ease-light) infinite;
}
[data-design="b"] .bk-sample:nth-child(2) .bk-sample__field::after { animation-delay: -2400ms; }
[data-design="b"] .bk-sample:nth-child(3) .bk-sample__field::after { animation-delay: -4800ms; }
[data-design="b"] .bk-sample:nth-child(4) .bk-sample__field::after { animation-delay: -7200ms; }
[data-design="b"] .bk-sample:nth-child(5) .bk-sample__field::after { animation-delay: -9600ms; }
[data-design="b"] .bk-ambient-a.is-paused .bk-sample__field::after { animation-play-state: paused; }
[data-design="b"] .bk-sample__label { font-family: var(--bk-font-display); font-weight: 400; font-size: clamp(15px, 1.6vw, 18px); color: var(--bk-ink); padding: var(--bk-stretcher) var(--bk-stretcher) var(--bk-tape); }
[data-design="b"] .bk-sample__meta { color: var(--bk-ink-3); padding: 0 var(--bk-stretcher) var(--bk-stretcher); }
[data-design="b"] .bk-ambient-a__repeat { display: flex; justify-content: center; margin-top: var(--bk-bay); }
@keyframes bk-board-sweep { 0%{transform:translateX(-120%);} 55%{transform:translateX(120%);} 100%{transform:translateX(120%);} }

/* ═══════════════════════════════════════════════════════════════════════
   SERVICE AREA
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-area { padding: var(--bk-elevation) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation)); }
[data-design="b"] .bk-area__inner { max-width: 56ch; display: flex; flex-direction: column; gap: var(--bk-stretcher); }
[data-design="b"] .bk-area__eyebrow { color: var(--bk-ink-2); }
[data-design="b"] .bk-area__title { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
[data-design="b"] .bk-area__body { color: var(--bk-ink-2); max-width: 56ch; }
[data-design="b"] .bk-area__note { color: var(--bk-ink-3); }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — sumi band
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .bk-footer { background: var(--bk-field-sumi); color: var(--bk-paper); padding: var(--bk-elevation) clamp(var(--bk-stretcher), 6vw, var(--bk-elevation)) var(--bk-bay); }
[data-design="b"] .bk-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: var(--bk-bay); align-items: start; }
[data-design="b"] .bk-footer__logo { text-decoration: none; color: var(--bk-paper); }
[data-design="b"] .bk-footer__mark { font-family: var(--bk-font-display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.015em; }
[data-design="b"] .bk-footer__line { color: color-mix(in oklab, var(--bk-paper), transparent 40%); margin-top: var(--bk-batten); font-size: 15px; }
[data-design="b"] .bk-footer__meta { display: grid; gap: var(--bk-batten); }
[data-design="b"] .bk-footer__row { display: flex; gap: var(--bk-stretcher); justify-content: space-between; padding-bottom: var(--bk-batten); border-bottom: 1px solid color-mix(in oklab, var(--bk-paper), transparent 82%); }
[data-design="b"] .bk-footer__row dt { color: color-mix(in oklab, var(--bk-paper), transparent 45%); }
[data-design="b"] .bk-footer__row dd { text-align: right; }
[data-design="b"] .bk-footer__link { color: var(--bk-paper); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--bk-paper), transparent 50%); }
[data-design="b"] .bk-footer__cta-col { display: flex; justify-content: flex-end; }
[data-design="b"] .bk-footer__legal { color: color-mix(in oklab, var(--bk-paper), transparent 55%); margin-top: var(--bk-bay); padding-top: var(--bk-span); border-top: 1px solid color-mix(in oklab, var(--bk-paper), transparent 82%); }
[data-design="b"] .bk-footer .bk-missing { color: #E0907F; background: color-mix(in oklab, #E0907F, transparent 86%); }

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — pause/hold mid-frame, never strip the layer
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .bk-header__pool { animation: none; opacity: 0.3; transform: translate3d(12vmax, 0, 0); }
  [data-design="b"] .bk-header__pool--b { transform: translate3d(-12vmax, 0, 0); }
  [data-design="b"] .bk-liner { transition: none; }
  [data-design="b"] .bk-stroke, [data-design="b"] .bk-stroke__arrow { transition: none; }
  [data-design="b"] .bk-stroke__sheen { animation: none; opacity: 0.16; transform: translateX(0); }
  [data-design="b"] .bk-bp__l, [data-design="b"] .bk-bp__d { animation: none; stroke-dashoffset: 0; }
  [data-design="b"] .bk-pointer__rule { animation: none; opacity: 0.5; transform: scaleY(1); }
  [data-design="b"] .bk-ambient-b__cloud { animation: none; transform: translate3d(15%, -4%, 0); opacity: 0.7; }
  [data-design="b"] .bk-ambient-b__cloud--2 { transform: translate3d(-12%, 3%, 0); opacity: 0.65; }
  [data-design="b"] .bk-sample__field::after { animation: none; transform: translateX(20%); opacity: 0.7; }
  [data-design="b"] .bk-funnel__tick, [data-design="b"] .bk-spec__input, [data-design="b"] .bk-chip span { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — clamp() carries most; these handle layout collapse
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  [data-design="b"] .bk-ambient-a__board {
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    overflow-x: auto; padding-bottom: var(--bk-stretcher);
    scroll-snap-type: x mandatory;
  }
  [data-design="b"] .bk-sample { scroll-snap-align: start; }
  [data-design="b"] .bk-process { grid-template-columns: 1fr; }
  [data-design="b"] .bk-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"] .bk-footer__cta-col { justify-content: flex-start; }
  [data-design="b"] .bk-footer__row dd { text-align: left; }
}
@media (max-width: 560px) {
  [data-design="b"] .bk-header__bar { min-height: 56px; padding: var(--bk-batten) var(--bk-stretcher); }
  [data-design="b"] .bk-liner { inset: 56px 0 0 0; }
  [data-design="b"] .bk-hero { min-height: clamp(480px, 86vh, 700px); }
  [data-design="b"] .bk-funnel, [data-design="b"] .bk-services, [data-design="b"] .bk-area { padding: var(--bk-court) var(--bk-stretcher); }
  [data-design="b"] .bk-ambient-a { padding: var(--bk-bay) var(--bk-stretcher); }
  [data-design="b"] .bk-ambient-b { padding: var(--bk-court) var(--bk-stretcher); }
  [data-design="b"] .bk-ambient-a__board { grid-template-columns: repeat(5, minmax(72vw, 1fr)); }
  [data-design="b"] .bk-footer { padding: var(--bk-court) var(--bk-stretcher) var(--bk-bay); }
}
@media (max-width: 380px) {
  [data-design="b"] .bk-header__mark { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW GUARD — mandatory tail block (appended last)
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="b"] * { min-width: 0; }
[data-design="b"] img,
[data-design="b"] svg:not([data-keep-size]) { max-width: 100%; height: auto; }

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