/* ═══════════════════════════════════════════════════════════════
   Sierra Painting — Design A — styles.css
   Slot-scope: [data-design="a"].dq-design EVERYWHERE
   Token prefix: --design-a-* (primary exposed as --design-a-primary)
   Remapped from sunliner [data-design="a"] → [data-design="a"].dq-design
   Keyframes prefixed: sl- (collision-safe, same as design source)
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
[data-design="a"] {
  /* Color — warm knotty-pine-cream postcard field */
  --design-a-primary:      #CE5A22;  /* HOT accent — burnt-orange (CTA) */
  --design-a-canvas:       #F4EAD0;  /* page ground — warm postcard/oat */
  --design-a-canvas-deep:  #ECDDBC;  /* alternating section */
  --design-a-panel:        #E7D4AC;  /* stamped panel ground */
  --design-a-surface:      #FBF4E2;  /* card / postcard stock */
  --design-a-surface-2:    #FFFCF2;  /* elevated — drawer interior */
  --design-a-ink:          #2C2118;  /* primary text — walnut (never black) */
  --design-a-ink-2:        #4C3A29;  /* secondary text — saddle brown */
  --design-a-muted:        #7E6B51;  /* captions, meta */
  --design-a-faint:        #A08C6E;  /* hairline labels */
  --design-a-border:       #D9C49B;  /* card edge — postcard deckle */
  --design-a-border-soft:  #E6D6B4;  /* row separators */
  --design-a-line:         #C9B488;  /* hairline rules */
  --design-a-walnut:       #3A2A1B;  /* wood-panel dark band */
  --design-a-walnut-deep:  #2A1D12;  /* deepest panel / drawer */
  --design-a-gold:         #E4A627;  /* warm structural accent */
  --design-a-gold-deep:    #C0821A;  /* pressed gold */
  --design-a-gold-glow:    #F6C95C;  /* gold highlight */
  --design-a-orange-deep:  #A8430F;  /* pressed neon */
  --design-a-orange-glow:  #F1834A;  /* neon glow */
  --design-a-turq:         #2BA39A;  /* cool counterpoint */
  --design-a-turq-deep:    #1C7B74;  /* pressed turquoise */
  --design-a-avocado:      #7C8B38;  /* success green */
  --design-a-dusk-ground:  #14202C;  /* night ground */
  --design-a-dusk-ink:     #F4EAD0;  /* warm cream on night */

  /* Typography */
  --design-a-font-display: "Futura", "Futura PT", "Avenir Next", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --design-a-font-body:    "Hanken Grotesk", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --design-a-font-mono:    "Space Mono", "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Fluid type scale */
  --design-a-text-meta:  clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --design-a-text-cap:   clamp(0.875rem, 0.84rem + 0.2vw,  0.9375rem);
  --design-a-text-body:  clamp(1rem,     0.96rem + 0.3vw,  1.1875rem);
  --design-a-text-lead:  clamp(1.125rem, 1.05rem + 0.5vw,  1.375rem);
  --design-a-text-h3:    clamp(1.375rem, 1.2rem  + 0.9vw,  1.875rem);
  --design-a-text-h2:    clamp(1.875rem, 1.5rem  + 1.9vw,  3.125rem);
  --design-a-text-h1:    clamp(2.75rem,  1.8rem  + 4.6vw,  5.5rem);

  --design-a-leading-body:     1.6;
  --design-a-leading-tight:    1.05;
  --design-a-tracking-display: 0.005em;
  --design-a-tracking-mono:    0.14em;

  /* Spacing (motor-court scale) */
  --design-a-hair:    4px;
  --design-a-tight:   8px;
  --design-a-gap:     16px;
  --design-a-pad:     24px;
  --design-a-bay:     40px;
  --design-a-court:   64px;
  --design-a-section: clamp(72px, 6vw + 40px, 96px);
  --design-a-vista:   clamp(96px, 9vw, 128px);

  /* Motion */
  --design-a-ease-sunrise: cubic-bezier(0.16, 1, 0.3, 1);
  --design-a-ease-arc:     cubic-bezier(0.37, 0, 0.45, 1);
  --design-a-ease-flip:    cubic-bezier(0.66, 0, 0.34, 1);
  --design-a-ease-glow:    cubic-bezier(0.45, 0, 0.2, 1);
  --design-a-dur-tap:      150ms;
  --design-a-dur-warm:     240ms;
  --design-a-dur-settle:   560ms;
  /* Ambient cycles — all ≥18s for header, trade-range for others */
  --design-a-cyc-header:   30s;
  --design-a-cyc-sky:      10s;   /* color-wash breath: alive, perceptible */
  --design-a-cyc-cta:      5s;
  --design-a-cyc-pointer:  5.5s;
  --design-a-cyc-fleck:    18s;
  --design-a-cyc-pattern:  26s;

  /* Radius */
  --design-a-r-tab:  8px;
  --design-a-r-card: 14px;
  --design-a-r-sign: 20px;
  --design-a-r-pill: 9999px;

  /* Elevation */
  --design-a-shadow-card: 0 10px 26px rgba(44,33,26,0.14);
  --design-a-shadow-sign: 4px 4px 0 0 var(--design-a-walnut);
  --design-a-shadow-lift: 0 16px 40px rgba(44,33,26,0.22);
  --design-a-focus-ring:  0 0 0 3px rgba(43,163,154,0.55);
}

/* ─── BASE RESET (scoped) ────────────────────────────────────── */
[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 {
  font-family: var(--design-a-font-body);
  font-size: var(--design-a-text-body);
  line-height: var(--design-a-leading-body);
  color: var(--design-a-ink);
  background: var(--design-a-canvas);
  -webkit-font-smoothing: antialiased;
}
[data-design="a"].dq-design h1, [data-design="a"].dq-design h2, [data-design="a"].dq-design h3 {
  font-family: var(--design-a-font-display);
  letter-spacing: var(--design-a-tracking-display);
  line-height: var(--design-a-leading-tight);
  text-wrap: balance;
}
[data-design="a"].dq-design ul, [data-design="a"].dq-design ol { list-style: none; padding: 0; margin: 0; }
[data-design="a"].dq-design a { color: inherit; }
[data-design="a"].dq-design button { cursor: pointer; font-family: inherit; }
[data-design="a"].dq-design input, [data-design="a"].dq-design textarea { font-family: inherit; }

/* ─── WINDOWED-CENTER CONTAINER ─────────────────────────────── */
[data-design="a"] .sl-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 64px);
}

/* ─── E1 HEADER ─────────────────────────────────────────────── */
[data-design="a"] .sl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--design-a-walnut);
  color: var(--design-a-canvas);
  overflow: clip;
}
[data-design="a"] .sl-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--design-a-gap);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--design-a-tight) clamp(16px, 4vw, 40px);
}
/* Logo — one text child, outside drawer */
[data-design="a"] .sl-logo {
  display: inline-block;
  text-decoration: none;
  font-family: var(--design-a-font-display);
  font-weight: 700;
  letter-spacing: var(--design-a-tracking-display);
  font-size: clamp(1rem, 0.85rem + 0.8vw, 1.4rem);
  color: var(--design-a-canvas);
  background: var(--design-a-primary);
  padding: 6px 14px;
  border-radius: var(--design-a-r-tab);
  box-shadow: var(--design-a-shadow-sign);
}
[data-design="a"] .sl-logo__mark { display: inline-block; }
/* Atmospheric sunburst layer (ONE layer, ≥18s) */
[data-design="a"] .sl-header__sun {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(140px, 22vw, 320px);
  width: 140px;
  height: 140px;
  transform: translateY(-50%);
  color: var(--design-a-gold);
  opacity: 0.34;
  pointer-events: none;
}
[data-design="a"] .sl-sunburst {
  width: 100%;
  height: 100%;
  transform-origin: 60px 60px;
  animation: sl-sunturn var(--design-a-cyc-header) linear infinite;
}
[data-design="a"] .sl-sunburst__core {
  animation: sl-sunpulse 9s var(--design-a-ease-glow) infinite;
  transform-origin: 60px 60px;
}
@keyframes sl-sunturn { to { transform: rotate(360deg); } }
@keyframes sl-sunpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* Hamburger */
[data-design="a"] .sl-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--design-a-r-tab);
}
[data-design="a"] .sl-burger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--design-a-canvas);
  transition: transform var(--design-a-dur-warm) var(--design-a-ease-sunrise),
              opacity var(--design-a-dur-tap) linear;
}
[data-design="a"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(2) { transform: scaleX(0); }
[data-design="a"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="a"] .sl-burger:focus-visible { outline: none; box-shadow: var(--design-a-focus-ring); }
/* Drawer */
[data-design="a"] .sl-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--design-a-walnut-deep);
}
[data-design="a"] .sl-drawer[hidden] { display: none; }
[data-design="a"] .sl-drawer__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--design-a-canvas);
  font-size: 1.4rem;
  border-radius: var(--design-a-r-tab);
}
[data-design="a"] .sl-drawer__close:focus-visible { outline: none; box-shadow: var(--design-a-focus-ring); }
[data-design="a"] .sl-drawer__panel {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--design-a-gap);
  justify-content: center;
  padding: clamp(48px, 12vh, 120px) clamp(24px, 8vw, 80px);
  transform: translateY(-12px);
  opacity: 0;
}
[data-design="a"] .sl-drawer.is-open .sl-drawer__panel {
  animation: sl-drawer-in var(--design-a-dur-settle) var(--design-a-ease-sunrise) forwards;
}
@keyframes sl-drawer-in { to { transform: translateY(0); opacity: 1; } }
[data-design="a"] .sl-navlink {
  font-family: var(--design-a-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 3vw, 3rem);
  color: var(--design-a-canvas);
  text-decoration: none;
  width: max-content;
  padding: 4px 0;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .sl-navlink::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--design-a-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--design-a-dur-warm) var(--design-a-ease-sunrise);
}
[data-design="a"] .sl-navlink:focus-visible::after { transform: scaleX(1); }
[data-design="a"] .sl-navlink--phone {
  color: var(--design-a-gold-glow);
  font-size: clamp(1.1rem, 0.9rem + 1.5vw, 2rem);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sl-navlink:hover::after { transform: scaleX(1); }
  [data-design="a"] .sl-logo:hover { transform: translate(-1px, -1px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-sunburst,
  [data-design="a"] .sl-sunburst__core { animation: none; }
  [data-design="a"] .sl-drawer.is-open .sl-drawer__panel { animation: none; transform: none; opacity: 1; }
}
@media (max-width: 560px) {
  [data-design="a"] .sl-header__sun { left: auto; right: 12px; opacity: 0.22; width: 96px; height: 96px; }
}

/* ─── HERO (E3 + HERO) ──────────────────────────────────────── */
[data-design="a"] .sl-hero {
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--design-a-walnut-deep);
}
/* ONE animated layer — color-wash transformation motif */
[data-design="a"] .sl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Sky-shift substrate: VISIBLE ≥0.25 opacity, alive on first paint */
[data-design="a"] .sl-hero__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(228, 166, 39, 0.55) 0%,
    rgba(43, 163, 154, 0.30) 38%,
    rgba(206, 90, 34, 0.50) 72%,
    rgba(44, 33, 26, 0.85) 100%
  );
  animation: sl-skyshift var(--design-a-cyc-sky) var(--design-a-ease-glow) infinite alternate;
}
@keyframes sl-skyshift {
  from { opacity: 0.70; }
  to   { opacity: 1;    }
}
/* Color-wash fill: painting transformation motif */
[data-design="a"] .sl-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgba(228, 166, 39, 0.18) 0%,
    rgba(206, 90, 34, 0.28) 50%,
    rgba(43, 163, 154, 0.12) 100%
  );
  animation: sl-washshift 14s var(--design-a-ease-glow) infinite alternate;
}
@keyframes sl-washshift {
  from { transform: scaleX(0.94) scaleY(0.97); }
  to   { transform: scaleX(1.04) scaleY(1.02); }
}
/* Wet-edge advance: a bright edge drawing in from left */
[data-design="a"] .sl-hero__edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, var(--design-a-gold-glow), var(--design-a-primary), transparent);
  animation: sl-edge-in 3.5s var(--design-a-ease-sunrise) infinite alternate;
  transform-origin: top left;
}
@keyframes sl-edge-in {
  from { transform: scaleY(0.3); opacity: 0.4; }
  to   { transform: scaleY(1);   opacity: 0.9; }
}
/* Drifting flecks (within the same layer group) */
[data-design="a"] .sl-hero__flecks {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(246,201,92,0.9), transparent),
    radial-gradient(2px 2px at 70% 50%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(246,201,92,0.7), transparent),
    radial-gradient(2px 2px at 85% 22%, rgba(255,255,255,0.6), transparent);
  background-repeat: no-repeat;
  animation: sl-fleck var(--design-a-cyc-fleck) linear infinite;
}
@keyframes sl-fleck {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-18px, -26px, 0); }
}
/* Readability scrim */
[data-design="a"] .sl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20,24,28,0.72) 0%, rgba(20,24,28,0.18) 45%, transparent 68%);
}
/* HERO PLATE — text container ABOVE all backdrop layers (HARD z-index rule) */
[data-design="a"] .sl-hero__plate {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px);
  color: var(--design-a-canvas);
  display: grid;
  gap: var(--design-a-gap);
}
/* Hero text: opacity:1 at first paint — NO reveal gating */
[data-design="a"] .sl-hero__badge { margin: 0; }
[data-design="a"] .sl-hero__name {
  font-family: var(--design-a-font-display);
  font-weight: 800;
  font-size: var(--design-a-text-h1);
  line-height: var(--design-a-leading-tight);
  letter-spacing: var(--design-a-tracking-display);
  margin: 0;
  text-shadow: 0 2px 24px rgba(20,20,20,0.5);
}
[data-design="a"] .sl-hero__essence {
  font-size: var(--design-a-text-lead);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgba(20,20,20,0.4);
}
/* Decals */
[data-design="a"] .sl-decal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--design-a-font-mono);
  letter-spacing: var(--design-a-tracking-mono);
  text-transform: uppercase;
  font-size: var(--design-a-text-meta);
  padding: 5px 12px;
  border-radius: var(--design-a-r-pill);
}
[data-design="a"] .sl-decal--season { background: var(--design-a-gold); color: var(--design-a-walnut-deep); }
[data-design="a"] .sl-decal--cool   { background: var(--design-a-turq); color: var(--design-a-surface-2); }
@media (max-width: 640px) {
  [data-design="a"] .sl-hero__plate { margin-inline: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-hero__sky,
  [data-design="a"] .sl-hero__wash,
  [data-design="a"] .sl-hero__edge,
  [data-design="a"] .sl-hero__flecks { animation: none; }
}

/* ─── E2 — CTA (funnel anchor) ──────────────────────────────── */
[data-design="a"] .sl-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--design-a-tight);
  font-family: var(--design-a-font-display);
  font-weight: 700;
  font-size: var(--design-a-text-lead);
  letter-spacing: var(--design-a-tracking-display);
  text-decoration: none;
  color: var(--design-a-surface-2);
  background: var(--design-a-primary);
  padding: 14px 26px;
  min-height: 48px;
  min-width: 44px;
  border-radius: var(--design-a-r-sign);
  box-shadow: var(--design-a-shadow-sign);
  border: 0;
  transition: transform var(--design-a-dur-tap) var(--design-a-ease-sunrise),
              background-color var(--design-a-dur-warm) var(--design-a-ease-glow),
              box-shadow var(--design-a-dur-tap) var(--design-a-ease-sunrise);
}
[data-design="a"] .sl-cta__halo {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  animation: sl-neon var(--design-a-cyc-cta) var(--design-a-ease-glow) infinite;
}
@keyframes sl-neon {
  0%, 100% { box-shadow: 0 0 14px 1px rgba(241,131,74,0.28); }
  50%      { box-shadow: 0 0 28px 6px rgba(246,201,92,0.52); }
}
[data-design="a"] .sl-cta:focus-visible {
  outline: none;
  box-shadow: var(--design-a-focus-ring), var(--design-a-shadow-sign);
}
[data-design="a"] .sl-cta:active {
  transform: translate(3px, 3px);
  background: var(--design-a-orange-deep);
  box-shadow: 2px 2px 0 0 var(--design-a-walnut);
}
[data-design="a"] .sl-cta--drawer {
  background: var(--design-a-gold);
  color: var(--design-a-walnut-deep);
  font-size: var(--design-a-text-h3);
  margin-top: var(--design-a-bay);
  display: flex;
  min-height: 56px;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sl-cta:hover {
    transform: translate(-1px, -2px);
    background: var(--design-a-orange-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-cta__halo { animation: none; box-shadow: 0 0 14px 1px rgba(241,131,74,0.3); }
  [data-design="a"] .sl-cta { transition: background-color var(--design-a-dur-warm) linear; }
}

/* ─── SERVICES ──────────────────────────────────────────────── */
[data-design="a"] .sl-services {
  background: var(--design-a-canvas);
  padding-block: var(--design-a-section);
}
[data-design="a"] .sl-section-title {
  font-family: var(--design-a-font-display);
  font-weight: 800;
  font-size: var(--design-a-text-h2);
  letter-spacing: var(--design-a-tracking-display);
  color: var(--design-a-ink);
  margin: 0 0 var(--design-a-tight);
}
[data-design="a"] .sl-section-sub {
  font-size: var(--design-a-text-lead);
  color: var(--design-a-muted);
  margin: 0 0 var(--design-a-bay);
  max-width: 60ch;
}
[data-design="a"] .sl-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(16px, 3vw, 32px);
}
[data-design="a"] .sl-service-card {
  background: var(--design-a-surface);
  border: 1px solid var(--design-a-border);
  border-radius: var(--design-a-r-card);
  padding: var(--design-a-pad);
  box-shadow: var(--design-a-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--design-a-tight);
  transition: transform var(--design-a-dur-warm) var(--design-a-ease-sunrise),
              box-shadow var(--design-a-dur-warm) var(--design-a-ease-sunrise);
}
[data-design="a"] .sl-service-card strong {
  font-family: var(--design-a-font-display);
  font-size: var(--design-a-text-lead);
  color: var(--design-a-ink);
}
[data-design="a"] .sl-service-card span {
  font-size: var(--design-a-text-body);
  color: var(--design-a-ink-2);
  line-height: var(--design-a-leading-body);
}
[data-design="a"] .sl-service-card__icon {
  color: var(--design-a-primary);
  font-size: 0.65em;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sl-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--design-a-shadow-lift);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-service-card { transition: none; }
}

/* ─── E4 AMBIENT-B — PROCESS with atomic-pattern field ─────── */
[data-design="a"] .sl-ambient-b {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--design-a-canvas-deep);
  padding-block: var(--design-a-section);
}
[data-design="a"] .sl-ambient-b__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
}
[data-design="a"] .sl-atomfield { width: 130%; height: 100%; }
[data-design="a"] .sl-atomfield__g {
  animation: sl-atomdrift var(--design-a-cyc-pattern) var(--design-a-ease-glow) infinite alternate;
}
@keyframes sl-atomdrift {
  from { transform: translate3d(0, 0, 0); opacity: 0.7; }
  to   { transform: translate3d(-26px, 8px, 0); opacity: 1; }
}
[data-design="a"] .sl-ambient-b__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 64px);
  display: grid;
  gap: var(--design-a-bay);
}
[data-design="a"] .sl-ambient-b__title {
  font-family: var(--design-a-font-display);
  font-weight: 800;
  font-size: var(--design-a-text-h2);
  letter-spacing: var(--design-a-tracking-display);
  color: var(--design-a-ink);
  margin: 0;
}
[data-design="a"] .sl-proc-intro {
  font-size: var(--design-a-text-lead);
  color: var(--design-a-ink-2);
  margin: 0;
  max-width: 60ch;
}
[data-design="a"] .sl-process-track {
  display: grid;
  gap: clamp(20px, 4vw, 32px);
}
[data-design="a"] .sl-process-step {
  display: flex;
  gap: var(--design-a-pad);
  align-items: flex-start;
}
[data-design="a"] .sl-process-step__num {
  font-family: var(--design-a-font-mono);
  font-size: var(--design-a-text-cap);
  letter-spacing: var(--design-a-tracking-mono);
  color: var(--design-a-primary);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 28px;
}
[data-design="a"] .sl-process-step div {
  display: flex;
  flex-direction: column;
  gap: var(--design-a-tight);
}
[data-design="a"] .sl-process-step strong {
  font-family: var(--design-a-font-display);
  font-size: var(--design-a-text-lead);
  color: var(--design-a-ink);
}
[data-design="a"] .sl-process-step span {
  font-size: var(--design-a-text-body);
  color: var(--design-a-ink-2);
  line-height: var(--design-a-leading-body);
  max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-atomfield__g { animation: none; }
}
@media (max-width: 560px) {
  [data-design="a"] .sl-ambient-b__field { opacity: 0.10; }
}

/* ─── ABOUT ─────────────────────────────────────────────────── */
[data-design="a"] .sl-about {
  background: var(--design-a-canvas);
  padding-block: var(--design-a-section);
}
[data-design="a"] .sl-about__body {
  font-size: var(--design-a-text-lead);
  color: var(--design-a-ink-2);
  max-width: 68ch;
  line-height: var(--design-a-leading-body);
  margin: 0 0 var(--design-a-gap);
}
[data-design="a"] .sl-about__area { margin: 0; }

/* ─── E6 POINTER ────────────────────────────────────────────── */
[data-design="a"] .sl-pointer {
  display: grid;
  justify-items: center;
  gap: var(--design-a-tight);
  padding-block: var(--design-a-court);
  background: var(--design-a-canvas-deep);
  /* opacity:1 hard requirement — never opacity:0 */
  opacity: 1;
  min-height: 40px;
  cursor: pointer;
}
[data-design="a"] .sl-pointer__arc {
  width: 120px;
  height: 64px;
  overflow: visible;
}
[data-design="a"] .sl-pointer__horizon {
  stroke: var(--design-a-line);
  stroke-width: 2;
  stroke-linecap: round;
}
[data-design="a"] .sl-pointer__sun {
  fill: var(--design-a-gold);
  filter: drop-shadow(0 0 6px rgba(246,201,92,0.7));
  animation: sl-sundescend var(--design-a-cyc-pointer) var(--design-a-ease-arc) infinite;
  transform-origin: center;
}
@keyframes sl-sundescend {
  0%   { transform: translate(-22px, -10px); fill: var(--design-a-gold-glow); }
  60%  { transform: translate(0,     8px);   fill: var(--design-a-gold); }
  100% { transform: translate(22px,  14px);  fill: var(--design-a-primary); opacity: 0.85; }
}
[data-design="a"] .sl-pointer__label {
  font-family: var(--design-a-font-mono);
  letter-spacing: var(--design-a-tracking-mono);
  text-transform: uppercase;
  font-size: var(--design-a-text-meta);
  color: var(--design-a-muted);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-pointer__sun { animation: none; transform: translate(0, 6px); }
}
@media (max-width: 560px) {
  [data-design="a"] .sl-pointer { padding-block: var(--design-a-bay); }
}

/* ─── E5 FUNNEL ─────────────────────────────────────────────── */
[data-design="a"] .sl-funnel {
  background: var(--design-a-walnut);
  padding-block: var(--design-a-section);
  color: var(--design-a-canvas);
}
[data-design="a"] .sl-funnel__inner {
  display: grid;
  gap: var(--design-a-court);
}
[data-design="a"] .sl-funnel__head { display: grid; gap: var(--design-a-tight); }
[data-design="a"] .sl-funnel__title {
  font-family: var(--design-a-font-display);
  font-weight: 800;
  font-size: var(--design-a-text-h2);
  letter-spacing: var(--design-a-tracking-display);
  color: var(--design-a-canvas);
  margin: 0;
}
[data-design="a"] .sl-funnel__sub {
  font-size: var(--design-a-text-lead);
  color: var(--design-a-gold-glow);
  margin: 0;
  max-width: 56ch;
}
/* Step track: scroll-linked progress */
[data-design="a"] .sl-funnel__track {
  height: 4px;
  background: rgba(228,166,39,0.22);
  border-radius: var(--design-a-r-pill);
  overflow: clip;
}
[data-design="a"] .sl-funnel__track-fill {
  height: 100%;
  background: var(--design-a-gold);
  border-radius: var(--design-a-r-pill);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 260ms var(--design-a-ease-sunrise);
}
[data-design="a"] .sl-funnel__step-label {
  font-family: var(--design-a-font-mono);
  font-size: var(--design-a-text-meta);
  letter-spacing: var(--design-a-tracking-mono);
  color: var(--design-a-gold-glow);
  margin: 0;
  text-transform: uppercase;
}
/* Steps */
[data-design="a"] .sl-funnel__step { border: 0; padding: 0; margin: 0; }
[data-design="a"] .sl-funnel__legend {
  font-family: var(--design-a-font-display);
  font-weight: 700;
  font-size: var(--design-a-text-h3);
  color: var(--design-a-canvas);
  margin: 0 0 var(--design-a-gap);
  padding: 0;
}
[data-design="a"] .sl-funnel__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--design-a-gap);
}
/* Funnel option buttons — tactile choice cards */
[data-design="a"] .sl-funnel__opt {
  padding: 14px 22px;
  min-height: 52px;
  min-width: 44px;
  background: rgba(255,255,255,0.06);
  color: var(--design-a-canvas);
  border: 1.5px solid rgba(228,166,39,0.35);
  border-radius: var(--design-a-r-card);
  font-family: var(--design-a-font-display);
  font-weight: 600;
  font-size: var(--design-a-text-body);
  letter-spacing: var(--design-a-tracking-display);
  transition: transform var(--design-a-dur-tap) var(--design-a-ease-sunrise),
              background var(--design-a-dur-warm) var(--design-a-ease-glow),
              border-color var(--design-a-dur-warm) var(--design-a-ease-glow);
  /* resting opacity:1 — HARD RULE: no opacity:0 on funnel options */
}
[data-design="a"] .sl-funnel__opt.is-selected,
[data-design="a"] .sl-funnel__opt:active {
  background: var(--design-a-gold);
  color: var(--design-a-walnut-deep);
  border-color: var(--design-a-gold);
  transform: scale(0.97);
}
[data-design="a"] .sl-funnel__opt:focus-visible {
  outline: none;
  box-shadow: var(--design-a-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sl-funnel__opt:hover {
    background: rgba(228,166,39,0.18);
    border-color: var(--design-a-gold);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sl-funnel__opt { transition: background var(--design-a-dur-warm) linear; }
  [data-design="a"] .sl-funnel__track-fill { transition: none; }
}
/* Contact form */
[data-design="a"] .sl-funnel__form {
  display: grid;
  gap: var(--design-a-gap);
  max-width: 580px;
}
[data-design="a"] .sl-funnel__field-group { display: grid; gap: var(--design-a-tight); }
[data-design="a"] .sl-funnel__label {
  font-family: var(--design-a-font-mono);
  font-size: var(--design-a-text-cap);
  letter-spacing: var(--design-a-tracking-mono);
  text-transform: uppercase;
  color: var(--design-a-gold-glow);
}
[data-design="a"] .sl-funnel__required { color: var(--design-a-muted); }
[data-design="a"] .sl-funnel__field {
  background: var(--design-a-surface-2);
  border: 1.5px solid var(--design-a-border);
  border-radius: var(--design-a-r-tab);
  padding: 12px 14px;
  font-size: var(--design-a-text-body);
  color: var(--design-a-ink);
  width: 100%;
  min-height: 48px;
  transition: border-color var(--design-a-dur-warm) var(--design-a-ease-glow);
}
[data-design="a"] .sl-funnel__field:focus {
  outline: none;
  border-color: var(--design-a-turq);
  box-shadow: var(--design-a-focus-ring);
}
[data-design="a"] .sl-funnel__field--textarea {
  resize: vertical;
  min-height: 88px;
}
[data-design="a"] .sl-funnel__submit {
  justify-self: start;
  margin-top: var(--design-a-tight);
}
/* Confirmation */
[data-design="a"] .sl-funnel__confirm {
  display: grid;
  gap: var(--design-a-gap);
  text-align: center;
  justify-items: center;
  padding: var(--design-a-bay) 0;
}
[data-design="a"] .sl-funnel__confirm-mark {
  font-size: 3rem;
  color: var(--design-a-gold);
  margin: 0;
  line-height: 1;
}
[data-design="a"] .sl-funnel__confirm-title {
  font-family: var(--design-a-font-display);
  font-size: var(--design-a-text-h3);
  color: var(--design-a-canvas);
  margin: 0;
}
[data-design="a"] .sl-funnel__confirm-body,
[data-design="a"] .sl-funnel__confirm-phone {
  font-size: var(--design-a-text-body);
  color: var(--design-a-gold-glow);
  margin: 0;
}
/* Below-funnel info */
[data-design="a"] .sl-funnel__footer {
  border-top: 1px solid rgba(228,166,39,0.20);
  padding-top: var(--design-a-bay);
  display: grid;
  gap: var(--design-a-tight);
}
[data-design="a"] .sl-funnel__footer p {
  font-size: var(--design-a-text-body);
  color: var(--design-a-gold-glow);
  margin: 0;
}
[data-design="a"] .sl-funnel__next { color: var(--design-a-muted); font-size: var(--design-a-text-cap); }
[data-design="a"] .sl-link { color: var(--design-a-gold-glow); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sl-link:hover { color: var(--design-a-gold); }
}

/* ─── FOOTER ────────────────────────────────────────────────── */
[data-design="a"] .sl-footer {
  background: var(--design-a-walnut-deep);
  color: var(--design-a-canvas);
  padding-block: var(--design-a-court);
}
[data-design="a"] .sl-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--design-a-bay);
  justify-content: space-between;
}
[data-design="a"] .sl-footer__brand {
  display: grid;
  gap: var(--design-a-tight);
}
[data-design="a"] .sl-footer__name {
  font-family: var(--design-a-font-display);
  font-weight: 700;
  font-size: var(--design-a-text-h3);
  letter-spacing: var(--design-a-tracking-display);
}
[data-design="a"] .sl-footer__loc {
  font-family: var(--design-a-font-mono);
  font-size: var(--design-a-text-cap);
  letter-spacing: var(--design-a-tracking-mono);
  color: var(--design-a-gold-glow);
  text-transform: uppercase;
}
[data-design="a"] .sl-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--design-a-pad);
  align-items: center;
}
[data-design="a"] .sl-footer__links .sl-link {
  color: var(--design-a-gold-glow);
  font-size: var(--design-a-text-body);
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .sl-footer__copy {
  width: 100%;
  font-size: var(--design-a-text-meta);
  color: var(--design-a-muted);
  margin: 0;
  border-top: 1px solid rgba(228,166,39,0.14);
  padding-top: var(--design-a-pad);
}

/* ─── SCROLL-DRIVEN PARALLAX (TRIAD-2) ──────────────────────
   Genuine scroll-linked motion on hero→content handoff.
   Uses @scroll-timeline / animation-timeline where supported,
   falls back to JS-driven parallax for broad support.
   Applied via JS class .has-parallax and CSS custom property.
   ─────────────────────────────────────────────────────────── */
@supports (animation-timeline: scroll()) {
  [data-design="a"] .sl-hero__media {
    animation: sl-hero-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 40%;
  }
  @keyframes sl-hero-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(30px); }
  }
}

/* ─── MOBILE OVERFLOW GUARD (HARD CONTRACT — bottom of file) ── */
[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;
}

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