/* agence-efficads.com · page styles. Tokens first, then each chapter. */

:root {
  --sc-canvas:     #F2F1EC;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #14161A;
  --sc-ink-soft:   #5B6068;
  --sc-accent:     #0A7360;
  --sc-accent-ink: #F2F1EC;
  --sc-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 220 14% 12%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --sc-leading-none: 0.96;
  --folio-w: 12.5rem;
  --paper-line: color-mix(in oklab, var(--sc-ink) 9%, transparent);
  --brand-purple: #4B3EC8;
}

/* The one inverted ground. Restate color, not only the tokens. */
.ch--dark, [data-ground="dark"] .corners, [data-ground="dark"] .mesure {
  --sc-canvas:     #0E1113;
  --sc-surface:    #171C1F;
  --sc-ink:        #F2F1EC;
  --sc-ink-soft:   #A2A9AE;
  --sc-accent:     #35E0C2;
  --sc-accent-ink: #0E1113;
  --sc-shadow-color: 190 30% 2%;
  --paper-line: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  color: var(--sc-ink);
}
[data-ground-top="dark"] .corners { --sc-ink: #F2F1EC; --sc-ink-soft: #A2A9AE; --sc-accent: #35E0C2; --sc-accent-ink: #0E1113; --sc-canvas: #0E1113; color: var(--sc-ink); }

html { background: var(--sc-canvas); }
body { min-height: 100svh; }
.sc-grain { opacity: 0.035; }
.sc-display { font-weight: 500; font-variation-settings: "opsz" 96; }
.sc-body { font-size: var(--sc-t-base); }
strong { font-weight: 600; }
a.run { color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a.run:hover { text-decoration-thickness: 2.5px; }

.skip {
  position: fixed; top: var(--sc-3); left: var(--sc-3); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--sc-ink); color: var(--sc-canvas);
  border-radius: var(--sc-r-sm); transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------- CTA -- */
.cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: 0.85rem 1.35rem;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0;
  text-decoration: none; border: 0; border-radius: var(--sc-r-sm);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta::after { content: "→"; font-family: var(--sc-font-text); transition: transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2), var(--sc-edge); }
  body.is-past-hero .cta--corner:hover { transform: translateY(-1px); }
  .cta:hover::after { transform: translateX(3px); }
}
.cta:active { transform: translateY(1px); box-shadow: var(--sc-e1); }
.cta:disabled { opacity: 0.6; cursor: wait; }
.ch--dark .cta { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ------------------------------------------------------------ chrome -- */
.corners {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sc-4) var(--sc-5);
  pointer-events: none;
  color: var(--sc-ink);
}
.corners > * { pointer-events: auto; }
.corners__actions { display: flex; align-items: center; gap: var(--sc-3); pointer-events: none; }
.corners__actions > * { pointer-events: auto; }

/* The one permanent way to act. Absent on the opening screen, where the hero
   already carries the call, then present for the rest of the page.
   Hidden with opacity and inert rather than with `visibility`: the verification
   harness hides fixed chrome to photograph the ground behind a line, and a
   child that sets `visibility: visible` climbs back out of that and gets
   sampled as the background. Keyboard access is handled in site.js. */
.cta--corner {
  padding: 0.5rem 0.9rem; font-size: var(--sc-t-xs); gap: var(--sc-2);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out);
}
body.is-past-hero .cta--corner { opacity: 1; transform: none; pointer-events: auto; }
/* Nothing competes with the form once the visitor has reached it. */
body.is-at-close .cta--corner, body.index-open .cta--corner {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: 0.01em; text-decoration: none; color: inherit;
  /* The chrome has no bar, so content scrolls under it. A chip of the page
     ground keeps both corners legible over whatever passes beneath. */
  padding: 0.3rem 0.6rem 0.3rem 0.3rem; margin: -0.3rem;
  background: var(--sc-canvas); border-radius: var(--sc-r-pill);
}
.wordmark img { width: 30px; height: 30px; object-fit: contain; }
.index-toggle {
  background: none; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
  border-radius: var(--sc-r-pill); padding: 0.45rem 0.95rem;
  font-size: var(--sc-t-sm); font-weight: 500; color: inherit; cursor: pointer;
  background: var(--sc-canvas);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .index-toggle:hover { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
}
.index-toggle:active { transform: translateY(1px); }
.index-toggle__close { display: none; }
.index-toggle[aria-expanded="true"] .index-toggle__label { display: none; }
.index-toggle[aria-expanded="true"] .index-toggle__close { display: inline; }
body.index-open .corners { --sc-ink: #14161A; --sc-canvas: #F2F1EC; color: var(--sc-ink); }
body.index-open .mesure { visibility: hidden; }

/* ------------------------------------------------------- the measure -- */
.mesure {
  position: fixed; left: var(--sc-5); top: 50%; translate: 0 -50%;
  z-index: var(--sc-z-chrome); width: var(--folio-w);
  color: var(--sc-ink); font-size: var(--sc-t-xs);
  padding: var(--sc-4); margin-left: calc(var(--sc-4) * -1);
  background: var(--sc-canvas); border-radius: var(--sc-r-md);
  transition: color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out);
}
.mesure__title {
  margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0;
}
.mesure__chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.mesure__chapters li { border-bottom: 1px solid var(--paper-line); }
.mesure__chapters a {
  display: flex; align-items: center; gap: var(--sc-2);
  padding: 0.38rem 0; text-decoration: none; color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.mesure__chapters a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  border: 1px solid currentColor; transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out);
}
.mesure__chapters a.is-read::before { background: currentColor; }
.mesure__chapters a.is-current { color: var(--sc-ink); font-weight: 500; }
.mesure__chapters a.is-current::before { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.35); }
@media (hover: hover) and (pointer: fine) { .mesure__chapters a:hover { color: var(--sc-ink); } }
@media (max-width: 1099px) {
  .mesure {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: auto;
    padding: 0 0 env(safe-area-inset-bottom);
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--paper-line);
    margin-left: 0; border-radius: 0;
  }
  .mesure__title { display: none; }
  .mesure__chapters { display: flex; gap: var(--sc-5); border: 0; overflow-x: auto; scrollbar-width: none; padding: 0.7rem var(--sc-4); scroll-snap-type: x proximity; }
  .mesure__chapters::-webkit-scrollbar { display: none; }
  .mesure__chapters li { border: 0; flex: none; scroll-snap-align: center; }
  .mesure__chapters a { padding: 0; white-space: nowrap; font-size: var(--sc-t-sm); }
  body { padding-bottom: 3rem; }
}

