/* ============================================================
   Design B — The Corkboard × Painting Trade
   painting-west-jordan / design-b
   All selectors scoped to [data-design="b"].dq-design
   Keyframes prefixed cork-b- to avoid collision
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&family=Public+Sans:wght@400;500;600&family=Caveat:wght@400;600&family=JetBrains+Mono:wght@400&display=swap');

/* ============================================================
   TOKEN SYSTEM — design-b scope
   Remapped from [data-design="b"] → [data-design="b"].dq-design
   Painting trade: warm Utah-clay palette variation for Site B
   distinctness — deeper cork, dusty-sage accent pins
   ============================================================ */
[data-design="b"] {
  /* Color — warm Utah clay / sage variant (visually DISTINCT from Site A) */
  --cork:        #C4936A;
  --cork-deep:   #A87A52;
  --paper:       #FAF6EA;
  --paper-deep:  #EDE5CB;
  --ink:         #1A1814;
  --ink-soft:    #3F392C;
  --muted:       #7B7158;
  --rule:        #2C2820;
  --pin-red:     #C73223;
  --pin-blue:    #2B5A8A;
  --pin-green:   #3D7C42;
  --pin-yellow:  #D4A325;
  --critical:    #7C1A12;

  /* Painting accent: a warm sage-wash for the wet-edge motif */
  --wash-a:      #8FA87A;
  --wash-b:      #6B8C5F;
  --swatch-1:    #B5C4A2;
  --swatch-2:    #D4C58A;
  --swatch-3:    #A89B78;
  --swatch-4:    #C4936A;

  /* Type */
  --font-sharpie:    "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --font-typewriter: "Special Elite", "Courier Prime", monospace;
  --font-body:       "Public Sans", system-ui, sans-serif;
  --font-hand:       "Caveat", "Homemade Apple", cursive;
  --font-data:       "JetBrains Mono", "Söhne Mono", monospace;

  /* Spacing */
  --space-pin:      2px;
  --space-em:       8px;
  --space-card:     16px;
  --space-flyer:    28px;
  --space-stack:    40px;
  --space-board:    72px;
  --space-bulletin: 120px;

  /* Motion */
  --dur-tick:    120ms;
  --dur-pin:     280ms;
  --dur-tear:    420ms;
  --dur-flutter: 640ms;
  --dur-staple:  320ms;
  --dur-ambient: 14000ms;
  --ease-pin:    cubic-bezier(.34, 1.4, .64, 1);
  --ease-tear:   cubic-bezier(.65, .05, .36, 1);
  --ease-flutter:cubic-bezier(.45, .05, .55, .95);
  --ease-snap:   cubic-bezier(.7, 0, .84, 0);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);

  /* Radius */
  --radius-zero: 0;
  --radius-pin:  50%;
  --radius-tab:  2px;

  /* Shadow */
  --shadow-card:   2px 3px 0 rgba(45,35,18,.14), 0 0 0 1px var(--rule);
  --shadow-staple: inset 0 0 0 1px var(--rule), 1px 1px 0 rgba(0,0,0,.06);
  --shadow-curl:   -2px -2px 6px rgba(0,0,0,.08) inset;
  --shadow-press:  inset 0 2px 0 rgba(0,0,0,.12);

  /* Cork texture — layered radial dots, pure CSS */
  --cork-texture:
    radial-gradient(circle at 20% 30%, rgba(110,75,30,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(85,58,20,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgba(130,95,45,.09) 0 2px, transparent 3px);

  /* Design-b primary token (required by slot-scope spec) */
  --design-b-primary: var(--cork);

  /* Reset basics */
  box-sizing: border-box;
}

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

/* Base reset within scope */
[data-design="b"].dq-design * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[data-design="b"].dq-design body,
[data-design="b"] {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* Shared inner container — windowed center, never flush edges */
[data-design="b"] .cork-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 48px);
  width: 100%;
}


/* ============================================================
   ELEMENT 1 — Animated Header — Sharpie Banner
   Three things: logo tag, atmospheric sheen animation, hamburger
   NO backdrop-filter:blur on sticky header (PERF-6 guard)
   ============================================================ */
[data-design="b"] .cork-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
}

[data-design="b"] .cork-header * {
  box-sizing: border-box;
}

/* Atmospheric cork strip — the one ambient layer on the header */
[data-design="b"] .cork-header__cork {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--cork-deep);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  border-bottom: 1.5px solid var(--rule);
  /* NO backdrop-filter:blur — PERF-6 guard */
}

/* Slow sheen drift — H-3: ≥18s cycle */
[data-design="b"] .cork-header__cork::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 32%,
    rgba(255,248,220,.18) 50%,
    transparent 68%
  );
  background-size: 300% 100%;
  animation: cork-b-header-sheen 26s linear infinite;
}

@keyframes cork-b-header-sheen {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

[data-design="b"] .cork-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-card);
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px clamp(12px, 4vw, 28px);
}

/* Logo tag */
[data-design="b"] .cork-logo {
  text-decoration: none;
  display: inline-block;
}

[data-design="b"] .cork-logo__tag {
  position: relative;
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 16px 10px;
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  rotate: -1.5deg;
}

[data-design="b"] .cork-logo__pin {
  position: absolute;
  top: -5px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pin);
  background: var(--pin-red);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.3);
}

[data-design="b"] .cork-logo__mark {
  display: block;
  font-family: var(--font-sharpie);
  font-size: clamp(16px, 3.8vw, 24px);
  line-height: 1.1;
  letter-spacing: .3px;
}

[data-design="b"] .cork-logo__underline {
  display: block;
  width: 100%;
  height: 9px;
  margin-top: -2px;
  overflow: visible;
}

[data-design="b"] .cork-logo__underline path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: cork-b-underline-draw 720ms var(--ease-tear) 180ms forwards;
}

@keyframes cork-b-underline-draw {
  to { stroke-dashoffset: 0; }
}

/* Hamburger */
[data-design="b"] .cork-burger {
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-tab);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

[data-design="b"] .cork-burger span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-tick), opacity var(--dur-tick);
  display: block;
}

[data-design="b"] .cork-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

[data-design="b"] .cork-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

[data-design="b"] .cork-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

[data-design="b"] .cork-burger:focus-visible {
  outline: 2px solid var(--pin-blue);
  outline-offset: 3px;
}

/* Drawer */
[data-design="b"] .cork-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,16,8,.48);
  display: grid;
  place-items: start center;
  padding: 8vh 16px 16px;
}

[data-design="b"] .cork-drawer[hidden] {
  display: none;
}

[data-design="b"] .cork-drawer__card {
  position: relative;
  width: min(440px, 94vw);
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: 36px 28px 28px;
  rotate: -1deg;
  animation: cork-b-drawer-pin var(--dur-pin) var(--ease-pin) both;
}

@keyframes cork-b-drawer-pin {
  from { opacity: 0; transform: scale(1.04) translateY(-10px); }
  to   { opacity: 1; transform: scale(1); }
}

[data-design="b"] .cork-drawer__pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pin);
  background: var(--pin-blue);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-design="b"] .cork-drawer__nav a {
  font-family: var(--font-sharpie);
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--rule);
  transition: transform var(--dur-tick);
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cork-drawer__nav a:hover {
    transform: rotate(-1deg) translateX(3px);
  }
}

[data-design="b"] .cork-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

[data-design="b"] .cork-drawer__funnel-cta {
  display: block;
  font-family: var(--font-sharpie);
  font-size: 20px;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--radius-tab);
  text-align: center;
}

[data-design="b"] .cork-drawer__phone-cta {
  display: block;
  font-family: var(--font-data);
  font-size: 18px;
  color: var(--pin-blue);
  text-decoration: none;
  text-align: center;
  padding: 8px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-tab);
}

[data-design="b"] .cork-drawer__close {
  display: block;
  margin-top: 16px;
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--muted);
  text-align: center;
}


/* ============================================================
   HERO — ELEMENT 3 backdrop + text content
   isolation:isolate — hero text TOPMOST at its center
   Text layer z-index above backdrop
   HERO-1: exactly one animated moving layer (the wash sweep)
   HERO-2: no directional primitive
   HERO-3: visual-presence floor met by color-wash backdrop
   ============================================================ */
[data-design="b"] .cork-hero {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;          /* CRITICAL: text container topmost */
  overflow: hidden;
  min-height: clamp(480px, 70vh, 800px);
  display: grid;
  align-items: center;
  border-bottom: 1.5px solid var(--rule);
  background-color: var(--cork);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
}

/* ELEMENT 3 — painting transformation backdrop:
   wet-edge color-wash fills across the cork board.
   ONE animated layer (HERO-1). Perceptibly ambient at rest (v0.2.1).
   NOT a directional primitive — a coverage metaphor (HERO-2).
   Opacity >= 0.25 at peak; amplitude >= 15% lightness delta. */
[data-design="b"] .cork-hero__board {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Wet-edge color-wash that continuously advances, then slowly recedes.
   Transform only — no layout props. Perceptible at rest. */
[data-design="b"] .cork-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(143,168,122,.45) 0%,
    rgba(107,140,95,.38) 30%,
    rgba(196,147,106,.22) 65%,
    transparent 85%
  );
  transform-origin: left center;
  animation: cork-b-wash-cycle 9s var(--ease-flutter) infinite;
}

/* Sustained ambient wash: scaleX pulses between .92 and 1.08 → 16% delta.
   Keeps breathing visibly after arrival (v0.2.1 requirement). */
@keyframes cork-b-wash-cycle {
  0%   { transform: scaleX(.92) skewY(-.5deg); opacity: .72; }
  45%  { transform: scaleX(1.08) skewY(.4deg); opacity: 1; }
  100% { transform: scaleX(.92) skewY(-.5deg); opacity: .72; }
}

/* Color swatch cards drifting gently — part of backdrop, aria-hidden */
[data-design="b"] .cork-hero__swatches {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[data-design="b"] .cork-swatch {
  position: absolute;
  width: 48px;
  height: 72px;
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  opacity: .55;
  animation: cork-b-swatch-settle var(--dur-ambient) var(--ease-flutter) infinite;
}

[data-design="b"] .cork-swatch--1 {
  background: var(--swatch-1);
  top: 12%; right: 6%;
  rotate: 7deg;
  animation-delay: 0s;
}

[data-design="b"] .cork-swatch--2 {
  background: var(--swatch-2);
  top: 55%; right: 18%;
  rotate: -4deg;
  animation-delay: -3.5s;
}

[data-design="b"] .cork-swatch--3 {
  background: var(--swatch-3);
  top: 25%; right: 30%;
  rotate: 2deg;
  animation-delay: -7s;
  display: none; /* hide on narrow; shown on md+ below */
}

[data-design="b"] .cork-swatch--4 {
  background: var(--swatch-4);
  top: 65%; right: 8%;
  rotate: -9deg;
  animation-delay: -10.5s;
  display: none;
}

/* Swatch gentle float — transform only */
@keyframes cork-b-swatch-settle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

/* Hero content layer — ABOVE backdrop via z-index */
[data-design="b"] .cork-hero__content {
  position: relative;
  z-index: 10;         /* CRITICAL: above .cork-hero__board (z-index: 0) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 96px) clamp(16px, 5vw, 48px);
  width: 100%;
}

@media (min-width: 768px) {
  [data-design="b"] .cork-hero__content {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr);
    align-items: start;
  }
  [data-design="b"] .cork-swatch--3,
  [data-design="b"] .cork-swatch--4 {
    display: block;
  }
}

/* Main hero flyer */
[data-design="b"] .cork-hero__flyer {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-flyer);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  rotate: -1deg;
}

/* Red pushpin */
[data-design="b"] .cork-hero__pin {
  position: absolute;
  top: -7px;
  right: 18px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pin);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-hero__pin--red   { background: var(--pin-red); }
[data-design="b"] .cork-hero__pin--green { background: var(--pin-green); }

/* Flyer corner curl ambient — HERO's one ambient motion signal */
[data-design="b"] .cork-hero__curl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 32px;
  transform-origin: bottom left;
  background: linear-gradient(135deg, var(--paper-deep) 50%, transparent 50%);
  box-shadow: var(--shadow-curl);
  animation: cork-b-hero-curl var(--dur-ambient) var(--ease-flutter) infinite;
  pointer-events: none;
}

/* Corner curl — transform only, no layout props */
@keyframes cork-b-hero-curl {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  45%, 55%  { transform: translate(5px,-7px) rotate(-2.5deg); }
}

/* Hero text — ALL opacity:1 at first paint (never opacity:0) */
[data-design="b"] .cork-hero__name {
  margin: 0 0 10px;
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(28px, 6.5vw, 52px);
  line-height: 1.05;
  color: var(--ink);
  opacity: 1;  /* HARD: never opacity:0 */
}

[data-design="b"] .cork-hero__desc {
  margin: 0 0 14px;
  font-family: var(--font-typewriter);
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 1;
}

[data-design="b"] .cork-hero__pitch {
  margin: 0 0 14px;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  opacity: 1;
}

[data-design="b"] .cork-hero__proof {
  margin: 0 0 var(--space-card);
  font-family: var(--font-typewriter);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .5px;
  opacity: 1;
}

/* Aside note card */
[data-design="b"] .cork-hero__note {
  position: relative;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-hand);
  font-size: clamp(17px, 3.5vw, 21px);
  line-height: 1.45;
  padding: var(--space-card);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  rotate: 1.5deg;
  opacity: 1;
}

[data-design="b"] .cork-hero__note p {
  margin: 0 0 10px;
}

[data-design="b"] .cork-hero__note p:last-child {
  margin: 0;
}

[data-design="b"] .cork-hero__note-lang {
  font-family: var(--font-typewriter);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .5px;
}

@media (max-width: 560px) {
  [data-design="b"] .cork-hero__flyer,
  [data-design="b"] .cork-hero__note { rotate: 0deg; }
}


/* ============================================================
   ELEMENT 2 — CTA "Get a painting quote" — pin this up
   Funnel-anchor. Rest opacity:1. Animation: flutter + snap-flat.
   Note span uses display:none when hidden — NEVER opacity:0.
   ============================================================ */
[data-design="b"] .cork-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font-sharpie);
  font-size: clamp(18px, 3.4vw, 22px);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper-deep);
  padding: 14px 26px;
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  rotate: -1.5deg;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  will-change: transform, rotate;
  transition:
    transform var(--dur-pin) var(--ease-pin),
    rotate var(--dur-pin) var(--ease-pin),
    box-shadow var(--dur-tick);
  animation: cork-b-cta-flutter 5s var(--ease-flutter) infinite;
  margin-top: var(--space-card);
  opacity: 1;
}

@keyframes cork-b-cta-flutter {
  0%, 100% { rotate: -1.5deg; }
  50%       { rotate: 0.6deg; }
}

[data-design="b"] .cork-cta--secondary {
  margin-top: 0;
}

[data-design="b"] .cork-cta__pin {
  position: absolute;
  top: -6px;
  right: 14px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pin);
  background: var(--pin-red);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3);
  transition: filter var(--dur-tick), transform var(--dur-tick);
  opacity: 1;
}

/* CTA note — HIDDEN with display:none NOT opacity:0 (gate rule) */
[data-design="b"] .cork-cta__note {
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--muted);
  display: none; /* hidden state uses display:none, never opacity:0 */
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cork-cta:hover,
  [data-design="b"] .cork-cta:focus-visible {
    animation: none;
    rotate: 0deg;
    outline: none;
  }
  [data-design="b"] .cork-cta:hover .cork-cta__pin,
  [data-design="b"] .cork-cta:focus-visible .cork-cta__pin {
    filter: brightness(1.1);
    transform: scale(1.12);
  }
  [data-design="b"] .cork-cta:hover .cork-cta__note,
  [data-design="b"] .cork-cta:focus-visible .cork-cta__note {
    display: inline;
  }
}

[data-design="b"] .cork-cta:focus-visible {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--pin-blue);
}

[data-design="b"] .cork-cta:active {
  box-shadow: var(--shadow-press);
}

@media (max-width: 390px) {
  [data-design="b"] .cork-cta {
    font-size: 17px;
    padding: 12px 18px;
  }
}


/* ============================================================
   ELEMENT 6 — Pointer — wet-edge sweep between hero and funnel
   data-mf-role="pointer" — NOT a button — height >= 24px
   Wrapper opacity:1, bbox height >= 24px (gate: pointer_invisible)
   LAST element before #funnel (pointer_funnel_adjacent gate)
   ============================================================ */
[data-design="b"] .cork-pointer {
  position: relative;
  width: 100%;
  padding: 32px clamp(16px, 5vw, 48px) 8px;
  background-color: var(--cork);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  overflow: hidden;
  opacity: 1;       /* CRITICAL: wrapper opacity:1 */
  min-height: 64px; /* CRITICAL: bbox height > 8px; >= 24px */
}

/* Wet-edge sweep — the painting pointer motif */
[data-design="b"] .cork-pointer__sweep {
  position: relative;
  height: 40px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: visible;
}

/* Advancing wet edge — transform: scaleX (not width, not left) */
[data-design="b"] .cork-pointer__edge {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--wash-b), var(--wash-a) 60%, transparent 90%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: cork-b-edge-advance 3.2s var(--ease-out) infinite;
  margin-top: -1.5px;
}

@keyframes cork-b-edge-advance {
  0%   { transform: scaleX(0);  opacity: 1; }
  70%  { transform: scaleX(1);  opacity: 1; }
  85%  { transform: scaleX(1);  opacity: 0; }
  100% { transform: scaleX(0);  opacity: 0; }
}

/* Drip marks along the edge — transform only */
[data-design="b"] .cork-pointer__drip {
  position: absolute;
  top: calc(50% + 2px);
  width: 6px;
  height: 12px;
  border-radius: 0 0 3px 3px;
  background: var(--wash-b);
  opacity: 0;
  transform-origin: top center;
  transform: scaleY(0);
}

[data-design="b"] .cork-pointer__drip--1 {
  left: 20%;
  animation: cork-b-drip 3.2s var(--ease-out) 0.8s infinite;
}

[data-design="b"] .cork-pointer__drip--2 {
  left: 50%;
  animation: cork-b-drip 3.2s var(--ease-out) 1.4s infinite;
}

[data-design="b"] .cork-pointer__drip--3 {
  left: 78%;
  animation: cork-b-drip 3.2s var(--ease-out) 2s infinite;
}

@keyframes cork-b-drip {
  0%, 40%  { opacity: 0; transform: scaleY(0); }
  55%       { opacity: 1; transform: scaleY(1); }
  80%       { opacity: 1; transform: scaleY(1); }
  95%       { opacity: 0; transform: scaleY(0); }
  100%      { opacity: 0; transform: scaleY(0); }
}

[data-design="b"] .cork-pointer__label {
  max-width: 1280px;
  margin: 8px auto 0;
  padding: 0 clamp(16px, 5vw, 48px);
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--paper);
  opacity: 1;  /* Never opacity:0 */
  text-align: center;
  letter-spacing: .5px;
}


/* ============================================================
   ELEMENT 5 — FUNNEL — 4-step qualifying intake
   id="funnel" data-mf-role="funnel"
   Premium animated transitions: cards pin onto board (pin-down)
   INT-1 centerpiece. FN-3: placed after proof (hero → before/after proof → funnel)
   Note: funnel placement here is immediately after pointer per trade.md
   (beat 4 in eye travel: header→hero→pointer→funnel)
   ============================================================ */
[data-design="b"] .cork-funnel {
  background: var(--paper);
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  padding: var(--space-board) 0;
}

[data-design="b"] .cork-funnel__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
}

[data-design="b"] .cork-funnel__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(28px, 5.5vw, 40px);
  color: var(--ink);
  rotate: -0.8deg;
  margin: 0 0 10px;
  opacity: 1;
}

[data-design="b"] .cork-funnel__lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 var(--space-stack);
  max-width: 52ch;
  opacity: 1;
}

[data-design="b"] .cork-funnel__step {
  animation: cork-b-step-pin var(--dur-pin) var(--ease-pin) both;
}

@keyframes cork-b-step-pin {
  from { opacity: 0; transform: scale(1.03) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

[data-design="b"] .cork-funnel__step[hidden] {
  display: none;
}

[data-design="b"] .cork-funnel__step-label {
  font-family: var(--font-typewriter);
  font-size: 14px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0 0 var(--space-card);
  opacity: 1;
}

[data-design="b"] .cork-funnel__step-num {
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  font-size: 12px;
}

[data-design="b"] .cork-funnel__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--space-card);
}

[data-design="b"] .cork-funnel__option {
  position: relative;
  appearance: none;
  cursor: pointer;
  text-align: left;
  background: var(--paper-deep);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-tab);
  padding: 16px 14px 14px;
  font-family: var(--font-sharpie);
  font-size: 18px;
  color: var(--ink);
  rotate: -1deg;
  transition: rotate var(--dur-pin) var(--ease-pin), box-shadow var(--dur-tick), background var(--dur-tick);
  min-height: 44px;
  opacity: 1;
}

[data-design="b"] .cork-funnel__option:nth-child(2n) { rotate: 1deg; }
[data-design="b"] .cork-funnel__option:nth-child(3n) { rotate: -0.5deg; }

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cork-funnel__option:hover {
    rotate: 0deg;
    box-shadow: var(--shadow-card), 0 0 0 2px var(--pin-blue);
  }
}

[data-design="b"] .cork-funnel__option:focus-visible {
  rotate: 0deg;
  outline: 2px solid var(--pin-blue);
  outline-offset: 2px;
}

[data-design="b"] .cork-funnel__option[aria-pressed="true"],
[data-design="b"] .cork-funnel__option.selected {
  rotate: 0deg;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-press);
}

[data-design="b"] .cork-opt__pin {
  position: absolute;
  top: -6px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pin);
  background: var(--pin-green);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
  opacity: 1;
}

/* Form fields — sign-up slip style */
[data-design="b"] .cork-funnel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-card);
}

[data-design="b"] .cork-slip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-design="b"] .cork-slip__label {
  font-family: var(--font-typewriter);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-soft);
}

[data-design="b"] .cork-slip__req {
  color: var(--pin-red);
}

[data-design="b"] .cork-slip__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--rule);
  padding: 8px 0;
  border-radius: 0;
  outline: none;
  transition: border-color var(--dur-tick);
  min-height: 44px;
}

[data-design="b"] .cork-slip__input:focus {
  border-bottom-color: var(--pin-blue);
}

[data-design="b"] .cork-slip__textarea {
  resize: vertical;
  min-height: 88px;
}

[data-design="b"] .cork-funnel__submit {
  position: relative;
  appearance: none;
  cursor: pointer;
  font-family: var(--font-sharpie);
  font-size: 20px;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: var(--radius-tab);
  padding: 16px 28px;
  box-shadow: var(--shadow-card);
  margin-top: var(--space-em);
  rotate: -0.5deg;
  transition: rotate var(--dur-pin) var(--ease-pin), transform var(--dur-tick), box-shadow var(--dur-tick);
  min-height: 52px;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cork-funnel__submit:hover {
    rotate: 0deg;
    transform: translateY(-1px);
    box-shadow: var(--shadow-card), 0 4px 12px rgba(0,0,0,.12);
  }
}

[data-design="b"] .cork-funnel__submit:active {
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}

[data-design="b"] .cork-funnel__submit .cork-cta__pin {
  background: var(--pin-red);
}

/* Confirmation card */
[data-design="b"] .cork-funnel__confirm {
  position: relative;
  background: var(--paper-deep);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-flyer);
  rotate: -0.5deg;
  animation: cork-b-step-pin var(--dur-pin) var(--ease-pin) both;
}

[data-design="b"] .cork-funnel__confirm[hidden] {
  display: none;
}

[data-design="b"] .cork-confirm__pin {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pin);
  background: var(--pin-green);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-confirm__title {
  font-family: var(--font-sharpie);
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 10px;
  opacity: 1;
}

[data-design="b"] .cork-confirm__body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  opacity: 1;
}

[data-design="b"] .cork-confirm__body a {
  color: var(--pin-blue);
}

[data-design="b"] .cork-funnel__below {
  margin-top: var(--space-stack);
  padding-top: var(--space-card);
  border-top: 1px dashed var(--rule);
}

[data-design="b"] .cork-funnel__trust {
  font-family: var(--font-typewriter);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .5px;
  margin: 0 0 8px;
  opacity: 1;
}

[data-design="b"] .cork-funnel__alt {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  opacity: 1;
}

[data-design="b"] .cork-funnel__alt a {
  color: var(--pin-blue);
  text-decoration: none;
  font-family: var(--font-data);
}


/* ============================================================
   BEFORE/AFTER — Trust section
   No photos per brief (photo_substrate: NONE) — honest treatment
   ============================================================ */
[data-design="b"] .cork-ba {
  background-color: var(--cork-deep);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  padding: var(--space-board) 0;
  border-bottom: 1.5px solid var(--rule);
}

[data-design="b"] .cork-ba__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(28px, 5.5vw, 42px);
  color: var(--paper);
  rotate: -1deg;
  margin: 0 0 var(--space-card);
  opacity: 1;
}

[data-design="b"] .cork-ba__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-deep);
  max-width: 60ch;
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

[data-design="b"] .cork-ba__honest {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-card);
  align-items: center;
  margin-bottom: var(--space-stack);
}

[data-design="b"] .cork-ba__card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-flyer) var(--space-card) var(--space-card);
}

[data-design="b"] .cork-ba__card--before { rotate: -1.2deg; }
[data-design="b"] .cork-ba__card--after  { rotate: 1.1deg; }

[data-design="b"] .cork-ba__pin {
  position: absolute;
  top: -7px;
  right: 16px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pin);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-ba__pin--red   { background: var(--pin-red); }
[data-design="b"] .cork-ba__pin--green { background: var(--pin-green); }

[data-design="b"] .cork-ba__card-label {
  font-family: var(--font-typewriter);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 0 0 var(--space-em);
  opacity: 1;
}

[data-design="b"] .cork-ba__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

[data-design="b"] .cork-ba__list li {
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--ink-soft);
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
  opacity: 1;
}

[data-design="b"] .cork-ba__list li:last-child {
  border-bottom: none;
}

/* Arrow between before/after */
[data-design="b"] .cork-ba__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--paper);
  padding: 0 8px;
}

[data-design="b"] .cork-ba__arrow-line {
  width: 2px;
  height: 40px;
  background: var(--paper-deep);
  opacity: .6;
}

[data-design="b"] .cork-ba__arrow-head {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--paper-deep);
  opacity: .6;
}

[data-design="b"] .cork-ba__repeat-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--space-card);
}

@media (max-width: 640px) {
  [data-design="b"] .cork-ba__honest {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .cork-ba__arrow {
    flex-direction: row;
    justify-content: center;
  }
  [data-design="b"] .cork-ba__arrow-line {
    width: 40px;
    height: 2px;
  }
  [data-design="b"] .cork-ba__arrow-head {
    border-left: 10px solid var(--paper-deep);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: none;
  }
  [data-design="b"] .cork-ba__card--before,
  [data-design="b"] .cork-ba__card--after {
    rotate: 0deg;
  }
}


/* ============================================================
   SERVICES — Card wall
   ============================================================ */
[data-design="b"] .cork-services {
  background: var(--paper);
  padding: var(--space-board) 0;
  border-bottom: 1.5px solid var(--rule);
}

[data-design="b"] .cork-services__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(28px, 5.5vw, 42px);
  color: var(--ink);
  rotate: -1deg;
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

[data-design="b"] .cork-card-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-card);
}

[data-design="b"] .cork-card-item {
  position: relative;
  background: var(--paper-deep);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: 28px var(--space-card) var(--space-card);
  rotate: -1deg;
  transition: rotate var(--dur-pin) var(--ease-pin), box-shadow var(--dur-tick);
}

[data-design="b"] .cork-card-item:nth-child(2n) { rotate: 1.2deg; }
[data-design="b"] .cork-card-item:nth-child(3n) { rotate: -0.5deg; }

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cork-card-item:hover {
    rotate: 0deg;
    box-shadow: var(--shadow-card), 0 4px 16px rgba(0,0,0,.1);
  }
}

[data-design="b"] .cork-card-item__pin {
  position: absolute;
  top: -7px;
  right: 16px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pin);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-card-item__pin--red    { background: var(--pin-red); }
[data-design="b"] .cork-card-item__pin--blue   { background: var(--pin-blue); }
[data-design="b"] .cork-card-item__pin--green  { background: var(--pin-green); }
[data-design="b"] .cork-card-item__pin--yellow { background: var(--pin-yellow); }

[data-design="b"] .cork-card-item__title {
  font-family: var(--font-sharpie);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 8px;
  opacity: 1;
}

[data-design="b"] .cork-card-item__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 1;
}


/* ============================================================
   ELEMENT 4 — Process section with afternoon-light drift
   Different motion from hero curl (translating light, not draft)
   AMB-1: two ambient segments total (hero curl + process light)
   ============================================================ */
[data-design="b"] .cork-process {
  position: relative;
  background-color: var(--cork-deep);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  padding: var(--space-board) 0;
  overflow: hidden;
  border-bottom: 1.5px solid var(--rule);
}

/* Afternoon-light drift — transform:translateX only (no layout props) */
[data-design="b"] .cork-process .cork-notes__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(60% 80% at 0% 30%, rgba(255,248,220,.28), transparent 60%);
  animation: cork-b-notes-light 18s ease-in-out infinite;
}

@keyframes cork-b-notes-light {
  0%   { transform: translateX(-15%); opacity: .5; }
  50%  { transform: translateX(115%); opacity: .9; }
  100% { transform: translateX(-15%); opacity: .5; }
}

[data-design="b"] .cork-process .cork-section__inner {
  position: relative;
  z-index: 1;
}

[data-design="b"] .cork-process__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(26px, 5vw, 40px);
  color: var(--paper);
  rotate: -1deg;
  margin: 0 0 var(--space-card);
  opacity: 1;
}

[data-design="b"] .cork-process__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-deep);
  max-width: 60ch;
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

[data-design="b"] .cork-process__phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-card);
}

[data-design="b"] .cork-phase {
  display: flex;
  gap: var(--space-card);
  align-items: flex-start;
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-card) var(--space-flyer) var(--space-card) var(--space-card);
}

[data-design="b"] .cork-phase:nth-child(2n) { rotate: .4deg; }
[data-design="b"] .cork-phase:nth-child(3n) { rotate: -.6deg; }

[data-design="b"] .cork-phase__num {
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 1px;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 28px;
}

[data-design="b"] .cork-phase__name {
  font-family: var(--font-sharpie);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
  opacity: 1;
}

[data-design="b"] .cork-phase__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 1;
}

@media (max-width: 560px) {
  [data-design="b"] .cork-phase {
    rotate: 0deg;
  }
}


/* ============================================================
   ABOUT / CREW
   ============================================================ */
[data-design="b"] .cork-about {
  background: var(--paper);
  padding: var(--space-board) 0;
  border-bottom: 1.5px solid var(--rule);
}

[data-design="b"] .cork-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-stack);
  align-items: start;
}

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

[data-design="b"] .cork-about__note {
  position: relative;
  background: var(--paper-deep);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-flyer);
  rotate: -.8deg;
}

[data-design="b"] .cork-about__pin {
  position: absolute;
  top: -7px;
  right: 20px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pin);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-about__pin--blue  { background: var(--pin-blue); }
[data-design="b"] .cork-about__pin--green { background: var(--pin-green); }

[data-design="b"] .cork-about__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ink);
  margin: 0 0 16px;
  opacity: 1;
}

[data-design="b"] .cork-about__body {
  font-family: var(--font-hand);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
  opacity: 1;
}

[data-design="b"] .cork-about__facts {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-flyer) var(--space-card);
  rotate: 1.2deg;
}

[data-design="b"] .cork-about__fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-design="b"] .cork-about__fact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule);
}

[data-design="b"] .cork-about__fact-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

[data-design="b"] .cork-fact__key {
  font-family: var(--font-typewriter);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
}

[data-design="b"] .cork-fact__val {
  font-family: var(--font-data);
  font-size: 15px;
  color: var(--ink);
}

[data-design="b"] .cork-fact__val a {
  color: var(--pin-blue);
  text-decoration: none;
}


/* ============================================================
   SERVICE AREA
   ============================================================ */
[data-design="b"] .cork-area {
  background-color: var(--cork);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  padding: var(--space-board) 0;
  border-bottom: 1.5px solid var(--rule);
}

[data-design="b"] .cork-area__title {
  font-family: var(--font-sharpie);
  font-weight: 400;
  font-size: clamp(26px, 5vw, 40px);
  color: var(--paper);
  rotate: -1deg;
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

[data-design="b"] .cork-area__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-card);
  margin-bottom: var(--space-stack);
}

[data-design="b"] .cork-area__card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: 28px var(--space-card) var(--space-card);
}

[data-design="b"] .cork-area__card:nth-child(odd)  { rotate: -1.1deg; }
[data-design="b"] .cork-area__card:nth-child(even) { rotate: 1.3deg; }

[data-design="b"] .cork-area__pin {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pin);
  background: var(--pin-yellow);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-area__card-name {
  font-family: var(--font-sharpie);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 8px;
  opacity: 1;
}

[data-design="b"] .cork-area__card-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 1;
}

[data-design="b"] .cork-area__note {
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--paper-deep);
  opacity: 1;
}

[data-design="b"] .cork-area__note a {
  color: var(--paper);
  font-family: var(--font-data);
}


/* ============================================================
   FOOTER — Imprint card
   ============================================================ */
[data-design="b"] .cork-footer {
  background-color: var(--cork-deep);
  background-image: var(--cork-texture);
  background-size: 18px 18px, 24px 24px, 30px 30px;
  padding: var(--space-board) 0;
  border-top: 1.5px solid var(--rule);
}

[data-design="b"] .cork-footer__card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
  background: var(--paper);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-card);
  padding: var(--space-flyer);
  rotate: -.5deg;
}

[data-design="b"] .cork-footer__pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pin);
  background: var(--pin-red);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.3);
}

[data-design="b"] .cork-footer__inner {
  display: grid;
  gap: var(--space-card);
}

[data-design="b"] .cork-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-design="b"] .cork-footer__name {
  font-family: var(--font-sharpie);
  font-size: 24px;
  color: var(--ink);
  opacity: 1;
}

[data-design="b"] .cork-footer__area {
  font-family: var(--font-typewriter);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  opacity: 1;
}

[data-design="b"] .cork-footer__contact {
  display: flex;
  gap: var(--space-card);
  flex-wrap: wrap;
  align-items: center;
}

[data-design="b"] .cork-footer__phone {
  font-family: var(--font-data);
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
}

[data-design="b"] .cork-footer__quote {
  font-family: var(--font-sharpie);
  font-size: 18px;
  color: var(--pin-blue);
  text-decoration: none;
}

[data-design="b"] .cork-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-typewriter);
  font-size: 12px;
  color: var(--muted);
  padding-top: var(--space-em);
  border-top: 1px dashed var(--rule);
  opacity: 1;
}


/* ============================================================
   SCROLL-DRIVEN MOTION (TRIAD-2) — genuine parallax on hero→content
   Uses scroll-linked translateY on the hero flyer (not fade-in)
   scroll-timeline API with @keyframes — GPU composited (transform)
   Fallback: JS IntersectionObserver translate for browsers without scroll-timeline
   ============================================================ */
@supports (animation-timeline: scroll()) {
  [data-design="b"] .cork-hero__flyer {
    animation: cork-b-hero-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 40vh;
  }

  @keyframes cork-b-hero-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(-32px); }
  }
}

/* Phase cards scroll reveal — translateY, not opacity (TRIAD-2 reinforcement) */
[data-design="b"] .cork-phase {
  transition: transform var(--dur-flutter) var(--ease-out);
}

[data-design="b"] .cork-phase.cork-reveal-pending {
  transform: translateY(24px);
}

[data-design="b"] .cork-phase.cork-revealed {
  transform: translateY(0);
}


/* ============================================================
   MOBILE — no h-scroll at 320/390/768/1440
   All rules scoped to .dq-design per cross-modal safety rule
   ============================================================ */
[data-design="b"].dq-design {
  overflow-x: clip;
  width: 100%;
}

@media (max-width: 390px) {
  [data-design="b"] .cork-funnel__options {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .cork-card-wall {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .cork-ba__honest {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 320px) {
  [data-design="b"] .cork-funnel__options {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .cork-burger {
    width: 40px;
    height: 40px;
  }
  [data-design="b"] .cork-hero {
    padding: 28px 12px;
  }
}

/* Tap targets >= 44x44px on all interactive elements */
[data-design="b"] .cork-funnel__option,
[data-design="b"] .cork-funnel__submit,
[data-design="b"] .cork-slip__input,
[data-design="b"] .cork-burger,
[data-design="b"] .cork-cta {
  min-height: 44px;
}


/* ============================================================
   REDUCED MOTION — all signatures degrade gracefully
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cork-header__cork::after { animation: none; }
  [data-design="b"] .cork-logo__underline path { animation: none; stroke-dashoffset: 0; }
  [data-design="b"] .cork-drawer__card { animation: none; }
  [data-design="b"] .cork-burger span { transition: none; }
  [data-design="b"] .cork-hero__wash { animation: none; }
  [data-design="b"] .cork-hero__curl { animation: none; }
  [data-design="b"] .cork-swatch { animation: none; }
  [data-design="b"] .cork-cta { animation: none; rotate: -1.5deg; }
  [data-design="b"] .cork-pointer__edge { animation: none; transform: scaleX(1); opacity: .6; }
  [data-design="b"] .cork-pointer__drip { animation: none; }
  [data-design="b"] .cork-process .cork-notes__light { animation: none; }
  [data-design="b"] .cork-funnel__step { animation: none; }
  [data-design="b"] .cork-funnel__confirm { animation: none; }
  [data-design="b"] .cork-phase { transition: none; }
  [data-design="b"] .cork-phase.cork-reveal-pending { transform: none; }

  @supports (animation-timeline: scroll()) {
    [data-design="b"] .cork-hero__flyer {
      animation: none;
    }
  }
}

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