/* ============================================================================
   Burton v8 — Soundproofing hub, bespoke section components
   ----------------------------------------------------------------------------
   The soundproofing pillar page deliberately breaks the "vertical stack of
   numbered cards" pattern that the rest of the hub system uses. Every mid-
   page section here gets its own distinct layout so the page scans as a
   sequence of unlike things instead of six variations on the same card.

   Components (in section order):
     .direction-split    — Stage 1 (IN vs OUT) mirrored split-screen
     .wall-layers        — Stage 2 (the 5 laws as layers of a real wall)
     .room-router         — Stage 4  (room routes grouped by constraint)
    .soundproof-sequence — Stage 5  (cost-effective fix sequence)
    .myth-grid           — Stage 6  (claim vs reality two-column)

   All six use the same design tokens as the rest of burton-v8.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — problem router
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproofing-hub .hub-picks {
  margin-top: var(--space-6);
}

.soundproofing-hub .hub-picks__label {
  margin-bottom: var(--space-3);
}

.soundproofing-hub .hub-picks__grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(17rem, 82%), 19.5rem);
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px var(--space-4) var(--space-2) 2px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px var(--space-4);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.soundproofing-hub .hub-pick {
  min-height: 0;
  padding: var(--space-3) var(--space-4);
  justify-content: space-between;
  scroll-snap-align: start;
}

.soundproofing-hub .hub-pick__article {
  color: var(--color-accent);
}

@media (min-width: 1180px) {
  .soundproofing-hub .hub-picks__grid {
    grid-auto-columns: minmax(min(17rem, 82%), 19.5rem);
  }
}

.soundproofing-hub .mission--hub {
  padding-block-end: var(--space-12);
}

.soundproofing-hub .mission--hub .mission__backdrop {
  opacity: 1;
  align-items: center;
  justify-content: center;
}

.soundproofing-hub .mission--hub .soundproofing-hero-diagram {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(132vw, 1440px);
  min-width: 1040px;
  height: auto;
  color: var(--color-accent);
  transform: translate(-50%, -50%);
  opacity: 0.28;
}

.soundproofing-hero-diagram__aura {
  stroke: color-mix(in srgb, var(--color-accent) 26%, rgba(255, 255, 255, 0.14));
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.soundproofing-hero-diagram__aura--upper {
  opacity: 0.36;
}

.soundproofing-hero-diagram__aura--right {
  opacity: 0.24;
}

.soundproofing-hero-diagram__aura--right.soundproofing-hero-diagram__aura--upper {
  opacity: 0.18;
}

.soundproofing-hero-diagram__barrier {
  fill: color-mix(in srgb, var(--color-accent) 12%, rgba(255, 255, 255, 0.035));
  stroke: color-mix(in srgb, var(--color-accent) 56%, rgba(255, 255, 255, 0.2));
  stroke-width: 2.4;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--color-accent) 18%, transparent));
}

.soundproofing-hero-diagram__hatch {
  opacity: 0.46;
}

.soundproofing-hero-diagram__hatch-line {
  stroke: color-mix(in srgb, var(--color-accent) 34%, rgba(255, 255, 255, 0.18));
  stroke-width: 1.1;
}

.soundproofing-hero-diagram__wave,
.soundproofing-hero-diagram__reduced {
  stroke: color-mix(in srgb, var(--color-accent) 26%, rgba(255, 255, 255, 0.18));
  stroke-width: 2.1;
  stroke-linecap: round;
}

.soundproofing-hero-diagram__wave--outer {
  opacity: 0.22;
}

.soundproofing-hero-diagram__wave--wide {
  stroke-width: 2.4;
  opacity: 0.34;
}

.soundproofing-hero-diagram__wave--middle {
  stroke-width: 2.7;
  opacity: 0.46;
}

.soundproofing-hero-diagram__wave--inner {
  stroke-width: 2.2;
  opacity: 0.32;
}

.soundproofing-hero-diagram__reduced {
  stroke: color-mix(in srgb, var(--color-accent) 22%, rgba(255, 255, 255, 0.16));
  stroke-width: 1.35;
  opacity: 0.22;
}

.soundproofing-hero-diagram__reduced--lower {
  opacity: 0.16;
}

.soundproofing-hero-diagram__impact-dot {
  fill: color-mix(in srgb, var(--color-accent) 36%, rgba(255, 255, 255, 0.12));
  opacity: 0.36;
}

.soundproofing-hero-diagram__impact-dot--primary {
  fill: color-mix(in srgb, var(--color-accent) 46%, rgba(255, 255, 255, 0.14));
  opacity: 0.44;
}

.soundproofing-hub .soundproofing-hero-ctas {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.soundproofing-hub .soundproofing-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.soundproofing-hub .soundproofing-hero-cta--primary {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--fs-sm, 14px);
  font-weight: var(--fw-semibold);
}

.soundproofing-hub .soundproofing-hero-cta--secondary {
  color: color-mix(in srgb, var(--color-accent) 72%, var(--color-surface));
  font-family: var(--font-serif);
  font-size: var(--fs-sm, 14px);
  font-style: italic;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.soundproofing-hub .soundproofing-hero-cta__icon {
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .soundproofing-hub .soundproofing-hero-cta--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-surface);
    transform: translateY(-1px);
  }

  .soundproofing-hub .soundproofing-hero-cta--secondary:hover {
    color: var(--color-accent-hover);
    border-bottom-color: currentColor;
  }
}

.soundproofing-hub .soundproofing-hero-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.soundproofing-hub :where(#stage-direction, #stage-laws, #stage-room, #stage-weak-points, #soundproofing-sequence, #stage-myths, #library, #next-topics) {
  scroll-margin-top: 5rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   Treatment-shell adoption
   ─────────────────────────────────────────────────────────────────────────
   Soundproofing now uses the shared `.treatment-shell-wrap > .container >
   .treatment-shell` pattern (see treatment-hub.css). Rail behavior at every
   breakpoint — sticky vertical sidebar at ≥1100px, sticky top bar below —
   is fully delegated to the shared rules; no local rail overrides here.

   The 8 stage sections retain their existing `.page-section` markup, so we
   neutralize the per-section full-bleed surface backgrounds and the nested
   `.container` max-widths/padding so each section flows cleanly inside the
   shell's content column.
   ═════════════════════════════════════════════════════════════════════════ */

.soundproofing-hub .soundproofing-shell-wrap {
  padding-block: var(--space-12) var(--space-16);
}

/* ─────────────────────────────────────────────────────────────────────────
   Rail width tokens — narrowed for soundproofing
   ─────────────────────────────────────────────────────────────────────────
   The shared chapter-rail defaults to a 220px rail + space-8 gap (252px
   total). That width is sized for hubs whose stages render comfortably in
   an ~800–980px content column at viewports 1100–1279px (acoustic-panels,
   foam, bass, diffuser).

   Soundproofing's signature stages — `.direction-split` (3-column IN/OUT
   mirror), `.wall-layers`, `.leak-map`, and `.soundproof-sequence__brief`
   — were sized for the full container width before the shared shell was
   adopted, and they carry hard minimums (300–384px on the second column,
   ~370px per panel for the mirror). At the default rail width the content
   column drops below those minimums on common laptop viewports and the
   right edge of the mirror clips off the page.

   The rail labels in this hub are intentionally short ("Direction",
   "Five laws", "Room", "Weak spots", "Fix order", "Myths", "Library",
   "Next"), so trimming the rail to 180px + space-4 reclaims ~56px of
   content column at every desktop width without truncating any link or
   the "Sections / 01 / 08" header row. */