@media (max-width: 620px) {
  /* The action needs the room, so the mark carries the brand alone. The name
     is hidden at every scroll position, not only past the hero, or the row
     reflows under the visitor as the button arrives. */
  .wordmark span { display: none; }
  .wordmark { padding-right: 0.3rem; }
  .cta--corner { padding: 0.45rem 0.75rem; }
  .corners { padding-inline: var(--sc-4); }
  .corners__actions { gap: var(--sc-2); }
  /* On a phone the copy runs the full width and passes right under the chrome,
     so once the button is there the corners take a ground, exactly like the
     chapter strip at the bottom edge. */
  body.is-past-hero:not(.index-open) .corners {
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--paper-line);
    padding-block: var(--sc-3);
  }
  body.is-past-hero .wordmark, body.is-past-hero .index-toggle { background: transparent; }
}
.wordmark span { white-space: nowrap; }

/* -------------------------------------------------------------- index -- */
.index { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1); }
.index[hidden] { display: none; }
.index__sheet {
  position: absolute; inset: 0; overflow: auto;
  background: #F2F1EC; color: #14161A;
  --sc-ink: #14161A; --sc-ink-soft: #5B6068; --sc-accent: #0A7360; --sc-canvas: #F2F1EC;
  display: grid; gap: var(--sc-7);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-content: start;
  padding: calc(var(--sc-9) + var(--sc-4)) var(--sc-gutter) var(--sc-8);
  animation: index-in 420ms var(--sc-ease-out);
}
@keyframes index-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.index__head { margin: 0 0 var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.index__list { list-style: none; margin: 0; padding: 0; }
.index__list li { border-top: 1px solid var(--paper-line); }
.index__list a {
  display: block; padding: 0.55rem 0; text-decoration: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--sc-d-fast) var(--sc-ease-out), padding-left var(--sc-d-fast) var(--sc-ease-out);
}
.index__list--chapters { counter-reset: chap; }
.index__list--chapters a::before { counter-increment: chap; content: counter(chap, decimal-leading-zero); display: inline-block; width: 2.4em; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-family: var(--sc-font-text); }
@media (hover: hover) and (pointer: fine) { .index__list a:hover { color: var(--sc-accent); } }
.cta--index { margin-top: var(--sc-6); }
@media (max-width: 860px) {
  .index__sheet { grid-template-columns: 1fr; gap: var(--sc-6); padding-top: var(--sc-9); }
  .index__list a { font-size: var(--sc-t-base); padding: 0.45rem 0; }
}

