/* Opt-in experiments, loaded only by /?review=1. Original remains the default.
   Each direction shares the same content and components, not a page fork. */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-serif-display-regular.ttf") format("truetype"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-serif-display-italic.ttf") format("truetype"); }

/* Replaying a mix must never strand the original entrance animation mid-reveal. */
[data-style] .reveal, [data-style] .brush { animation: none; }

/* 02 / Editorial — ink, parchment, bookish display type. */
[data-style="editorial"] {
  --ink: #171410; --surface: #211d17; --bone: #eee3d1; --muted: #beb29f; --faint: #ad9e89;
  --accent: #dec6a1; --action: #dec6a1; --canvas: var(--ink);
  --display: "DM Serif Display", Georgia, serif; --hero-weight: 400; --hero-case: none;
  --hero-tracking: -.035em; --hero-size: min(116px, calc((100vw - var(--pad) * 2) / 9.1));
  --mobile-hero-size: clamp(40px, 12vw, 61px); --button-radius: 4px;
  --number-font: var(--display); --number-weight: 400; --number-size: 52px; --mobile-number-size: 44px;
}
[data-style="editorial"] .hero { padding-top: 80px; }
[data-style="editorial"] .hero h1 { line-height: 1.04; }
[data-style="editorial"] .hero-line:last-child { font-style: italic; }
[data-style="editorial"] .badge { border: 0; background: none; padding-inline: 0; font-family: var(--mono); }
[data-style="editorial"] .brush { height: 3px; bottom: -.08em; color: var(--accent); }
[data-style="editorial"] .figure-grid li + li { border-left: 1px solid var(--line); }
[data-style="editorial"] .labs h2, [data-style="editorial"] .contact h2 { font-family: var(--display); font-weight: 400; }
[data-style="editorial"] .nav-cta { border-radius: 4px; }

/* 03 / Grid — left-aligned, architectural, hard edges and one coral accent. */
[data-style="grid"] {
  --ink: #101111; --surface: #1a1b1b; --bone: #f1f2ed; --muted: #b3b7b3; --faint: #a0a7a0;
  --accent: #ffa38b; --action: #ffa38b; --canvas: var(--ink); --button-radius: 0px;
  --hero-tracking: -.055em; --number-font: var(--mono); --number-size: 42px;
  --line: rgb(241 242 237 / 20%); --line-soft: rgb(241 242 237 / 13%);
}
[data-style="grid"] .header { border-bottom: 1px solid var(--line); }
[data-style="grid"] .hero-inner { align-items: flex-start; text-align: left; }
[data-style="grid"] .hero { background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--line-soft) 50%, transparent calc(50% + .5px)); padding-top: 52px; }
[data-style="grid"] .badge { background: none; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding-left: 14px; }
[data-style="grid"] .hero h1 { max-width: 100%; }
[data-style="grid"] .hero-sub { text-wrap: pretty; max-width: 47ch; }
[data-style="grid"] .hero-cta { justify-content: flex-start; }
[data-style="grid"] .brush { height: 3px; color: var(--accent); }
[data-style="grid"] .nav-cta { border-radius: 0; }
[data-style="grid"] .platforms { text-align: left; }
[data-style="grid"] .platform-grid { justify-content: start; }
[data-style="grid"] .figure-grid { text-align: left; }
[data-style="grid"] .figure-grid li { border-top: 3px solid var(--bone); padding-top: 20px; }
[data-style="grid"] .figure-note { text-align: left; margin-inline: 0; }
[data-style="grid"] .contact-inner { align-items: flex-start; text-align: left; }

/* 04 / Signal — precise mono display, mint accents, quiet technical frames. */
[data-style="signal"] {
  --ink: #0c1412; --surface: #14221d; --bone: #e6f0e8; --muted: #adc2b5; --faint: #96b7a4;
  --accent: #a5f4c0; --action: #a5f4c0; --canvas: radial-gradient(ellipse 65% 600px at 50% 250px, #173027, transparent), var(--ink);
  --display: var(--mono); --hero-weight: 500; --hero-tracking: -.07em;
  --hero-size: min(76px, calc((100vw - var(--pad) * 2) / 12.3));
  --mobile-hero-size: clamp(32px, 10.1vw, 45px); --button-radius: 6px;
  --number-font: var(--mono); --number-weight: 400; --number-size: 40px;
  --line: rgb(165 244 192 / 17%); --line-soft: rgb(165 244 192 / 10%);
}
[data-style="signal"] .badge { border-radius: 4px; font-family: var(--mono); font-size: 11px; }
[data-style="signal"] .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
[data-style="signal"] .hero h1 { line-height: 1.12; margin-top: 36px; }
[data-style="signal"] .brush { height: 3px; color: var(--accent); }
[data-style="signal"] .nav-cta { border-radius: 6px; }
[data-style="signal"] .figure-grid li { border: 1px solid var(--line); border-radius: 6px; padding: 24px 8px; background: rgb(230 240 232 / 2%); }
[data-style="signal"] .figures-inner { border-block: 0; padding-top: 0; }
[data-style="signal"] .figure-label { font-family: var(--mono); font-size: 12px; }
[data-style="signal"] .labs-signature .kicker { color: var(--accent); }

/* 05 / Cinema — a dark violet horizon, generous scale and soft geometry.
   These are background gradients, not dark-mode box shadows. */
