/* Jenko — home v3 « Une journée à l'atelier ». Builds on site.css tokens (paper, graphite, ink, jaune, Archivo). */

html { background: var(--graphite); }
body { background: var(--paper); }
[id] { scroll-margin-top: 0; }

/* ——— Top bar: logo left, then the sections (laptop and up), RU / FR, the devis button, Menu (below laptop width) ———
   Owner, 2026-09-24: on a laptop the menu is not folded away, and « Demander un devis » is a real yellow button. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin) 18px;
  color: var(--on-photo); pointer-events: none;
  transition: color 300ms ease, transform var(--dur-m) var(--ease-out);
}
.top > * { pointer-events: auto; }
.top.is-light { color: var(--ink); }
.top.is-hidden { transform: translateY(-110%); }
.top.is-hidden:focus-within { transform: none; }
.top__brand { display: inline-flex; flex: none; min-height: 44px; align-items: center; color: inherit; }
.top__brand svg { width: 124px; height: auto; aspect-ratio: 891 / 108; }
.top__right { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.top__nav { display: none; }
.top__nav a, .top__menu {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: inherit; font-size: var(--step--1); font-weight: 560; letter-spacing: 0.01em;
  color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.top__nav a { text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color var(--dur-m) var(--ease-out); }
.top__nav a:hover { text-decoration-color: currentColor; }
/* over footage the light type keeps a soft shadow, like the rail */
.top:not(.is-light):not(.is-band) :is(.top__nav, .lang, .top__menu) { text-shadow: 0 1px 6px rgb(var(--shade) / 0.5); }
.top__devis { flex: none; white-space: nowrap; } /* the one .btn, same height as every other button */
.top__devis-short { display: none; }
/* Language switch: « RU / FR », label type, active language full tone, the other soft. No yellow. */
.lang { display: inline-flex; align-items: center; font-size: var(--step--1); font-weight: 560; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; color: inherit; text-decoration: none; opacity: 0.62; transition: opacity var(--dur-m) var(--ease-out); }
.lang a:hover, .lang a[aria-current] { opacity: 1; }
.lang a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lang__sep { opacity: 0.4; }
.top__bars { width: 26px; height: 10px; border-block: 1.5px solid currentColor; transition: transform var(--dur-m) var(--ease-out); }
.top__menu:hover .top__bars { transform: scaleX(0.8); }
/* Laptop and up (the rail's breakpoint): the sections sit in the bar, the full-screen menu stays for tablets and phones. */
@media (min-width: 1101px) {
  .top__nav { display: flex; align-items: center; gap: clamp(20px, 2.1vw, 36px); margin-left: auto; margin-right: clamp(28px, 3vw, 48px); }
  .top__right { gap: clamp(20px, 2.1vw, 36px); }
  .top__menu { display: none; }
}
@media (max-width: 379px) { .top .lang { display: none; } }
.menu .lang a:first-child { justify-content: flex-start; min-width: 0; padding-right: 8px; }
@media (max-width: 600px) {
  .top__devis-long { display: none; }
  .top__devis-short { display: inline; }
  .top__devis { padding: 0 10px; }
  .top__right { gap: 12px; }
  .top__brand svg { width: 100px; }
}

/* ——— Full-screen menu ——— */
.menu {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto;
  column-gap: var(--gutter);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin) calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--graphite); color: var(--on-graphite);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 900ms var(--ease-out), visibility 0s linear 900ms;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 900ms var(--ease-out); }
.menu__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.menu__brand { width: 124px; height: auto; aspect-ratio: 891 / 108; color: var(--on-graphite); }
.menu__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; color: inherit; font: inherit; font-size: var(--step--1); font-weight: 560; cursor: pointer; }
.menu__close svg { width: 20px; height: 20px; }
.menu__nav { align-self: center; display: grid; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 18px;
  font-stretch: 70%; font-variation-settings: "wdth" var(--w-title); font-weight: 480;
  font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.015em;
  color: rgb(233 234 230 / 0.5); text-decoration: none; padding-block: 2px;
  transition: color 250ms ease, transform var(--dur-m) var(--ease-out);
}
.menu__nav a:hover, .menu__nav a:focus-visible { color: var(--on-photo); transform: translateX(12px); }
.menu__peek { grid-column: 2; grid-row: 2; align-self: center; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite-2); max-height: 70svh; }
.menu__peek img { width: 100%; height: 100%; object-fit: cover; transition: opacity 350ms ease, transform 1200ms var(--ease-out); }
.menu__peek img.is-swap { opacity: 0; transform: scale(1.05); }
.menu__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: end; border-top: 1px solid rgb(233 234 230 / 0.18); padding-top: 20px; font-size: var(--step--1); color: var(--on-graphite-2); }
.menu__foot a:not(.btn) { color: var(--on-graphite); }
.menu__foot .btn { margin-left: auto; }
@media (max-width: 900px) {
  .menu { grid-template-columns: 1fr; }
  .menu__peek { display: none; }
  .menu__foot .btn { margin-left: 0; }
}

