@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/GeneralSans-400.woff2) format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/GeneralSans-500.woff2) format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/GeneralSans-600.woff2) format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/GeneralSans-700.woff2) format('woff2'); }
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../../fonts/Cormorant-italic-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body { margin: 0; } img { max-width: 100%; }
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }
.clients img.to-white { filter: brightness(0) invert(1); }
:root {
  /* Layout: full-bleed WebGL flight path under fixed chapter panels; each chapter anchors its copy to a
     different edge (left, top, bottom, right) so the arrow always owns the open side of the frame. */
  --ink: #111315;          /* fog, deepest layer */
  --char: #191B1D;         /* brand anthracite */
  --bone: #ECEEEF;         /* text */
  --mist: #A9B0B4;         /* secondary text, cool bias toward the cyan */
  --cyan: #13C9F2;         /* the one accent: the cyan of the logo */
  --cyan-hi: #5DDBF7;
  --cyan-ink: #04161C;     /* text on cyan */
  --line: rgb(236 238 239 / .16);
  --line-strong: rgb(236 238 239 / .42);
  --scrim: rgb(17 19 21 / .78);

  /* General Sans carries every headline and label; Cormorant italic is kept for the spoken voice only
     (the client's words), never mixed inside a General Sans line */
  --f-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --f-voice: "Cormorant", "Cormorant Garamond", Georgia, serif;

  --gutter: clamp(20px, 5.5vw, 88px);
  --nav-h: 68px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* z-index scale: scene 0, veil 1, panels 2, 3D tags 3, chrome 4 */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); }
body {
  background: transparent;
  color: var(--bone);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--cyan); color: var(--cyan-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- 3D layer ---------- */
/* the smoke as plain CSS: shown until the 3D layer fades in, and without WebGL. A cold light behind the archer,
   heavier banks low, darker edges, like the WebGL backdrop's first frame */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 56% 26%, rgb(120 134 144 / .30), transparent 72%),
    radial-gradient(ellipse 70% 46% at 40% 34%, rgb(58 68 76 / .55), transparent 74%),
    radial-gradient(ellipse 90% 40% at 70% 78%, rgb(40 48 54 / .45), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgb(6 7 8 / .7) 100%),
    linear-gradient(180deg, #15191c 0%, #14171a 55%, #0d0f11 100%);
}
#scene {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.6s var(--ease-out);
}
#scene.is-ready { opacity: 1; }
/* the archer as plain HTML: used when the 3D texture cannot load, or without WebGL */
.hero-art {
  display: none; position: fixed; z-index: 0; pointer-events: none;
  right: 4vw; bottom: 0; height: min(92vh, 900px); width: auto; max-width: 70vw;
  object-fit: contain; object-position: right bottom; filter: brightness(.8);
  -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent);
}
html.archer-dom .hero-art, html.no-webgl .hero-art, html:not(.js) .hero-art { display: block; }
html:not(.js) .hero-art { position: absolute; top: 0; bottom: auto; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.veil::before, .veil::after {
  content: ""; position: absolute; inset: 0; transition: opacity 1s var(--ease-out);
}
.veil::before { background: linear-gradient(90deg, var(--scrim) 0%, rgb(17 19 21 / .35) 38%, transparent 62%); }
.veil::after { background: linear-gradient(270deg, var(--scrim) 0%, rgb(17 19 21 / .35) 38%, transparent 62%); opacity: 0; }
.veil[data-side="right"]::before { opacity: 0; }
.veil[data-side="right"]::after { opacity: 1; }

/* ---------- chrome ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 4;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font: 700 19px/1 var(--f-display); letter-spacing: -.01em;
}
.brand img { height: 36px; width: auto; }
.skip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgb(17 19 21 / .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 14px/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: border-color .3s, transform .2s var(--ease-out);
}
.skip:hover { border-color: var(--cyan); }
.skip:active { transform: translateY(1px); }

.rail {
  --p: 0;
  position: fixed; z-index: 4;
  right: max(22px, env(safe-area-inset-right, 0px)); top: 50%;
  width: 24px; height: min(44vh, 360px); transform: translateY(-50%);
}
.rail-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.rail-fill { position: absolute; inset: 0; background: var(--cyan); transform-origin: 50% 0; transform: scaleY(var(--p)); }
.rail-tip {
  position: absolute; left: 50%; top: calc(var(--p) * 100%);
  width: 0; height: 0; transform: translate(-50%, -2px);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--cyan);
}
.rail ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail li { position: absolute; left: 0; top: calc(var(--i) / 7 * 100%); transform: translateY(-50%); }
.rail button {
  all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px;
}
.rail button::before {
  content: ""; width: 9px; height: 1px; background: var(--line-strong);
  transition: width .35s var(--ease-out), background-color .35s;
}
.rail button:hover::before { width: 15px; background: var(--bone); }
.rail button.is-on::before { width: 17px; background: var(--cyan); }
.rail button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 0; }

/* ---------- story ---------- */
.ch { position: relative; }
html.js .ch { height: calc(var(--h) * 1vh); height: calc(var(--h) * 1svh); }
.panel {
  min-height: 100vh; min-height: 100svh;
  display: grid;
  padding-block: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)) calc(56px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(calc(var(--gutter) + 28px), env(safe-area-inset-right, 0px));
}
html.js .panel { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
html.js .inner { opacity: 0; }
html.js #ch-hero .inner, html.js .panel-val .inner, html.js .panel-oath .inner { opacity: 1; }
/* the question waits for the first scroll; hidden before the script runs so it never flashes */
@media (prefers-reduced-motion: no-preference) { html.js .mega .line + .line { visibility: hidden; } }
html.js :is(.value, .oath, .oath-head) { opacity: 0; }
html.js .panel.is-active :is(a, button) { pointer-events: auto; }
.inner { min-width: 0; will-change: transform, opacity; }

h1, h2, p, blockquote, ul, figure { margin: 0; }
h1, h2 { text-wrap: balance; }

/* hero: the two-line hook at mid-height, the disciplines centred at the foot of the screen */
.panel-hero { align-content: stretch; }
.panel-hero .inner { display: grid; grid-template-rows: 1fr auto; gap: 24px; }
.mega {
  align-self: center; margin-left: -.04em;
  /* titles echo the logo's wordmark: regular weight, capitals, slightly open spacing */
  font: 400 clamp(30px, 5.4vw, 100px)/1.02 var(--f-display); letter-spacing: -.005em; text-transform: uppercase;
}
.mega .line, .mega .part { display: block; }
/* each word masks its own letters as they rise, so lines wrapped on phones reveal cleanly; the padding keeps the Ô's accent */
.mega .w { display: inline-block; vertical-align: top; overflow: hidden; padding: .16em .03em .08em; margin: -.16em -.03em -.08em; }
.mega .l { display: inline-block; }
.tagline {
  /* the panel's right padding is 28px wider to clear the rail; the margin puts the line back on the viewport's centre */
  justify-self: center; margin-left: 28px; text-align: center; text-wrap: balance;
  font: 400 11px/1.8 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--bone);
}
.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--mist); max-width: 34ch; text-wrap: pretty; }

