/* ============================================================
   design-a — Service Entrance (remapped from service-entrance)
   Slot-scoped [data-design="a"] everywhere. Trade: plumber.
   ============================================================ */

[data-design="a"] {
  --design-a-primary: #A8631F;
  --se-porcelain: #F5EFE3;
  --se-card: #EDE3CF;
  --se-bakelite: #2B211B;
  --se-umber: #5A4634;
  --se-copper: #A8631F;
  --se-copper-hot: #D98A3F;
  --se-steel: #9B9483;
  --se-critical: #8E3B2C;
  --se-success: #5C6B47;

  --se-gauge: 4px;
  --se-knockout: 8px;
  --se-slot: 16px;
  --se-din: 24px;
  --se-rail: 40px;
  --se-deadfront: 80px;
  --se-deadfront-m: 56px;
  --se-service: 128px;

  --se-snap: 140ms;
  --se-settle: 260ms;
  --se-approach: 480ms;
  --se-ease-detent: cubic-bezier(0.7, -0.1, 0.25, 1.25);
  --se-ease-settle: cubic-bezier(0.22, 0.9, 0.3, 1);
  --se-ease-hum: cubic-bezier(0.45, 0, 0.55, 1);

  --se-r-plate: 2px;
  --se-r-porcelain: 999px;

  --se-e1: 0 1px 0 rgba(43,33,27,0.18);
  --se-e2: 0 2px 8px rgba(43,33,27,0.14);
  --se-e3: inset 0 1px 3px rgba(43,33,27,0.22);

  background: var(--se-porcelain);
  color: var(--se-bakelite);
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  isolation: isolate;
}

@media (max-width: 768px) {
  [data-design="a"] { font-size: 16px; }
}

[data-design="a"].dq-design * { box-sizing: border-box; }
[data-design="a"].dq-design h1, [data-design="a"].dq-design h2, [data-design="a"].dq-design h3 { margin: 0; }
[data-design="a"].dq-design p { margin: 0; }
[data-design="a"].dq-design ul { margin: 0; padding: 0; }

/* -------------------- 1. Header — the service line -------------------- */

[data-design="a"] .se-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--se-porcelain);
}
[data-design="a"] .se-header__bar {
  max-width: 1320px; margin-inline: auto;
  padding: 14px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
}
[data-design="a"] .se-logo { text-decoration: none; }
[data-design="a"] .se-logo__mark {
  font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 4.5vw, 1.45rem); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--se-bakelite);
  display: inline-block; max-width: 22ch;
  overflow-wrap: normal;
}
[data-design="a"] .se-serviceline {
  position: relative; height: 2px; background: rgba(90, 70, 52, 0.25);
  overflow: hidden;
}
[data-design="a"] .se-serviceline__gleam {
  position: absolute; top: 0; left: 0; height: 100%; width: 160px;
  background: linear-gradient(90deg, transparent, var(--se-copper-hot), transparent);
  transform: translateX(-160px);
  animation: se-gleam-travel 26s linear infinite;
}
@keyframes se-gleam-travel {
  0%   { transform: translateX(-160px); }
  100% { transform: translateX(calc(100vw + 160px)); }
}
[data-design="a"] .se-burger {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  background: none; border: 1px solid var(--se-steel); border-radius: var(--se-r-plate);
  cursor: pointer;
}
[data-design="a"] .se-burger__bar {
  width: 18px; height: 2px; background: var(--se-bakelite);
  transition: transform var(--se-snap) var(--se-ease-detent), opacity var(--se-snap) linear;
}
[data-design="a"] .se-burger[aria-expanded="true"] .se-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .se-burger[aria-expanded="true"] .se-burger__bar:nth-child(2) { opacity: 0; }
[data-design="a"] .se-burger[aria-expanded="true"] .se-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="a"] .se-drawer {
  position: fixed; inset: 0; z-index: 39; display: grid; justify-items: end;
  background: rgba(43, 33, 27, 0.55);
}
[data-design="a"] .se-drawer[hidden] { display: none; }
[data-design="a"] .se-drawer__door {
  width: min(360px, 88vw); height: 100%; background: var(--se-card);
  box-shadow: var(--se-e2); padding: 96px var(--se-din) var(--se-din);
  transform-origin: right center;
  animation: se-door-swing var(--se-settle) var(--se-ease-settle) both;
  overflow-y: auto;
}
@keyframes se-door-swing {
  from { transform: translateX(24px) rotate(0.5deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0deg); opacity: 1; }
}
[data-design="a"] .se-drawer__stamp {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.18em; color: var(--se-umber); margin: 0 0 var(--se-slot);
}
[data-design="a"] .se-drawer__index { list-style: none; }
[data-design="a"] .se-drawer__index a {
  display: block; padding: 14px var(--se-gauge); min-height: 44px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--se-bakelite); border-bottom: 1px dotted var(--se-steel);
}
[data-design="a"] .se-drawer__phone { margin-top: var(--se-rail); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .se-drawer__index a:hover { color: var(--se-copper); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-serviceline__gleam { animation: none; transform: translateX(30vw); }
  [data-design="a"] .se-drawer__door { animation: none; }
  [data-design="a"] .se-burger__bar { transition: none; }
}
@media (max-width: 380px) {
  [data-design="a"] .se-logo__mark { white-space: normal; line-height: 1.15; }
}

/* -------------------- Styled link chips (anchors) -------------------- */

[data-design="a"] .se-chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 10px 20px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--se-bakelite);
  background: var(--se-porcelain); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-plate); box-shadow: var(--se-e1);
  transition: transform var(--se-snap) var(--se-ease-detent), box-shadow var(--se-snap) linear;
}
[data-design="a"] .se-chip--phone { border-color: var(--se-copper); color: var(--se-copper); }
[data-design="a"] .se-chip--inline { min-height: auto; padding: 4px 10px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .se-chip:hover { transform: translateY(-1px); box-shadow: var(--se-e2); }
}
[data-design="a"] .se-chip:focus-visible { outline: 2px solid var(--se-copper); outline-offset: 2px; }
[data-design="a"] .se-chip:active { transform: translateY(1px); box-shadow: var(--se-e3); }

