/* ─────────────────────────────────────────────
   ARCDESIGN — service pages (/arcdesign/<service>/)
   Builds on styles.css + arcdesign.css (tokens, light header, .ad-tag, .ad-h2, .rates,
   .sv-state, .sv-btn).
   Sections: hero (with the service's own transformation) · the problem · what you get ·
   good fit if · price / status (+ what happens next, or the early-access form) · final.
   The stage in the hero plays by itself, in time, once it's in view (arcdesign-service.js):
     --a  0 → 1  the problem gets marked (annotations)
     --t  0 → 1  the transformation (mess → system)
   ───────────────────────────────────────────── */

.sv-page {
  --brassy: #a8834f;
  --sv-bg: #EFEAE1;          /* the scene's room */
  --sv-stage: #E6DFD3;       /* the stage inside it */
  --sv-fg: var(--ink);
  --sv-dim: var(--ink-70);
  --sv-line: var(--ink-15);
  --sv-acc: var(--ox);
}
.sv--brand-refresh        { --sv-bg: #DDD6C9; --sv-stage: #D3CBBD; }
.sv--report-reframe       { --sv-bg: #E9E4DA; --sv-stage: #DFD8CC; }
.sv--presentation-reframe { --sv-bg: #242221; --sv-stage: #191817; --sv-fg: var(--oat); --sv-dim: rgb(222 216 204 / .68); --sv-line: rgb(222 216 204 / .13); --sv-acc: #d6a86d; }

.sv-page .site-menu__list a[aria-current="true"] { color: var(--ox); }
.sv { position: relative; overflow: clip; }

/* ─────────────── 01 · HERO (with the service's transformation) ─────────────── */
.sv-scene { position: relative; background: var(--sv-bg); color: var(--sv-fg); }
.sv-pin {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  gap: clamp(36px, 6vh, 56px);
  padding: 112px var(--gutter) clamp(64px, 10vh, 100px);
}
@media (min-width: 980px) {
  .sv-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(36px, 4.5vw, 80px); min-height: 100vh; min-height: 100svh; }
}
.sv-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--sv-line) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 12) 100%;
  background-position: var(--gutter) 0;
  opacity: .55;
}
.sv-hero { position: relative; z-index: 2; max-width: 36rem; }

