/* ============================================================
   XQUBE GLOBAL — FOR CPA FIRMS (page 05)
   One argument, one shape: a line down the middle of the page.
   Everything XQUBE carries lives on one side of it, everything
   the firm keeps lives on the other, and the seam between them
   is lit. Nothing crosses. Layers on css/main.css only.
   ============================================================ */

/* ---------- you are here ---------- */
.nav-links a.is-here { color: var(--text); }
.nav-links a.is-here::after { transform: scaleX(1); opacity: 0.6; }
.mobile-links a.is-here { color: var(--text); }
.mobile-links a.is-here .mono { color: var(--pink); }

/* ---------- the cold open belongs to the homepage ----------
   An inner page is arrived at, not opened on. The chrome stays. */
.js.cold .nav-inner,
.js.cold .scroll-progress { opacity: 1; }

/* ============================================================
   SCENE — the title
   Takes the film's "prologue" slot so the number-field builds,
   then plays this page's own beat (js/for-cpa-firms.js).
   ============================================================ */
section[data-scene="prologue"].cpa-title { height: 240vh; }

.cpa-title-stage {
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s6));
  padding-bottom: var(--s7);
}
.cpa-title-stage .title-block { max-width: 1120px; }
.cpa-h1 {
  font-size: clamp(34px, 5.2vw, 74px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 24ch;
  margin: 0 auto;
}
/* the second sentence is the turn — it gets its own line, always */
.cpa-h1 .ink-pink { display: block; }

/* the count line: chrome, in mono, foreshadowing the split */
.cpa-title-meta {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3);
  margin-top: clamp(36px, 6vh, 72px);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--faint);
  opacity: var(--metaop, 1);
  transform: translateY(calc((1 - var(--metaop, 1)) * 18px));
  text-align: center;
}
.cpa-title-meta em { font-style: normal; color: var(--purple-soft); }
.cpa-title-meta span:last-of-type em { color: var(--pink-soft); }
.cpa-title-meta i {
  display: block; flex: none;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  opacity: 0.6;
}

/* ============================================================
   REST — the proposition
   Lights word by word as it rises (engine flow scrub).
   ============================================================ */
.cpa-intro-rest { padding-top: clamp(96px, 15vh, 180px); }
.cpa-intro {
  font-size: clamp(19px, 2.3vw, 29px);
  line-height: 1.52;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--text);
  text-wrap: pretty;
}

/* ============================================================
   SCENE — THE DIVISION OF LABOUR
   Two lists face each other across a lit seam. The seam draws
   downward as the pairs land, alternately, left then right.
   ============================================================ */
section[data-scene="division"] { height: 460vh; }

/* eighteen rows have to live inside one viewport, so the stage runs
   tighter than the film's default padding */
.dl-stage {
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s3));
  padding-bottom: var(--s4);
}
.dl-wrap { position: relative; z-index: 2; width: 100%; }

.dl-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2);
  font-size: 11px; letter-spacing: 0.26em;
  color: var(--faint);
  padding-bottom: var(--s2);
  margin-bottom: clamp(24px, 4vh, 44px);
  border-bottom: 1px solid var(--line);
}
.dl-count em { font-style: normal; color: var(--purple-soft); }

/* the grid IS the argument: side, seam, side */
.dl-grid {
  --gut: clamp(22px, 3.6vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: var(--gut);
  align-items: stretch;
}

.dl-col { min-width: 0; }
.dl-col-d { text-align: right; }
.dl-col-r { text-align: left; }

.dl-head {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-bottom: var(--s2);
  margin-bottom: var(--s1);
}
.dl-col-d .dl-head { color: var(--text); }
.dl-col-r .dl-head { color: var(--text); }
.dl-head::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin-top: 10px;
  border-radius: 2px;
}
.dl-col-d .dl-head::after {
  margin-left: auto;
  background: var(--purple);
  box-shadow: 0 0 14px rgba(91, 76, 255, 0.7);
}
.dl-col-r .dl-head::after {
  background: var(--pink);
  box-shadow: 0 0 14px rgba(255, 77, 128, 0.6);
}