/* -------------------- 3. Hero — the Century Strata -------------------- */

[data-design="a"] .se-hero {
  position: relative; overflow: hidden; background: var(--se-porcelain);
  min-height: 72vh; display: grid; align-items: center;
  isolation: isolate;
}
[data-design="a"] .se-strata { position: absolute; inset: 0; z-index: 0; }
[data-design="a"] .se-strata__draw {
  width: 100%; height: 100%; display: block;
  clip-path: inset(0 0 0 0);
  animation: se-strata-trace 1.6s var(--se-ease-settle) both;
}
@keyframes se-strata-trace {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
[data-design="a"] .se-strata__hum {
  position: absolute; right: 4%; top: 22%; width: 420px; height: 460px;
  max-width: 60vw;
  background: radial-gradient(closest-side, rgba(217, 138, 63, 0.5), transparent 70%);
  animation: se-house-hum 5s var(--se-ease-hum) infinite;
}
@keyframes se-house-hum {
  0%, 100% { opacity: 0.28; transform: scale(0.96); }
  50%      { opacity: 0.62; transform: scale(1.04); }
}
[data-design="a"] .se-hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding: var(--se-service) clamp(20px, 5vw, 48px);
}
[data-design="a"] .se-hero__cta-wrap {
  position: relative; z-index: 2;
  max-width: 34ch;
  display: grid; gap: var(--se-slot);
}
[data-design="a"] .se-hero__proof {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--se-umber);
  opacity: 1;
}
[data-design="a"] .se-hero__headline {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: 0.01em;
  color: var(--se-bakelite); text-transform: none;
  opacity: 1;
}
[data-design="a"] .se-hero__subtitle {
  font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--se-umber); max-width: 40ch;
  opacity: 1;
}
@media (max-width: 768px) {
  [data-design="a"] .se-hero { min-height: 100svh; }
  [data-design="a"] .se-strata__hum { right: -10%; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-strata__draw { animation: none; }
  [data-design="a"] .se-strata__hum { animation: none; opacity: 0.45; }
}

/* -------------------- 2. Animated CTA — the energized switchplate -------------------- */

[data-design="a"] .se-cta {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 14px 28px;
  background: var(--se-porcelain); color: var(--se-bakelite);
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  font-size: clamp(1.05rem, 3.8vw, 1.3rem); letter-spacing: 0.07em;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--se-steel); border-radius: var(--se-r-plate);
  position: relative; box-shadow: var(--se-e1);
  transition: transform var(--se-snap) var(--se-ease-detent),
              box-shadow var(--se-snap) linear;
  width: fit-content;
  opacity: 1;
}
[data-design="a"] .se-cta::after {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--se-copper); border-radius: var(--se-r-plate);
  opacity: 0.35; pointer-events: none;
  animation: se-cta-hum 5s var(--se-ease-hum) infinite;
}
@keyframes se-cta-hum {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.8; }
}
[data-design="a"] .se-cta__dot {
  width: 12px; height: 12px; border-radius: var(--se-r-porcelain);
  background: var(--se-copper); flex: none;
  animation: se-cta-hum 5s var(--se-ease-hum) infinite;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .se-cta:hover { transform: translateY(-1px); box-shadow: var(--se-e2); }
  [data-design="a"] .se-cta:hover::after { opacity: 1; animation: none; }
}
[data-design="a"] .se-cta:focus-visible {
  outline: 2px solid var(--se-copper); outline-offset: 2px;
}
[data-design="a"] .se-cta:active { transform: translateY(1px); box-shadow: var(--se-e3); }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-cta::after,
  [data-design="a"] .se-cta__dot { animation: none; opacity: 0.7; }
}

/* -------------------- 7. Scroll handoff -------------------- */

[data-design="a"] .se-handoff {
  max-width: 1320px; margin-inline: auto;
  padding: var(--se-rail) clamp(20px, 5vw, 48px) 0;
}
[data-design="a"] .se-handoff__caption {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--se-umber);
}
@supports (animation-timeline: view()) {
  [data-design="a"] .se-strata__era:nth-of-type(1) {
    animation: se-era-lift linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="a"] .se-strata__era:nth-of-type(2) {
    animation: se-era-lift-mid linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="a"] .se-strata__hum {
    animation-name: se-house-hum, se-hum-release;
    animation-duration: 5s, auto;
    animation-timing-function: var(--se-ease-hum), linear;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 80%;
  }
}
@keyframes se-era-lift {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-90px); opacity: 0.1; }
}
@keyframes se-era-lift-mid {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-40px); opacity: 0.45; }
}
@keyframes se-hum-release {
  from { opacity: 0.6; }
  to   { opacity: 0.08; }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    [data-design="a"] .se-strata__era:nth-of-type(1),
    [data-design="a"] .se-strata__era:nth-of-type(2) { animation: none; }
    [data-design="a"] .se-strata__hum { animation: none; opacity: 0.45; }
  }
}

/* -------------------- 4. Ambient B — the Load Ledger (services) -------------------- */

[data-design="a"] .se-ledger {
  padding: var(--se-deadfront) clamp(20px, 5vw, 48px);
  background: var(--se-porcelain);
}
[data-design="a"] .se-ledger__card {
  position: relative; max-width: 760px; margin-inline: auto;
  background: var(--se-card); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-plate); box-shadow: var(--se-e1);
  padding: var(--se-din); overflow: hidden;
}
[data-design="a"] .se-ledger__title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: clamp(1.25rem, 4vw, 1.55rem); color: var(--se-bakelite);
  margin: 0 0 var(--se-slot); padding-right: 56px;
}
[data-design="a"] .se-ledger__rows { list-style: none; }
[data-design="a"] .se-ledger__row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 0; border-bottom: 1px dotted var(--se-steel);
  font-size: 1.0625rem; line-height: 1.6; color: var(--se-bakelite);
}
[data-design="a"] .se-ledger__idx,
[data-design="a"] .se-ledger__amp {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--se-umber);
}
[data-design="a"] .se-ledger__label { flex: 1; }
[data-design="a"] .se-ledger__tracer {
  position: absolute; left: var(--se-din); right: var(--se-din); height: 2px;
  top: 84px; background: linear-gradient(90deg, var(--se-copper), var(--se-copper-hot));
  transform-origin: left center;
  animation: se-ledger-trace 14s var(--se-ease-hum) infinite;
  opacity: 0.55;
}
@keyframes se-ledger-trace {
  0%        { transform: translateY(0) scaleX(0); }
  10%       { transform: translateY(0) scaleX(1); }
  22%, 24%  { transform: translateY(0) scaleX(1); opacity: 0.55; }
  25%       { transform: translateY(52px) scaleX(0); }
  35%       { transform: translateY(52px) scaleX(1); }
  47%, 49%  { transform: translateY(52px) scaleX(1); }
  50%       { transform: translateY(104px) scaleX(0); }
  60%       { transform: translateY(104px) scaleX(1); }
  72%, 74%  { transform: translateY(104px) scaleX(1); }
  75%       { transform: translateY(156px) scaleX(0); }
  85%       { transform: translateY(156px) scaleX(1); }
  97%, 100% { transform: translateY(156px) scaleX(1); opacity: 0; }
}
[data-design="a"] .se-toy {
  position: absolute; top: var(--se-din); right: var(--se-din);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--se-porcelain); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-porcelain); cursor: pointer; z-index: 2;
}
[data-design="a"] .se-toy__knob {
  width: 8px; height: 18px; border-radius: 4px; background: var(--se-umber);
  transform: rotate(0deg); transform-origin: center center;
  transition: transform var(--se-snap) var(--se-ease-detent);
}
[data-design="a"] .se-toy[aria-pressed="true"] .se-toy__knob {
  transform: rotate(180deg); background: var(--se-copper);
}
[data-design="a"] .se-ledger__lamp {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 85% 8%, rgba(217, 138, 63, 0.35), transparent 55%);
  opacity: 0; transition: opacity var(--se-approach) var(--se-ease-settle);
}
[data-design="a"] .se-ledger__card.is-lit .se-ledger__lamp { opacity: 1; }
[data-design="a"] .se-ledger__phoneline {
  max-width: 760px; margin: var(--se-din) auto 0; text-align: center;
  font-size: 1rem; color: var(--se-umber);
}
[data-design="a"] .se-ledger__phoneline .se-chip { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-ledger__tracer { animation: none; opacity: 0; }
  [data-design="a"] .se-toy__knob { transition: none; }
}

/* -------------------- Service Area / About cards -------------------- */

[data-design="a"] .se-area,
[data-design="a"] .se-about {
  padding: var(--se-deadfront) clamp(20px, 5vw, 48px);
  background: var(--se-porcelain);
}
[data-design="a"] .se-area__card,
[data-design="a"] .se-about__card {
  max-width: 760px; margin-inline: auto;
  background: var(--se-card); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-plate); box-shadow: var(--se-e1);
  padding: var(--se-din); display: grid; gap: var(--se-slot);
}
[data-design="a"] .se-area__title,
[data-design="a"] .se-about__title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: clamp(1.25rem, 4vw, 1.55rem); color: var(--se-bakelite);
}
[data-design="a"] .se-area__body,
[data-design="a"] .se-about__body {
  font-size: 1.0625rem; line-height: 1.65; color: var(--se-bakelite); max-width: 65ch;
}
[data-design="a"] .se-area__card .se-chip { width: fit-content; }

/* -------------------- 6. Pointer — the riser trace -------------------- */

[data-design="a"] .se-pointer {
  display: grid; justify-items: center; gap: 8px;
  padding: var(--se-rail) 0;
  opacity: 1;
}
[data-design="a"] .se-pointer__wire {
  clip-path: inset(0 0 100% 0);
  animation: se-riser-draw 5s var(--se-ease-hum) infinite;
}
@keyframes se-riser-draw {
  0%        { clip-path: inset(0 0 100% 0); }
  40%, 80%  { clip-path: inset(0 0 0 0); }
  100%      { clip-path: inset(0 0 0 0); opacity: 0; }
}
[data-design="a"] .se-pointer__node { opacity: 0.35; }
[data-design="a"] .se-pointer__node:nth-of-type(1) { animation: se-node-light 5s var(--se-ease-hum) infinite; animation-delay: 0.6s; }
[data-design="a"] .se-pointer__node:nth-of-type(2) { animation: se-node-light 5s var(--se-ease-hum) infinite; animation-delay: 1.2s; }
[data-design="a"] .se-pointer__node:nth-of-type(3) { animation: se-node-light 5s var(--se-ease-hum) infinite; animation-delay: 1.8s; }
@keyframes se-node-light {
  0%, 10%   { opacity: 0.35; }
  25%, 75%  { opacity: 1; }
  95%, 100% { opacity: 0.35; }
}
[data-design="a"] .se-pointer__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--se-umber);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-pointer__wire { animation: none; clip-path: inset(0 0 0 0); }
  [data-design="a"] .se-pointer__node { animation: none !important; opacity: 0.8; }
}

/* -------------------- 5. Funnel — the intake panel / Main Breaker -------------------- */

[data-design="a"] .se-funnel {
  padding: var(--se-deadfront) clamp(20px, 5vw, 48px); background: var(--se-porcelain);
}
[data-design="a"] .se-funnel__panel {
  max-width: 640px; margin-inline: auto; background: var(--se-card);
  border: 2px solid var(--se-steel); border-radius: 3px;
  box-shadow: var(--se-e2); padding: var(--se-din); position: relative;
}
[data-design="a"] .se-funnel__title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(1.25rem, 4vw, 1.55rem); margin: 0 0 4px; color: var(--se-bakelite);
}
[data-design="a"] .se-funnel__count {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  color: var(--se-umber); margin: 0 0 var(--se-din);
}
[data-design="a"] .se-step { border: 0; margin: 0; padding: 0; }
[data-design="a"] .se-step[hidden] { display: none; }
[data-design="a"] .se-step__legend {
  font-size: 1.125rem; font-weight: 600; color: var(--se-bakelite);
  margin-bottom: var(--se-slot); padding: 0;
}
[data-design="a"] .se-step__options { display: grid; gap: var(--se-slot); }
@media (min-width: 768px) {
  [data-design="a"] .se-step__options { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
[data-design="a"] .se-breaker {
  display: flex; align-items: center; gap: 14px; min-height: 56px;
  padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--se-porcelain); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-plate); color: var(--se-bakelite);
  font-family: 'Source Serif 4', Georgia, serif; font-size: 1.0625rem;
  transition: border-color 90ms linear, box-shadow 90ms linear;
  opacity: 1;
}
[data-design="a"] .se-breaker:focus-visible { outline: 2px solid var(--se-copper); outline-offset: 2px; }
[data-design="a"] .se-breaker__toggle {
  flex: none; width: 26px; height: 44px; border-radius: 3px;
  background: var(--se-steel); position: relative; perspective: 120px;
}
[data-design="a"] .se-breaker__toggle::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 24px; height: 14px;
  border-radius: 2px; background: var(--se-bakelite);
  transform-origin: center 100%;
}
[data-design="a"] .se-breaker.is-on { border-color: var(--se-copper); box-shadow: 0 0 0 1px var(--se-copper), var(--se-e1); }
[data-design="a"] .se-breaker.is-on .se-breaker__toggle::after {
  animation: se-flip var(--se-snap) var(--se-ease-detent) both;
  top: 6px; background: var(--se-copper);
}
@keyframes se-flip {
  0%   { transform: rotateX(0deg); }
  45%  { transform: rotateX(-38deg); }
  100% { transform: rotateX(0deg); }
}
[data-design="a"] .se-step--main { text-align: center; }
[data-design="a"] .se-main {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; padding: 8px; min-width: 44px;
}
[data-design="a"] .se-main:focus-visible { outline: 2px solid var(--se-copper); outline-offset: 4px; }
[data-design="a"] .se-main__track {
  display: block; width: 120px; height: 64px; border-radius: 4px;
  background: var(--se-steel); box-shadow: var(--se-e3); position: relative;
}
[data-design="a"] .se-main__handle {
  position: absolute; left: 10px; right: 10px; height: 26px; top: 30px;
  border-radius: 3px; background: var(--se-bakelite);
  transition: transform 220ms var(--se-ease-detent), background-color 220ms linear;
}
[data-design="a"] .se-main[aria-pressed="true"] .se-main__handle {
  transform: translateY(-22px); background: var(--se-copper);
}
[data-design="a"] .se-main__legend-text {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  letter-spacing: 0.14em; color: var(--se-umber);
}
[data-design="a"] .se-funnel__panel.is-energized {
  border-color: var(--se-copper);
}
[data-design="a"] .se-funnel__panel.is-energized::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
  background: radial-gradient(ellipse at 50% 0%, rgba(217, 138, 63, 0.28), transparent 60%);
  animation: se-energize var(--se-approach) var(--se-ease-settle) both;
}
@keyframes se-energize {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
[data-design="a"] .se-funnel__submit {
  margin-top: var(--se-din); min-height: 56px; padding: 14px 32px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 1.05rem;
  background: var(--se-copper); color: var(--se-porcelain);
  border: 0; border-radius: var(--se-r-plate); cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--se-settle) var(--se-ease-settle),
              transform var(--se-settle) var(--se-ease-settle);
}
[data-design="a"] .se-funnel__submit:not([disabled]) { opacity: 1; transform: translateY(0); }
[data-design="a"] .se-funnel__submit:focus-visible { outline: 2px solid var(--se-bakelite); outline-offset: 2px; }
[data-design="a"] .se-step.is-entering {
  animation: se-stamp var(--se-settle) var(--se-ease-settle) both;
}
@keyframes se-stamp {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
[data-design="a"] .se-knockout {
  width: 100%; padding: 12px var(--se-knockout); min-height: 44px;
  background: var(--se-card); border: 1px solid var(--se-steel);
  border-radius: var(--se-r-plate); box-shadow: var(--se-e3);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; color: var(--se-bakelite);
  margin-top: 6px;
}
[data-design="a"] .se-knockout:focus-visible { outline: 2px solid var(--se-copper); outline-offset: 2px; }
[data-design="a"] .se-step__field {
  display: block; margin-top: var(--se-slot);
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--se-umber);
}
[data-design="a"] .se-step__emergency-note {
  margin-top: var(--se-slot); font-size: 0.95rem; color: var(--se-umber);
}
[data-design="a"] .se-step__options--continue {
  margin-top: var(--se-din);
}
[data-design="a"] .se-breaker--continue {
  max-width: 220px;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .se-breaker.is-on .se-breaker__toggle::after { animation: none; }
  [data-design="a"] .se-step.is-entering { animation: none; }
  [data-design="a"] .se-funnel__panel.is-energized::before { animation: none; opacity: 1; }
  [data-design="a"] .se-main__handle { transition: none; }
}

/* -------------------- Footer -------------------- */

[data-design="a"] .se-footer {
  background: var(--se-bakelite); color: var(--se-porcelain);
  padding: var(--se-deadfront) clamp(20px, 5vw, 48px);
  border-top: 2px solid var(--se-copper);
}
[data-design="a"] .se-footer__inner {
  max-width: 1320px; margin-inline: auto;
  display: grid; gap: var(--se-rail);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
[data-design="a"] .se-footer__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--se-steel);
  margin-bottom: var(--se-slot);
}
[data-design="a"] .se-footer__fact { font-size: 1rem; color: var(--se-porcelain); }
[data-design="a"] .se-footer .se-chip { background: transparent; color: var(--se-copper-hot); border-color: var(--se-copper); }
[data-design="a"] .se-footer__copyright {
  max-width: 1320px; margin: var(--se-rail) auto 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  color: var(--se-steel); letter-spacing: 0.05em;
}

/* ============================================================
   MOBILE SAFETY + SELF-CENTERING (append, scoped to .dq-design)
   ============================================================ */

[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

[data-design="a"].dq-design .se-header__bar,
[data-design="a"].dq-design .se-hero__content,
[data-design="a"].dq-design .se-handoff,
[data-design="a"].dq-design .se-ledger__card,
[data-design="a"].dq-design .se-ledger__phoneline,
[data-design="a"].dq-design .se-area__card,
[data-design="a"].dq-design .se-about__card,
[data-design="a"].dq-design .se-funnel__panel,
[data-design="a"].dq-design .se-footer__inner,
[data-design="a"].dq-design .se-footer__copyright {
  margin-inline: auto;
}

@media (max-width: 768px) {
  [data-design="a"].dq-design {
    --se-deadfront: var(--se-deadfront-m);
  }
  [data-design="a"].dq-design .se-step__options {
    grid-template-columns: 1fr;
  }
  [data-design="a"].dq-design .se-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }
