/* ============================================================
   Design A — Colophon (MIT Press) remapped → [data-design="a"]
   Jay Construction Contractors. Construction trade.
   Tokens: warm paper + drafting ink + colophon red (the one accent).
   ============================================================ */

[data-design="a"] {
  /* ~14 trade-rooted tokens */
  --col-paper:    #F4EFE6;
  --col-paper-2:  #EAE3D5;
  --col-ink:      #15161A;
  --col-ink-2:    #2B2D34;
  --col-muted:    #7C7569;
  --col-rule:     #C9C0AE;
  --col-mark:     #9B1E26;   /* colophon red — drafting-stamp accent */
  --col-mark-2:   #7A171D;
  --col-success:  #3F6E48;
  --col-critical: #7A1F1F;
  --design-a-primary: var(--col-mark);

  --col-display:  "Tiempos Headline","Source Serif 4","Iowan Old Style",Georgia,serif;
  --col-body:     "Tiempos Text","Source Serif 4","Iowan Old Style",Georgia,serif;
  --col-meta:     "Söhne Mono","JetBrains Mono",ui-monospace,monospace;
  --col-grotesque:"Söhne",-apple-system,"Helvetica Neue",system-ui,sans-serif;

  --col-hairline: 1px;
  --col-gutter:   24px;
  --col-folio:    48px;
  --col-press:    96px;        /* construction floor: 96 desktop */
  --col-press-tight: 64px;     /* 64 mobile */
  --col-press-mobile: 64px;
  --col-r-1: 2px;

  background: var(--col-paper);
  color: var(--col-ink);
  font-family: var(--col-body);
  line-height: 1.55;
}

[data-design="a"] .col-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[data-design="a"] .col-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--col-meta); font-size: 11px; color: var(--col-muted);
  text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 14px;
}
[data-design="a"] .col-mark-bar {
  display: inline-block; width: 2px; height: 11px; background: var(--col-mark);
}

/* ===== ELEMENT 1 — Header ===== */
[data-design="a"].col-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--col-paper);
  padding: 18px var(--col-folio) 0;
}
[data-design="a"] .rf-header__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--col-gutter); padding-bottom: 14px; flex-wrap: wrap;
}
[data-design="a"] .col-logo {
  display: inline-flex; align-items: baseline; gap: 14px;
  text-decoration: none; color: var(--col-ink);
}
[data-design="a"] .col-logo__name {
  font-family: var(--col-display); font-size: 21px; letter-spacing: -0.006em;
}
[data-design="a"] .col-logo__colophon { display: inline-flex; gap: 2px; align-items: flex-end; }
[data-design="a"] .col-logo__colophon i { display: block; width: 2px; background: var(--col-mark); }
[data-design="a"] .col-logo__colophon i:nth-child(1){ height: 6px; }
[data-design="a"] .col-logo__colophon i:nth-child(2){ height: 9px; }
[data-design="a"] .col-logo__colophon i:nth-child(3){ height: 12px; }
[data-design="a"] .col-logo__colophon i:nth-child(4){ height: 14px; }
[data-design="a"] .col-logo__colophon i:nth-child(5){ height: 12px; }
[data-design="a"] .col-logo__colophon i:nth-child(6){ height: 9px; }
[data-design="a"] .col-logo__colophon i:nth-child(7){ height: 6px; }
[data-design="a"] .col-burger {
  width: 44px; height: 44px; border: 1px solid var(--col-ink); background: transparent;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  cursor: pointer; padding: 0; border-radius: 0;
  transition: background 180ms;
}
[data-design="a"] .col-burger span { width: 16px; height: 1px; background: var(--col-ink); display: block; }
[data-design="a"] .col-burger:hover { background: var(--col-paper-2); }
[data-design="a"] .col-burger:focus-visible { outline: 2px solid var(--col-mark); outline-offset: 2px; }
[data-design="a"] .col-header__atmosphere { position: relative; height: 14px; pointer-events: none; }
[data-design="a"] .col-header__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--col-rule); }
[data-design="a"] .col-header__drift {
  position: absolute; bottom: 0; left: 50%;
  display: inline-flex; gap: 6px; align-items: flex-end;
  transform: translateX(-50%);
  animation: col-header-drift 24s cubic-bezier(0.5,0,0.5,1) infinite;
}
[data-design="a"] .col-header__drift .col-bar { display: block; width: 2px; background: var(--col-ink-2); }
[data-design="a"] .col-header__drift .col-bar:nth-child(1){ height: 6px; }
[data-design="a"] .col-header__drift .col-bar:nth-child(2){ height: 9px; }
[data-design="a"] .col-header__drift .col-bar:nth-child(3){ height: 14px; }
[data-design="a"] .col-header__drift .col-bar:nth-child(4){ height: 9px; }
[data-design="a"] .col-header__drift .col-bar:nth-child(5){ height: 6px; }
@keyframes col-header-drift {
  0%   { transform: translateX(calc(-50% - 14px)); }
  50%  { transform: translateX(calc(-50% + 14px)); }
  100% { transform: translateX(calc(-50% - 14px)); }
}

/* Drawer */
[data-design="a"] .col-drawer {
  position: fixed; inset: 0; background: var(--col-paper);
  padding: 96px var(--col-folio);
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 60;
}
[data-design="a"] .col-drawer[hidden] { display: none; }
[data-design="a"] .col-drawer__close {
  position: absolute; top: 24px; right: var(--col-folio);
  width: 44px; height: 44px; border: 1px solid var(--col-ink); background: transparent;
  font-size: 24px; line-height: 1; color: var(--col-ink); cursor: pointer; border-radius: 0;
}
[data-design="a"] .col-drawer__close:focus-visible { outline: 2px solid var(--col-mark); outline-offset: 2px; }
[data-design="a"] .col-drawer__nav { display: flex; flex-direction: column; gap: 18px; counter-reset: nav; }
[data-design="a"] .col-drawer__nav a {
  font-family: var(--col-display); font-size: 35px; color: var(--col-ink); text-decoration: none;
  border-bottom: 1px solid var(--col-rule); padding-bottom: 12px;
  display: flex; align-items: baseline; gap: 18px; counter-increment: nav;
}
[data-design="a"] .col-drawer__nav a::before {
  content: counter(nav, decimal-leading-zero) ".";
  font-family: var(--col-meta); font-size: 13px; color: var(--col-muted);
}
[data-design="a"] .col-drawer__nav a:hover { color: var(--col-mark); }
[data-design="a"] .col-drawer__foot { display: flex; flex-direction: column; gap: 10px; }
[data-design="a"] .col-drawer__phone {
  font-family: var(--col-grotesque); font-size: 17px; font-weight: 500;
  color: var(--col-ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
[data-design="a"] .col-drawer__phone--text { color: var(--col-mark); }
[data-design="a"] .col-drawer__caption {
  font-family: var(--col-meta); font-size: 11px; color: var(--col-muted);
  letter-spacing: 0.14em; text-transform: uppercase; margin: 6px 0 0;
}

/* ===== HERO + ELEMENT 3 (one animated backdrop layer) ===== */
[data-design="a"] .col-hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 9vw, 120px) var(--col-folio) clamp(48px, 6vw, 80px);
  background: var(--col-paper);
}
[data-design="a"] .col-hero__inner { position: relative; z-index: 2; max-width: 62ch; }
[data-design="a"] .col-hero__backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* drafting grid — single animated layer: a slow drafting "wash" breathing on a 9s cycle */
[data-design="a"] .col-hero__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(to right, var(--col-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--col-rule) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 18%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 22% 18%, #000 0%, transparent 72%);
  animation: col-hero-draft 9s ease-in-out infinite;
}
[data-design="a"] .col-hero__rule { position: absolute; background: var(--col-mark); opacity: 0; }
[data-design="a"] .col-hero__rule--h {
  left: var(--col-folio); top: 30%; height: 1px; width: 0;
  animation: col-hero-rule-h 2s cubic-bezier(0.85,0,0.15,1) 0.2s forwards;
}
[data-design="a"] .col-hero__rule--v {
  left: 22%; top: 18%; width: 1px; height: 0;
  animation: col-hero-rule-v 2s cubic-bezier(0.85,0,0.15,1) 0.5s forwards;
}
@keyframes col-hero-draft {
  0%,100% { transform: scale(1) translate(0,0); opacity: 0.26; }
  50%     { transform: scale(1.04) translate(8px,-6px); opacity: 0.40; }
}
@keyframes col-hero-rule-h { 0% { width: 0; opacity: 0; } 30% { opacity: 0.7; } 100% { width: 46%; opacity: 0.55; } }
@keyframes col-hero-rule-v { 0% { height: 0; opacity: 0; } 30% { opacity: 0.7; } 100% { height: 34%; opacity: 0.45; } }