[data-style="cinema"] {
  --ink: #0e0e19; --surface: #191a2d; --bone: #f2f0ff; --muted: #bcbad4; --faint: #a29eba;
  --accent: #c5b9ff; --action: #c5b9ff;
  --canvas: radial-gradient(ellipse 65% 550px at 50% 330px, #30284a, transparent), radial-gradient(ellipse 100% 250px at 50% 730px, #151d32, transparent), var(--ink);
  --hero-tracking: -.055em; --hero-size: min(100px, calc((100vw - var(--pad) * 2) / 12.4));
  --number-size: 52px; --mobile-number-size: 42px; --line: rgb(197 185 255 / 18%); --line-soft: rgb(197 185 255 / 10%);
}
[data-style="cinema"] .hero { padding-top: 88px; }
[data-style="cinema"] .badge { background: rgb(197 185 255 / 5%); border-color: rgb(197 185 255 / 22%); }
[data-style="cinema"] .hero-sub { margin-top: 36px; }
[data-style="cinema"] .brush { color: var(--accent); }
[data-style="cinema"] .platforms { padding-top: 80px; }
[data-style="cinema"] .figure-grid li { padding: 24px 8px; background: rgb(197 185 255 / 4%); border-radius: 20px; outline: 1px solid var(--line-soft); outline-offset: -1px; }
[data-style="cinema"] .figures-inner { border: 0; padding-top: 0; }
[data-style="cinema"] .labs-inner { border-top: 1px solid var(--line-soft); }

/* 06 / Atelier — asymmetric, sentence-case, a quieter studio voice. */
[data-style="atelier"] {
  --ink: #161817; --surface: #202522; --bone: #edf0e8; --muted: #b9c1b6; --faint: #a0af9b;
  --accent: #cfdda8; --action: #cfdda8; --canvas: var(--ink);
  --hero-case: none; --hero-weight: 500; --hero-tracking: -.065em;
  --hero-size: clamp(44px, 5.9vw, 90px); --mobile-hero-size: clamp(40px, 12vw, 58px);
  --button-radius: 14px; --number-size: 60px; --number-weight: 400; --mobile-number-size: 46px;
}
[data-style="atelier"] .hero { padding-top: 66px; }
[data-style="atelier"] .hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; text-align: left; column-gap: 48px; align-items: center; }
[data-style="atelier"] .badge { grid-column: 1 / -1; justify-self: start; background: none; padding: 0; border: 0; }
[data-style="atelier"] .hero h1 { grid-column: 1; grid-row: 2 / 4; margin-top: 28px; line-height: 1.02; }
[data-style="atelier"] .hero-line > span { display: block; }
[data-style="atelier"] .hero-sub { grid-column: 2; align-self: end; text-wrap: pretty; max-width: 30ch; margin-top: 0; font-size: 23px; }
[data-style="atelier"] .hero-cta { grid-column: 2; justify-content: flex-start; align-self: start; gap: 22px; margin-top: 30px; }
[data-style="atelier"] .brush { color: var(--accent); height: 3px; }
[data-style="atelier"] .platforms { padding-top: 90px; }
[data-style="atelier"] .figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; text-align: left; }
[data-style="atelier"] .figure-grid li { border-top: 1px solid var(--line); padding-top: 26px; }
[data-style="atelier"] .figures-inner { border: 0; padding-top: 0; }
[data-style="atelier"] .figure-note { text-align: left; margin-inline: 0; }
[data-style="atelier"] .labs-inner { border-top: 1px solid var(--line-soft); }

/* Motion has its own axis. The authentic list remains available to assistive
   technology; moving copies are decorative and contain no links or new claims. */
