/* René Bionaz · Lisbon Signal
   Tokens, base, layout, components, sections, motion fallbacks. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sans Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 97%; ascent-override: 92%; descent-override: 24%; }

/* ---------- Tokens ---------- */
:root {
  --limestone: #EFECE6; --limestone-2: #E4E0D8; --ink: #14191C; --ink-muted: #5A6166; --stone-line: #D3CEC4; --cobalt: #2347E0;
  --atlantic: #0E1518; --atlantic-2: #162024; --foam: #EEEBE5; --foam-muted: #9AA4A8; --deep-line: #24323A; --cobalt-light: #7D96FF;

  --font-sans: "Instrument Sans", "Sans Fallback", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 200ms;

  --gutter: clamp(16px, 5vw, 80px);
  --section: clamp(80px, 11vw, 160px);
  --nav-h: 72px;
}

[data-theme="light"], :root {
  --ground: var(--limestone); --surface: var(--limestone-2); --text: var(--ink); --muted: var(--ink-muted);
  --hairline: var(--stone-line); --signal: var(--cobalt); --signal-ink: #F4F2EE;
}
/* Sand: a warmer, deeper beige for the mission chapter, so it reads as its own section between two limestone ones. */
[data-theme="sand"] {
  --ground: #E3DCCF; --surface: var(--limestone); --text: var(--ink); --muted: #565C60;
  --hairline: #CCC4B5; --signal: var(--cobalt); --signal-ink: #F4F2EE;
}
[data-theme="dark"] {
  --ground: var(--atlantic); --surface: var(--atlantic-2); --text: var(--foam); --muted: var(--foam-muted);
  --hairline: var(--deep-line); --signal: var(--cobalt-light); --signal-ink: var(--atlantic);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--limestone); color: var(--ink);
  font-family: var(--font-sans); font-size: 18px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
[data-theme] { background: var(--ground); color: var(--text); }
body { overflow-x: clip; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--signal); color: var(--signal-ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 16px; background: var(--cobalt); color: #F4F2EE; transform: translateY(-150%); transition: transform var(--t-micro) var(--ease-out); text-decoration: none; border-radius: 2px; }
.skip:focus { transform: none; }

.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("assets/images/grain.png") repeat; opacity: 0.07; mix-blend-mode: overlay;
}

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif, em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
h1 em, h2 em, h3 em, p em { letter-spacing: -0.02em; padding-right: 0.04em; }

/* ---------- Type scale ---------- */
.display { font-weight: 500; font-size: clamp(56px, 10.5vw, 184px); line-height: 0.92; letter-spacing: -0.045em; }
.display-2 { font-weight: 500; font-size: clamp(40px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.035em; }
.display-3 { font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.025em; }
.cite { font-size: 14px; line-height: 1.45; color: var(--muted); }
.cite a, .link { color: var(--signal); }

/* ---------- Links and buttons ---------- */
.link, .cite a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t-micro) var(--ease-out);
}
.link:hover, .cite a:hover { animation: underline 420ms var(--ease-out); }
@keyframes underline {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  46% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 24px; border-radius: 2px;
  font-weight: 500; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out), transform 160ms var(--ease-out), border-color var(--t-micro) var(--ease-out);
}
.btn--primary { background: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--signal) 88%, var(--text)); }
/* The main action stays solid cobalt on dark grounds too, so it is the boldest thing on screen over the films. */
[data-theme="dark"] .btn--primary { --signal: var(--cobalt); --signal-ink: #F4F2EE; }
.btn--ghost { border: 1px solid var(--hairline); }
.btn--ghost:hover { border-color: var(--text); }
.btn:active { transform: translateY(2px); }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 20px 32px; font-size: 18px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--nav-h);
  display: flex; align-items: center; gap: 32px; padding-inline: var(--gutter);
  color: var(--foam); background: transparent;
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out), color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.nav.is-solid { background: color-mix(in srgb, var(--limestone) 92%, transparent); color: var(--ink); box-shadow: inset 0 -1px 0 var(--stone-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav.is-solid.on-dark { background: color-mix(in srgb, var(--atlantic) 90%, transparent); color: var(--foam); box-shadow: inset 0 -1px 0 var(--deep-line); }
.nav__brand { font-weight: 500; letter-spacing: -0.01em; text-decoration: none; margin-right: auto; }
.nav__links { display: flex; gap: 28px; font-size: 15px; }
.nav__links a { text-decoration: none; opacity: 0.86; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--t-micro) var(--ease-out), opacity var(--t-micro); }
.nav__links a:hover, .nav__links a.is-active { opacity: 1; background-size: 100% 1px; }
.nav .btn--primary { --signal: var(--cobalt); --signal-ink: #F4F2EE; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__bars, .nav__bars::before { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 280ms var(--ease-out); }
.nav__bars { position: relative; transform: translateY(-4px); }
.nav__bars::before { content: ""; position: absolute; top: 8px; }
.nav__toggle[aria-expanded="true"] .nav__bars { transform: translateY(0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(-8px) rotate(-90deg); }

.menu { position: fixed; inset: 0; z-index: 70; padding: calc(var(--nav-h) + 32px) var(--gutter) 40px; display: flex; align-items: flex-end; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 8px; }
.menu a { font-size: clamp(40px, 12vw, 64px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; text-decoration: none; }
.menu a:last-child { color: var(--signal); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--atlantic); }
.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.hero__poster, .hero__poster img, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img { object-fit: cover; object-position: 50% 30%; } /* matches the canvas cover-fit in initHero */
.hero__canvas { opacity: 0; transition: opacity 400ms var(--ease-out); }
.hero__canvas.is-ready { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14,21,24,0.55) 0, rgba(14,21,24,0) 18%),
    linear-gradient(to top, rgba(14,21,24,0.94) 0%, rgba(14,21,24,0.72) 30%, rgba(14,21,24,0.2) 60%, rgba(14,21,24,0) 75%),
    linear-gradient(to right, rgba(14,21,24,0.5) 0%, rgba(14,21,24,0) 55%);
}
.hero__content { position: absolute; inset: auto 0 calc(64px + 2vh) 0; }
.hero__name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--foam-muted); margin-bottom: 20px; }
.hero__title { max-width: 8.6em; transform-origin: 0 100%; }
.split-line { padding-bottom: 0.04em; }
/* SplitText masks each line with overflow: clip. At display line heights that cuts off descenders (the g in "get"),
   so let the mask reach further down without changing the layout. */