.soundproofing-hub {
  --treatment-rail-width: 180px;
  --treatment-rail-gap: var(--space-4);
}

.soundproofing-hub .soundproofing-content > .page-section {
  /* Strip the full-width "section block" treatment — backgrounds and
     borders belong to the page, not to columns inside a grid. */
  background: transparent;
  border-top: 0;
  padding-block: 0;
}

.soundproofing-hub .soundproofing-content > .page-section > .container {
  /* Each section already wraps content in `.container`. Inside the shell,
     the outer `.container` already constrains width, so the inner one
     must not re-constrain or re-pad. */
  max-width: none;
  width: auto;
  padding-inline: 0;
  margin-inline: 0;
}

.soundproofing-hero-container {
  max-width: min(var(--container-wide, 1280px), 100%);
}

.soundproofing-hub .mission--hub .mission__inner {
  width: min(100%, 76rem);
}

.soundproofing-hub .mission--hub .mission__statement {
  font-size: clamp(2.25rem, 3.2vw, 3.5rem);
  line-height: 1.08;
  max-width: min(100%, 72rem);
}

.soundproofing-hub .mission--hub .mission__body {
  max-width: min(100%, 68rem);
}

/* Inner .container redundancy fix.
   ─────────────────────────────────────────────────────────────────────────
   Every soundproofing page-section is wrapped in a `.container` (or
   `.container container--wide`) inside the treatment-shell content area.
   The outer `.container container--wide` (around the entire treatment-
   shell) already handles the page max-width and outer 24px inline
   padding, so each section's own inner container is purely redundant —
   its 24px-each-side padding wastes ~48px of horizontal space and
   produces visible right-side clipping on wide section grids (Stage 1
   mirror, Stage 2 wall-layers, Stage 3 room-router, Stage 4 leak-map,
   Stage 5 sequence, Stage 6 myth-rows, Library, Next topics).

   Cancelling that inner container's max-width and inline padding lifts
   every section to the full content-column width (~1036px at 1280px
   viewport, instead of ~988px). Section headers and ledes keep their
   natural reading widths via the explicit `.page-section__header` and
   `.page-section__lede` max-widths defined immediately below, so this
   change adds breathing room to wide grids without making body copy
   uncomfortably long.

   Mirrors the established `.soundbar-hub .treatment-shell > .page-section
   > .container` pattern in soundbar-hub.css, which solves the same
   nested-container issue. */
.soundproofing-hub .treatment-content > .page-section > .container {
  max-width: none;
  padding-inline: 0;
}

.soundproofing-hub .page-section__header {
  max-width: min(100%, 64rem);
}

.soundproofing-hub .page-section__lede {
  max-width: min(100%, 56rem);
}

@media (min-width: 760px) {
  .soundproofing-hub .page-section__header {
    max-width: min(100%, 72rem);
  }

  .soundproofing-hub .page-section__lede {
    max-width: min(100%, 64rem);
  }
}

@media (min-width: 1100px) {
  .soundproofing-hub .page-section__header {
    max-width: min(100%, 78rem);
  }

  .soundproofing-hub .page-section__lede {
    max-width: min(100%, 68rem);
  }
}

@media (max-width: 899px) {
  .soundproofing-hub .hub-picks__grid {
    grid-auto-columns: minmax(min(17rem, 82%), 19.5rem);
  }

  .soundproofing-hub .mission--hub .soundproofing-hero-diagram {
    width: 168vw;
    min-width: 860px;
    opacity: 0.2;
  }

  .soundproofing-hub .mission--hub .mission__statement {
    max-width: min(100%, 58rem);
    font-size: clamp(1.9rem, 4vw, 2.35rem);
    line-height: 1.1;
  }
}

@media (max-width: 640px) {
  .soundproofing-hub .mission--hub .soundproofing-hero-diagram {
    width: 202vw;
    min-width: 720px;
    opacity: 0.15;
  }

  .soundproofing-hub .mission--hub .mission__statement {
    max-width: 100%;
    font-size: clamp(1.65rem, 6.2vw, 2rem);
    line-height: 1.12;
  }

  .soundproofing-hub .mission--hub .mission__body {
    max-width: 100%;
  }
}

@media (max-width: 500px) {
  .soundproofing-hub .hub-picks__grid {
    grid-auto-columns: minmax(min(16rem, 86%), 19rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 1 — .direction-split
   ----------------------------------------------------------------------------
   Two panels meeting at a central wall. Left = "keep sound IN",
   right = "keep sound OUT". Sound-wave arrows point toward the central
   wall from each side to dramatise what the barrier is stopping.
   ═══════════════════════════════════════════════════════════════════════════ */

.direction-split {
  margin-top: var(--space-10);
  display: grid;
  /* `minmax(0, 1fr)` (not bare `1fr`) lets the panel tracks shrink below
     their min-content when the content column is squeezed by the rail at
     1100–1279px viewports — same pattern as `.myth-row`, `.wall-layers`,
     and `.soundproof-sequence__brief`. Without it, an intrinsic-width
     descendant would force the column wider than 1fr and push the OUT
     panel past the right edge of the grid. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
}

/* Each half panel */
.direction-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8);
  position: relative;
}

.direction-panel--in {
  text-align: right;
  padding-left: 0;
  align-items: flex-end;
}

/* Per-element cap on the IN side only. OUT keeps its panel-wide flow
   (see base `.direction-panel__title/tagline/body/meta` rules); IN
   pulls back from the chapter-rail edge so "Drums, studio, home
   theatre." and the body paragraph sit in a narrower column. The
   `align-items: flex-end` + `text-align: right` above keep the
   capped box anchored against the wall, so the slack appears as
   breathing room on the left rather than as a centred float. */
.direction-panel--in .direction-panel__title,
.direction-panel--in .direction-panel__tagline,
.direction-panel--in .direction-panel__body,
.direction-panel--in .direction-panel__meta {
  max-width: 50ch;
}

.direction-panel--out {
  text-align: left;
  padding-right: 0;
  align-items: flex-start;
}

/* Eyebrow: IN or OUT */
.direction-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.direction-panel__arrow {
  width: 20px;
  height: 12px;
  flex-shrink: 0;
}

.direction-panel__title {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
}

.direction-panel__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--duration-base) var(--ease-out);
}

.direction-panel__title a:hover,
.direction-panel__title a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}

.direction-panel__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  margin: 0;
}

.direction-panel__body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: 0;
}

.direction-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  width: 100%;
}

.direction-panel--in .direction-panel__meta {
  align-items: flex-end;
}

.direction-panel__meta-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.direction-panel--in .direction-panel__meta-row {
  align-items: flex-end;
}

.direction-panel__meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.direction-panel__meta-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink);
}

.direction-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}

.direction-panel__cta:hover,
.direction-panel__cta:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  gap: var(--space-3);
  outline: none;
}

/* The central wall divider — a thin vertical bar with hatched surface
   textures representing drywall + cavity + drywall on edge. */
.direction-wall {
  width: 40px;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.direction-wall__surface {
  width: 100%;
  background:
    /* outer drywall edges */
    linear-gradient(to right,
      var(--color-line-strong) 0 3px,
      transparent 3px calc(100% - 3px),
      var(--color-line-strong) calc(100% - 3px) 100%),
    /* cavity hatching */
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      var(--color-line) 6px 7px
    ),
    var(--color-surface);
  border-left: 1px solid var(--color-line-strong);
  border-right: 1px solid var(--color-line-strong);
}

.direction-wall__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  background: var(--color-surface);
  padding: 2px var(--space-3);
  white-space: nowrap;
  pointer-events: none;
}

