/* ════════════════════════════════════════════════════════════════════
   DESIGN B — "Hairline & Counsel" → Hoskins Construction, LLC
   Source design: the "Hairline & Counsel" library design (WORKING CODE),
   remapped fully to the [data-design="b"] slot scope.
   European-modernist drafting-room register. Cool ivory paper, ink
   hairlines, ONE signal (drafting blueprint blue) per screen, mono
   ALLCAPS metadata, registration crosshairs, zero radius, no shadows.
   Construction override: signal red → drafting blueprint blue.
   ════════════════════════════════════════════════════════════════════ */

/* ── Token system (scoped to the design-b slice) ─────────────────────── */
[data-design="b"] {
  /* Color — cool ivory / ink, one signal */
  --hc-paper:       #FAFAF7;
  --hc-ink:         #14161A;
  --hc-ink-2:       #3A3D44;
  --hc-mute:        #6E6B65;
  --hc-rule:        #1A1C20;
  --hc-rule-soft:   #D6D4CB;
  --hc-surface:     #FFFFFF;
  /* The ONE signal — drafting blueprint blue (construction override of HC red) */
  --hc-signal:      #1B4D8F;
  --hc-signal-ink:  #FFFFFF;
  --hc-critical:    #8B0F18;
  --hc-success:     #0F5B3A;

  /* Required exposed primary token */
  --design-b-primary: #1B4D8F;

  /* Typography — single modernist family, weights do the work */
  --hc-display: "Söhne", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hc-body:    "Söhne", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hc-mono:    "Söhne Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hc-serif:   "Tiempos Text", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Spacing — named primitives encode intent */
  --hc-step-rule: 1px;
  --hc-step-tick: 4px;
  --hc-step-margin: 8px;
  --hc-step-set: 12px;
  --hc-step-column: 16px;
  --hc-step-folio: 24px;
  --hc-step-bind: 32px;
  --hc-step-leaf: 48px;
  --hc-step-quire: 72px;
  --hc-step-volume: 120px;

  /* Motion — two duration buckets, flat curves */
  --hc-dur-register: 320ms;
  --hc-dur-set: 540ms;
  --hc-dur-breath: 24s;
  --hc-ease-snap:   cubic-bezier(0.16, 0.84, 0.30, 1);
  --hc-ease-set:    cubic-bezier(0.4, 0, 0.2, 1);
  --hc-ease-breath: linear;

  --hc-radius: 0px;
}

/* ── Base / reset for the slice ──────────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { display:block; }
[data-design="b"] *,
[data-design="b"] *::before,
[data-design="b"] *::after { box-sizing: border-box; }

[data-design="b"] {
  background: var(--hc-paper);
  color: var(--hc-ink);
  font-family: var(--hc-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[data-design="b"] h1,
[data-design="b"] h2,
[data-design="b"] h3 { margin: 0; font-weight: 500; }
[data-design="b"] p { margin: 0; }
[data-design="b"] a { color: inherit; }

/* Shared typographic primitives */
[data-design="b"] .hc-eyebrow { font-family:var(--hc-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--hc-mute); }
[data-design="b"] .hc-h1 { font-family:var(--hc-display); font-weight:500; font-size:clamp(34px, 6.2vw, 64px); line-height:1.04; letter-spacing:-0.018em; color:var(--hc-ink); }
[data-design="b"] .hc-h2 { font-family:var(--hc-display); font-weight:500; font-size:clamp(28px, 4vw, 44px); letter-spacing:-0.01em; color:var(--hc-ink); }

/* Badge — ALLCAPS mono, ruled, never filled */
[data-design="b"] .hc-badge { display:inline-block; font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; padding:4px 8px; border:1px solid var(--hc-rule); color:var(--hc-mute); border-radius:0; }
[data-design="b"] .hc-badge--marquee { border-color:var(--hc-signal); color:var(--hc-signal); }