[data-split] > [class*="mask"] { padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero__meta { display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 40ch); gap: 24px 64px; align-items: end; margin-top: clamp(24px, 3.5vh, 40px); }
.hero__sub { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.hero__role { font-size: 15px; color: var(--foam-muted); }
.hero__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero__proof {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 40px; justify-content: flex-start;
  padding: 16px var(--gutter); font-size: 13px; color: var(--foam-muted);
  border-top: 1px solid rgba(238,235,229,0.14);
}
.hero__proof strong { color: var(--foam); font-weight: 500; margin-right: 6px; }
.hero__cue { position: absolute; right: var(--gutter); bottom: 70px; width: 1px; height: 56px; background: rgba(238,235,229,0.18); overflow: hidden; }
.hero__cue::after { content: ""; position: absolute; inset: 0; background: var(--cobalt-light); transform: translateY(-100%); animation: cue 2.2s var(--ease-in-out) infinite; }
.hero__cue.is-gone { opacity: 0; transition: opacity 300ms; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* Landscape screens: split layout. René walks down the middle of the film, so the film shifts right
   (he lands about two thirds across) and the text gets its own dark column on the left.
   Phones and portrait tablets keep the stacked layout, where the text already sits below his face. */
@media (min-width: 761px) and (orientation: landscape) {
  .hero__poster, .hero__canvas { transform: translateX(17%); }
  .hero__shade {
    background:
      linear-gradient(to bottom, rgba(14,21,24,0.55) 0, rgba(14,21,24,0) 18%),
      linear-gradient(to right, #0E1518 0%, rgba(14,21,24,0.94) 26%, rgba(14,21,24,0.55) 44%, rgba(14,21,24,0) 60%),
      linear-gradient(to top, rgba(14,21,24,0.7) 0%, rgba(14,21,24,0) 40%);
  }
  /* 4.8em keeps the headline to two lines: Every deal is / won twice. */
  .hero__title { font-size: clamp(56px, 6.4vw, 112px); max-width: 4.8em; }
  .hero .hero__meta { grid-template-columns: minmax(0, 40ch); } /* wins over the 1024px rule further down */
}

/* hide hero title until it is split, with a script fallback */
.js-pending .hero__title { visibility: hidden; }

/* ---------- Stats ---------- */
.stats { padding-block: clamp(64px, 8vw, 112px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; padding: 28px 28px 8px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--hairline); }
.stat__num { font-size: clamp(56px, 6.6vw, 112px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 400; display: flex; align-items: baseline; }
.stat__num small { font-size: 0.32em; letter-spacing: -0.01em; margin-left: 0.2em; color: var(--muted); }
.stat__arrow { width: 0.62em; height: 0.3em; margin: 0 0.08em; align-self: center; overflow: visible; }
.stat__arrow path { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: square; }
.stat__label { font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 26ch; }

/* ---------- Mission ---------- */
.mission .wrap:first-child { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px 24px; }
.mission__title { grid-column: 1 / 11; max-width: 17ch; }
.mission__title .word { display: inline-block; }
.mission__body { grid-column: 7 / 13; display: grid; gap: 16px; max-width: 60ch; }
/* The rail: --rail-start / --rail-len are measured from the dots in initRails, so the track
   runs exactly from Built to Live in either orientation. */
.rail { position: relative; margin-top: clamp(64px, 8vw, 120px); --rail-start: 8px; --rail-len: 75%; --rail-top: 56px; --rail-left: 8px; }
.rail__kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.rail__track { position: absolute; left: var(--rail-start); width: var(--rail-len); top: calc(var(--rail-top) - 1px); height: 2px; background: var(--hairline); pointer-events: none; }
.rail__fill { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--rail-p, 1)); }
.rail__signal { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--signal); transform: translateX(var(--rail-x, 0px)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 18%, transparent); opacity: 0; }
.rail.is-moving .rail__signal { opacity: 1; }
.rail.is-stalled .rail__signal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--signal); animation: rail-stall 1.1s var(--ease-out) infinite; }
@keyframes rail-stall { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.rail__stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rail__stop { display: grid; gap: 14px; justify-items: start; align-content: start; }
.rail__dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); border: 2px solid var(--signal); transition: background-color 320ms var(--ease-out), transform 320ms var(--ease-out); }
.rail__stop.is-on .rail__dot { background: var(--signal); }
.rail__stop.is-arriving .rail__dot { transform: scale(1.35); }
.rail__name { font-weight: 500; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.01em; }
.rail__who { font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 24ch; opacity: 0.25; transform: translateY(6px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.rail__stop.is-on .rail__who { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rail__who { opacity: 1; transform: none; transition: none; } .rail.is-stalled .rail__signal::after { animation: none; } }

/* ---------- Pillars ---------- */
.pillars__title { max-width: 14ch; margin-bottom: clamp(48px, 6vw, 88px); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.pillar { display: grid; align-content: start; gap: 18px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.pillar__station { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.pillar__dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--signal); }
.pillar.is-in .pillar__dot { background: var(--signal); transition: background-color 400ms var(--ease-out) 200ms; }
.pillar__title { font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.pillar p:not(.pillar__station) { font-size: 17px; }
.pillar__result { color: var(--text); padding-top: 14px; border-top: 1px solid var(--hairline); }
.pillar__result strong { font-weight: 500; }

/* ---------- Bands ---------- */
.band { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden; }
.band__media { position: absolute; inset: -8% 0; }
.band__media img, .band__media picture, .band__video { width: 100%; height: 100%; object-fit: cover; }
.band__video { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease-out); }
.band__video.is-ready { opacity: 1; }
.band__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,21,24,0.92) 0%, rgba(14,21,24,0.35) 45%, rgba(14,21,24,0.15) 100%); }
/* Portrait screens: a full-height crop of the 16:9 stage film shows under a third of its width,
   too tight to see René gesture. Show it as a 4:5 window at the top instead (about 45% of the width),
   framed on him (he stands left of centre), fading into the dark ground behind the headline. */
@media (orientation: portrait) {
  .band--understood .band__media {
    inset: -24px 0 auto 0; aspect-ratio: 4 / 5; max-height: calc(100% + 48px);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  }
  .band--understood .band__media img, .band--understood .band__video { object-position: 20% 50%; }
}
.band--live .band__shade { background: linear-gradient(to top, rgba(14,21,24,0.85) 0%, rgba(14,21,24,0) 55%); }
.band__content { position: absolute; inset: auto 0 clamp(48px, 8vh, 96px) 0; }
.band__station { font-size: 13px; color: var(--signal); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.band__station::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.band__line { max-width: 16ch; }


/* ---------- Featured ---------- */
.film__trigger { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); border-radius: 2px; }
.film__trigger img, .film__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 320ms var(--ease-out); }
.film__preview { opacity: 0; }
.film__trigger:hover img, .film__trigger:hover .film__preview { transform: scale(1.025); }
.film__trigger.is-previewing .film__preview { opacity: 1; }
.film__play {
  position: absolute; left: 24px; bottom: 24px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--signal); color: var(--signal-ink);
  transition: transform 260ms var(--ease-out);
}
.film__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.film__trigger:hover .film__play { transform: scale(1.08); }
.film figcaption, .work__demo figcaption, .meet__video figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 14px; color: var(--muted); }
.film__proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text); }
.film__proof .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Point of view: The line ---------- */
.pov__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; }
.pov__head h2 { grid-column: 1 / 7; max-width: 12ch; }
.pov__lead { grid-column: 7 / 13; font-size: clamp(18px, 1.4vw, 20px); max-width: 60ch; }


.rails__title { font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 24px; }
.acc { border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__btn { width: 100%; display: grid; grid-template-columns: 64px 1fr auto 28px; align-items: center; gap: 16px; padding: 22px 0; text-align: left; }
.acc__letter { font-size: 44px; line-height: 1; color: var(--text); }
.acc__name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.acc__tag { font-size: 12px; color: var(--muted); }
.acc__icon { position: relative; width: 16px; height: 16px; justify-self: end; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: currentColor; transition: transform 280ms var(--ease-out); }
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0); }
.acc__btn:hover .acc__name { color: var(--signal); }
.acc__name { transition: color var(--t-micro); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-out); }
.acc__panel > .acc__inner { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { display: grid; gap: 14px; padding-left: 80px; max-width: calc(80px + 68ch); }
.acc__inner > :last-child { padding-bottom: 28px; }
.acc__proof strong { font-weight: 500; }

/* ---------- Three proofs: the work you can click ---------- */
.work { margin-top: clamp(64px, 8vw, 112px); }
.work__title { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 20px; }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.work__card {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 9; overflow: hidden;
  padding: clamp(16px, 1.6vw, 24px); border-radius: 2px; text-decoration: none; color: var(--foam);
  /* faint rate-card rules behind the label */
  background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(125, 150, 255, 0.12) 27px 28px), var(--atlantic);
}
.work__tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt-light); }
.work__name { margin-top: auto; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.work__line { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--foam-muted); max-width: 32ch; }
.work__go { align-self: flex-start; margin-top: 14px; font-size: 14px; color: var(--cobalt-light); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--t-micro) var(--ease-out); }
.work__card:hover .work__go, .work__card:focus-visible .work__go { background-size: 100% 1px; }
.work__demo figcaption .mono, .film figcaption .mono { white-space: nowrap; }

/* ---------- Meet René: 60-second intro and the career line ---------- */
.meet__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px 24px; align-items: end; }
.meet__intro { grid-column: 1 / 6; display: grid; gap: 24px; }
.meet__intro h2 { max-width: 11ch; }
.meet__lead { font-size: clamp(19px, 1.5vw, 22px); max-width: 40ch; }
.meet__langs { padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--muted); max-width: 44ch; }
.meet__video { grid-column: 6 / 13; }
.meet__frame {
  position: relative; padding: clamp(10px, 1.1vw, 16px); border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline), 0 30px 60px -30px rgb(0 0 0 / 0.55);
}
.meet__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #0A0F11; cursor: pointer; }
.meet__player::cue { font-family: var(--font-sans); font-size: 0.9em; line-height: 1.35; color: #F4F2EE; background: rgba(14, 21, 24, 0.78); }
.meet__sound {
  position: absolute; left: calc(clamp(10px, 1.1vw, 16px) + 16px); bottom: calc(clamp(10px, 1.1vw, 16px) + 16px);
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px 8px 8px; border-radius: 99px;
  font-weight: 500; font-size: 15px; white-space: nowrap; color: var(--atlantic); background: var(--cobalt-light);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.6);
  transition: transform 220ms var(--ease-out), background-color var(--t-micro) var(--ease-out);
}
.meet__sound:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cobalt-light) 86%, #fff); }
.meet__sound:active { transform: translateY(1px); }
.meet__sound[hidden] { display: none; }
.meet__sound-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--atlantic); }
.meet__sound-icon::after { content: ""; position: absolute; left: 12px; top: 10px; border-left: 10px solid var(--cobalt-light); border-block: 6px solid transparent; }
.meet__sound-time { font-size: 12px; font-weight: 400; opacity: 0.7; }
.player.meet__controls { grid-template-columns: auto 1fr auto auto auto auto; padding-top: 12px; }
.meet__controls[hidden] { display: none; }
.player__cc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--foam-muted); }
.player__cc.is-on { color: var(--foam); border-color: var(--foam-muted); }
.meet__frame:fullscreen { display: grid; align-content: center; padding: 24px; background: #0A0F11; border-radius: 0; }
.meet__frame:fullscreen .meet__player { max-height: calc(100vh - 110px); object-fit: contain; }
.meet__transcript { margin-top: 14px; font-size: 15px; color: var(--muted); }
.meet__transcript summary { cursor: pointer; width: fit-content; color: var(--signal); }
.meet__transcript summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.meet__transcript p { margin-top: 12px; max-width: 64ch; }

/* Hero link to the intro film */
.hero__intro { display: inline-flex; align-items: center; gap: 10px; }
.hero__play { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; }
.hero__play::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; }

/* RAILS as the visual: five letters spelled across, details open below. Stacks back to the accordion on phones. */
.rails { margin-top: clamp(56px, 7vw, 104px); }
@media (min-width: 761px) {
  .rails .acc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 36px); border-top: 0; }
  .rails .acc__item { display: contents; }
  .rails .acc__item > h4 { grid-row: 1; }
  .rails .acc__item:nth-child(1) > h4 { grid-column: 1; }
  .rails .acc__item:nth-child(2) > h4 { grid-column: 2; }
  .rails .acc__item:nth-child(3) > h4 { grid-column: 3; }
  .rails .acc__item:nth-child(4) > h4 { grid-column: 4; }
  .rails .acc__item:nth-child(5) > h4 { grid-column: 5; }
  .rails .acc__btn {
    height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 24px 0 28px; border-top: 2px solid var(--hairline); transition: border-color 320ms var(--ease-out);
  }
  .rails .acc__letter { font-size: clamp(88px, 10.5vw, 168px); line-height: 0.9; margin: 0 0 20px -0.04em; padding-right: 0.08em; transition: color 320ms var(--ease-out); }
  .rails .acc__name { font-size: clamp(17px, 1.45vw, 22px); max-width: 15ch; }
  .rails .acc__tag { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
  .rails .acc__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--signal); transition: background-color 320ms var(--ease-out); }
  .rails .acc__icon { display: none; }
  .rails .acc__btn:hover .acc__letter { color: var(--signal); }
  .rails .acc__btn[aria-expanded="true"] { border-top-color: var(--signal); }
  .rails .acc__btn[aria-expanded="true"] .acc__letter, .rails .acc__btn[aria-expanded="true"] .acc__name { color: var(--signal); }
  .rails .acc__btn[aria-expanded="true"] .acc__tag::before { background: var(--signal); }

  .rails .acc__panel { grid-row: 2; grid-column: 1 / -1; transition: none; border-top: 1px solid var(--hairline); }
  .rails .acc__item:not(.is-open) .acc__panel { visibility: hidden; }
  .rails .acc__inner { padding-left: 0; max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px clamp(32px, 5vw, 96px); align-content: start; }
  .rails .acc__inner > :first-child { grid-row: span 2; font-size: clamp(18px, 1.4vw, 20px); max-width: 60ch; }
  .rails .acc__inner > :nth-child(-n+2) { padding-top: 32px; }
  .rails .acc__inner > :last-child { padding-bottom: 8px; }
  .rails .acc__item.is-open .acc__inner > * { animation: railsIn 420ms var(--ease-out) both; }
  .rails .acc__item.is-open .acc__inner > :nth-child(2) { animation-delay: 60ms; }
  .rails .acc__item.is-open .acc__inner > :nth-child(3) { animation-delay: 120ms; }
}
@keyframes railsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ---------- Story ---------- */

.career { position: relative; margin-top: clamp(72px, 9vw, 128px); }
/* The track runs from the first stop's dot to the last (placed by initCareer). The fill grows with scroll
   and each stop lights up as the fill reaches it. Horizontal on desktop, vertical on phones. */
.career__track { position: absolute; left: 7px; top: 6px; width: calc(75% - 7px); height: 2px; background: color-mix(in srgb, var(--signal) 22%, transparent); pointer-events: none; }
.career__track[hidden] { display: none; }
.career__fill { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 0; }
.career.is-vertical .career__track { width: 2px; }
.career__stops { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.career__stop { display: grid; gap: 12px; align-content: start; }
.career__dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--signal); transition: background-color 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.career__stop.is-on .career__dot { background: var(--signal); }
.career__stop:last-child.is-on .career__dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 22%, transparent); }
.career.is-animated .career__stop > p { opacity: 0.28; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.career.is-animated .career__stop.is-on > p { opacity: 1; transform: none; }
.career.is-animated .career__stop.is-on > p + p { transition-delay: 80ms; }
.career__when { font-size: 12px; color: var(--muted); margin-top: 12px; }
.career__what { font-size: 16px; max-width: 30ch; }
.career__what strong { font-weight: 500; }


/* ---------- CTA ---------- */
.cta { padding-block: clamp(96px, 13vw, 200px) clamp(80px, 10vw, 140px); }
.cta__rail { position: relative; height: 16px; margin-bottom: clamp(48px, 6vw, 80px); }
.cta__rail span { position: absolute; left: 0; right: 16px; top: 7px; height: 2px; background: var(--signal); transform-origin: 0 50%; }
.cta__rail i { position: absolute; right: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 40%, transparent); }
.cta__rail.is-live i { animation: pulse 2.4s var(--ease-out) 2; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.cta__title { max-width: 9em; }
.cta__sub { margin-top: 32px; font-size: clamp(18px, 1.5vw, 21px); max-width: 48ch; color: var(--muted); }
.cta__actions { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.cta__email { display: flex; align-items: center; gap: 14px; }

/* Closing section over the rooftop film. René stands mid-frame and turns to look right, so on landscape
   screens the text sits in a dark right column where his gaze leads, and Lisbon (dome, bridge) stays clear on the left. */
.cta--film { position: relative; overflow: hidden; }
.cta__shade { position: absolute; inset: 0; pointer-events: none; }
.cta__inner { position: relative; }
@media (orientation: landscape) and (min-width: 761px) {
  .cta--film { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .cta--film .cta__inner { width: 100%; }
  /* Wider than the section and slid left, so René lands about a third of the way across instead of mid-frame,
     with clear space before the text. Anchored low because he stands in the lower half of the shot. */
  .cta--film .band__media { inset: 0 0 0 -20%; }
  .cta--film .band__media img, .cta--film .band__video { object-position: 50% 72%; } /* keeps the bridge towers and René's feet in on 16:9 */
  .cta__shade {
    background:
      linear-gradient(to left, #0E1518 0%, rgba(14,21,24,0.88) 22%, rgba(14,21,24,0.4) 34%, rgba(14,21,24,0) 43%),
      linear-gradient(to bottom, rgba(14,21,24,0.55) 0%, rgba(14,21,24,0) 22%, rgba(14,21,24,0) 72%, rgba(14,21,24,0.85) 100%);
  }
  .cta--film .cta__col { width: max(29vw, 320px); margin-left: auto; }
  /* 3.8em sits between "Let's get" (3.5em) and "Let's get it" (4.2em): Built it? / Let's get / it live. */
  .cta--film .cta__title { font-size: clamp(56px, 6.4vw, 112px); max-width: 3.8em; }
  .cta--film .cta__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
}
/* Portrait screens: the whole 16:9 frame as a strip at the top, so nothing is cropped, with the text below it. */
@media (orientation: portrait), (max-width: 760px) {
  .cta--film { padding-top: calc(56.25vw + 32px); }
  .cta--film .band__media {
    inset: 0 0 auto 0; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
}

/* ---------- Footer ---------- */
.footer { padding-block: 28px 32px; border-top: 1px solid var(--deep-line); font-size: 14px; color: var(--foam-muted); }
.footer__row { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
.footer__links { display: flex; gap: 24px; }
.footer .link { color: var(--foam); }

/* ---------- Lightbox ---------- */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: rgba(14,21,24,0.94); color: var(--foam); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(14,21,24,0.6); }
.lightbox__frame { width: min(1200px, 100%); }
.lightbox__video { width: 100%; aspect-ratio: 16 / 9; background: #0A0F11; border-radius: 2px; }

/* ---------- Configurator demo viewer ---------- */
.viewer { --signal: var(--cobalt-light); width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(12px, 2vw, 24px); border: 0; background: rgba(14,21,24,0.96); color: var(--foam); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.viewer::backdrop { background: rgba(14,21,24,0.6); }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; width: 100%; max-width: 1440px; margin-inline: auto; }
.viewer__title { margin-right: auto; font-weight: 500; font-size: 16px; }
.viewer__title .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foam-muted); border: 1px solid var(--deep-line); padding: 2px 7px; margin-left: 8px; vertical-align: 2px; }
.viewer__ratio { display: inline-flex; border: 1px solid var(--deep-line); border-radius: 2px; }
.viewer__opt { min-height: 40px; padding: 0 14px; font-size: 12px; color: var(--foam-muted); }
.viewer__opt[aria-pressed="true"] { background: var(--cobalt-light); color: var(--atlantic); }
.viewer__open { font-size: 14px; }
.viewer__stage { min-height: 0; display: grid; place-items: center; container-type: size; }
.viewer__frame { display: block; border: 0; border-radius: 2px; background: var(--limestone); box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  aspect-ratio: 16 / 9; width: min(100cqw, 100cqh * 16 / 9, 1440px); transition: width 360ms var(--ease-out); }
.viewer[data-ratio="9:16"] .viewer__frame { aspect-ratio: 9 / 16; width: min(100cqw, 100cqh * 9 / 16, 480px); }
@media (prefers-reduced-motion: reduce) { .viewer__frame { transition: none; } }
.player { --signal: var(--cobalt-light); display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 16px; padding-top: 14px; font-size: 13px; color: var(--foam-muted); }
.player__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--deep-line); border-radius: 2px; color: var(--foam); }
.player__btn:hover { border-color: var(--foam-muted); }
.player__btn svg { width: 20px; height: 20px; fill: currentColor; }
.player__btn .i-play { display: none; }
.player__btn.is-paused .i-play { display: block; }
.player__btn.is-paused .i-pause { display: none; }
.player__btn.is-muted .i-wave { display: none; }
.player__scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; --p: 0%; }
.player__scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--signal), var(--signal)) 0 0 / var(--p) 100% no-repeat, var(--deep-line); }
.player__scrub::-moz-range-track { height: 2px; background: var(--deep-line); }
.player__scrub::-moz-range-progress { height: 2px; background: var(--signal); }
.player__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--signal); border: 0; }
.player__scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__meta { grid-template-columns: minmax(0, 52ch); }
  .hero__role { display: none; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .mission__title, .mission__body { grid-column: 1 / -1; }
  .pillars__grid { grid-template-columns: 1fr; gap: 40px; }
  .pillar { grid-template-columns: 1fr; max-width: 68ch; }
  .pov__head h2, .pov__lead, .meet__intro, .meet__video { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .work__grid { grid-template-columns: 1fr; }
  .meet__sound { position: static; width: 100%; margin-top: 10px; justify-content: center; white-space: nowrap; box-shadow: none; }
  .meet__sound:hover, .meet__sound:active { transform: none; }
  .player.meet__controls { grid-template-columns: auto 1fr auto auto auto; gap: 10px; }
  .player.meet__controls .player__time { display: none; }
  body { font-size: 17px; }
  :root { --nav-h: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .hero__stage { min-height: 560px; }
  .hero__content { bottom: 64px; }
  .hero__title { font-size: clamp(52px, 15vw, 72px); }
  .hero__sub { font-size: 17px; }
  .hero__proof { gap: 18px; font-size: 11px; padding-block: 14px; }
  .hero__proof li:nth-child(3) { display: none; }
  .hero__cue { display: none; }
  .stat { padding: 22px 16px 4px 0; }
  .stat + .stat { padding-left: 16px; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat__label { font-size: 14px; }
  /* Vertical rail on phones: the signal travels down past each station. */
  .rail__stops { grid-template-columns: 1fr; gap: 36px; }
  .rail__stop { grid-template-columns: 16px 1fr; column-gap: 18px; row-gap: 4px; }
  .rail__dot { grid-row: 1 / span 2; margin-top: 4px; }
  .rail__name { font-size: 20px; }
  .rail__who { font-size: 15px; max-width: none; }
  .rail__track { left: calc(var(--rail-left) - 1px); top: var(--rail-start); width: 2px; height: var(--rail-len); }
  .rail__fill { transform-origin: 50% 0; transform: scaleY(var(--rail-p, 1)); }
  .rail__signal { top: 0; left: 50%; margin: -6px 0 0 -6px; transform: translateY(var(--rail-x, 0px)); }
  .band { height: 78svh; min-height: 480px; }
  .acc__btn { grid-template-columns: 40px 1fr 20px; gap: 12px; }
  .acc__tag { display: none; }
  .acc__letter { font-size: 34px; }
  .acc__inner { padding-left: 0; }
  .career__stops { grid-template-columns: 1fr; gap: 36px; padding-left: 0; }
  .career__stop { grid-template-columns: 14px 1fr; column-gap: 20px; }
  .career__stop > p { grid-column: 2; }
  .career__when { margin-top: -2px; }
  .cta__actions { flex-direction: column; align-items: flex-start; }
  .cta__actions .btn--lg { width: 100%; }
  .player { grid-template-columns: auto 1fr auto; }
  .player__time { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero__cue { display: none; }
}

/* ---------- Short and in-between screens ----------
   The hero is pinned, so everything in it has to fit inside one screen height. On short landscape screens
   (phones held sideways, laptops with tall browser chrome) the old 620px floor pushed the buttons and proof
   bar below the fold for the whole pin. Here the hero shrinks to the screen and the type scales with height. */
@media (min-width: 761px) and (orientation: landscape) {
  .hero .hero__title { font-size: clamp(40px, min(6.4vw, 10.5svh), 112px); }
  .hero__name { margin-bottom: clamp(10px, 2svh, 20px); }
  .hero .hero__meta { margin-top: clamp(14px, 3.4svh, 40px); row-gap: clamp(12px, 2.4svh, 24px); }
  .hero__sub { font-size: clamp(15px, min(1.5vw, 2.4svh), 21px); }
  .hero__content { bottom: calc(56px + 2.5svh); }
}
@media (orientation: landscape) and (max-height: 640px) {
  .hero__stage { min-height: 0; }
  .hero__name { display: none; }
  .hero__content { bottom: calc(66px + 1vh); }
  .hero .hero__title { font-size: clamp(32px, min(6.4vw, 11.5svh), 112px); }
  .hero .hero__meta { margin-top: 16px; gap: 14px 40px; }
  .hero__sub { font-size: 15px; line-height: 1.4; }
  .hero__actions { gap: 20px; }
  .hero__actions .btn { min-height: 44px; padding-block: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero__role { display: none; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .hero__proof { display: none; }
  .hero__content { bottom: 20px; }
}

/* Short portrait phones (older and smaller Android, iPhone SE): the hero has to clear the nav. */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  .hero__name { display: none; }
  .hero .hero__title { font-size: clamp(40px, min(15vw, 8.5svh), 72px); }
  .hero__sub { font-size: 16px; line-height: 1.45; }
}

/* Tablets and narrow laptop windows: the career line runs vertically like on phones, and the work cards go two up. */
@media (min-width: 761px) and (max-width: 1024px) {
  .career__stops { grid-template-columns: 1fr; row-gap: 40px; }
  .career__stop { grid-template-columns: 14px minmax(0, 52ch); column-gap: 24px; }
  .career__stop > p { grid-column: 2; }
  .career__when { margin-top: -2px; }
  .career__what { max-width: none; }
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Comfortable tap targets for the text links on touch screens. */
@media (pointer: coarse) {
  .footer__links .link, .cta__actions .link, .hero__intro, .work__demo .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Meet without the intro film: heading left, text right */
.meet__grid--text { align-items: start; }
.meet__grid--text .meet__intro { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.meet__grid--text .meet__intro h2 { grid-column: 1 / 6; grid-row: 1 / span 2; }
.meet__grid--text .meet__lead, .meet__grid--text .meet__langs { grid-column: 7 / 13; }
@media (max-width: 1024px) {
  .meet__grid--text .meet__intro h2, .meet__grid--text .meet__lead, .meet__grid--text .meet__langs { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Deal map: inside first, then outside (mission section) ----------
   One compact map. Each stop is a dot and a name; scrolling runs a signal through it stop by stop (initFlow). The two outside routes sit in tinted lanes between a fork and a merge;
   hovering or focusing a lane dims the other. */
.flow { --gap: 16px; margin-top: clamp(64px, 8vw, 120px); background: var(--surface); border-radius: 4px; padding: clamp(24px, 3.2vw, 48px); display: grid; gap: clamp(28px, 3.4vw, 44px); }
.flow__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; align-items: start; }
.flow__label { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; padding-top: 2px; }
.flow__label em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.flow__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
.flow__track li { position: relative; display: grid; gap: 4px; align-content: start; padding-top: 26px; }
.flow__track li::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--signal); background: var(--surface); }
.flow__track li.is-gate::before { background: var(--signal); }
.flow__track li::after { content: ""; position: absolute; top: 5px; left: 16px; right: calc(4px - var(--gap)); height: 2px; background: color-mix(in srgb, var(--signal) 50%, transparent); transform-origin: 0 50%; }
.flow__track li:last-child::after { display: none; }
.flow__who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
abbr.flow__who { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; width: fit-content; }
.flow__name { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.flow__track--in .is-gate .flow__name, .flow__track--end .is-gate .flow__name { color: var(--signal); }

.flow__out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4.2fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.flow__track--start li:last-child::after { display: block; right: -24px; }
.flow__track--end { position: relative; }
.flow__track--end::before { content: ""; position: absolute; top: 5px; left: -24px; width: 24px; height: 2px; background: color-mix(in srgb, var(--signal) 50%, transparent); }
.flow__lanes { display: grid; gap: 8px; padding-inline: 16px; border-inline: 2px solid color-mix(in srgb, var(--signal) 50%, transparent); margin-top: -14px; }
.flow__lane { border-radius: 4px; padding: 14px 16px 16px; background: color-mix(in srgb, var(--signal) 9%, transparent); transition: opacity 240ms var(--ease-out), background-color 240ms var(--ease-out); outline-offset: 2px; }
.flow__lane--b { background: color-mix(in srgb, var(--signal) 4%, transparent); }
.flow__lane--b .flow__track li::after { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--signal) 60%, transparent) 0 6px, transparent 6px 11px); }
.flow__lane .flow__track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow__lane .flow__track li::before { background: var(--surface); }
.flow__lane-name { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.flow__lane-name span { font-weight: 400; color: var(--muted); margin-left: 8px; }
.flow__lanes:has(.flow__lane:hover) .flow__lane:not(:hover),
.flow__lanes:has(.flow__lane:focus-visible) .flow__lane:not(:focus-visible) { opacity: 0.35; }
.flow__lane:hover, .flow__lane:focus-visible { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.flow__mine { font-size: 16px; max-width: 76ch; border-top: 1px solid var(--hairline); padding-top: 20px; }
.flow__mine strong { font-weight: 500; }

/* Scroll runs the map the way it fills the career line: initFlow sets --f (0 to 1) on each stop as the signal
   leaves it, and .is-on as the signal reaches it. Both routes leave the fork together and meet again at Signed.
   Without motion every stop is on and every line is full. */
.flow__track li, .flow__track--end { --f: 1; }
.flow__track li::after, .flow__track--end::before { background: linear-gradient(90deg, var(--signal) 0 calc(var(--f) * 100%), color-mix(in srgb, var(--signal) 22%, transparent) 0); }
.flow__lane--b .flow__track li::after { background: linear-gradient(90deg, var(--signal) 0 calc(var(--f) * 100%), color-mix(in srgb, var(--signal) 32%, transparent) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px); }
.flow__track li.is-gate::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 18%, transparent); }
.flow.is-animated .flow__track li::before { background: var(--surface); box-shadow: none; transition: background-color 320ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.flow.is-animated .flow__track li.is-on::before { background: var(--signal); }
.flow.is-animated .flow__track li.is-gate.is-on::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 18%, transparent); }
.flow.is-animated .flow__track li.is-arriving::before { animation: flow-ping 700ms var(--ease-out); }
@keyframes flow-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 50%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.flow.is-animated .flow__track li > * { opacity: 0.28; transform: translateY(6px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.flow.is-animated .flow__track li.is-on > * { opacity: 1; transform: none; }
.flow.is-animated .flow__track li.is-on > * + * { transition-delay: 80ms; }
.flow.is-animated .flow__lanes { border-inline-color: color-mix(in srgb, var(--signal) 22%, transparent); transition: border-color 400ms var(--ease-out); }
.flow.is-animated.is-forked .flow__lanes { border-inline-start-color: var(--signal); }
.flow.is-animated.is-merged .flow__lanes { border-inline-end-color: var(--signal); }
.flow.is-animated .flow__lane-name { opacity: 0.28; transition: opacity 520ms var(--ease-out); }
.flow.is-animated.is-forked .flow__lane-name { opacity: 1; }

@media (max-width: 1100px) {
  .flow__out { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flow__track--start li:last-child::after, .flow__track--end::before { display: none; }
  .flow__lanes { border-inline: 0; padding-inline: 0; margin-top: 0; }
  .flow__track--start, .flow__track--end { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .flow__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flow__track, .flow__lane .flow__track, .flow__track--start, .flow__track--end { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow__track li { padding-top: 0; padding-left: 26px; }
  .flow__track li::before { top: 3px; }
  .flow__track li::after { top: 19px; left: 5px; right: auto; bottom: calc(3px - 18px); width: 2px; height: auto; transform-origin: 50% 0; }
  .flow__track li::after { background: linear-gradient(180deg, var(--signal) 0 calc(var(--f) * 100%), color-mix(in srgb, var(--signal) 22%, transparent) 0); }
  .flow__lane--b .flow__track li::after { background: linear-gradient(180deg, var(--signal) 0 calc(var(--f) * 100%), color-mix(in srgb, var(--signal) 32%, transparent) 0); -webkit-mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 11px); mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 11px); }
  .flow__lane-name span { display: block; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow *, .flow *::before, .flow *::after, .flow__track li::before, .flow__track li::after { transition: none !important; animation: none !important; }
}

/* ---------- Point of view: three principles, one per stage ---------- */
.principles { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); counter-reset: none; }
.principle { display: grid; align-content: start; gap: 14px; padding-top: 24px; border-top: 2px solid var(--signal); }
.principle__num { font-size: clamp(72px, 8vw, 128px); line-height: 0.9; color: var(--signal); margin-left: -0.04em; }
.principle__name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; max-width: 18ch; }
.principle p { max-width: 46ch; }
.principle__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-top: 4px; }
.principle__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
@media (max-width: 900px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle__num { font-size: 64px; }
}

/* Hero intro film button (placeholder until the film is shot) */
.hero__film { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.hero__film-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); transition: background .3s, border-color .3s; }
.hero__film-icon svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.hero__film:not([disabled]):hover .hero__film-icon { background: var(--signal); border-color: var(--signal); }
.hero__film[disabled] { cursor: default; }
.hero__film[disabled] > span:not(.hero__film-tag) { opacity: .6; }
.hero__film-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--muted); }
.hero__film > span { white-space: nowrap; text-align: left; }
@media (max-width: 600px) { .hero__film { gap: 10px; flex-wrap: wrap; } .hero__film-tag { font-size: 10px; } }

/* Intro film section (placeholder until the film is shot) */
a.hero__film { text-decoration: none; }
a.hero__film:hover .hero__film-icon { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.intro__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px 24px; align-items: center; }
.intro__text { grid-column: 1 / 5; display: grid; gap: 24px; }
.intro__eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.intro__lead { font-size: clamp(18px, 1.4vw, 21px); color: var(--muted); max-width: 34ch; }
.intro__film { grid-column: 5 / 13; margin: 0; }
.intro__film figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 14px; color: var(--muted); }
.intro__frame { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px dashed var(--hairline); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.intro__frame[disabled] { cursor: default; }
.intro__play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--hairline); }
.intro__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.intro__frame[disabled] .intro__play { opacity: .5; }
.intro__frame:not([disabled]):hover .intro__play { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.intro__soon { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .intro__text, .intro__film { grid-column: 1 / -1; } }