/* --------------------------------------------------------- 0 · title -- */
.ch--title { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: clip; }
.title {
  position: relative; width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding: clamp(6rem, 14vh, 9rem) var(--sc-gutter) clamp(4rem, 10vh, 7rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sc-6);
}
.title__far { position: absolute; inset: -8% -4% -8% auto; width: min(58vw, 760px); pointer-events: none; z-index: 0; }
.plane--far { width: 100%; height: 100%; }
.plane--far path { fill: color-mix(in oklab, var(--sc-ink) 4.5%, transparent); stroke: color-mix(in oklab, var(--sc-ink) 10%, transparent); stroke-width: 1; }
.plane--far path:nth-child(2) { fill: color-mix(in oklab, var(--sc-accent) 9%, transparent); stroke: color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.title__copy { position: relative; z-index: 2; max-width: 46rem; }
.title__h {
  font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 96;
  font-size: clamp(2.4rem, 1.15rem + 4.7vw, 5.7rem);
  line-height: 0.98; letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
.title__h .l { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.title__h .l > span { display: block; transform: translate3d(0, 110%, 0); opacity: 0; transition: transform 900ms var(--sc-ease-out), opacity 500ms var(--sc-ease-out); transition-delay: calc(var(--l) * 110ms + 80ms); }
.title__h.is-in .l > span { transform: none; opacity: 1; }
html.no-split .title__h { opacity: 1; }
.title__lede { margin: var(--sc-5) 0 0; max-width: 44ch; font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: var(--sc-track-snug); color: var(--sc-ink-soft); text-wrap: pretty; }
.title__copy .cta { margin-top: var(--sc-6); }
.title__lede, .title__copy .cta { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
.title__lede { transition-delay: 460ms; }
.title__copy .cta { transition-delay: 600ms; }
.title.is-in .title__lede, .title.is-in .title__copy .cta { opacity: 1; transform: none; }

.title__tags { list-style: none; margin: 0; padding: 0; position: relative; z-index: 3; display: grid; gap: var(--sc-3); justify-items: end; align-self: end; }
.tag {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: 0.55rem 0.9rem; background: var(--sc-surface); color: var(--sc-ink);
  border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm);
  box-shadow: var(--sc-e2), var(--sc-edge);
  translate: calc(var(--k) * -1.6rem + var(--px) * 22px) calc(var(--py) * 14px);
  opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out);
  transition-delay: calc(560ms + var(--k) * 90ms);
}
.tag strong { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.02em; }
.title.is-in .tag { opacity: 1; transform: none; }
/* Pointer parallax lives on an inner element; the engine owns the outer transform. */
.plane { --px: 0; --py: 0; }
.title__far .plane--far { transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -12px), 0); }
.tag { --px: 0; --py: 0; }
@media (max-width: 860px) {
  .ch--title { min-height: 100svh; }
  .title { grid-template-columns: 1fr; padding-top: 6.5rem; padding-bottom: 3rem; gap: var(--sc-6); }
  .title__far { inset: -2% -30% auto auto; width: 90vw; height: 60%; }
  .title__h { font-size: clamp(2.35rem, 1.1rem + 6.4vw, 3.2rem); }
  .title__tags { justify-items: start; grid-template-columns: repeat(2, auto); }
  .tag { translate: calc(var(--px) * 10px) calc(var(--py) * 8px); padding: 0.45rem 0.7rem; }
}

/* ---------------------------------------------------------- 1 · wipe -- */
.wipe { background: var(--sc-canvas); }
.wipe__layer { position: absolute; inset: 0; display: flex; align-items: center; }
.wipe__layer--apres { background: var(--sc-surface); box-shadow: var(--sc-e3); z-index: 2; }
.wipe__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); }
.wipe__label { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.wipe__layer--apres .wipe__label { color: var(--sc-accent); }
.wipe__list { list-style: none; margin: 0; padding: 0; max-width: 34ch; }
.wipe__list li {
  font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-weight: 500;
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.15rem); line-height: 1.16; letter-spacing: -0.02em;
  padding: 0.55em 0; border-top: 1px solid var(--paper-line);
}
.wipe__layer--avant .wipe__list li { color: var(--sc-ink-soft); }
.wipe__list--apres li { color: var(--sc-ink); display: grid; grid-template-columns: 1.1em 1fr; gap: 0.5em; align-items: baseline; }
.wipe__list--apres li::before {
  content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; margin-top: 0.05em;
  background: var(--sc-accent);
  clip-path: polygon(22% 48%, 42% 68%, 80% 30%, 88% 38%, 42% 84%, 14% 56%);
  transform: scale(calc(0.4 + 0.6 * clamp(0, (var(--sc-p) - 0.32 - var(--k) * 0.06) / 0.1, 1)));
  opacity: clamp(0, (var(--sc-p) - 0.32 - var(--k) * 0.06) / 0.1, 1);
}
.wipe__caption { position: absolute; right: var(--sc-gutter); bottom: clamp(2rem, 8vh, 5rem); z-index: 3; margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--sc-ink); }
@media (max-width: 860px) {
  .wipe__list { max-width: none; }
  .wipe__caption { left: var(--sc-gutter); right: auto; bottom: 4.5rem; font-size: var(--sc-t-lg); }
}

