/* =============================================================
   Harbor Construction — Design B (Plan Set)
   Drafted, dimensioned, deliberate — architectural drawing register
   All selectors scoped under [data-design="b"]
   ============================================================= */

/* --- Token system --------------------------------------- */

[data-design="b"] {
  /* Color */
  --ps-vellum:       #EEE9DC;
  --ps-vellum-deep:  #E3DCC7;
  --ps-graphite:     #1A1C20;
  --ps-graphite-soft:#3E4147;
  --ps-muted:        #7C7C72;
  --ps-rule:         #2C2E33;
  --ps-blueprint:    #1A5C8A;
  --ps-redline:      #A4321C;
  --ps-phase-green:  #365C29;
  --ps-phase-yellow: #B58B20;
  --ps-critical:     #8A1B11;

  /* Typography */
  --ps-font-callout: "Bebas Neue", "Impact", sans-serif;
  --ps-font-display: "Barlow Condensed", "Inter", "Helvetica Neue Condensed", sans-serif;
  --ps-font-body:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ps-font-mono:    "JetBrains Mono", monospace;

  --ps-text-dim:    11px;
  --ps-text-cap:    13px;
  --ps-text-body:   15px;
  --ps-text-deck:   20px;
  --ps-text-head:   28px;
  --ps-text-sheet:  clamp(32px, 5vw, 44px);
  --ps-text-cover:  clamp(44px, 8vw, 68px);

  /* Spacing */
  --ps-space-tick:   2px;
  --ps-space-quad:   4px;
  --ps-space-em:     8px;
  --ps-space-cell:  16px;
  --ps-space-margin: 24px;
  --ps-space-gutter: 48px;
  --ps-space-block:  80px;
  --ps-space-sheet:  clamp(88px, 11vw, 136px);

  /* Motion */
  --ps-dur-tick:    120ms;
  --ps-dur-draw:    480ms;
  --ps-dur-sweep:   720ms;
  --ps-dur-flip:    580ms;
  --ps-dur-set:    1100ms;
  --ps-dur-rule:  26000ms;
  --ps-ease-draw:  cubic-bezier(.65, .05, .36, 1);
  --ps-ease-sweep: cubic-bezier(.22, 1, .36, 1);
  --ps-ease-set:   cubic-bezier(.22, .61, .36, 1);
  --ps-ease-flip:  cubic-bezier(.34, .04, .26, 1);

  /* Radius */
  --ps-radius-zero: 0;
  --ps-radius-pin:  50%;

  /* Shadow */
  --ps-shadow-sheet: 2px 2px 0 var(--ps-vellum-deep), 4px 4px 0 var(--ps-rule);
  --ps-shadow-cut:   inset 0 -2px 0 var(--ps-graphite);

  /* Design primary — picked up by Reforge Bar */
  --design-b-primary: #1A5C8A;

  /* Base */
  background: var(--ps-vellum);
  color: var(--ps-graphite);
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-body);
  line-height: 1.6;
}

/* --- ELEMENT 1 · HEADER · The Drafting Bar ------------- */

