/* ============================================================
   FEATHER & FLAT — design slice "b" for Ezequiel Drywall Repair
   Register: light-forward craft precision. Seams disappear;
   so does the machinery. Everything scoped [data-design="b"].
   Distinct from the concrete/hi-vis civic-brutalist Site A register:
   this is plaster-white / graphite ink / feather-blue, editorial
   sans display, smoothing/feathering motion — not locking/stamping.
   ============================================================ */

[data-design="b"] {
  --design-b-primary: #2f6f8f;

  /* --- Color tokens (12) --- */
  --fq-plaster-50:  #faf8f4;   /* page paper — warm off-white */
  --fq-plaster-100: #f2efe7;   /* section surface */
  --fq-plaster-200: #e6e1d4;   /* card / plane fill */
  --fq-ink-900:     #23282b;   /* primary text */
  --fq-ink-700:     #3c4348;   /* secondary text */
  --fq-ink-500:     #6b7278;   /* captions / metadata */
  --fq-feather-500: #2f6f8f;   /* feather-blue accent / primary CTA */
  --fq-feather-700: #1f4f68;   /* accent pressed state */
  --fq-mud-400:     #c9a876;   /* joint-compound cream — secondary accent */
  --fq-mud-600:     #a8824f;   /* mud pressed */
  --fq-ok-600:      #3f7d55;   /* success / logged state */
  --fq-line-200:    #d9d3c4;   /* hairline borders */

  --fq-font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --fq-font-body: "Inter", "Public Sans", system-ui, -apple-system, sans-serif;
  --fq-font-mono: "IBM Plex Mono", "DM Mono", ui-monospace, monospace;

  --fq-ease-feather: cubic-bezier(0.22, 0.61, 0.36, 1);   /* smoothing pass */
  --fq-ease-settle:  cubic-bezier(0.16, 1, 0.3, 1);       /* float settle */
  --fq-ease-breath:  cubic-bezier(0.45, 0, 0.55, 1);      /* ambient cycle */

  --fq-dur-fb:     140ms;
  --fq-dur-press:  220ms;
  --fq-dur-pass:   900ms;
  --fq-dur-step:   640ms;
  --fq-dur-breath: 9s;
  --fq-dur-feather-cycle: 14s;

  --fq-tick:   4px;
  --fq-half:   8px;
  --fq-unit:   12px;
  --fq-course: 24px;
  --fq-bay:    40px;
  --fq-pass:   64px;
  --fq-deck:   96px;
  --fq-grade:  128px;

  background: var(--fq-plaster-50);
  color: var(--fq-ink-900);
  font-family: var(--fq-font-body);
  isolation: isolate;
}

[data-design="b"].dq-design * { 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; display: block; }

/* ============================================================
   1. HEADER — "Feather bar"
   ============================================================ */
[data-design="b"] .fq-header { position: sticky; top: 0; z-index: 50; background: var(--fq-plaster-50); border-bottom: 1px solid var(--fq-line-200); isolation: isolate; }
[data-design="b"] .fq-header__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fq-unit) clamp(var(--fq-course), 4vw, var(--fq-bay)); min-height: 72px; position: relative; z-index: 2; }
[data-design="b"] .fq-logo { font-family: var(--fq-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; color: var(--fq-ink-900); text-decoration: none; }
[data-design="b"] .fq-hamburger { width: 48px; height: 44px; background: transparent; border: 1px solid var(--fq-line-200); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; transition: border-color var(--fq-dur-fb) var(--fq-ease-feather), background var(--fq-dur-fb) var(--fq-ease-feather); }
[data-design="b"] .fq-hamburger__rule { display: block; width: 20px; height: 2px; background: var(--fq-ink-900); transition: background var(--fq-dur-fb) var(--fq-ease-feather); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-hamburger:hover { background: var(--fq-feather-500); border-color: var(--fq-feather-500); }
  [data-design="b"] .fq-hamburger:hover .fq-hamburger__rule { background: var(--fq-plaster-50); }
}

/* the header's single atmospheric layer: a hairline feather-pass that
   draws left-to-right beneath the bar, then breathes a slow opacity
   cycle — the "mud knife feathering a seam" register applied to chrome */
[data-design="b"] .fq-header__feather {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fq-feather-500) 20%, var(--fq-mud-400) 55%, transparent 90%);
  transform: scaleX(0); transform-origin: left;
  animation: fq-feather-draw var(--fq-dur-pass) var(--fq-ease-feather) forwards,
             fq-feather-breathe var(--fq-dur-feather-cycle) var(--fq-ease-breath) 1.2s infinite;
  z-index: 1;
}
@keyframes fq-feather-draw { to { transform: scaleX(1); } }
@keyframes fq-feather-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