/* Tablet — keep horizontal but tighten padding */
@media (max-width: 999px) and (min-width: 700px) {
  .direction-panel {
    padding: var(--space-6) var(--space-5);
  }
  .direction-panel__title {
    font-size: var(--fs-xl);
  }
  .direction-panel__body {
    font-size: var(--fs-sm);
  }
}

/* Mobile — stack vertically, wall becomes a horizontal divider */
@media (max-width: 699px) {
  .direction-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .direction-panel,
  .direction-panel--in,
  .direction-panel--out {
    text-align: left;
    align-items: flex-start;
    padding: var(--space-6) 0;
  }
  .direction-panel--in .direction-panel__meta,
  .direction-panel--in .direction-panel__meta-row {
    align-items: flex-start;
  }
  .direction-panel__title {
    font-size: var(--fs-xl);
  }
  .direction-panel__body {
    font-size: var(--fs-sm);
  }
  /* Rotate the wall divider to horizontal for mobile */
  .direction-wall {
    width: auto;
    height: 40px;
  }
  .direction-wall__surface {
    background:
      linear-gradient(to bottom,
        var(--color-line-strong) 0 3px,
        transparent 3px calc(100% - 3px),
        var(--color-line-strong) calc(100% - 3px) 100%),
      repeating-linear-gradient(
        45deg,
        transparent 0 6px,
        var(--color-line) 6px 7px
      ),
      var(--color-surface);
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-line-strong);
    border-bottom: 1px solid var(--color-line-strong);
  }
  .direction-wall__label {
    transform: translate(-50%, -50%);
  }
}

/* The Stage-1-specific breakout has been replaced by a universal
   inner-container fix higher up in this file (search for "Inner .container
   redundancy fix"). All page-sections inside `.treatment-content` now get
   the full content-column width automatically, so direction-split,
   wall-layers, room-router, leak-map, soundproof-sequence, myth-grid,
   library, and next-topics all benefit from the same reclaimed space —
   no per-section breakout needed. */

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 2 — .wall-layers
   ----------------------------------------------------------------------------
   Replaces a stack of 5 law cards with one annotated wall cross-section.
   Left: a vertical SVG of a soundproof wall built up in 5 textured layers.
   Right: 5 callouts, each aligned horizontally with its layer, linked by
   a thin connector line.
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproofing-wall-container {
  max-width: min(var(--container-wide, 1280px), 100%);
}

.soundproofing-wall-container .page-section__header {
  max-width: min(100%, 64rem);
}

.soundproofing-wall-container .page-section__lede {
  max-width: min(100%, 60rem);
  margin-top: var(--space-3);
}

@media (min-width: 760px) {
  .soundproofing-wall-container .page-section__header {
    max-width: min(100%, 72rem);
  }
}

@media (min-width: 1100px) {
  .soundproofing-wall-container .page-section__header {
    max-width: min(100%, 78rem);
  }
}

.wall-layers {
  display: grid;
  grid-template-columns: clamp(280px, 30vw, 460px) minmax(0, 1fr);
  column-gap: clamp(var(--space-6), 4vw, var(--space-12));
  margin-top: var(--space-10);
  align-items: stretch;
}

.wall-layers__svg {
  position: sticky;
  top: calc(var(--space-16) + var(--space-4));
  align-self: start;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
  max-height: 780px;
}

.wall-layers__svg [data-layer] {
  cursor: pointer;
}

/* Textures for each layer */
.wall-layers__band--mass {
  fill: #F8FAFC;
  stroke: var(--color-ink);
  stroke-width: 1;
}

.wall-layers__band--damping {
  fill: rgba(6, 182, 212, 0.08);
  stroke: var(--color-accent);
  stroke-width: 1;
}

.wall-layers__band--decouple {
  fill: #FFFFFF;
  stroke: var(--color-ink);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.wall-layers__band--absorb {
  fill: rgba(148, 163, 184, 0.15);
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.wall-layers__band--seal {
  fill: var(--color-accent-soft);
  stroke: var(--color-accent);
  stroke-width: 1;
}

.wall-layers__texture {
  stroke: var(--color-ink-muted);
  stroke-width: 0.6;
  opacity: 0.55;
  fill: none;
}

.wall-layers__band-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--color-ink-muted);
  transition: fill var(--duration-base) var(--ease-out);
}

.wall-layers__principle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-ink);
  transition: fill var(--duration-base) var(--ease-out);
}

.wall-layers__layer-badge-bg {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
  stroke-width: 1;
  transition:
    fill var(--duration-base) var(--ease-out),
    stroke var(--duration-base) var(--ease-out);
}

.wall-layers__layer-badge-text {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  fill: var(--color-ink);
  transition: fill var(--duration-base) var(--ease-out);
}

.wall-layers__connector {
  stroke: var(--color-ink-subtle);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}

/* The 5 callout rows — stacked naturally. Wall is sticky on the left so
   visual alignment with each band isn't strict; the narrative is the story. */
.wall-layers__callouts {
  display: flex;
  flex-direction: column;
}

.wall-layer {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  transition:
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    padding-left var(--duration-base) var(--ease-out);
}

.wall-layer:first-child {
  border-top: none;
  padding-top: 0;
}

.wall-layer:last-child {
  padding-bottom: 0;
}