.platform-stage { max-width: 900px; margin: 28px auto 0; }
.platform-window { overflow: hidden; }
.platform-items { list-style: none; padding: 0; margin: 0; display: flex; }
.platform-items li { display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; }
.platform-items img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.platform-items span { font: 500 24px var(--sans); letter-spacing: -.025em; }
.platform-track { display: flex; width: max-content; }
.platform-stage[data-mode="marquee"] .platform-window { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.platform-stage[data-mode="marquee"] .platform-items { gap: 72px; padding-inline: 36px; }
.platform-stage[data-mode="marquee"] .platform-items li { width: 186px; }
.platform-stage[data-mode="marquee"] .platform-track { animation: platform-drift 26s linear infinite; }
@keyframes platform-drift { to { transform: translateX(-50%); } }
.platform-stage[data-mode="slider"], .platform-stage[data-mode="spotlight"] { max-width: 500px; }
.platform-stage[data-mode="slider"] .platform-items { width: 100%; transform: translateX(calc(var(--slide, 0) * -100%)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.platform-stage[data-mode="slider"] .platform-items li { flex: 0 0 100%; min-width: 0; padding: 8px 0; }
.platform-stage[data-mode="slider"] .platform-items img, .platform-stage[data-mode="spotlight"] .platform-items img { width: 56px; height: 56px; }
.platform-stage[data-mode="slider"] .platform-items span, .platform-stage[data-mode="spotlight"] .platform-items span { font-size: 30px; }
.platform-stage[data-mode="spotlight"] .platform-items { position: relative; height: 72px; }
.platform-stage[data-mode="spotlight"] .platform-items li { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.platform-stage[data-mode="spotlight"] .platform-items li.is-active { opacity: 1; transform: none; }
.platform-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.platform-controls button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--button-radius); color: var(--muted); background: transparent; font: 400 12px var(--mono); cursor: pointer; }
.platform-controls button:hover { border-color: var(--muted); color: var(--bone); }
.platform-controls .slide-status { min-width: 44px; font: 400 11px var(--mono); color: var(--faint); text-align: center; }
.platform-stage.is-held .platform-track, [data-motion-paused="true"] .platform-track { animation-play-state: paused !important; }
[data-style="grid"] .platform-stage { margin-left: 0; }

/* Screen readers always get the final totals, never 60 updates per second. */
.figure-value .counter-display, .figure-value .counter-number, .figure-value .counter-reel, .figure-value .counter-track, .figure-value .counter-track > span { font: inherit; letter-spacing: inherit; padding: 0; color: inherit; }
/* Animated/replaced digits are not stable browser scroll anchors. */
.counter-display { display: inline-flex; align-items: baseline; overflow-anchor: none; }
.figure-value .counter-plus { font-size: .6em; color: var(--faint); padding-left: 2px; }
.figure-value .counter-reel { display: inline-block; width: .64em; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.figure-value .counter-track { display: block; line-height: 1.1; transform: translateY(0); }
.figure-value .counter-track > span { display: block; height: 1.1em; }
.counter-display.is-running .counter-track { transform: translateY(calc(var(--digit-stop) * -1.1em)); transition: transform 1.35s cubic-bezier(.13,.75,.22,1); transition-delay: var(--digit-delay); }
[data-motion-paused="true"] *, [data-motion-paused="true"] *::before, [data-motion-paused="true"] *::after { animation-play-state: paused !important; }

@media (max-width: 1000px) {
  [data-style="atelier"] .hero-inner { column-gap: 28px; }
  [data-style="atelier"] .hero-sub { font-size: 20px; }
  [data-style="atelier"] .hero-cta { gap: 14px; }
}
@media (max-width: 760px) {
  [data-style="editorial"] .figure-grid li:nth-child(3) { border-left: 0; }
  [data-style="signal"] .figure-label { font-size: 13px; }
  [data-style="cinema"] .hero, [data-style="editorial"] .hero { padding-top: 48px; }
  [data-style="cinema"] .platforms, [data-style="atelier"] .platforms { padding-top: 56px; }
  [data-style="atelier"] .hero-inner { display: flex; align-items: flex-start; }
  [data-style="atelier"] .hero-sub { align-self: auto; margin-top: 28px; max-width: 34ch; }
  [data-style="atelier"] .hero-cta { align-self: auto; }
  [data-style="atelier"] .hero h1 { font-size: var(--mobile-hero-size); }
  [data-style="atelier"] .figure-grid { gap: 24px; }
  .platform-stage[data-mode="marquee"] .platform-items { gap: 38px; padding-inline: 19px; }
  .platform-stage[data-mode="marquee"] .platform-items li { width: 150px; gap: 10px; }
  .platform-items span { font-size: 20px; }
  .platform-items img { width: 36px; height: 36px; }
  .platform-controls button { font-size: 13px; }
}
@media (max-width: 360px) {
  [data-style="signal"] .badge { font-size: 9px; gap: 8px; padding-inline: 10px; }
  [data-style="editorial"] .badge { font-size: 9px; }
  [data-style="signal"] .figure-grid li, [data-style="cinema"] .figure-grid li { padding-inline: 6px; }
}
/* Round two: three studies of each favourite. The earlier directions above
   remain unchanged; data-style supplies the family, data-variant the refinement. */
[data-round="2"] { --number-size: clamp(58px, 5.5vw, 80px); --number-weight: 400; --mobile-number-size: 58px; }
[data-round="2"] .hero { padding-top: 62px; }
[data-round="2"] .figure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; text-align: left; }
[data-round="2"] .figure-grid li { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 26px 0 0; }
[data-round="2"] .figures-inner { border: 0; padding-block: 0 46px; }
[data-round="2"] .figures-intro { font: 400 20px/1.5 var(--sans); letter-spacing: -.025em; color: var(--muted); margin-bottom: 30px; }
[data-round="2"] .figures-intro span { color: var(--bone); }
[data-round="2"] .figure-label { font: 400 16px/1.5 var(--sans); white-space: nowrap; margin-top: 10px; }
[data-round="2"] .figure-note { font-size: 14px; text-align: left; max-width: none; margin: 30px 0 0; }
[data-round="2"] .platforms { text-align: left; padding-block: 62px 56px; }
[data-round="2"] .platform-grid { justify-content: start; }
[data-round="2"] .platform-grid li { justify-content: flex-start; }
[data-round="2"] .platform-stage { margin-inline: 0; }
[data-round="2"] .platform-controls { justify-content: flex-start; margin-top: 18px; }
[data-round="2"] .platform-controls button { border-color: transparent; padding-inline: 0; color: var(--faint); }
[data-round="2"] .platform-controls button:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 5px; }
[data-round="2"] .labs-inner { border-top: 1px solid var(--line-soft); }

/* A1 / Quiet: the closest continuation of the original Atelier. */
[data-variant="atelier-quiet"] { --hero-size: clamp(44px, 6vw, 88px); --button-radius: 10px; }
[data-variant="atelier-quiet"] .hero-sub { max-width: 29ch; }

/* A2 / Wide: one centred statement, generous horizontal proof. */
[data-variant="atelier-wide"] { --hero-size: min(112px, calc((100vw - var(--pad) * 2) / 9.5)); --button-radius: 999px; --number-size: clamp(58px, 6.3vw, 92px); }
[data-variant="atelier-wide"] .hero-inner { display: flex; align-items: center; text-align: center; }
[data-variant="atelier-wide"] .badge-divider,
[data-variant="atelier-wide"] .badge > span:last-child { display: none; }
[data-variant="atelier-wide"] .hero h1 { max-width: 26ch; margin-top: 16px; }
[data-variant="atelier-wide"] .hero-line > span { display: inline; }
[data-variant="atelier-wide"] .hero-selected .hero-line { white-space: normal; text-wrap: balance; }
[data-variant="atelier-wide"] .hero-selected .hero-line > span { display: inline; }
[data-variant="atelier-wide"] .hero-sub { align-self: auto; max-width: 45ch; margin-top: 30px; text-wrap: balance; font-size: 21px; }
[data-variant="atelier-wide"] .hero-cta { align-self: auto; justify-content: center; }
[data-variant="atelier-wide"] .figure-grid li { border-top: 0; }
[data-variant="atelier-wide"] .figures-inner { border-top: 1px solid var(--line); padding-top: 60px; }
/* Move the introduction down, rather than pulling the totals up. */
[data-variant="atelier-wide"][data-round="2"] .figures-intro { margin-bottom: 0; }
[data-variant="atelier-wide"] .figure-grid,
[data-variant="atelier-wide"] .figures-intro,
[data-variant="atelier-wide"] .figure-note { text-align: center; }
[data-variant="atelier-wide"] .labs-inner { grid-template-columns: 1fr; justify-items: center; gap: 28px; text-align: center; }
[data-variant="atelier-wide"] .labs-signature { justify-content: center; }
[data-variant="atelier-wide"] .labs h2,
[data-variant="atelier-wide"] .labs-copy .section-copy { margin-inline: auto; }
[data-variant="atelier-wide"] .labs-copy .section-copy { text-wrap: balance; }
/* No persistent pause label in the composition. Keyboard focus reveals the
   control; hover and reduced-motion preferences also still stop the shuffle. */
[data-variant="atelier-wide"] .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-controls:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Full-page polish only; the original page and Style room keep their scale. */
[data-full-page] { --shell: 1680px; --intro-header-height: 112px; --hero-size: min(120px, calc((100vw - var(--pad) * 2) / 9.5)); }
/* Native scrolling, drag behavior and OS auto-hide; no imitation scrollbar.
   Standard properties avoid conflicting WebKit overrides in modern Brave. */
[data-full-page] { scrollbar-color: color-mix(in srgb, var(--accent) 46%, var(--ink)) transparent; }
@media (pointer: fine) {
  [data-full-page] { scrollbar-width: thin; }
}
@media (prefers-contrast: more) {
  [data-full-page] { scrollbar-width: auto; scrollbar-color: var(--accent) var(--ink); }
}
@media (forced-colors: active) {
  [data-full-page] { scrollbar-width: auto; scrollbar-color: auto; }
}
[data-full-page] .nav { min-height: var(--intro-header-height); }
[data-full-page] .review-first-screen { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
[data-full-page] .review-first-screen > section { flex-shrink: 0; }
/* Hero first, then a finite automatic fade. Base content stays visible without
   JS; opacity alone preserves geometry, native scrolling and counter baselines. */
[data-full-page][data-content-entrance="true"] :is(.figures, .labs, .contact, .footer) {
  animation: content-arrive 550ms cubic-bezier(.2,.7,.25,1) 650ms backwards;
}
[data-full-page][data-content-entrance="true"] :is(.figures, .labs, .contact, .footer):focus-within { animation: none; }
@keyframes content-arrive { from { opacity: 0; } to { opacity: 1; } }
@media print {
  [data-full-page] :is(.figures, .labs, .contact, .footer), [data-full-page] [data-enter] { animation: none !important; opacity: 1 !important; transform: none !important; }
}
[data-full-page][data-review-fallback="true"] [data-enter] { opacity: 1; transform: none; }
[data-full-page] .brand img { height: 40px; }
[data-full-page] .hero-sub { max-width: 52ch; }
[data-full-page] .hero .brush { left: 0; bottom: .05em; width: 100%; height: 3px; }
[data-full-page] .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) { max-width: 840px; }
[data-full-page] .platform-grid { grid-template-columns: repeat(3, minmax(0, 248px)); }
/* Whitespace separates sections; the footer keeps its quiet top divider. */
[data-full-page] :is(.figures-inner, .labs-inner, .contact-inner) { border-block: 0; }
[data-full-page] [data-enter="pending"] { opacity: 0; }
/* Reduced motion always shows the static composition immediately. */
@media (prefers-reduced-motion: reduce) {
  [data-full-page] [data-enter] { opacity: 1; transform: none; }
}

/* Selected Larger hero. Keep its approved scale and header gap; sections now
   follow at natural spacing, independent of spare viewport height. */
@media (min-width: 1001px) and (min-height: 760px) {
  [data-full-page] { --hero-size: min(150px, calc((100vw - var(--pad) * 2) / 8.8), 16vh); }
  [data-full-page] .review-first-screen { justify-content: flex-start; }
  [data-full-page] .hero { padding-top: clamp(32px, 4vh, 48px); }
  [data-full-page] .badge { font-size: 14px; }
  [data-full-page] .hero-sub { font-size: 24px; margin-top: 32px; }
  [data-full-page] .hero .brush { bottom: .15em; }
  [data-full-page] .hero .button-primary { min-height: 58px; padding-inline: 32px; font-size: 17px; }
  [data-full-page] .hero .text-link { font-size: 17px; }
  [data-full-page] .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) { max-width: 984px; }
  [data-full-page] .platform-grid { grid-template-columns: repeat(3, minmax(0, 296px)); }
  [data-full-page] :is(.platform-grid, .platform-items) img { width: 50px; height: 50px; }
  [data-full-page] :is(.platform-grid, .platform-items) span { font-size: 26px; }
}