/* ——— Chapter rail (ERA counter) ——— */
.rail {
  position: fixed; left: calc(var(--margin) - 4px); top: 50%; z-index: 40; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 12px; color: var(--on-photo); pointer-events: none;
  transition: color 300ms ease, opacity 400ms ease;
}
.rail.is-light { color: var(--ink); }
.rail__n { font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.rail__line { width: 1px; height: 120px; background: currentColor; opacity: 0.3; position: relative; }
.rail__fill { position: absolute; inset: 0 0 auto 0; height: 0; background: currentColor; }
.rail__name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; }
html.is-intro .rail, html.is-intro .top { opacity: 0; }
@media (max-width: 1100px) { .rail { display: none; } }

/* ——— 1.0 Opening: the drone arrives ——— */
.opening { position: relative; height: 100svh; min-height: 600px; color: var(--on-photo); background: var(--graphite); overflow: hidden; }
.opening__media { position: absolute; inset: 0; }
.opening__media video { width: 100%; height: 100%; object-fit: cover; } /* the film and its posters carry the owner's grade (2026-09-24): brightness 0.78, saturation 0.8, baked into the files */
.opening__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--shade) / 0.72), rgb(var(--shade) / 0.18) 42%, rgb(var(--shade) / 0) 62%), linear-gradient(to bottom, rgb(var(--shade) / 0.35), rgb(var(--shade) / 0) 16%); transition: opacity 800ms ease; }
.opening__content { position: absolute; inset: auto var(--margin) 0 var(--margin); padding-bottom: clamp(20px, 3vw, 40px); display: grid; gap: clamp(20px, 2.6vw, 40px); }
@media (min-width: 1101px) { .opening__content { left: calc(var(--margin) + 56px); } }
.opening__title { font-size: var(--step-6); line-height: 0.88; letter-spacing: -0.022em; font-weight: 470; max-width: 16ch; color: var(--on-photo); }
.opening__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: 14px var(--gutter); align-items: end; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--on-photo) 30%, transparent); font-size: var(--step--1); }
.opening__lead { font-size: var(--step-0); line-height: 1.45; max-width: 46ch; color: var(--on-photo); }
.opening__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: color-mix(in srgb, var(--on-photo) 88%, transparent); }
/* owner 2026-09-24: the workshop phone sits in the status line, visible without scrolling */
.opening__tel { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--on-photo); text-decoration: none; white-space: nowrap; }
.opening__tel::before { content: "·"; margin-right: 10px; color: color-mix(in srgb, var(--on-photo) 88%, transparent); }
.opening__tel:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .opening__tel { flex-basis: 100%; padding-left: 18px; } .opening__tel::before { display: none; } }
.opening__pulse { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--on-photo) 55%, transparent); flex: none; }
.opening__status.is-open .opening__pulse { background: var(--on-photo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--on-photo) 25%, transparent); }
.opening__scroll { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-photo); text-decoration: none; justify-self: end; }
.opening__scroll svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .opening__scroll svg { animation: nudge 2.4s var(--ease-out) infinite; } }
@media (max-width: 760px) { .opening__foot { grid-template-columns: 1fr auto; } .opening__lead { grid-column: 1 / -1; } }
/* Below 1100px the rail number sits bottom right: keep the scroll cue clear of it. */
@media (max-width: 1100px) { .opening__scroll { margin-right: 28px; } }

html.is-intro .opening { z-index: 71; background: transparent; }
html.is-intro .opening__shade, html.is-intro .opening__content { opacity: 0; }
html.is-intro .opening__media { position: fixed; clip-path: inset(50%); }