[data-design="a"] .col-hero__headline {
  font-family: var(--col-display);
  font-size: clamp(35px, 6vw, 64px); line-height: 1.06; letter-spacing: -0.012em;
  color: var(--col-ink); margin: 0 0 20px; max-width: 18ch; opacity: 1;
}
[data-design="a"] .col-hero__sub {
  font-family: var(--col-body); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55;
  color: var(--col-ink-2); margin: 0 0 12px; max-width: 52ch; opacity: 1;
}
[data-design="a"] .col-hero__proof {
  font-family: var(--col-meta); font-size: 13px; letter-spacing: 0.04em;
  color: var(--col-muted); margin: 0 0 28px; opacity: 1;
}
[data-design="a"] .col-hero__chip {
  display: inline-block; margin-left: 16px;
  font-family: var(--col-meta); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--col-ink); border: 1px solid var(--col-ink); padding: 8px 10px;
}

/* ===== ELEMENT 2 — CTA ===== */
[data-design="a"] .col-cta {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 18px 14px 22px; min-height: 44px;
  background: var(--col-mark); color: #F7F1E5;
  font-family: var(--col-grotesque); font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none; border-radius: var(--col-r-1);
  transition: transform 180ms cubic-bezier(0.2,0,0,1), background 180ms cubic-bezier(0.2,0,0,1);
  position: relative; vertical-align: middle;
}
[data-design="a"] .col-cta__label { transition: transform 180ms cubic-bezier(0.2,0,0,1); }
[data-design="a"] .col-cta__bars {
  display: inline-flex; gap: 2px; align-items: flex-end;
  animation: col-cta-breath 5s cubic-bezier(0.5,0,0.5,1) infinite;
}
[data-design="a"] .col-cta__bars i { display: block; width: 2px; background: #F7F1E5; transition: height 180ms cubic-bezier(0.2,0,0,1), opacity 180ms; }
[data-design="a"] .col-cta__bars i:nth-child(1){ height: 6px; }
[data-design="a"] .col-cta__bars i:nth-child(2){ height: 9px; }
[data-design="a"] .col-cta__bars i:nth-child(3){ height: 12px; }
[data-design="a"] .col-cta__bars i:nth-child(4){ height: 14px; }
[data-design="a"] .col-cta__bars i:nth-child(5){ height: 12px; }
[data-design="a"] .col-cta__bars i:nth-child(6){ height: 9px; }
[data-design="a"] .col-cta__bars i:nth-child(7){ height: 6px; }
[data-design="a"] .col-cta:hover { background: var(--col-mark-2); }
[data-design="a"] .col-cta:hover .col-cta__label { transform: translateX(-2px); }
[data-design="a"] .col-cta:hover .col-cta__bars i { transform: translateY(-1px); }
[data-design="a"] .col-cta:active { transform: translateY(1px); }
[data-design="a"] .col-cta:active .col-cta__bars i { transform: scaleY(0.6); transform-origin: bottom; }
[data-design="a"] .col-cta:focus-visible { outline: 2px solid var(--col-ink); outline-offset: 3px; }
@keyframes col-cta-breath { 0%,100% { opacity: 0.78; } 50% { opacity: 1; } }

/* ===== ELEMENT 6 — Pointer (drafted-measured dimension line; not a button; always visible) ===== */
[data-design="a"] .col-pointer {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px var(--col-folio) 8px; background: var(--col-paper); min-height: 64px;
}
[data-design="a"] .col-pointer__dim { display: flex; flex-direction: column; align-items: center; height: 56px; }
[data-design="a"] .col-pointer__tick { width: 14px; height: 1px; background: var(--col-ink); }
[data-design="a"] .col-pointer__line {
  width: 1px; flex: 1; background: var(--col-mark);
  transform-origin: top; animation: col-pointer-draw 3.4s ease-in-out infinite;
}
[data-design="a"] .col-pointer__label {
  font-family: var(--col-meta); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--col-muted);
}
@keyframes col-pointer-draw {
  0%,100% { transform: scaleY(0.82); opacity: 0.55; }
  50%     { transform: scaleY(1);    opacity: 1; }
}