.dl-list { list-style: none; margin: 0; padding: 0; }

.dl-item {
  position: relative;
  display: grid;
  gap: var(--s2);
  align-items: baseline;
  padding: clamp(7px, 1.1vh, 11px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--mist);
}
.dl-col-d .dl-item { grid-template-columns: auto 1fr; padding-right: var(--s2); --dir: -1; }
.dl-col-r .dl-item { grid-template-columns: 1fr auto; padding-left: var(--s2); --dir: 1; }
.dl-text { display: block; }
.dl-tag {
  font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--faint);
  transition: color 0.35s ease;
}
.dl-col-d .dl-item:hover .dl-tag { color: var(--purple-soft); }
.dl-col-r .dl-item:hover .dl-tag { color: var(--pink-soft); }
.dl-item:hover { color: var(--text); }

/* the arrival tick: a lit edge on the seam-facing side */
.dl-item::after {
  content: "";
  position: absolute; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  transform: scaleY(var(--ip, 1));
  transform-origin: 50% 0;
}
.dl-col-d .dl-item::after {
  right: 0;
  background: var(--purple);
  box-shadow: 0 0 10px rgba(91, 76, 255, 0.55);
}
.dl-col-r .dl-item::after {
  left: 0;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 77, 128, 0.5);
}

/* the reach: hovering an item runs a line to the seam — and it stops there */
.dl-item::before {
  content: "";
  position: absolute; top: 50%;
  width: var(--gut); height: 1px;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}
.dl-col-d .dl-item::before {
  right: calc(-1 * var(--gut));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--purple), rgba(91, 76, 255, 0.15));
}
.dl-col-r .dl-item::before {
  left: calc(-1 * var(--gut));
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, var(--pink), rgba(255, 77, 128, 0.15));
}
.dl-item:hover::before { opacity: 1; transform: scaleX(1); }

/* ---------- the seam ---------- */
.dl-seam {
  position: relative;
  background: var(--line);
  align-self: stretch;
}
.dl-seam-lit {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--purple), var(--pink));
  box-shadow: 0 0 18px rgba(91, 76, 255, 0.6);
  transform: scaleY(var(--seamdraw, 1));
  transform-origin: 50% 0;
}
.dl-seam-tip {
  position: absolute; left: 50%;
  top: calc(var(--seamdraw, 1) * 100%);
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(255, 77, 128, 0.95);
  opacity: var(--tipop, 0);
}

/* the scroll-driven state only exists where the scene can actually play */
@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
  .js .dl-item {
    opacity: calc(0.13 + 0.87 * var(--ip, 0));
    transform: translateX(calc(var(--dir) * (1 - var(--ip, 0)) * 30px));
    transition: opacity 0.06s linear;
  }
  .js .dl-item::after { transform: scaleY(var(--ip, 0)); }
  .js .dl-head {
    opacity: calc(0.2 + 0.8 * var(--headp, 0));
    transform: translateY(calc((1 - var(--headp, 0)) * 14px));
  }
  .js .dl-seam-lit { transform: scaleY(var(--seamdraw, 0)); }
  .js .dl-seam-tip { top: calc(var(--seamdraw, 0) * 100%); }
}

/* ============================================================
   REST — STRAIGHT ANSWERS
   The objection first. The answer on interaction. Native
   <details> underneath, so it works with no JS at all.
   ============================================================ */
.cpa-answers-h2 { margin-bottom: clamp(36px, 6vh, 64px); }

.qa-list {
  border-top: 1px solid var(--line);
  max-width: 900px;
}
.qa {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.qa::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: -1px;
  width: 2px;
  background: linear-gradient(180deg, var(--purple), var(--pink));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.5s cubic-bezier(0.22, 0.6, 0.2, 1);
}
.qa[open]::before { transform: scaleY(1); }

