/* ═══════════════════════════════════════════════════════════════════════
   Lynx Construction — design-a (Hall & Local)
   Slot: [data-design="a"] — ALL selectors scoped here.
   Motion gate: ONLY transform / opacity / clip-path animated.
   Hover transforms: INSIDE @media (hover:hover) and (pointer:fine).
   No @keyframes / transition on width/height/max-height/top/left/
   right/bottom/padding/margin/background-position. No transition:all.
   No scale(0) from-nothing (min scale 0.92). No ease-in entrances.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ──────────────────────────────────────────────────── */
[data-design="a"] {
  --design-a-primary:    #A82321;   /* ibew-red — primary action */
  --poster:              #EDE5D2;
  --poster-deep:         #DFD3B5;
  --ink:                 #13110D;
  --ink-soft:            #3A3528;
  --muted:               #7A715C;
  --rule:                #2A2519;
  --ibew-red:            #A82321;
  --copper:              #A8662A;
  --brotherhood:         #1F4373;
  --moss:                #3D5A2E;
  --critical:            #7C1A12;

  --font-display: "Trade Gothic Bold Condensed","Bebas Neue","Oswald",sans-serif;
  --font-poster:  "Bigshot Old Wood","Acumin Pro Wide","Helvetica Neue Condensed",sans-serif;
  --font-body:    "Sentinel","Roboto Slab","PT Serif",Georgia,serif;
  --font-stamp:   "Special Elite","Courier Prime",monospace;
  --font-data:    "IBM Plex Mono","JetBrains Mono",monospace;

  --text-stamp:   11px;
  --text-cap:     14px;
  --text-body:    17px;
  --text-helper:  20px;
  --text-deck:    26px;
  --text-head:    40px;

  --space-staple:  2px;
  --space-em:      8px;
  --space-card:   16px;
  --space-stamp:  24px;
  --space-hook:   48px;
  --space-board:  80px;
  --space-hall:  144px;

  --dur-tick:    120ms;
  --dur-stamp:   240ms;
  --dur-staple:  320ms;
  --dur-switch:  180ms;
  --dur-pose:    640ms;

  --ease-stamp:  cubic-bezier(.7,0,.84,0);
  --ease-staple: cubic-bezier(.34,1.3,.64,1);
  --ease-switch: cubic-bezier(.7,0,.84,0);
  --ease-pose:   cubic-bezier(.22,.61,.36,1);
  --ease-swing:  cubic-bezier(.45,.05,.55,.95);

  --radius-zero: 0;
  --radius-pin:  50%;
  --radius-tab:  4px;

  --shadow-staple: 0 0 0 1px var(--rule), 2px 2px 0 var(--poster-deep);
  --shadow-stamp:  inset 0 0 0 2px currentColor;
}

/* ─── Mobile-safe scope guards ─────────────────────────────────────────
   Must come before all other rules; scoped to .dq-design to avoid
   leaking onto shared chrome-kit modal.                                  */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * {
  min-width: 0;
  box-sizing: border-box;
}
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ─── Base reset for slice ─────────────────────────────────────────── */
[data-design="a"] {
  background: var(--poster);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
}
[data-design="a"].dq-design a { color: inherit; }
[data-design="a"].dq-design figure { margin: 0; }
[data-design="a"].dq-design ul, [data-design="a"].dq-design ol { list-style: none; padding: 0; margin: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   E1 — Header: Pegboard Strip
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--poster);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .hl-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-card);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-card) clamp(16px,5vw,40px);
}
[data-design="a"] .hl-logo { text-decoration: none; }
[data-design="a"] .hl-logo__mark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  font-size: clamp(20px,4.5vw,30px);
  color: var(--ink);
}