/* ------------------------------------------------------ 2 · services -- */
.ch--services { padding-block: var(--sc-section); }
.services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.services__head { position: sticky; top: var(--sc-9); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.ledger li { border-bottom: 1px solid var(--paper-line); }
.ledger__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name arrow" "desc arrow" "tags arrow";
  gap: 0.35rem var(--sc-5); padding: var(--sc-5) var(--sc-3);
  text-decoration: none; color: inherit; border-radius: var(--sc-r-md);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.ledger__name { grid-area: name; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.ledger__desc { grid-area: desc; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.ledger__tags { grid-area: tags; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.02em; margin-top: 0.25rem; }
.ledger__arrow { grid-area: arrow; align-self: center; font-size: var(--sc-t-xl); color: var(--sc-ink-soft); transition: transform var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ledger__row:hover { background: var(--sc-surface); transform: translateY(-2px); box-shadow: var(--sc-e2), var(--sc-edge); }
  .ledger__row:hover .ledger__arrow { transform: translateX(4px); color: var(--sc-accent); }
}
.ledger__row:active { transform: translateY(0); }
@media (max-width: 960px) {
  .services { grid-template-columns: 1fr; gap: var(--sc-7); }
  .services__head { position: static; }
  .ledger__row { padding-inline: 0; border-radius: 0; }
}

/* ---------------------------------------------------------- 3 · rail -- */
.work { background: var(--sc-canvas); display: flex; align-items: center; }
.rail { align-items: center; gap: clamp(2rem, 4vw, 4rem); padding-inline: var(--sc-gutter); }
.rail > * { flex: none; }
.rail__lead { width: clamp(18rem, 30vw, 30rem); }
.rail__lead p { margin-top: var(--sc-5); }
.sheet { margin: 0; width: clamp(22rem, 38vw, 40rem); translate: 0 calc(var(--lift) * -2.2rem); }
.sheet__frame {
  display: block; border-radius: var(--sc-r-md); overflow: hidden;
  background: var(--sc-surface); box-shadow: var(--sc-e3), var(--sc-edge);
  border: 1px solid var(--paper-line);
}
.sheet__frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sheet figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink); display: flex; justify-content: space-between; gap: var(--sc-4); }
.sheet figcaption span { color: var(--sc-ink-soft); }
.rail__end { width: clamp(16rem, 24vw, 22rem); color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: var(--sc-track-snug); }
/* Staggered settle: items arrive in sequence, floor at 0.55 so an unsettled card reads as arriving. */
@media (prefers-reduced-motion: no-preference) {
  .rail > [style*="--i"] {
    --t: clamp(0, calc(var(--sc-p) * 6 - var(--i) + 1.2), 1);
    opacity: calc(0.55 + 0.45 * var(--t));
    transform: translateY(calc((1 - var(--t)) * 28px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail { padding-block: var(--sc-6); }
}
@media (max-width: 860px) {
  .rail { gap: var(--sc-5); }
  .rail__lead { width: 78vw; }
  .sheet { width: 78vw; translate: 0 calc(var(--lift) * -1rem); }
  .rail__end { width: 78vw; }
}

/* -------------------------------------------------------- 4 · results -- */
.ch--results { background: var(--sc-canvas); }
.results { background: var(--sc-canvas); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--sc-8); padding: 0 var(--sc-gutter); }
.results__pile { position: relative; z-index: 3; }
.results__intro { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; margin: 0; color: var(--sc-ink); }
@media (min-width: 1100px) { .results__intro { left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6)); } }
.results__pile { grid-column: 2; position: relative; height: min(66vh, 36rem); align-self: center; }
.figure {
  position: absolute; top: 0;
  left: calc(var(--n) * 0.9rem); right: calc((3 - var(--n)) * 0.9rem);
  padding: 1.1rem 1.75rem 1.35rem;
  background: var(--sc-surface); color: var(--sc-ink);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e3), var(--sc-edge);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  translate: 0 calc(var(--n) * 5rem);
  z-index: calc(var(--n) + 1);
}
.figure__n { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.6rem); display: flex; align-items: baseline; gap: 0.12em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.figure__unit { font-size: 0.45em; font-weight: 500; letter-spacing: -0.01em; color: var(--sc-ink); }
.figure__sign { font-weight: 500; }
.figure__from { font-size: 0.42em; font-weight: 500; color: var(--sc-ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.figure__arrow { font-size: 0.42em; color: var(--sc-ink-soft); font-family: var(--sc-font-text); }
.figure__l { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.results__note { position: absolute; left: var(--sc-gutter); bottom: clamp(1.5rem, 6vh, 4rem); margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (min-width: 1100px) { .results__note { left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6)); } }
@media (max-width: 860px) {
  .results { grid-template-columns: 1fr; align-items: start; padding-top: 5.5rem; }
  .results__intro { top: 5.5rem; translate: none; font-size: var(--sc-t-2xl); }
  .results__pile { grid-column: 1; height: auto; min-height: 60svh; }
  .figure { padding: 0.75rem 1.25rem 1rem; left: calc(var(--n) * 0.4rem); right: calc((3 - var(--n)) * 0.4rem); translate: 0 calc(var(--n) * 3.05rem); }
  .figure__n { font-size: clamp(2.2rem, 1.4rem + 4vw, 3rem); }
  .figure__l { font-size: var(--sc-t-xs); }
  .results__note { bottom: 4rem; }
}

/* The proofs: real Ads Manager rows, white sheets under the pile. */
.proofs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.results .proofs { grid-column: 1; grid-row: 1; align-self: center; position: relative; height: 29rem; z-index: 2; display: block; }
.results .results__pile { grid-column: 2; grid-row: 1; }
.proof {
  background: #FFFFFF; color: #14161A; border-radius: var(--sc-r-md); overflow: hidden;
  box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid rgba(20,22,26,0.08);
}
/* Eight sheets: each settles 1.9rem below the last, which leaves exactly its header strip showing. */
.results .proof { position: absolute; top: 0; left: calc(var(--n) * 0.35rem); right: calc((7 - var(--n)) * 0.35rem); translate: 0 calc(var(--n) * 1.9rem); z-index: calc(var(--n) + 1); }
.proof__head { margin: 0; display: flex; justify-content: space-between; gap: var(--sc-4); padding: 0.6rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #5B6068; border-bottom: 1px solid rgba(20,22,26,0.08); white-space: nowrap; }
.proof__head span:first-child { flex: none; }
.proof__head span:last-child { color: #14161A; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.proof img { width: 100%; height: auto; display: block; }
.proof__line { margin: 0; padding: 0.6rem 0.9rem 0.7rem; font-size: var(--sc-t-sm); color: #5B6068; border-top: 1px solid rgba(20,22,26,0.08); }
.proof__line strong { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); color: #0A7360; letter-spacing: -0.02em; margin-right: 0.25em; }
.proofs-mobile { display: none; }
@media (max-width: 860px) {
  /* Same specificity as the desktop rule that parks the pile in column 2,
     or the pile lands outside a one-column grid and leaves the screen. */
  .results .results__pile { grid-column: 1; }
  .results .proofs { display: none; }
  .proofs-mobile { display: block; padding-block: var(--sc-7) 0; }
  .proofs-mobile__title { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
  .proof__head { flex-direction: column; gap: 0.15rem; white-space: normal; }
  .proof__head span:last-child { text-align: left; }
}

/* --------------------------------------------------------- 5 · voices -- */
.ch--voices { padding-block: var(--sc-section); overflow: clip; }
.voices { position: relative; }
.voices__far { position: absolute; right: -2vw; top: -12vh; z-index: 0; pointer-events: none; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(18rem, 42vw, 40rem); line-height: 0.7; color: color-mix(in oklab, var(--sc-accent) 9%, transparent); }
.voices__lead { position: relative; z-index: 1; margin: 0; max-width: 60rem; }
.voices__pull { margin: 0; color: var(--sc-ink); }
.voices__text { margin: var(--sc-6) 0 0; max-width: 62ch; color: var(--sc-ink); font-size: var(--sc-t-base); text-wrap: pretty; }
.voices__who { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.voices__who strong { color: var(--sc-ink); font-weight: 500; margin-right: 0.5em; }
.voices__grid { position: relative; z-index: 1; margin-top: var(--sc-9); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-6); align-items: start; }
.voice__wrap:nth-child(1) { grid-column: 1 / span 6; }
.voice__wrap:nth-child(2) { grid-column: 7 / span 6; margin-top: var(--sc-9); }
.voice__wrap:nth-child(3) { grid-column: 3 / span 7; margin-top: var(--sc-4); }
.voice { margin: 0; padding: var(--sc-6); background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge); border: 1px solid var(--paper-line); transition: box-shadow var(--sc-d-base) var(--sc-ease-out); }
.voice p { margin: 0; color: var(--sc-ink); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .voice:hover { box-shadow: var(--sc-e3), var(--sc-edge); } }
@media (max-width: 860px) {
  .voices__far { right: -10vw; top: -6vh; font-size: 20rem; }
  .voices__grid { grid-template-columns: 1fr; gap: var(--sc-5); margin-top: var(--sc-7); }
  .voice__wrap, .voice__wrap:nth-child(n) { grid-column: 1; margin-top: 0; }
  .voice { padding: var(--sc-5); }
}
.trust { margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid var(--paper-line); }
.trust__title { margin: 0 0 var(--sc-6); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sc-7) var(--sc-7); align-items: center; }
.logos li { display: flex; align-items: center; justify-content: center; height: 4.4rem; padding-inline: 4%; }
.logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .logos li:hover img { filter: none; opacity: 1; } }
@media (max-width: 860px) { .trust { margin-top: var(--sc-8); } .logos { grid-template-columns: repeat(3, 1fr); gap: var(--sc-6) var(--sc-4); } .logos li { height: 3.2rem; } }

/* -------------------------------------------------------- 6 · process -- */
.process { background: var(--sc-canvas); display: flex; align-items: center; }
.process__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); }
.process__h { max-width: 34rem; margin-bottom: clamp(3rem, 8vh, 5rem); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6); }
.steps__line { position: absolute; left: 0; right: 0; top: 2.35rem; width: 100%; height: 2px; }
.steps__line line { stroke: var(--sc-accent); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 * (1 - clamp(0, (var(--sc-p) - 0.06) / 0.7, 1))); vector-effect: non-scaling-stroke; }
.step { position: relative; --f: clamp(0, (var(--sc-p) - 0.1 - var(--s) * 0.18) / 0.07, 1); }
.step__plate {
  width: 4.7rem; height: 4.7rem; display: grid; place-items: center; position: relative; z-index: 1;
  background: color-mix(in oklab, var(--sc-accent) calc(var(--f) * 100%), var(--sc-surface));
  color: color-mix(in oklab, var(--sc-accent-ink) calc(var(--f) * 100%), var(--sc-accent));
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.02em;
  transform: scale(calc(0.88 + 0.12 * var(--f)));
  transition: transform 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
.step__body { margin-top: var(--sc-5); max-width: 30ch; }
.step h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.step p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); text-wrap: pretty; font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .process { align-items: start; }
  .process__inner { padding-top: 4.2rem; padding-bottom: 3.4rem; }
  .process__h { font-size: var(--sc-t-xl); margin-bottom: var(--sc-5); }
  .steps { grid-template-columns: 1fr; gap: var(--sc-4); }
  .steps__line { left: 1.6rem; right: auto; top: 0; bottom: 0; width: 2px; height: 100%; }
  .steps__line { transform: rotate(0deg); }
  .step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--sc-4); align-items: start; }
  .step__plate { width: 3.2rem; height: 3.2rem; font-size: var(--sc-t-base); }
  .step__body { margin-top: 0; max-width: none; }
  .step h3 { font-size: var(--sc-t-lg); }
  .step p { font-size: var(--sc-t-xs); margin-top: var(--sc-2); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .process__inner { padding-top: 3.6rem; }
  .process__h { font-size: var(--sc-t-lg); margin-bottom: var(--sc-4); }
  .steps { gap: var(--sc-3); }
  .step p { font-size: 0.72rem; line-height: 1.45; }
  .step h3 { font-size: var(--sc-t-base); }
}

