/* =============================================================
   Cloudbank Journal → Design Slot A
   Scorpion Landscape LLC · Woodburn, OR
   All selectors scoped [data-design="a"] — ZERO cloudbank-journal scope.
   Keyframes prefixed cb- to avoid collision.
   ============================================================= */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Caveat&family=IBM+Plex+Mono:wght@400&display=swap');

/* ── Design token scope ───────────────────────────────────── */
[data-design="a"] {
  --design-a-primary: #3B5230;

  /* Brand palette — light */
  --stock:      #EFEAE0;
  --stock-deep: #E2DAC9;
  --ink:        #1A1C20;
  --ink-soft:   #3D4248;
  --muted:      #7B7C77;
  --rule:       #3A3D40;
  --moss:       #3B5230;
  --silt:       #7E5A36;
  --horizon:    #C4683A;
  --seal:       #3B5230;
  --critical:   #7C2A20;

  /* Sky (written by JS at runtime) */
  --sky-top:    #2B3A4A;
  --sky-bottom: #D9A06B;
  --sky-tone:   #2B3A4A;

  /* Typography */
  --font-display:  "Cardo", "EB Garamond", Georgia, serif;
  --font-body:     "Cardo", "EB Garamond", Georgia, serif;
  --font-caption:  "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-hand:     "Caveat", cursive;

  --text-cap:   12px;
  --text-foot:  14px;
  --text-body:  16px;
  --text-pull:  22px;
  --text-plate: 32px;
  --text-page:  52px;

  /* Spacing */
  --space-grain:  2px;
  --space-quad:   4px;
  --space-em:     8px;
  --space-stop:   16px;
  --space-frame:  24px;
  --space-passe:  40px;
  --space-spread: 72px;
  --space-folio:  120px;

  /* Motion */
  --dur-shutter:  60ms;
  --dur-aperture: 320ms;
  --dur-pan:      900ms;
  --dur-weather:  4000ms;
  --ease-sky:     cubic-bezier(.45, .05, .55, .95);
  --ease-shutter: cubic-bezier(.16, 1, .3, 1);
  --ease-plate:   cubic-bezier(.22, .61, .36, 1);

  /* Radius / Shadow */
  --radius-zero: 0;
  --radius-pin:  50%;
  --shadow-mat:  0 0 0 1px var(--rule), 0 0 0 8px var(--stock);
  --shadow-page: inset 0 1px 0 rgba(0,0,0,.04), inset 0 -1px 0 rgba(0,0,0,.06);
}

/* ── Article reset ─────────────────────────────────────────── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

[data-design="a"].dq-design {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
}
[data-design="a"].dq-design *, [data-design="a"].dq-design *::before, [data-design="a"].dq-design *::after {
  box-sizing: border-box;
}
[data-design="a"].dq-design h1, [data-design="a"].dq-design h2,
[data-design="a"].dq-design h3, [data-design="a"].dq-design h4 {
  margin: 0;
  font-weight: 400;
}
[data-design="a"].dq-design p { margin: 0; }
[data-design="a"].dq-design ul, [data-design="a"].dq-design ol { margin: 0; padding: 0; list-style: none; }
[data-design="a"].dq-design a { color: inherit; }

/* ── Shared eyebrow ────────────────────────────────────────── */
[data-design="a"] .cb-eyebrow {
  margin: 0 0 var(--space-em);
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--muted);
}
[data-design="a"] .cb-eyebrow--onsky { color: rgba(255,255,255,.80); }

/* ── Datum strip ───────────────────────────────────────────── */
[data-design="a"] .cb-datum { display: grid; gap: var(--space-stop); margin: 0; }
[data-design="a"] .cb-datum div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-stop);
  padding-bottom: var(--space-em);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .cb-datum dt {
  margin: 0;
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--muted);
}
[data-design="a"] .cb-datum dd {
  margin: 0;
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  color: var(--ink);
  text-align: right;
}