/* ——— 2.0 Scene: one screen; the workshop pass plays on its own while in view and the four facts follow its quarters.
   The bar under the facts shows where the film is, jumps to a fact and pauses (owner, 2026-09-24: the 420svh scroll
   scrub read as a freeze and took too long to get through). ——— */
.scene { position: relative; height: 100svh; min-height: 600px; background: var(--graphite); color: var(--on-photo); overflow: hidden; }
.scene__stage { position: absolute; inset: 0; }
.scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--shade) / 0.8), rgb(var(--shade) / 0.24) 52%, rgb(var(--shade) / 0.1)); }
.scene__body { position: absolute; inset: auto var(--margin) clamp(20px, 3vw, 40px) var(--margin); display: grid; gap: clamp(28px, 3.4vw, 52px); }
@media (min-width: 1101px) { .scene__body { left: calc(var(--margin) + 56px); } }
.scene__facts { margin: 0; padding: 0; list-style: none; display: grid; }
.scene__fact { grid-area: 1 / 1; display: grid; gap: 16px; align-content: end; opacity: 0; transform: translateY(40px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.scene__fact.is-on { opacity: 1; transform: none; }
/* the facts waiting their turn sit 40px lower, over the bar: they must not catch its clicks */
.scene__fact:not(.is-on) { pointer-events: none; }
.scene__big { font-stretch: 70%; font-variation-settings: "wdth" var(--w-title); font-weight: 460; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; max-width: 12ch; margin: 0; }
.scene__small { max-width: 44ch; color: color-mix(in srgb, var(--on-photo) 88%, transparent); font-size: var(--step-1); line-height: 1.4; }
/* the bar: four segments that fill as the film runs (the running one in yellow), each labelled; pause at the end of the line */
.scene__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; column-gap: clamp(10px, 1.6vw, 28px); align-items: start; }
.scene__seg {
  display: grid; gap: 12px; align-content: start; min-height: 44px; padding: 0 0 8px;
  background: none; border: 0; border-radius: 0; color: color-mix(in srgb, var(--on-photo) 72%, transparent);
  font: inherit; font-size: var(--step--1); font-weight: 560; letter-spacing: 0.01em; text-align: left; cursor: pointer;
  transition: color 300ms ease;
}
.scene__seg:hover, .scene__seg.is-on { color: var(--on-photo); }
.scene__track { display: block; height: 2px; background: color-mix(in srgb, var(--on-photo) 30%, transparent); overflow: hidden; }
.scene__fill { display: block; height: 100%; background: var(--on-photo); transform: scaleX(0); transform-origin: left; }
.scene__seg.is-done .scene__fill { transform: scaleX(1); }
.scene__seg.is-on .scene__fill { background: var(--jaune); }
.scene__seg:hover .scene__track { background: color-mix(in srgb, var(--on-photo) 55%, transparent); }
.scene__play { width: 44px; height: 44px; margin-top: -21px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 0; color: var(--on-photo); cursor: pointer; }
.scene__play svg { width: 22px; height: 22px; transition: transform var(--dur-m) var(--ease-out); }
.scene__play:hover svg { transform: scale(1.12); }
/* below 1100px the rail number sits bottom right: keep the pause button clear of it */
@media (max-width: 1100px) { .scene__nav { margin-right: 28px; } }
/* without motion: no film to follow — the four facts stand stacked over the still, and the bar is not needed */
html:not(.motion) .scene { height: auto; min-height: 0; }
html:not(.motion) .scene__stage { position: relative; min-height: 100svh; display: grid; align-items: end; }
html:not(.motion) .scene__body { position: relative; inset: auto; padding: 30vh var(--margin) 48px; }
@media (min-width: 1101px) { html:not(.motion) .scene__body { padding-left: calc(var(--margin) + 56px); } }
html:not(.motion) .scene__facts { gap: 48px; }
html:not(.motion) .scene__fact { grid-area: auto; opacity: 1; transform: none; }
html:not(.motion) .scene__nav { display: none; }

/* ——— Annexe ——— */
.annexe { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; background: var(--paper); }
.annexe__media { min-height: 70svh; background: var(--stone); }
.annexe__media video { width: 100%; height: 100%; object-fit: cover; }
.annexe__text { display: grid; align-content: center; gap: 28px; padding: clamp(48px, 7vw, 120px) var(--margin) clamp(48px, 7vw, 120px) clamp(28px, 4vw, 72px); }
.annexe__text h2 { font-size: var(--step-3); }
@media (max-width: 900px) { .annexe { grid-template-columns: 1fr; } .annexe__media { min-height: 0; aspect-ratio: 16 / 10; } }

/* scroll-filled paragraphs (Driessen) */
.fill { font-size: var(--step-1); line-height: 1.42; max-width: 40ch; color: var(--ink); }
.fill--big { font-stretch: 86%; font-variation-settings: "wdth" var(--w-fill); font-size: var(--step-fill); line-height: 1.15; letter-spacing: -0.01em; max-width: 30ch; padding-inline: var(--margin); margin: clamp(40px, 5vw, 72px) 0 0; }
@media (min-width: 1101px) { .fill--big { padding-left: calc(var(--margin) + 56px); } }
.fill .fw { color: var(--fill-rest); transition: color 200ms linear; }
.fill .fw.is-on { color: var(--ink); }

/* chapter heads */
.chap-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px var(--gutter); align-items: end; padding: var(--section) var(--margin) 0; }
@media (min-width: 1101px) { .chap-head { padding-left: calc(var(--margin) + 56px); } }
.chap-head h2 { grid-column: 1; font-size: var(--step-3); }
.chap-head__p { grid-column: 2; color: var(--ink-2); }
@media (max-width: 900px) { .chap-head { grid-template-columns: 1fr; } .chap-head__p { grid-column: 1; } }

/* ——— 3.0 Anatomy with zoom and macro ——— */
.anatomy { padding-top: 0; background: var(--paper); position: relative; }
.anatomy__plate { margin-top: clamp(40px, 5vw, 72px); position: relative; }
.anatomy__canvas { overflow: hidden; }
.anatomy__zoom { position: absolute; inset: 0; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform 1100ms var(--ease-out), filter 700ms ease; }
.anatomy__zoom img { width: 100%; height: 100%; object-fit: cover; }
.anatomy__canvas.is-zoomed .anatomy__zoom { transform: scale(1.2); filter: brightness(0.82); }
.anatomy__canvas.is-zoomed .spot:not([aria-expanded="true"]) { opacity: 0; pointer-events: none; }
.spot { transition: left 1100ms var(--ease-out), top 1100ms var(--ease-out), opacity 300ms ease; }
.anatomy__foot { padding: 20px var(--margin) 0; }
@media (min-width: 1101px) { .anatomy__foot { padding-left: calc(var(--margin) + 56px); } }
.note--macro { display: grid; grid-template-columns: 1fr; width: min(400px, calc(100% - 32px)); padding: 0; outline-offset: -9px; }
.note--macro .note__img { margin: 9px 9px 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.note--macro .note__img img { width: 100%; height: 100%; object-fit: cover; }
.note--macro .note__body { position: relative; padding: 22px 28px 20px; }
.note--macro .note__title { margin-bottom: 14px; }
.note--macro .note__body { position: static; }
.note--macro .note__close { position: absolute; top: 18px; right: 18px; background: var(--paper-hi); }
@media (max-width: 760px) { .note--macro { margin: 16px var(--margin) 0; } }

/* ——— 4.0 Families: stacked full-screen panels ——— */
.familles { position: relative; background: var(--graphite); }
.fam { position: relative; height: 290svh; color: var(--on-photo); }
.fam + .fam { margin-top: -100svh; }
.fam:last-child { height: 190svh; }
.fam__panel { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: var(--graphite); transform-origin: 50% 0; }
.fam--intro { height: 70svh; background: var(--graphite); }
html:not(.motion) .fam { height: auto; } html:not(.motion) .fam + .fam { margin-top: 0; } html:not(.motion) .fam__panel { position: relative; }
/* Without motion the intro keeps its height: its heading is absolutely placed and would otherwise ride up over chapter 3. */
html:not(.motion) .fam--intro { height: 70svh; min-height: 440px; }
.fam__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fam__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--shade) / 0.82), rgb(var(--shade) / 0.25) 55%, rgb(var(--shade) / 0.15)); }

.fam__intro { position: absolute; inset: auto var(--margin) clamp(40px, 7vh, 80px); display: grid; gap: 22px; max-width: 900px; }
@media (min-width: 1101px) { .fam__intro { left: calc(var(--margin) + 56px); } }
.fam__intro h2 { font-size: var(--step-5); font-weight: 460; line-height: 0.92; letter-spacing: -0.02em; color: var(--on-photo); }
.fam__intro p:last-child { font-size: var(--step-1); color: var(--on-graphite-2); max-width: 36ch; }
.fam__body { position: absolute; z-index: 1; inset: auto var(--margin) clamp(28px, 6vh, 72px); border-top: 1px solid color-mix(in srgb, var(--on-photo) 30%, transparent); padding-top: 18px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px var(--gutter); align-items: end; }
@media (min-width: 1101px) { .fam__body { left: calc(var(--margin) + 56px); } }
.fam__name { font-stretch: 70%; font-variation-settings: "wdth" var(--w-title); font-weight: 480; font-size: var(--step-4); line-height: 0.96; letter-spacing: -0.012em; margin: 0; } /* family names are the chapter's H3s: Display, one step under the chapter's Film H2 */
.fam__specs { margin: 0; display: grid; gap: 0; font-size: var(--step--1); }
.fam__specs div { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--on-photo) 22%, transparent); }
.fam__specs dt { color: color-mix(in srgb, var(--on-photo) 66%, transparent); }
.fam__specs dd { margin: 0; color: var(--on-photo); }
.fam__go { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; background: var(--paper-hi); color: var(--ink); text-decoration: none; font-weight: 560; font-size: var(--step--1); }
.fam__go svg { width: 18px; height: 18px; transition: transform var(--dur-m) var(--ease-out); }
.fam__go:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .fam__body { grid-template-columns: 1fr; } .fam__go { grid-column: 1; } }

/* ——— 5.0 Contrôle ——— */
.controle { position: relative; background: var(--paper); padding-bottom: var(--section); }
.wide { margin: clamp(56px, 7vw, 112px) 0 0; }
.wide video { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; background: var(--stone); }
.wide figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 12px var(--margin) 0; font-size: var(--step--1); color: var(--ink-2); }
.todo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--ink-2); border: 1px dashed var(--rule-strong); padding: 4px 10px; margin: 0; }
.todo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* ——— 6.0 La maison: arch reveal ——— */
.maison { position: relative; background: var(--paper); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gutter); align-items: center; padding: var(--section) var(--margin); }
@media (min-width: 1101px) { .maison { padding-left: calc(var(--margin) + 56px); } }
.arch { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--stone); clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.maison__text { display: grid; gap: 26px; padding-left: clamp(0px, 4vw, 72px); }
.maison__text h2 { font-size: var(--step-3); }
.maison__jobs { color: var(--ink-2); max-width: 46ch; }
@media (max-width: 900px) { .maison { grid-template-columns: 1fr; } .arch { max-width: 420px; } .maison__text { padding-left: 0; } }