/* -------------------------------------------------------- 7 · colophon -- */
.ch--colophon { padding-block: var(--sc-8) var(--sc-7); background: var(--sc-canvas); }
.colophon__measure { max-width: 30ch; color: var(--sc-ink); }
.colophon__measure .m { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.colophon__note { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.colophon__run { margin: var(--sc-6) 0 0; max-width: 60ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.form { margin-top: var(--sc-8); padding: var(--sc-6); background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge); border: 1px solid var(--paper-line); max-width: 60rem; }
.form__bot { position: absolute; left: -9999px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-5); }
.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  border-radius: var(--sc-r-sm); background: var(--sc-canvas); color: var(--sc-ink); font-size: var(--sc-t-base);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.field input:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.field.is-error input, .field.is-error textarea { border-color: #B3261E; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.form__row { margin-top: var(--sc-5); display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.form__status { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__status.is-ok { color: var(--sc-accent); }
.form__status.is-error { color: #B3261E; }
.masthead { margin-top: var(--sc-10); padding-top: var(--sc-6); border-top: 1px solid var(--paper-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-6) var(--sc-9); align-items: start; }
.masthead__brand { max-width: 40ch; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.masthead__brand img { width: 72px; height: 72px; margin-bottom: var(--sc-3); }
.masthead__brand p { margin: var(--sc-2) 0 0; }
.masthead__brand a { color: var(--sc-ink); }
.masthead__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: var(--sc-t-sm); }
.masthead__links a { text-decoration: none; color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .masthead__links a:hover { color: var(--sc-ink); text-decoration: underline; } }
.masthead__small { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .form { padding: var(--sc-5); }
  .form__grid { grid-template-columns: 1fr; }
  .masthead { grid-template-columns: 1fr; gap: var(--sc-5); margin-top: var(--sc-8); }
}

/* Content clears the folio on wide screens. */
@media (min-width: 1100px) {
  .ch .sc-wrap, .wipe__inner, .results, .process__inner { padding-left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6)); }
  .rail__lead { margin-left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6)); }
  .title { padding-left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6)); }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .title__h .l > span, .title__lede, .title__copy .cta, .tag { transition: opacity 220ms var(--sc-ease-out); transform: none !important; }
  .index__sheet { animation: none; }
  .wipe__list--apres li::before { transform: none; opacity: 1; }
  /* Without the wipe the "avant" layer would sit under the sheet forever.
     Show both states side by side instead. */
  .wipe { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .wipe__layer { position: static; inset: auto; }
  .wipe__layer--apres { box-shadow: none; border-left: 1px solid var(--paper-line); }
  .wipe__inner { padding-right: var(--sc-gutter); }
  .wipe__layer--apres .wipe__inner { padding-left: var(--sc-gutter); }
  .wipe__list { max-width: none; }
  .wipe__caption { display: none; }
  @media (max-width: 860px) {
    .wipe { grid-template-columns: 1fr; overflow-y: auto; }
    .wipe__layer { padding-block: var(--sc-6); }
    .wipe__layer--apres { border-left: 0; border-top: 1px solid var(--paper-line); }
  }
  .steps__line line { stroke-dashoffset: 0; }
  .step { --f: 1; }
  .step__plate { transform: none; }
  .plane--far { transform: none !important; }
  .tag { translate: none !important; }
}