.sv-crumb { margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 11px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sv-dim); }
.sv-crumb a { color: inherit; border-bottom: 1px solid currentColor; transition: color .3s; }
.sv-crumb a:hover { color: var(--sv-acc); }
.sv-crumb b { font-weight: 700; color: var(--sv-fg); }
.sv-h1 {
  margin: 0;
  font-size: clamp(2.3rem, min(4.4vw, 7.4vh), 4.5rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.sv-lede { margin: clamp(16px, 2.6vh, 24px) 0 0; max-width: 30rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.45; letter-spacing: -.01em; }
.sv-page .sv-scene .rates { max-width: 30rem; margin: clamp(18px, 3vh, 26px) 0 12px; border-color: var(--sv-line); }
.sv-page .sv-scene .rates > div + div { border-color: var(--sv-line); }
.sv-page .sv-scene .rates dt { color: var(--sv-dim); }
.sv-page .sv-scene .rates__pilot dt, .sv-page .sv-scene .rates__pilot dd { color: var(--sv-acc); }
.sv-limit { display: inline-block; margin: 0 0 18px; padding: 5px 10px; background: var(--sv-fg); color: var(--sv-bg); font: 400 12px var(--font-mono); letter-spacing: .08em; }
.sv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.sv-scene .sv-state { color: var(--sv-fg); }
.sv-statenote { margin: 12px 0 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: .06em; color: var(--sv-dim); }

/* section headings and copy */
.sv-h2 { margin: 0; max-width: 16ch; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 500; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.sv-body { max-width: 32rem; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.55; }
.sv-body p { margin: 0 0 12px; }

/* stage */
.sv-stage {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 4 / 3;
  container-type: size;
  background: var(--sv-stage);
  border: 1px solid var(--sv-line);
  overflow: hidden;
}
.sv-stage::after {           /* crop marks */
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 6;
  pointer-events: none;
  opacity: .55;
  --m: var(--sv-dim);
  background:
    linear-gradient(var(--m), var(--m)) left top / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1px 14px no-repeat;
}
.sv-slabel {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 6;
  margin: 0;
  font: 400 9px var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-slabel b { font-weight: 400; color: var(--sv-dim); opacity: calc(1 - var(--t) * 1.6); }
.sv-slabel em { position: absolute; left: 0; top: 0; font-style: normal; color: var(--sv-acc); opacity: clamp(0, calc((var(--t) - .7) * 4), 1); }
.sv-board {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(90cqw, 116cqh);
  aspect-ratio: 4 / 3;
  translate: -50% -50%;
  container-type: size;
}

/* shared mechanics: a piece has a messy face (.m) and a system face (.c).
   It sits in its system slot; the mess is an offset (fx, fy in board units, fr in deg, fz scale)
   that shrinks to 0 as the transformation reaches it (--s = when its turn starts). */
.pc {
  --k: clamp(0, calc((var(--t) - var(--s, 0)) * 2.2), 1);
  --sw: clamp(0, calc((var(--k) - .4) * 4), 1);
  position: absolute;
  translate: calc(var(--fx, 0) * (1 - var(--k)) * 1cqw) calc(var(--fy, 0) * (1 - var(--k)) * 1cqh);
  rotate: calc(var(--fr, 0) * (1 - var(--k)) * 1deg);
  scale: calc(1 + (var(--fz, 1) - 1) * (1 - var(--k)));
}
.pc > .m, .pc > .c { position: absolute; inset: 0; }
.pc > .m { opacity: calc(1 - var(--sw)); }
.pc > .c { opacity: var(--sw); }
/* noise that only exists in the mess */
.x { position: absolute; opacity: clamp(0, calc(1 - (var(--t) - var(--s, 0)) * 3), 1); }
/* the mess drifts a little while nobody fixes it */
.sv-stage.is-live .pc > .m, .sv-stage.is-live .x { animation: sv-float 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.7s); }
@keyframes sv-float { to { transform: translate(.5cqw, -.8cqh) rotate(1.4deg); } }
/* what the problem phase marks */
.sv-ann {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .6cqw;
  padding: .45cqw .8cqw;
  background: #F7F3EC;
  border: 1px solid var(--brassy);
  font: 400 max(7px, 1.05cqw)/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6f5227;
  opacity: calc(var(--a) * clamp(0, calc(1 - var(--t) * 3.2), 1));
  translate: 0 calc((1 - var(--a)) * 1.2cqh);
  box-shadow: 0 6px 14px -8px rgb(46 46 46 / .45);
}
.sv-ann::before { content: ""; width: .7cqw; min-width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--brassy); }
/* phones: fewer, larger things — the extra noise and labels (.sv-lo) go */
@container (max-width: 520px) {
  .sv-board .sv-lo { display: none; }
  .sv-ann { font-size: 7px; }
}

/* ─────────────── WORLD 01 · BRAND STARTER — identity being assembled ─────────────── */
.sv--brand-starter .sv-stage {
  background:
    linear-gradient(to right, rgb(46 46 46 / .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgb(46 46 46 / .05) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--sv-stage);
}
.id { font-size: max(6px, 1.3cqw); color: var(--ink); }
.id small { display: block; font: 400 max(5px, .95cqw)/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); }
.id-sheet {
  position: absolute;
  inset: 3% 2%;
  background:
    linear-gradient(to right, rgb(46 46 46 / .06) 1px, transparent 1px) 0 0 / 8.333% 100%,
    #F7F3EC;
  border: 1px solid var(--ink-15);
  box-shadow: 0 30px 60px -34px rgb(46 46 46 / .45);
  opacity: clamp(0, calc(var(--t) * 1.6 - .2), 1);
  scale: calc(.97 + var(--t) * .03);
}
.id-head { position: absolute; top: 2.6%; left: 3%; font: 400 max(5px, .9cqw) var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ox); }
.id-head--r { left: auto; right: 3%; color: var(--ink-45); }
.id .c { background: #EFE9DF; border: 1px solid var(--ink-15); padding: 1.3cqw 1.4cqw; display: grid; align-content: space-between; }
.id-mark { display: block; width: 7cqw; aspect-ratio: 1; background: radial-gradient(circle at 100% 100%, #F7F3EC 0 44%, transparent 45%), var(--ox); }
.id-lock { display: flex; align-items: center; gap: 1.5cqw; font: 500 3.1cqw/1 var(--font-sans); letter-spacing: -.045em; }

.id-logo  { left: 5%;  top: 11%; width: 43%; height: 41%; }
.id-var   { left: 50%; top: 11%; width: 20%; height: 41%; }
.id-ava   { left: 72%; top: 11%; width: 23%; height: 41%; }
.id-col   { left: 5%;  top: 55%; width: 43%; height: 19%; }
.id-type  { left: 50%; top: 55%; width: 45%; height: 19%; }
.id-guide { left: 5%;  top: 77%; width: 90%; height: 17%; }

.id-var .c { background: var(--ink); }
.id-var .c small { color: rgb(222 216 204 / .5); }
.id-var .c .id-mark { justify-self: center; margin-bottom: 18%; background: radial-gradient(circle at 100% 100%, var(--ink) 0 44%, transparent 45%), var(--oat); }
.id-ring { justify-self: center; margin-bottom: 10%; width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ox); display: grid; place-items: center; }
.id-ring .id-mark { width: 4.4cqw; background: radial-gradient(circle at 100% 100%, var(--ox) 0 44%, transparent 45%), #F7F3EC; }
.id-chips { display: flex; height: 5.4cqh; }
.id-chips i { flex: 1; }
.id-chips i:nth-child(1) { flex: 2.2; background: var(--ox); }
.id-chips i:nth-child(2) { background: var(--ink); }
.id-chips i:nth-child(3) { background: #DED8CC; box-shadow: inset 0 0 0 1px var(--ink-15); }
.id-chips i:nth-child(4) { background: #8095AA; }
.id-specs { display: flex; gap: 3cqw; align-items: end; }
.id-spec { display: grid; gap: .3cqw; }
.id-spec b { font: 500 4.8cqw/1 var(--font-sans); letter-spacing: -.04em; }
.id-spec--mono b { font: 400 4.8cqw/1 var(--font-mono); letter-spacing: 0; }
.id-spec em { font: 400 max(5px, .9cqw) var(--font-mono); font-style: normal; letter-spacing: .12em; color: var(--ink-45); text-transform: uppercase; }
.id-pages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; height: 6.6cqh; }
.id-pages i {
  background:
    linear-gradient(var(--ox), var(--ox)) 12% 20% / 28% 7% no-repeat,
    linear-gradient(#cfc8bd, #cfc8bd) 12% 46% / 72% 6% no-repeat,
    linear-gradient(#cfc8bd, #cfc8bd) 12% 64% / 54% 6% no-repeat,
    #fff;
  border: 1px solid var(--ink-15);
}

/* the mess */
.id .m { display: grid; place-items: center; }
.id-logo .m { background: #fff; border: 1px dashed #9a9a9a; }
.id-logo .m small { position: absolute; left: 4%; bottom: 6%; text-transform: none; letter-spacing: .04em; }
.id-canva {
  font: 700 3.2cqw "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  background: linear-gradient(90deg, #ff5fa2, #4fb3ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 rgb(0 0 0 / .18));
}
.id-var .m { background: #ffe14d; }
.id-var .m span { font: 900 5cqw Impact, "Arial Black", sans-serif; color: #1aa35a; letter-spacing: .06em; }
.id-var .m small, .id-ava .m small { position: absolute; left: 6%; bottom: 6%; text-transform: none; letter-spacing: .04em; color: rgb(0 0 0 / .45); }
.id-ava .m { background: linear-gradient(160deg, #f7b267, #f4845f 45%, #7b5ea7); border-radius: 12%; }
.id-ava .m small { color: rgb(255 255 255 / .8); }
.id-col .m { display: flex; align-items: center; gap: 4%; padding: 0 4%; }
.id-col .m i { display: block; }
.id-col .m i:nth-child(1) { flex: 1.4; height: 60%; background: #ff66cc; }
.id-col .m i:nth-child(2) { flex: .8;  height: 90%; background: #33ccff; }
.id-col .m i:nth-child(3) { flex: 1;   height: 45%; background: #99e033; }
.id-col .m i:nth-child(4) { flex: 1.2; height: 75%; background: #ffcc00; }
.id-col .m i:nth-child(5) { flex: .6;  height: 55%; background: #ff6600; }
.id-type .m { display: flex; justify-content: space-around; align-items: center; background: rgb(255 255 255 / .6); }
.id-type .m b:nth-child(1) { font: italic 700 5cqw Georgia, serif; color: #c0392b; }
.id-type .m b:nth-child(2) { font: 400 5cqw Impact, "Arial Black", sans-serif; color: #2c3e50; }
.id-type .m b:nth-child(3) { font: 700 4.4cqw "Comic Sans MS", "Chalkboard SE", cursive; color: #8e44ad; }
.id-guide .m i { position: absolute; width: 20%; height: 78%; background: #fff; border: 1px solid #bbb; box-shadow: 2px 2px 0 #aaa; }
.id-guide .m i:nth-child(1) { left: 30%; top: 6%; rotate: -8deg; }
.id-guide .m i:nth-child(2) { left: 46%; top: 14%; rotate: 7deg; }
.id-guide .m small { position: absolute; left: 70%; top: 40%; text-transform: none; letter-spacing: .04em; }
.id-x1 { left: 71%; top: 63%; padding: 1.3cqw; background: #f7e27a; font: 700 1.5cqw/1.2 "Comic Sans MS", "Chalkboard SE", cursive; color: #5a4a00; rotate: 7deg; box-shadow: 2px 3px 0 rgb(0 0 0 / .15); --s: .05; }
.id-x2 { left: 2%; top: 58%; width: 15%; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg, #7b2ff7, #f107a3 60%, #ff9a00); color: #fff; font: 400 2.2cqw Impact, "Arial Black", sans-serif; rotate: -9deg; --s: .1; }
.id-x3 { left: 79%; top: 4%; font: 700 1.6cqw var(--font-mono); color: #ff3fa4; rotate: 4deg; --s: 0; }

/* ─────────────── WORLD 02 · BRAND REFRESH — alignment / restoration ─────────────── */
.sv--brand-refresh .sv-stage {
  background:
    radial-gradient(70% 60% at 50% 45%, rgb(255 250 240 / .35), transparent 70%),
    var(--sv-stage);
}
.al { font-size: max(6px, 1.2cqw); color: var(--ink); }
.al-grid {
  --g: rgb(168 131 79 / .6);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--a) * (1 - var(--t) * .8));
  background:
    linear-gradient(90deg, transparent calc(5% - 1px), var(--g) 0 5%, transparent 0 calc(48% - 1px), var(--g) 0 48%, transparent 0 calc(52% - 1px), var(--g) 0 52%, transparent 0 calc(95% - 1px), var(--g) 0 95%, transparent 0),
    linear-gradient(180deg, transparent calc(7% - 1px), var(--g) 0 7%, transparent 0 calc(47% - 1px), var(--g) 0 47%, transparent 0 calc(53% - 1px), var(--g) 0 53%, transparent 0 calc(93% - 1px), var(--g) 0 93%, transparent 0);
}
.al-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) * 100%);
  z-index: 4;
  width: 2px;
  background: var(--brassy);
  box-shadow: 0 0 16px 3px rgb(214 168 109 / .55);
  opacity: calc(clamp(0, var(--a) * 5, 1) * clamp(0, calc((1 - var(--a)) * 8), 1));
}
.al-t {
  /* while being inspected the pieces are pulled apart (sx, sy), then set back in line */
  translate:
    calc((var(--fx, 0) + var(--sx, 0) * var(--a)) * (1 - var(--k)) * 1cqw)
    calc((var(--fy, 0) + var(--sy, 0) * var(--a)) * (1 - var(--k)) * 1cqh);
  width: 43%;
  height: 40%;
}
.al-t--card   { left: 5%;  top: 7%; }
.al-t--post   { left: 52%; top: 7%; }
.al-t--letter { left: 5%;  top: 53%; }
.al-t--web    { left: 52%; top: 53%; }
.al-t > .m, .al-t > .c { overflow: hidden; box-shadow: 0 16px 30px -18px rgb(46 46 46 / .5); }
.al-tag {
  position: absolute;
  right: 3%;
  top: -1.6cqw;
  z-index: 2;
  padding: .4cqw .8cqw;
  font: 400 max(6px, .95cqw) var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  opacity: calc(clamp(0, calc((var(--a) - .3) * 3), 1) * (1 - var(--sw)));
}
.al-tag--keep { background: #455A38; }
.al-tag--rethink { background: var(--brassy); }
.al-tag--update { background: var(--ox); }
.al-mark { display: inline-block; width: 3.6cqw; aspect-ratio: 1; background: radial-gradient(circle at 100% 100%, #F4EFE6 0 44%, transparent 45%), var(--ox); }
.al-word { font: 500 2.4cqw/1 var(--font-sans); letter-spacing: -.04em; }
.al-lines { display: grid; gap: .7cqw; }
.al-lines i { display: block; height: .45cqw; min-height: 2px; background: #cbc3b6; }
.al-lines i:nth-child(2) { width: 70%; }
.al-lines i:nth-child(3) { width: 46%; }

/* old: the same brand, drifted — reds that don't match, a font per touchpoint, logos in every size */
.al .m { background: #fff; }
.al-t--card .m { padding: 3.4cqw 3cqw; display: grid; align-content: space-between; border-left: 1.6cqw solid #a3333d; }
.al-t--card .m b { font: 700 3.4cqw Georgia, serif; color: #8b2c3c; }
.al-t--card .m em { font: italic 400 1.3cqw Georgia, serif; color: #7a6f5d; }
.al-t--post .m { background: #5c1a33; display: grid; place-items: center; }
.al-t--post .m b { font: 700 2.8cqw "Courier New", monospace; color: #f3c6d0; letter-spacing: .1em; }
.al-t--post .m i { position: absolute; left: 6%; top: 8%; width: 3cqw; aspect-ratio: 1; border-radius: 50%; background: #e0556f; }
.al-t--letter .m { padding: 2.4cqw 3cqw; display: grid; align-content: start; justify-items: center; gap: 1.2cqw; border-bottom: 1.2cqw solid #7a1f1f; }
.al-t--letter .m b { font: 700 2.2cqw Arial, sans-serif; color: #7a1f1f; letter-spacing: .2em; }
.al-t--letter .m .al-lines { width: 100%; }
.al-t--web .m { display: grid; grid-template-rows: 30% 1fr; }
.al-t--web .m header { background: #a33; display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw; }
.al-t--web .m header b { font: 700 1.8cqw "Courier New", monospace; color: #fff; }
.al-t--web .m header span { font: 400 1cqw Arial, sans-serif; color: #fdd; letter-spacing: .1em; }
.al-t--web .m .al-lines { padding: 2.4cqw 5cqw 0 8cqw; }

/* realigned: one mark, one wordmark, one red, one grid */
.al .c { background: #F4EFE6; border: 1px solid var(--ink-15); }
.al-t--card .c { padding: 3cqw; display: grid; align-content: space-between; border-bottom: .8cqw solid var(--ox); }
.al-t--card .c > span:first-child { display: flex; align-items: center; gap: 1.2cqw; }
.al-t--post .c { background: var(--ox); padding: 3cqw; display: grid; align-content: space-between; }
.al-t--post .c .al-word { color: #F4EFE6; font-size: 3.4cqw; }
.al-t--post .c .al-mark { background: radial-gradient(circle at 100% 100%, var(--ox) 0 44%, transparent 45%), #F4EFE6; }
.al-t--letter .c { padding: 2.6cqw 3cqw; display: grid; align-content: start; gap: 1.6cqw; }
.al-t--letter .c > span:first-child { display: flex; align-items: center; gap: 1cqw; }
.al-t--letter .c .al-mark { width: 2.4cqw; }
.al-t--letter .c .al-word { font-size: 1.6cqw; }
.al-t--letter .c::after { content: ""; position: absolute; left: 3cqw; right: 3cqw; bottom: 2cqw; height: 1px; background: var(--ox); }
.al-t--web .c { display: grid; grid-template-rows: 30% 1fr; }
.al-t--web .c header { background: var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw; }
.al-t--web .c header .al-word { color: #F4EFE6; font-size: 1.8cqw; }
.al-t--web .c header span { display: flex; gap: 1.6cqw; }
.al-t--web .c header span i { display: block; width: 3cqw; height: .4cqw; min-height: 2px; background: rgb(244 239 230 / .5); }
.al-t--web .c .al-lines { padding: 2.6cqw 3cqw 0; }

/* ─────────────── WORLD 03 · PRESENTATION REFRAME — overload → clarity ─────────────── */
.sv--presentation-reframe .sv-stage {
  background:
    radial-gradient(60% 50% at 50% 38%, rgb(222 216 204 / .07), transparent 70%),
    var(--sv-stage);
}
.sv--presentation-reframe .sv-ann { background: #2b2927; color: #e6c79c; border-color: #8a6a3e; }
.sl-slide {
  position: absolute;
  left: 4%;
  top: 3%;
  width: 92%;
  height: 69%;
  background: #fff;
  overflow: hidden;
  container-type: size;
  box-shadow: 0 30px 70px -24px rgb(0 0 0 / .8);
}
.sl-slide > * { position: absolute; }
/* the overload */
.sl-title { left: 4%; top: 5%; width: 84%; font: 700 2.3cqw/1.15 Arial, sans-serif; color: #1f3a93; --s: 0; }
.sl-wall { width: 42%; font: 400 1.35cqw/1.35 Arial, sans-serif; color: #444; }
.sl-wall--1 { left: 4%; top: 19%; --s: .06; }
.sl-wall--2 { left: 4%; top: 52%; color: #6a6a6a; --s: .12; }
.sl-pie { left: 52%; top: 20%; width: 21%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#3cf 0 14%, #f3c 0 23%, #9f3 0 35%, #fc0 0 49%, #f60 0 58%, #36c 0 70%, #c39 0 78%, #0c9 0 88%, #999 0); transform: perspective(300px) rotateX(46deg); box-shadow: 0 7px 0 #888; --s: .16; }
.sl-legend { left: 77%; top: 21%; width: 18%; display: grid; gap: 1.1cqh; --s: .16; }
.sl-legend i { display: block; height: 2.6cqh; background: linear-gradient(90deg, var(--c) 0 2.6cqh, transparent 0 4.4cqh, #c9c9c9 0 90%, transparent 0) center / 100% 60% no-repeat; }
.sl-imp { font: 900 2.5cqw Arial, sans-serif; color: #e00; }
.sl-imp--1 { left: 50%; top: 66%; rotate: -6deg; --s: .03; }
.sl-imp--2 { left: 88%; top: 5%; width: 6cqw; aspect-ratio: 1; border-radius: 50%; background: #e00; color: #fff; display: grid; place-items: center; font-size: 2.2cqw; --s: .09; }
.sl-imp--3 { left: 28%; top: 86%; padding: 0 .6cqw; background: #ff0; color: #111; font-size: 1.8cqw; --s: .12; }
.sl-arrow { left: 72%; top: 60%; width: 11cqw; height: 7cqw; background: #ff8a00; clip-path: polygon(0 30%, 62% 30%, 62% 0, 100% 50%, 62% 100%, 62% 70%, 0 70%); rotate: 18deg; --s: .1; }
.sl-src { left: 4%; bottom: 3%; font: 400 1.1cqw Arial, sans-serif; color: #9a9a9a; --s: .2; }
/* the reframe: one message, one chart, one highlight */
.sl-c { --in: clamp(0, calc((var(--t) - .42 - var(--s, 0)) * 4), 1); opacity: var(--in); translate: 0 calc((1 - var(--in)) * 3cqh); }
.sl-kick { left: 7%; top: 13%; font: 400 1.5cqw var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ox); }
.sl-head { left: 7%; top: 22%; width: 50%; font: 500 5.6cqw/1.02 var(--font-sans); letter-spacing: -.045em; color: var(--ink); --s: .04; }
.sl-lines { left: 7%; top: 64%; width: 36%; display: grid; gap: 2.6cqh; --s: .1; }
.sl-lines i { display: block; height: 1.6cqh; background: #d8d2c8; }
.sl-lines i + i { width: 70%; }
.sl-bars { left: 62%; top: 20%; width: 30%; height: 62%; display: flex; align-items: end; gap: 12%; border-bottom: 1px solid var(--ink-45); --s: .08; }
.sl-bars i { flex: 1; background: #8095AA; height: calc(var(--h) * var(--in)); }
.sl-bars i:nth-child(3) { background: var(--ox); }
.sl-bars b { position: absolute; right: -1cqw; top: -6cqh; font: 400 1.3cqw var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ox); }
.sl-foot { left: 7%; bottom: 7%; width: 18%; height: 1.4cqh; background: #e4dfd6; --s: .14; }
.sl-count { position: absolute; left: 4%; top: 75.5%; margin: 0; font: 400 max(6px, 1.05cqw) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(222 216 204 / .6); }
.sl-count b { font-weight: 400; opacity: calc(1 - var(--t) * 2); }
.sl-count em { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; color: #d6a86d; opacity: clamp(0, calc((var(--t) - .5) * 3), 1); }
.sl-strip { position: absolute; left: 4%; top: 81%; width: 92%; height: 13%; display: flex; gap: .35cqw; }
.sl-strip i {
  --t2: clamp(0, calc((var(--t) - .12) * 1.7), 1);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: var(--mc, #bdb7ad);
}
.sl-strip i::after { content: ""; position: absolute; inset: 0; background: #F3EEE6; border-top: 2px solid var(--ox); opacity: var(--t2); }
.sl-strip i:nth-child(3n) { --mc: #e8b04a; }
.sl-strip i:nth-child(5n) { --mc: #5ba3d9; }
.sl-strip i:nth-child(7n) { --mc: #d9534f; }
.sl-strip i:nth-child(4n+2) { --mc: #8c8c8c; }
.sl-strip i:nth-child(n+11) { flex-grow: calc(1 - var(--t2)); opacity: calc(1 - var(--t2)); margin-right: calc(var(--t2) * -.35cqw); }

/* ─────────────── WORLD 04 · REPORT REFRAME — buried information → structure ─────────────── */
.sv--report-reframe .sv-stage {
  background:
    repeating-linear-gradient(0deg, rgb(46 46 46 / .035) 0 1px, transparent 1px 22px),
    var(--sv-stage);
}
.dc { font-size: max(6px, 1.2cqw); color: var(--ink); }
.dc-pg { top: 8%; width: 28%; height: 53%; }
.dc-pg--1 { left: 4%; }
.dc-pg--2 { left: 36%; }
.dc-pg--3 { left: 68%; }
.dc-pg > .m, .dc-pg > .c { background: #fff; border: 1px solid var(--ink-15); box-shadow: 0 14px 26px -16px rgb(46 46 46 / .45); }
/* dense: every line the same weight */
.dc-pg .m {
  padding: 2.2cqw 2cqw;
  background:
    repeating-linear-gradient(180deg, #d3ccc1 0 .38cqw, transparent .38cqw 1.05cqw) 2cqw 3.6cqw / calc(100% - 4cqw) 58% no-repeat,
    #fff;
}
.dc-pg .m b { position: absolute; right: 1.6cqw; top: 1.2cqw; font: 400 max(5px, .85cqw) var(--font-mono); color: var(--ink-45); }
.dc-pg .m i {       /* a table without breathing room */
  position: absolute;
  left: 2cqw;
  right: 2cqw;
  bottom: 2.2cqw;
  height: 26%;
  background:
    repeating-linear-gradient(90deg, #b9b2a6 0 1px, transparent 1px 16.66%),
    repeating-linear-gradient(180deg, #b9b2a6 0 1px, #f3f0ea 1px .95cqw);
  border: 1px solid #b9b2a6;
}
/* structured pages */
.dc-pg .c { padding: 2.4cqw 2.2cqw; display: grid; grid-template-rows: auto 1fr auto; }
.dc-pg .c header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1cqw; border-bottom: 1px solid var(--ink-15); font: 400 max(5px, .85cqw) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }
.dc-pg .c header b { font-weight: 400; color: var(--ox); }
.dc-pg .c footer { font: 400 max(5px, .8cqw) var(--font-mono); letter-spacing: .14em; color: var(--ink-45); text-align: right; }
.dc-band { display: block; height: 10cqw; margin: -2.4cqw -2.2cqw 0; background: var(--ox); }
.dc-cover { display: grid; align-content: end; gap: 1cqw; padding-bottom: 2cqw; }
.dc-cover i { display: block; height: 1.8cqw; background: var(--ink); width: 80%; }
.dc-cover i + i { width: 56%; }
.dc-cover i + i + i { height: .5cqw; width: 40%; background: #cbc3b6; margin-top: 1.2cqw; }
.dc-table { align-self: center; display: grid; gap: 1.2cqw; }
.dc-table i { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1cqw; height: 1.8cqw; border-bottom: 1px solid var(--ink-15); background: linear-gradient(90deg, #cbc3b6 0 30%, transparent 0 55%, #cbc3b6 0 64%, transparent 0 82%, #cbc3b6 0 90%, transparent 0) center / 100% .45cqw no-repeat; }
.dc-table i:nth-child(3) { background-color: rgb(74 4 4 / .07); }
.dc-bars { display: flex; align-items: end; gap: 10%; height: 7cqw; margin-top: 1cqw; border-bottom: 1px solid var(--ink-45); }
.dc-bars i { flex: 1; background: #8095AA; height: 45%; }
.dc-bars i:nth-child(2) { height: 70%; }
.dc-bars i:nth-child(3) { height: 100%; background: var(--ox); }
/* three findings, buried as ordinary lines, lifted out into their own page */
.dc-find { left: 38%; width: 24%; height: 9%; z-index: 3; }
.dc-find--1 { top: 18%; }
.dc-find--2 { top: 30%; }
.dc-find--3 { top: 42%; }
.dc-find .m::before { content: ""; position: absolute; left: 0; right: 12%; top: 46%; height: .38cqw; min-height: 2px; background: #d3ccc1; }
.dc-find .m::after {        /* the marker: someone finally notices it */
  content: "";
  position: absolute;
  left: -2%;
  top: 34%;
  height: 1.4cqw;
  width: calc(var(--a) * 92%);
  background: rgb(168 131 79 / .35);
  border-bottom: 1.5px solid var(--ox);
}
.dc-find .c { display: flex; align-items: center; gap: 1.4cqw; padding-left: .4cqw; border-left: 2px solid var(--ox); background: rgb(255 255 255 / .6); }
.dc-find .c b { font: 500 2.6cqw/1 var(--font-sans); letter-spacing: -.04em; color: var(--ox); }
.dc-find .c span { flex: 1; display: grid; gap: .7cqw; }
.dc-find .c span i { display: block; height: .7cqw; background: var(--ink); width: 90%; }
.dc-find .c span i + i { height: .4cqw; background: #cbc3b6; width: 70%; }
.dc-mini {
  --in: clamp(0, calc((var(--t) - .55) * 3), 1);
  position: absolute;
  left: 4%;
  top: 70%;
  width: 92%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1cqw;
  opacity: var(--in);
  translate: 0 calc((1 - var(--in)) * 3cqh);
}
.dc-mini i {
  aspect-ratio: 1 / 1.414;
  background:
    linear-gradient(var(--ox), var(--ox)) 14% 12% / 40% 3% no-repeat,
    linear-gradient(#d3ccc1, #d3ccc1) 14% 30% / 72% 2.5% no-repeat,
    linear-gradient(#d3ccc1, #d3ccc1) 14% 40% / 60% 2.5% no-repeat,
    linear-gradient(#d3ccc1, #d3ccc1) 14% 50% / 66% 2.5% no-repeat,
    #fff;
  border: 1px solid var(--ink-15);
}
.dc-mini span { position: absolute; left: 0; top: -3.4cqh; font: 400 max(6px, .9cqw) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }

/* the stage in the hero: a replay button in its corner */
.sv-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--sv-line);
  background: var(--sv-stage);
  color: var(--sv-fg);
  font: 400 11px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s, border-color .3s;
}
.sv-stagewrap { position: relative; z-index: 1; }
.sv-stagewrap.is-done .sv-replay { opacity: 1; }
.sv-replay:hover { border-color: var(--sv-acc); }
.sv-replay:focus-visible { opacity: 1; }
@media (max-width: 560px) {
  .sv-pin { padding-top: 96px; }
  .sv-stage { aspect-ratio: 1 / 1; }
  .sv-board { width: 96cqw; }
  .sv-slabel { left: 14px; top: 13px; font-size: 8px; letter-spacing: .16em; }
}

/* ─────────────── sections below the scene ─────────────── */
.sv-sec { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(88px, 14vh, 150px) var(--gutter); }
.sv-sec + .sv-sec { padding-top: clamp(40px, 6vh, 72px); }

/* two columns: heading on the left, content on the right */
.sv-split { display: grid; gap: 32px; }
@media (min-width: 980px) { .sv-split { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 110px); align-items: start; } }

/* 02 · the problem */
.sv-problem .sv-body p:first-child { margin-top: 6px; }

/* 03 · what you get */
.sv-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.sv-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-15);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  letter-spacing: -.01em;
}
.sv-list li::before { content: "✓"; flex: none; width: 1.2em; font: 700 14px var(--font-sans); color: var(--ox); }
.sv-important { margin: 28px 0 0; max-width: 26rem; padding: 16px 18px; border: 1px solid var(--ox); background: rgb(74 4 4 / .04); }
.sv-important p { margin: 0; line-height: 1.5; font-size: 1rem; }
.sv-important p + p { margin-top: 6px; }
.sv-important b { display: block; margin-bottom: 8px; font: 700 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ox); }

/* 04 · good fit if (+ a small "not included") */
.sv-check { margin: 0; padding: 0; list-style: none; }
.sv-check li { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--ink-15); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.45; }
.sv-check li::before { content: "+"; flex: none; width: 1.2em; font: 700 15px var(--font-mono); color: var(--ox); }
.sv-check__intro { margin: 0 0 12px; font: 400 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-70); }
.sv-out { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--ink-15); }
.sv-out h3 { margin: 0 0 8px; font: 700 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-70); }
.sv-out p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink-70); }

/* 05 · price / status: a dark block with the rates, the way in and what happens next */
.sv-price { background: var(--ink); color: var(--oat); }
.sv-price__in { max-width: 1320px; margin: 0 auto; padding: clamp(88px, 14vh, 140px) var(--gutter); display: grid; gap: 48px; }
@media (min-width: 980px) { .sv-price__in { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 110px); align-items: start; } }
.sv-price .ad-tag { color: #d6a86d; }
.sv-price .sv-h2 { color: var(--oat); }
.sv-ratecard { margin: 28px 0 0; }
.sv-ratecard dl { margin: 0; border-top: 1px solid rgb(222 216 204 / .3); }
.sv-ratecard dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid rgb(222 216 204 / .16); }
.sv-ratecard dt { font: 400 11px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: rgb(222 216 204 / .75); }
.sv-ratecard dd { margin: 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sv-ratecard dd.sv-ratecard__txt { font-size: 1.05rem; }
.sv-ratecard .is-pilot dt, .sv-ratecard .is-pilot dd { color: #d6a86d; }
.sv-price .sv-state { color: var(--oat); }
.sv-price .sv-act { margin-top: 26px; }
.sv-pilotnote { margin: 22px 0 0; max-width: 28rem; font-size: .98rem; line-height: 1.55; color: rgb(222 216 204 / .8); }
.sv-pilotnote b { display: block; margin-bottom: 4px; font: 700 12px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #d6a86d; }
.sv-pilotnote a { color: var(--oat); border-bottom: 1px solid rgb(222 216 204 / .5); }
.sv-next__h { margin: 0 0 14px; font: 700 12px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #d6a86d; }
.sv-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(222 216 204 / .3); }
.sv-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid rgb(222 216 204 / .14); }
.sv-steps li > span { grid-row: span 2; font: 400 11px var(--font-mono); letter-spacing: .16em; color: #d6a86d; padding-top: 4px; }
.sv-steps b { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.sv-steps em { font-style: normal; font-size: .95rem; color: rgb(222 216 204 / .78); }
.sv-steps a { color: var(--oat); border-bottom: 1px solid rgb(222 216 204 / .5); }
.sv-route__wait { margin: 20px 0 0; max-width: 40rem; padding-left: 16px; border-left: 2px solid #d6a86d; line-height: 1.55; color: rgb(222 216 204 / .85); }

/* waitlist / early access */
.sv-wait { display: grid; gap: 40px; }
@media (min-width: 980px) { .sv-wait { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 110px); align-items: start; } }
.sv-wait__lede { margin: 24px 0 18px; max-width: 30rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-70); }

/* the waitlist form (rendered by waitlist.js) */
.wf { display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); background: #EDE8DF; border: 1px solid var(--ink-15); }
.wf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wf__grid { display: grid; gap: 22px; }
@media (min-width: 640px) { .wf__grid { grid-template-columns: 1fr 1fr; } }
.wf__f { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.wf__f > label, .wf__f > legend { padding: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.wf__f legend { margin-bottom: 10px; }
.wf__f em { font-style: normal; font-weight: 400; color: var(--ink-70); }
.wf input:not([type]), .wf input[type="text"], .wf input[type="email"], .wf select, .wf textarea {
  width: 100%;
  padding: 11px 12px;
  font: 400 16px/1.4 var(--font-sans);
  color: var(--ink);
  background: #F7F3EC;
  border: 1px solid var(--ink-15);
  border-radius: 0;
  transition: border-color .25s;
}
.wf textarea { resize: vertical; min-height: 64px; }
.wf input:focus, .wf select:focus, .wf textarea:focus { outline: none; border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }
.wf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf__chip { position: relative; }
.wf__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wf__chip span { display: block; min-height: 40px; padding: 10px 14px; border: 1px solid rgb(46 46 46 / .3); background: #F7F3EC; font: 400 13px var(--font-mono); letter-spacing: .04em; transition: background .25s, color .25s, border-color .25s; }
.wf__chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wf__chip input:checked + span::before { content: "✓ "; }
.wf__chip input:focus-visible + span { outline: 2px solid var(--ox); outline-offset: 2px; }
.wf__consent { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--ink-70); cursor: pointer; }
.wf__consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ox); }
.wf__err { margin: 0; padding: 10px 14px; border-left: 2px solid var(--ox); background: rgb(74 4 4 / .06); font-size: .95rem; color: var(--ox); }
.wf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.wf__btn { cursor: pointer; }
.wf.is-sending .wf__btn { opacity: .6; cursor: progress; }
.wf__priv { margin: 0; max-width: 24rem; font-size: .88rem; line-height: 1.5; color: var(--ink-70); }
.wf__priv a { color: var(--ink-70); border-bottom: 1px solid var(--ink-45); }
.wf__done { padding: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--oat); outline: none; }
.wf__sys { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font: 400 11px var(--font-mono); letter-spacing: .28em; text-transform: uppercase; color: #d6a86d; }
.wf__dot { width: 8px; height: 8px; background: #d6a86d; animation: blink 1.2s steps(1) infinite; }
.wf__done-h { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.wf__done-t { margin: 14px 0 0; color: rgb(222 216 204 / .75); line-height: 1.55; }

/* 06 · final */
.sv-final { padding-top: clamp(120px, 20vh, 220px); padding-bottom: clamp(120px, 20vh, 220px); }
.sv-final .final__h { max-width: 16ch; margin-bottom: 44px; }

/* the other services */
.sv-more { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 12vh, 120px); }
.sv-more__h { margin: 0 0 14px; font: 400 11px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-70); }
.sv-more ul { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--ink-15); }
@media (min-width: 900px) { .sv-more ul { grid-template-columns: repeat(3, 1fr); } }
.sv-more a { display: grid; gap: 6px; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--ink-15); transition: color .3s; }
.sv-more a:hover { color: var(--ox); }
.sv-more b { font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; }

.sv-page .site-footer { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .wf__dot { animation: none; }
  .sv-stage.is-live .pc > .m, .sv-stage.is-live .x { animation: none; }
  .sl-c, .sv-ann, .dc-mini { translate: none; }
}