/* ════════════════════════════════════════════════════════════════════
   ELEMENT 1 — Animated minimalist header  (HC working CSS, remapped)
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-header { position:relative; background:var(--hc-paper); color:var(--hc-ink); border-bottom:1px solid var(--hc-rule); }
[data-design="b"] .hc-header__bar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1320px; margin:0 auto; padding:20px clamp(16px, 4vw, 40px); }
[data-design="b"] .hc-header__atmos { position:absolute; left:0; right:0; bottom:0; height:24px; overflow:hidden; pointer-events:none; }
[data-design="b"] .hc-header__rule { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hc-rule); }
[data-design="b"] .hc-header__tick { position:absolute; top:50%; width:8px; height:8px; transform:translate(-50%,-50%); }
[data-design="b"] .hc-header__tick::before,
[data-design="b"] .hc-header__tick::after { content:""; position:absolute; background:var(--hc-rule); }
[data-design="b"] .hc-header__tick::before { left:0; right:0; top:50%; height:1px; transform:translateY(-50%); }
[data-design="b"] .hc-header__tick::after  { top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); }
[data-design="b"] .hc-header__tick--a { left:0%; animation: b-header-sweep 24s linear infinite; }
[data-design="b"] .hc-header__tick--b { left:0%; opacity:.45; animation: b-header-sweep 31s linear infinite reverse; }
@keyframes b-header-sweep { 0% { left:-2%; } 50% { left:50%; } 100% { left:102%; } }

[data-design="b"] .hc-logo { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--hc-ink); }
[data-design="b"] .hc-logo__cross { display:inline-flex; color:var(--hc-ink); }
[data-design="b"] .hc-logo__mark { font-family:var(--hc-display); font-weight:500; font-size:clamp(16px, 2.1vw, 22px); letter-spacing:-0.01em; }

[data-design="b"] .hc-burger { display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; padding:14px 9px; background:transparent; border:1px solid var(--hc-rule); border-radius:0; cursor:pointer; flex:0 0 auto; }
[data-design="b"] .hc-burger span { display:block; width:100%; height:1px; background:var(--hc-ink); transition: transform .32s var(--hc-ease-snap), opacity .32s var(--hc-ease-snap); }
[data-design="b"] .hc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-design="b"] .hc-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
[data-design="b"] .hc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer — focus-trapped sheet, collapses to display:none when closed */
[data-design="b"] .hc-drawer { position:fixed; inset:0; z-index:60; background:rgba(20,22,26,.32); }
[data-design="b"] .hc-drawer[hidden] { display:none; }
[data-design="b"] .hc-drawer__inner { position:absolute; top:0; right:0; height:100%; width:min(92vw, 420px); background:var(--hc-paper); border-left:1px solid var(--hc-rule); padding:28px clamp(20px, 5vw, 40px) 40px; display:flex; flex-direction:column; gap:24px; overflow-y:auto; }
[data-design="b"] .hc-drawer__close { align-self:flex-end; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid var(--hc-rule); border-radius:0; color:var(--hc-ink); cursor:pointer; }
[data-design="b"] .hc-drawer__nav { display:flex; flex-direction:column; }
[data-design="b"] .hc-nav-a { display:block; font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-ink); text-decoration:none; padding:14px 0; border-top:1px solid var(--hc-rule-soft); position:relative; }
[data-design="b"] .hc-nav-a:last-child { border-bottom:1px solid var(--hc-rule-soft); }
[data-design="b"] .hc-nav-a::after { content:""; position:absolute; left:0; bottom:8px; height:1px; width:0; background:var(--hc-ink); transition: width .32s var(--hc-ease-snap); }
[data-design="b"] .hc-nav-a:hover::after,
[data-design="b"] .hc-nav-a:focus-visible::after { width:100%; }
[data-design="b"] .hc-drawer__ctas { display:flex; flex-direction:column; gap:12px; }
[data-design="b"] .hc-drawer__cta-funnel { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:14px 18px; font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-signal-ink); background:var(--hc-ink); border:1px solid var(--hc-ink); border-radius:0; text-decoration:none; }
[data-design="b"] .hc-drawer__cta-phone { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:12px 18px; font-family:var(--hc-mono); font-size:14px; letter-spacing:0.06em; color:var(--hc-ink); background:transparent; border:1px solid var(--hc-rule); border-radius:0; text-decoration:none; }
[data-design="b"] .hc-drawer__cta-k { font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--hc-mute); }
[data-design="b"] .hc-drawer__meta { margin-top:auto; font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--hc-mute); line-height:1.7; }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-header__tick--a,
  [data-design="b"] .hc-header__tick--b { animation: none; left:50%; }
  [data-design="b"] .hc-burger span,
  [data-design="b"] .hc-nav-a::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO — 3 text + Element 3 backdrop (themed-movement) + Element 2 CTA
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-hero { position:relative; overflow:hidden; background:var(--hc-paper); border-bottom:1px solid var(--hc-rule); padding: clamp(56px, 11vw, 132px) clamp(16px, 4vw, 40px) clamp(48px, 9vw, 104px); }
[data-design="b"] .hc-hero__inner { position:relative; z-index:2; max-width:1100px; margin:0 auto; }
[data-design="b"] .hc-hero__meta { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:baseline; padding-bottom:20px; margin-bottom:clamp(20px,3vw,32px); border-bottom:1px solid var(--hc-rule-soft); }
[data-design="b"] .hc-hero__stamp { font-family:var(--hc-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-mute); }
[data-design="b"] .hc-h1 { max-width:18ch; }
[data-design="b"] .hc-hero__sub { font-family:var(--hc-serif); font-size:clamp(17px, 2.1vw, 21px); line-height:1.5; color:var(--hc-ink-2); margin-top:clamp(20px,3vw,28px); max-width:60ch; }
[data-design="b"] .hc-proof { font-family:var(--hc-mono); font-size:clamp(12px,1.4vw,13px); letter-spacing:0.06em; color:var(--hc-mute); margin-top:20px; text-transform:uppercase; }
[data-design="b"] .hc-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:clamp(28px,4vw,40px); }