/* ------------------------------------------------- page Références -- */
.page-kicker { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.trust__more { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); }

.ch--sectors { padding-block: var(--sc-section); }
.sectors__head { max-width: 42rem; margin-bottom: var(--sc-9); }
.sector { margin-top: var(--sc-8); }
.sector:first-of-type { margin-top: 0; }
.sector__head { display: flex; align-items: baseline; gap: var(--sc-4); margin-bottom: var(--sc-5); }
.sector__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.sector__rule { flex: 1; height: 1px; background: var(--paper-line); }
.sector__count { flex: none; font-size: var(--sc-t-xs); letter-spacing: 0.04em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sc-4); }
.client {
  height: 7.5rem; display: flex; align-items: center; justify-content: center;
  padding: var(--sc-4) var(--sc-5); background: var(--sc-surface);
  border: 1px solid var(--paper-line); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.client img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
.client--dark { background: #14161A; border-color: #14161A; }
.client--tile { padding: var(--sc-2); }
.client--tile img { border-radius: var(--sc-r-sm); }
@media (hover: hover) and (pointer: fine) {
  .client:hover { transform: translateY(-2px); box-shadow: var(--sc-e2), var(--sc-edge); }
  .client:hover img { filter: none; opacity: 1; }
}
@media (max-width: 860px) {
  .clients { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--sc-3); }
  .client { height: 5.6rem; padding: var(--sc-3) var(--sc-4); }
  .sector { margin-top: var(--sc-7); }
  .sector__name { font-size: var(--sc-t-lg); }
}

/* ------------------------------------------------------------- no JS -- */
html:not(.js) [data-sc-cue], html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
html:not(.js) .title__lede, html:not(.js) .title__copy .cta, html:not(.js) .tag { opacity: 1; transform: none; }
html:not(.js) .work { overflow-x: auto; padding-block: var(--sc-6); }
html:not(.js) .wipe { display: grid; grid-template-columns: 1fr 1fr; }
html:not(.js) .wipe__layer { position: static; }
html:not(.js) .wipe__layer--apres { box-shadow: none; border-left: 1px solid var(--paper-line); }
html:not(.js) .wipe__caption { display: none; }
html:not(.js) .results { padding-block: var(--sc-8); }
html:not(.js) .results__intro { position: static; translate: none; grid-column: 1; }
html:not(.js) .results__pile { height: auto; display: grid; gap: var(--sc-4); }
html:not(.js) .figure { position: static; translate: none; }
html:not(.js) .steps__line line { stroke-dashoffset: 0; }
html:not(.js) .step { --f: 1; }
html:not(.js) .process { padding-block: var(--sc-8); }
html:not(.js) .mesure { display: none; }
.figure__unit--pre { margin-right: 0.04em; }

/* The note sits under the proof pile, never under the figures. */
.results__note { max-width: min(33rem, 40vw); }
@media (max-width: 860px) { .results__note { max-width: none; } }

/* ============================================================ touch devices ==
   Phones have no pointer, so the hover and pointer effects never run there.
   Each block below gives a touch visitor its own answer instead. */

/* Client logos: no hover to reveal the colour, so show it. */
@media (hover: none) {
  .logos img, .client img { filter: none; opacity: 1; }
}

/* Process on phones: a flowing section (see site.js), steps land as they enter. */
@media (max-width: 860px) {
  .ch--process.is-flow { padding-block: var(--sc-8) 7.5rem; }
  .ch--process.is-flow .process__inner { padding-block: 0; }
  .ch--process.is-flow .step { --f: 0; }
  .ch--process.is-flow .step.sc-in { --f: 1; }
  .ch--process.is-flow .step__plate { transition-delay: 180ms; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the mark's three peaks rise in turn, then separate in depth on scroll. */
  .title--touch .plane--far path { transform-box: fill-box; transform-origin: 50% 100%; animation: peak-rise 1200ms var(--sc-ease-out) both; }
  .title--touch .plane--far path:nth-child(1) { animation-delay: 150ms; translate: 0 calc(var(--hp, 0) * -120px); }
  .title--touch .plane--far path:nth-child(2) { animation-delay: 330ms; translate: calc(var(--hp, 0) * 30px) calc(var(--hp, 0) * -64px); rotate: calc(var(--hp, 0) * 5deg); }
  .title--touch .plane--far path:nth-child(3) { animation-delay: 510ms; translate: calc(var(--hp, 0) * 48px) calc(var(--hp, 0) * -22px); }
  @keyframes peak-rise { from { transform: translateY(65%) scaleY(0.55); opacity: 0; } to { transform: none; opacity: 1; } }
  .title--touch .title__far .plane--far { transform: scale(calc(1 + var(--hp, 0) * 0.14)); transform-origin: 60% 100%; }
  /* On a phone the peaks sit behind the tags, lower and warmer, so the move reads. */
  @media (max-width: 860px) {
    .title--touch .title__far { inset: auto -14% 2% auto; width: 96vw; height: 44%; }
    .title--touch .plane--far path:nth-child(1) { fill: color-mix(in oklab, var(--sc-accent) 9%, transparent); stroke: color-mix(in oklab, var(--sc-accent) 22%, transparent); }
    .title--touch .plane--far path:nth-child(2) { fill: color-mix(in oklab, var(--sc-accent) 20%, transparent); stroke: color-mix(in oklab, var(--sc-accent) 38%, transparent); }
    .title--touch .plane--far path:nth-child(3) { fill: color-mix(in oklab, var(--sc-accent) 13%, transparent); stroke: color-mix(in oklab, var(--sc-accent) 28%, transparent); }
  }
  .title--touch .title__h .l { translate: 0 calc(var(--hp, 0) * (var(--l) + 1) * -14px); }
  .title--touch .tag { translate: calc(var(--hp, 0) * (var(--k) - 1) * 38px) calc(var(--hp, 0) * var(--k) * -12px); rotate: calc(var(--hp, 0) * (var(--k) - 1) * 6deg); }

  /* Testimonials: cards dealt in from alternating sides, straightening into place. */
  .voices--touch .voice {
    clip-path: none !important;
    opacity: calc(0.3 + 0.7 * var(--t, 1));
    translate: calc((1 - var(--t, 1)) * var(--side, 1) * 44px) calc((1 - var(--t, 1)) * 30px);
    rotate: calc((1 - var(--t, 1)) * var(--side, 1) * 6deg);
    transform-origin: 50% 100%;
  }
}

/* Services: the row under the thumb lifts, takes the accent and its marker. */
@media (hover: none) {
  .ledger--touch .ledger__row { position: relative; padding-inline: var(--sc-4); border-radius: var(--sc-r-md);
    transition: background-color 360ms var(--sc-ease-out), box-shadow 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
  .ledger--touch .ledger__row::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 3px;
    background: var(--sc-accent); transform: scaleY(0); transition: transform 420ms var(--sc-ease-out); }
  .ledger--touch .ledger__row.is-focus { background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge); transform: translateY(-2px); }
  .ledger--touch .ledger__row.is-focus::before { transform: scaleY(1); }
  .ledger--touch .ledger__name { transition: color 300ms var(--sc-ease-out); }
  .ledger--touch .ledger__row.is-focus .ledger__name { color: var(--sc-accent); }
  .ledger--touch .ledger__row.is-focus .ledger__arrow { transform: translateX(4px); color: var(--sc-accent); }
}


/* Before and after share one geometry on wide screens: same marker column, same
   measure, so the sheet that slides in reads as the same text turned right. */
@media (min-width: 861px) {
  .wipe__list { max-width: min(40rem, 100%); }
  .wipe__layer--avant .wipe__list li { display: grid; grid-template-columns: 1.1em 1fr; gap: 0.5em; align-items: baseline; }
  .wipe__layer--avant .wipe__list li::before { content: "×"; font-weight: 400; color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); text-align: center; }
}

/* ---------------------------------------------------------- language -- */
/* Two round flags in one pill. A dark thumb holds the current language; it
   leans toward the other flag on hover, and slides across on click before the
   page changes, while the chosen flag turns over. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang {
  --on: 0; --nudge: 0px;
  position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--sc-r-pill); background: var(--sc-canvas);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
.lang__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4px);
  border-radius: var(--sc-r-pill); background: var(--sc-ink);
  transform: translateX(calc(var(--on) * (100% + 2px) + var(--nudge)));
  transition: transform 520ms cubic-bezier(0.3, 1.35, 0.4, 1);
}
.lang__opt {
  position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 30px; padding: 0 0.6rem 0 0.32rem; border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.05em; text-decoration: none;
  color: var(--sc-ink-soft); transition: color 320ms var(--sc-ease-out);
}
.lang__opt.is-on { color: var(--sc-canvas); cursor: default; }
.lang__flag {
  display: block; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc-ink) 18%, transparent), 0 1px 3px rgba(0, 0, 0, 0.18);
  transform-origin: 50% 50%;
}
.lang__flag svg { display: block; width: 100%; height: 100%; }
@keyframes flag-wave {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-14deg) scale(1.14); }
  60% { transform: rotate(9deg) scale(1.1); }
  100% { transform: rotate(0) scale(1.08); }
}
@keyframes flag-turn {
  0% { transform: perspective(80px) rotateY(0) scale(1.08); }
  100% { transform: perspective(80px) rotateY(360deg) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .lang:has(.lang__opt:not(.is-on):hover) { --nudge: calc((1 - 2 * var(--on)) * 7px); }
  .lang__opt:not(.is-on):hover { color: var(--sc-ink); }
  .lang__opt:not(.is-on):hover .lang__flag { animation: flag-wave 620ms var(--sc-ease-out) both; }
}
.lang.is-going { --nudge: 0px; }
.lang.is-going .lang__opt.is-target { color: var(--sc-canvas); }
.lang.is-going .lang__opt.is-on { color: var(--sc-ink-soft); }
.lang.is-going .lang__opt.is-target .lang__flag { animation: flag-turn 560ms cubic-bezier(0.5, 0, 0.2, 1) both; }
.lang__opt:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .lang__code { display: none; }
  .lang__opt { padding: 0 4px; height: 30px; width: 30px; }
  .corners__actions { gap: var(--sc-2); }
}
@media (prefers-reduced-motion: reduce) {
  .lang__thumb { transition: none; }
  .lang__flag { animation: none !important; }
}