.wall-layer__num {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: var(--fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}

.wall-layer:hover .wall-layer__num,
.wall-layer:focus-within .wall-layer__num,
.wall-layers[data-active-layer="mass"] .wall-layer[data-layer="mass"] .wall-layer__num,
.wall-layers[data-active-layer="damping"] .wall-layer[data-layer="damping"] .wall-layer__num,
.wall-layers[data-active-layer="decoupling"] .wall-layer[data-layer="decoupling"] .wall-layer__num,
.wall-layers[data-active-layer="absorption"] .wall-layer[data-layer="absorption"] .wall-layer__num,
.wall-layers[data-active-layer="sealing"] .wall-layer[data-layer="sealing"] .wall-layer__num {
  -webkit-text-stroke-color: var(--color-accent);
}

.wall-layers[data-active-layer="mass"] .wall-layers__svg [data-layer="mass"] .wall-layers__band-label,
.wall-layers[data-active-layer="damping"] .wall-layers__svg [data-layer="damping"] .wall-layers__band-label,
.wall-layers[data-active-layer="decoupling"] .wall-layers__svg [data-layer="decoupling"] .wall-layers__band-label,
.wall-layers[data-active-layer="absorption"] .wall-layers__svg [data-layer="absorption"] .wall-layers__band-label,
.wall-layers[data-active-layer="sealing"] .wall-layers__svg [data-layer="sealing"] .wall-layers__band-label {
  fill: var(--color-accent-hover);
}

.wall-layers[data-active-layer="mass"] .wall-layers__svg [data-layer="mass"] .wall-layers__principle-label,
.wall-layers[data-active-layer="damping"] .wall-layers__svg [data-layer="damping"] .wall-layers__principle-label,
.wall-layers[data-active-layer="decoupling"] .wall-layers__svg [data-layer="decoupling"] .wall-layers__principle-label,
.wall-layers[data-active-layer="absorption"] .wall-layers__svg [data-layer="absorption"] .wall-layers__principle-label,
.wall-layers[data-active-layer="sealing"] .wall-layers__svg [data-layer="sealing"] .wall-layers__principle-label {
  fill: var(--color-accent-hover);
}

.wall-layers[data-active-layer="mass"] .wall-layers__svg [data-layer="mass"] .wall-layers__layer-badge-bg,
.wall-layers[data-active-layer="damping"] .wall-layers__svg [data-layer="damping"] .wall-layers__layer-badge-bg,
.wall-layers[data-active-layer="decoupling"] .wall-layers__svg [data-layer="decoupling"] .wall-layers__layer-badge-bg,
.wall-layers[data-active-layer="absorption"] .wall-layers__svg [data-layer="absorption"] .wall-layers__layer-badge-bg,
.wall-layers[data-active-layer="sealing"] .wall-layers__svg [data-layer="sealing"] .wall-layers__layer-badge-bg {
  fill: var(--color-accent);
  stroke: var(--color-accent-hover);
}

.wall-layers[data-active-layer="mass"] .wall-layers__svg [data-layer="mass"] .wall-layers__layer-badge-text,
.wall-layers[data-active-layer="damping"] .wall-layers__svg [data-layer="damping"] .wall-layers__layer-badge-text,
.wall-layers[data-active-layer="decoupling"] .wall-layers__svg [data-layer="decoupling"] .wall-layers__layer-badge-text,
.wall-layers[data-active-layer="absorption"] .wall-layers__svg [data-layer="absorption"] .wall-layers__layer-badge-text,
.wall-layers[data-active-layer="sealing"] .wall-layers__svg [data-layer="sealing"] .wall-layers__layer-badge-text {
  fill: var(--color-surface);
}

.wall-layers[data-active-layer="mass"] .wall-layers__svg [data-layer="mass"] > :first-child,
.wall-layers[data-active-layer="damping"] .wall-layers__svg [data-layer="damping"] > :first-child,
.wall-layers[data-active-layer="decoupling"] .wall-layers__svg [data-layer="decoupling"] > :first-child,
.wall-layers[data-active-layer="absorption"] .wall-layers__svg [data-layer="absorption"] > :first-child,
.wall-layers[data-active-layer="sealing"] .wall-layers__svg [data-layer="sealing"] > :first-child {
  stroke: var(--color-accent);
  stroke-width: 2;
}

.wall-layers[data-active-layer="mass"] .wall-layer[data-layer="mass"],
.wall-layers[data-active-layer="damping"] .wall-layer[data-layer="damping"],
.wall-layers[data-active-layer="decoupling"] .wall-layer[data-layer="decoupling"],
.wall-layers[data-active-layer="absorption"] .wall-layer[data-layer="absorption"],
.wall-layers[data-active-layer="sealing"] .wall-layer[data-layer="sealing"] {
  padding-left: var(--space-3);
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-line) 72%);
  background: color-mix(in srgb, var(--color-accent-soft) 34%, transparent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.wall-layers[data-active-layer="mass"] .wall-layer[data-layer="mass"] .wall-layer__name a,
.wall-layers[data-active-layer="damping"] .wall-layer[data-layer="damping"] .wall-layer__name a,
.wall-layers[data-active-layer="decoupling"] .wall-layer[data-layer="decoupling"] .wall-layer__name a,
.wall-layers[data-active-layer="absorption"] .wall-layer[data-layer="absorption"] .wall-layer__name a,
.wall-layers[data-active-layer="sealing"] .wall-layer[data-layer="sealing"] .wall-layer__name a {
  color: var(--color-accent-hover);
  background-size: 100% 2px;
}

.wall-layer__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.wall-layer__name {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  margin: 0;
}

.wall-layer__name a {
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--duration-base) var(--ease-out);
}

.wall-layer__name a:hover,
.wall-layer__name a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}

.wall-layer__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: 0;
}

.wall-layer__body-text {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: 0;
  max-width: 58ch;
}

.wall-layer__products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.wall-layer__product {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
}

.wall-layer__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-ink);
  align-self: flex-start;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}

.wall-layer__cta:hover,
.wall-layer__cta:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  gap: var(--space-3);
  outline: none;
}

@media (max-width: 999px) {
  .wall-layers {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
  }

  .wall-layers__svg {
    position: static;
    width: min(100%, 28rem);
    margin-inline: auto;
    max-height: none;
  }

  .wall-layer__name {
    font-size: var(--fs-lg);
  }
}

@media (max-width: 699px) {
  .wall-layers {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  .wall-layers__svg {
    width: min(100%, 24rem);
  }

  .wall-layer {
    grid-template-columns: 40px 1fr;
    column-gap: var(--space-3);
    padding: var(--space-5) 0;
  }
  .wall-layer__num {
    font-size: 32px;
  }
  .wall-layer__name {
    font-size: var(--fs-lg);
  }
  .wall-layer__body-text {
    font-size: var(--fs-sm);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 4 — .room-router
   ----------------------------------------------------------------------------
   Room routes grouped by the real constraint: permission, privacy, high-output
   sound, or the room shell.
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproofing-room-container {
  max-width: min(var(--container-wide, 1280px), 100%);
}

.soundproofing-room-container .page-section__header {
  max-width: min(100%, 72rem);
}

.soundproofing-hub {
  scroll-behavior: smooth;
}

.room-router {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  margin-top: var(--space-10);
  align-items: start;
}

.room-router--image-led {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.room-router__visual {
  position: sticky;
  top: calc(var(--header-height, 80px) + var(--space-5));
  min-width: 0;
}

.room-router--image-led .room-router__visual {
  position: static;
  width: min(100%, 64rem);
  margin: 0 auto;
  overflow-x: visible;
}

.room-router__frame {
  position: relative;
  width: 100%;
}

.room-router__picture {
  display: block;
  width: 100%;
}

.room-router__image {
  display: block;
  width: 100%;
  height: auto;
}

.room-router__hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-router__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(0.75rem, 1.4vw, 1rem);
  height: clamp(0.75rem, 1.4vw, 1rem);
  color: var(--color-surface);
  text-decoration: none;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.room-router__hotspot-dot {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 32%, transparent), 0 0.35rem 0.9rem rgba(21, 35, 64, 0.18);
  animation: hotspot-pulse 2.4s ease-in-out infinite;
}

@keyframes hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 32%, transparent), 0 0.35rem 0.9rem rgba(21, 35, 64, 0.18); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 0.35rem 0.9rem rgba(21, 35, 64, 0.10); }
}

.room-router__hotspot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  display: inline-flex;
  width: max-content;
  max-width: 9rem;
  padding: 0.28rem 0.5rem;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-line));
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.room-router__hotspot:focus-visible .room-router__hotspot-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.room-router__hotspot-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2.15rem);
  display: grid;
  gap: 0.35rem;
  width: min(16rem, 52vw);
  padding: var(--space-4);
  color: var(--color-ink);
  text-align: left;
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-accent-soft));
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 0.45rem);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.room-router__hotspot-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.75rem;
  height: 0.75rem;
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-accent-soft));
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  transform: translate(-50%, -50%) rotate(45deg);
}

.room-router__hotspot-kicker,
.room-router__hotspot-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.room-router__hotspot-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

.room-router__hotspot-surfaces {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-ink-muted);
}

.room-router__hotspot-cta {
  margin-top: var(--space-1);
}

.room-router__hotspot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0.35rem;
  border-radius: 999px;
}

.room-router__caption {
  max-width: 30rem;
  margin: var(--space-4) auto 0;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: var(--lh-normal);
  text-align: center;
  color: var(--color-ink-muted);
}

.room-router__weak-points {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: min(100%, 58rem);
  margin: var(--space-4) auto 0;
}

.room-router__weak-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem var(--space-3);
  align-items: center;
  padding: var(--space-3);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, var(--color-line));
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.room-router__weak-point:hover,
.room-router__weak-point:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-line));
  box-shadow: 0 0.35rem 0.8rem rgba(21, 35, 64, 0.05);
  transform: translateY(-1px);
}

