/* ══════════════════════════════════════════════════════════
   Crane Signal — design-b slice
   The Best Connection Electrical Contractors, Charlotte NC
   Scoped [data-design="b"] throughout.
   ══════════════════════════════════════════════════════════ */

[data-design="b"] {
  --design-b-primary: #C2451E;
  --cs-sky: #E8EAE6;
  --cs-haze: #D3D8D6;
  --cs-print: #F2F1EB;
  --cs-iron: #22262B;
  --cs-steel: #4A5560;
  --cs-primer: #C2451E;
  --cs-signal: #2E4A5A;
  --cs-glove: #FAF8F2;
  --cs-critical: #8E2A12;
  --cs-success: #3D5B3F;

  --cs-ease-hoist: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-ease-settle: cubic-bezier(0.34, 1.28, 0.44, 1);
  --cs-ease-throw: cubic-bezier(0.5, 0, 0.35, 1);

  --cs-pin: 4px;
  --cs-shackle: 8px;
  --cs-choker: 16px;
  --cs-sling: 24px;
  --cs-spreader: 40px;
  --cs-bay: 64px;
  --cs-lift: 96px;
  --cs-storey: 128px;

  --cs-r-none: 0;
  --cs-r-pin: 2px;
  --cs-r-hook: 999px;

  --cs-e1: 0 1px 0 rgba(34,38,43,0.18);
  --cs-e2: 0 12px 32px -16px rgba(34,38,43,0.35);

  background: var(--cs-sky);
  color: var(--cs-iron);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  display: block;
}

[data-design="b"].dq-design * { box-sizing: border-box; }

/* ─── Header — Element 1 (the boom line) ─── */
[data-design="b"] .cs-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--cs-sky);
  box-shadow: var(--cs-e1);
}
[data-design="b"] .cs-boom {
  position: absolute; inset: 0 0 auto 0; height: 2px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(34,38,43,0.28) 12%, rgba(34,38,43,0.28) 88%, transparent);
}
[data-design="b"] .cs-boom__trolley {
  position: absolute; top: 0; left: -14px; width: 14px; height: 2px;
  background: var(--cs-primer);
  animation: cs-trolley-run 28s linear infinite;
}
@keyframes cs-trolley-run {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(calc(100vw + 14px)); }
  100% { transform: translateX(0); }
}
[data-design="b"] .cs-header__bar {
  max-width: 1320px; margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 48px);
  min-height: 64px; display: flex; align-items: center; justify-content: space-between;
}
[data-design="b"] .cs-logo {
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif; font-weight: 600;
  font-size: 1.25rem; letter-spacing: 0.02em; color: var(--cs-iron);
  text-decoration: none; line-height: 1.15; max-width: 70%;
}
[data-design="b"] .cs-burger {
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  display: grid; place-content: center; gap: 7px;
}
[data-design="b"] .cs-burger__bar {
  display: block; width: 24px; height: 2px; background: var(--cs-iron);
  transition: transform 180ms var(--cs-ease-throw);
}
[data-design="b"] .cs-burger[aria-expanded="true"] .cs-burger__bar:first-child { transform: translateY(4.5px) rotate(45deg); }
[data-design="b"] .cs-burger[aria-expanded="true"] .cs-burger__bar:last-child  { transform: translateY(-4.5px) rotate(-45deg); }
[data-design="b"] .cs-burger:focus-visible { outline: 2px solid var(--cs-signal); outline-offset: 2px; }
[data-design="b"] .cs-roster {
  position: fixed; inset: 0; z-index: 50; background: var(--cs-iron);
  transform: translateY(-2%); opacity: 0;
  transition: transform 320ms var(--cs-ease-settle), opacity 240ms ease-out;
}
[data-design="b"] .cs-roster[hidden] { display: none; }
[data-design="b"] .cs-roster.cs-roster--open { transform: translateY(0); opacity: 1; }
[data-design="b"] .cs-roster__inner {
  max-width: 720px; margin-inline: auto; padding: 96px clamp(20px, 5vw, 48px) 64px;
  display: flex; flex-direction: column; gap: 4px;
  counter-reset: cs-crew;
}
[data-design="b"] .cs-roster a {
  color: var(--cs-glove); text-decoration: none;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.6rem;
  padding: 16px 0; border-bottom: 1px solid rgba(250,248,242,0.16);
  counter-increment: cs-crew;
  display: flex; align-items: baseline; gap: 16px; min-height: 44px;
}
[data-design="b"] .cs-roster a::before {
  content: counter(cs-crew, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: var(--cs-primer);
}
[data-design="b"] .cs-roster a:focus-visible { outline: 2px solid var(--cs-glove); outline-offset: 4px; }
[data-design="b"] .cs-roster__ctas { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
[data-design="b"] .cs-roster__phone,
[data-design="b"] .cs-roster__funnel {
  color: var(--cs-glove); text-decoration: none;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.25rem;
  min-height: 44px; display: flex; align-items: center;
}
[data-design="b"] .cs-roster__funnel {
  background: var(--cs-primer); text-align: center; justify-content: center;
  border-bottom: 0 !important; padding: 16px !important; border-radius: var(--cs-r-pin);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-boom__trolley { animation: none; transform: translateX(38vw); }
  [data-design="b"] .cs-roster { transition: opacity 120ms linear; transform: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .cs-header__bar { min-height: 56px; }
  [data-design="b"] .cs-logo { font-size: 1.05rem; }
  [data-design="b"] .cs-roster a { font-size: 1.3rem; }
}

/* ─── CTA — the Lever component (Element 2, phone) ─── */
[data-design="b"] .cs-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  background: var(--cs-primer); color: var(--cs-glove);
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: 1.0625rem; letter-spacing: 0.04em; text-decoration: none;
  padding: 16px 28px; border-radius: var(--cs-r-pin);
  min-height: 56px; transform-origin: 6px 50%;
  transition: transform 90ms var(--cs-ease-throw), background-color 180ms ease-out;
}
[data-design="b"] .cs-lever--frame {
  background: transparent; color: var(--cs-iron); border: 1.5px solid var(--cs-iron);
}
[data-design="b"] .cs-lever--frame .cs-cta__line { background: var(--cs-iron); }
[data-design="b"] .cs-cta__pin {
  position: absolute; left: 6px; top: 50%; width: 4px; height: 4px;
  transform: translateY(-50%); border-radius: 999px;
  background: rgba(250,248,242,0.55); transition: background-color 180ms ease-out;
}
[data-design="b"] .cs-lever--frame .cs-cta__pin { background: rgba(34,38,43,0.4); }
[data-design="b"] .cs-cta__line {
  position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--cs-iron); opacity: 0.55; transform-origin: left center;
  animation: cs-line-tension 5s var(--cs-ease-hoist) infinite;
}
@keyframes cs-line-tension {
  0%, 100% { transform: scaleX(0.92); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 0.7; }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cs-cta:hover { transform: translateY(-1px); }
  [data-design="b"] .cs-cta:hover .cs-cta__pin { background: var(--cs-glove); }
  [data-design="b"] .cs-lever--frame:hover .cs-cta__pin { background: var(--cs-primer); }
}
[data-design="b"] .cs-cta:focus-visible {
  outline: 2px solid var(--cs-signal); outline-offset: 3px;
}
[data-design="b"] .cs-cta:active { transform: rotate(-2.5deg) translateY(1px); }
[data-design="b"] .cs-cta:active .cs-cta__label { transform: rotate(2.5deg); }
[data-design="b"] .cs-cta__label { display: inline-block; transition: transform 90ms var(--cs-ease-throw); }
[data-design="b"] .cs-cta__hook { position: relative; }
[data-design="b"] .cs-services__cta { margin-top: var(--cs-sling); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-cta__line { animation: none; transform: scaleX(1); opacity: 0.55; }
  [data-design="b"] .cs-cta, [data-design="b"] .cs-cta__label { transition: none; }
}

/* ─── Hero — Element 3 (the high-steel horizon) ─── */
[data-design="b"] .cs-hero {
  position: relative; min-height: min(88vh, 820px); overflow: clip;
  display: flex; align-items: center; isolation: isolate;
  background: linear-gradient(180deg, #E4E7E3 0%, #D8DDDB 46%, #E9E3D4 100%);
}
[data-design="b"] .cs-hero__sky { position: absolute; inset: 0; z-index: 0; }
[data-design="b"] .cs-hero__haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 22% 8%, rgba(250,248,242,0.85), transparent 58%),
    radial-gradient(90% 50% at 82% 90%, rgba(74,85,96,0.16), transparent 60%);
}
[data-design="b"] .cs-frame {
  position: absolute; bottom: 0; width: 110%; left: -5%; height: 78%;
}
[data-design="b"] .cs-frame--near { height: 62%; }
[data-design="b"] .cs-load {
  position: absolute; top: 4%; left: 50%; margin-left: -120px;
  animation: cs-load-travel 26s var(--cs-ease-hoist) infinite alternate;
  will-change: transform;
}
[data-design="b"] .cs-load__beam {
  transform-origin: 120px 26px;
  animation: cs-load-sway 9s ease-in-out infinite;
}
@keyframes cs-load-travel {
  0%   { transform: translate(-16vw, 0); }
  55%  { transform: translate(6vw, 3vh); }
  100% { transform: translate(17vw, 1vh); }
}
@keyframes cs-load-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}
[data-design="b"] .cs-hero__col {
  position: relative; z-index: 2; width: 100%;
  max-width: 1320px; margin-inline: auto;
  padding-inline: max(clamp(20px, 5vw, 48px), calc((100vw - 1320px) / 2));
  padding-block: var(--cs-storey) var(--cs-lift);
}
[data-design="b"] .cs-hero__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8125rem; color: var(--cs-primer); margin: 0 0 16px;
  opacity: 1;
}
[data-design="b"] .cs-hero__headline {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 3.833rem); line-height: 1.1;
  color: var(--cs-iron); margin: 0 0 20px; max-width: 16ch;
  opacity: 1;
}
[data-design="b"] .cs-hero__subtitle {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.1875rem; line-height: 1.55;
  color: var(--cs-iron); max-width: 44ch; margin: 0 0 16px;
  opacity: 1;
}
[data-design="b"] .cs-hero__proof {
  font-family: "IBM Plex Mono", monospace; font-size: 0.875rem; line-height: 1.6;
  color: var(--cs-steel); margin: 0 0 40px;
  max-width: 100%; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-load { animation: none; transform: translate(2vw, 1vh); }
  [data-design="b"] .cs-load__beam { animation: none; transform: rotate(-0.6deg); }
}
@media (max-width: 560px) {
  [data-design="b"] .cs-hero { min-height: 92vh; }
  [data-design="b"] .cs-load svg { width: 170px; height: 106px; }
  [data-design="b"] .cs-hero__col { padding-block: 96px 64px; }
  [data-design="b"] .cs-hero__proof { white-space: normal; }
}