/* Element 3 — the ONE animated substrate layer (blueprint register / dimension draw-in) */
[data-design="b"] .hc-hero__substrate { position:absolute; inset:0; z-index:1; pointer-events:none; color:var(--hc-rule-soft); overflow:hidden; }
[data-design="b"] .hc-hero__grid { position:absolute; inset:-2px; opacity:.5;
  background-image:
    linear-gradient(to right, var(--hc-rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hc-rule-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 78% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
  animation: b-hero-grid 26s var(--hc-ease-breath) infinite;
}
[data-design="b"] .hc-hero__draft { position:absolute; right:clamp(-40px,2vw,40px); top:50%; transform:translateY(-50%); width:min(58vw, 620px); height:auto; color:var(--hc-rule); opacity:.34; }
/* arrival: stroke draws in within ~2s, then holds */
[data-design="b"] .hc-draft-roof { stroke-dasharray: 520; stroke-dashoffset: 520; animation: b-draft-draw 1.5s var(--hc-ease-set) .15s forwards; }
[data-design="b"] .hc-draft-wall { stroke-dasharray: 960; stroke-dashoffset: 960; animation: b-draft-draw 1.7s var(--hc-ease-set) .35s forwards; }
[data-design="b"] .hc-draft-dim  { stroke-dasharray: 360; stroke-dashoffset: 360; animation: b-draft-draw 1.2s var(--hc-ease-set) .9s forwards; }
[data-design="b"] .hc-draft-tick { opacity:0; animation: b-draft-tick .4s var(--hc-ease-snap) 1.7s forwards; }
[data-design="b"] .hc-draft-dim,
[data-design="b"] .hc-draft-tick--l,
[data-design="b"] .hc-draft-tick--r { color:var(--hc-signal); }
/* at-rest breath after arrival */
[data-design="b"] .hc-hero__draft { animation: b-hero-breath 9s var(--hc-ease-breath) 2.2s infinite; }
@keyframes b-draft-draw { to { stroke-dashoffset:0; } }
@keyframes b-draft-tick { to { opacity:.9; } }
@keyframes b-hero-breath { 0%,100% { opacity:.30; } 50% { opacity:.40; } }
@keyframes b-hero-grid { 0%,100% { opacity:.42; } 50% { opacity:.58; } }

/* ════════════════════════════════════════════════════════════════════
   ELEMENT 2 — CTA mark (ink-stamp w/ registration approach), remapped
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-mark--signal { position:relative; display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:16px 28px; font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color:var(--hc-ink); background:var(--hc-paper); border:1px solid var(--hc-ink); border-radius:0; text-decoration:none; cursor:pointer; transition: transform .18s var(--hc-ease-snap), background .32s var(--hc-ease-set); animation: b-cta-breath 5.4s var(--hc-ease-set) infinite; }
[data-design="b"] .hc-mark--signal:hover,
[data-design="b"] .hc-mark--signal:focus-visible { outline:none; background:var(--hc-paper); }
[data-design="b"] .hc-mark--signal:hover .hc-mark__tick,
[data-design="b"] .hc-mark--signal:focus-visible .hc-mark__tick { transform: scale(1); opacity:1; }
[data-design="b"] .hc-mark--signal:active { transform: translateY(1px); }
[data-design="b"] .hc-mark--signal[data-stamped="1"] .hc-mark__seal { animation: b-cta-stamp .52s var(--hc-ease-snap) 1; }
[data-design="b"] .hc-mark__seal { position:absolute; left:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--hc-signal); opacity:0; }
[data-design="b"] .hc-mark__label { white-space:nowrap; }
[data-design="b"] .hc-mark__arrow { display:inline-flex; color:var(--hc-ink); }
[data-design="b"] .hc-mark__tick { position:absolute; width:8px; height:8px; opacity:0; transform: scale(.4); transition: transform .32s var(--hc-ease-snap), opacity .32s var(--hc-ease-snap); }
[data-design="b"] .hc-mark__tick::before,
[data-design="b"] .hc-mark__tick::after { content:""; position:absolute; background:var(--hc-ink); }
[data-design="b"] .hc-mark__tick::before { left:0; right:0; top:50%; height:1px; transform: translateY(-50%); }
[data-design="b"] .hc-mark__tick::after  { top:0; bottom:0; left:50%; width:1px; transform: translateX(-50%); }
[data-design="b"] .hc-mark__tick--tl { left:-5px; top:-5px; }
[data-design="b"] .hc-mark__tick--tr { right:-5px; top:-5px; }
[data-design="b"] .hc-mark__tick--bl { left:-5px; bottom:-5px; }
[data-design="b"] .hc-mark__tick--br { right:-5px; bottom:-5px; }
@keyframes b-cta-breath { 0%,100% { box-shadow: inset 0 0 0 1px var(--hc-ink); } 50% { box-shadow: inset 0 0 0 1px var(--hc-signal); } }
@keyframes b-cta-stamp  { 0% { opacity:0; transform:scale(.4); } 30% { opacity:1; transform:scale(1.2); } 100% { opacity:0; transform:scale(.9); } }

/* Ghost mark — repeated funnel CTA (no signal; keeps one-signal-per-screen) */
[data-design="b"] .hc-mark--ghost { display:inline-flex; align-items:center; gap:14px; min-height:44px; padding:14px 24px; font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-ink); background:transparent; border:1px solid var(--hc-rule); border-radius:0; text-decoration:none; transition: background .18s var(--hc-ease-snap), color .18s var(--hc-ease-snap); }
[data-design="b"] .hc-mark--ghost:hover { background:var(--hc-ink); color:var(--hc-paper); }
[data-design="b"] .hc-mark--ghost:hover .hc-mark__arrow { color:var(--hc-paper); }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-mark--signal { animation: none; }
  [data-design="b"] .hc-mark__tick { transition: none; opacity:1; transform: scale(1); }
  [data-design="b"] .hc-hero__grid,
  [data-design="b"] .hc-hero__draft { animation: none; opacity:.34; }
  [data-design="b"] .hc-draft-roof,
  [data-design="b"] .hc-draft-wall,
  [data-design="b"] .hc-draft-dim { stroke-dashoffset:0; animation:none; }
  [data-design="b"] .hc-draft-tick { opacity:.9; animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   ELEMENT 6 — Pointer (drafted dimension line) between hero and funnel
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-pointer-lead { background:var(--hc-paper); padding: clamp(28px,5vw,56px) clamp(16px,4vw,40px); }
[data-design="b"] .hc-pointer-lead__inner { max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:18px; }
[data-design="b"] .hc-pointer-lead__label { font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--hc-mute); flex:0 0 auto; }
[data-design="b"] .hc-pointer-lead__line { position:relative; flex:1 1 auto; height:1px; background:var(--hc-rule-soft); overflow:hidden; }
[data-design="b"] .hc-pointer-lead__line::after { content:""; position:absolute; inset:0; background:var(--hc-ink); transform-origin:left center; transform:scaleX(.18); animation: b-lead-extend 4.8s var(--hc-ease-set) infinite; }
[data-design="b"] .hc-pointer-lead__node { flex:0 0 auto; width:9px; height:9px; border:1px solid var(--hc-ink); background:var(--hc-paper); }
@keyframes b-lead-extend { 0% { transform:scaleX(.12); opacity:.55; } 55% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:.55; } }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-pointer-lead__line::after { animation:none; transform:scaleX(1); }
}