.room-router__weak-label,
.room-router__weak-action {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.room-router__weak-label {
  grid-column: 1;
}

.room-router__weak-rooms {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--color-ink-muted);
}

.room-router__weak-action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--color-ink-subtle);
  white-space: nowrap;
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .room-router__hotspot:hover,
  .room-router__hotspot:focus-visible {
    z-index: 3;
  }

  .room-router__hotspot:hover .room-router__hotspot-dot {
    animation: none;
    transform: scale(1.25);
    transition: transform 160ms ease;
  }

  .room-router__hotspot:hover .room-router__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .room-router__hotspot:hover .room-router__hotspot-card,
  .room-router__hotspot:focus-visible .room-router__hotspot-card {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (hover: none), (pointer: coarse) {
  .room-router__hotspot {
    width: clamp(1rem, 2.4vw, 1.25rem);
    height: clamp(1rem, 2.4vw, 1.25rem);
  }

  .room-router__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .room-router__hotspot-card {
    display: none;
  }

  .room-router__weak-points {
    display: grid;
  }
}

@media (max-width: 1099px) {
  .room-router {
    grid-template-columns: 1fr;
  }

  .room-router__visual {
    position: static;
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .room-router__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .room-router__hotspot-card {
    display: none;
  }

  .room-router__weak-points {
    display: grid;
  }

}

@media (max-width: 760px) {
  .room-router--image-led .room-router__visual {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .room-router--image-led .room-router__frame,
  .room-router--image-led .room-router__picture {
    width: 42rem;
    max-width: none;
  }

  .room-router__weak-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

}

@media (max-width: 520px) {
  .room-router {
    margin-top: var(--space-8);
    gap: var(--space-6);
  }

  .room-router:not(.room-router--image-led) .room-router__visual {
    width: min(100%, 32rem);
  }

  .room-router__weak-points {
    grid-template-columns: 1fr;
    width: 100%;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 5 — .soundproof-sequence
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproof-sequence {
  --soundproof-tag-noise: #2563eb;
  --soundproof-tag-method: #047857;
  --soundproof-tag-caution: #b45309;
  --soundproof-tag-restricted: #b42318;
  display: flex;
  flex-direction: column;
  margin-top: clamp(var(--space-8), 6vw, var(--space-10));
}

.soundproof-sequence__brief {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(24rem, 1.12fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: flex-start;
  padding: clamp(var(--space-6), 4vw, var(--space-8)) 0;
  border-top: 2px solid var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.soundproof-sequence__takeaway {
  max-width: 31rem;
}

.soundproof-sequence__label,
.soundproof-sequence__map-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-accent);
}

.soundproof-sequence__brief-text {
  margin: var(--space-3) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-lg), 1.9vw, var(--fs-xl));
  font-weight: 600;
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
}

.soundproof-sequence__map,
.soundproof-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.soundproof-sequence__map {
  min-width: 0;
  flex-direction: column;
  gap: 0;
}

.soundproof-sequence__map-label {
  margin-bottom: var(--space-3);
}

.soundproof-sequence__jump {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: clamp(var(--space-3), 2vw, var(--space-5));
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

.soundproof-sequence__jump::after {
  content: "→";
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.soundproof-sequence__jump:hover,
.soundproof-sequence__jump:focus-visible {
  color: var(--color-accent-hover);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-line));
}

.soundproof-sequence__jump:hover::after,
.soundproof-sequence__jump:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.soundproof-sequence__jump-index {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-lg), 1.8vw, var(--fs-xl));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}

.soundproof-sequence__jump-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.soundproof-sequence__jump-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: currentColor;
}

.soundproof-sequence__jump-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

.soundproof-tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 0.42rem 0.62rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.soundproof-tag--noise {
  color: var(--soundproof-tag-noise);
  border-color: color-mix(in srgb, var(--soundproof-tag-noise) 34%, var(--color-line));
  background: color-mix(in srgb, var(--soundproof-tag-noise) 7%, transparent);
}

.soundproof-tag--method {
  color: var(--soundproof-tag-method);
  border-color: color-mix(in srgb, var(--soundproof-tag-method) 34%, var(--color-line));
  background: color-mix(in srgb, var(--soundproof-tag-method) 7%, transparent);
}

.soundproof-tag--caution {
  color: var(--soundproof-tag-caution);
  border-color: color-mix(in srgb, var(--soundproof-tag-caution) 42%, var(--color-line));
  background: color-mix(in srgb, var(--soundproof-tag-caution) 9%, transparent);
}

.soundproof-tag--restricted {
  color: var(--soundproof-tag-restricted);
  border-color: color-mix(in srgb, var(--soundproof-tag-restricted) 58%, var(--color-line));
  background: color-mix(in srgb, var(--soundproof-tag-restricted) 10%, transparent);
}

.soundproof-step {
  display: flex;
  gap: clamp(var(--space-5), 5vw, var(--space-10));
  padding: clamp(var(--space-8), 6vw, var(--space-10)) 0;
  border-bottom: 1px solid var(--color-line);
}

.soundproof-step__number {
  flex: 0 0 clamp(4.5rem, 8vw, 7rem);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-3xl), 7vw, 5.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: var(--tracking-snug);
  color: color-mix(in srgb, var(--color-accent) 34%, var(--color-line));
}

.soundproof-step__content {
  flex: 1 1 auto;
  min-width: 0;
}

.soundproof-step__title {
  max-width: 54rem;
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

.soundproof-step__text,
.soundproof-step__rule {
  max-width: 48rem;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.soundproof-step__text {
  font-family: var(--font-serif);
  color: var(--color-ink-muted);
}

.soundproof-step__rule {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) clamp(var(--space-4), 3vw, var(--space-5));
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 58%, var(--color-line));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.soundproof-step__rule::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  left: -0.32rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  border-radius: 50%;
}

.soundproof-step__rule p {
  margin: 0;
}

.soundproof-step__rule p + p {
  margin-top: var(--space-1);
}

.soundproof-step__routes {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.soundproof-route {
  display: flex;
  gap: clamp(var(--space-3), 3vw, var(--space-6));
  align-items: flex-start;
  padding: var(--space-4) 0;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: color var(--duration-base) var(--ease-out);
}

.soundproof-route::after {
  content: "→";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.soundproof-route:hover,
.soundproof-route:focus-visible {
  color: var(--color-accent-hover);
}

.soundproof-route:hover::after,
.soundproof-route:focus-visible::after {
  transform: translateX(0.3rem);
}

.soundproof-route__label {
  flex: 0 0 clamp(7rem, 16vw, 12rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-accent);
}

.soundproof-route__title,
.soundproof-route__text {
  display: block;
  max-width: 40rem;
}

.soundproof-route__title {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: inherit;
}

.soundproof-route__text {
  margin-top: 0.18rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

@media (max-width: 880px) {
  .soundproof-sequence__brief {
    grid-template-columns: 1fr;
  }

  .soundproof-step,
  .soundproof-route {
    flex-direction: column;
  }

  .soundproof-sequence__map {
    max-width: none;
  }

  .soundproof-step__number {
    flex-basis: auto;
  }

  .soundproof-route::after {
    margin-left: 0;
  }

  .soundproof-route__label {
    flex-basis: auto;
  }
}

@media (max-width: 560px) {
  .soundproof-sequence__jump {
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }

  .soundproof-sequence__jump::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 6 — .myth-grid
   ----------------------------------------------------------------------------
   Claim-vs-reality two-column grid. Each row pairs the myth (left, flagged
   as a false claim) with the reality (right, bold, linked). Explicit MYTH /
   REALITY tags make the comparison the visual hook.
   ═══════════════════════════════════════════════════════════════════════════ */

.myth-grid {
  --myth-claim-color: #b42318;
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
}

.myth-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
  column-gap: var(--space-8);
  align-items: stretch;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}

.myth-row:first-child {
  border-top: 2px solid var(--color-ink);
}

.myth-row:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* MYTH column (left) — readable false-claim treatment */
.myth-row__myth {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.myth-row__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.myth-row__tag--myth {
  color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted));
}

.myth-row__tag--reality {
  color: var(--color-accent);
}

.myth-row__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.myth-row__tag--myth .myth-row__tag-icon {
  color: currentColor;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--myth-claim-color) 38%, var(--color-line));
}

.myth-row__tag--reality .myth-row__tag-icon {
  background: var(--color-accent);
  color: var(--color-surface);
}

.myth-row__claim {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  margin: 0;
  text-decoration-line: line-through;
  text-decoration-color: color-mix(in srgb, var(--myth-claim-color) 30%, var(--color-line-strong));
  text-decoration-thickness: 1px;
}

/* The central divider column — an arrow pointing right */
.myth-row__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
}

/* REALITY column (right) — bold, with links */
.myth-row__reality {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.myth-row__truth {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: 0;
}

.myth-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.myth-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.myth-row__link:hover,
.myth-row__link:focus-visible {
  outline: none;
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.myth-row__link::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: currentColor;
  margin-left: var(--space-1);
  transition: transform var(--duration-fast) var(--ease-out);
}

.myth-row__link:hover::after,
.myth-row__link:focus-visible::after {
  transform: translateX(2px);
}

/* Tablet — tighten proportions */
@media (max-width: 899px) and (min-width: 620px) {
  .myth-row {
    column-gap: var(--space-5);
    padding: var(--space-6) 0;
  }
  .myth-row__claim {
    font-size: var(--fs-lg);
  }
}

/* Mobile — stack vertically: myth on top, reality below */
@media (max-width: 619px) {
  .myth-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
    padding: var(--space-6) 0;
  }
  .myth-row__divider {
    justify-content: flex-start;
    transform: rotate(90deg);
    width: 24px;
    height: 24px;
  }
  .myth-row__claim {
    font-size: var(--fs-lg);
  }
}

/* ============================================================================
   STAGE 3 — LEAK MAP (3D cutaway + 6-card reference grid)
   ----------------------------------------------------------------------------
   Replaces the flat orbital .room-map for soundproofing. The viewer stands
   at the front of the room, looking slightly down through a removed front
   wall — a stylised proscenium / cabinet projection. This way every one of
   the six surfaces (ceiling, floor, back wall, both side walls, plus an
   outlet on the back wall) is visible at once, without hiding any behind
   another. Architectural features — door, window, outlet, vent — are
   drawn in-place on the correct surface.

   Uses the same data-behavior="room-map" + [data-zone] / [data-active]
   contract as the existing room-map.css, so main.js hover/focus sync
   works out of the box.
   ========================================================================= */

.soundproofing-leak-container {
  max-width: min(var(--container-wide, 1280px), 100%);
}

.soundproofing-leak-container .page-section__header {
  max-width: min(100%, 58rem);
}

.soundproofing-leak-container .page-section__lede {
  margin-top: var(--space-4);
}

.leak-map {
  display: grid;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  margin-top: var(--space-10);
  align-items: start;
}

/* ── Hero: the 3D cutaway chart ─────────────────────────────────────────── */

.leak-map__stage {
  position: relative;
  background:
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--color-accent-soft) 18%, transparent) 0 28%, transparent 56%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Blueprint-style corner crop marks — tiny touch that frames the chart as a
   technical drawing rather than a loose illustration. */
.leak-map__stage::before,
.leak-map__stage::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-ink-subtle);
  opacity: 0.32;
  pointer-events: none;
}
.leak-map__stage::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}
.leak-map__stage::after {
  bottom: 12px;
  right: 12px;
  border-left: 0;
  border-top: 0;
}

.leak-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  color: var(--color-ink-muted);
}

/* Caption under the chart, framed with two hairline rules so it reads as an
   architectural legend plate. */
.leak-map__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  text-align: center;
}

.leak-map__caption-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-line-strong);
  opacity: 0.6;
}

/* ── 3D room surfaces ───────────────────────────────────────────────────── */

/* Ceiling — furthest from the viewer's eye (which sits at floor-level front),
   so we make it the lightest surface. */
.room3d__ceiling {
  fill: var(--color-bg);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

/* Floor — slightly darker to ground the composition. */
.room3d__floor {
  fill: var(--color-surface-2);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

/* Side walls — sit between ceiling and floor in value. A plain solid fill is
   fine; the single-point-perspective cues already do the depth work. */
.room3d__wall--left,
.room3d__wall--right {
  fill: var(--color-surface-2);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  stroke-linejoin: miter;
  opacity: 0.85;
}

/* Back wall — the focal rectangle, pure white so markers + outlet read
   clearly against it. */
.room3d__wall--back {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}

/* Subtle perspective lines on the floor to reinforce the "boards running
   away from the viewer" reading. */
.room3d__floor-board {
  stroke: var(--color-line-strong);
  stroke-width: 0.75;
  opacity: 0.35;
  fill: none;
}

/* Matching subtle seams on the ceiling — fewer, so the ceiling stays quieter
   than the floor visually. */
.room3d__ceiling-seam {
  stroke: var(--color-line-strong);
  stroke-width: 0.75;
  opacity: 0.25;
  fill: none;
  stroke-dasharray: 4 3;
}

/* ── Architectural features ─────────────────────────────────────────────── */

/* Door — darker shaded rectangle skewed to sit on the left wall plane, with
   a tiny handle dot. */
.room3d__door {
  fill: rgba(15, 23, 42, 0.11);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

.room3d__door-handle {
  fill: var(--color-line-strong);
}

/* Window — cyan-tinted glass with a thin muntin cross, skewed onto the
   right wall plane. */
.room3d__window {
  fill: rgba(14, 165, 233, 0.1);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

.room3d__window-muntin {
  stroke: var(--color-line-strong);
  stroke-width: 1;
  fill: none;
}

/* Outlet on the back wall — tiny duplex receptacle, two slot rectangles
   inside a dark square. */
.room3d__outlet {
  fill: rgba(15, 23, 42, 0.2);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.room3d__outlet-slot {
  fill: var(--color-surface);
}

/* Ceiling vent — dark parallelogram with horizontal grille stripes. */
.room3d__vent {
  fill: rgba(15, 23, 42, 0.1);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.room3d__vent-stripe {
  stroke: var(--color-line-strong);
  stroke-width: 0.9;
  opacity: 0.55;
  fill: none;
}

/* Vent corner bolts — tiny dark dots at each corner so the vent reads as real
   mounted hardware rather than a painted shape. */
.room3d__vent-bolt {
  fill: var(--color-line-strong);
}

/* Door panels — inset polygons following the door's axonometric skew, so the
   door reads as a real panelled door rather than a flat slab. */
.room3d__door-panel {
  fill: none;
  stroke: var(--color-line-strong);
  stroke-width: 0.9;
  opacity: 0.7;
}

/* ── Holographic scaffold ───────────────────────────────────────────────────
   Thin dashed accent lines representing the framing members (studs, joists,
   top/bottom plates) behind each surface — like an x-ray / blueprint overlay.
   Helps viewers read each surface as "built structure" at a glance rather
   than abstract geometry. Always visible, kept muted so they support the
   composition rather than competing with it. */

.room3d__scaffold line {
  stroke: var(--color-accent);
  stroke-width: 0.85;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
  opacity: 0.42;
  fill: none;
}

/* Back wall gets slightly more presence since it's the focal surface the eye
   lands on first. */
.room3d__scaffold--back line {
  opacity: 0.5;
}

/* ── Numbered markers ───────────────────────────────────────────────────── */

.leak-marker {
  cursor: pointer;
  outline: none;
}

/* Soft accent halo — fades in on active state. */
.leak-marker__halo {
  fill: var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.leak-marker__core {
  fill: var(--color-accent);
  stroke: var(--color-surface);
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.22));
  transition: fill var(--duration-fast) var(--ease-out),
              r var(--duration-base) var(--ease-out);
}

.leak-marker__number {
  fill: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* Active state: matches hover OR sibling card hover via data-active. */
.leak-map[data-active="1"] .leak-marker[data-zone="1"] .leak-marker__halo,
.leak-map[data-active="2"] .leak-marker[data-zone="2"] .leak-marker__halo,
.leak-map[data-active="3"] .leak-marker[data-zone="3"] .leak-marker__halo,
.leak-map[data-active="4"] .leak-marker[data-zone="4"] .leak-marker__halo,
.leak-map[data-active="5"] .leak-marker[data-zone="5"] .leak-marker__halo,
.leak-map[data-active="6"] .leak-marker[data-zone="6"] .leak-marker__halo,
.leak-marker:hover .leak-marker__halo,
.leak-marker:focus-visible .leak-marker__halo {
  opacity: 0.32;
}

.leak-map[data-active="1"] .leak-marker[data-zone="1"] .leak-marker__core,
.leak-map[data-active="2"] .leak-marker[data-zone="2"] .leak-marker__core,
.leak-map[data-active="3"] .leak-marker[data-zone="3"] .leak-marker__core,
.leak-map[data-active="4"] .leak-marker[data-zone="4"] .leak-marker__core,
.leak-map[data-active="5"] .leak-marker[data-zone="5"] .leak-marker__core,
.leak-map[data-active="6"] .leak-marker[data-zone="6"] .leak-marker__core,
.leak-marker:hover .leak-marker__core,
.leak-marker:focus-visible .leak-marker__core {
  fill: var(--color-accent-hover);
}

/* ── Floating name labels ───────────────────────────────────────────────────
   A small pill beside each marker that names the surface ("The door",
   "The window", …) so viewers know what they're hovering before they commit.
   Hidden by default; fades in on hover, keyboard focus, or when the paired
   card is hovered (via the existing data-active sync). */

.leak-marker__label {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.leak-marker__label-bg {
  fill: var(--color-ink);
  stroke: var(--color-surface);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.2));
}

.leak-marker__label-text {
  fill: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
}

/* Reveal conditions. Bidirectional: hovering a marker *or* hovering its
   paired card (JS sets data-active) both surface the label. */
.leak-map[data-active="1"] .leak-marker[data-zone="1"] .leak-marker__label,
.leak-map[data-active="2"] .leak-marker[data-zone="2"] .leak-marker__label,
.leak-map[data-active="3"] .leak-marker[data-zone="3"] .leak-marker__label,
.leak-map[data-active="4"] .leak-marker[data-zone="4"] .leak-marker__label,
.leak-map[data-active="5"] .leak-marker[data-zone="5"] .leak-marker__label,
.leak-map[data-active="6"] .leak-marker[data-zone="6"] .leak-marker__label,
.leak-marker:hover .leak-marker__label,
.leak-marker:focus-visible .leak-marker__label {
  opacity: 1;
}

/* ── Card grid (3×2 desktop → 2×3 tablet → 1×6 mobile) ──────────────────── */

.leak-map__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .leak-map {
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
    gap: clamp(var(--space-6), 4vw, var(--space-10));
  }

  .leak-map__stage {
    position: sticky;
    top: var(--space-6);
    padding: clamp(var(--space-3), 1.6vw, var(--space-5));
  }

  .leak-map__svg {
    max-height: clamp(20rem, 34vw, 29rem);
  }

  .leak-map__cards {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--space-3);
  }

  .leak-card__primary {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  .leak-card__chips {
    padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 44px);
    border-top: 0;
    background: transparent;
  }
}

@media (min-width: 1200px) {
  .leak-map {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: clamp(var(--space-8), 4vw, var(--space-12));
  }

  .leak-map__svg {
    max-height: clamp(24rem, 36vw, 32rem);
  }
}

@media (max-width: 899px) {
  .leak-map__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 499px) {
  .leak-map__cards {
    grid-template-columns: 1fr;
  }
}

.leak-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Offset anchor jumps so a tapped card lands clear of any sticky header
     rather than tucked under it. */
  scroll-margin-top: var(--space-8);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

/* ── Active state, split by input capability ────────────────────────────── */

/* Always-on highlight: keyboard focus, JS-driven hover sync, and — on touch —
   the :target match that fires after tapping a numbered marker. Border only,
   no lift, because a lift on tap feels jittery on phones. */
.leak-card:focus-within,
.leak-card:target,
.leak-map[data-active="1"] .leak-card[data-zone="1"],
.leak-map[data-active="2"] .leak-card[data-zone="2"],
.leak-map[data-active="3"] .leak-card[data-zone="3"],
.leak-map[data-active="4"] .leak-card[data-zone="4"],
.leak-map[data-active="5"] .leak-card[data-zone="5"],
.leak-map[data-active="6"] .leak-card[data-zone="6"] {
  border-color: var(--color-accent);
}

/* Hover-only enhancement: lift + shadow for precision pointers
   (mouse/trackpad). Excluded on touch so cards stay flat on tap. */
@media (hover: hover) and (pointer: fine) {
  .leak-card:hover,
  .leak-card:focus-within,
  .leak-map[data-active="1"] .leak-card[data-zone="1"],
  .leak-map[data-active="2"] .leak-card[data-zone="2"],
  .leak-map[data-active="3"] .leak-card[data-zone="3"],
  .leak-map[data-active="4"] .leak-card[data-zone="4"],
  .leak-map[data-active="5"] .leak-card[data-zone="5"],
  .leak-map[data-active="6"] .leak-card[data-zone="6"] {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }
}

.leak-card__primary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.leak-card__primary:focus-visible {
  outline: none;
}

.leak-card__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* Number badge fills with accent on active state — works for keyboard focus,
   JS-driven sync, and :target (mobile tap landing). */
.leak-card:focus-within .leak-card__num,
.leak-card:target .leak-card__num,
.leak-map[data-active="1"] .leak-card[data-zone="1"] .leak-card__num,
.leak-map[data-active="2"] .leak-card[data-zone="2"] .leak-card__num,
.leak-map[data-active="3"] .leak-card[data-zone="3"] .leak-card__num,
.leak-map[data-active="4"] .leak-card[data-zone="4"] .leak-card__num,
.leak-map[data-active="5"] .leak-card[data-zone="5"] .leak-card__num,
.leak-map[data-active="6"] .leak-card[data-zone="6"] .leak-card__num {
  background: var(--color-accent);
  color: var(--color-surface);
}

/* Pointer-only :hover badge fill — kept out of the shared list so it can't
   fire phantom hovers on touch. */
@media (hover: hover) and (pointer: fine) {
  .leak-card:hover .leak-card__num {
    background: var(--color-accent);
    color: var(--color-surface);
  }
}

.leak-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.leak-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
}

.leak-card__fix {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.4;
  margin: 0;
}

.leak-card__fix strong {
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-hover);
}

.leak-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px dashed var(--color-line);
  background: var(--color-bg);
}

.leak-card__chip {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-line);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.leak-card__chip:hover,
.leak-card__chip:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  transform: translateY(-1px);
  outline: none;
}

/* ── Responsive polish ──────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .leak-map__stage {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }
  .leak-map {
    gap: var(--space-6);
    margin-top: var(--space-8);
  }
}

@media (max-width: 499px) {
  .leak-map__stage {
    padding: var(--space-5) var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
  }
  .leak-map {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  .leak-map__stage::before,
  .leak-map__stage::after {
    width: 10px;
    height: 10px;
  }
  .leak-card__primary {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .leak-card__chips {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .leak-card__num {
    width: 28px;
    height: 28px;
  }
  .leak-card__name {
    font-size: var(--fs-sm);
  }
  .leak-card__fix {
    font-size: var(--fs-xs);
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .leak-marker__core,
  .leak-marker__halo,
  .leak-marker__label,
  .leak-card {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY — staged, conversion-oriented index
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproofing-hub .library__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.soundproofing-hub .library__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 188px;
  padding: var(--space-5);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.soundproofing-hub .library__hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-accent);
  opacity: 0.7;
}

.soundproofing-hub .library__hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.soundproofing-hub .library__hero-title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

.soundproofing-hub .library__hero-desc {
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

.soundproofing-hub .library__hero-cta {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.soundproofing-hub .library__hero:hover,
.soundproofing-hub .library__hero:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 12px 30px -18px rgba(12, 148, 158, 0.45);
  transform: translateY(-2px);
}

.soundproofing-hub .library__filter-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stage-color, var(--color-accent));
}

.soundproofing-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent); }
.soundproofing-hub [data-filter="orient"] .library__filter-dot { background: #6366F1; }
.soundproofing-hub [data-filter="principles"] .library__filter-dot { background: #0EA5E9; }
.soundproofing-hub [data-filter="surfaces"] .library__filter-dot { background: #0891B2; }
.soundproofing-hub [data-filter="rooms"] .library__filter-dot { background: #059669; }
.soundproofing-hub [data-filter="picks"] .library__filter-dot { background: #A21CAF; }
.soundproofing-hub [data-filter="method"] .library__filter-dot { background: #D97706; }
.soundproofing-hub [data-filter="myths"] .library__filter-dot { background: #DC2626; }

.soundproofing-hub .library__item {
  --stage-color: var(--color-accent);
  border-top: 0;
  border-left: 3px solid var(--stage-color);
  padding-left: var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.soundproofing-hub .library__item[data-stage="orient"] { --stage-color: #6366F1; }
.soundproofing-hub .library__item[data-stage="principles"] { --stage-color: #0EA5E9; }
.soundproofing-hub .library__item[data-stage="surfaces"] { --stage-color: #0891B2; }
.soundproofing-hub .library__item[data-stage="rooms"] { --stage-color: #059669; }
.soundproofing-hub .library__item[data-stage="picks"] { --stage-color: #A21CAF; }
.soundproofing-hub .library__item[data-stage="method"] { --stage-color: #D97706; }
.soundproofing-hub .library__item[data-stage="myths"] { --stage-color: #DC2626; }

.soundproofing-hub .library__link {
  grid-template-rows: auto auto auto;
  padding: var(--space-4) var(--space-3);
}

.soundproofing-hub .library__link:hover,
.soundproofing-hub .library__link:focus-visible {
  background: color-mix(in srgb, var(--stage-color) 7%, transparent);
  padding-left: var(--space-4);
  outline: none;
}

.soundproofing-hub .library__item:target .library__link {
  background: color-mix(in srgb, var(--stage-color) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-color) 32%, transparent);
}

.soundproofing-hub .library__stage-tag {
  color: var(--stage-color);
}

.soundproofing-hub .library__desc {
  display: block;
  grid-column: 1;
  grid-row: 3;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

@media (max-width: 899px) {
  .soundproofing-hub .library__featured {
    grid-template-columns: 1fr;
  }

  .soundproofing-hub .library__hero {
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADJACENT READS — illustrated destination rail
   ═══════════════════════════════════════════════════════════════════════════ */

.soundproofing-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; }
.soundproofing-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; }
.soundproofing-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; }
.soundproofing-hub .adj-card[data-hub="foam"] { --hub-accent: #06B6D4; }
.soundproofing-hub .adj-card[data-hub="soundbar"] { --hub-accent: #B45309; }

.soundproofing-hub .adj-reads {
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-1);
  padding: var(--space-2) var(--space-1) var(--space-4);
  margin: 0 calc(var(--space-1) * -1);
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 145, 178, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
}

.soundproofing-hub .adj-reads::-webkit-scrollbar {
  height: 6px;
}

.soundproofing-hub .adj-reads::-webkit-scrollbar-track {
  background: transparent;
}

.soundproofing-hub .adj-reads::-webkit-scrollbar-thumb {
  background: rgba(8, 145, 178, 0.22);
  border-radius: 4px;
}

.soundproofing-hub .adj-reads::-webkit-scrollbar-thumb:hover {
  background: rgba(8, 145, 178, 0.4);
}

.soundproofing-hub .adj-reads .adj-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (min-width: 780px) {
  .soundproofing-hub .adj-reads .adj-card {
    flex-basis: 340px;
  }
}

@media (max-width: 520px) {
  .soundproofing-hub .adj-reads .adj-card {
    flex-basis: 280px;
  }
}

.soundproofing-hub .adj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.soundproofing-hub .adj-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--hub-accent, var(--color-accent));
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.soundproofing-hub .adj-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5) var(--space-3);
  background: color-mix(in srgb, var(--hub-accent, var(--color-accent)) 4%, transparent);
}

.soundproofing-hub .adj-card__svg {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  color: var(--hub-accent, var(--color-accent));
  opacity: 0.72;
  transition: opacity var(--duration-base) var(--ease-out);
}

.soundproofing-hub .adj-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.soundproofing-hub .adj-card__role {
  color: var(--hub-accent, var(--color-accent));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.soundproofing-hub .adj-card__name {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.15;
  transition: color var(--duration-fast) var(--ease-out);
}

.soundproofing-hub .adj-card__hook {
  flex: 1;
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.soundproofing-hub .adj-card__cta {
  margin-top: var(--space-2);
  color: var(--hub-accent, var(--color-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  transition: letter-spacing var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .soundproofing-hub .adj-card:hover,
  .soundproofing-hub .adj-card:focus-visible {
    border-color: var(--hub-accent, var(--color-accent));
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--hub-accent, var(--color-accent)) 20%, transparent);
    transform: translateY(-3px);
    outline: none;
  }

  .soundproofing-hub .adj-card:hover::before,
  .soundproofing-hub .adj-card:focus-visible::before {
    opacity: 1;
  }

  .soundproofing-hub .adj-card:hover .adj-card__svg,
  .soundproofing-hub .adj-card:focus-visible .adj-card__svg {
    opacity: 0.88;
  }

  .soundproofing-hub .adj-card:hover .adj-card__name,
  .soundproofing-hub .adj-card:focus-visible .adj-card__name {
    color: var(--hub-accent, var(--color-accent));
  }

  .soundproofing-hub .adj-card:hover .adj-card__cta,
  .soundproofing-hub .adj-card:focus-visible .adj-card__cta {
    letter-spacing: 0.06em;
  }
}

@media (max-width: 520px) {
  .soundproofing-hub .adj-card__visual {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .soundproofing-hub .adj-card__svg {
    max-width: 120px;
  }
}