/* ===== ELEMENT 5 — Funnel ===== */
[data-design="a"] .col-funnel-section {
  padding: var(--col-press) var(--col-folio);
  background: var(--col-paper);
  display: flex; flex-direction: column; align-items: center;
  border-top: 1px solid var(--col-rule);
}
[data-design="a"] .col-funnel__title {
  font-family: var(--col-display); font-size: clamp(27px,4vw,35px); letter-spacing: -0.012em;
  color: var(--col-ink-2); margin: 0 0 36px; text-align: center; max-width: 22ch;
}
[data-design="a"] .col-funnel {
  width: 100%; max-width: 640px; background: var(--col-paper-2);
  padding: 36px 36px 28px; position: relative; box-shadow: 0 0 0 1px var(--col-ink); border-radius: 0;
}
[data-design="a"] .col-funnel__progress { display: inline-flex; gap: 6px; align-items: flex-end; margin-bottom: 28px; }
[data-design="a"] .col-funnel__progress i { display: block; width: 3px; background: var(--col-rule); transition: background 300ms cubic-bezier(0.32,0.08,0.24,1); }
[data-design="a"] .col-funnel__progress i:nth-child(1){ height: 8px; }
[data-design="a"] .col-funnel__progress i:nth-child(2){ height: 12px; }
[data-design="a"] .col-funnel__progress i:nth-child(3){ height: 16px; }
[data-design="a"] .col-funnel__progress i:nth-child(4){ height: 18px; }
[data-design="a"] .col-funnel__progress i:nth-child(5){ height: 16px; }
[data-design="a"] .col-funnel__progress i:nth-child(6){ height: 12px; }
[data-design="a"] .col-funnel__progress i:nth-child(7){ height: 8px; }
[data-design="a"] .col-funnel__progress i.is-on { background: var(--col-mark); }
[data-design="a"] .col-funnel__steps { position: relative; min-height: 260px; }
[data-design="a"] .col-funnel__step {
  border: 0; padding: 0; margin: 0;
  opacity: 0; filter: blur(6px); transform: translateY(8px);
  transition: opacity 420ms cubic-bezier(0.32,0.08,0.24,1), filter 420ms cubic-bezier(0.32,0.08,0.24,1), transform 420ms cubic-bezier(0.32,0.08,0.24,1);
}
[data-design="a"] .col-funnel__step.is-active { opacity: 1; filter: blur(0); transform: translateY(0); }
[data-design="a"] .col-funnel__legend {
  font-family: var(--col-meta); font-size: 11px; color: var(--col-muted);
  text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 18px; padding: 0;
}
[data-design="a"] .col-funnel__choices { display: flex; flex-direction: column; gap: 8px; }
[data-design="a"] .col-choice {
  display: flex; align-items: baseline; gap: 12px; min-height: 44px;
  font-family: var(--col-display); font-size: 21px; color: var(--col-ink);
  padding: 14px 16px; cursor: pointer; border: 1px solid transparent; background: var(--col-paper);
  transition: border-color 180ms cubic-bezier(0.2,0,0,1), transform 180ms cubic-bezier(0.2,0,0,1); position: relative;
}
[data-design="a"] .col-choice input { position: absolute; opacity: 0; pointer-events: none; }
[data-design="a"] .col-choice::before { content: ""; display: inline-block; width: 2px; height: 14px; background: var(--col-rule); transition: background 120ms; }
[data-design="a"] .col-choice:hover { border-color: var(--col-ink); }
[data-design="a"] .col-choice.is-chosen { border-color: var(--col-ink); }
[data-design="a"] .col-choice.is-chosen::before { background: var(--col-mark); }
[data-design="a"] .col-choice.is-flash { animation: col-choice-flash 220ms cubic-bezier(0.2,0,0,1); }
@keyframes col-choice-flash { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } }
[data-design="a"] .col-funnel__fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
[data-design="a"] .col-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--col-meta); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--col-muted); }
[data-design="a"] .col-field input {
  font-family: var(--col-display); font-size: 21px; color: var(--col-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--col-rule);
  padding: 6px 0; border-radius: 0; transition: border-color 180ms cubic-bezier(0.2,0,0,1);
}
[data-design="a"] .col-field input:focus { outline: none; border-bottom-color: var(--col-mark); border-bottom-width: 2px; }
[data-design="a"] .col-funnel__submit {
  font-family: var(--col-grotesque); font-size: 15px; font-weight: 500; min-height: 44px;
  padding: 12px 18px; background: var(--col-mark); color: #F7F1E5; border: 0; cursor: pointer;
  border-radius: var(--col-r-1); transition: background 180ms cubic-bezier(0.2,0,0,1);
}
[data-design="a"] .col-funnel__submit:hover { background: var(--col-mark-2); }
[data-design="a"] .col-funnel__nav { display: flex; justify-content: space-between; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--col-rule); }
[data-design="a"] .col-funnel__back {
  font-family: var(--col-meta); font-size: 11px; color: var(--col-muted);
  text-transform: uppercase; letter-spacing: 0.18em; background: transparent; border: 0; cursor: pointer; padding: 6px 0; min-height: 44px;
}
[data-design="a"] .col-funnel__back:hover { color: var(--col-ink); }
[data-design="a"] .col-funnel__back[hidden] { display: none; }
[data-design="a"] .col-funnel__done { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
[data-design="a"] .col-funnel__stamp { display: inline-flex; gap: 4px; align-items: flex-end; transform: scale(0.8); opacity: 0; animation: col-funnel-stamp 700ms cubic-bezier(0.32,0.08,0.24,1) forwards; }
[data-design="a"] .col-funnel__stamp i { display: block; width: 4px; background: var(--col-mark); }
[data-design="a"] .col-funnel__stamp i:nth-child(1){ height: 10px; }
[data-design="a"] .col-funnel__stamp i:nth-child(2){ height: 16px; }
[data-design="a"] .col-funnel__stamp i:nth-child(3){ height: 22px; }
[data-design="a"] .col-funnel__stamp i:nth-child(4){ height: 26px; }
[data-design="a"] .col-funnel__stamp i:nth-child(5){ height: 22px; }
[data-design="a"] .col-funnel__stamp i:nth-child(6){ height: 16px; }
[data-design="a"] .col-funnel__stamp i:nth-child(7){ height: 10px; }
@keyframes col-funnel-stamp { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
[data-design="a"] .col-funnel__thanks { font-family: var(--col-display); font-size: 21px; color: var(--col-ink); margin: 0; max-width: 32ch; }
[data-design="a"] .col-funnel__belowfunnel {
  font-family: var(--col-meta); font-size: 12px; line-height: 1.7; color: var(--col-muted);
  letter-spacing: 0.02em; max-width: 640px; margin: 24px 0 0; text-align: center;
}
[data-design="a"] .col-funnel__belowfunnel a { color: var(--col-ink); }

/* ===== ELEMENT 4 — Ledger (services) ===== */
[data-design="a"] .col-ledger { padding: var(--col-press) var(--col-folio); background: var(--col-paper); }
[data-design="a"] .col-ledger__head { margin-bottom: 56px; max-width: 56ch; }
[data-design="a"] .col-ledger h2 { font-family: var(--col-display); font-size: clamp(27px,4vw,35px); letter-spacing: -0.012em; color: var(--col-ink-2); margin: 0; line-height: 1.08; }
[data-design="a"] .col-ledger__rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--col-rule); }
[data-design="a"] .col-ledger__rows li {
  display: grid; grid-template-columns: 56px minmax(180px,1fr) minmax(0,2fr) auto;
  gap: var(--col-gutter); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--col-rule); position: relative;
}
[data-design="a"] .col-ledger__idx { font-family: var(--col-meta); font-size: 13px; color: var(--col-muted); }
[data-design="a"] .col-ledger__name { font-family: var(--col-display); font-size: 21px; color: var(--col-ink); }
[data-design="a"] .col-ledger__note { font-family: var(--col-body); font-size: 15px; color: var(--col-ink-2); line-height: 1.5; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge { display: inline-flex; gap: 3px; align-items: flex-end; width: 84px; height: 18px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i { width: 2px; background: var(--col-rule); transition: background 900ms cubic-bezier(0.85,0,0.15,1); }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(1){ height: 6px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(2){ height: 8px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(3){ height: 10px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(4){ height: 12px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(5){ height: 14px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(6){ height: 16px; }
[data-design="a"] .col-ledger__rows li .col-bars-gauge i:nth-child(7){ height: 18px; }
[data-design="a"] .col-ledger__rows li[data-drawn="1"] .col-bars-gauge i.is-on { background: var(--col-mark); }
@media (max-width: 768px) {
  [data-design="a"] .col-ledger { padding: var(--col-press-tight) var(--col-gutter); }
  [data-design="a"] .col-ledger__rows li { grid-template-columns: 40px 1fr; row-gap: 6px; }
  [data-design="a"] .col-ledger__note { grid-column: 1 / -1; }
  [data-design="a"] .col-ledger__rows li .col-bars-gauge { grid-column: 2; justify-self: end; }
}

/* ===== Work / proof ===== */
[data-design="a"] .col-work { padding: var(--col-press) var(--col-folio); background: var(--col-paper-2); border-top: 1px solid var(--col-rule); }
[data-design="a"] .col-work__title { font-family: var(--col-display); font-size: clamp(27px,4vw,35px); letter-spacing: -0.012em; color: var(--col-ink); margin: 0 0 28px; max-width: 20ch; line-height: 1.1; }
[data-design="a"] .col-work__lede { font-family: var(--col-display); font-size: clamp(19px,2.4vw,27px); line-height: 1.4; color: var(--col-ink-2); margin: 0 0 24px; max-width: 40ch; padding-left: 24px; border-left: 2px solid var(--col-mark); }
[data-design="a"] .col-work__note { font-family: var(--col-body); font-size: 17px; color: var(--col-ink-2); margin: 0 0 36px; max-width: 52ch; }

/* ===== Process (principles, depth-of-field) ===== */
[data-design="a"] .col-principles { padding: var(--col-press) var(--col-folio); background: var(--col-paper); border-top: 1px solid var(--col-rule); }
[data-design="a"] .col-principles__stack { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 36px; max-width: 30ch; counter-reset: principle; }
[data-design="a"] .col-principle {
  font-family: var(--col-display); font-size: clamp(21px,3.4vw,40px); line-height: 1.12; letter-spacing: -0.012em; color: var(--col-ink-2);
  filter: blur(2.8px); opacity: 0.42;
  transition: filter 1200ms cubic-bezier(0.5,0,0.5,1), opacity 1200ms cubic-bezier(0.5,0,0.5,1), color 1200ms cubic-bezier(0.5,0,0.5,1);
  counter-increment: principle; position: relative; padding-left: 28px;
}
[data-design="a"] .col-principle::before { content: counter(principle, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--col-meta); font-size: 13px; color: var(--col-muted); }
[data-design="a"] .col-principle.is-focus { filter: blur(0); opacity: 1; color: var(--col-ink); }

/* ===== About ===== */
[data-design="a"] .col-about { padding: var(--col-press) var(--col-folio); background: var(--col-paper); border-top: 1px solid var(--col-rule); }
[data-design="a"] .col-about__title { font-family: var(--col-display); font-size: clamp(27px,4vw,35px); letter-spacing: -0.012em; color: var(--col-ink); margin: 0 0 24px; }
[data-design="a"] .col-about__body { font-family: var(--col-body); font-size: clamp(17px,1.6vw,20px); line-height: 1.6; color: var(--col-ink-2); max-width: 60ch; margin: 0; }

/* ===== Footer ===== */
[data-design="a"] .col-footer { padding: var(--col-press-tight) var(--col-folio); background: var(--col-ink); color: var(--col-paper); border-top: 4px solid var(--col-mark); }
[data-design="a"] .col-footer__cols { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
[data-design="a"] .col-footer__col { flex: 1 1 220px; }
[data-design="a"] .col-footer__head { font-family: var(--col-display); font-size: 19px; margin: 0 0 12px; color: var(--col-paper); }
[data-design="a"] .col-footer__col p { font-family: var(--col-body); font-size: 15px; line-height: 1.7; margin: 0 0 4px; color: var(--col-rule); }
[data-design="a"] .col-footer__col a { color: var(--col-paper); text-decoration: none; }
[data-design="a"] .col-footer__col a:hover { color: var(--col-mark); }
[data-design="a"] .col-footer__cta { color: var(--col-mark) !important; font-family: var(--col-grotesque); }
[data-design="a"] .col-footer__caption { font-family: var(--col-meta); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--col-muted); margin: 0; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  [data-design="a"] .col-hero,
  [data-design="a"] .col-funnel-section,
  [data-design="a"] .col-work,
  [data-design="a"] .col-principles,
  [data-design="a"] .col-about { padding-left: var(--col-gutter); padding-right: var(--col-gutter); }
  [data-design="a"] .col-funnel-section { padding-top: var(--col-press-tight); padding-bottom: var(--col-press-tight); }
}
@media (max-width: 560px) {
  [data-design="a"].col-header { padding-inline: var(--col-gutter); }
  [data-design="a"] .col-logo__name { font-size: 17px; }
  [data-design="a"] .col-drawer { padding: 80px var(--col-gutter); }
  [data-design="a"] .col-drawer__close { right: var(--col-gutter); }
  [data-design="a"] .col-drawer__nav a { font-size: 27px; }
  [data-design="a"] .col-funnel { padding: 24px 22px 22px; }
  [data-design="a"] .col-choice { font-size: 17px; padding: 12px 14px; }
  [data-design="a"] .col-hero__chip { display: block; margin: 16px 0 0; width: max-content; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .col-header__drift { animation: none; transform: translate(-50%,0); }
  [data-design="a"] .col-cta, [data-design="a"] .col-cta__bars, [data-design="a"] .col-cta__bars i, [data-design="a"] .col-cta__label { animation: none; transition: none; }
  [data-design="a"] .col-hero__grid { animation: none; opacity: 0.30; }
  [data-design="a"] .col-hero__rule--h { animation: none; width: 46%; opacity: 0.55; }
  [data-design="a"] .col-hero__rule--v { animation: none; height: 34%; opacity: 0.45; }
  [data-design="a"] .col-pointer__line { animation: none; transform: scaleY(1); opacity: 1; }
  [data-design="a"] .col-principle { filter: none; opacity: 1; color: var(--col-ink); transition: none; }
  [data-design="a"] .col-ledger__rows li .col-bars-gauge i { transition: none; }
  [data-design="a"] .col-funnel__step { transition: none; filter: none; transform: none; opacity: 0; }
  [data-design="a"] .col-funnel__step.is-active { opacity: 1; }
  [data-design="a"] .col-funnel__stamp { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .col-choice.is-flash { animation: none; }
  [data-design="a"] .col-funnel__progress i { transition: none; }
}

/* ===== Mobile clip floor (MANDATORY — appended at bottom) ===== */
[data-design="a"].dq-design,[data-design="a"] .dq-design{max-width:100%;overflow-x:clip;}
[data-design="a"] *{min-width:0;}
[data-design="a"] img,[data-design="a"] svg:not([data-keep-size]){max-width:100%;height:auto;}

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