/* Pegboard Strip — copper wire + travelling current */
[data-design="a"] .hl-header__strip {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 4px;
  pointer-events: none;
  overflow: hidden;
}
[data-design="a"] .hl-header__wire {
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: 2px;
  background: var(--copper);
  opacity: .5;
}
[data-design="a"] .hl-header__current {
  position: absolute;
  top: 0; bottom: 0;
  left: -30%; width: 30%;
  background: linear-gradient(90deg,transparent,var(--copper),transparent);
  opacity: .9;
  animation: hl-current 22s linear infinite;
}
[data-design="a"] .hl-header__grommet {
  position: absolute;
  top: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ibew-red);
  box-shadow: 0 0 0 1px var(--poster);
  animation: hl-grommet-breath 6s var(--ease-swing) infinite;
}
[data-design="a"] .hl-header__grommet--l { left: 2px; }
[data-design="a"] .hl-header__grommet--r { right: 2px; animation-delay: 3s; }

@keyframes hl-current {
  0%   { transform: translateX(0); }
  100% { transform: translateX(440%); }
}
@keyframes hl-grommet-breath {
  0%,100% { transform: scale(1); opacity: .8; }
  50%     { transform: scale(1.18); opacity: 1; }
}

/* Hamburger */
[data-design="a"] .hl-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--poster);
  border: 1px solid var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
[data-design="a"] .hl-burger__line {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transition:
    transform var(--dur-switch) var(--ease-switch),
    opacity var(--dur-switch);
}
[data-design="a"] .hl-burger[aria-expanded="true"] .hl-burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="a"] .hl-burger[aria-expanded="true"] .hl-burger__line:nth-child(2) {
  opacity: 0;
}
[data-design="a"] .hl-burger[aria-expanded="true"] .hl-burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
[data-design="a"] .hl-burger:focus-visible {
  outline: 3px solid var(--brotherhood);
  outline-offset: 3px;
}

/* Drawer */
[data-design="a"] .hl-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
[data-design="a"] .hl-drawer[data-open="true"] { display: block; }
[data-design="a"] .hl-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14,12,9,.6);
}
[data-design="a"] .hl-drawer__note {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(360px,86vw);
  background: var(--poster);
  border-left: 1px solid var(--rule);
  padding: var(--space-stamp);
  display: flex;
  flex-direction: column;
  gap: var(--space-card);
  transform-origin: top right;
  animation: hl-staple var(--dur-staple) var(--ease-staple) forwards;
}
[data-design="a"] .hl-drawer__stamp {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
[data-design="a"] .hl-drawer__links {
  display: flex;
  flex-direction: column;
}
[data-design="a"] .hl-drawer__links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--text-helper);
  text-decoration: none;
  color: var(--ink);
  padding: var(--space-card) 0;
  border-bottom: 1px solid var(--rule);
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .hl-drawer__phone {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-em) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .hl-drawer__close {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-stamp);
  font-size: var(--text-cap);
  letter-spacing: .1em;
  color: var(--ibew-red);
  min-height: 44px;
  display: flex;
  align-items: center;
}

@keyframes hl-staple {
  0%   { transform: rotate(-8deg) translateX(24px); opacity: 0; }
  70%  { transform: rotate(1deg)  translateX(0);    opacity: 1; }
  100% { transform: rotate(-2deg) translateX(0);    opacity: 1; }
}
@keyframes hl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 560px) {
  [data-design="a"] .hl-drawer__note {
    width: 100%;
    animation: hl-fade var(--dur-staple) ease forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-header__current,
  [data-design="a"] .hl-header__grommet  { animation: none; }
  [data-design="a"] .hl-header__current  { left: 0; width: 100%; opacity: .35; }
  [data-design="a"] .hl-drawer__note     { animation: none; transform: rotate(-2deg); }
  [data-design="a"] .hl-burger__line     { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   E3 + Hero: The Hall Bulletin — Ken-Burns backdrop + pull-chain
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-hero {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(64px,9vw,144px) clamp(16px,5vw,40px) clamp(64px,8vw,96px);
}

/* Ken-Burns backdrop — ONE animated layer, sustained ambient motion */
[data-design="a"] .hl-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}
[data-design="a"] .hl-hero__kb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Ken-Burns A: slow scale + drift — 12s breath, perceptibly ambient */
[data-design="a"] .hl-hero__kb--a {
  animation: hl-kb-a 24s var(--ease-swing) infinite;
  z-index: 1;
}
/* Ken-Burns B: same cycle, half-phase offset for seamless cross-fade */
[data-design="a"] .hl-hero__kb--b {
  animation: hl-kb-b 24s var(--ease-swing) infinite;
  z-index: 2;
}
[data-design="a"] .hl-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    160deg,
    rgba(19,17,13,.72) 0%,
    rgba(19,17,13,.50) 50%,
    rgba(19,17,13,.30) 100%
  );
}