/* serment: five vows shown one at a time, each number set large like the reviews' figures */
.panel-oath { align-content: center; }
.oath-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(20px, 3.6vh, 36px); }
.oath-kicker { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
/* one tick per vow, lit as the vows go by */
.oath-ticks { display: flex; gap: 6px; }
.oath-ticks i { width: 18px; height: 2px; background: var(--cyan); opacity: .25; }
.oaths { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.oath {
  grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start;
  column-gap: clamp(20px, 2.4vw, 40px); row-gap: 16px;
}
/* the same width for every number, so the titles never shift from one vow to the next */
.oath-num {
  grid-row: 1 / 3; min-width: 1.3em;
  font: 400 clamp(64px, 8vw, 128px)/.8 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.oath-num b { font-weight: 400; color: var(--cyan); }
/* each title breaks where its <br> says; a line too long for a narrow screen wraps on its own */
.oath h3 {
  margin: 0; text-wrap: balance;
  font: 400 clamp(44px, calc(2.5vw + 20px), 60px)/1.04 var(--f-display); letter-spacing: .015em; text-transform: uppercase;
}
/* as wide as the first vow's sentence, so it holds on one line from about 1200px up; the others wrap at that width */
.oath p { color: var(--mist); max-width: min(36.5em, 50vw); font-size: clamp(16px, 1.2vw, 18px); text-wrap: pretty; }
/* the underline and the crossed-out jargon, drawn in the accent */
.oath :is(u, s) { color: var(--bone); text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
.oath u { text-underline-offset: .22em; }
/* each crossed-out term stays whole on its line */
.oath s { white-space: nowrap; }

/* arc */
.panel-arc { align-content: start; }
/* a little lower than the panel's top, so the title breathes under the logo */
.panel-arc .h-xl { margin-top: clamp(20px, 5.5vh, 64px); }
.h-xl {
  font: 400 clamp(30px, 4.4vw, 70px)/1.04 var(--f-display); letter-spacing: .015em; text-transform: uppercase;
  max-width: 13ch;
}
.arc-list { display: none; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }

/* carquois */
.panel-carq { align-content: end; }
.carq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
.hud a { display: grid; justify-items: end; gap: 8px; text-align: right; text-decoration: none; }
.hud-cat { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.hud-title {
  display: flex; align-items: baseline; gap: 10px;
  font: 400 clamp(22px, 2.2vw, 34px)/1.05 var(--f-display); letter-spacing: -.005em;
}
.hud-go { font-family: var(--f-body); font-weight: 400; color: var(--cyan); transition: transform .3s var(--ease-out); }
.hud a:hover .hud-go { transform: translate(3px, -3px); }
.alt { display: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 28px; padding: 0; list-style: none; }
.alt a { display: grid; gap: 8px; text-decoration: none; font-size: 14px; color: var(--mist); }
.alt img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; max-width: 100%; }

/* valeurs */
.panel-val { align-content: center; justify-items: end; }
.stack { display: grid; width: min(100%, 560px); }
.value { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; }
.value h2 {
  /* wide enough for "un savoir-faire" on its first line; "la qualité / avant / la quantité" breaks where it says */
  font: 400 clamp(28px, 3.7vw, 58px)/1.06 var(--f-display); letter-spacing: .015em; max-width: 16ch; text-transform: uppercase;
}
.value p { color: var(--mist); max-width: 36ch; font-size: clamp(16px, 1.2vw, 18px); }

/* preuves */
.panel-proof { align-content: center; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: clamp(28px, 6vw, 104px); }
.num {
  display: block; font: 400 clamp(64px, 10vw, 156px)/.85 var(--f-display);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.cap { display: block; margin-top: 14px; color: var(--mist); white-space: nowrap; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; }
/* keeps a compound word or a short word with its neighbour on the same line */
.nw { white-space: nowrap; }
/* a full-length review: smaller and wider than a one-liner, so the figures and the logos stay on screen */
.quote { margin-top: clamp(28px, 5vh, 56px); max-width: 62ch; }
.quote blockquote { font: italic 500 clamp(19px, 1.45vw, 24px)/1.35 var(--f-voice); padding-bottom: .1em; text-wrap: pretty; }
.quote figcaption { margin-top: 10px; font-size: 14px; color: var(--mist); }
/* a review too long for the screen stops with an ellipsis after the lines that fit (the script sets them) */
html.js .panel-proof.is-cut .quote blockquote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); line-clamp: var(--lines); overflow: hidden;
}
/* the reviews, one at a time: all in the same grid cell, so the chapter keeps the height of the longest and the
   logos below never move. The arrows sit above, where they stay put from one review to the next */
.reviews { max-width: 62ch; }
html.js .rv-stage { display: grid; touch-action: pan-y; }
html.js .rv-stage .quote {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(18px);
  transition: opacity .35s, transform .6s var(--ease-out), visibility 0s .35s;
}
html.js .rv-stage .quote.is-current {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s .12s, transform .8s .12s var(--ease-out), visibility 0s;
}
html.js .panel.is-active .reviews { pointer-events: auto; }
html.js .reviews.is-many .quote { margin-top: 12px; }
.rv-stars { margin-right: 6px; color: var(--cyan); font-size: 12px; letter-spacing: .14em; }
.rv-stars .off { opacity: .3; }
.rv-nav { display: flex; align-items: center; gap: 8px; margin-top: clamp(28px, 5vh, 56px); }
html:not(.js) .rv-nav { display: none; }
.rv-btn {
  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(17 19 21 / .4);
  font: 500 15px/1 var(--f-body); color: var(--bone);
  transition: border-color .3s, transform .2s var(--ease-out);
}
.rv-btn:hover { border-color: var(--cyan); }
.rv-btn:active { transform: translateY(1px); }
.rv-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.rv-count { min-width: 3.6em; text-align: center; font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; }
.rv-count b { font-weight: 500; color: var(--bone); }
/* how long the review stays: fills while they turn by themselves, gone once the visitor turns them */
.rv-bar { position: relative; width: 72px; height: 1px; margin-left: 8px; background: var(--line-strong); }
.rv-bar::after { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.reviews.is-manual .rv-bar, html:not(.js) .rv-bar { display: none; }
.clients { margin-top: clamp(28px, 5vh, 52px); }
.label { font: 400 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
/* rows are spaced by the logos' margins rather than a row gap, so the empty line that splits them takes no height */
.clients ul { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(20px, 2.4vw, 44px); margin: -8px 0; padding: 0; list-style: none; }
.clients li { margin: 8px 0; }
/* heights balance each logo's optical weight (wide wordmarks shorter, compact marks taller);
   below 1440px wide they shrink with the screen */
.clients img { height: calc(var(--lh) * clamp(.75px, .07vw, 1px)); width: auto; max-width: 100%; opacity: .78; }
/* from tablets up, seven logos or more make two rows, the first as long or one longer: five, then five for ten.
   An empty full-width line, placed with order, splits them */
@media (min-width: 768px) {
  .clients ul::after { content: ""; flex-basis: 100%; order: 1; }
  .clients li:first-child:nth-last-child(n+7):nth-last-child(-n+8) ~ li:nth-child(n+5),
  .clients li:first-child:nth-last-child(n+9):nth-last-child(-n+10) ~ li:nth-child(n+6),
  .clients li:first-child:nth-last-child(n+11) ~ li:nth-child(n+7) { order: 2; }
}
/* laptop screens (920px tall or less): the second row of logos and the longest reviews, with the arrows above them,
   would push the figures under the menu, so the chapter tightens with the height */
@media (min-width: 768px) and (max-height: 920px) {
  .num { font-size: clamp(56px, min(10vw, 14vh), 156px); }
  .cap { margin-top: 10px; }
  .quote, .rv-nav { margin-top: clamp(14px, 3vh, 56px); }
  .clients { margin-top: clamp(14px, 3vh, 52px); }
  .quote blockquote { font-size: clamp(17px, min(1.45vw, 2.6vh), 24px); line-height: 1.3; }
  .clients img { height: calc(var(--lh) * min(clamp(.75px, .07vw, 1px), .1vh)); }
}

/* cible */
.panel-cible { align-content: center; }
.panel-cible .inner { display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: start; }
.lede-final { max-width: 46ch; }
.h-final {
  font: 400 clamp(36px, 6vw, 96px)/1.02 var(--f-display); letter-spacing: .01em; max-width: 12ch; text-transform: uppercase;
}
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px;
  font: 600 16px/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease-out), background-color .25s, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--cyan); color: var(--cyan-ink); }
.btn-primary:hover { background: var(--cyan-hi); }
.btn-ghost { border: 1px solid var(--line-strong); background: rgb(17 19 21 / .45); color: var(--bone); }
.btn-ghost:hover { border-color: var(--bone); }
/* the way into the site: the look of « Passer l'intro », at the size of the buttons beside it */
.btn-enter {
  border: 1px solid var(--line-strong); background: rgb(17 19 21 / .4); color: var(--bone);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-enter:hover { border-color: var(--cyan); }
.btn .arr { transition: transform .3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.sign { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--mist); font-size: 15px; }
.sign img { width: clamp(150px, 15vw, 220px); height: auto; opacity: .9; }
.mail { user-select: all; color: var(--bone); }

/* 3D-anchored discipline tags */
#tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; list-style: none; margin: 0; padding: 0; }
#tags li { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
#tags li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 1px; background: var(--line-strong);
}
#tags a, .arc-list a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgb(17 19 21 / .58);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 500 14px/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: border-color .3s, background-color .3s;
}
#tags a { position: absolute; left: 16px; top: 0; transform: translateY(-50%); }
#tags li.flip::before { left: auto; right: 0; }
#tags li.flip a { left: auto; right: 16px; }
#tags li.on a { pointer-events: auto; }
#tags a:hover, .arc-list a:hover { border-color: var(--cyan); background: rgb(17 19 21 / .8); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fallbacks: no JS, no WebGL ---------- */
html:not(.js) #scene, html:not(.js) .rail, html:not(.js) #tags, html:not(.js) .hud,
.no-webgl #scene, .no-webgl #tags, .no-webgl .hud { display: none; }
html:not(.js) .arc-list, .no-webgl .arc-list { display: flex; }
html:not(.js) .alt, .no-webgl .alt { display: grid; }
html:not(.js) .value { position: relative; }
html:not(.js) :is(.stack, .oaths) { gap: 48px; }
html:not(.js) :is(.value, .oath) { grid-area: auto; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  :root { --nav-h: 60px; }
  .brand img { height: 26px; }
  .veil::before, .veil::after { display: none; }
  .veil { background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 28%, rgb(17 19 21 / .45) 50%, transparent 68%); }
  .panel { padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mega { align-self: start; }
  .tagline { margin-left: 0; }
  .hero-art { right: 50%; bottom: auto; top: 14svh; height: 66svh; max-width: 120vw; transform: translateX(50%); object-position: center top; }
  .panel-oath, .panel-val, .panel-proof, .panel-cible { align-content: end; }
  .oath-head { gap: 12px; margin-bottom: 18px; }
  .oath-ticks { gap: 4px; }
  .oath-ticks i { width: 12px; }
  .oath { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .oath-num { grid-row: auto; font-size: 52px; }
  .oath h3 { max-width: none; font-size: 43px; }
  .oath p { max-width: none; }
  .panel-val { justify-items: start; }
  .carq-row { grid-template-columns: minmax(0, 1fr); }
  .hud a { justify-items: start; text-align: left; }
  .figures { gap: 28px; }
  /* two figures side by side leave no room for a one-line caption on a phone */
  .cap { white-space: normal; max-width: 17ch; }
  .clients img { height: calc(var(--lh) * min(.8px, .2vw)); }
  .clients ul { max-width: 400px; } /* three rows: four, three, three */
  .quote, .rv-nav { margin-top: 22px; }
  .clients { margin-top: 22px; }
  .btn { height: 50px; padding: 0 22px; }
  .rail {
    top: auto; right: max(var(--gutter), env(safe-area-inset-right, 0px));
    left: max(var(--gutter), env(safe-area-inset-left, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: auto; height: 24px; transform: none;
  }
  .rail-track { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .rail-fill { transform-origin: 0 50%; transform: scaleX(var(--p)); }
  .rail-tip {
    left: calc(var(--p) * 100%); top: 50%; transform: translate(-2px, -50%);
    border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--cyan);
  }
  .rail li { top: 0; left: calc(var(--i) / 7 * 100%); transform: translateX(-50%); }
  .rail button::before { width: 1px; height: 9px; transition: height .35s var(--ease-out), background-color .35s; }
  .rail button:hover::before { width: 1px; height: 13px; }
  .rail button.is-on::before { width: 1px; height: 15px; }
  #tags a { height: 32px; padding: 0 12px; font-size: 13px; }
}
/* phones up to 820px tall (most phones once the browser bars are shown): the full review and three rows of logos
   would push the reviews panel under the menu, so the panel tightens */
@media (max-width: 767px) and (max-height: 820px) {
  /* the oath's titles a size down too: their set line breaks would otherwise lift the vows into the arrow */
  .oath h3 { font-size: 38px; }
  .num { font-size: 48px; }
  .cap { margin-top: 8px; font-size: 14px; }
  .quote, .clients, .rv-nav { margin-top: 16px; }
  .quote blockquote { font-size: 17px; line-height: 1.3; }
  .quote figcaption { margin-top: 6px; font-size: 13px; }
  .clients .label { margin-bottom: 8px; }
  .clients img { height: calc(var(--lh) * .65px); }
  /* three rows of logos: four, three, three */
  .clients ul { max-width: 320px; column-gap: 20px; margin: -6px 0; }
  .clients li { margin: 6px 0; }
}
/* phones up to 700px tall: the oath's titles a size down, so the vows stay under the arrow */
@media (max-width: 767px) and (max-height: 700px) {
  .oath h3 { font-size: 34px; }
  .oath-num { font-size: 44px; }
}
/* the shortest phones (640–680px): one more notch */
@media (max-width: 767px) and (max-height: 680px) {
  .num { font-size: 42px; }
  .quote, .clients, .rv-nav { margin-top: 12px; }
  .quote blockquote { font-size: 16px; line-height: 1.28; }
  .clients img { height: calc(var(--lh) * .56px); }
  .clients ul { max-width: 280px; column-gap: 18px; margin: -5px 0; }
  .clients li { margin: 5px 0; }
}

/* ---------- text editor: only for the artifact's editors, inside the claude.ai viewer ---------- */
/* until the saved texts arrive (1.5s at most), the hook waits rather than show the shipped words first */
html.texts-pending :is(.mega, .tagline) { visibility: hidden; }
.edit-toggle {
  all: unset; box-sizing: border-box; margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(17 19 21 / .4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 14px/1 var(--f-body); color: var(--bone); white-space: nowrap; transition: border-color .3s, color .3s;
}
.edit-toggle:hover, .edit-toggle[aria-pressed="true"] { border-color: var(--cyan); }
.edit-toggle[aria-pressed="true"] { color: var(--cyan); }
.edit-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
html.editing .is-editable { pointer-events: auto; cursor: text; }
.is-editable.edit-hover { outline: 1px dashed var(--cyan); outline-offset: 8px; }
.is-editable.edit-current { outline: 1px solid var(--cyan); outline-offset: 8px; }

.editor {
  --warn: #FF9A8A;
  position: fixed; z-index: 6; top: 0; bottom: 0; right: 0; width: min(420px, 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--char); color: var(--bone); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgb(0 0 0 / .45);
  font: 400 14px/1.45 var(--f-body);
  transform: translateX(100%); visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s .35s;
}
.editor[data-side="left"] { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
.editor.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease-out); }
.editor-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px; border-bottom: 1px solid var(--line);
}
.editor-title { margin: 0 0 6px; font: 600 15px/1.2 var(--f-body); }
.editor-help { margin: 0; color: var(--mist); font-size: 13px; text-wrap: pretty; }
.editor-close {
  all: unset; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border-radius: 999px; font-size: 22px; line-height: 1; color: var(--mist);
}
.editor-close:hover { color: var(--bone); background: rgb(236 238 239 / .08); }
.editor-close:focus-visible { outline: 2px solid var(--cyan); }
.editor-body { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; }
.editor-group { border-bottom: 1px solid var(--line); }
.editor-group summary {
  padding: 14px 0; cursor: pointer; list-style-position: inside;
  font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}
.editor-field { display: grid; gap: 6px; margin-bottom: 14px; }
.editor-field label { font-size: 12px; color: var(--mist); }
.editor-field :is(input, textarea) {
  box-sizing: border-box; width: 100%; margin: 0; padding: 9px 11px;
  background: rgb(236 238 239 / .05); color: var(--bone); border: 1px solid var(--line-strong); border-radius: 8px;
  font: 400 15px/1.4 var(--f-body); resize: none;
}
.editor-field textarea { min-height: 4.6em; }
.editor-field :is(input, textarea):focus { outline: none; border-color: var(--cyan); background: rgb(236 238 239 / .08); }
.editor-field.is-invalid :is(input, textarea) { border-color: var(--warn); }
.editor-note { font-size: 12px; color: var(--mist); }
.editor-field.is-invalid .editor-note { color: var(--warn); }
.editor-foot {
  display: grid; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.editor-status { margin: 0; min-height: 1.45em; font-size: 13px; color: var(--mist); }
.editor-status.is-dirty { color: var(--bone); }
.editor-confirm { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; }
.editor-confirm[hidden] { display: none; }
.editor-confirm p { margin: 0; font-size: 13px; }
.editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.editor-btn {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--bone);
}
.editor-btn:hover { border-color: var(--bone); }
.editor-btn.is-primary { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); }
.editor-btn.is-primary:hover { background: var(--cyan-hi); }
.editor-btn:focus-visible, .editor-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.editor-link {
  all: unset; margin-left: auto; cursor: pointer; font-size: 13px; color: var(--mist);
  text-decoration: underline; text-underline-offset: 3px;
}
.editor-link:hover { color: var(--bone); }
@media (max-width: 767px) {
  /* phones: a sheet from the top, so the texts at the foot of the screen stay in view */
  .edit-toggle span { display: none; }
  .edit-toggle { width: 40px; padding: 0; justify-content: center; }
  .editor, .editor[data-side="left"] {
    left: 0; right: 0; bottom: auto; width: 100%; height: 56svh;
    border: 0; border-bottom: 1px solid var(--line); box-shadow: 0 24px 60px rgb(0 0 0 / .5);
    transform: translateY(-100%);
  }
  .editor.is-open, .editor[data-side="left"].is-open { transform: none; }
  .editor-help { display: none; }
}
@media (prefers-reduced-motion: reduce) { .editor, .editor.is-open { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  #scene, .veil::before, .veil::after { transition: none; }
  .btn, .skip, .hud-go, .btn .arr { transition: none; }
  html.js .rv-stage .quote, html.js .rv-stage .quote.is-current, .rv-btn { transition: none; }
}