.qa-summary {
  display: grid;
  grid-template-columns: 54px 1fr 26px;
  gap: var(--s2);
  align-items: start;
  padding: clamp(20px, 3vh, 30px) 0 clamp(20px, 3vh, 30px) var(--s3);
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.qa-summary::-webkit-details-marker { display: none; }
.qa-summary::marker { content: ""; }
.qa:hover .qa-summary,
.qa[open] .qa-summary { padding-left: calc(var(--s3) + 8px); }
.qa-summary:focus-visible {
  outline: 2px solid var(--purple-soft);
  outline-offset: 2px;
  border-radius: 6px;
}

.qa-num {
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--faint);
  padding-top: 0.55em;
  transition: color 0.35s ease;
}
.qa[open] .qa-num { color: var(--pink-soft); }

.qa-q {
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--mist);
  text-wrap: pretty;
  transition: color 0.35s ease;
}
.qa:hover .qa-q,
.qa[open] .qa-q { color: var(--text); }

/* the plus/minus, drawn not typed */
.qa-mark {
  position: relative;
  width: 22px; height: 22px;
  margin-top: 0.35em;
  justify-self: end;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.qa-mark i {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 1px;
  margin: -0.5px 0 0 -4.5px;
  background: var(--mist);
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1), background 0.35s ease;
}
.qa-mark i:last-child { transform: rotate(90deg); }
.qa[open] .qa-mark { border-color: var(--pink); transform: rotate(180deg); }
.qa[open] .qa-mark i { background: var(--pink-soft); }
.qa[open] .qa-mark i:last-child { transform: rotate(0deg); }

.qa-panel { overflow: hidden; }
.js .qa-panel { transition: height 0.42s cubic-bezier(0.22, 0.6, 0.2, 1); }
.qa-panel-in {
  padding: 0 var(--s6) clamp(26px, 4vh, 38px) calc(var(--s3) + 54px + var(--s2));
  max-width: 76ch;
}
.qa-a {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.8;
  color: var(--mist);
}
.qa-a a {
  color: var(--pink-soft);
  border-bottom: 1px solid rgba(255, 77, 128, 0.4);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.qa-a a:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* eight controls, counted — chrome, not copy */
.qa-meter {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--faint);
}
.qa-meter em { font-style: normal; color: var(--purple-soft); }
.qa-meter-bars { display: flex; gap: 4px; }
.qa-meter-bars i {
  display: block;
  width: 12px; height: 3px;
  border-radius: 2px;
  background: var(--purple);
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(91, 76, 255, 0.5);
}

/* ============================================================
   ONWARD
   ============================================================ */