/* ════════════════════════════════════════════════════════════════════
   ELEMENT 6 (forward-step counter, in funnel head) — HC code remapped
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-pointer { display:flex; align-items:center; gap:16px; padding:18px 0 4px; font-variant-numeric: tabular-nums; color:var(--hc-ink); }
[data-design="b"] .hc-pointer__counter { font-family:var(--hc-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; opacity:.75; }
[data-design="b"] .hc-pointer__counter-now { display:inline-block; min-width:1ch; color:var(--hc-signal); animation: b-pointer-tick 320ms ease-out; }
[data-design="b"] .hc-pointer__bar { position:relative; flex:1; height:2px; background:currentColor; opacity:.15; overflow:hidden; }
[data-design="b"] .hc-pointer__bar-fill { position:absolute; inset:0; width:var(--hc-pointer-progress, 20%); background:var(--hc-signal); opacity:1; transition: width 480ms cubic-bezier(0.22,0.61,0.36,1); }
[data-design="b"] .hc-pointer__chev { font-size:18px; opacity:.6; animation: b-pointer-chev 4s ease-in-out infinite; }
@keyframes b-pointer-tick { 0% { transform:translateY(-6px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
@keyframes b-pointer-chev { 0%,100% { transform:translateX(0); opacity:.45; } 50% { transform:translateX(4px); opacity:.9; } }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-pointer__counter-now,
  [data-design="b"] .hc-pointer__chev,
  [data-design="b"] .hc-pointer__bar-fill { animation:none; transition:none; }
}

/* ════════════════════════════════════════════════════════════════════
   ELEMENT 5 — Funnel (intake), HC working CSS remapped + step-5 fields
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-funnel { padding: clamp(64px, 10vw, 120px) clamp(16px, 4vw, 40px); max-width:880px; margin:0 auto; }
[data-design="b"] .hc-funnel__head { padding-bottom:24px; border-bottom:1px solid var(--hc-rule); margin-bottom:32px; }
[data-design="b"] .hc-funnel__head h2 { margin:8px 0 8px; }
[data-design="b"] .hc-funnel__lede { font-family:var(--hc-serif); font-style:italic; font-size:clamp(16px, 1.7vw, 18px); color:var(--hc-ink-2); margin:0; max-width: 60ch; }

[data-design="b"] .hc-funnel__progress { list-style:none; padding:0; margin:0 0 32px; display:flex; flex-wrap:wrap; gap:18px; }
[data-design="b"] .hc-cross { position:relative; width:18px; height:18px; border:1px solid var(--hc-rule); flex:0 0 auto; }
[data-design="b"] .hc-cross::before,
[data-design="b"] .hc-cross::after { content:""; position:absolute; background:var(--hc-rule); }
[data-design="b"] .hc-cross::before { left:0; right:0; top:50%; height:1px; transform: translateY(-50%); }
[data-design="b"] .hc-cross::after  { top:0; bottom:0; left:50%; width:1px; transform: translateX(-50%); }
[data-design="b"] .hc-cross span { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--hc-signal); border-radius:50%; opacity:0; transition: opacity .32s var(--hc-ease-snap); }
[data-design="b"] .hc-cross.is-active span { opacity:1; }
[data-design="b"] .hc-cross.is-done { border-color: var(--hc-ink); }

[data-design="b"] .hc-funnel__form { border:1px solid var(--hc-rule); padding: clamp(24px, 4vw, 40px); background: var(--hc-surface); position:relative; }
[data-design="b"] .hc-step { border:0; padding:0; margin:0; min-width:0; display:none; opacity:0; transform: translateY(8px); transition: opacity .54s var(--hc-ease-set), transform .54s var(--hc-ease-set); }
[data-design="b"] .hc-step.is-active { display:block; opacity:1; transform: translateY(0); }
[data-design="b"] .hc-step__label { display:flex; align-items:baseline; gap:16px; font-family:var(--hc-display); font-weight:500; font-size:clamp(20px, 2.6vw, 28px); letter-spacing:-0.005em; margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--hc-rule-soft); width:100%; }
[data-design="b"] .hc-step__no { font-family:var(--hc-mono); font-size:14px; color:var(--hc-signal); letter-spacing:0.08em; flex:0 0 auto; }
[data-design="b"] .hc-field { margin-bottom:20px; }
[data-design="b"] .hc-field__hint { display:block; font-family:var(--hc-body); font-size:14px; color:var(--hc-mute); margin-bottom:14px; }
[data-design="b"] .hc-field label { display:block; font-family:var(--hc-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-mute); margin-bottom:8px; }
[data-design="b"] .hc-field__opt { text-transform:none; letter-spacing:0; color:var(--hc-mute); font-size:11px; }
[data-design="b"] .hc-field input,
[data-design="b"] .hc-field textarea { width:100%; max-width:100%; padding:10px 0; font-family:var(--hc-body); font-size:16px; color:var(--hc-ink); background:transparent; border:0; border-bottom:1px solid var(--hc-rule-soft); border-radius:0; outline:none; transition: border-color .32s var(--hc-ease-snap); }
[data-design="b"] .hc-field textarea { resize:vertical; line-height:1.55; }
[data-design="b"] .hc-field input:focus,
[data-design="b"] .hc-field textarea:focus { border-bottom-color: var(--hc-ink); }
[data-design="b"] .hc-options { display:flex; flex-wrap:wrap; gap:8px; }
[data-design="b"] .hc-opt { font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; min-height:44px; padding:11px 16px; color:var(--hc-ink); background:var(--hc-paper); border:1px solid var(--hc-rule); border-radius:0; cursor:pointer; transition: background .18s var(--hc-ease-snap), color .18s var(--hc-ease-snap); }
[data-design="b"] .hc-opt:hover,
[data-design="b"] .hc-opt.is-chosen { background:var(--hc-ink); color:var(--hc-paper); }

[data-design="b"] .hc-step__nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--hc-rule-soft); }
[data-design="b"] .hc-mark { font-family:var(--hc-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; min-height:44px; padding:12px 20px; color:var(--hc-ink); background:var(--hc-paper); border:1px solid var(--hc-ink); border-radius:0; cursor:pointer; }
[data-design="b"] .hc-mark:hover { background:var(--hc-ink); color:var(--hc-paper); }
[data-design="b"] .hc-back { background:transparent; border-color:var(--hc-rule); color:var(--hc-ink-2); }
[data-design="b"] .hc-submit { background:var(--hc-ink); color:var(--hc-paper); }

[data-design="b"] .hc-final { padding:16px 0; }
[data-design="b"] .hc-final__case { font-family:var(--hc-mono); font-size:14px; letter-spacing:0.08em; color:var(--hc-mute); margin:0 0 16px; text-transform:uppercase; }
[data-design="b"] .hc-final__no { color:var(--hc-signal); }
[data-design="b"] .hc-final__body { font-family:var(--hc-serif); font-size:clamp(17px, 1.9vw, 20px); line-height:1.5; color:var(--hc-ink); margin:0 0 16px; max-width: 56ch; }
[data-design="b"] .hc-final__body a { color:var(--hc-ink); text-decoration:underline; text-underline-offset:3px; }
[data-design="b"] .hc-final__meta { font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--hc-mute); }

[data-design="b"] .hc-funnel__foot { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:24px; }
[data-design="b"] .hc-funnel__foot span { font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--hc-mute); }
[data-design="b"] .hc-funnel__foot span + span { padding-left:24px; border-left:1px solid var(--hc-rule-soft); }

@media (max-width: 560px) {
  [data-design="b"] .hc-funnel__progress { gap:12px; }
  [data-design="b"] .hc-step__nav { flex-direction: column-reverse; }
  [data-design="b"] .hc-step__nav .hc-mark { width:100%; }
  [data-design="b"] .hc-funnel__foot span + span { padding-left:0; border-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-step { transition: none; }
  [data-design="b"] .hc-field input,
  [data-design="b"] .hc-field textarea,
  [data-design="b"] .hc-opt { transition: none; }
  [data-design="b"] .hc-cross span { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   AMBIENT A — Services as a numbered drafting index  (HC code remapped)
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-index { position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 40px); max-width:1320px; margin:0 auto; }
[data-design="b"] .hc-index__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 32px; padding-bottom:32px; border-bottom:1px solid var(--hc-rule); margin-bottom:24px; }
[data-design="b"] .hc-index__head h2 { margin:0; }
[data-design="b"] .hc-index__list { list-style:none; padding:0; margin:0; }
[data-design="b"] .hc-row { display:grid; grid-template-columns: 80px 1.4fr 1.6fr; gap:24px; align-items:baseline; padding:24px 0; border-top:1px solid var(--hc-rule-soft); position:relative; opacity:0; transform: translateY(8px); transition: opacity .54s var(--hc-ease-set), transform .54s var(--hc-ease-set); }
[data-design="b"] .hc-row::before { content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--hc-ink); transition: width .54s var(--hc-ease-set); }
[data-design="b"] .hc-row.is-set { opacity:1; transform: translateY(0); }
[data-design="b"] .hc-row.is-set::before { width:100%; }
[data-design="b"] .hc-row__num { font-family:var(--hc-mono); font-size:14px; color:var(--hc-mute); letter-spacing:0.08em; }
[data-design="b"] .hc-row__name { font-family:var(--hc-display); font-weight:500; font-size:clamp(20px, 2.4vw, 26px); letter-spacing:-0.005em; color:var(--hc-ink); }
[data-design="b"] .hc-row__desc { font-family:var(--hc-serif); font-style:italic; font-size:clamp(15px, 1.6vw, 17px); color:var(--hc-ink-2); line-height:1.5; }
[data-design="b"] .hc-ambient-a__motion { position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--hc-rule-soft); animation: b-index-edge 24s linear infinite; }
@keyframes b-index-edge { 0%,100% { background:var(--hc-rule-soft); } 50% { background:var(--hc-ink); } }
[data-design="b"] .hc-index__cta { margin-top:48px; padding-top:32px; border-top:1px solid var(--hc-rule); }

@media (max-width: 720px) {
  [data-design="b"] .hc-row { grid-template-columns: 48px 1fr; }
  [data-design="b"] .hc-row__desc { grid-column: 2 / -1; }
  [data-design="b"] .hc-index__head { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-row { opacity:1; transform:none; transition:none; }
  [data-design="b"] .hc-row::before { width:100%; transition:none; }
  [data-design="b"] .hc-ambient-a__motion { animation-play-state: paused; }
}

/* ════════════════════════════════════════════════════════════════════
   AMBIENT B — Process spine  (HC representative-matters spine remapped)
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-spine { position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 40px); max-width:1320px; margin:0 auto; border-top:1px solid var(--hc-rule); }
[data-design="b"] .hc-spine__head { padding-bottom:32px; border-bottom:1px solid var(--hc-rule); margin-bottom:48px; }
[data-design="b"] .hc-spine__head h2 { margin:8px 0 0; }
[data-design="b"] .hc-spine__list { list-style:none; padding:0 0 0 clamp(24px, 6vw, 80px); margin:0; position:relative; }
[data-design="b"] .hc-spine__list::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--hc-rule); }
[data-design="b"] .hc-entry { position:relative; display:grid; grid-template-columns: 88px 1fr; gap: clamp(16px, 3vw, 48px); padding: clamp(24px, 4vw, 48px) 0; opacity:0; transform: translateX(-12px); transition: opacity .54s var(--hc-ease-set), transform .54s var(--hc-ease-set); }
[data-design="b"] .hc-entry::before { content:""; position:absolute; left: calc(-1 * clamp(24px, 6vw, 80px)); top: clamp(28px, 4vw, 52px); width: 0; height:1px; background:var(--hc-ink); transition: width .54s var(--hc-ease-snap); }
[data-design="b"] .hc-entry::after { content:""; position:absolute; left: calc(-1 * clamp(24px, 6vw, 80px) - 4px); top: calc(clamp(28px, 4vw, 52px) - 4px); width:9px; height:9px; border:1px solid var(--hc-ink); background:var(--hc-paper); opacity:0; transform: scale(.6); transition: opacity .32s var(--hc-ease-snap), transform .32s var(--hc-ease-snap); }
[data-design="b"] .hc-entry.is-set { opacity:1; transform: translateX(0); }
[data-design="b"] .hc-entry.is-set::before { width: clamp(24px, 6vw, 80px); }
[data-design="b"] .hc-entry.is-set::after { opacity:1; transform: scale(1); }
[data-design="b"] .hc-entry__year { font-family:var(--hc-mono); font-size:clamp(22px, 3vw, 30px); letter-spacing:0.04em; color:var(--hc-ink); }
[data-design="b"] .hc-entry__body h3 { font-family:var(--hc-display); font-weight:500; font-size:clamp(18px, 2vw, 22px); margin:0 0 8px; }
[data-design="b"] .hc-entry__body p { font-family:var(--hc-body); font-size:clamp(15px, 1.6vw, 16px); line-height:1.55; color:var(--hc-ink-2); margin:0 0 12px; max-width:60ch; }
[data-design="b"] .hc-entry__juris { display:inline-block; font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; padding:3px 8px; border:1px solid var(--hc-rule); color:var(--hc-mute); }

@media (max-width: 560px) {
  [data-design="b"] .hc-entry { grid-template-columns: 1fr; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .hc-entry { opacity:1; transform:none; transition:none; }
  [data-design="b"] .hc-entry::before { width: clamp(24px, 6vw, 80px); transition:none; }
  [data-design="b"] .hc-entry::after  { opacity:1; transform: scale(1); transition:none; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT — two-column tabloid (drafted plate, no fabricated photo)
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-about { border-top:1px solid var(--hc-rule); }
[data-design="b"] .hc-about__grid { max-width:1320px; margin:0 auto; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 40px); display:grid; grid-template-columns: 0.62fr 1fr; gap: clamp(24px, 5vw, 72px); align-items:start; }
[data-design="b"] .hc-about__aside { display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:clamp(24px,4vw,40px); border:1px solid var(--hc-rule); background:var(--hc-surface); }
[data-design="b"] .hc-about__plate { font-family:var(--hc-display); font-weight:500; font-size:clamp(18px,2.2vw,22px); letter-spacing:-0.01em; }
[data-design="b"] .hc-about__plate-sub { font-family:var(--hc-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--hc-mute); margin-bottom:6px; }
[data-design="b"] .hc-about__body h2 { margin:8px 0 20px; }
[data-design="b"] .hc-about__body p { font-family:var(--hc-body); font-size:clamp(16px,1.8vw,18px); line-height:1.6; color:var(--hc-ink-2); max-width:62ch; }
[data-design="b"] .hc-about__body p + p { margin-top:16px; }

@media (max-width: 720px) {
  [data-design="b"] .hc-about__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   SERVICE AREA
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-area { border-top:1px solid var(--hc-rule); }
[data-design="b"] .hc-area__head,
[data-design="b"] .hc-area__body { max-width:1320px; margin:0 auto; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px); }
[data-design="b"] .hc-area__head { padding-top:clamp(64px,9vw,120px); display:flex; flex-direction:column; gap:8px; }
[data-design="b"] .hc-area__body { padding-top:24px; padding-bottom:clamp(64px,9vw,120px); font-family:var(--hc-serif); font-size:clamp(17px,1.9vw,20px); line-height:1.55; color:var(--hc-ink-2); max-width:min(70ch, 1320px); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER — single hairline, four mono columns, license. Zero icons.
   ════════════════════════════════════════════════════════════════════ */