[data-design="b"] .ps-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ps-vellum);
  border-bottom: 1px solid var(--ps-rule);
  font-family: var(--ps-font-mono);
}
[data-design="b"] .ps-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ps-space-cell);
  padding: var(--ps-space-cell) var(--ps-space-margin);
  max-width: 1280px; margin: 0 auto;
  box-sizing: border-box;
}
[data-design="b"] .ps-logo {
  text-decoration: none; color: var(--ps-graphite);
  display: flex; align-items: baseline; gap: var(--ps-space-cell);
  flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden;
}
[data-design="b"] .ps-logo__mark {
  font-family: var(--ps-font-callout); font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ps-graphite);
  white-space: nowrap; flex-shrink: 0;
}
[data-design="b"] .ps-logo__desc {
  font-family: var(--ps-font-mono); font-size: var(--ps-text-dim);
  color: var(--ps-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
[data-design="b"] .ps-header__sheet {
  margin: 0; font-family: var(--ps-font-mono); font-size: var(--ps-text-dim);
  color: var(--ps-muted); letter-spacing: 0.06em; flex-shrink: 0;
}
[data-design="b"] .ps-header__sheet-no { color: var(--ps-graphite); }

/* Hamburger — keynote-tag */
[data-design="b"] .ps-hamburger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 10px;
  background: transparent; border: 1px solid var(--ps-graphite); border-radius: 0;
  color: var(--ps-blueprint); cursor: pointer; flex-shrink: 0;
  transition: background var(--ps-dur-tick) var(--ps-ease-set), color var(--ps-dur-tick) var(--ps-ease-set),
              border-color var(--ps-dur-tick) var(--ps-ease-set);
}
[data-design="b"] .ps-hamburger:hover,
[data-design="b"] .ps-hamburger:focus-visible {
  background: var(--ps-graphite); color: var(--ps-vellum); border-color: var(--ps-graphite);
}
[data-design="b"] .ps-hamburger:focus-visible { outline: 2px solid var(--ps-blueprint); outline-offset: 4px; }
[data-design="b"] .ps-hamburger__line {
  display: block; width: 100%; height: 1px; background: currentColor; border-radius: 0;
}

/* Dimension animation */
[data-design="b"] .ps-header__dim {
  position: relative; height: 18px; border-top: 1px solid color-mix(in srgb, var(--ps-rule) 30%, transparent);
  max-width: 1280px; margin: 0 auto;
}
[data-design="b"] .ps-header__dim-tick {
  position: absolute; top: 0; width: 1px; height: 8px;
  background: var(--ps-blueprint); opacity: 0;
  animation: ps-dim-tick var(--ps-dur-rule) var(--ps-ease-draw) infinite;
}
[data-design="b"] .ps-header__dim-tick--l { left: 24px; }
[data-design="b"] .ps-header__dim-tick--r { right: 24px; }
[data-design="b"] .ps-header__dim-line {
  position: absolute; top: 7px; left: 24px; right: 24px;
  height: 1px; background: var(--ps-blueprint);
  transform-origin: left center; transform: scaleX(0);
  animation: ps-dim-line var(--ps-dur-rule) var(--ps-ease-draw) infinite;
}
[data-design="b"] .ps-header__dim-value {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  background: var(--ps-vellum); padding: 0 8px;
  font-family: var(--ps-font-mono); font-size: var(--ps-text-dim);
  color: var(--ps-blueprint); letter-spacing: 0.06em;
  opacity: 0; animation: ps-dim-value var(--ps-dur-rule) var(--ps-ease-draw) infinite;
  white-space: nowrap;
}
@keyframes ps-dim-tick {
  0%, 4%   { opacity: 0; } 8%, 50%  { opacity: 1; }
  54%, 96% { opacity: 1; } 100%     { opacity: 0; }
}
@keyframes ps-dim-line {
  0%, 8%    { transform: scaleX(0); } 40%, 60% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}
@keyframes ps-dim-value {
  0%, 30%  { opacity: 0; } 40%, 60% { opacity: 1; } 70%, 100% { opacity: 0; }
}

/* Off-canvas panel */
[data-design="b"] .ps-nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, calc(100vw - 32px));
  background: var(--ps-vellum); border-left: 2px solid var(--ps-graphite);
  padding: var(--ps-space-margin); z-index: 200;
  transform: translateX(100%);
  transition: transform var(--ps-dur-flip) cubic-bezier(0.4, 0, 0.2, 1),
              visibility var(--ps-dur-flip) cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
}
[data-design="b"] .ps-nav-panel.is-open { transform: translateX(0); visibility: visible; }
[data-design="b"] .ps-nav-panel__close {
  display: block; margin: 0 0 var(--ps-space-margin) auto;
  width: 32px; height: 32px; background: transparent;
  border: 1px solid var(--ps-graphite); border-radius: 0;
  color: var(--ps-graphite); font-family: var(--ps-font-mono); font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0;
  transition: background var(--ps-dur-tick) var(--ps-ease-set), color var(--ps-dur-tick) var(--ps-ease-set);
}
[data-design="b"] .ps-nav-panel__close:hover,
[data-design="b"] .ps-nav-panel__close:focus-visible { background: var(--ps-graphite); color: var(--ps-vellum); }
[data-design="b"] .ps-nav-panel__close:focus-visible { outline: 2px solid var(--ps-blueprint); outline-offset: 4px; }
[data-design="b"] .ps-nav-panel__list { list-style: none; margin: 0; padding: 0; }
[data-design="b"] .ps-nav-panel__list li { border-bottom: 1px solid var(--ps-rule); }
[data-design="b"] .ps-nav-panel__list li:first-child { border-top: 1px solid var(--ps-rule); }
[data-design="b"] .ps-nav-panel__list a {
  position: relative; display: block;
  font-family: var(--ps-font-callout); font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-graphite); text-decoration: none;
  padding: var(--ps-space-cell) 0 var(--ps-space-cell) 28px;
  transition: color 220ms var(--ps-ease-set), padding-left 220ms var(--ps-ease-set);
}
[data-design="b"] .ps-nav-panel__list a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px; background: var(--ps-blueprint);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms var(--ps-ease-draw);
}
[data-design="b"] .ps-nav-panel__list a:hover,
[data-design="b"] .ps-nav-panel__list a:focus-visible { color: var(--ps-blueprint); padding-left: 36px; }
[data-design="b"] .ps-nav-panel__list a:hover::before,
[data-design="b"] .ps-nav-panel__list a:focus-visible::before { transform: scaleX(1); }
[data-design="b"] .ps-nav-panel__list a:focus-visible { outline: 2px solid var(--ps-blueprint); outline-offset: 2px; }

@media (max-width: 560px) {
  [data-design="b"] .ps-logo__desc { display: none; }
  [data-design="b"] .ps-header__sheet { display: none; }
  [data-design="b"] .ps-nav-panel { width: 100%; border-left: none; }
}

/* --- HERO / COVER SHEET --------------------------------- */

[data-design="b"] .ps-hero {
  border-bottom: 2px solid var(--ps-graphite);
  background: var(--ps-vellum-deep);
}
[data-design="b"] .ps-hero__cover {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-space-gutter);
  box-sizing: border-box;
  border: 2px solid var(--ps-graphite);
  border-top: none;
}
@media (min-width: 768px) {
  [data-design="b"] .ps-hero__cover { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
[data-design="b"] .ps-hero__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-hero__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-cover);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 var(--ps-space-margin);
  color: var(--ps-graphite);
  letter-spacing: -0.01em;
}
[data-design="b"] .ps-hero__deck {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-deck);
  line-height: 1.55;
  color: var(--ps-graphite-soft);
  margin: 0 0 var(--ps-space-gutter);
  max-width: 52ch;
}
[data-design="b"] .ps-hero__actions {
  display: flex;
  gap: var(--ps-space-margin);
  flex-wrap: wrap;
  padding-bottom: var(--ps-space-margin);
}

/* ELEMENT 2 · DIMENSION STAMP CTA */
[data-design="b"] .ps-cta {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-vellum);
  background: var(--ps-graphite);
  border: 1px solid var(--ps-graphite);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ps-dur-tick) var(--ps-ease-set), background var(--ps-dur-tick) var(--ps-ease-set);
}
[data-design="b"] .ps-cta--ref {
  background: var(--ps-vellum);
  color: var(--ps-graphite);
  border-color: var(--ps-graphite);
}
[data-design="b"] .ps-cta--ref:hover { background: var(--ps-graphite-soft); color: var(--ps-vellum); }
[data-design="b"] .ps-cta__arrow { transition: transform 200ms var(--ps-ease-set); }
[data-design="b"] .ps-cta:hover .ps-cta__arrow,
[data-design="b"] .ps-cta:focus-visible .ps-cta__arrow { transform: translateX(4px); }
[data-design="b"] .ps-cta__dim {
  position: absolute; left: 0; right: 0; bottom: -14px; height: 12px;
  pointer-events: none; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 4px;
  opacity: 0; transition: opacity 220ms var(--ps-ease-set);
}
[data-design="b"] .ps-cta:hover .ps-cta__dim,
[data-design="b"] .ps-cta:focus-visible .ps-cta__dim { opacity: 1; }
[data-design="b"] .ps-cta__dim-tick { width: 1px; height: 8px; background: var(--ps-blueprint); justify-self: center; }
[data-design="b"] .ps-cta__dim-line {
  height: 1px; background: var(--ps-blueprint);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 320ms var(--ps-ease-draw);
}
[data-design="b"] .ps-cta:hover .ps-cta__dim-line,
[data-design="b"] .ps-cta:focus-visible .ps-cta__dim-line { transform: scaleX(1); transition-delay: 80ms; }
[data-design="b"] .ps-cta__dim-value {
  grid-column: 2; justify-self: center;
  font-family: var(--ps-font-mono); font-size: var(--ps-text-dim);
  color: var(--ps-blueprint); background: var(--ps-vellum);
  padding: 0 6px; opacity: 0;
  transition: opacity 200ms var(--ps-ease-set) 320ms;
}
[data-design="b"] .ps-cta:hover .ps-cta__dim-value,
[data-design="b"] .ps-cta:focus-visible .ps-cta__dim-value { opacity: 1; }
[data-design="b"] .ps-cta:active { transform: translate(1px, 1px); box-shadow: var(--ps-shadow-cut); }
[data-design="b"] .ps-cta:focus-visible { outline: 2px solid var(--ps-blueprint); outline-offset: 4px; }

/* Hero title block */
[data-design="b"] .ps-hero__titleblock {
  background: var(--ps-vellum);
  border: 2px solid var(--ps-graphite);
  padding: var(--ps-space-margin);
}
[data-design="b"] .ps-hero__tb-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ps-space-em) var(--ps-space-cell);
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-dim);
  margin: 0 0 var(--ps-space-margin);
  border-bottom: 1px solid var(--ps-rule);
  padding-bottom: var(--ps-space-margin);
}
[data-design="b"] .ps-hero__tb-data dt { color: var(--ps-muted); text-transform: uppercase; letter-spacing: 0.06em; }
[data-design="b"] .ps-hero__tb-data dd { margin: 0; color: var(--ps-graphite); }
[data-design="b"] .ps-hero__tb-phase {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-phase-yellow);
  border: 1px solid var(--ps-phase-yellow);
  padding: 4px 8px;
  display: inline-block;
}

/* --- ELEMENT 3 · SHEET SET (Ambient A) ----------------- */

[data-design="b"] .ps-sheets {
  background: var(--ps-vellum);
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
[data-design="b"] .ps-sheets__head { margin-bottom: var(--ps-space-block); max-width: 60ch; }
[data-design="b"] .ps-sheets__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-sheets__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-sheet);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  color: var(--ps-graphite);
}
[data-design="b"] .ps-sheets__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ps-space-gutter); }
[data-design="b"] .ps-sheet {
  background: var(--ps-vellum-deep);
  border: 2px solid var(--ps-graphite);
  padding: var(--ps-space-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-space-cell);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ps-dur-set) var(--ps-ease-set), transform var(--ps-dur-set) var(--ps-ease-set);
}
@media (min-width: 768px) {
  [data-design="b"] .ps-sheet { grid-template-columns: 1.4fr 1fr; }
}
[data-design="b"] .ps-sheet--revealed { opacity: 1; transform: translateY(0); }
[data-design="b"] .ps-sheet__titleblock {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "no name" "meta meta" "phase phase";
  gap: var(--ps-space-em);
  align-items: baseline;
  padding-bottom: var(--ps-space-cell);
  border-bottom: 1px solid var(--ps-rule);
  grid-column: 1 / -1;
}
[data-design="b"] .ps-sheet__no { grid-area: no; font-family: var(--ps-font-callout); font-size: var(--ps-text-cap); letter-spacing: 0.08em; color: var(--ps-blueprint); }
[data-design="b"] .ps-sheet__name { grid-area: name; font-family: var(--ps-font-display); font-size: var(--ps-text-head); font-weight: 600; margin: 0; color: var(--ps-graphite); }
[data-design="b"] .ps-sheet__meta { grid-area: meta; display: flex; gap: var(--ps-space-cell); font-family: var(--ps-font-mono); font-size: var(--ps-text-dim); margin: 0; flex-wrap: wrap; }
[data-design="b"] .ps-sheet__meta dt { color: var(--ps-muted); text-transform: uppercase; letter-spacing: 0.06em; }
[data-design="b"] .ps-sheet__meta dd { margin: 0; color: var(--ps-graphite); }
[data-design="b"] .ps-sheet__phase {
  grid-area: phase;
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-phase-green);
  border: 1px solid var(--ps-phase-green);
  padding: 4px 8px;
  justify-self: start;
  margin-top: var(--ps-space-em);
  display: inline-block;
}
[data-design="b"] .ps-sheet--revealed .ps-sheet__phase {
  animation: ps-sheet-phase 13s var(--ps-ease-set) infinite;
}
@keyframes ps-sheet-phase {
  0%, 100% { opacity: 1; } 50% { opacity: .6; }
}
[data-design="b"] .ps-sheet__iso { margin: 0; color: var(--ps-rule); }
[data-design="b"] .ps-sheet__iso-svg { width: 100%; height: auto; max-width: 320px; display: block; }
[data-design="b"] .ps-sheet__iso-svg path {
  fill: none;
  stroke: var(--ps-blueprint);
  stroke-width: 1.5;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset var(--ps-dur-set) var(--ps-ease-draw);
}
[data-design="b"] .ps-sheet--revealed .ps-sheet__iso-svg path { stroke-dashoffset: 0; }
[data-design="b"] .ps-sheet__notes { font-family: var(--ps-font-body); font-size: var(--ps-text-body); line-height: 1.6; color: var(--ps-graphite-soft); margin: 0; grid-column: 1 / -1; }

/* --- ELEMENT 4 · SECTION CUT (Ambient B) --------------- */

[data-design="b"] .ps-cut {
  background: var(--ps-vellum-deep);
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
[data-design="b"] .ps-cut__head { margin-bottom: var(--ps-space-block); }
[data-design="b"] .ps-cut__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-cut__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-sheet);
  font-weight: 600;
  margin: 0;
  color: var(--ps-graphite);
  line-height: 1.05;
}
[data-design="b"] .ps-cut__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ps-space-gutter); }
@media (min-width: 768px) {
  [data-design="b"] .ps-cut__list { grid-template-columns: 1fr 1fr; }
}
[data-design="b"] .ps-cut__figure { margin: 0; position: relative; }
[data-design="b"] .ps-cut__image {
  width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #3a5a7a 0%, #2b4a5e 50%, #1a3245 100%);
  filter: saturate(0.6);
  transition: filter var(--ps-dur-sweep) var(--ps-ease-sweep) 200ms;
}
[data-design="b"] .ps-cut__image--2 { background: linear-gradient(160deg, #4a6e5b 0%, #2d5240 100%); }
[data-design="b"] .ps-cut__image--3 { background: linear-gradient(135deg, #6a5a4a 0%, #4a3a2a 100%); }
[data-design="b"] .ps-cut__image--4 { background: linear-gradient(160deg, #3a6a8a 0%, #1a4a5a 100%); }
[data-design="b"] .ps-cut__item--cut .ps-cut__image { filter: saturate(1); }
[data-design="b"] .ps-cut__line {
  position: absolute; left: 0; top: 50%; height: 2px;
  background: var(--ps-graphite);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--ps-dur-sweep) var(--ps-ease-sweep);
  width: 100%;
}
[data-design="b"] .ps-cut__item--cut .ps-cut__line { transform: scaleX(1); }
[data-design="b"] .ps-cut__flag {
  position: absolute; right: 8px; top: calc(50% - 14px);
  font-family: var(--ps-font-callout); font-size: var(--ps-text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-vellum); background: var(--ps-blueprint); padding: 2px 8px;
  opacity: 0;
  transition: opacity 200ms var(--ps-ease-set) var(--ps-dur-sweep);
}
[data-design="b"] .ps-cut__item--cut .ps-cut__flag { opacity: 1; }
[data-design="b"] .ps-cut__caption {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--ps-space-cell); margin-top: var(--ps-space-cell);
  font-family: var(--ps-font-mono); font-size: var(--ps-text-dim); letter-spacing: 0.06em;
}
[data-design="b"] .ps-cut__num { color: var(--ps-blueprint); text-transform: uppercase; }
[data-design="b"] .ps-cut__name { color: var(--ps-graphite); font-family: var(--ps-font-display); font-size: var(--ps-text-body); font-weight: 600; }
[data-design="b"] .ps-cut__meta { color: var(--ps-muted); text-align: right; text-transform: uppercase; }

/* --- PROCESS ------------------------------------------- */

[data-design="b"] .ps-process {
  background: var(--ps-vellum);
  border-top: 2px solid var(--ps-graphite);
}
[data-design="b"] .ps-process__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  box-sizing: border-box;
}
[data-design="b"] .ps-process__head { margin-bottom: var(--ps-space-block); }
[data-design="b"] .ps-process__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-process__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-sheet);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--ps-space-cell);
  color: var(--ps-graphite);
}
[data-design="b"] .ps-process__deck {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-body);
  line-height: 1.6;
  color: var(--ps-graphite-soft);
  margin: 0;
  max-width: 60ch;
}
[data-design="b"] .ps-process__steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
[data-design="b"] .ps-process__step {
  padding: var(--ps-space-margin) 0;
  border-bottom: 1px solid var(--ps-rule);
}
[data-design="b"] .ps-step__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ps-space-cell);
  align-items: center;
  margin-bottom: var(--ps-space-em);
}
[data-design="b"] .ps-step__no {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-blueprint);
}
[data-design="b"] .ps-step__name {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-head);
  font-weight: 600;
  color: var(--ps-graphite);
  margin: 0;
}
[data-design="b"] .ps-step__phase {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-phase-yellow);
  border: 1px solid var(--ps-phase-yellow);
  padding: 2px 6px;
  white-space: nowrap;
}
[data-design="b"] .ps-step__body {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-body);
  line-height: 1.6;
  color: var(--ps-graphite-soft);
  margin: 0;
  max-width: 72ch;
  padding-left: calc(var(--ps-text-dim) + var(--ps-space-cell) + var(--ps-space-cell));
}

/* --- ABOUT --------------------------------------------- */

[data-design="b"] .ps-about {
  background: var(--ps-vellum-deep);
  border-top: 2px solid var(--ps-graphite);
}
[data-design="b"] .ps-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  box-sizing: border-box;
}
[data-design="b"] .ps-about__head { margin-bottom: var(--ps-space-block); }
[data-design="b"] .ps-about__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-about__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-sheet);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--ps-space-cell);
  color: var(--ps-graphite);
}
[data-design="b"] .ps-about__deck {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-body);
  line-height: 1.6;
  color: var(--ps-graphite-soft);
  margin: 0;
  max-width: 68ch;
}
[data-design="b"] .ps-about__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-space-gutter);
  border: 2px solid var(--ps-graphite);
  padding: var(--ps-space-margin);
  background: var(--ps-vellum);
}
@media (min-width: 600px) {
  [data-design="b"] .ps-about__block { grid-template-columns: 1fr 1fr 1fr; }
}
[data-design="b"] .ps-about__col-label {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
  border-bottom: 1px solid var(--ps-rule);
  padding-bottom: var(--ps-space-em);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-about__col-val {
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-cap);
  letter-spacing: 0.06em;
  color: var(--ps-graphite);
  margin: 0 0 var(--ps-space-em);
}

/* --- ELEMENT 5 · FUNNEL -------------------------------- */

[data-design="b"] .ps-funnel {
  background: var(--ps-vellum);
  padding: var(--ps-space-sheet) var(--ps-space-margin);
  max-width: 880px;
  margin: 0 auto;
  box-sizing: border-box;
}
[data-design="b"] .ps-funnel__kicker {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-blueprint);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-funnel__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-text-sheet);
  font-weight: 600;
  margin: 0 0 var(--ps-space-cell);
  color: var(--ps-graphite);
  line-height: 1.05;
}
[data-design="b"] .ps-funnel__deck {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-body);
  line-height: 1.6;
  color: var(--ps-graphite-soft);
  margin: 0 0 var(--ps-space-margin);
}
[data-design="b"] .ps-funnel__progress {
  display: flex; gap: var(--ps-space-em); list-style: none; padding: 0;
  margin: 0 0 var(--ps-space-margin); flex-wrap: wrap;
  font-family: var(--ps-font-callout); font-size: var(--ps-text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
[data-design="b"] .ps-funnel__progress li {
  padding: 4px 10px; border: 1px solid var(--ps-rule); color: var(--ps-muted);
}
[data-design="b"] .ps-funnel__progress li[aria-current="true"] {
  border-color: var(--ps-graphite); color: var(--ps-graphite);
}
[data-design="b"] .ps-funnel__progress li.ps-funnel__progress-item--issued {
  border-color: var(--ps-phase-green); color: var(--ps-phase-green);
}
[data-design="b"] .ps-funnel__form { position: relative; perspective: 1200px; }
[data-design="b"] .ps-funnel__step {
  background: var(--ps-vellum-deep);
  border: 2px solid var(--ps-graphite);
  padding: var(--ps-space-margin);
  margin: 0 0 var(--ps-space-cell);
  transform-origin: left center;
  transition: transform var(--ps-dur-flip) var(--ps-ease-flip),
              opacity var(--ps-dur-flip) var(--ps-ease-flip);
}
[data-design="b"] .ps-funnel__step[hidden] {
  display: block;
  transform: rotateY(-14deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
  inset: 0;
}
[data-design="b"] .ps-funnel__step.ps-funnel__step--issued {
  transform: rotateY(14deg);
  opacity: 0;
  pointer-events: none;
}
[data-design="b"] .ps-funnel__titleblock {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ps-space-cell);
  align-items: baseline;
  padding-bottom: var(--ps-space-cell);
  border-bottom: 1px solid var(--ps-rule);
  margin-bottom: var(--ps-space-margin);
}
[data-design="b"] .ps-funnel__step-no {
  font-family: var(--ps-font-callout); font-size: var(--ps-text-cap);
  letter-spacing: 0.08em; color: var(--ps-blueprint);
}
[data-design="b"] .ps-funnel__legend {
  font-family: var(--ps-font-display); font-size: var(--ps-text-head);
  font-weight: 600; padding: 0; color: var(--ps-graphite); line-height: 1.2;
}
[data-design="b"] .ps-funnel__phase {
  font-family: var(--ps-font-callout); font-size: var(--ps-text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-phase-yellow); border: 1px solid var(--ps-phase-yellow);
  padding: 2px 6px;
}
[data-design="b"] .ps-funnel__choices { display: grid; gap: var(--ps-space-em); margin: 0 0 var(--ps-space-margin); }
[data-design="b"] .ps-funnel__choice {
  display: flex; align-items: baseline; gap: var(--ps-space-cell);
  padding: var(--ps-space-cell); background: var(--ps-vellum);
  border: 1px solid var(--ps-rule); cursor: pointer;
  font-family: var(--ps-font-body); font-size: var(--ps-text-body);
  color: var(--ps-graphite);
  transition: border-color 220ms var(--ps-ease-set);
}
[data-design="b"] .ps-funnel__choice:hover { border-color: var(--ps-blueprint); }
[data-design="b"] .ps-funnel__choice input { accent-color: var(--ps-blueprint); }
[data-design="b"] .ps-funnel__choice:has(input:checked) { border-color: var(--ps-blueprint); background: rgba(26, 92, 138, 0.06); }
[data-design="b"] .ps-funnel__field { display: block; margin: 0 0 var(--ps-space-margin); }
[data-design="b"] .ps-funnel__field-label {
  display: block;
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-graphite);
  margin-bottom: var(--ps-space-em);
}
[data-design="b"] .ps-funnel__field-input {
  width: 100%; padding: 10px 12px;
  background: var(--ps-vellum); border: 1px solid var(--ps-rule);
  border-radius: 0; font-family: var(--ps-font-mono);
  font-size: var(--ps-text-body); color: var(--ps-graphite); box-sizing: border-box;
  transition: border-color 120ms var(--ps-ease-set);
}
[data-design="b"] .ps-funnel__field-input:focus {
  outline: none; border-color: var(--ps-blueprint); border-width: 2px; padding: 9px 11px;
}
[data-design="b"] .ps-funnel__keynote {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-cap);
  font-style: italic;
  color: var(--ps-graphite-soft);
  border-left: 2px solid var(--ps-blueprint);
  padding-left: var(--ps-space-cell);
  margin: var(--ps-space-cell) 0;
}
[data-design="b"] .ps-funnel__next {
  font-family: var(--ps-font-callout); font-size: var(--ps-text-cap);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-vellum); background: var(--ps-graphite);
  border: none; border-radius: 0;
  padding: 12px 24px; cursor: pointer;
  transition: transform var(--ps-dur-tick) var(--ps-ease-set);
}
[data-design="b"] .ps-funnel__next:hover { background: var(--ps-graphite-soft); }
[data-design="b"] .ps-funnel__next:active { transform: translate(1px, 1px); box-shadow: var(--ps-shadow-cut); }
[data-design="b"] .ps-funnel__next:focus-visible { outline: 2px solid var(--ps-blueprint); outline-offset: 4px; }
[data-design="b"] .ps-funnel__submit { background: var(--ps-blueprint); }
[data-design="b"] .ps-funnel__submit:hover { background: #1a4e7a; }
[data-design="b"] .ps-funnel__confirm {
  background: var(--ps-vellum); border: 2px solid var(--ps-phase-green);
  padding: var(--ps-space-margin); margin-top: var(--ps-space-cell);
}
[data-design="b"] .ps-funnel__confirm[hidden] { display: none; }
[data-design="b"] .ps-funnel__stamp {
  font-family: var(--ps-font-callout); font-size: var(--ps-text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-phase-green); border: 1px solid var(--ps-phase-green);
  padding: 4px 10px; display: inline-block; margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-funnel__confirm-title {
  font-family: var(--ps-font-display); font-size: var(--ps-text-head);
  font-weight: 600; color: var(--ps-graphite);
  margin: 0 0 var(--ps-space-cell);
}
[data-design="b"] .ps-funnel__confirm-body {
  font-family: var(--ps-font-body); font-size: var(--ps-text-body);
  line-height: 1.6; color: var(--ps-graphite-soft); margin: 0;
}

/* --- FOOTER -------------------------------------------- */

[data-design="b"] .ps-footer {
  background: var(--ps-graphite);
  color: var(--ps-vellum);
  border-top: 2px solid var(--ps-graphite);
  padding: var(--ps-space-gutter) 0;
}
[data-design="b"] .ps-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--ps-space-margin);
  box-sizing: border-box;
}
[data-design="b"] .ps-footer__titleblock {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-space-gutter);
  border: 1px solid rgba(238,233,220,0.2);
  padding: var(--ps-space-margin);
  margin-bottom: var(--ps-space-margin);
}
@media (min-width: 640px) {
  [data-design="b"] .ps-footer__titleblock { grid-template-columns: auto 1fr auto; align-items: start; }
}
[data-design="b"] .ps-footer__firm {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-vellum);
  margin: 0 0 var(--ps-space-em);
}
[data-design="b"] .ps-footer__tag {
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-dim);
  color: rgba(238,233,220,0.6);
  margin: 0;
}
[data-design="b"] .ps-footer__tb-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ps-space-em) var(--ps-space-cell);
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-dim);
  margin: 0;
}
[data-design="b"] .ps-footer__tb-data dt { color: rgba(238,233,220,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
[data-design="b"] .ps-footer__tb-data dd { margin: 0; color: var(--ps-vellum); }
[data-design="b"] .ps-footer__phase {
  font-family: var(--ps-font-callout);
  font-size: var(--ps-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-phase-green);
  border: 1px solid var(--ps-phase-green);
  padding: 4px 8px;
  height: fit-content;
  align-self: start;
}
[data-design="b"] .ps-footer__legal {
  font-family: var(--ps-font-body);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(238,233,220,0.4);
  margin: 0;
  max-width: 80ch;
}

/* --- Mobile -------------------------------------------- */

@media (max-width: 560px) {
  [data-design="b"] .ps-funnel { padding: var(--ps-space-block) var(--ps-space-cell); }
  [data-design="b"] .ps-funnel__step { padding: var(--ps-space-cell); }
  [data-design="b"] .ps-funnel__titleblock { grid-template-columns: 1fr; }
  [data-design="b"] .ps-step__header { grid-template-columns: auto 1fr; }
  [data-design="b"] .ps-step__phase { display: none; }
}

/* --- Reduced motion ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ps-nav-panel {
    transition: visibility var(--ps-dur-flip) linear;
    transform: none; opacity: 0; pointer-events: none;
  }
  [data-design="b"] .ps-nav-panel.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
  [data-design="b"] .ps-nav-panel__list a { transition: none; }
  [data-design="b"] .ps-nav-panel__list a::before { transition: none; transform: scaleX(1); }
  [data-design="b"] .ps-cta, .ps-cta__dim, .ps-cta__dim-line, .ps-cta__dim-value, .ps-cta__arrow { transition: none !important; }
  [data-design="b"] .ps-cta:hover .ps-cta__dim-line { transform: scaleX(1); }
  [data-design="b"] .ps-sheet { transition: opacity 200ms linear; transform: none; }
  [data-design="b"] .ps-sheet--revealed .ps-sheet__phase { animation: none; }
  [data-design="b"] .ps-sheet__iso-svg path { transition: none; stroke-dashoffset: 0; }
  [data-design="b"] .ps-cut__image { transition: none; filter: saturate(1); }
  [data-design="b"] .ps-cut__line { transition: none; transform: scaleX(1); }
  [data-design="b"] .ps-cut__flag { transition: none; opacity: 1; }
  [data-design="b"] .ps-funnel__step { transition: opacity 200ms linear; transform: none; }
  [data-design="b"] .ps-funnel__step[hidden] { transform: none; }
  [data-design="b"] .ps-header__dim * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   MOBILE OVERFLOW — HARD REQUIREMENTS
   ============================================================= */

[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;
}