[data-design="b"] .fq-drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw); background: var(--fq-plaster-50); color: var(--fq-ink-900); padding: var(--fq-bay); transform: translateX(100%); transition: transform var(--fq-dur-pass) var(--fq-ease-settle); z-index: 100; border-left: 1px solid var(--fq-line-200); display: none; }
[data-design="b"] .fq-drawer[data-open="true"] { transform: translateX(0); display: flex; flex-direction: column; gap: var(--fq-deck); }
[data-design="b"] .fq-drawer__nav { display: flex; flex-direction: column; gap: var(--fq-course); margin-top: var(--fq-pass); }
[data-design="b"] .fq-drawer__nav a { font-family: var(--fq-font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.005em; color: var(--fq-ink-900); text-decoration: none; position: relative; padding: var(--fq-tick) 0; }
[data-design="b"] .fq-drawer__nav a::before { content: attr(data-num); font-family: var(--fq-font-mono); font-size: 12px; color: var(--fq-feather-500); padding-right: var(--fq-unit); vertical-align: middle; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-drawer__nav a:hover { color: var(--fq-feather-500); }
}
[data-design="b"] .fq-drawer__contact { display: flex; flex-direction: column; gap: var(--fq-unit); }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .fq-header__feather { animation: none; opacity: 1; transform: scaleX(1); }
  [data-design="b"] .fq-drawer { transition: none; }
}

/* ============================================================
   2. HERO — Elements 2 + 3
   ============================================================ */
[data-design="b"] .fq-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--fq-deck), 12vw, var(--fq-grade)) clamp(var(--fq-course), 5vw, var(--fq-bay)) var(--fq-deck);
  background: var(--fq-plaster-50);
}
[data-design="b"] .fq-hero__backdrop { position: absolute; inset: 0; z-index: 0; }
[data-design="b"] .fq-hero__plane {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(47,111,143,0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 78%, rgba(201,168,118,0.16), transparent 70%);
}
/* the ONE animated layer: a mud-pass feather sweeping across a rough
   plane, resolving it toward flat — clip-path only, ambient forever */
[data-design="b"] .fq-hero__feather-pass {
  position: absolute; top: 8%; right: -10%; width: 62%; height: 84%;
  background: linear-gradient(115deg, transparent 0%, rgba(47,111,143,0.22) 45%, rgba(201,168,118,0.20) 62%, transparent 100%);
  clip-path: polygon(0 0, 40% 0, 62% 100%, 0% 100%);
  animation: fq-feather-sweep var(--fq-dur-breath) var(--fq-ease-breath) infinite;
  transform-origin: center;
}
@keyframes fq-feather-sweep {
  0%   { clip-path: polygon(0 0, 40% 0, 62% 100%, 0% 100%); opacity: 0.55; }
  50%  { clip-path: polygon(0 0, 62% 0, 84% 100%, 0% 100%); opacity: 0.9; }
  100% { clip-path: polygon(0 0, 40% 0, 62% 100%, 0% 100%); opacity: 0.55; }
}
[data-design="b"] .fq-hero__bay { position: relative; z-index: 3; isolation: isolate; max-width: 46ch; margin-inline: 0; }
[data-design="b"] .fq-hero__proof {
  font-family: var(--fq-font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fq-ink-500); margin: 0 0 var(--fq-course); opacity: 1;
}
[data-design="b"] .fq-hero__title {
  font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.05; letter-spacing: -0.01em; color: var(--fq-ink-900);
  margin: 0 0 var(--fq-course); max-width: 15ch; opacity: 1;
}
[data-design="b"] .fq-hero__sub {
  font-family: var(--fq-font-body); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55; color: var(--fq-ink-700); margin: 0 0 var(--fq-bay); max-width: 46ch; opacity: 1;
}
[data-design="b"] .fq-hero__cta-row { display: flex; gap: var(--fq-course); flex-wrap: wrap; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .fq-hero__feather-pass { animation: none; opacity: 0.7; }
}

