/* corneelvm.org — one stylesheet. Map: README § Shape; the scenes: README § Scenes.
   The logo's colours (sampled from Logo.png): cobalt #0c549c · sea #0c84b4 · teal #0c9c9c · jade #54b49c ·
   gold #fccc6c · amber #e49c3c, on warm paper. Fondamento for the voice (his pick, close to the logo's hand),
   Archivo Expanded for the small labels (the reference sites pair a display serif with an extended sans).
   The tricks come from white-desert.com and era-residence.com, one per scene.
   Motion only under html.motion (js, no reduced-motion, no ?still); without it every scene is simply shown.
   No inline style attributes anywhere (the CSP forbids them): positions by nth-child, numbers by custom
   properties that js sets through the CSSOM. */

@font-face { font-family: 'Fondamento'; src: url('/fonts/Fondamento.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fondamento'; src: url('/fonts/Fondamento-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo Exp'; src: url('/fonts/Archivo-Expanded.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #f6f1e7;
  --deep: #0b3e70;
  --ink: #102c49;
  --soft: #4f5d6a;
  --cobalt: #0c549c;
  --sea: #0c84b4;
  --teal: #0c9c9c;
  --jade: #54b49c;
  --gold: #fccc6c;
  --amber: #e49c3c;
  --gold-ink: #86620f;                     /* gold that reads as small text on paper (5.2:1) */
  --on-photo: rgba(246, 241, 231, .82);    /* small labels on a photo: paper, never gold (unreadable at 11 px) */
  --grad: linear-gradient(100deg, #0c549c 0%, #0c84b4 30%, #0c9c9c 55%, #54b49c 74%, #fccc6c 90%, #e49c3c 100%);
  --grad-ink: linear-gradient(100deg, #0c549c 0%, #0c84b4 38%, #0c9c9c 66%, #2f8f74 84%, #a8741c 100%);
  --serif: 'Fondamento', 'Iowan Old Style', Georgia, serif;
  --sans: 'Archivo Exp', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pad: clamp(22px, 5.5vw, 96px);
  --gap: clamp(96px, 14vh, 180px);         /* ONE rhythm between scenes (the review found 170 to 330 px gaps) */
  --bar: 84px;
  /* the tone the page is in (Era: the page changes colour as you go) */
  --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--soft); --line: rgba(16, 44, 73, .07); --accent: var(--gold-ink);
}
html[data-tone="deep"] { --bg: var(--deep); --fg: #f6f1e7; --fg-soft: rgba(246, 241, 231, .78); --line: rgba(246, 241, 231, .07); --accent: var(--gold); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
@media (min-width: 1900px) { html { font-size: 112.5%; } :root { --bar: 100px; } }
@media (min-width: 2400px) { html { font-size: 131%; } }
body {
  margin: 0; background: var(--bg); color: var(--fg); transition: background-color 1.1s ease, color 1.1s ease;
  font: 400 clamp(1.0625rem, 1.05vw + .625rem, 1.25rem)/1.6 var(--serif); letter-spacing: .012em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* White Desert's fine columns, behind everything that is paper */
@media (min-width: 900px) {
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(to right, transparent 0 calc(100% / 6 - 1px), var(--line) calc(100% / 6 - 1px) calc(100% / 6));
  }
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: .01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; border-radius: 2px; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: #fff; padding: .6em 1em; }
.skip:focus { left: 8px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- small parts ---------------------------------------------------------------------------- */

.label { font: 400 .66rem/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .8em 2em;
  border-radius: 999px; font: 400 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-ink { background: var(--cobalt); color: #fff; }
.btn-ink:hover { background: var(--sea); box-shadow: 0 10px 30px -12px rgba(12, 84, 156, .6); }
.btn-line { border: 1.3px solid currentColor; }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--gold); }
.btn-ghost { border: 1.3px solid rgba(255, 255, 255, .9); color: #fff; background: rgba(0, 0, 0, .12); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 1.1em; border: 1.2px solid currentColor;
  border-radius: 999px; font: 400 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grad { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- the bar and the side tab --------------------------------------------------------------- */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar); color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 var(--pad);
  transition: background .6s var(--ease), box-shadow .6s var(--ease), height .6s var(--ease), color .6s;
}
.bar.solid { --bar: 66px; color: var(--fg); background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 1px 0 var(--line); }
/* the blur behind the bar only where the GPU is a desktop's (it cost a phone a frame per scroll) */
@media (hover: hover) and (pointer: fine) {
  .bar.solid { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.bar-logo { display: block; flex: none; }
.bar-logo-img { width: auto; height: calc(var(--bar) - 22px); max-width: 172px; transition: height .6s var(--ease); }   /* never taller than the bar: the wave was clipped */
.bar.solid .bar-logo-img { height: calc(var(--bar) - 18px); }
.bar-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 40px); }
.bar-nav > a:not(.pill) {
  font: 400 .64rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; text-decoration: none; position: relative;
}
.bar-nav > a:not(.pill)::after {
  content: ''; position: absolute; left: 0; right: .28em; bottom: -8px; height: 1.5px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.bar-nav > a:not(.pill):hover::after { transform: scaleX(1); }
.bar-nav .pill + .pill { margin-left: -14px; }
.bar-menu { display: none; }

.side-tab {
  position: fixed; right: 0; top: 50%; z-index: 40; writing-mode: vertical-rl; transform: translate(100%, -50%) rotate(180deg);
  padding: 1.5rem .85rem 1.5rem .75rem; border-radius: 0 10px 10px 0;      /* rotated: the round side faces the page */
  background: linear-gradient(0deg, #e49c3c, #fccc6c 30%, #54b49c 62%, #0c84b4) right / 3px 100% no-repeat, var(--paper);   /* the logo's line on the page side */
  color: var(--ink); box-shadow: 0 10px 30px -14px rgba(9, 22, 36, .45);
  font: 400 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  visibility: hidden; transition: transform .8s var(--ease), visibility 0s .8s;
}
.side-tab.show { transform: translate(0, -50%) rotate(180deg); visibility: visible; transition: transform .8s var(--ease), visibility 0s; }
.side-tab:hover { transform: translate(-4px, -50%) rotate(180deg); }
@media (max-width: 899px) { .side-tab { display: none; } }

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; padding: 6rem 2rem 3rem;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.menu nav a { font-size: 2.2rem; text-decoration: none; }
.menu-talk { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(320px, 100%); }
html.menu-open { overflow: hidden; }
html.menu-open .bar { color: var(--ink); background: transparent; box-shadow: none; }

@media (max-width: 859px) {
  :root { --bar: 70px; }
  .bar-nav { display: none; }
  .bar-menu {
    display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 .2em;
    background: none; border: 0; cursor: pointer; font: 400 .64rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  }
  .bar-menu::before { content: ''; width: 22px; height: 7px; border-top: 1.5px solid; border-bottom: 1.5px solid; transition: height .4s var(--ease); }
  .bar-menu[aria-expanded="true"]::before { height: 0; border-bottom: 0; }
  .bar-logo-img, .bar.solid .bar-logo-img { height: 46px; width: auto; }
}

/* ---- hero: the arch opens onto the whole photo ---------------------------------------------- */

.hero { position: relative; height: 100svh; min-height: 560px; }
.hero-pin { position: relative; height: 100%; overflow: hidden; background: var(--paper); }
.hero-photo { position: absolute; inset: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 64%; }
.hero-top, .hero-big { display: none; }
.hero-end { position: absolute; right: var(--pad); bottom: 7.5vh; z-index: 2; max-width: 46rem; text-align: right; color: #fff; }
.hero-end::before {
  content: ''; position: absolute; z-index: -1; right: calc(-1 * var(--pad)); bottom: -7.5vh; width: 150%; height: 190%;
  background: radial-gradient(ellipse at 100% 100%, rgba(10, 22, 16, .55) 0%, rgba(10, 22, 16, .25) 45%, transparent 70%);
  pointer-events: none;
}
.hero h1 { font-size: clamp(3rem, 6.4vw, 8rem); line-height: 1; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hero-line { margin-top: .7rem; font-size: clamp(1.1rem, 1.45vw, 1.55rem); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); max-width: 30em; margin-left: auto; }
.hero-note { margin-top: .6rem; font: 400 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--on-photo); }
.hero-talk { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
.badge { position: absolute; left: var(--pad); bottom: 4vh; z-index: 3; width: clamp(96px, 8vw, 128px); color: #fff; transition: color .8s; }
.badge svg { display: block; width: 100%; height: auto; overflow: visible; }
.badge text { font: 400 11px var(--sans); letter-spacing: 2.6px; fill: currentColor; }
.badge-arrow { fill: none; stroke: currentColor; stroke-width: 2; }

/* tall screens: the photo stops above a paper strip and the words stand on the paper, in ink — so nothing ever
   covers him, the peak or the sky (cvm's rule, overlap.mjs checks it). The strip is as tall as its words, no
   more (the review found 600 px of empty paper under the buttons). Motion: the strip slides up as the arch opens. */
@media (orientation: portrait) {
  html:not(.motion) .hero-pin { display: flex; flex-direction: column; }
  html:not(.motion) .hero-photo { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
  html:not(.motion) .hero-end { position: relative; }
  .hero-img { object-position: 50% 28%; }
  .hero-end {
    left: 0; right: 0; bottom: 0; height: auto; max-width: none; padding: 3vh 22px calc(2.5vh + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--ink); background: var(--paper);
  }
  .hero-end::before { display: none; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3.6rem); text-shadow: none; white-space: nowrap; }
  .hero-line { text-shadow: none; color: var(--soft); font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.35; margin: .4rem auto 0; max-width: 24em; }
  .hero-note { color: var(--gold-ink); margin-top: .5rem; }
  .hero-talk { justify-content: center; flex-wrap: nowrap; gap: 8px; margin-top: 1rem; }
  .hero-talk .btn { min-height: 46px; padding: .8em 1.25em; font-size: .6rem; letter-spacing: .16em; }
  .hero-talk .btn-light { background: var(--cobalt); color: #fff; }
  .hero-talk .btn-ghost { background: none; color: var(--ink); border-color: var(--ink); }
  .badge { display: none; }
}

/* with motion: the hero is a pinned scene 2.5 screens tall; js draws the arch (clip-path) and moves the words.
   The first screen says the offer: kicker + .hero-offer above the arch, the title split either side of it. */
.motion .hero { height: 250svh; }
.motion .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 560px; }
.motion .hero-photo { will-change: clip-path; }
.motion .hero-img { will-change: transform; }
.motion .hero-end { opacity: 0; }
.motion .hero-top { display: block; position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar) + 1.5vh); text-align: center; }
.hero-kicker { color: var(--gold-ink); }
.hero-offer { margin-top: 1.2vh; font-size: clamp(1.1rem, 1.5vw, 1.6rem); line-height: 1.3; color: var(--soft); }
.hero-offer br { display: none; }
.motion .hero-big {
  display: block; position: absolute; left: 0; right: 0; top: 52vh; height: 0; pointer-events: none;
  font-size: clamp(3rem, 7.4vw, 10.5rem); line-height: 1.1; white-space: nowrap;
}
.motion .hb { position: absolute; top: 0; padding: 0 .08em .12em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .hb-l { right: calc(50% + var(--aw, 30vw) / 2 + 2.6vw); background-image: linear-gradient(100deg, #0c549c, #0c84b4); }
.motion .hb-r { left: calc(50% + var(--aw, 30vw) / 2 + 2.6vw); background-image: linear-gradient(100deg, #0c9c9c, #2f9a7c 55%, #b7841e); }
.motion .badge { color: var(--ink); }
.motion .hero.open .badge { color: #fff; }
.motion .badge text { animation: spin 26s linear infinite; transform-origin: 100px 100px; transform-box: view-box; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (orientation: portrait) {
  .motion .hero-top { top: calc(var(--bar) + 2vh); }
  .hero-offer { font-size: clamp(1rem, 4.4vw, 1.3rem); margin-top: 1vh; }
  .hero-offer br { display: inline; }
  /* the title first, the offer under it: .hero-big is in the flow of .hero-top's place, the offer below it */
  .motion .hero-big { top: calc(var(--bar) + 6vh); height: auto; font-size: clamp(2.6rem, 14vw, 6rem); line-height: 1; text-align: center; white-space: normal; }
  .motion .hero-top .hero-offer { position: absolute; left: 0; right: 0; top: calc(4vh + 2 * clamp(2.6rem, 14vw, 6rem) + 2vh); }
  .motion .hb { position: relative; display: block; width: max-content; margin: 0 auto; }
  .motion .hb-l, .motion .hb-r { right: auto; left: auto; }
}
@media (max-width: 380px) { .hero-kicker { font-size: .58rem; letter-spacing: .18em; } }

/* ---- sections: shared ----------------------------------------------------------------------- */

.sec-head { text-align: center; padding: 0 var(--pad); margin-bottom: clamp(52px, 8vh, 100px); }
.sec-head .label { margin-bottom: 1.2rem; }
.sec-head h2 { font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: 1.02; }
.sec-sub { margin: 1rem auto 0; font-style: italic; color: var(--fg-soft); font-size: clamp(1.1rem, 1.4vw, 1.35rem); max-width: 34em; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; text-align: left; max-width: 1760px; margin-left: auto; margin-right: auto; }
.sec-head-row .sec-sub { max-width: 22em; text-align: right; margin: 0; }
@media (max-width: 899px) { .sec-head-row { flex-direction: column; align-items: flex-start; } .sec-head-row .sec-sub { text-align: left; } }
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin-bottom: -.16em; }
.split .sw > span { display: inline-block; }

/* ---- bonjour -------------------------------------------------------------------------------- */

.bonjour { max-width: 74rem; margin: 0 auto; padding: var(--gap) var(--pad); }
@media (orientation: portrait) { .bonjour { padding-top: clamp(56px, 8vh, 110px); } }
.bonjour > .label { margin-bottom: 2.2rem; }
.say { font-size: clamp(1.7rem, 3.1vw, 3.2rem); line-height: 1.32; }
.say + .say { margin-top: 1.1em; }
.say-soft { color: var(--fg-soft); }
.say .k1, .say .k2, .say .k3 { font-style: italic; }
.say .k1 { color: var(--sea); }
.say .k2 { color: #0b8a8a; }
.say .k3 { color: #a8741c; }
.signed { margin-top: clamp(40px, 6vh, 70px); display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.sign { width: clamp(200px, 24vw, 340px); height: auto; overflow: visible; }
.sign path { fill: var(--gold-ink); stroke: var(--gold-ink); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }

/* ---- services: three cards, aligned, on paper ------------------------------------------------ */

.services { padding: var(--gap) var(--pad); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.6vw, 64px); max-width: 1380px; margin: 0 auto; }
.card-n { font: 400 .66rem/1 var(--sans); letter-spacing: .3em; color: var(--accent); margin-bottom: 1rem; }
.card-n small { font-size: inherit; color: var(--fg-soft); }                 /* "· Exemple" on the two mocks */
.card h3 { font-size: clamp(1.9rem, 2.5vw, 2.6rem); margin: 1.5rem 0 .6rem; }
.card > p { color: var(--fg-soft); max-width: 24em; }
.card ul { margin-top: 1.1rem; }
.card li { position: relative; padding: .5em 0 .5em 1.7em; border-top: 1px solid rgba(12, 84, 156, .14); font-size: .95rem; }
.card li::before { content: ''; position: absolute; left: 0; top: 1.14em; width: 1em; height: 1.5px; background: var(--grad); }
.card-visual { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; position: relative; box-shadow: 0 30px 60px -40px rgba(12, 84, 156, .45); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* the mocks: one line of chrome and a shadow, not a browser */
.mock-web { background: color-mix(in srgb, var(--paper) 70%, #0c84b4 30%); display: flex; flex-direction: column; }
.mw-bar { flex: none; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 11px; }
.mw-bar i { display: none; }
.mw-bar span {
  flex: 1; max-width: 56%; margin: 0 auto; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .7);
  color: var(--soft); font: 400 9.5px var(--sans); letter-spacing: .06em; text-align: center; overflow: hidden; white-space: nowrap;
}
.mw-view { position: relative; flex: 1; overflow: hidden; margin: 0 10px; border-radius: 4px 4px 0 0; background: var(--paper); }
.mw-page { padding: 14px 16px 24px; font-size: 12.5px; line-height: 1.45; }
.mw-name { font-size: 19px; margin-bottom: 9px; }
.mw-name small { font-size: 12px; color: var(--soft); }
.mw-hero { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; }
.mw-hero img { width: 100%; height: 100%; object-fit: cover; }
.mw-open { margin: 10px 0 12px; color: #0b7c6e; }
.mw-open b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); margin-right: 7px; vertical-align: 1px; }
.mw-h { font-size: 15px; margin: 12px 0 5px; }
.mw-row { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.mw-row span:first-child { flex: 1; display: flex; gap: 8px; align-items: baseline; }
.mw-row span:first-child::after { content: ''; flex: 1; border-bottom: 1px dotted rgba(16, 44, 73, .3); }
.mw-btn { display: inline-block; margin-top: 12px; padding: 5px 14px; border-radius: 99px; background: var(--cobalt); color: #fff; font-size: 11.5px; }
.mw-map {
  height: 96px; border-radius: 3px; position: relative;
  background: linear-gradient(115deg, transparent 46%, #fff 46.5%, #fff 48%, transparent 48.5%),
              linear-gradient(20deg, transparent 60%, #fff 60.5%, #fff 62%, transparent 62.5%), #cfe6dc;
}
.mw-map::after { content: ''; position: absolute; left: 52%; top: 32%; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--amber); transform: rotate(-45deg); }

.mock-chat {
  display: flex; flex-direction: column; font-size: 14px; line-height: 1.4;
  background: radial-gradient(rgba(12, 132, 180, .1) 1.2px, transparent 1.6px) 0 0 / 15px 15px, radial-gradient(rgba(228, 156, 60, .1) 1.2px, transparent 1.6px) 7px 7px / 15px 15px, #ece6d8;
}
.mc-day { align-self: center; margin: 12px 0 0; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .8); font: 400 9px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.mc-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: linear-gradient(100deg, #0c84b4, #0c9c9c); color: #fff; font-size: 15px; }
.mc-head small { margin-left: auto; opacity: .85; font: 400 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.mc-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font-size: 15px; }
.mc-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 16px 14px 18px; }
.mc-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); }
.mc-you { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.mc-me { align-self: flex-end; background: #d2ede6; border-top-right-radius: 3px; }
.mc-typing { align-self: flex-end; display: none; gap: 4px; padding: 11px 13px; border-radius: 12px; background: #d2ede6; }
.mc-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(16, 44, 73, .45); }
@media (max-width: 899px) { .cards { grid-template-columns: 1fr; max-width: 560px; gap: 72px; } }

/* ---- travaux: White Desert's strip accordion, in one screen --------------------------------- */

.travaux { padding: var(--gap) 0; }
.strips { display: flex; gap: 8px; height: min(74vh, 760px); max-width: 1760px; margin: 0 auto; padding: 0 var(--pad); }
.strip { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; border-radius: 3px; transition: flex-grow 1.1s var(--ease); }
.strip.on { flex-grow: 5.2; }                                /* 7 strips: the open one ≈ 46 %, the closed ≥ 110 px at 1440 */
.strip-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #ddd; cursor: pointer; }
.strip.on .strip-open { cursor: zoom-in; }
.strip-open img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(.75) brightness(.94); transition: transform 1.4s var(--ease), filter 1.1s var(--ease); }
.strip.on .strip-open img { transform: none; filter: none; }
.strip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 20, 34, .55), transparent 38%); }
.strip figcaption { position: absolute; inset: auto 0 0; z-index: 1; padding: 1.2rem 1.1rem; color: #fff; pointer-events: none; display: flex; gap: 1rem; align-items: baseline; }
.strip-n { font: 400 .62rem/1 var(--sans); letter-spacing: .2em; opacity: .9; }
.strip-cap { font: 400 .66rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .8s var(--ease); }
.strip.on .strip-cap { opacity: 1; transform: none; transition-delay: .45s; }
.strip:not(.on) figcaption { justify-content: center; padding: 1.2rem 0; }
.strip:not(.on) .strip-cap { position: absolute; }
@media (max-width: 899px) {
  .strips { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
  .strips::-webkit-scrollbar { display: none; }
  .strip, .strip.on { flex: 0 0 78vw; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .strip-open img { transform: none; filter: none; }
  .strip figcaption, .strip:not(.on) figcaption { justify-content: flex-start; padding: 1rem; }
  .strip-cap, .strip:not(.on) .strip-cap { position: static; opacity: 1; transform: none; white-space: normal; letter-spacing: .18em; }
}

/* ---- surface → sous l'eau: White Desert's slit wipe ----------------------------------------- */

.surface { position: relative; }
.surface-pin { position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: #fff; background: #1c2245; }
.deep-layer { position: absolute; inset: 0; }
.deep-img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.slices, .surface-a { display: none; }
.deep-words {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 8vh; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 6vw; align-items: end;
}
.deep-words .label { grid-column: 1; color: var(--on-photo); margin-bottom: 1rem; }
.deep-words h2 { grid-column: 1; font-size: clamp(2.4rem, 3.6vw, 5rem); line-height: 1.04; }
.deep-words h2 + p { grid-column: 2; grid-row: 1 / 3; align-self: end; font-size: clamp(1.05rem, 1.25vw, 1.3rem); color: rgba(255, 255, 255, .86); max-width: 28em; }
.link-light { display: table; margin-top: 1.2rem; color: var(--gold); letter-spacing: .04em; }

.motion .surface { height: 250svh; }
.motion .surface-pin { position: sticky; top: 0; }
.motion .deep-img { will-change: transform; }
.motion .slices { display: block; position: absolute; inset: 0; z-index: 1; }
.motion .slice { position: absolute; top: 0; bottom: 0; width: calc(100% / 7 + 1px); overflow: hidden; will-change: transform; }
.motion .slice img { position: absolute; top: 0; width: 700%; max-width: none; height: 100%; object-fit: cover; object-position: 30% 50%; }
/* the 7 slices and the storm photo inside each, by position (no inline style) */
.motion .slice:nth-child(1) { left: 0; }                 .motion .slice:nth-child(1) img { left: 0; }
.motion .slice:nth-child(2) { left: calc(100% / 7); }    .motion .slice:nth-child(2) img { left: -100%; }
.motion .slice:nth-child(3) { left: calc(200% / 7); }    .motion .slice:nth-child(3) img { left: -200%; }
.motion .slice:nth-child(4) { left: calc(300% / 7); }    .motion .slice:nth-child(4) img { left: -300%; }
.motion .slice:nth-child(5) { left: calc(400% / 7); }    .motion .slice:nth-child(5) img { left: -400%; }
.motion .slice:nth-child(6) { left: calc(500% / 7); }    .motion .slice:nth-child(6) img { left: -500%; }
.motion .slice:nth-child(7) { left: calc(600% / 7); }    .motion .slice:nth-child(7) img { left: -600%; }
.motion .surface-a {
  display: block; position: absolute; z-index: 2; top: 20vh; right: var(--pad); text-align: right;
  font-size: clamp(2.2rem, 4.2vw, 5rem); line-height: 1.08; text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.surface-a .label { display: block; color: var(--on-photo); margin-bottom: 1rem; text-shadow: none; }
.motion .deep-words { opacity: 0; }

@media (orientation: portrait) {
  .surface-pin { background: #1c2245; }
  .deep-layer { bottom: 32%; }                              /* the photo fills the top two thirds, the words have the dark below */
  .deep-img { object-position: 22% 45%; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .deep-words { display: block; bottom: 6vh; }
  .deep-words h2 + p { font-size: 1rem; }
  .deep-words::before { content: ''; position: absolute; z-index: -1; inset: -40% calc(-1 * var(--pad)) -7vh; background: linear-gradient(transparent, rgba(8, 20, 36, .62) 40%); }
  .deep-words h2 { margin-bottom: 1.2rem; font-size: clamp(2.4rem, 9vw, 4rem); }
  .motion .surface { height: 200svh; }                       /* one screen of storm, one of shark — not three */
  .motion .slice img { object-position: 20% 50%; }
  .motion .surface-a {
    top: 0; bottom: auto; left: 0; right: 0; padding: calc(var(--bar) + 5vh) var(--pad) 14vh; text-align: left;
    font-size: clamp(2.1rem, 9vw, 3.4rem); background: linear-gradient(rgba(8, 20, 36, .62), rgba(8, 20, 36, .35) 60%, transparent);
  }
}

/* ---- étapes: Era's rising disc on the logo's deep blue -------------------------------------- */

.etapes { position: relative; overflow: hidden; padding-bottom: var(--gap); --D: max(128vw, 1200px); }
.orb { position: absolute; left: 50%; top: 12vh; width: var(--D); aspect-ratio: 1; transform: translate(-50%, var(--rise, 0px)); pointer-events: none; }
/* the disc's lower half carries on as paper down to the section's end, so the steps always stand on paper */
.orb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orb circle, .orb rect { fill: var(--paper); }
.orb text { font: 400 16px var(--sans); letter-spacing: 9px; fill: var(--cobalt); }
.orb-words { transform: rotate(var(--turn, 0deg)); transform-origin: 500px 500px; }
.orb-line { display: none; }
/* the words on the arc end ~0.19 D below the disc's top: the label sits in the middle of the arc, the steps below it */
.etapes-in { position: relative; color: var(--ink); padding: calc(12vh + var(--D) * .17) var(--pad) 0; }
.etapes-in > h2 { text-align: center; margin-bottom: calc(var(--D) * .09); color: var(--gold-ink); }
.steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 56px); max-width: 1400px; margin: 0 auto; padding-top: 5.4rem; }
.steps::before, .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 2.1rem; height: 1.5px; background: rgba(16, 44, 73, .12); }
.steps::after { background: var(--grad); transform: scaleX(var(--p)); transform-origin: left; }
.step { position: relative; z-index: 1; }                     /* the rings paint over the line */
.num {
  position: absolute; top: -5.4rem; left: 0; width: 4.2rem; height: 4.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper); border: 1.5px solid rgba(16, 44, 73, .16); color: var(--gold-ink); font-size: 2rem;
  transition: border-color .8s var(--ease), color .8s var(--ease), transform .8s var(--ease);
}
.step.lit .num { border-color: var(--cobalt); color: var(--cobalt); transform: scale(1.06); }   /* a ring, lit — the same on every screen */
.step h3 { font-size: clamp(1.4rem, 1.6vw, 1.8rem); line-height: 1.2; margin-bottom: .7rem; }
.step p { color: var(--soft); }
@media (max-width: 859px) {
  .etapes { --D: 170vw; }
  .orb { top: 6vh; }
  .etapes-in { padding-top: calc(6vh + var(--D) * .11); }
  .etapes-in > h2 { margin-bottom: 40px; }
  .steps { grid-template-columns: 1fr; padding: 0 0 0 5.6rem; gap: 44px; max-width: 520px; }
  .steps::before, .steps::after { left: 2.1rem; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .steps::after { transform: scaleY(var(--p)); transform-origin: top; background: linear-gradient(180deg, #0c549c, #0c9c9c, #54b49c, #e49c3c); }
  .num { top: -.4rem; left: -5.6rem; }
}
@media (max-width: 699px) {
  .orb text { display: none; }                                /* the arc ran off both edges and under the label */
  .orb-line { display: block; text-align: center; color: var(--cobalt); margin-bottom: 1.4rem; letter-spacing: .34em; }
}

/* ---- contact -------------------------------------------------------------------------------- */

.contact { position: relative; background: #d9c4ac; }
.contact-pin { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
/* pinned (cvm 2026-10-07: "like the page where the stormy photo stops"): the haze clears on the first screen, the
   scene then stays a screen longer before the footer */
.motion .contact { height: 200svh; }
.motion .contact-pin { position: sticky; top: 0; }
.contact-photo { position: absolute; inset: 0; }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.contact-soft { display: none; }
.motion .contact-soft { display: block; filter: blur(16px) saturate(1.1); transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.14); opacity: var(--soft, 1); }
/* --zoom ends at 1.06, never 1: the glide to the right and up (--dx --dy, js: 4.5 vw, 2 vh) needs that margin */
.motion .contact-sharp { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--zoom, 1.12)); will-change: transform; }
.contact-words { position: absolute; left: var(--pad); right: var(--pad); bottom: 9vh; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact h2 { font-size: clamp(3rem, 7.2vw, 7.8rem); line-height: 1.05; padding: 0 .05em .08em; }
.contact-line { margin-top: .6rem; font-size: clamp(1.15rem, 1.6vw, 1.55rem); letter-spacing: .03em; color: #34404c; max-width: 30em; }
.contact-talk { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.1rem; }
.contact-talk .btn-line { color: var(--ink); }
.contact .contact-where { margin-top: 2rem; color: #3f3a30; max-width: 40em; line-height: 1.9; }
@media (orientation: portrait) {
  .contact { background: linear-gradient(#dac9b5, #d9c4ac 50%, #c7ad92); }
  .motion .contact { height: auto; }                                  /* phones: no pin, the scene as it is */
  .motion .contact-pin { position: relative; }
  .contact-pin { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .contact-photo { position: relative; inset: auto; flex: 1 1 auto; min-height: 42svh; }
  .contact-words { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--pad) 7vh; }
  .contact-photo img { top: 4%; left: 50%; width: auto; max-width: none; height: 92%; transform: translateX(-40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); }
  .motion .contact-sharp { transform: translateX(-40%) scale(var(--zoom, 1.12)); }
  .motion .contact-soft { transform: translateX(-40%) scale(1.12); }
  .contact .contact-where { margin-top: 1.4rem; }
}

/* ---- footer --------------------------------------------------------------------------------- */

.foot { padding: clamp(56px, 9vh, 100px) var(--pad) 34px; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line); }
.foot-line { text-align: center; color: var(--fg-soft); font-size: .95rem; max-width: 40em; line-height: 1.8; }
.foot-row { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; font: 400 .62rem/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-soft); }
.foot a { color: inherit; }
@media (max-width: 699px) { .foot-row { flex-direction: column; align-items: center; text-align: center; } }

/* ---- lightbox (a <dialog>: the page behind is inert while it is open) ----------------------- */

.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(9, 22, 36, .97); color: #fff; grid-template-columns: 64px 1fr 64px; align-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.lightbox img:not([src]) { display: none; }
.lightbox figcaption { font: 400 .66rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.lightbox button { background: none; border: 0; cursor: pointer; color: #fff; }
.lb-prev, .lb-next { height: 64px; font-size: 1.6rem; opacity: .7; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { opacity: 1; }
.lb-close { position: absolute; top: 18px; right: 22px; font: 400 .66rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; opacity: .8; min-height: 44px; }
@media (max-width: 699px) { .lightbox { grid-template-columns: 40px 1fr 40px; } }

/* ---- the contact form (a dialog every "Écrire un e-mail" opens) ----------------------------- */

html.mailer-open { overflow: hidden; }
.mailer {
  width: min(34rem, calc(100vw - 24px)); max-height: calc(100svh - 24px); overflow: auto;
  padding: clamp(26px, 5vw, 48px); border: 0; border-radius: 18px; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(9, 22, 36, .55);
}
.mailer::backdrop { background: rgba(9, 22, 36, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mailer h2 { font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1.05; padding: 0 .05em .08em 0; }
.mailer-lead { margin: .2rem 0 .6rem; color: var(--soft); }
.mailer label {
  display: grid; gap: .45rem; margin-top: 1.1rem;
  font: 400 .62rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink);
}
.mailer .opt { margin-top: -.3rem; font: italic 400 .95rem/1.3 var(--serif); letter-spacing: .01em; text-transform: none; color: var(--soft); }
.mailer input, .mailer textarea {
  width: 100%; padding: .7em .85em; border: 1.3px solid rgba(16, 44, 73, .22); border-radius: 10px;
  background: #fffdf8; color: var(--ink); font: 400 1.05rem/1.45 var(--serif); letter-spacing: .01em; text-transform: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mailer ::placeholder { color: rgba(79, 93, 106, .6); font-style: italic; }
.mailer input:focus, .mailer textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(12, 132, 180, .2); }
.mailer textarea { resize: vertical; min-height: 8.5em; }
.mailer-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mailer-act { margin-top: 1.6rem; }
.mailer .btn { border: 0; cursor: pointer; }
.mailer-act .btn { width: 100%; }
.mailer .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.mailer .btn-line { border: 1.3px solid currentColor; }
.mailer-status { margin-top: .8rem; text-align: center; font-size: .95rem; color: #8a2a1e; }
.mailer-status:empty { display: none; }
.mailer-alt, .mailer-privacy { margin-top: 1rem; text-align: center; font-size: .95rem; color: var(--soft); overflow-wrap: anywhere; }
.mailer-privacy { margin-top: .4rem; font-size: .85rem; }
.mailer-x {
  position: absolute; top: 12px; right: 14px; min-height: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer;
  font: 400 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .7;
}
.mailer-x:hover { opacity: 1; }
.mailer-done { text-align: center; padding: 1.4rem 0 .4rem; }
.mailer-done p { margin: .8rem 0 1.8rem; }

/* ---- text pages (mentions légales, confidentialité, 404) ------------------------------------ */

.legal .bar { background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 1px 0 var(--line); }
.legal-back { font: 400 .64rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; text-decoration: none; }
.legal-page { max-width: 44rem; margin: 0 auto; padding: calc(var(--bar) + 10vh) var(--pad) 12vh; }
.legal-page h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; margin-bottom: 3rem; }
.legal-page h2 { font-size: 1.5rem; color: var(--cobalt); margin: 2.6rem 0 .8rem; }
.legal-page p + p { margin-top: .9rem; }
.legal .foot { padding-top: 40px; }

/* ================================ motion (html.motion only) ================================= */

.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion .cards .card:nth-child(2) { transition-delay: .12s; }
.motion .cards .card:nth-child(3) { transition-delay: .24s; }
.motion .split .sw > span { transform: translateY(110%); transition: transform 1.3s var(--ease); }
.motion .split.in .sw > span { transform: none; }
/* each word of a split heading rises 70 ms after the one before (by position: no inline style) */
.motion .split .sw:nth-child(2) > span { transition-delay: 70ms; }
.motion .split .sw:nth-child(3) > span { transition-delay: 140ms; }
.motion .split .sw:nth-child(4) > span { transition-delay: 210ms; }
.motion .split .sw:nth-child(5) > span { transition-delay: 280ms; }
.motion .split .sw:nth-child(6) > span { transition-delay: 350ms; }
.motion .split .sw:nth-child(n+7) > span { transition-delay: 420ms; }
/* a gradient heading that rises word by word: each word carries its own slice of the one gradient (js: --gw, --gx) */
.motion .grad.split { background: none; color: inherit; }
.motion .grad.split .sw > span { background: var(--grad-ink); background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }

.motion [data-uncover] { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease); }
.motion [data-uncover] img { transform: scale(1.14); transition: transform 2.2s var(--ease); }
.motion [data-uncover].in { clip-path: inset(0 0 0 0); }
.motion [data-uncover].in img { transform: none; }

/* the words not yet read: still readable (.55 ink = 3.4:1; the review found .15 = 1.33:1), then lit */
.motion .say.armed .w { color: rgba(16, 44, 73, .55); transition: color .7s ease; }
.motion .say.armed .w.lit { color: var(--fg); }
.motion .say-soft.armed .w.lit { color: var(--fg-soft); }
.motion .say.armed .w.k1.lit { color: var(--sea); }
.motion .say.armed .w.k2.lit { color: #0b8a8a; }
.motion .say.armed .w.k3.lit { color: #a8741c; }
@media (prefers-contrast: more) { .motion .say.armed .w { color: var(--fg); } }

/* the signature writes itself: outlines traced, then filled (js: --i = the letter's index) */
.motion .signed .sign path { fill: transparent; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease-in-out calc(var(--i) * .28s), fill .9s ease calc(1.6s + var(--i) * .12s); }
.motion .signed.drawn .sign path { stroke-dashoffset: 0; fill: var(--gold-ink); }
.motion .signed .label { opacity: 0; transition: opacity 1s 2.4s; }
.motion .signed.drawn .label { opacity: 1; }

.motion .mock-web .mw-page { animation: page-scroll 16s 1.2s ease-in-out infinite; animation-play-state: paused; }
.motion .mock-web.on .mw-page { animation-play-state: running; }
@keyframes page-scroll { 0%, 14% { transform: none; } 50%, 64% { transform: translateY(-46%); } 100% { transform: none; } }
/* started 1.2 s in, so the card is never an empty box: the first message is already there when it arrives */
.motion .mock-chat .mc-msg, .motion .mock-chat .mc-typing { animation: 12s linear -1.2s infinite both; animation-play-state: paused; }
.motion .mock-chat.on .mc-msg, .motion .mock-chat.on .mc-typing { animation-play-state: running; }
.motion .mc-thread > :nth-child(1) { animation-name: chat-1; }
.motion .mc-thread > :nth-child(2) { animation-name: chat-2; }
.motion .mc-thread > :nth-child(3) { animation-name: chat-t; display: flex; }
.motion .mc-thread > :nth-child(4) { animation-name: chat-3; }
.motion .mc-typing i { animation: dot 1s ease-in-out infinite; }
.motion .mc-typing i:nth-child(2) { animation-delay: .15s; }
.motion .mc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-1 { 0%, 4% { opacity: 0; transform: translateY(10px); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes chat-2 { 0%, 20% { opacity: 0; transform: translateY(10px); } 24%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes chat-t { 0%, 30% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -9px; } 32%, 50% { opacity: 1; max-height: 40px; padding-block: 11px; margin-top: 0; }
                    52%, 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -9px; } }
@keyframes chat-3 { 0%, 51% { opacity: 0; transform: translateY(10px); max-height: 0; padding-block: 0; margin-top: -9px; }
                    55%, 92% { opacity: 1; transform: none; max-height: 90px; padding-block: 8px; margin-top: 0; } 97%, 100% { opacity: 0; } }
@keyframes dot { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
.motion .lightbox img { animation: fade-in .5s ease both; }
@keyframes fade-in { from { opacity: 0; } }

/* a phone on its side: every scene is the screen, no taller, and every text block fits under its subject */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-pin, .motion .hero-pin, .surface-pin, .contact-pin { min-height: 0; }
  .hero-end { max-width: 46vw; }
  .motion .hero-big { font-size: min(7vw, 15vh); }
  .motion .hero-top { display: none; }
  .hero h1 { font-size: min(13vh, 6.6vw); }
  .deep-words { bottom: 4vh; }
  .deep-words .label { margin-bottom: .3rem; }
  .deep-words h2 { font-size: 8vh; }
  .deep-words h2 + p { font-size: .8rem; line-height: 1.4; }
  .link-light { margin-top: .4rem; }
  .motion .surface-a { font-size: 9vh; top: calc(var(--bar) + 2vh); }
  .contact-photo img { object-position: 50% 22%; }
  .contact-words { bottom: 5vh; }
  .contact h2 { font-size: 11vh; }
  .contact-line { margin-top: .2rem; font-size: 1rem; }
  .contact-talk { margin-top: .9rem; }
  .contact .contact-where { display: none; }
  .hero-line { font-size: 1rem; }
  .hero-note { display: none; }
  .hero-talk { margin-top: 1rem; }
  .badge { display: none; }
}