.cpa-onward { padding-top: clamp(72px, 11vh, 150px); }
.cpa-onward.section:last-of-type { padding-bottom: clamp(48px, 8vh, 104px); }
.cpa-onward-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.cpa-onward-label {
  font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--faint);
  margin-right: var(--s2);
}
.cpa-onward-links { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ============================================================
   RESPONSIVE
   The seam is a vertical idea; a phone has no room for two
   facing columns, so the division restates itself as two
   stacked bands, each with its own coloured rail.
   ============================================================ */
@media (max-width: 1100px) {
  .dl-item { font-size: 13px; }
  .dl-eyebrow { letter-spacing: 0.18em; }
}

/* a short desktop window still has to hold all eighteen rows */
@media (min-width: 981px) and (max-height: 720px) {
  .dl-stage {
    padding-top: calc(var(--nav-h) + var(--s2));
    padding-bottom: var(--s3);
  }
  .dl-eyebrow { margin-bottom: var(--s3); }
  .dl-head { font-size: clamp(18px, 1.8vw, 22px); }
}

@media (max-width: 980px) {
  /* the title beat is two lines — keep it pinned, take the stage back
     from main.css's mobile prologue rules */
  section[data-scene="prologue"].cpa-title { height: 190vh; }
  section[data-scene="prologue"].cpa-title .scene-stage {
    position: sticky; top: 0;
    height: 100svh; min-height: 0;
    overflow: hidden;
    justify-content: center;
    padding: calc(var(--nav-h) + var(--s5)) var(--pad) var(--s6);
  }
  section[data-scene="prologue"].cpa-title .scroll-cue { display: flex; }
  /* THE WORLD STEPS BACK — ONCE, NOT SIX TIMES.
     This was 0.42, written for the title stage. But .hero-canvas-wrap is
     position:fixed and covers the whole document, so the 0.42 landed on all
     SIX formations this page registers, and it compounded with two penalties
     the engine already applies unprompted: below 980px the field is capped at
     850 particles instead of 2100 and half of them draw at 1.4px instead of
     2.2px. The closing globe — 0.4 in the region table, with place names set
     at 9px mono — was arriving at 0.168 and simply could not be read.
     0.72 is still visibly less ink than the desktop the client approved
     (fewer particles, smaller particles, 72% opacity), and the copy is
     protected where it should be: by the region table, which already puts
     the dense #division section on 'ambient' at 0.22. */
  .hero-canvas-wrap { opacity: 0.72; }
  .cpa-h1 { font-size: clamp(30px, 8vw, 46px); max-width: 100%; }
  .cpa-title-meta {
    flex-direction: column; gap: var(--s1);
    font-size: 10px; letter-spacing: 0.16em;
  }
  .cpa-title-meta i { width: 26px; }

  /* the division goes static and stacks */
  section[data-scene="division"] { height: auto; }
  section[data-scene="division"] .scene-stage {
    position: static;
    height: auto; min-height: 0;
    overflow: visible;
    padding: var(--section-gap) var(--pad) 0;
  }
  .dl-grid { grid-template-columns: 1fr; row-gap: var(--s6); }
  .dl-seam { display: none; }
  .dl-col-d, .dl-col-r { text-align: left; }
  .dl-col { border-left: 2px solid var(--line); padding-left: var(--s3); }
  .dl-col-d { border-left-color: rgba(91, 76, 255, 0.6); }
  .dl-col-r { border-left-color: rgba(255, 77, 128, 0.55); }
  .dl-col-d .dl-item,
  .dl-col-r .dl-item {
    grid-template-columns: 34px 1fr;
    padding-left: 0; padding-right: 0;
    font-size: 14px;
  }
  /* one order for both columns on a phone: index, then the item */
  .dl-col-r .dl-item .dl-text { order: 2; }
  .dl-col-r .dl-item .dl-tag { order: 1; }
  .dl-item::before, .dl-item::after { display: none; }
  .dl-col-d .dl-head::after { margin-left: 0; }

  .qa-summary { grid-template-columns: 40px 1fr 22px; padding-left: var(--s2); }
  .qa:hover .qa-summary, .qa[open] .qa-summary { padding-left: calc(var(--s2) + 6px); }
  .qa-panel-in { padding: 0 0 clamp(22px, 4vh, 32px) calc(var(--s2) + 40px + var(--s2)); }
}

/* ============================================================
   THE DIVISION, ON A PHONE
   Desktop draws a lit seam down the middle of the page and lands
   the rows alternately across it. A phone has no middle to draw,
   so the seam is restated as the column rail — and the rows draw
   it themselves: each one lights its own segment as it arrives,
   the segments butt together into one line growing downward, and
   the glow rides the row that landed last the way the desktop tip
   rides the front of the draw. Same argument, same moment, at a
   cost that is one class swap per arrival and nothing per frame.

   EVERYTHING HERE HANGS OFF .dl-armed, which js/for-cpa-firms.js
   sets two statements before it runs its first arrival pass. With
   no JS, a thrown script, or reduced motion the class is absent
   and the block above stands untouched: eighteen rows at full
   strength against a coloured rail, exactly as shipped.
   ============================================================ */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  /* armed, the rail starts neutral — the colour is what arrives */
  .dl-armed .dl-col-d,
  .dl-armed .dl-col-r { border-left-color: var(--line); }

  .dl-armed .dl-head {
    opacity: 0.22;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.22, 0.6, 0.2, 1),
                transform 0.5s cubic-bezier(0.22, 0.6, 0.2, 1);
    transition-delay: var(--dld, 0ms);
  }
  .dl-armed .dl-head.dl-in { opacity: 1; transform: none; }

  .dl-armed .dl-item {
    opacity: 0.18;
    /* the row arrives FROM the rail. Both columns read left-to-right at
       this width, so there is no --dir to mirror — off-screen would only
       hand a 390px viewport a horizontal scrollbar. */
    transform: translateX(14px);
    transition: opacity 0.5s cubic-bezier(0.22, 0.6, 0.2, 1),
                transform 0.5s cubic-bezier(0.22, 0.6, 0.2, 1);
    transition-delay: var(--dld, 0ms);
  }
  .dl-armed .dl-item.dl-in { opacity: 1; transform: none; }

  /* the seam, drawn by the rows. -1px reaches back over the row's own
     border-top so consecutive segments meet with no gap. */
  .dl-armed .dl-item::after {
    content: "";
    display: block;
    position: absolute;
    top: -1px; bottom: 0;
    width: 2px;
    border-radius: 0;
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 0.5s cubic-bezier(0.22, 0.6, 0.2, 1),
                box-shadow 0.45s ease;
    transition-delay: var(--dld, 0ms);
  }
  /* sits exactly on the column's 2px border: back out its padding, then
     the border itself */
  .dl-armed .dl-col-d .dl-item::after,
  .dl-armed .dl-col-r .dl-item::after {
    left: calc(-1 * var(--s3) - 2px);
    right: auto;
    /* eighteen blurred shadows is the one part of this a phone should not
       be asked to pay for — the glow belongs to the front, and only there */
    box-shadow: none;
  }
  .dl-armed .dl-col-d .dl-item::after { background: var(--purple); }
  .dl-armed .dl-col-r .dl-item::after { background: var(--pink); }
  .dl-armed .dl-item.dl-in::after { transform: scaleY(1); }

  /* the tip of light: one lit segment at the edge of what has been decided */
  .dl-armed .dl-col-d .dl-item.dl-front::after { box-shadow: 0 0 12px rgba(91, 76, 255, 0.75); }
  .dl-armed .dl-col-r .dl-item.dl-front::after { box-shadow: 0 0 12px rgba(255, 77, 128, 0.7); }
}

@media (max-width: 640px) {
  .cpa-intro { font-size: 18.5px; }
  .qa-panel-in { padding-left: var(--s2); }
  .qa-meter { flex-wrap: wrap; }
  .cpa-onward-row { flex-direction: column; align-items: stretch; }
  .cpa-onward-links { flex-direction: column; }
  .cpa-onward-links .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   STATICS — no-JS and reduced motion get the whole page
   ============================================================ */
.no-js section[data-scene="prologue"].cpa-title { height: auto !important; }
.no-js section[data-scene="prologue"].cpa-title .scene-stage {
  position: static;
  height: auto; min-height: 0;
  overflow: visible;
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: var(--s7);
}
.no-js section[data-scene="prologue"].cpa-title .scroll-cue { display: none; }
.no-js .cpa-title-meta { opacity: 1; transform: none; }

.no-js section[data-scene="division"] { height: auto !important; }
.no-js section[data-scene="division"] .scene-stage {
  position: static;
  height: auto; min-height: 0;
  overflow: visible;
  padding: var(--section-gap) var(--pad) 0;
}
.no-js .dl-seam-tip { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  section[data-scene="prologue"].cpa-title { height: auto !important; }
  section[data-scene="prologue"].cpa-title .scene-stage {
    position: static;
    height: auto; min-height: 0;
    overflow: visible;
    padding-top: calc(var(--nav-h) + var(--s7));
    padding-bottom: var(--s7);
  }
  section[data-scene="prologue"].cpa-title .scroll-cue { display: none; }
  .cpa-title-meta { opacity: 1; transform: none; }

  section[data-scene="division"] { height: auto !important; }
  section[data-scene="division"] .scene-stage {
    position: static;
    height: auto; min-height: 0;
    overflow: visible;
    padding: var(--section-gap) var(--pad) 0;
  }
  .dl-item { opacity: 1; transform: none; }
  .dl-head { opacity: 1; transform: none; }
  .dl-seam-lit { transform: scaleY(1); }
  .dl-seam-tip { opacity: 0; }
  .qa-panel { transition: none; }
}