/* ============================================================
   CTA — "Feather press"
   ============================================================ */
[data-design="b"] .fq-cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--fq-unit);
  padding: 16px 26px; min-height: 56px;
  background: var(--fq-feather-500); color: var(--fq-plaster-50);
  font-family: var(--fq-font-body); font-weight: 600; font-size: 17px; letter-spacing: 0.005em;
  text-decoration: none; border: 0; border-radius: 4px;
  transition: transform var(--fq-dur-fb) var(--fq-ease-feather), background var(--fq-dur-press) var(--fq-ease-feather);
  cursor: pointer; overflow: hidden;
}
[data-design="b"] .fq-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.22) 40%, rgba(255,255,255,0.22) 55%, transparent 70%);
  background-size: 240% 100%;
  animation: fq-cta-cure var(--fq-dur-breath) var(--fq-ease-breath) infinite;
  pointer-events: none;
}
@keyframes fq-cta-cure { 0% { background-position: 240% 0; } 100% { background-position: -40% 0; } }
[data-design="b"] .fq-cta__arrow { font-size: 18px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-cta:hover { transform: translateY(-2px); background: var(--fq-feather-700); }
}
[data-design="b"] .fq-cta:active { transform: translateY(0); background: var(--fq-feather-700); }
[data-design="b"] .fq-cta:focus-visible { outline: 3px solid var(--fq-mud-400); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-design="b"] .fq-cta::before { animation: none; } }

/* ============================================================
   6. POINTER — "Float pass" — mud-pass/feather register
   ============================================================ */
[data-design="b"] .fq-pointer {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--fq-tick);
  width: 160px; margin: 0 auto; padding: var(--fq-course) 0 var(--fq-bay);
  opacity: 1; min-height: 44px;
}
[data-design="b"] .fq-pointer__pass {
  display: block; height: 2px; background: var(--fq-feather-500);
  transform: scaleX(0); transform-origin: left;
  animation: fq-pointer-feather var(--fq-dur-pass) var(--fq-ease-feather) forwards;
}
[data-design="b"] .fq-pointer__pass[data-i="1"] { width: 88px; animation-delay: 0s; }
[data-design="b"] .fq-pointer__pass[data-i="2"] { width: 64px; animation-delay: 0.18s; background: var(--fq-mud-400); }
[data-design="b"] .fq-pointer__pass[data-i="3"] {
  width: 40px; animation-delay: 0.36s; animation-name: fq-pointer-feather, fq-pointer-breathe;
  animation-duration: var(--fq-dur-pass), 5s; animation-timing-function: var(--fq-ease-feather), var(--fq-ease-breath);
  animation-iteration-count: 1, infinite; animation-fill-mode: forwards, none; animation-delay: 0.36s, 1.2s;
}
@keyframes fq-pointer-feather { to { transform: scaleX(1); } }
@keyframes fq-pointer-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
[data-design="b"] .fq-pointer__label {
  font-family: var(--fq-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fq-ink-500); margin-top: var(--fq-tick); opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .fq-pointer__pass { animation: none; transform: scaleX(1); opacity: 1; }
}

/* ============================================================
   5. FUNNEL / ESTIMATOR — "Ledger readout"
   EST-8: exactly one step group visible; controls never overlap chips
   ============================================================ */
[data-design="b"] .fq-funnel { padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-plaster-100); }
[data-design="b"] .fq-funnel__head { max-width: 62ch; margin-inline: auto; margin-bottom: var(--fq-bay); text-align: left; }
[data-design="b"] .fq-funnel__kicker { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fq-feather-500); margin: 0 0 var(--fq-tick); }
[data-design="b"] .fq-funnel__title { font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--fq-ink-900); }

