/* ═══════════════════════════════════════════════════════════════════════
   McKinney's Heating & Air Services — Design B (plumb-and-square / hvac)
   Slot: b | Trade: hvac | 2026-06-19
   ALL selectors scoped to [data-design="b"] — ZERO plumb-and-square selectors
   ~12–16 thermal trade tokens + design tokens
   Motion gate: transform/opacity/clip-path ONLY — no layout-prop animation
   Hover transforms inside @media (hover:hover) and (pointer:fine)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens: Plumb & Square palette ── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  /* Surface */
  --ps-concrete-50:  #eeede8;
  --ps-concrete-100: #dedcd4;
  --ps-concrete-200: #c8c5b9;
  /* Ink */
  --ps-rebar-900: #171614;
  --ps-rebar-700: #2d2b27;
  --ps-rebar-500: #5b574e;
  /* Hi-vis accent */
  --ps-hivis-500: #f56600;
  --ps-hivis-700: #c44e00;
  /* Secondary */
  --ps-caution-500: #f4c200;
  --ps-plumb-700:   #1d3b6e;
  --ps-stop-700:    #a8211a;
  --ps-ok-700:      #2d6840;

  /* Typography */
  --ps-font-display: "Big Shoulders Display", "Anton", "Oswald", "Arial Narrow", sans-serif;
  --ps-font-body:    "Manrope", "Public Sans", system-ui, -apple-system, sans-serif;
  --ps-font-mono:    "JetBrains Mono", "DM Mono", ui-monospace, monospace;

  /* Spacing */
  --ps-tick:    4px;
  --ps-stud:    8px;
  --ps-plate:  12px;
  --ps-course: 24px;
  --ps-bay:    40px;
  --ps-pour:   64px;
  --ps-deck:   96px;
  --ps-storey: 128px;
  --ps-grade:  192px;

  /* Motion easings */
  --ps-ease-lock:  cubic-bezier(0.5, 0, 0, 1);
  --ps-ease-set:   cubic-bezier(0.65, 0, 0.35, 1);
  --ps-ease-pour:  cubic-bezier(0.4, 0, 0.2, 1);
  --ps-ease-stamp: cubic-bezier(0.15, 1.5, 0.3, 1);
  --ps-ease-cure:  cubic-bezier(0.45, 0, 0.55, 1);
  --ps-dur-fb:     120ms;
  --ps-dur-lock:   240ms;
  --ps-dur-press:  420ms;
  --ps-dur-pour:   900ms;
  --ps-dur-tick:   1800ms;
  --ps-dur-breath-fast: 4s;
  --ps-dur-breath-mid:  12s;
  --ps-dur-stripe: 22s;
  --ps-dur-airflow: 6s;

  /* Radius */
  --ps-radius-0: 0;
  --ps-radius-1: 2px;

  /* Shadows (inset only) */
  --ps-shadow-form-inset: inset 0 -3px 0 0 var(--ps-rebar-900);
  --ps-shadow-press: inset 0 3px 0 0 var(--ps-hivis-700);

  /* ── HVAC Thermal tokens (canonical names for gate) ── */
  --thermal-temp: 0;   /* 0=cold 1=warm — driven by scroll */
  --thermal-bg:   color-mix(in srgb, #0d4a52 calc((1 - var(--thermal-temp)) * 100%), #7a3b0a calc(var(--thermal-temp) * 100%));
  --thermal-accent: color-mix(in srgb, #1a7a8a calc((1 - var(--thermal-temp)) * 100%), #e87c2a calc(var(--thermal-temp) * 100%));
  /* Air-stream color tinted by thermal-temp: cool teal/blue → warm amber */
  --thermal-stream: color-mix(in srgb, rgba(20,160,190,0.55) calc((1 - var(--thermal-temp)) * 100%), rgba(230,120,30,0.55) calc(var(--thermal-temp) * 100%));

  /* Design-b primary token */
  --design-b-primary: var(--ps-hivis-500);
}

/* ── Base layout ── */
[data-design="b"].dq-design { max-width: 100%; overflow-x: clip; box-sizing: border-box; background: var(--ps-concrete-50); }
[data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="b"].dq-design * { min-width: 0; box-sizing: border-box; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }


/* ═══════════════════════════════════════════════════════
   E1 — HEADER — Marquee bar
   H-1: logo + stripe atmospheric layer + hamburger ONLY
   H-3: stripe cycle ≥18s (22s)
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ps-concrete-50);
  border-bottom: 3px solid var(--ps-rebar-900);
  isolation: isolate;
}
[data-design="b"] .ps-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ps-plate) clamp(var(--ps-course), 4vw, var(--ps-bay));
  min-height: 72px;
}
[data-design="b"] .ps-logo {
  font-family: var(--ps-font-display); font-weight: 900;
  font-size: clamp(20px, 3vw, 28px); letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ps-rebar-900);
  text-decoration: none; line-height: 0.92;
}
[data-design="b"] .ps-hamburger {
  width: 56px; height: 44px; background: var(--ps-rebar-900);
  border: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  flex-shrink: 0;
}
[data-design="b"] .ps-hamburger__rule { display: block; width: 22px; height: 2px; background: var(--ps-hivis-500); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-hamburger:hover { background: var(--ps-hivis-500); }
  [data-design="b"] .ps-hamburger:hover .ps-hamburger__rule { background: var(--ps-rebar-900); }
}
/* Stripe atmospheric layer — 22s cycle (H-3) */
[data-design="b"] .ps-header__stripe {
  height: 12px;
  background: repeating-linear-gradient(
    45deg,
    var(--ps-hivis-500) 0 18px,
    var(--ps-rebar-900) 18px 36px
  );
  background-size: 51px 12px;
  animation: b-stripe-march var(--ps-dur-stripe) linear infinite;
}
@keyframes b-stripe-march {
  from { background-position: 0 0; }
  to   { background-position: 510px 0; }
}

/* ── Drawer ── */
[data-design="b"] .ps-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 92vw);
  background: var(--ps-rebar-900); color: var(--ps-concrete-50);
  padding: var(--ps-bay);
  transform: translateX(100%);
  transition: transform var(--ps-dur-pour) var(--ps-ease-pour);
  z-index: 100; border-left: 6px solid var(--ps-hivis-500);
  overflow-y: auto;
}
[data-design="b"] .ps-drawer[data-open="true"] { transform: translateX(0); }
[data-design="b"] .ps-drawer[hidden] { display: none; }
[data-design="b"] .ps-drawer__close {
  position: absolute; top: var(--ps-course); right: var(--ps-course);
  background: transparent; border: 2px solid var(--ps-hivis-500);
  color: var(--ps-hivis-500); font-size: 18px; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
[data-design="b"] .ps-drawer__nav { display: flex; flex-direction: column; gap: var(--ps-plate); margin-top: var(--ps-pour); }
[data-design="b"] .ps-drawer__nav a {
  font-family: var(--ps-font-display); font-weight: 800; font-size: 32px;
  letter-spacing: 0.01em; color: var(--ps-concrete-50); text-decoration: none;
  text-transform: uppercase; padding: var(--ps-stud) var(--ps-plate);
  display: block; position: relative;
}
[data-design="b"] .ps-drawer__nav a::before {
  content: attr(data-num); font-family: var(--ps-font-mono); font-size: 13px;
  color: var(--ps-hivis-500); padding-right: var(--ps-plate);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-drawer__nav a:hover {
    background: var(--ps-hivis-500); color: var(--ps-rebar-900);
  }
}
[data-design="b"] .ps-drawer__ctas { margin-top: var(--ps-bay); display: flex; flex-direction: column; gap: var(--ps-course); }
[data-design="b"] .ps-drawer__phone {
  display: flex; flex-direction: column; text-decoration: none;
  border-left: 4px solid var(--ps-hivis-500); padding-left: var(--ps-plate);
}
[data-design="b"] .ps-drawer__phone-label {
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ps-hivis-500); text-transform: uppercase;
}
[data-design="b"] .ps-drawer__phone-num {
  font-family: var(--ps-font-display); font-weight: 800; font-size: 28px;
  color: var(--ps-concrete-50); letter-spacing: 0.01em;
}
[data-design="b"] .ps-drawer__meta {
  position: absolute; bottom: var(--ps-course); left: var(--ps-bay);
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ps-hivis-500);
}


/* ═══════════════════════════════════════════════════════
   E3 + E5 — HERO — Thermal backdrop + Airflow Signature
   HERO-1: exactly one moving layer (airflow = E5)
   HERO-2: no directional primitives
   HERO-3: visual-presence floor via thermal-bg + airflow
   isolation:isolate on hero section; text z-index above backdrop
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-hero {
  position: relative; isolation: isolate;
  padding: clamp(var(--ps-pour), 10vh, var(--ps-grade)) clamp(var(--ps-course), 5vw, var(--ps-bay)) var(--ps-storey);
  min-height: 65vh; overflow: hidden;
  background: var(--ps-concrete-50);
}
/* E3: Thermal backdrop — abstract cool→warm gradient, driven by --thermal-temp */
[data-design="b"] .ps-hero__thermal-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #0d4a52 calc((1 - var(--thermal-temp)) * 100%), #5a2200 calc(var(--thermal-temp) * 100%)) 0%,
    color-mix(in srgb, #1a6575 calc((1 - var(--thermal-temp)) * 100%), #7a3b0a calc(var(--thermal-temp) * 100%)) 40%,
    color-mix(in srgb, #0a3540 calc((1 - var(--thermal-temp)) * 100%), #4a1e00 calc(var(--thermal-temp) * 100%)) 100%
  );
  opacity: 0.88;
  /* Sustained ambient breath — perceptible, on-brand, not arrival-only */
  animation: b-thermal-breathe 12s var(--ps-ease-cure) infinite;
}
@keyframes b-thermal-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%       { opacity: 0.94; transform: scale(1.012); }
}

/* E5: Airflow SVG container — site-wide, ambient, tinted by --thermal-temp */
[data-design="b"] .ps-hero__airflow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
[data-design="b"] .ps-airflow__svg { width: 100%; height: 100%; display: block; }

/* Duct geometry lines */
[data-design="b"] .ps-duct-line { fill: none; stroke: var(--ps-concrete-200); opacity: 0.25; }
[data-design="b"] .ps-duct-line--h1 { fill: rgba(200,197,185,0.15); stroke: none; }
[data-design="b"] .ps-duct-line--h2 { fill: rgba(200,197,185,0.10); stroke: none; }
[data-design="b"] .ps-duct-line--v1 { fill: rgba(200,197,185,0.12); stroke: none; }
[data-design="b"] .ps-duct-line--v2 { fill: rgba(200,197,185,0.08); stroke: none; }

/* Vent grilles */
[data-design="b"] .ps-vent rect,
[data-design="b"] .ps-vent line { stroke: var(--ps-concrete-200); opacity: 0.3; }

/* Air-stream particles — tinted by --thermal-temp; GPU-only transform animation */
[data-design="b"] .ps-stream {
  fill: var(--thermal-stream);
  opacity: 0.7;
}
/* Horizontal streams flow left→right along h1 duct */
[data-design="b"] .ps-stream--a1 { animation: b-stream-h var(--ps-dur-airflow) linear infinite; }
[data-design="b"] .ps-stream--a2 { animation: b-stream-h calc(var(--ps-dur-airflow) * 1.4) linear 1.2s infinite; }
[data-design="b"] .ps-stream--a3 { animation: b-stream-h calc(var(--ps-dur-airflow) * 0.8) linear 2.8s infinite; }
@keyframes b-stream-h {
  from { transform: translateX(0); }
  to   { transform: translateX(1600px); }
}
/* Horizontal streams along h2 duct */
[data-design="b"] .ps-stream--b1 { animation: b-stream-h2 calc(var(--ps-dur-airflow) * 1.2) linear 0.6s infinite; }
[data-design="b"] .ps-stream--b2 { animation: b-stream-h2 calc(var(--ps-dur-airflow) * 1.6) linear 3.5s infinite; }
@keyframes b-stream-h2 {
  from { transform: translateX(0); }
  to   { transform: translateX(1600px); }
}
/* Vertical streams flow top→down along v1 duct */
[data-design="b"] .ps-stream--c1 { animation: b-stream-v calc(var(--ps-dur-airflow) * 1.1) linear 0.4s infinite; }
[data-design="b"] .ps-stream--c2 { animation: b-stream-v calc(var(--ps-dur-airflow) * 1.5) linear 2.1s infinite; }
@keyframes b-stream-v {
  from { transform: translateY(0); }
  to   { transform: translateY(800px); }
}

/* Right edge stripe — design vocabulary (non-directional, decorative) */
[data-design="b"] .ps-hero__stripe {
  position: absolute; top: 0; bottom: 0; right: 0; width: 28px; z-index: 1;
  background: repeating-linear-gradient(
    180deg,
    var(--ps-hivis-500) 0 22px,
    var(--ps-rebar-900) 22px 44px
  );
  animation: b-stripe-fall var(--ps-dur-stripe) linear infinite;
  opacity: 0.7;
}
@keyframes b-stripe-fall {
  from { background-position: 0 -880px; }
  to   { background-position: 0 0; }
}

/* Hero text bay — z-index above all backdrop layers */
[data-design="b"] .ps-hero__bay {
  position: relative; z-index: 10;
  max-width: min(640px, 100%);
}
[data-design="b"] .ps-hero__kicker {
  font-family: var(--ps-font-mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ps-hivis-500);
  margin: 0 0 var(--ps-course); padding-bottom: var(--ps-stud);
  border-bottom: 2px solid rgba(245,102,0,0.5);
  display: inline-block;
}
[data-design="b"] .ps-hero__title {
  font-family: var(--ps-font-display); font-weight: 900;
  font-size: clamp(32px, 6vw, 72px); line-height: 0.95;
  letter-spacing: -0.005em; text-transform: uppercase;
  color: var(--ps-concrete-50);
  margin: 0 0 var(--ps-course);
  max-width: 18ch;
}
[data-design="b"] .ps-hero__sub {
  font-family: var(--ps-font-body); font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55;
  color: var(--ps-concrete-100);
  margin: 0 0 var(--ps-plate); max-width: 52ch;
}
[data-design="b"] .ps-hero__proof {
  font-family: var(--ps-font-mono); font-size: 13px; letter-spacing: 0.1em;
  color: rgba(238,237,232,0.7); margin: 0 0 var(--ps-bay);
}
[data-design="b"] .ps-hero__cta-row { display: flex; gap: var(--ps-course); flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════
   E2 — CTA — "Pour button"
   CTA-1: animated (shimmer cure on 4s)
   CTA-2: points to #quote
   CTA-3: receives the click
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--ps-plate);
  padding: 18px 28px; min-height: 60px; min-width: 44px;
  background: var(--ps-hivis-500); color: var(--ps-rebar-900);
  font-family: var(--ps-font-display); font-weight: 800;
  font-size: clamp(18px, 2vw, 22px); text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; border: 0;
  border-radius: 0 0 var(--ps-radius-1) var(--ps-radius-1);
  box-shadow: var(--ps-shadow-form-inset);
  transition: box-shadow var(--ps-dur-lock) var(--ps-ease-lock), background var(--ps-dur-lock) var(--ps-ease-lock);
  cursor: pointer; overflow: hidden;
}
[data-design="b"] .ps-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  background-size: 240% 100%;
  animation: b-cta-cure var(--ps-dur-breath-fast) var(--ps-ease-cure) infinite;
}
@keyframes b-cta-cure {
  0%   { background-position: 240% 0; }
  100% { background-position: -40% 0; }
}
[data-design="b"] .ps-cta__arrow { font-size: 24px; line-height: 1; }
[data-design="b"] .ps-cta__num {
  position: absolute; right: 8px; bottom: 4px;
  font-family: var(--ps-font-mono); font-size: 9px; letter-spacing: 0.1em;
  opacity: 0.65; font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-cta:hover { box-shadow: inset 0 -5px 0 0 var(--ps-rebar-900); }
  [data-design="b"] .ps-cta:hover { transform: translateY(-1px); }
}
[data-design="b"] .ps-cta:active { transform: translateY(3px); box-shadow: inset 0 3px 0 0 var(--ps-hivis-700); background: var(--ps-hivis-700); }
[data-design="b"] .ps-cta:focus-visible { outline: 3px solid var(--ps-caution-500); outline-offset: 4px; }
/* Secondary CTA variant */
[data-design="b"] .ps-cta--secondary {
  background: transparent; color: var(--ps-concrete-50);
  border: 2px solid var(--ps-concrete-50); box-shadow: none;
}
[data-design="b"] .ps-cta--secondary::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-cta--secondary:hover { background: rgba(238,237,232,0.1); }
}
/* Call CTA (funnel) */
[data-design="b"] .ps-cta--call {
  background: var(--ps-hivis-500); color: var(--ps-rebar-900); box-shadow: var(--ps-shadow-form-inset);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-cta::before { animation: none; }
  [data-design="b"] .ps-cta { transition: none; }
}


/* ═══════════════════════════════════════════════════════
   E4 — SERVICES — "Column stand" mid-page ambient
   Scroll-reveals; column drift 22s; thermal accents
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-services {
  position: relative; overflow: hidden;
  padding: var(--ps-storey) clamp(var(--ps-course), 5vw, var(--ps-bay));
  background: var(--ps-concrete-100);
}
/* Airflow mid-page accent: thin horizontal duct line */
[data-design="b"] .ps-services__airflow-mid {
  position: absolute; top: 48px; left: 0; right: 0; height: 3px; pointer-events: none;
  background: var(--thermal-stream); opacity: 0.4;
  animation: b-mid-airflow-pulse 8s var(--ps-ease-cure) infinite;
}
@keyframes b-mid-airflow-pulse {
  0%, 100% { opacity: 0.25; transform: scaleX(0.95); }
  50%       { opacity: 0.55; transform: scaleX(1); }
}
/* Column drift background — 22s (design E4 primitive) */
[data-design="b"] .ps-services__columns {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 78px, rgba(46,45,40,0.06) 78px 82px
  );
  background-size: 320px 100%;
  animation: b-col-drift 22s linear infinite;
}
@keyframes b-col-drift {
  from { background-position: 0 0; }
  to   { background-position: 320px 0; }
}
[data-design="b"] .ps-services__head { position: relative; z-index: 1; margin-bottom: var(--ps-bay); }
[data-design="b"] .ps-services__kicker {
  font-family: var(--ps-font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ps-rebar-500); margin: 0 0 var(--ps-stud);
  padding-bottom: var(--ps-stud); border-bottom: 2px solid var(--ps-rebar-900);
  display: inline-block;
}
[data-design="b"] .ps-services__title {
  font-family: var(--ps-font-display); font-weight: 800;
  font-size: clamp(32px, 5vw, 64px); line-height: 0.95;
  letter-spacing: -0.005em; text-transform: uppercase; margin: 0; max-width: 18ch;
}
[data-design="b"] .ps-services__list { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; }
[data-design="b"] .ps-service-row {
  display: grid; grid-template-columns: minmax(80px, 120px) 1fr auto; gap: var(--ps-course);
  padding: var(--ps-course) var(--ps-stud);
  border-top: 3px solid var(--ps-rebar-900); background: var(--ps-concrete-50);
  align-items: flex-start;
  /* Scroll-reveal: transform-based, not layout-based */
  opacity: 1; transform: translateY(0);
}
[data-design="b"] .ps-service-row[data-reveal="pending"] { transform: translateY(28px); }
[data-design="b"] .ps-service-row[data-reveal="done"] {
  transform: translateY(0);
  transition: transform 0.5s var(--ps-ease-pour);
}
[data-design="b"] .ps-service-row:last-child { border-bottom: 3px solid var(--ps-rebar-900); }
/* Thermal accent numbers */
[data-design="b"] .ps-service-row__num {
  font-family: var(--ps-font-display); font-weight: 900;
  font-size: clamp(48px, 7vw, 88px); line-height: 0.85; letter-spacing: -0.02em;
  color: var(--thermal-accent); transition: color 0.8s ease;
}
[data-design="b"] .ps-thermal-accent { color: var(--thermal-accent); transition: color 0.8s ease; }
[data-design="b"] .ps-service-row__body h3 {
  font-family: var(--ps-font-display); font-weight: 700;
  font-size: clamp(20px, 2.5vw, 30px); line-height: 1; text-transform: uppercase;
  letter-spacing: 0.005em; margin: 0 0 var(--ps-plate);
}
[data-design="b"] .ps-service-row__body p {
  font-family: var(--ps-font-body); font-weight: 400;
  font-size: 17px; line-height: 1.55; color: var(--ps-rebar-700); margin: 0; max-width: 56ch;
}
[data-design="b"] .ps-service-row__metric {
  align-self: flex-start;
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.15em;
  color: var(--ps-rebar-500); text-transform: uppercase; padding-top: var(--ps-stud);
  white-space: nowrap;
}
@media (max-width: 720px) {
  [data-design="b"] .ps-service-row { grid-template-columns: auto 1fr; gap: var(--ps-plate); }
  [data-design="b"] .ps-service-row__metric { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-services__columns { animation: none; }
  [data-design="b"] .ps-services__airflow-mid { animation: none; }
  [data-design="b"] .ps-service-row[data-reveal="pending"] { opacity: 1; transform: none; }
  [data-design="b"] .ps-service-row[data-reveal="done"] { transition: none; }
}


/* ═══════════════════════════════════════════════════════
   ABOUT / TRUST — scroll-linked thermal wash
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-about {
  position: relative; overflow: hidden;
  padding: var(--ps-storey) clamp(var(--ps-course), 5vw, var(--ps-bay));
  background: var(--ps-concrete-50);
}
[data-design="b"] .ps-about__thermal-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, rgba(13,74,82,0.08) calc((1 - var(--thermal-temp)) * 100%), rgba(122,59,10,0.08) calc(var(--thermal-temp) * 100%)) 100%
  );
}
[data-design="b"] .ps-about__inner { position: relative; z-index: 1; max-width: 900px; }
[data-design="b"] .ps-about__head { margin-bottom: var(--ps-bay); }
[data-design="b"] .ps-about__kicker {
  font-family: var(--ps-font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ps-rebar-500); margin: 0 0 var(--ps-stud);
  padding-bottom: var(--ps-stud); border-bottom: 2px solid var(--ps-rebar-900);
  display: inline-block;
}
[data-design="b"] .ps-about__title {
  font-family: var(--ps-font-display); font-weight: 800;
  font-size: clamp(28px, 4vw, 52px); line-height: 0.95;
  letter-spacing: -0.005em; text-transform: uppercase; margin: 0;
}
[data-design="b"] .ps-about__body p {
  font-family: var(--ps-font-body); font-size: 18px; line-height: 1.6;
  color: var(--ps-rebar-700); max-width: 65ch; margin: 0 0 var(--ps-course);
}
[data-design="b"] .ps-about__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ps-bay); margin-top: var(--ps-bay);
  border-top: 3px solid var(--ps-rebar-900); padding-top: var(--ps-bay);
}
[data-design="b"] .ps-about__stat { display: flex; flex-direction: column; gap: var(--ps-stud); }
[data-design="b"] .ps-about__stat-val {
  font-family: var(--ps-font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px); line-height: 0.9;
  letter-spacing: -0.01em; text-transform: uppercase;
}
[data-design="b"] .ps-about__stat-label {
  font-family: var(--ps-font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--ps-rebar-500); text-transform: uppercase; line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════
   E6 — POINTER — "Structural descent" + thermal-flow register
   PTR-1: wayfinding visual, not clickable
   PTR-2: not a button
   PTR-3: one pointer only, breathing glow ≥4s
   Wrapper opacity:1, height ≥8px at all viewports
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-pointer {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--ps-stud);
  width: 120px; margin: calc(var(--ps-storey) * -0.3) auto var(--ps-course);
  cursor: pointer; padding: var(--ps-bay) 0;
  background: transparent; /* NOT a button */
  opacity: 1; /* MUST be visible — wrapper opacity:1 */
  min-height: 80px; /* bounding-box height ≥8px ensured */
  z-index: 2;
}
/* Thermal-flow hairline warming teal→amber */
[data-design="b"] .ps-pointer__thermal-line {
  width: 2px; height: 40px;
  background: linear-gradient(180deg, var(--thermal-accent) 0%, transparent 100%);
  opacity: 0.6;
  animation: b-ptr-thermal 6s var(--ps-ease-cure) infinite;
}
@keyframes b-ptr-thermal {
  0%, 100% { opacity: 0.4; transform: scaleY(0.85); }
  50%       { opacity: 0.8; transform: scaleY(1.1); }
}
/* Stacked blocks dropping in with stamp easing */
[data-design="b"] .ps-pointer__block {
  display: block; width: 72px; height: 14px;
  background: var(--ps-rebar-900);
  border-left: 4px solid var(--ps-hivis-500);
  opacity: 1; /* resting state opacity:1 — entrance is transform-only */
  animation: b-block-drop var(--ps-dur-press) var(--ps-ease-stamp) both;
}
[data-design="b"] .ps-pointer__block[data-i="1"] { animation-delay: 0.0s; }
[data-design="b"] .ps-pointer__block[data-i="2"] { animation-delay: 0.35s; width: 56px; }
[data-design="b"] .ps-pointer__block[data-i="3"] {
  animation-delay: 0.70s; width: 40px;
  animation-name: b-block-drop-cure;
  animation-duration: 5s;
  animation-timing-function: var(--ps-ease-cure);
  animation-iteration-count: infinite;
}
@keyframes b-block-drop {
  from { transform: translateY(-24px); }
  60%  { transform: translateY(2px); }
  to   { transform: translateY(0); }
}
@keyframes b-block-drop-cure {
  0%  { transform: translateY(-24px); border-left-color: var(--ps-hivis-500); }
  20% { transform: translateY(0); border-left-color: var(--ps-hivis-500); }
  60% { transform: translateY(0); border-left-color: var(--ps-hivis-700); }
  100%{ transform: translateY(0); border-left-color: var(--ps-hivis-500); }
}
[data-design="b"] .ps-pointer__chev {
  color: var(--ps-hivis-500); font-size: 18px; line-height: 1;
  opacity: 1; /* no opacity:0 resting state */
  animation: b-chev-arrive 0.4s var(--ps-ease-set) 1.05s both;
}
@keyframes b-chev-arrive {
  from { transform: translateY(-8px); }
  to   { transform: translateY(0); }
}
[data-design="b"] .ps-pointer__label {
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ps-rebar-700); margin-top: var(--ps-stud);
  opacity: 1; /* no opacity:0 resting state */
  animation: b-chev-arrive 0.4s var(--ps-ease-set) 1.4s both;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-pointer__block,
  [data-design="b"] .ps-pointer__chev,
  [data-design="b"] .ps-pointer__label,
  [data-design="b"] .ps-pointer__thermal-line { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════
   FUNNEL — Tap-qualify funnel #quote
   FN-1: premium multi-step, pour transitions
   FN-3: after proof (hero → services → about → pointer → funnel)
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-funnel {
  position: relative; overflow: hidden;
  padding: var(--ps-storey) clamp(var(--ps-course), 5vw, var(--ps-bay));
  background: var(--ps-concrete-50);
}
/* Airflow accent threading the funnel section */
[data-design="b"] .ps-funnel__airflow-accent {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px; pointer-events: none;
  background: var(--thermal-stream); opacity: 0.5;
}
[data-design="b"] .ps-funnel__head { margin-bottom: var(--ps-bay); }
[data-design="b"] .ps-funnel__kicker {
  font-family: var(--ps-font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ps-rebar-500); margin: 0 0 var(--ps-stud);
  padding-bottom: var(--ps-stud); border-bottom: 2px solid var(--ps-rebar-900);
  display: inline-block;
}
[data-design="b"] .ps-funnel__title {
  font-family: var(--ps-font-display); font-weight: 800;
  font-size: clamp(28px, 5vw, 56px); line-height: 0.95;
  letter-spacing: -0.005em; text-transform: uppercase; margin: 0; max-width: 22ch;
}

/* Ledger */
[data-design="b"] .ps-funnel__ledger {
  background: var(--ps-rebar-900); color: var(--ps-concrete-50);
  padding: var(--ps-course) var(--ps-bay); margin-bottom: var(--ps-course); position: relative;
}
[data-design="b"] .ps-funnel__ledger-id {
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ps-hivis-500); text-transform: uppercase;
}
[data-design="b"] .ps-funnel__ledger-list {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--ps-stud) var(--ps-course); margin: var(--ps-plate) 0 0;
  min-height: 24px; font-family: var(--ps-font-mono); font-size: 13px; letter-spacing: 0.06em;
}
[data-design="b"] .ps-funnel__ledger-list:empty::before {
  content: "(awaiting first answer)"; color: var(--ps-rebar-500);
  font-family: var(--ps-font-body); font-style: italic;
}
[data-design="b"] .ps-funnel__ledger-list dt { text-transform: uppercase; color: var(--ps-hivis-500); margin: 0; }
[data-design="b"] .ps-funnel__ledger-list dd { margin: 0; color: var(--ps-concrete-50); font-weight: 600; }
[data-design="b"] .ps-funnel__ledger-list dd[data-fresh="true"] {
  animation: b-ledger-set var(--ps-dur-press) var(--ps-ease-stamp);
}
@keyframes b-ledger-set {
  0%  { transform: translateY(-8px); color: var(--ps-hivis-500); }
  60% { transform: translateY(2px);  color: var(--ps-hivis-500); }
  100%{ transform: translateY(0);    color: var(--ps-concrete-50); }
}

/* Funnel steps */
[data-design="b"] .ps-funnel__forms {
  background: var(--ps-concrete-50); border: 3px solid var(--ps-rebar-900);
  padding: var(--ps-bay); min-height: 280px; position: relative; overflow: hidden;
}
[data-design="b"] .ps-funnel__step { border: 0; padding: 0; margin: 0; display: none; }
[data-design="b"] .ps-funnel__step[data-active="true"] {
  display: block;
  animation: b-step-pour var(--ps-dur-pour) var(--ps-ease-pour) forwards;
}
@keyframes b-step-pour {
  from { transform: translateY(32px); }
  to   { transform: translateY(0); }
}
[data-design="b"] .ps-funnel__step-id {
  font-family: var(--ps-font-mono); font-size: 14px; letter-spacing: 0.18em;
  color: var(--ps-rebar-500); text-transform: uppercase;
  margin-bottom: var(--ps-course); padding: 0; display: block;
}
[data-design="b"] .ps-funnel__choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ps-plate);
}
[data-design="b"] .ps-funnel__choice {
  font-family: var(--ps-font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 22px); text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--ps-concrete-50); color: var(--ps-rebar-900);
  border: 3px solid var(--ps-rebar-900);
  padding: 22px 20px; text-align: left; cursor: pointer; min-height: 80px;
  transition: background var(--ps-dur-fb) var(--ps-ease-lock), color var(--ps-dur-fb) var(--ps-ease-lock);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-funnel__choice:hover { background: var(--ps-hivis-500); color: var(--ps-rebar-900); }
}
[data-design="b"] .ps-funnel__choice:active { transform: translateY(2px); background: var(--ps-hivis-700); color: var(--ps-concrete-50); }
[data-design="b"] .ps-funnel__choice:focus-visible { outline: 3px solid var(--ps-caution-500); outline-offset: 3px; }

/* Contact action + service note */
[data-design="b"] .ps-funnel__contact-action {
  padding: var(--ps-course); text-align: left;
  animation: b-step-pour var(--ps-dur-pour) var(--ps-ease-pour) forwards;
}
[data-design="b"] .ps-funnel__contact-label {
  font-family: var(--ps-font-body); font-size: 18px; color: var(--ps-rebar-700);
  margin: 0 0 var(--ps-course); line-height: 1.5;
}
[data-design="b"] .ps-funnel__service-note {
  font-family: var(--ps-font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ps-rebar-500); margin-top: var(--ps-plate);
}

/* Funnel nav */
[data-design="b"] .ps-funnel__nav {
  display: flex; align-items: center; gap: var(--ps-course); margin-top: var(--ps-course);
}
[data-design="b"] .ps-funnel__back {
  background: var(--ps-concrete-50); border: 2px solid var(--ps-rebar-900);
  padding: 10px 18px; font-family: var(--ps-font-mono); font-size: 13px;
  letter-spacing: 0.1em; cursor: pointer; min-height: 44px;
}
[data-design="b"] .ps-funnel__progress { flex: 1; height: 4px; background: var(--ps-concrete-200); position: relative; }
[data-design="b"] .ps-funnel__progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform: scaleX(0.333); transform-origin: left;
  background: var(--thermal-accent);
  transition: transform var(--ps-dur-pour) var(--ps-ease-pour);
}
[data-design="b"] .ps-funnel__counter {
  font-family: var(--ps-font-mono); font-size: 14px; letter-spacing: 0.15em; color: var(--ps-rebar-500);
}

/* Approved stamp */
[data-design="b"] .ps-funnel__approved {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ps-course);
}
[data-design="b"] .ps-funnel__approved[hidden] { display: none !important; }
[data-design="b"] .ps-funnel__stamp {
  color: var(--ps-hivis-500); width: 280px; margin-bottom: var(--ps-course);
  animation: b-stamp-press var(--ps-dur-press) var(--ps-ease-stamp) both;
}
[data-design="b"] .ps-funnel__stamp svg { width: 100%; height: auto; }
@keyframes b-stamp-press {
  0%  { transform: scale(1.5) rotate(-5deg); }
  55% { transform: scale(0.95) rotate(-2deg); }
  100%{ transform: scale(1) rotate(-3deg); }
}
[data-design="b"] .ps-funnel__approved-title {
  font-family: var(--ps-font-display); font-weight: 800; font-size: 28px;
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 var(--ps-plate);
}
[data-design="b"] .ps-funnel__approved-body {
  font-family: var(--ps-font-body); font-size: 17px; line-height: 1.55;
  color: var(--ps-rebar-700); margin: 0; max-width: 44ch;
}

@media (max-width: 640px) {
  [data-design="b"] .ps-funnel__choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-funnel__step,
  [data-design="b"] .ps-funnel__contact-action,
  [data-design="b"] .ps-funnel__ledger-list dd,
  [data-design="b"] .ps-funnel__stamp { animation: none !important; opacity: 1; transform: none; }
  [data-design="b"] .ps-funnel__progress-fill { transition: none; }
}


/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-footer {
  background: var(--ps-rebar-900); color: var(--ps-concrete-50);
  padding: 0 0 var(--ps-bay);
}
[data-design="b"] .ps-footer__stripe {
  height: 12px;
  background: repeating-linear-gradient(
    45deg, var(--ps-hivis-500) 0 18px, var(--ps-rebar-900) 18px 36px
  );
  background-size: 51px 12px;
  margin-bottom: var(--ps-bay);
}
[data-design="b"] .ps-footer__inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ps-bay); padding: 0 clamp(var(--ps-course), 5vw, var(--ps-bay));
  max-width: 1280px; margin: 0 auto;
}
[data-design="b"] .ps-footer__name {
  font-family: var(--ps-font-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 var(--ps-plate);
}
[data-design="b"] .ps-footer__phone {
  display: block; font-family: var(--ps-font-display); font-weight: 700;
  font-size: 28px; color: var(--ps-hivis-500); text-decoration: none;
  margin-bottom: var(--ps-plate);
}
[data-design="b"] .ps-footer__area {
  font-family: var(--ps-font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ps-rebar-500); margin: 0;
}
[data-design="b"] .ps-footer__links { display: flex; flex-direction: column; gap: var(--ps-plate); padding-top: var(--ps-stud); }
[data-design="b"] .ps-footer__links a {
  font-family: var(--ps-font-mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--ps-concrete-100); text-decoration: none; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ps-footer__links a:hover { color: var(--ps-hivis-500); }
}
[data-design="b"] .ps-footer__legal {
  font-family: var(--ps-font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ps-rebar-500); line-height: 1.7;
}
[data-design="b"] .ps-footer__legal p { margin: 0 0 var(--ps-stud); }
@media (max-width: 768px) {
  [data-design="b"] .ps-footer__inner { grid-template-columns: 1fr 1fr; }
  [data-design="b"] .ps-footer__legal { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  [data-design="b"] .ps-footer__inner { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   HERO AIRFLOW — Site-wide threading (services / funnel)
   Airflow appears as a site-wide ambient across sections
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-hero__airflow { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   HERO BACKDROP — reduced-motion: freeze to valid static frame
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-hero__thermal-bg { animation: none; opacity: 0.88; }
  [data-design="b"] .ps-hero__stripe { animation: none; }
  [data-design="b"] .ps-header__stripe { animation: none; }
  [data-design="b"] .ps-stream { animation: none; }
  [data-design="b"] .ps-mid-airflow-pulse { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE / RESPONSIVE — no h-scroll 320/390/768/1440
   Scoped to .dq-design to avoid leaking onto chrome-kit modal
   ═══════════════════════════════════════════════════════ */
[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: 560px) {
  [data-design="b"] .ps-logo { font-size: 18px; }
  [data-design="b"] .ps-hero__bay { padding-right: 36px; }
  [data-design="b"] .ps-about__stats { grid-template-columns: 1fr; }
  [data-design="b"] .ps-funnel__forms { padding: var(--ps-course); }
  [data-design="b"] .ps-funnel__ledger { padding: var(--ps-plate); }
}
@media (max-width: 390px) {
  [data-design="b"] .ps-hero__title { font-size: clamp(26px, 8vw, 40px); }
  [data-design="b"] .ps-cta { font-size: 16px; padding: 14px 20px; }
  [data-design="b"] .ps-drawer__nav a { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════
   CONTENT WINDOWED-CENTER — max-width container (principles item 13)
   Visuals may be full-bleed; content reading column may not
   ═══════════════════════════════════════════════════════ */
[data-design="b"] .ps-hero__bay,
[data-design="b"] .ps-services__head,
[data-design="b"] .ps-services__list,
[data-design="b"] .ps-about__inner,
[data-design="b"] .ps-funnel__head,
[data-design="b"] .ps-funnel__ledger,
[data-design="b"] .ps-funnel__forms,
[data-design="b"] .ps-funnel__nav { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* Thermal scroll-warming: --thermal-temp warms progress bar tint on services/funnel */
[data-design="b"] .ps-funnel__progress-fill { background: var(--thermal-accent); }

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