/* ——— 7.0 Finale: the door opens to the light ——— */
.finale { position: relative; min-height: 100svh; color: var(--on-photo); background: var(--graphite); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding: calc(var(--section) * 0.7) var(--margin); overflow: hidden; }
.finale__media { position: absolute; inset: 0; }
.finale__media video { width: 100%; height: 100%; object-fit: cover; }
.finale__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgb(var(--shade) / 0.62), rgb(var(--shade) / 0.2) 60%, rgb(var(--shade) / 0.1)); }
.finale__claim { position: relative; align-self: end; margin: 0; font-stretch: 70%; font-variation-settings: "wdth" var(--w-title); font-weight: 460; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; max-width: 8ch; }
:root:lang(ru) .finale__claim { max-width: 9ch; } /* « открыты. » is wider than 8 Roboto Flex ch */
@media (min-width: 1101px) { .finale__claim { padding-left: 56px; } }
.finale__media { background: var(--graphite); }
.finale__card { position: relative; background: var(--paper-hi); color: var(--ink); padding: clamp(28px, 3vw, 44px); outline: 1px solid var(--rule-strong); outline-offset: -10px; display: grid; gap: 18px; }
.finale__card h2 { font-size: var(--step-3); }
.finale__lead { color: var(--ink-2); }
.finale__form { display: grid; gap: 18px; }
.finale__form .field input { border-bottom-color: var(--ink); font-size: var(--step-1); }
.finale__form .btn { justify-self: start; }
.finale__done { display: none; gap: 6px; }
.finale__done.is-on { display: grid; }
.finale__done p:first-child { font-weight: 600; }
/* Demo: what would go to the CRM (no CRM yet). Hairline rows, like the spec sheet. */
.crm { display: grid; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.crm__h { font-size: var(--step--1); font-weight: 560; }
.crm dl { margin: 0; }
.crm dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.crm dt { font-size: var(--step--1); color: var(--ink-2); }
.crm dd { margin: 0; font-size: var(--step--1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.attach { display: grid; gap: 6px; }
.attach[hidden] { display: none; }
.attach .opt { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.attach .opt > span { border-left: 0; }
/* inside the request card the tick carries the state; the ink fill stays a configurator gesture */
.attach .opt input:checked + span { background: transparent; color: var(--ink); }
.attach .opt--check input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--paper-hi); }
.attach__text { font-variant-numeric: tabular-nums; }
.finale__tel { font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 900px) { .finale { grid-template-columns: 1fr; gap: 40px; } .finale__claim { align-self: start; } }

/* footer on graphite continues the finale */
.footer__note { color: var(--on-graphite-2); }

/* active hotspot and index: ink/white ring, no yellow */
.spot[aria-expanded="true"] { color: var(--ink); }
.spot[aria-expanded="true"]::before { background: var(--paper-hi); border-color: var(--ink); }
.anatomy__index button[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); }
.note__title { text-transform: none; font-stretch: 70%; font-variation-settings: "wdth" var(--w-title); }
/* rail reads on any ground */
.rail { color: var(--on-photo); text-shadow: 0 1px 6px rgb(var(--shade) / 0.5); }
.rail.is-light { color: var(--ink); text-shadow: none; }
/* top bar gets a band when it returns over content */
.top.is-band { background: var(--paper); color: var(--ink); }
.top.is-band.is-dark-band { background: var(--graphite); color: var(--on-photo); }
.top { transition: color 300ms ease, background-color 300ms ease, transform var(--dur-m) var(--ease-out); }
@media (max-width: 1100px) { .rail { display: grid; left: auto; right: 10px; top: auto; bottom: 18px; transform: none; } .rail__line, .rail__name { display: none; } }
.fam--intro + .fam { margin-top: 0; }
/* focus on film chapters and the menu */
.opening :focus-visible, .scene :focus-visible, .fam :focus-visible, .finale__claim :focus-visible, .menu :focus-visible, .top:not(.is-light) :focus-visible { outline-color: var(--jaune); }

/* ——— 6.0 References: clients and partners, as grouped on jenko.fr; logos in one ink ——— */
.refs { background: var(--paper); padding: 0 var(--margin) clamp(56px, 7vw, 112px); }
@media (min-width: 1101px) { .refs { padding-left: calc(var(--margin) + 56px); } }
.refs__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px var(--gutter); align-items: center; border-top: 1px solid var(--rule-strong); padding-top: clamp(40px, 5vw, 72px); }
.refs__main h2 { font-size: var(--step-3); }
.refs__clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.refs__clients li { display: grid; place-items: center; min-height: 180px; border-left: 1px solid var(--rule); }
.refs__groups { margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--rule-strong); }
.refs__group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 var(--gutter); border-bottom: 1px solid var(--rule-strong); }
.refs__h { margin: 0; padding: 18px 0; font-size: var(--step--1); font-weight: 560; line-height: 1.4; letter-spacing: 0.01em; }
.refs__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.refs__logos li { display: grid; place-items: center; min-height: 104px; padding: 16px; border-left: 1px solid var(--rule); }
.refs__logos li:nth-child(n+6) { border-top: 1px solid var(--rule); }
.refs__logos img, .refs__clients img { display: block; max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .refs__main, .refs__group { grid-template-columns: minmax(0, 1fr); }
  .refs__clients li { min-height: 132px; }
  .refs__clients li:first-child, .refs__logos li:nth-child(odd) { border-left: 0; }
  .refs__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refs__logos li { min-height: 88px; border-top: 1px solid var(--rule); }
  .refs__logos .refs__empty:last-child { display: none; }
}