[data-design="b"] .fq-funnel__readout {
  max-width: 62ch; margin: 0 auto var(--fq-course); background: var(--fq-plaster-50); border: 1px solid var(--fq-line-200);
  border-radius: 8px; padding: var(--fq-course) var(--fq-bay);
}
[data-design="b"] .fq-funnel__readout-label { font-family: var(--fq-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fq-ink-500); margin: 0; }
[data-design="b"] .fq-funnel__readout-value {
  font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.1; color: var(--fq-feather-700); margin: var(--fq-tick) 0 var(--fq-unit);
}
[data-design="b"] .fq-funnel__readout-value[data-fresh="true"] { animation: fq-readout-settle var(--fq-dur-press) var(--fq-ease-settle); }
@keyframes fq-readout-settle { 0% { transform: translateY(6px); opacity: 0.4; } 100% { transform: translateY(0); opacity: 1; } }
[data-design="b"] .fq-funnel__sample-chip {
  display: inline-block; font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--fq-ink-500); background: var(--fq-plaster-200); border-radius: 999px; padding: 6px 14px; margin: 0;
}
[data-design="b"] .fq-funnel__adjacency { font-family: var(--fq-font-body); font-size: 14px; color: var(--fq-ink-500); margin: var(--fq-unit) 0 0; }
[data-design="b"] .fq-funnel__adjacency[hidden] { display: none; }

[data-design="b"] .fq-funnel__steps { max-width: 62ch; margin: 0 auto; background: var(--fq-plaster-50); border: 1px solid var(--fq-line-200); border-radius: 8px; padding: var(--fq-bay); min-height: 300px; position: relative; }
[data-design="b"] .fq-funnel__step { border: 0; padding: 0; margin: 0; display: none; }
[data-design="b"] .fq-funnel__step[data-active="true"] { display: block; animation: fq-step-settle var(--fq-dur-step) var(--fq-ease-settle) forwards; }
@keyframes fq-step-settle { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
[data-design="b"] .fq-funnel__step-id { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fq-ink-500); text-transform: uppercase; margin-bottom: var(--fq-course); padding: 0; }

[data-design="b"] .fq-funnel__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fq-unit); }
[data-design="b"] .fq-funnel__choices--finish { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
[data-design="b"] .fq-funnel__choice {
  font-family: var(--fq-font-body); font-weight: 600; font-size: 16px; text-align: left;
  background: var(--fq-plaster-50); color: var(--fq-ink-900); border: 1.5px solid var(--fq-line-200); border-radius: 6px;
  padding: 18px 20px; cursor: pointer; min-height: 56px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--fq-dur-fb) var(--fq-ease-feather), background var(--fq-dur-fb) var(--fq-ease-feather), transform var(--fq-dur-fb) var(--fq-ease-feather);
}
[data-design="b"] .fq-funnel__choice-title { font-weight: 600; }
[data-design="b"] .fq-funnel__choice-help { font-family: var(--fq-font-body); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--fq-ink-500); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-funnel__choice:hover { border-color: var(--fq-feather-500); background: var(--fq-plaster-100); transform: translateY(-2px); }
}
[data-design="b"] .fq-funnel__choice:active { transform: translateY(0); background: var(--fq-plaster-200); }
[data-design="b"] .fq-funnel__choice:focus-visible { outline: 3px solid var(--fq-mud-400); outline-offset: 2px; }
[data-design="b"] .fq-funnel__choice[data-selected="true"] { border-color: var(--fq-feather-500); background: rgba(47,111,143,0.08); }

[data-design="b"] .fq-funnel__contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fq-course); }
[data-design="b"] .fq-funnel__contact .fq-funnel__submit { grid-column: 1 / -1; justify-self: flex-start; }
[data-design="b"] .fq-field { display: flex; flex-direction: column; gap: 6px; }
[data-design="b"] .fq-field span { font-family: var(--fq-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fq-ink-500); text-transform: uppercase; }
[data-design="b"] .fq-field__input { font-family: var(--fq-font-body); font-weight: 500; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--fq-line-200); border-radius: 6px; background: var(--fq-plaster-50); color: var(--fq-ink-900); transition: border-color var(--fq-dur-fb) var(--fq-ease-feather); }
[data-design="b"] .fq-field__input:focus { outline: none; border-color: var(--fq-feather-500); }

[data-design="b"] .fq-funnel__done { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: var(--fq-unit) 0; }
[data-design="b"] .fq-funnel__done[hidden] { display: none !important; }
[data-design="b"] .fq-funnel__seal {
  display: inline-block; font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fq-ok-600); background: rgba(63,125,85,0.12); border-radius: 999px; padding: 6px 14px; margin-bottom: var(--fq-course);
  animation: fq-seal-settle var(--fq-dur-press) var(--fq-ease-settle) both;
}
@keyframes fq-seal-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
[data-design="b"] .fq-funnel__done-title { font-family: var(--fq-font-display); font-weight: 600; font-size: 26px; margin: 0 0 var(--fq-unit); color: var(--fq-ink-900); }
[data-design="b"] .fq-funnel__done-body { font-family: var(--fq-font-body); font-size: 16px; line-height: 1.55; color: var(--fq-ink-700); margin: 0; max-width: 46ch; }

[data-design="b"] .fq-funnel__nav { display: flex; align-items: center; gap: var(--fq-course); margin-top: var(--fq-course); max-width: 62ch; margin-inline: auto; }
[data-design="b"] .fq-funnel__back { background: transparent; border: 1.5px solid var(--fq-line-200); border-radius: 6px; padding: 10px 16px; font-family: var(--fq-font-mono); font-size: 13px; letter-spacing: 0.06em; cursor: pointer; color: var(--fq-ink-700); }
[data-design="b"] .fq-funnel__progress { flex: 1; height: 4px; background: var(--fq-plaster-200); position: relative; border-radius: 999px; overflow: hidden; }
[data-design="b"] .fq-funnel__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0.2); transform-origin: left; background: var(--fq-feather-500); transition: transform var(--fq-dur-step) var(--fq-ease-settle); }
[data-design="b"] .fq-funnel__counter { font-family: var(--fq-font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--fq-ink-500); white-space: nowrap; }

@media (max-width: 640px) {
  [data-design="b"] .fq-funnel__contact { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .fq-funnel__step,
  [data-design="b"] .fq-funnel__readout-value,
  [data-design="b"] .fq-funnel__seal { animation: none !important; opacity: 1; transform: none; }
}

/* ============================================================
   4. FINISH-LEVEL EXPLAINER — ambient segment B (mid-page)
   ============================================================ */
[data-design="b"] .fq-finish { position: relative; padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-plaster-50); overflow: hidden; isolation: isolate; }
[data-design="b"] .fq-finish__plane {
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 96px, rgba(35,40,43,0.04) 96px 98px);
  background-size: 320px 100%;
  animation: fq-plane-drift 24s linear infinite;
  pointer-events: none;
}
@keyframes fq-plane-drift { from { background-position: 0 0; } to { background-position: -320px 0; } }
[data-design="b"] .fq-finish__head { position: relative; z-index: 1; max-width: 62ch; margin: 0 0 var(--fq-bay); }
[data-design="b"] .fq-finish__kicker { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fq-feather-500); margin: 0 0 var(--fq-tick); }
[data-design="b"] .fq-finish__title { font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--fq-ink-900); max-width: 20ch; }
[data-design="b"] .fq-finish__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fq-course); margin-inline: auto; max-width: 1320px; }
[data-design="b"] .fq-finish__card { background: var(--fq-plaster-100); border: 1px solid var(--fq-line-200); border-radius: 10px; padding: var(--fq-course); }
[data-design="b"] .fq-finish__num { font-family: var(--fq-font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--fq-feather-500); }
[data-design="b"] .fq-finish__card h3 { font-family: var(--fq-font-display); font-weight: 600; font-size: 22px; margin: var(--fq-unit) 0 var(--fq-unit); color: var(--fq-ink-900); }
[data-design="b"] .fq-finish__card p { font-family: var(--fq-font-body); font-size: 15px; line-height: 1.55; color: var(--fq-ink-700); margin: 0; }
[data-design="b"] .fq-finish__cta-row { position: relative; z-index: 1; margin-top: var(--fq-bay); }
@media (prefers-reduced-motion: reduce) { [data-design="b"] .fq-finish__plane { animation: none; } }

/* ============================================================
   TEXTURE GALLERY
   ============================================================ */
[data-design="b"] .fq-gallery { padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-plaster-100); }
[data-design="b"] .fq-gallery__head { max-width: 62ch; margin: 0 0 var(--fq-bay); }
[data-design="b"] .fq-gallery__kicker { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fq-feather-500); margin: 0 0 var(--fq-tick); }
[data-design="b"] .fq-gallery__title { font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); margin: 0; color: var(--fq-ink-900); }
[data-design="b"] .fq-gallery__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--fq-course); }
[data-design="b"] .fq-gallery__item { display: flex; flex-direction: column; gap: var(--fq-unit); }
[data-design="b"] .fq-gallery__swatch {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid var(--fq-line-200);
  background: linear-gradient(135deg, var(--fq-plaster-200), var(--fq-plaster-50));
  transition: transform var(--fq-dur-fb) var(--fq-ease-feather);
}
[data-design="b"] .fq-gallery__item[data-texture="knockdown"] .fq-gallery__swatch { background-image: radial-gradient(circle at 30% 30%, rgba(35,40,43,0.10) 0 6%, transparent 7%), radial-gradient(circle at 65% 55%, rgba(35,40,43,0.10) 0 5%, transparent 6%), radial-gradient(circle at 45% 80%, rgba(35,40,43,0.10) 0 6%, transparent 7%), linear-gradient(135deg, var(--fq-plaster-200), var(--fq-plaster-50)); }
[data-design="b"] .fq-gallery__item[data-texture="orange-peel"] .fq-gallery__swatch { background-image: radial-gradient(circle at 20% 20%, rgba(35,40,43,0.06) 0 2%, transparent 3%), radial-gradient(circle at 50% 50%, rgba(35,40,43,0.06) 0 2%, transparent 3%), radial-gradient(circle at 80% 30%, rgba(35,40,43,0.06) 0 2%, transparent 3%), radial-gradient(circle at 30% 75%, rgba(35,40,43,0.06) 0 2%, transparent 3%), linear-gradient(135deg, var(--fq-plaster-200), var(--fq-plaster-50)); }
[data-design="b"] .fq-gallery__item[data-texture="skip-trowel"] .fq-gallery__swatch { background-image: repeating-linear-gradient(115deg, rgba(35,40,43,0.08) 0 8px, transparent 8px 26px), linear-gradient(135deg, var(--fq-plaster-200), var(--fq-plaster-50)); }
[data-design="b"] .fq-gallery__item[data-texture="match-existing"] .fq-gallery__swatch { background: linear-gradient(135deg, var(--fq-mud-400), var(--fq-plaster-100)); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-gallery__item:hover .fq-gallery__swatch { transform: translateY(-3px); }
}
[data-design="b"] .fq-gallery__name { font-family: var(--fq-font-body); font-weight: 600; font-size: 14px; color: var(--fq-ink-700); }

/* ============================================================
   PROCESS
   ============================================================ */
[data-design="b"] .fq-process { padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-plaster-50); }
[data-design="b"] .fq-process__head { max-width: 62ch; margin: 0 0 var(--fq-bay); }
[data-design="b"] .fq-process__kicker { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fq-feather-500); margin: 0 0 var(--fq-tick); }
[data-design="b"] .fq-process__title { font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); margin: 0; color: var(--fq-ink-900); }
[data-design="b"] .fq-process__track { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: flex; flex-wrap: wrap; gap: var(--fq-course); }
[data-design="b"] .fq-process__phase { display: flex; align-items: center; gap: var(--fq-unit); background: var(--fq-plaster-100); border: 1px solid var(--fq-line-200); border-radius: 999px; padding: var(--fq-unit) var(--fq-course); }
[data-design="b"] .fq-process__phase-num { font-family: var(--fq-font-mono); font-size: 13px; color: var(--fq-plaster-50); background: var(--fq-feather-500); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-design="b"] .fq-process__phase-label { font-family: var(--fq-font-body); font-weight: 600; font-size: 15px; color: var(--fq-ink-900); }