/* =============================================================
   ELEMENT 1 — Header (Weather Band)
   ============================================================= */
[data-design="a"] .cb-header {
  position: relative;
  z-index: 40;
  box-sizing: border-box;
  width: 100%;
  background: var(--stock);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
[data-design="a"] .cb-weatherwash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .20;
  mix-blend-mode: multiply;
}
/* Inner strip — 3× wide, animated via translateX (GPU-composited, no layout prop) */
[data-design="a"] .cb-weatherwash::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  width: 300%;
  background: linear-gradient(100deg,
    var(--sky-top) 0%,
    var(--sky-bottom) 33%,
    var(--sky-top) 66%,
    var(--sky-bottom) 100%);
  animation: cb-weather-drift 28s var(--ease-sky) infinite;
}
[data-design="a"] .cb-horizon-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--horizon);
  opacity: .5;
}
[data-design="a"] .cb-header__bar {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-stop) var(--space-frame);
}
[data-design="a"] .cb-logo { text-decoration: none; }
[data-design="a"] .cb-logo__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3.4vw, 28px);
  color: var(--ink);
  letter-spacing: .01em;
}
[data-design="a"] .cb-burger {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  padding: 9px 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
[data-design="a"] .cb-burger__rule {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur-aperture) var(--ease-shutter), opacity 200ms;
}
[data-design="a"] .cb-burger[aria-expanded="true"] .cb-burger__rule:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
[data-design="a"] .cb-burger[aria-expanded="true"] .cb-burger__rule:nth-child(2) { opacity: 0; }
[data-design="a"] .cb-burger[aria-expanded="true"] .cb-burger__rule:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Drawer */
[data-design="a"] .cb-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in oklab, var(--ink) 38%, transparent);
  transition: opacity var(--dur-aperture) var(--ease-sky);
}
[data-design="a"] .cb-drawer[data-open="true"] { pointer-events: auto; opacity: 1; }
[data-design="a"] .cb-drawer__sheet {
  position: relative;
  box-sizing: border-box;
  width: min(380px, 86vw);
  height: 100%;
  background: var(--stock);
  border-left: 1px solid var(--rule);
  padding: var(--space-spread) var(--space-frame) var(--space-frame);
  display: flex;
  flex-direction: column;
  gap: var(--space-frame);
  transform: translateX(18px);
  transition: transform var(--dur-aperture) var(--ease-plate);
}
[data-design="a"] .cb-drawer[data-open="true"] .cb-drawer__sheet { transform: translateX(0); }
[data-design="a"] .cb-drawer__close {
  position: absolute;
  top: var(--space-frame);
  right: var(--space-frame);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--muted);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
[data-design="a"] .cb-nav { display: flex; flex-direction: column; gap: var(--space-stop); }
[data-design="a"] .cb-nav a {
  width: max-content;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--moss), var(--moss));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-aperture) var(--ease-plate);
}
[data-design="a"] .cb-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-stop);
  margin-top: auto;
}
[data-design="a"] .cb-drawer__phone {
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  letter-spacing: .08em;
  color: var(--moss);
  text-decoration: none;
}
[data-design="a"] .cb-drawer__mark {
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 1.3;
  color: var(--silt);
  margin-top: var(--space-frame);
}

/* Hover guarded */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cb-nav a:hover,
  [data-design="a"] .cb-nav a:focus-visible { background-size: 100% 2px; outline: none; }
}

@keyframes cb-weather-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(33%); }
  100% { transform: translateX(0); }
}

/* =============================================================
   ELEMENT 3 + HERO — Sky Panel (Ken-Burns Install Backdrop)
   ============================================================= */