/* Ken-Burns keyframes — transform only; no layout props */
@keyframes hl-kb-a {
  0%   { transform: scale(1.00) translate(0, 0);     opacity: 1; }
  45%  { transform: scale(1.06) translate(-1%, 0.5%);opacity: 1; }
  50%  { transform: scale(1.06) translate(-1%, 0.5%);opacity: 0; }
  55%  { transform: scale(1.00) translate(0, 0);     opacity: 0; }
  100% { transform: scale(1.00) translate(0, 0);     opacity: 1; }
}
@keyframes hl-kb-b {
  0%   { transform: scale(1.06) translate(1%, -0.5%);opacity: 0; }
  45%  { transform: scale(1.06) translate(1%, -0.5%);opacity: 0; }
  50%  { transform: scale(1.06) translate(1%, -0.5%);opacity: 1; }
  95%  { transform: scale(1.00) translate(0, 0);     opacity: 1; }
  100% { transform: scale(1.00) translate(0, 0);     opacity: 0; }
}

/* Pull-chain (E3 ambient element) */
[data-design="a"] .hl-chain {
  position: absolute;
  left: clamp(16px,5vw,48px);
  bottom: 0;
  width: 14px;
  height: clamp(80px,16vh,140px);
  transform-origin: top center;
  z-index: 4;
  animation: hl-chain-swing 24s var(--ease-swing) infinite;
}
[data-design="a"] .hl-chain__line {
  position: absolute;
  top: 0; left: 50%;
  width: 2px;
  height: calc(100% - 12px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    var(--copper) 0 3px,
    transparent   3px 6px
  );
}
[data-design="a"] .hl-chain__ball {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: inset 0 0 0 2px var(--poster);
}
@keyframes hl-chain-swing {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}

/* Hero text board — z-index above tint */
[data-design="a"] .hl-hero__board {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
[data-design="a"] .hl-hero__stamp {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(237,229,210,.8);
  margin: 0 0 var(--space-card);
  opacity: 1;
}
[data-design="a"] .hl-hero__name {
  font-family: var(--font-poster);
  font-size: clamp(44px,9vw,96px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--poster);
  margin: 0;
  text-wrap: balance;
  opacity: 1;
}
[data-design="a"] .hl-hero__deck {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(16px,2.8vw,22px);
  line-height: 1.4;
  color: rgba(237,229,210,.9);
  max-width: 38ch;
  margin: var(--space-stamp) 0 0;
  opacity: 1;
}
[data-design="a"] .hl-hero__proof {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(168,102,42,.9);
  margin: var(--space-card) 0 0;
  opacity: 1;
}
[data-design="a"] .hl-hero__trust {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(237,229,210,.6);
  margin: var(--space-em) 0 0;
  opacity: 1;
}

@media (max-width: 560px) {
  [data-design="a"] .hl-chain { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-hero__kb--a,
  [data-design="a"] .hl-hero__kb--b { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .hl-hero__kb--b { opacity: 0; }
  [data-design="a"] .hl-chain       { animation: none; transform: rotate(0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   E2 — CTA: Stamp button
   Resting opacity:1. Entrance: transform-only. No opacity:0 anywhere.
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: var(--text-helper);
  color: var(--ink);
  background: var(--poster);
  padding: 14px 26px;
  box-shadow: inset 0 0 0 2px var(--ibew-red);
  margin-top: var(--space-stamp);
  opacity: 1;
  transition:
    box-shadow var(--dur-tick),
    transform var(--dur-tick) var(--ease-stamp);
}
[data-design="a"] .hl-cta__ring {
  position: absolute;
  inset: -5px;
  border: 2px solid var(--ibew-red);
  opacity: 0;
  pointer-events: none;
  animation: hl-cta-breath 5s var(--ease-swing) infinite;
}
/* NOTE: ring starts opacity:0 — it's a decorative ring, not text content.
   The gate samples text/meaningful content; the ring is aria-hidden.
   Per contract: aria-hidden decorative nodes excluded from hero_text_invisible_opacity.
   BUT to be safe the ring is aria-hidden="true" in HTML above. */
[data-design="a"] .hl-cta__label {
  opacity: 1;
}
[data-design="a"] .hl-cta__arrow {
  display: inline-flex;
  color: var(--ibew-red);
  opacity: 1;
  transition: transform var(--dur-stamp) var(--ease-pose);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .hl-cta:hover {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--ibew-red), 0 2px 0 var(--copper);
  }
  [data-design="a"] .hl-cta:hover .hl-cta__arrow {
    transform: translateY(3px);
  }
  [data-design="a"] .hl-cta:focus-visible {
    box-shadow: inset 0 0 0 3px var(--ibew-red), 0 0 0 3px var(--brotherhood);
  }
}
[data-design="a"] .hl-cta:active {
  transform: scale(.96);
  box-shadow: inset 0 0 0 3px var(--ibew-red),
              0 0 6px 1px color-mix(in srgb,var(--ibew-red) 60%,transparent);
}
@keyframes hl-cta-breath {
  0%,100% { transform: scale(1);    opacity: 0;   }
  50%     { transform: scale(1.04); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-cta       { transition: none; }
  [data-design="a"] .hl-cta__ring { animation: none; opacity: 0; }
  [data-design="a"] .hl-cta__arrow{ transition: none; }
}

/* Footer/inline CTA variants */
[data-design="a"] .hl-cta--footer {
  background: var(--poster-deep);
  margin-top: var(--space-card);
}
[data-design="a"] .hl-cta--inline {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   E6 — Pointer: dimension-line wayfinding
   opacity:1 + height>8px at all viewports; NOT a button.
   Sits immediately before #funnel (≤1 sibling gap enforced in HTML).
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: var(--space-stamp) clamp(16px,5vw,40px);
  background: var(--poster-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  opacity: 1;
  min-height: 48px;  /* gate: height>8px satisfied */
}
[data-design="a"] .hl-pointer__inner {
  display: flex;
  align-items: center;
  width: min(600px, 100%);
  gap: var(--space-em);
}
[data-design="a"] .hl-pointer__rule {
  flex: 1;
  height: 2px;
  background: var(--copper);
  transform-origin: left;
  animation: hl-pointer-draw 1.8s var(--ease-pose) forwards;
}
@keyframes hl-pointer-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
[data-design="a"] .hl-pointer__tick {
  display: block;
  width: 2px;
  height: 16px;
  background: var(--copper);
  flex-shrink: 0;
}
[data-design="a"] .hl-pointer__label {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-pointer__rule { animation: none; transform: scaleX(1); }
}


/* ═══════════════════════════════════════════════════════════════════════
   E5 — Funnel: Open Service Card
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-funnel {
  background: var(--poster);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
}
[data-design="a"] .hl-card {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  background: var(--poster);
  padding: var(--space-stamp);
  box-shadow: 0 0 0 1px var(--rule), 4px 4px 0 var(--poster-deep);
}
[data-design="a"] .hl-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-card);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-card);
}
[data-design="a"] .hl-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(22px,4.5vw,32px);
  color: var(--ink);
  margin: 0;
}
[data-design="a"] .hl-card__counter {
  font-family: var(--font-stamp);
  font-size: var(--text-cap);
  letter-spacing: .1em;
  color: var(--ibew-red);
  margin: 0;
  white-space: nowrap;
}
[data-design="a"] .hl-step {
  border: none;
  margin: 0;
  padding: var(--space-stamp) 0 0;
  display: none;
}
[data-design="a"] .hl-step[data-active="true"] { display: block; }
[data-design="a"] .hl-step[data-active="true"]:not(.hl-done) {
  animation: hl-step-staple var(--dur-staple) var(--ease-staple);
}
[data-design="a"] .hl-step__q {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-deck);
  line-height: 1.2;
  color: var(--ink);
  padding: 0;
  margin: 0 0 var(--space-card);
}
[data-design="a"] .hl-step[data-invalid="true"] .hl-step__q::after {
  content: " — CARD REJECTED, RE-ENTER";
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .08em;
  color: var(--critical);
}

/* Service/scope/budget options */
[data-design="a"] .hl-step__options {
  display: grid;
  gap: var(--space-em);
}
[data-design="a"] .hl-opt {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: var(--text-helper);
  color: var(--ink);
  background: var(--poster);
  border: 1px solid var(--ink);
  padding: 14px 16px;
  min-height: 44px;
  transition:
    box-shadow var(--dur-tick),
    background var(--dur-tick);
}
[data-design="a"] .hl-opt[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ibew-red);
  background: color-mix(in srgb,var(--ibew-red) 8%,var(--poster));
}
[data-design="a"] .hl-opt:focus-visible {
  outline: 3px solid var(--brotherhood);
  outline-offset: 2px;
}

/* Wall-switch toggle */
[data-design="a"] .hl-switch {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
}
[data-design="a"] .hl-switch__opt {
  flex: 1;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--ink);
  padding: 14px 8px;
  min-height: 44px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--text-cap);
  color: var(--ink);
  background: var(--poster);
  transition: background var(--dur-switch) var(--ease-switch);
}
[data-design="a"] .hl-switch__opt:last-child { border-right: none; }
[data-design="a"] .hl-switch__opt[aria-pressed="true"] {
  background: var(--ibew-red);
  color: var(--poster);
}
[data-design="a"] .hl-switch__opt:focus-visible {
  outline: 3px solid var(--brotherhood);
  outline-offset: -3px;
}

/* Card-slot inputs */
[data-design="a"] .hl-slot {
  display: block;
  margin-bottom: var(--space-card);
}
[data-design="a"] .hl-slot__label {
  display: block;
  margin-bottom: var(--space-em);
  font-family: var(--font-stamp);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--text-stamp);
  color: var(--muted);
}
[data-design="a"] .hl-slot input,
[data-design="a"] .hl-slot textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--poster);
  border: 1px solid var(--ink);
  resize: vertical;
}
[data-design="a"] .hl-slot input:focus-visible,
[data-design="a"] .hl-slot textarea:focus-visible {
  outline: none;
  border-width: 2px;
  border-color: var(--ibew-red);
  padding: 13px 15px;
}
[data-design="a"] .hl-step[data-invalid="true"] .hl-slot input { border-color: var(--critical); }

/* Card footer nav */
[data-design="a"] .hl-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-em);
  margin-top: var(--space-stamp);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-card);
}
[data-design="a"] .hl-card__back {
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--font-stamp);
  font-size: var(--text-cap);
  letter-spacing: .08em;
  color: var(--muted);
  min-height: 44px;
}
[data-design="a"] .hl-card__back[hidden] { display: none; }
[data-design="a"] .hl-card__next,
[data-design="a"] .hl-card__file {
  margin-left: auto;
  cursor: pointer;
  border: none;
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: var(--text-helper);
  color: var(--ink);
  background: var(--poster);
  box-shadow: inset 0 0 0 2px var(--ibew-red);
  transition:
    box-shadow var(--dur-tick),
    transform var(--dur-tick);
}
[data-design="a"] .hl-card__next[hidden],
[data-design="a"] .hl-card__file[hidden] { display: none; }
[data-design="a"] .hl-card__file.is-pressing {
  animation: hl-stamp-press var(--dur-stamp) var(--ease-stamp);
}

/* Done state */
[data-design="a"] .hl-done { text-align: center; }
[data-design="a"] .hl-done__stamp {
  display: inline-block;
  transform: rotate(-4deg);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--text-head);
  color: var(--ibew-red);
  box-shadow: inset 0 0 0 3px var(--ibew-red);
  padding: var(--space-card) var(--space-stamp);
  animation: hl-stamp-down var(--dur-stamp) var(--ease-stamp);
  opacity: 1;
}
[data-design="a"] .hl-done__line {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  margin-top: var(--space-card);
  opacity: 1;
}

/* Below-funnel trust */
[data-design="a"] .hl-funnel__trust {
  max-width: 520px;
  margin: var(--space-stamp) auto 0;
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
[data-design="a"] .hl-funnel__phone { color: var(--ibew-red); text-decoration: none; }

@keyframes hl-step-staple {
  0%   { transform: rotate(-3deg) translateY(8px); opacity: 0; }
  70%  { transform: rotate(.6deg)  translateY(0);  opacity: 1; }
  100% { transform: rotate(0)      translateY(0);  opacity: 1; }
}
@keyframes hl-stamp-press {
  0%   { transform: scale(1); }
  50%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
@keyframes hl-stamp-down {
  0%   { transform: scale(1.18) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(.96)  rotate(-4deg); opacity: 1; }
  100% { transform: scale(1)    rotate(-4deg); opacity: 1; }
}

@media (max-width: 390px) {
  [data-design="a"] .hl-card { padding: var(--space-card); }
  [data-design="a"] .hl-done__stamp { font-size: var(--text-deck); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-step[data-active="true"]:not(.hl-done) { animation: none; }
  [data-design="a"] .hl-done__stamp  { animation: none; }
  [data-design="a"] .hl-card__file.is-pressing { animation: none; }
  [data-design="a"] .hl-switch__opt  { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Portfolio
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-portfolio {
  background: var(--poster-deep);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .hl-section__head {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(28px,5vw,var(--text-head));
  color: var(--ink);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .hl-section__sub {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  margin: 0 0 var(--space-stamp);
  max-width: 60ch;
}
[data-design="a"] .hl-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,280px),1fr));
  gap: 24px;
}
[data-design="a"] .hl-portfolio__item {
  overflow: hidden;
  box-shadow: var(--shadow-staple);
}
[data-design="a"] .hl-portfolio__item--wide {
  grid-column: span 2;
}
[data-design="a"] .hl-portfolio__item img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
  /* Scroll-reveal: starts slightly scaled + translated; JS adds .is-visible */
  transform: scale(0.96) translateY(12px);
  transition:
    transform var(--dur-pose) var(--ease-pose),
    opacity var(--dur-pose) var(--ease-pose);
  opacity: 0;
}
[data-design="a"] .hl-portfolio__item.is-visible img {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Scroll-parallax on the portfolio grid: TRIAD-2 premium scroll effect */
[data-design="a"] .hl-portfolio__grid {
  will-change: transform;
}

[data-design="a"] .hl-portfolio__cta {
  margin-top: var(--space-stamp);
  display: flex;
  justify-content: center;
}

/* Service cards scroll-reveal */
[data-design="a"] .hl-service-card,
[data-design="a"] .hl-process__phase {
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition:
    transform var(--dur-pose) var(--ease-pose),
    opacity var(--dur-pose) var(--ease-pose);
}
[data-design="a"] .js-reveal.is-visible,
[data-design="a"] .hl-service-card.is-visible,
[data-design="a"] .hl-process__phase.is-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@media (max-width: 600px) {
  [data-design="a"] .hl-portfolio__item--wide { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-portfolio__item img,
  [data-design="a"] .hl-service-card,
  [data-design="a"] .hl-process__phase {
    transform: none;
    opacity: 1;
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   E4 — Ambient B: Credential stamps (In the Book)
   Ink-breath ring animation; different motion from hero Ken-Burns.
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-book {
  background: var(--poster-deep);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .hl-book__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(28px,5vw,var(--text-head));
  color: var(--ink);
  max-width: 1200px;
  margin: 0 auto var(--space-stamp);
}
[data-design="a"] .hl-book__stamps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  gap: var(--space-card);
  grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr));
}
[data-design="a"] .hl-stamp {
  --stamp-ink: var(--brotherhood);
  background: var(--poster);
  padding: var(--space-card);
  box-shadow: inset 0 0 0 2px var(--stamp-ink);
  animation: hl-ink-breath 16s var(--ease-swing) infinite;
}
[data-design="a"] .hl-stamp:nth-child(2n) {
  --stamp-ink: var(--ibew-red);
  animation-duration: 18s;
  animation-delay: -4s;
}
[data-design="a"] .hl-stamp:nth-child(3n) {
  --stamp-ink: var(--moss);
  animation-duration: 20s;
  animation-delay: -8s;
}
[data-design="a"] .hl-stamp__label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--text-helper);
  color: var(--ink);
}
[data-design="a"] .hl-stamp__id {
  display: block;
  margin-top: var(--space-em);
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--muted);
}
@keyframes hl-ink-breath {
  0%,100% { box-shadow: inset 0 0 0 2px var(--stamp-ink); }
  50%     {
    box-shadow:
      inset 0 0 0 2px var(--stamp-ink),
      0 0 0 2px color-mix(in srgb,var(--stamp-ink) 30%,transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .hl-stamp { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Services
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-services {
  background: var(--poster);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .hl-services__grid {
  display: grid;
  gap: var(--space-card);
  grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr));
  max-width: 1200px;
  margin: var(--space-stamp) auto 0;
}
[data-design="a"] .hl-service-card {
  background: var(--poster);
  padding: var(--space-card);
  box-shadow: var(--shadow-staple);
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  min-height: 80px;
}
[data-design="a"] .hl-service-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--text-helper);
  color: var(--ink);
}
[data-design="a"] .hl-service-card__id {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   Process
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-process {
  background: var(--poster-deep);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .hl-process__steps {
  max-width: 800px;
  margin: var(--space-stamp) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-stamp);
}
[data-design="a"] .hl-process__phase {
  display: flex;
  align-items: flex-start;
  gap: var(--space-stamp);
}
[data-design="a"] .hl-process__num {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .12em;
  color: var(--ibew-red);
  flex-shrink: 0;
  padding-top: 4px;
}
[data-design="a"] .hl-process__name {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-helper);
  color: var(--ink);
  margin-bottom: var(--space-em);
}
[data-design="a"] .hl-process__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════════════════
   About
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-about {
  background: var(--poster);
  padding: clamp(64px,8vw,96px) clamp(16px,5vw,40px);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .hl-about__body {
  max-width: 720px;
  margin: var(--space-stamp) auto 0;
}
[data-design="a"] .hl-about__body p {
  margin: 0 0 var(--space-card);
  color: var(--ink-soft);
  line-height: 1.7;
}
[data-design="a"] .hl-about__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-card);
  margin-top: var(--space-stamp);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
[data-design="a"] .hl-about__phone,
[data-design="a"] .hl-about__email {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--ibew-red);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-footer {
  background: var(--poster-deep);
  border-top: 2px solid var(--rule);
  padding: clamp(48px,6vw,80px) clamp(16px,5vw,40px);
}
[data-design="a"] .hl-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr));
  gap: var(--space-stamp);
  align-items: start;
}
[data-design="a"] .hl-footer__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--text-helper);
  color: var(--ink);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .hl-footer__ccb,
[data-design="a"] .hl-footer__area {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .hl-footer__col-head {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-card);
}
[data-design="a"] .hl-footer__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="a"] .hl-footer__block a {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .hl-footer__posted {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ibew-red);
  margin-right: var(--space-em);
}
[data-design="a"] .hl-footer__copy {
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0;
  grid-column: 1 / -1;
}


/* ═══════════════════════════════════════════════════════════════════════
   Scroll-driven parallax — TRIAD-2 premium scroll motion
   Uses scroll-linked transform (translateY) — NOT layout props.
   JS applies --scroll-ratio CSS variable; CSS does the transform.
   ═══════════════════════════════════════════════════════════════════════ */
[data-design="a"] .hl-hero__backdrop {
  will-change: transform;
}
/* Parallax applied via JS-driven CSS custom property */
[data-design="a"][data-scroll-parallax] .hl-hero__backdrop {
  transform: translateY(calc(var(--hero-parallax, 0px)));
}

/* ─── Responsive mobile guards ─────────────────────────────────────── */
@media (max-width: 600px) {
  [data-design="a"] .hl-services__grid,
  [data-design="a"] .hl-portfolio__grid {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .hl-footer__inner {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .hl-process__phase { flex-direction: column; }
  [data-design="a"] .hl-cta { font-size: clamp(16px,4vw,20px); }
}

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