[data-design="b"] .hc-footer { background:var(--hc-paper); padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) 40px; border-top:1px solid var(--hc-rule); }
[data-design="b"] .hc-footer__cols { max-width:1320px; margin:0 auto; display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
[data-design="b"] .hc-footer__col { display:flex; flex-direction:column; gap:8px; }
[data-design="b"] .hc-footer__col span,
[data-design="b"] .hc-footer__col a { font-family:var(--hc-mono); font-size:12px; letter-spacing:0.04em; color:var(--hc-ink-2); text-decoration:none; }
[data-design="b"] .hc-footer__col a:hover { color:var(--hc-ink); text-decoration:underline; text-underline-offset:3px; }
[data-design="b"] .hc-footer__k { text-transform:uppercase; letter-spacing:0.14em; color:var(--hc-mute) !important; font-size:11px !important; margin-bottom:4px; }
[data-design="b"] .hc-footer__lic { color:var(--hc-ink) !important; }
[data-design="b"] .hc-footer__cross { color:var(--hc-mute); margin-top:4px; }
[data-design="b"] .hc-footer__fine { max-width:1320px; margin: clamp(32px,5vw,56px) auto 0; padding-top:20px; border-top:1px solid var(--hc-rule-soft); font-family:var(--hc-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--hc-mute); }

@media (max-width: 720px) {
  [data-design="b"] .hc-footer__cols { grid-template-columns: 1fr 1fr; gap:28px; }
}
@media (max-width: 420px) {
  [data-design="b"] .hc-footer__cols { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE HARD CONTRACT — appended at bottom (per spec)
   ════════════════════════════════════════════════════════════════════ */
[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; }