[data-design="a"] .cb-sky {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--stock);
}
[data-design="a"] .cb-sky__panel {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 480px;
  overflow: hidden;
}
/* Sky gradient — bottom layer, permanent ambient drift via translateY */
[data-design="a"] .cb-sky__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
/* 220% tall inner gradient — animates via translateY (GPU-composited, no layout prop) */
[data-design="a"] .cb-sky__gradient::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -60%;
  height: 220%;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-bottom) 60%,
    var(--horizon) 80%,
    var(--sky-top) 100%);
  animation: cb-sky-drift 19s var(--ease-sky) infinite;
}
[data-design="a"] .cb-sky__horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 5;
  background: var(--horizon);
  opacity: .7;
}
/* Ken-Burns photo layers — 3 images cycle, each 12s on */
[data-design="a"] .cb-kb {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  transform: scale(1.08) translate(0, 0);
  opacity: 0;
}
[data-design="a"] .cb-kb--1 { animation: cb-kb-1 36s var(--ease-sky) infinite; }
[data-design="a"] .cb-kb--2 { animation: cb-kb-2 36s var(--ease-sky) infinite; }
[data-design="a"] .cb-kb--3 { animation: cb-kb-3 36s var(--ease-sky) infinite; }

/* Dark overlay for text contrast */
[data-design="a"] .cb-sky__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(160deg, rgba(15,20,25,.62) 0%, rgba(30,40,30,.38) 100%);
}
/* Hero text plate — sits above the overlay */
[data-design="a"] .cb-sky__plate {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 var(--space-frame) var(--space-spread);
}
[data-design="a"] .cb-sky__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 52px);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
  max-width: 22ch;
  /* Arrival entrance: transform-only, opacity starts 1 */
  transform: translateY(18px);
  animation: cb-hero-arrive 0.9s var(--ease-plate) 0.1s both;
}
[data-design="a"] .cb-sky__subtitle {
  margin-top: var(--space-stop);
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  letter-spacing: .10em;
  text-transform: lowercase;
  color: rgba(255,255,255,.80);
  transform: translateY(14px);
  animation: cb-hero-arrive 0.9s var(--ease-plate) 0.22s both;
}
[data-design="a"] .cb-sky__proof {
  margin-top: var(--space-em);
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: rgba(255,255,255,.60);
  transform: translateY(10px);
  animation: cb-hero-arrive 0.9s var(--ease-plate) 0.32s both;
}

/* Hero arrival keyframe — transform-only, opacity never below 1 */
@keyframes cb-hero-arrive {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}

/* Ken-Burns cycles: 3 images × 12s each = 36s total */
@keyframes cb-kb-1 {
  0%         { opacity: 1; transform: scale(1.08) translate(0, 0); }
  28%        { opacity: 1; transform: scale(1.04) translate(-1%, 0.5%); }
  33%        { opacity: 0; transform: scale(1.04) translate(-1%, 0.5%); }
  99%, 100%  { opacity: 0; transform: scale(1.08) translate(0, 0); }
}
@keyframes cb-kb-2 {
  0%,  30%   { opacity: 0; transform: scale(1.08) translate(1%, 0); }
  33%        { opacity: 1; transform: scale(1.08) translate(1%, 0); }
  61%        { opacity: 1; transform: scale(1.04) translate(0, -0.5%); }
  66%        { opacity: 0; transform: scale(1.04) translate(0, -0.5%); }
  100%       { opacity: 0; transform: scale(1.08) translate(1%, 0); }
}
@keyframes cb-kb-3 {
  0%,  63%   { opacity: 0; transform: scale(1.08) translate(-0.5%, 0); }
  66%        { opacity: 1; transform: scale(1.08) translate(-0.5%, 0); }
  94%        { opacity: 1; transform: scale(1.04) translate(0.5%, 0.5%); }
  99%        { opacity: 0; transform: scale(1.04) translate(0.5%, 0.5%); }
  100%       { opacity: 0; transform: scale(1.08) translate(-0.5%, 0); }
}
@keyframes cb-sky-drift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(30%); }
  100% { transform: translateY(0); }
}