/* Selected full-page Split direction. Baseline and Style room stay unchanged. */
[data-variant="atelier-wide"] .labs-split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px 72px; justify-items: stretch; padding-block: 52px 64px; text-align: left; }
.labs-split .labs-heading, .labs-split .labs-copy { width: 100%; }
.labs-identity { display: grid; justify-items: start; gap: 8px; min-width: 0; text-align: left; }
.labs-identity .labs-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px 8px 8px; border: 1px solid rgb(213 225 184 / 32%); border-radius: 8px; background: rgb(213 225 184 / 7%); color: var(--bone); font-size: 14px; font-weight: 500; line-height: 1.4; }
.labs-identity .labs-note img { width: 24px; height: 24px; }
.labs-split h2 { position: relative; max-width: 26ch; font-size: clamp(36px, 4vw, 56px); font-weight: 500; }
/* Each original headline field owns its line. Trailing newlines and a blank
   second field must not create a third line, including while editing. */
.labs-split h2 > .copy-fragment { display: block; white-space: pre-line; }
.labs-split h2:has([data-copy-field]) br { display: none; }
.labs-split h2 > [data-copy-blank="true"] { display: none; }
.labs-split h2 > [data-copy-blank="true"][contenteditable] {
  display: inline-block; position: absolute; top: 100%; right: 0; z-index: 1;
  width: 24px; height: 18px; min-width: 24px; min-height: 18px; margin-top: 1px;
  font: 400 14px/18px var(--mono); white-space: normal; text-align: center;
  color: var(--muted); outline: 1px dashed var(--line); border-radius: 3px;
}
.labs-split h2 > [data-copy-field="labs-title:0"][data-copy-blank="true"][contenteditable] { right: 28px; }
.labs-split h2 > [data-copy-blank="true"][contenteditable]::before { content: '+'; }
.labs-split h2 > [data-copy-blank="true"][contenteditable]:focus { outline: 2px solid var(--accent); }
.labs-split .labs-visual { width: 100%; }
.labs-flow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 18px; border-radius: 18px; }
.labs-channel { min-width: 0; width: 100%; max-width: 460px; padding: 24px; background: rgb(241 238 231 / 2%); border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.labs-channel-source { border-color: rgb(255 70 70 / 24%); }
.labs-channel-destination { border-color: rgb(100 180 255 / 28%); }
.labs-flow:hover .labs-channel { background: rgb(241 238 231 / 5%); border-color: var(--faint); }
.labs-platform-mark { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; color: var(--bone); font-size: 32px; font-weight: 500; letter-spacing: -.035em; }
.labs-platform-mark img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.labs-platform-mark .labs-msn-wordmark { width: 122px; height: 48px; }
.labs-channel p { margin-top: 16px; font-size: 16px; color: var(--muted); }
.labs-flow-arrow { display: block; width: 48px; height: 28px; transform: rotate(90deg); color: var(--faint); }
.labs-proof-wrap { width: 100%; container: labs-proof / inline-size; }
.labs-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); justify-content: start; gap: 20px 36px; padding: 0; margin: 0; list-style: none; }
.labs-proof li { min-width: 0; }
.labs-split .labs-proof .figure-value { font-size: clamp(36px, 12cqi, 48px); white-space: nowrap; }
.labs-creators-label, .labs-seconds-label { margin-top: 2px; font-size: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labs-cta-wrap { display: flow-root; width: 100%; max-width: 56ch; font-size: 20px; }
/* User-selected left alignment; retain the tighter trailing-icon inset. */
.labs-split .text-link { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; min-height: 54px; margin: 20px 0 0; padding: 10px 10px 10px 16px; font-size: 16px; line-height: 1; border: 1px solid rgb(213 225 184 / 32%); border-radius: var(--button-radius); background: rgb(213 225 184 / 6%); text-decoration: none; }
.labs-split .text-link .labs-cta-mark { width: 36px; height: 32px; object-fit: contain; flex-shrink: 0; }
.labs-split .text-link[href]:is(:hover, :focus-visible) { background: rgb(213 225 184 / 12%); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .labs-split .text-link[href], .labs-split .text-link[href] > [aria-hidden="true"] { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
  .labs-split .text-link[href]:focus-visible { transform: translateY(-2px); }
  .labs-split .text-link[href]:focus-visible > [aria-hidden="true"] { transform: translate(3px, -3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .labs-split .text-link[href]:hover { transform: translateY(-2px); }
  .labs-split .text-link[href]:hover > [aria-hidden="true"] { transform: translate(3px, -3px); }
  .labs-split .text-link[href]:active { transform: none; }
}
@container labs-proof (max-width: 560px) {
  .labs-proof { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.labs-split .labs-heading { grid-column: 1; grid-row: 1; }
.labs-split .labs-copy { grid-column: 1; grid-row: 2; }
.labs-split .labs-proof-wrap { grid-column: 1; grid-row: 3; }
.labs-split .labs-visual { grid-column: 2; grid-row: 1 / 4; align-self: center; }
[data-variant="atelier-wide"] .labs-split .labs-signature { justify-content: flex-start; }
[data-variant="atelier-wide"] .labs-split h2 { margin-inline: 0; }
[data-variant="atelier-wide"] .labs-split .section-copy { max-width: 56ch; font-size: 20px; margin-inline: 0; text-wrap: pretty; }
@media (max-width: 1000px) {
  [data-variant="atelier-wide"] .labs-split { column-gap: 36px; }
}
@media (max-width: 760px) {
  [data-full-page] { --intro-header-height: 96px; }
  [data-full-page] .brand img { height: 36px; }
  [data-variant="atelier-wide"] .labs-split { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 36px 52px; }
  .labs-split .labs-heading, .labs-split .labs-copy,
  .labs-split .labs-proof-wrap, .labs-split .labs-visual { grid-column: auto; grid-row: auto; }
  [data-variant="atelier-wide"] .labs-split .section-copy, .labs-cta-wrap { font-size: 18px; }
  .labs-identity .labs-note { font-size: 16px; }
}

/* The homepage keeps a compact invitation; the form lives on /contact. */
.contact-page-link { margin-top: 16px; }

/* A3 / Ledger: mono Atelier typography and three measured, horizontal rows. */
[data-variant="atelier-ledger"] { --display: var(--mono); --hero-weight: 400; --hero-size: clamp(42px, 5.2vw, 74px); --mobile-hero-size: clamp(34px, 10.6vw, 48px); --number-font: var(--mono); --number-size: 68px; --button-radius: 4px; }
[data-variant="atelier-ledger"] .figure-grid { grid-template-columns: 1fr; gap: 0; }
[data-variant="atelier-ledger"] .figure-grid li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; }
[data-variant="atelier-ledger"] .figure-grid li:last-child { padding-bottom: 0; }
[data-variant="atelier-ledger"] .figure-label { margin: 0; font-family: var(--mono); font-size: 15px; }
[data-variant="atelier-ledger"] .badge { font-family: var(--mono); font-size: 11px; }

/* S1 / Air: the familiar Signal headline, without the boxes. */
[data-variant="signal-air"] { --number-size: clamp(50px, 4.8vw, 70px); --canvas: radial-gradient(ellipse 65% 640px at 50% 250px, #12281f, transparent), var(--ink); }
[data-variant="signal-air"] .badge { background: none; border-color: transparent; }
[data-variant="signal-air"] .figure-grid { text-align: center; }
[data-variant="signal-air"] .figures-intro, [data-variant="signal-air"] .figure-note { text-align: center; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platforms { text-align: center; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platform-grid { justify-content: center; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platform-grid li { justify-content: center; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platform-stage { margin-inline: auto; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platform-controls { justify-content: center; }

/* S2 / Line: left-aligned, flatter, a single line joining the three totals. */
[data-variant="signal-line"] { --canvas: var(--ink); --hero-size: min(76px, calc((100vw - var(--pad) * 2) / 12.3)); --button-radius: 2px; --number-size: clamp(48px, 4.8vw, 68px); }
[data-variant="signal-line"] .header { border-bottom: 1px solid var(--line); }
[data-variant="signal-line"] .hero-inner { align-items: flex-start; text-align: left; }
[data-variant="signal-line"] .badge { border: 0; background: none; padding-inline: 0; }
[data-variant="signal-line"] .hero-line:last-child { color: var(--muted); }
[data-variant="signal-line"] .hero-sub { max-width: 44ch; text-wrap: pretty; }
[data-variant="signal-line"] .figure-grid { gap: 0; border-block: 1px solid var(--line); padding-block: 28px; }
[data-variant="signal-line"] .figure-grid li { border: 0; padding: 0 30px; }
[data-variant="signal-line"] .figure-grid li:first-child { padding-left: 0; }
[data-variant="signal-line"] .figure-grid li:last-child { padding-right: 0; }
[data-variant="signal-line"] .figure-grid li + li { border-left: 1px solid var(--line); }
[data-variant="signal-line"] .figures-intro { font-family: var(--mono); font-size: 16px; }

/* S3 / Studio: Atelier's split composition, Signal's colour and mono totals. */
[data-variant="signal-studio"] { --display: var(--sans); --hero-case: none; --hero-weight: 500; --hero-tracking: -.065em; --hero-size: clamp(44px, 6vw, 88px); --mobile-hero-size: clamp(40px, 12vw, 58px); --number-size: clamp(50px, 4.8vw, 70px); --button-radius: 10px; --canvas: var(--ink); }
[data-variant="signal-studio"] .hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; text-align: left; gap: 0 48px; align-items: center; }
[data-variant="signal-studio"] .badge { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 0; }
[data-variant="signal-studio"] .hero h1 { grid-column: 1; grid-row: 2 / 4; margin-top: 28px; line-height: 1.02; }
[data-variant="signal-studio"] .hero-line > span { display: block; }
[data-variant="signal-studio"] .hero-sub { grid-column: 2; align-self: end; text-wrap: pretty; max-width: 29ch; margin-top: 0; font-size: 23px; }
[data-variant="signal-studio"] .hero-cta { grid-column: 2; justify-content: flex-start; align-self: start; gap: 22px; margin-top: 30px; }

/* Fixed-slot motion: exactly three identities. No repeated logo tape. */
.platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) { max-width: 672px; }
.platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 3px; }
.platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items li { min-width: 0; }
[data-round="2"] .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items li { justify-content: flex-start; }
:is([data-variant="atelier-wide"], [data-variant="signal-air"]) .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items li { justify-content: center; }

/* RareUI-inspired air around each face: the eased alpha ramp reaches zero
   before the clip edge. No blur or painted overlay. Reserve the same 1.5em
   line at rest, so the suffix, baseline and labels never move on settling. */
[data-results="soft-roll"] .figure-value { line-height: 1.5; }
[data-results="soft-roll"] .counter-reel { position: relative; overflow: visible; width: auto; height: auto; }
[data-results="soft-roll"] .counter-anchor, [data-results="soft-roll"] .counter-window { font: inherit; letter-spacing: inherit; padding: 0; color: inherit; }
[data-results="soft-roll"] .counter-anchor { visibility: hidden; }
[data-results="soft-roll"] .counter-window {
  --reel-fade: linear-gradient(to bottom,
    transparent 0%, rgb(0 0 0 / .06) 5.5%, rgb(0 0 0 / .5) 11%, rgb(0 0 0 / .94) 16.5%,
    #000 22%, #000 78%, rgb(0 0 0 / .94) 83.5%, rgb(0 0 0 / .5) 89%, rgb(0 0 0 / .06) 94.5%, transparent 100%);
  /* Side air preserves glyph overhang with tight tracking (notably the 4).
     It does not change the real-glyph anchor's width or the number spacing. */
  position: absolute; inset: 0 -.1em; padding-inline: .1em; overflow: hidden;
  -webkit-mask-image: var(--reel-fade); mask-image: var(--reel-fade);
}
/* Use the laid-out strip height, not accumulated em offsets: fractional font
   sizes otherwise drift a subpixel on distant faces and jump when we settle. */
[data-results="soft-roll"] .counter-track { line-height: 1.5; transform: translateY(calc(-2000% / 21)); }
[data-results="soft-roll"] .counter-track > span { height: 1.5em; line-height: 1.5; }
[data-results="soft-roll"] .counter-display.is-running .counter-track {
  transform: translateY(calc(var(--digit-stop) * -100% / 21));
  transition-duration: calc(1400ms - var(--digit-delay));
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1000px) {
  [data-variant="signal-studio"] .hero-inner { column-gap: 28px; }
  [data-variant="signal-studio"] .hero-sub { font-size: 20px; }
  [data-variant="signal-studio"] .hero-cta { gap: 14px; }
  [data-round="2"] .figure-grid { gap: 24px; }
  [data-variant="atelier-ledger"] .figure-grid, [data-variant="signal-line"] .figure-grid { gap: 0; }
  [data-variant="signal-line"] .figure-grid li { padding-inline: 20px; }
  [data-variant="signal-line"] .figure-grid li:first-child { padding-left: 0; }
  [data-variant="signal-line"] .figure-grid li:last-child { padding-right: 0; }
}
@media (max-width: 760px) {
  [data-round="2"] .hero { padding-top: 42px; }
  [data-round="2"] .platforms { padding-block: 52px 38px; }
  [data-round="2"] .figures-intro { font-size: 18px; margin-bottom: 24px; }
  [data-round="2"] .figure-label { font-size: 16px; }
  [data-round="2"] .figure-note { font-size: 16px; }
  [data-variant="signal-studio"] .hero-inner { display: flex; align-items: flex-start; }
  [data-variant="signal-studio"] .hero-sub { align-self: auto; margin-top: 28px; }
  [data-variant="signal-studio"] .hero-cta { align-self: auto; }
  [data-variant="signal-studio"] .hero h1 { font-size: var(--mobile-hero-size); }
  .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items li { flex-direction: column; gap: 12px; }
  .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items span { font-size: 18px; }
}
@media (max-width: 640px) {
  [data-round="2"] .figure-grid { grid-template-columns: 1fr; gap: 28px; }
  [data-round="2"] .figure-value { font-size: var(--mobile-number-size); }
  [data-round="2"] .figure-grid li { padding-top: 22px; }
  [data-round="2"] .figure-label { margin-top: 2px; }
  [data-variant="atelier-ledger"] .figure-grid { gap: 0; }
  [data-variant="atelier-ledger"] .figure-value { font-size: clamp(32px, 10vw, 46px); }
  [data-variant="atelier-ledger"] .figure-grid li { padding-block: 22px; gap: 16px; }
  [data-variant="atelier-ledger"] .figure-grid li:last-child { padding-bottom: 0; }
  [data-variant="atelier-ledger"] .figure-label { font-family: var(--sans); font-size: 16px; margin: 0; }
  [data-variant="signal-line"] .figure-grid { padding: 0; gap: 0; border-bottom: 0; }
  [data-variant="signal-line"] .figure-grid li { padding: 22px 0; }
  [data-variant="signal-line"] .figure-grid li:last-child { padding-bottom: 0; }
  [data-variant="signal-line"] .figure-grid li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  [data-variant="atelier-wide"] .hero-line > span { display: block; }
  [data-variant="atelier-wide"] .hero-sub { font-size: 18px; }
}
@media (max-width: 360px) {
  .platform-stage:is([data-mode="swap"], [data-mode="shuffle"], [data-mode="breathe"]) .platform-items span { font-size: 16px; }
  [data-round="2"] .figure-grid li { padding-inline: 0; }
  [data-variant="atelier-ledger"] .badge { font-family: var(--sans); font-size: 10px; }
}
/* Content-led phone layout for the selected site. Desktop framing and the
   alternative Style-room directions keep their existing geometry. */
@media (max-width: 760px) {
  [data-full-page][data-variant="atelier-wide"] { --intro-header-height: 64px; --mobile-hero-size: clamp(36px, 11vw, 58px); }
  [data-full-page][data-variant="atelier-wide"] .brand { min-width: 44px; min-height: 44px; }
  [data-full-page][data-variant="atelier-wide"] .brand img { height: 30px; }
  [data-full-page][data-variant="atelier-wide"] .mobile-menu summary { justify-content: center; width: 44px; min-height: 44px; padding: 0; }
  [data-full-page][data-variant="atelier-wide"] .mobile-menu summary span { font-size: 24px; }
  [data-full-page][data-variant="atelier-wide"] .review-first-screen { min-height: 0; justify-content: flex-start; }
  [data-full-page][data-variant="atelier-wide"] .hero { padding-top: 24px; }
  [data-full-page][data-variant="atelier-wide"] .badge { font-size: 13px; }
  [data-full-page][data-variant="atelier-wide"] .hero-sub { margin-top: 24px; }
  [data-full-page][data-variant="atelier-wide"] .hero-cta { margin-top: 24px; gap: 16px; }
  [data-full-page][data-variant="atelier-wide"] .text-link { font-size: 16px; }
  [data-full-page][data-variant="atelier-wide"] .platforms { padding-block: 40px 36px; }
  [data-full-page][data-variant="atelier-wide"] :is(.platform-grid, .platform-stage) { margin-top: 20px; }
  [data-full-page][data-variant="atelier-wide"] .figures-inner { padding-block: 32px 40px; }
  [data-full-page][data-variant="atelier-wide"] .figure-grid { gap: 20px; }
  [data-full-page][data-variant="atelier-wide"] .figure-grid li { padding-top: 16px; }
  [data-full-page][data-variant="atelier-wide"] .labs-signature { gap: 12px; }
  [data-full-page][data-variant="atelier-wide"] .labs-split h2 { font-size: clamp(30px, 8.5vw, 36px); }
  [data-full-page][data-variant="atelier-wide"] :is(.labs-creators-label, .labs-seconds-label) { white-space: normal; overflow: visible; text-overflow: clip; }
  [data-full-page][data-variant="atelier-wide"] .footer-inner { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 4px 12px; padding-block: 12px; font-size: 13px; }
  [data-full-page][data-variant="atelier-wide"] .footer-brand { min-height: 44px; }
  [data-full-page][data-variant="atelier-wide"] .footer-brand img { width: 96px; }
  [data-full-page][data-variant="atelier-wide"] .footer nav { grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; gap: 0 20px; max-width: 100%; font-size: 13px; }
  [data-full-page][data-variant="atelier-wide"] .footer nav a { min-width: 44px; min-height: 44px; white-space: nowrap; }
}
/* Private full-page copy editor. Its controls never load on the homepage. */
[data-copy-ready="true"] body { padding-bottom: calc(var(--copy-toolbar-height, 100px) + 32px); }
.copy-fragment { white-space: pre-wrap; }
[data-copy-ready="true"]:not([data-copy-editing="true"]) .figure-note:has(> [data-copy-blank="true"]) { display: none; }
[data-copy-field][contenteditable][data-copy-blank="true"] { display: inline-block; min-width: 1ch; min-height: 1em; }
.copy-toolbar { position: fixed; z-index: 20; bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); padding: 10px 14px; background: #1b1b19; color: var(--bone); border: 1px solid var(--line); border-radius: 12px; text-align: center; font: 400 14px/1.5 var(--sans); }
.copy-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.copy-toolbar button { min-height: 36px; padding: 5px 12px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.copy-toolbar button:hover, .copy-toolbar button[aria-pressed="true"] { background: rgb(213 225 184 / 10%); border-color: var(--accent); }
.copy-toolbar button:disabled { opacity: .5; cursor: default; }
.copy-toolbar p { margin: 6px 0 0; max-width: 64ch; color: var(--muted); }
[data-copy-field][contenteditable] { cursor: text; outline: 1px dashed transparent; }
[data-copy-field][contenteditable]:hover { outline-color: var(--muted); }
[data-copy-field][contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 600px) {
  .copy-toolbar { width: calc(100vw - 24px); font-size: 16px; padding: 8px; bottom: 8px; }
  .copy-toolbar button { min-height: 44px; padding-inline: 10px; }
  .copy-toolbar p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}