/* ─── Landing / scroll handoff — Element 7 ─── */
[data-design="b"] .cs-landing { padding-block: var(--cs-lift); background: var(--cs-sky); }
[data-design="b"] .cs-landing__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cs-landing__title {
  position: relative; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); line-height: 1.2; color: var(--cs-iron);
  margin: 0 0 24px; padding-top: 20px; max-width: 26ch;
}
[data-design="b"] .cs-landing__beam {
  position: absolute; top: 0; left: 0; width: 120px; height: 6px;
  background: var(--cs-iron); border-top: 2px solid var(--cs-primer);
}
[data-design="b"] .cs-landing__body {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.65;
  color: var(--cs-iron); max-width: 65ch; margin: 0;
}
@supports (animation-timeline: view()) {
  [data-design="b"] .cs-frame--far {
    animation: cs-descent-far linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="b"] .cs-frame--near {
    animation: cs-descent-near linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="b"] .cs-hero__haze {
    animation: cs-haze-thin linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="b"] .cs-landing__title {
    animation: cs-beam-land linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
    transform-origin: 0 100%;
  }
}
@keyframes cs-descent-far  { to { transform: translateY(46px); } }
@keyframes cs-descent-near { to { transform: translateY(-64px); } }
@keyframes cs-haze-thin    { to { opacity: 0.35; } }
@keyframes cs-beam-land {
  from { transform: rotate(1.2deg) translateY(18px); opacity: 0.2; }
  to   { transform: rotate(0deg) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-frame--far,
  [data-design="b"] .cs-frame--near,
  [data-design="b"] .cs-hero__haze,
  [data-design="b"] .cs-landing__title { animation: none; }
}

/* ─── Pointer — Element 6 (the rigged descent) ─── */
[data-design="b"] .cs-pointer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 0 24px; color: var(--cs-iron); opacity: 1;
}
[data-design="b"] .cs-pointer__line {
  width: 1px; height: 72px; background: var(--cs-iron); opacity: 0.5;
  transform-origin: top center;
  animation: cs-payout 6s var(--cs-ease-hoist) infinite;
}
[data-design="b"] .cs-pointer__hook {
  color: var(--cs-primer);
  animation: cs-hook-descend 6s var(--cs-ease-hoist) infinite;
}
@keyframes cs-payout {
  0%       { transform: scaleY(0.55); opacity: 0.3; }
  45%, 80% { transform: scaleY(1);    opacity: 0.55; }
  100%     { transform: scaleY(0.55); opacity: 0.3; }
}
@keyframes cs-hook-descend {
  0%       { transform: translateY(-26px); opacity: 0.4; }
  45%, 80% { transform: translateY(0);     opacity: 1; }
  100%     { transform: translateY(-26px); opacity: 0.4; }
}
[data-design="b"] .cs-pointer__label {
  font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem;
  letter-spacing: 0.06em; color: var(--cs-steel); opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-pointer__line,
  [data-design="b"] .cs-pointer__hook { animation: none; }
}

/* ─── Funnel — Element 5 (the Signal Lever) ─── */
[data-design="b"] .cs-funnel { padding-block: var(--cs-lift); }
[data-design="b"] .cs-funnel__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cs-funnel__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--cs-primer); margin: 0 0 12px;
}
[data-design="b"] .cs-funnel__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); color: var(--cs-iron);
  line-height: 1.2; margin: 0 0 32px; max-width: 24ch;
}
[data-design="b"] .cs-funnel__card {
  background: var(--cs-print); border: 1px solid rgba(34,38,43,0.18);
  border-radius: var(--cs-r-none); padding: clamp(24px, 4vw, 40px);
  max-width: 760px; position: relative; box-shadow: var(--cs-e2);
}
[data-design="b"] .cs-chart {
  display: flex; gap: 16px; list-style: none; margin: 0 0 24px; padding: 0 0 16px;
  border-bottom: 1px solid rgba(34,38,43,0.14);
}
[data-design="b"] .cs-chart__glyph {
  width: 12px; height: 12px; border-radius: var(--cs-r-hook);
  border: 1.5px solid var(--cs-steel); background: transparent;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms var(--cs-ease-settle);
}
[data-design="b"] .cs-chart__glyph[data-done="true"] {
  background: var(--cs-signal); border-color: var(--cs-signal);
}
[data-design="b"] .cs-chart__glyph[data-current="true"] {
  border-color: var(--cs-primer); transform: scale(1.25);
}
[data-design="b"] .cs-picks {
  display: flex; flex-wrap: wrap; gap: 20px 16px; list-style: none;
  margin: 0 0 24px; padding: 0; min-height: 0;
}
[data-design="b"] .cs-picks:empty { display: none; }
[data-design="b"] .cs-picks .cs-pick {
  position: relative; font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem;
  color: var(--cs-iron); background: var(--cs-haze); padding: 8px 12px;
  border-radius: var(--cs-r-pin); margin-top: 14px;
  transform-origin: 50% -14px;
  animation: cs-tag-drop 420ms var(--cs-ease-settle) both;
}
[data-design="b"] .cs-picks .cs-pick::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 1px; height: 14px;
  background: rgba(34,38,43,0.35);
}
@keyframes cs-tag-drop {
  0%   { transform: translateY(-18px) rotate(3deg); opacity: 0; }
  70%  { transform: translateY(0) rotate(-1.2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
[data-design="b"] .cs-step { border: 0; margin: 0; padding: 0; }
[data-design="b"] .cs-step__q {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.1875rem; font-weight: 600;
  color: var(--cs-iron); padding: 0; margin-bottom: 24px; max-width: 40ch;
}
[data-design="b"] .cs-step--in { animation: cs-swing-in 420ms var(--cs-ease-settle) both; }
@keyframes cs-swing-in {
  0%   { transform: rotate(1.6deg) translateY(-24px); opacity: 0; }
  100% { transform: rotate(0deg) translateY(0); opacity: 1; }
}
[data-design="b"] .cs-step__levers { display: flex; flex-direction: column; gap: 12px; }
[data-design="b"] .cs-lever-opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 14px 18px 14px 26px; cursor: pointer;
  background: var(--cs-sky); border: 1px solid rgba(34,38,43,0.28);
  border-radius: var(--cs-r-pin); text-align: left; width: 100%;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.0625rem;
  color: var(--cs-iron); transform-origin: 8px 50%;
  transition: transform 90ms var(--cs-ease-throw), border-color 180ms ease-out, background-color 180ms ease-out;
}
[data-design="b"] .cs-lever-opt__pin {
  position: absolute; left: 10px; width: 5px; height: 5px; border-radius: 999px;
  background: var(--cs-steel); transition: background-color 90ms linear;
}
[data-design="b"] .cs-lever-opt__label {
  display: inline-block; transition: transform 90ms var(--cs-ease-throw);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cs-lever-opt:hover { border-color: var(--cs-iron); }
  [data-design="b"] .cs-lever-opt:hover .cs-lever-opt__pin { background: var(--cs-primer); }
}
[data-design="b"] .cs-lever-opt:focus-visible { outline: 2px solid var(--cs-signal); outline-offset: 2px; }
[data-design="b"] .cs-lever-opt.cs-lever-opt--thrown {
  transform: rotate(-2deg); border-color: var(--cs-primer); background: var(--cs-print);
}
[data-design="b"] .cs-lever-opt.cs-lever-opt--thrown .cs-lever-opt__label { transform: rotate(2deg); }
[data-design="b"] .cs-lever-opt.cs-lever-opt--thrown .cs-lever-opt__pin { background: var(--cs-primer); }
[data-design="b"] .cs-lever-opt--submit { background: var(--cs-primer); color: var(--cs-glove); border-color: var(--cs-primer); justify-content: center; }
[data-design="b"] .cs-dispatch { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
[data-design="b"] .cs-field { display: flex; flex-direction: column; gap: 6px; }
[data-design="b"] .cs-field--wide, [data-design="b"] .cs-lever-opt--submit { grid-column: 1 / -1; }
[data-design="b"] .cs-field span {
  font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--cs-steel);
}
[data-design="b"] .cs-field input, [data-design="b"] .cs-field textarea {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; color: var(--cs-iron);
  background: #fff; border: 1px solid rgba(34,38,43,0.32); border-radius: var(--cs-r-none);
  padding: 12px 14px; min-height: 44px; width: 100%; box-sizing: border-box;
}
[data-design="b"] .cs-field input:focus-visible, [data-design="b"] .cs-field textarea:focus-visible {
  outline: 2px solid var(--cs-signal); outline-offset: 1px; border-color: var(--cs-signal);
}
[data-design="b"] .cs-field input[aria-invalid="true"] { border-color: var(--cs-critical); }
[data-design="b"] .cs-funnel__emergency {
  font-family: "IBM Plex Mono", monospace; font-size: 0.875rem; color: var(--cs-critical);
  margin: 20px 0 0;
}
[data-design="b"] .cs-funnel__emergency a { color: var(--cs-critical); font-weight: 600; }
[data-design="b"] .cs-funnel__emergency[hidden] { display: none; }
[data-design="b"] .cs-funnel__note {
  font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: var(--cs-steel); margin-top: 16px;
}
[data-design="b"] .cs-funnel__back {
  margin-top: 24px; background: none; border: 0; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: var(--cs-steel);
  min-height: 44px; padding: 8px 0;
}
[data-design="b"] .cs-funnel__back:focus-visible { outline: 2px solid var(--cs-signal); outline-offset: 2px; }
[data-design="b"] .cs-funnel__done-line {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.25rem; color: var(--cs-success);
  margin: 0; animation: cs-swing-in 420ms var(--cs-ease-settle) both;
}
[data-design="b"] .cs-funnel__done-line a { color: var(--cs-success); }
[data-design="b"] .cs-funnel__foot {
  font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: var(--cs-steel);
  max-width: 65ch; margin: 20px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-step--in,
  [data-design="b"] .cs-picks .cs-pick,
  [data-design="b"] .cs-funnel__done-line { animation: none; }
  [data-design="b"] .cs-lever-opt, [data-design="b"] .cs-lever-opt__label { transition: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .cs-funnel { padding-block: var(--cs-bay); }
  [data-design="b"] .cs-funnel__card { padding: 20px 16px; }
  [data-design="b"] .cs-dispatch { grid-template-columns: 1fr; }
}

/* ─── Services — Load Plates ─── */
[data-design="b"] .cs-services { padding-block: var(--cs-lift); background: var(--cs-haze); border-top: 1px solid rgba(34,38,43,0.14); }
[data-design="b"] .cs-services__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .cs-services__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--cs-primer); margin: 0 0 12px;
}
[data-design="b"] .cs-services__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); color: var(--cs-iron); margin: 0 0 32px;
}
[data-design="b"] .cs-services__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
[data-design="b"] .cs-plate {
  background: var(--cs-haze); border-radius: var(--cs-r-none); padding: var(--cs-spreader);
  position: relative; transition: transform 180ms var(--cs-ease-hoist);
}
[data-design="b"] .cs-plate__rule {
  height: 1px; background: var(--cs-iron); margin-bottom: var(--cs-choker); position: relative;
}
[data-design="b"] .cs-plate__rule::before,
[data-design="b"] .cs-plate__rule::after {
  content: ""; position: absolute; top: -2px; width: 4px; height: 4px; border-radius: 999px; background: var(--cs-iron);
}
[data-design="b"] .cs-plate__rule::before { left: 20%; }
[data-design="b"] .cs-plate__rule::after { left: 78%; }
[data-design="b"] .cs-plate__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; font-size: 1.563rem;
  color: var(--cs-iron); margin: 0 0 12px;
}
[data-design="b"] .cs-plate__scope {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.65;
  color: var(--cs-iron); margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cs-plate:hover { transform: translateY(-2px); }
}
@media (max-width: 768px) {
  [data-design="b"] .cs-services__grid { grid-template-columns: 1fr; }
}

/* ─── Manifest board — Element 4 ─── */
[data-design="b"] .cs-manifest { padding-block: var(--cs-lift); background: var(--cs-sky); }
[data-design="b"] .cs-manifest__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .cs-manifest__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--cs-primer); margin: 0 0 12px;
}
[data-design="b"] .cs-manifest__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); line-height: 1.2; color: var(--cs-iron);
  margin: 0 0 20px; max-width: 24ch;
}
[data-design="b"] .cs-manifest__intro {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.65;
  color: var(--cs-iron); max-width: 65ch; margin: 0 0 40px;
}
[data-design="b"] .cs-manifest__rail {
  position: relative; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
  padding-top: 24px; border-top: 2px solid var(--cs-iron);
}
[data-design="b"] .cs-tag {
  position: relative; display: inline-block;
  font-family: "IBM Plex Mono", monospace; font-size: 0.875rem; color: var(--cs-iron);
  background: var(--cs-print); border: 1px solid rgba(34,38,43,0.22);
  border-radius: var(--cs-r-pin); padding: 10px 16px;
  transform-origin: 50% -24px; transform: rotate(var(--cs-hang, 0deg));
}
[data-design="b"] .cs-tag::before {
  content: ""; position: absolute; top: -24px; left: 50%; width: 1px; height: 24px;
  background: rgba(34,38,43,0.4);
}
[data-design="b"] .cs-tag::after {
  content: ""; position: absolute; top: -4px; left: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 999px; background: var(--cs-primer);
}
[data-design="b"] .cs-manifest--live .cs-tag { animation: cs-tag-sway 13s ease-in-out infinite; }
[data-design="b"] .cs-manifest--live .cs-tag:nth-child(2n) { animation-duration: 11s; }
[data-design="b"] .cs-manifest--live .cs-tag:nth-child(3n) { animation-duration: 17s; }
@keyframes cs-tag-sway {
  0%, 100% { transform: rotate(calc(var(--cs-hang, 0deg) - 0.7deg)); }
  50%      { transform: rotate(calc(var(--cs-hang, 0deg) + 0.7deg)); }
}
[data-design="b"] .cs-rivet {
  width: 44px; height: 44px; margin-left: auto; border: 0; cursor: pointer;
  background: none; display: grid; place-content: center;
}
[data-design="b"] .cs-rivet::before {
  content: ""; width: 14px; height: 14px; border-radius: var(--cs-r-hook);
  background: var(--cs-steel); box-shadow: inset 0 1px 0 rgba(250,248,242,0.5);
  transition: transform 90ms var(--cs-ease-throw), background-color 180ms ease-out;
}
[data-design="b"] .cs-rivet:active::before { transform: scale(0.78); }
[data-design="b"] .cs-rivet[data-set="true"]::before { background: var(--cs-primer); }
[data-design="b"] .cs-rivet:focus-visible { outline: 2px solid var(--cs-signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cs-manifest--live .cs-tag { animation: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .cs-manifest { padding-block: var(--cs-bay); }
  [data-design="b"] .cs-manifest__rail { gap: 16px; }
}

/* ─── Service area ─── */
[data-design="b"] .cs-area { padding-block: var(--cs-lift); background: var(--cs-haze); border-top: 1px solid rgba(34,38,43,0.14); }
[data-design="b"] .cs-area__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .cs-area__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--cs-primer); margin: 0 0 12px;
}
[data-design="b"] .cs-area__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); color: var(--cs-iron); margin: 0 0 20px;
}
[data-design="b"] .cs-area__body {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.65;
  color: var(--cs-iron); max-width: 65ch; margin: 0 0 24px;
}
[data-design="b"] .cs-area__tags { display: flex; gap: 16px; margin-bottom: var(--cs-sling); padding-top: 24px; }
[data-design="b"] .cs-area__tags .cs-tag { margin-top: 24px; }

/* ─── About ─── */
[data-design="b"] .cs-about { padding-block: var(--cs-lift); background: var(--cs-sky); }
[data-design="b"] .cs-about__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .cs-about__mark {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--cs-primer); margin: 0 0 12px;
}
[data-design="b"] .cs-about__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.441rem); color: var(--cs-iron); margin: 0 0 20px; max-width: 26ch;
}
[data-design="b"] .cs-about__body {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.65;
  color: var(--cs-iron); max-width: 65ch; margin: 0 0 var(--cs-sling);
}
[data-design="b"] .cs-about__rail { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 24px; }
[data-design="b"] .cs-about__rail .cs-tag { margin-top: 24px; }

/* ─── Footer ─── */
[data-design="b"] .cs-footer { background: var(--cs-iron); color: var(--cs-glove); padding-block: var(--cs-lift) var(--cs-bay); }
[data-design="b"] .cs-footer__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .cs-footer__row {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center;
  padding-block: var(--cs-choker); border-bottom: 1px solid rgba(250,248,242,0.14);
}
[data-design="b"] .cs-footer__firm {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.25rem; font-weight: 500;
}
[data-design="b"] .cs-footer__phone {
  color: var(--cs-glove); text-decoration: none; font-family: "IBM Plex Mono", monospace;
  font-size: 1.0625rem; margin-left: auto; min-height: 44px; display: flex; align-items: center;
}
[data-design="b"] .cs-footer__row--links { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.9375rem; }
[data-design="b"] .cs-footer__row--links a { color: var(--cs-glove); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
[data-design="b"] .cs-footer__row--meta { font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: rgba(250,248,242,0.68); border-bottom: 0; justify-content: space-between; }
[data-design="b"] .cs-footer__hairline { position: relative; height: 24px; margin-top: 8px; }
[data-design="b"] .cs-footer__trolley {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 10px; height: 2px; background: var(--cs-primer);
}

/* ══════════════════════════════════════════════════════════
   Mobile safety — appended at bottom per hard contract.
   Scoped to .dq-design, never bare [data-design] descendants.
   ══════════════════════════════════════════════════════════ */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="b"].dq-design * { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

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