[data-design="a"] .cb-sky[data-inview="false"] .cb-sky__gradient,
[data-design="a"] .cb-sky[data-inview="false"] .cb-kb { animation-play-state: paused; }

/* =============================================================
   ELEMENT 2 — CTA (funnel anchor)
   All resting states opacity:1.
   .cb-cta__mat starts opacity:0 (decorative border ring, aria-hidden).
   ============================================================= */
[data-design="a"] .cb-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-stop);
  box-sizing: border-box;
  min-height: 44px;
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: var(--radius-zero);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body);
  text-decoration: none;
  margin-top: var(--space-spread);
  align-self: flex-start;
  transition: color var(--dur-shutter) ease,
              background-color var(--dur-shutter) ease;
}
[data-design="a"] .cb-cta__mat {
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.5);
  /* decorative ring — aria-hidden="true"; opacity:0 is safe for aria-hidden decor */
  opacity: 0;
  animation: cb-cta-breath 5s var(--ease-sky) infinite;
}
[data-design="a"] .cb-cta__label { position: relative; z-index: 1; }
[data-design="a"] .cb-cta__arrow {
  display: inline-flex;
  color: inherit;
  transform: translateY(0);
  transition: transform var(--dur-aperture) var(--ease-plate);
}

/* Non-hero CTA variant */
[data-design="a"] .cb-plates__cta-repeat .cb-cta,
[data-design="a"] .cb-footer .cb-cta {
  border-color: var(--ink);
  color: var(--ink);
  margin-top: 0;
}
[data-design="a"] .cb-plates__cta-repeat .cb-cta .cb-cta__mat,
[data-design="a"] .cb-footer .cb-cta .cb-cta__mat {
  border-color: var(--rule);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cb-cta:hover .cb-cta__mat,
  [data-design="a"] .cb-cta:focus-visible .cb-cta__mat { opacity: 1; }
  [data-design="a"] .cb-cta:hover .cb-cta__arrow,
  [data-design="a"] .cb-cta:focus-visible .cb-cta__arrow { transform: translateY(3px); }
}
[data-design="a"] .cb-cta:focus-visible { outline: none; }
[data-design="a"] .cb-cta:active,
[data-design="a"] .cb-cta[data-expose="true"] {
  background: var(--ink);
  color: var(--stock);
}
[data-design="a"] .cb-cta--hero:active,
[data-design="a"] .cb-cta--hero[data-expose="true"] {
  background: rgba(255,255,255,.15);
  color: #fff;
}

@keyframes cb-cta-breath {
  0%, 100% { opacity: 0;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.012); }
}

/* =============================================================
   ELEMENT 6 — Pointer (surveyed-grown contour)
   Must be opacity:1, height >= 8px at all breakpoints.
   ============================================================= */
[data-design="a"] .cb-pointer {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-passe) var(--space-frame);
  gap: var(--space-stop);
  background: var(--stock);
  opacity: 1;
  min-height: 80px;
}
[data-design="a"] .cb-pointer__contour {
  width: 1px;
  height: 40px;
  background: var(--moss);
  transform: scaleY(0);
  transform-origin: top center;
  animation: cb-contour-draw 1.2s var(--ease-plate) 0.4s both;
}
[data-design="a"] .cb-pointer__label {
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--muted);
  opacity: 1;
}

@keyframes cb-contour-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* =============================================================
   ELEMENT 5 — Funnel (routing qualifying intake)
   ============================================================= */
[data-design="a"] .cb-inquiry {
  box-sizing: border-box;
  width: 100%;
  background: var(--stock-deep);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .cb-inquiry__wrap {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-folio) var(--space-frame);
}
[data-design="a"] .cb-inquiry__title {
  margin: .2em 0 var(--space-spread);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-plate);
  color: var(--ink);
}

/* Funnel steps */
[data-design="a"] .cb-funnel-step { display: none; }
[data-design="a"] .cb-funnel-step[data-active="true"] { display: block; }
[data-design="a"] .cb-funnel-step__q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  color: var(--ink-soft);
  margin-bottom: var(--space-passe);
}
/* Funnel options */
[data-design="a"] .cb-funnel-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-stop);
}
[data-design="a"] .cb-funnel-options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-em);
}
/* All funnel-option buttons: opacity:1 at rest; entrances transform-only */
[data-design="a"] .cb-funnel-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
  min-height: 56px;
  padding: 14px 20px;
  background: var(--stock);
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  opacity: 1;
  transition: border-color var(--dur-aperture) var(--ease-plate),
              background-color var(--dur-aperture) var(--ease-plate);
}
[data-design="a"] .cb-funnel-opt--chip {
  min-height: 44px;
  padding: 10px 16px;
  flex-direction: row;
  font-size: var(--text-foot);
}
[data-design="a"] .cb-funnel-opt__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  color: var(--ink);
}
[data-design="a"] .cb-funnel-opt__sub {
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--muted);
}
[data-design="a"] .cb-funnel-opt[data-selected="true"] {
  background: var(--moss);
  border-color: var(--moss);
  color: #fff;
}
[data-design="a"] .cb-funnel-opt[data-selected="true"] .cb-funnel-opt__title,
[data-design="a"] .cb-funnel-opt[data-selected="true"] .cb-funnel-opt__sub { color: rgba(255,255,255,.85); }

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cb-funnel-opt:hover {
    border-color: var(--moss);
    background: color-mix(in oklab, var(--moss) 8%, var(--stock));
  }
  [data-design="a"] .cb-funnel-opt[data-selected="true"]:hover {
    background: var(--moss);
  }
}

/* Funnel nav (back/next) */
[data-design="a"] .cb-funnel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-passe);
  gap: var(--space-frame);
}
[data-design="a"] .cb-funnel-back {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--muted);
  min-height: 44px;
  padding: 0;
}
[data-design="a"] .cb-funnel-next {
  appearance: none;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--stock);
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body);
  padding: 10px 24px;
  min-height: 44px;
  transition: opacity var(--dur-aperture) ease;
}
[data-design="a"] .cb-funnel-next[disabled] { opacity: .35; cursor: default; }

/* Funnel form */
[data-design="a"] .cb-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-passe) var(--space-frame);
  margin-top: var(--space-frame);
}
[data-design="a"] .cb-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  min-width: 0;
}
[data-design="a"] .cb-field--wide { grid-column: 1 / -1; }
[data-design="a"] .cb-field label {
  font-family: var(--font-caption);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-design="a"] .cb-field input,
[data-design="a"] .cb-field select,
[data-design="a"] .cb-field textarea {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-em) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: var(--radius-zero);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  transition: border-color var(--dur-aperture) var(--ease-plate);
}
[data-design="a"] .cb-field textarea { resize: vertical; }
[data-design="a"] .cb-field input:focus,
[data-design="a"] .cb-field select:focus,
[data-design="a"] .cb-field textarea:focus {
  outline: none;
  border-bottom-color: var(--moss);
}

[data-design="a"] .cb-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-frame);
  flex-wrap: wrap;
  margin-top: var(--space-frame);
}

/* Send button */
[data-design="a"] .cb-send {
  position: relative;
  isolation: isolate;
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 14px 28px;
  background: var(--stock);
  border: 1px solid var(--ink);
  border-radius: var(--radius-zero);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--ink);
  transition: color var(--dur-shutter) ease, background-color var(--dur-shutter) ease;
}
[data-design="a"] .cb-send__label { position: relative; z-index: 1; }
[data-design="a"] .cb-send__mat {
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 1px solid var(--rule);
  opacity: 0;
  transition: opacity var(--dur-aperture) var(--ease-plate);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cb-send:hover .cb-send__mat,
  [data-design="a"] .cb-send:focus-visible .cb-send__mat { opacity: 1; }
}
[data-design="a"] .cb-send:focus-visible { outline: none; }
[data-design="a"] .cb-send:active,
[data-design="a"] .cb-send[data-expose="true"] {
  background: var(--ink);
  color: var(--stock);
}

/* Field note confirmation (display:none until submit — never opacity:0) */
[data-design="a"] .cb-note {
  margin-top: var(--space-spread);
  padding: var(--space-passe);
  background: var(--stock);
  border: 1px solid var(--rule);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 14px, 100% 100%, 18px 100%, 0 calc(100% - 14px));
  transform: translateY(10px);
  transition: transform var(--dur-aperture) var(--ease-plate);
}
[data-design="a"] .cb-note[data-sent="true"] { transform: translateY(0); }
[data-design="a"] .cb-note__title {
  margin: 0 0 var(--space-stop);
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--seal);
}
[data-design="a"] .cb-note__body {
  margin: 0 0 var(--space-stop);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  line-height: 1.4;
  color: var(--ink);
}
[data-design="a"] .cb-note__mark {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--silt);
}

/* Funnel trust footer */
[data-design="a"] .cb-funnel-trust {
  margin-top: var(--space-spread);
  padding-top: var(--space-frame);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="a"] .cb-funnel-trust p {
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .10em;
  text-transform: lowercase;
  color: var(--muted);
}
[data-design="a"] .cb-trust-phone {
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  color: var(--moss);
  text-decoration: none;
  letter-spacing: .06em;
}

/* =============================================================
   ELEMENT 4 — Plates (mid-page Ken-Burns scroll ambient)
   ============================================================= */
[data-design="a"] .cb-plates {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-folio) var(--space-frame);
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 120px);
}
[data-design="a"] .cb-plates__head { margin-bottom: 0; }
[data-design="a"] .cb-plate-title {
  margin: .2em 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-plate);
  color: var(--ink);
}
[data-design="a"] .cb-plate {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-passe);
  align-items: center;
  margin: 0;
}
[data-design="a"] .cb-plate--rev { direction: rtl; }
[data-design="a"] .cb-plate--rev > * { direction: ltr; }
[data-design="a"] .cb-plate__mat {
  position: relative;
  box-sizing: border-box;
  padding: 8px;
  background: var(--stock);
  box-shadow: var(--shadow-mat);
  overflow: hidden;
}
[data-design="a"] .cb-plate__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--stock-deep);
  background-image: var(--cb-plate-img,
    linear-gradient(135deg, var(--moss) 0%, var(--silt) 68%, var(--horizon) 100%));
  background-size: cover;
  background-position: center;
  transform: scale(1.06) translateX(0);
  transition: transform var(--dur-pan) var(--ease-plate);
}
[data-design="a"] .cb-plate[data-pan="true"] .cb-plate__photo { transform: scale(1.06) translateX(1.5%); }
[data-design="a"] .cb-plate__no {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .14em;
  color: #fff;
  mix-blend-mode: difference;
}
[data-design="a"] .cb-plate__datum {
  margin: 0 0 var(--space-stop);
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--muted);
}
[data-design="a"] .cb-plate__name {
  margin: 0 0 var(--space-em);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-pull);
  color: var(--ink);
}
[data-design="a"] .cb-plate__note {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
[data-design="a"] .cb-plates[data-inview="false"] .cb-plate__photo { transition-duration: 0s; }

/* Repeated CTA */
[data-design="a"] .cb-plates__cta-repeat {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-frame);
  border-top: 1px solid var(--rule);
}

/* =============================================================
   PROCESS
   ============================================================= */
[data-design="a"] .cb-process {
  background: var(--stock-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .cb-process__wrap {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-folio) var(--space-frame);
}
[data-design="a"] .cb-process__steps {
  margin-top: var(--space-spread);
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-design="a"] .cb-process__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-frame);
  padding: var(--space-passe) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
[data-design="a"] .cb-process__step:last-child { border-bottom: none; }
[data-design="a"] .cb-process__num {
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .16em;
  color: var(--muted);
  padding-top: 5px;
}
[data-design="a"] .cb-process__phase {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  color: var(--ink);
  margin-bottom: var(--space-em);
}
[data-design="a"] .cb-process__step p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 60ch;
}
/* Scroll-reveal on process steps — translate only, opacity starts 1 */
[data-design="a"] .cb-process__step {
  transform: translateX(-16px);
  transition: transform 0.6s var(--ease-plate);
}
[data-design="a"] .cb-process__step[data-inview="true"] { transform: translateX(0); }

/* =============================================================
   SERVICES
   ============================================================= */
[data-design="a"] .cb-services {
  background: var(--stock);
}
[data-design="a"] .cb-services__wrap {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-folio) var(--space-frame);
}
[data-design="a"] .cb-services__grid {
  margin-top: var(--space-spread);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-spread);
}
[data-design="a"] .cb-services__grouphead {
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--moss);
  margin-bottom: var(--space-stop);
  padding-bottom: var(--space-em);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .cb-services__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-stop);
}
[data-design="a"] .cb-services__list li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  padding-left: var(--space-stop);
  position: relative;
}
[data-design="a"] .cb-services__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 1px;
  background: var(--moss);
}

/* =============================================================
   ABOUT
   ============================================================= */
[data-design="a"] .cb-about {
  background: var(--stock-deep);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .cb-about__wrap {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-folio) var(--space-frame);
  display: grid;
  grid-template-columns: minmax(0, 52ch) 1fr;
  gap: var(--space-spread);
  align-items: start;
}
[data-design="a"] .cb-about__text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: var(--space-stop);
  max-width: 65ch;
}

/* =============================================================
   FOOTER
   ============================================================= */
[data-design="a"] .cb-footer {
  background: var(--stock);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .cb-footer__wrap {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-spread) var(--space-frame);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-spread);
  align-items: start;
}
[data-design="a"] .cb-footer__copy {
  grid-column: 1 / -1;
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--muted);
  padding-top: var(--space-frame);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .cb-footer__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-pull);
  color: var(--ink);
  margin-bottom: var(--space-em);
}
[data-design="a"] .cb-footer__addr {
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  letter-spacing: .06em;
  color: var(--muted);
}
[data-design="a"] .cb-footer__phone,
[data-design="a"] .cb-footer__email {
  display: block;
  font-family: var(--font-caption);
  font-size: var(--text-foot);
  letter-spacing: .06em;
  color: var(--moss);
  text-decoration: none;
  margin-bottom: var(--space-em);
}
[data-design="a"] .cb-footer__license {
  font-family: var(--font-caption);
  font-size: var(--text-cap);
  letter-spacing: .10em;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: var(--space-stop);
}