/* ============================================================
   ABOUT
   ============================================================ */
[data-design="b"] .fq-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--fq-bay); padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-plaster-100); max-width: 1320px; margin-inline: auto; }
[data-design="b"] .fq-about__col { max-width: 56ch; }
[data-design="b"] .fq-about__kicker { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fq-feather-500); margin: 0 0 var(--fq-tick); }
[data-design="b"] .fq-about__title { font-family: var(--fq-font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 var(--fq-unit); color: var(--fq-ink-900); }
[data-design="b"] .fq-about__body { font-family: var(--fq-font-body); font-size: 16px; line-height: 1.6; color: var(--fq-ink-700); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
[data-design="b"] .fq-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fq-bay); padding: var(--fq-deck) clamp(var(--fq-course), 5vw, var(--fq-bay)); background: var(--fq-ink-900); color: var(--fq-plaster-50); max-width: 100%; }
[data-design="b"] .fq-footer__col { max-width: 40ch; display: flex; flex-direction: column; gap: var(--fq-unit); }
[data-design="b"] .fq-footer__title { font-family: var(--fq-font-display); font-weight: 600; font-size: 24px; margin: 0; color: var(--fq-plaster-50); }
[data-design="b"] .fq-footer__tagline { font-family: var(--fq-font-body); font-size: 15px; color: var(--fq-plaster-200); margin: 0; }
[data-design="b"] .fq-footer__meta p { font-family: var(--fq-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fq-plaster-200); margin: 0 0 6px; }

/* ============================================================
   CHIP — every external / tel anchor styled (HARD)
   ============================================================ */
[data-design="b"] .fq-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fq-font-body); font-weight: 600; font-size: 15px;
  padding: 12px 20px; min-height: 44px; border-radius: 999px; text-decoration: none;
  transition: transform var(--fq-dur-fb) var(--fq-ease-feather), background var(--fq-dur-fb) var(--fq-ease-feather);
}
[data-design="b"] .fq-chip--phone { background: transparent; border: 1.5px solid var(--fq-feather-500); color: var(--fq-feather-500); }
[data-design="b"] .fq-chip--funnel { background: var(--fq-feather-500); color: var(--fq-plaster-50); border: 1.5px solid var(--fq-feather-500); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fq-chip:hover { transform: translateY(-2px); }
}
[data-design="b"] .fq-footer .fq-chip--phone { border-color: var(--fq-plaster-200); color: var(--fq-plaster-50); }

/* ============================================================
   MOBILE / VIEWPORT DISCIPLINE (bottom-of-file, per contract)
   ============================================================ */
[data-design="b"].dq-design,
[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; }

@media (max-width: 720px) {
  [data-design="b"] .fq-hero__bay { max-width: 100%; }
  [data-design="b"] .fq-funnel__choices,
  [data-design="b"] .fq-funnel__contact { grid-template-columns: 1fr; }
  [data-design="b"] .fq-finish__grid { grid-template-columns: 1fr; }
  [data-design="b"] .fq-header__bar { padding: var(--fq-unit) var(--fq-course); }
}

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="b"] .fq-hero__bay { margin-inline: auto; }
[data-design="b"] .fq-hero__sub { margin-inline: auto; }
[data-design="b"] .fq-funnel__done-body { margin-inline: auto; }
[data-design="b"] .fq-finish__head { margin-inline: auto; }
[data-design="b"] .fq-gallery__head { margin-inline: auto; }
[data-design="b"] .fq-process__head { margin-inline: auto; }
[data-design="b"] .fq-about__col { margin-inline: auto; }
[data-design="b"] .fq-footer__col { margin-inline: 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; }