/* =============================================================
   REDUCED MOTION fallbacks
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .cb-weatherwash { animation: none; }
  [data-design="a"] .cb-weatherwash::before { animation: none; transform: translateX(16%); }
  [data-design="a"] .cb-drawer,
  [data-design="a"] .cb-drawer__sheet,
  [data-design="a"] .cb-burger__rule { transition: none; }
  [data-design="a"] .cb-sky__gradient { animation: none; }
  [data-design="a"] .cb-sky__gradient::before { animation: none; transform: translateY(12%); }
  [data-design="a"] .cb-kb { animation: none; }
  [data-design="a"] .cb-kb--1 { opacity: 1; transform: scale(1.04) translate(0,0); }
  [data-design="a"] .cb-kb--2,
  [data-design="a"] .cb-kb--3 { opacity: 0; }
  [data-design="a"] .cb-sky__title,
  [data-design="a"] .cb-sky__subtitle,
  [data-design="a"] .cb-sky__proof { animation: none; transform: none; }
  [data-design="a"] .cb-cta__mat { animation: none; }
  [data-design="a"] .cb-cta,
  [data-design="a"] .cb-cta__arrow { transition: none; }
  [data-design="a"] .cb-cta:hover .cb-cta__mat,
  [data-design="a"] .cb-cta:focus-visible .cb-cta__mat { opacity: 1; }
  [data-design="a"] .cb-pointer__contour { animation: none; transform: scaleY(1); }
  [data-design="a"] .cb-plate__photo { transition: none; transform: scale(1.06) translateX(1.5%); }
  [data-design="a"] .cb-process__step { transform: none; transition: none; }
  [data-design="a"] .cb-field input,
  [data-design="a"] .cb-field select,
  [data-design="a"] .cb-field textarea,
  [data-design="a"] .cb-send,
  [data-design="a"] .cb-send__mat,
  [data-design="a"] .cb-note { transition: none; }
}

/* =============================================================
   MOBILE — 768px
   ============================================================= */
@media (max-width: 768px) {
  [data-design="a"] .cb-sky__deck { grid-template-columns: 1fr; }
  [data-design="a"] .cb-plate,
  [data-design="a"] .cb-plate--rev { grid-template-columns: 1fr; direction: ltr; }
  [data-design="a"] .cb-services__grid { grid-template-columns: 1fr; gap: var(--space-spread); }
  [data-design="a"] .cb-about__wrap { grid-template-columns: 1fr; }
  [data-design="a"] .cb-footer__wrap { grid-template-columns: 1fr; gap: var(--space-frame); }
  [data-design="a"] .cb-form { grid-template-columns: 1fr; gap: var(--space-frame); }
}

/* =============================================================
   MOBILE — 560px
   ============================================================= */
@media (max-width: 560px) {
  [data-design="a"] .cb-header__bar { padding: var(--space-stop); }
  [data-design="a"] .cb-drawer__sheet { width: 100vw; border-left: none; }
  [data-design="a"] .cb-sky__panel { height: 65vh; min-height: 360px; }
  [data-design="a"] .cb-sky__plate { padding: 0 var(--space-stop) var(--space-frame); }
  [data-design="a"] .cb-plates { padding: var(--space-spread) var(--space-stop); }
  [data-design="a"] .cb-inquiry__wrap { padding: var(--space-spread) var(--space-stop); }
  [data-design="a"] .cb-process__wrap { padding: var(--space-spread) var(--space-stop); }
  [data-design="a"] .cb-services__wrap { padding: var(--space-spread) var(--space-stop); }
  [data-design="a"] .cb-about__wrap { padding: var(--space-spread) var(--space-stop); }
  [data-design="a"] .cb-footer__wrap { padding: var(--space-frame) var(--space-stop); }
  [data-design="a"] .cb-cta { width: 100%; justify-content: space-between; padding: 14px 20px; }
}

/* =============================================================
   MOBILE — 390px
   ============================================================= */
@media (max-width: 390px) {
  [data-design="a"] .cb-logo__mark { font-size: 19px; }
  [data-design="a"] .cb-sky__title { font-size: 30px; }
  [data-design="a"] .cb-funnel-options { gap: var(--space-em); }
}

/* =============================================================
   MOBILE — 320px
   ============================================================= */
@media (max-width: 320px) {
  [data-design="a"] .cb-logo__mark { font-size: 17px; }
  [data-design="a"] .cb-sky__title { font-size: 26px; }
  [data-design="a"] .cb-drawer__sheet { padding: var(--space-spread) var(--space-stop) var(--space-stop); }
  [data-design="a"] .cb-plate__mat { padding: 5px; }
  [data-design="a"] .cb-note { padding: var(--space-frame); }
  [data-design="a"] .cb-process__step { grid-template-columns: 40px 1fr; }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }