/* davideriboni.com v9 · shared system (direction B "Cinematic Scroll", identity v9)
   Owned by the foundation build. Page builders do NOT edit this file: page styles go in ai.css or bio.css.
   Contents: tokens, base, type, buttons, header, footer, home film (hero, metrics, credits, record, career reel,
   leadership, applied AI, contribute, end card), inner-page components, reveals, film mode, print.
   Owner rule (19 Oct 2026): no halo, glow, ring or wash anywhere. Pure black; coral-gold only on type, rules and actions. */

@property --irx { syntax: '<number>'; inherits: false; initial-value: 64; }
@property --iry { syntax: '<number>'; inherits: false; initial-value: 54; }
@property --ix  { syntax: '<number>'; inherits: false; initial-value: 47; }
@property --iy  { syntax: '<number>'; inherits: false; initial-value: 36; }
@property --lit { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sw  { syntax: '<number>'; inherits: true;  initial-value: 0; }

@font-face { font-family: "Playfair Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 108%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #0A0A0A;
  --film: #000000;
  --bg2: #111111;
  --panel: #141414;
  --text: #F5F5F5;
  --text2: #BDBDBD;
  --line: #353535;
  --outline: #6B6B6B;
  --label: #FFC371;
  --focus: #FFC371;
  --ink: #0A0A0A;
  --grad: linear-gradient(110deg, #FF5F6D, #FFC371);
  --grad-text: linear-gradient(110deg, #FF5F6D 0%, #FFC371 100%);
  --num-grad: linear-gradient(110deg, #FF5F6D 0%, #FFC371 33.33%, #FF5F6D 66.66%, #FFC371 100%);
  --dim: .38;
  --serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(20px, 6.67vw, 96px);
  --head: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-x: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F8F5F0;
  --film: #F8F5F0;
  --bg2: #F3EFE9;
  --panel: #EFEBE5;
  --text: #201E1C;
  --text2: #59544F;
  --line: #D2CBC2;
  --outline: #8C8279;
  --label: #805017;
  --focus: #805017;
  --grad-text: linear-gradient(110deg, #A52F43 0%, #805017 100%);
  --num-grad: linear-gradient(110deg, #A52F43 0%, #805017 33.33%, #A52F43 66.66%, #805017 100%);
  --dim: .5;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 8px); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html:not(.cine) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.7 var(--sans);
  font-feature-settings: "cv11", "ss01", "lnum";
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
main { display: block; overflow-x: clip; }
main:focus { outline: none; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: #FFC371; color: #0A0A0A; }
:root[data-theme="light"] ::selection { background: #A52F43; color: #F8F5F0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
h1, h2, h3, h4, .h2, .h3, .metric__value, .case__k, .role__org, .edu dt, .contact__title { font-variant-numeric: lining-nums; }

.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; left: 12px; top: -80px; z-index: 100; background: var(--text); color: var(--bg); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), 1248px); margin-inline: auto; }
.nw { white-space: nowrap; }
.i { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Type */
.grad, .fill {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .3em; margin-bottom: -.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.h2 { font: 400 clamp(38px, 9.6vw, 48px)/1.06 var(--serif); letter-spacing: -.01em; text-wrap: balance; max-width: 16em; }
.h3 { font: 400 clamp(28px, 7vw, 34px)/1.15 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.lede { font-size: 18px; line-height: 1.65; color: var(--text2); max-width: 37em; margin-top: 22px; }
.label { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }

/* Buttons and links: arrows move in their direction, primary fill slides to gold */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  min-height: 50px; padding: 0 22px;
  font: 500 16px/1.2 var(--sans); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;
  transition: background-position .5s var(--ease-x), border-color .22s var(--ease), color .22s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--primary { color: #0A0A0A; background: linear-gradient(110deg, #FF5F6D 0%, #FFC371 50%, #FFC371 100%) 0 0 / 200% 100%; }
.btn--primary:hover { background-position: 100% 0; }
.btn--ghost { color: var(--text); border-color: var(--outline); background: transparent; }
.btn--ghost:hover { border-color: var(--text); }
.btn .i, .tlink .i { transition: transform .32s var(--ease-x); }
.btn:hover .i-down { transform: translateY(4px); }
.btn:hover .i-upright, .tlink:hover .i-upright { transform: translate(3px, -3px); }
.tlink:hover .i-right { transform: translateX(5px); }
.tlink { position: relative; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 500; color: var(--text); text-decoration: none; }
.tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .32s var(--ease-x); }
.tlink:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--outline); color: var(--text); transition: border-color .22s var(--ease); }
.icon-btn:hover { border-color: var(--text); }

/* Reading bar (2px, coral-gold) and the cut-to-black veil */
.progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html:not(.js) .progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress-grow linear both; animation-timeline: scroll(root); }
}
@keyframes progress-grow { to { transform: scaleX(1); } }
.veil { position: fixed; inset: 0; z-index: 80; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.veil.on { opacity: 1; transition-duration: .14s; }
:root[data-theme="light"] .veil { background: var(--bg); }

/* Header */
.site-head {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  height: var(--head);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gut);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head::before {
  content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--film) 0%, transparent 100%);
  opacity: .9; transition: opacity .3s var(--ease);
}
.site-head.is-solid { background: var(--bg); border-bottom-color: var(--line); }
.site-head.is-solid::before { opacity: 0; }
.site-head:has(.menu[open]) { background: var(--bg); border-bottom-color: var(--line); }
:root[data-theme="light"] .site-head { background: var(--bg); }
:root[data-theme="light"] .site-head::before { display: none; }
.wordmark { position: relative; font: 400 24px/1 var(--serif); letter-spacing: -.005em; color: var(--text); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark__dot { color: #FFC371; }
:root[data-theme="light"] .wordmark__dot { color: #805017; }
.nav, .prefs { display: none; }
.lang { display: flex; gap: 4px; }
.lang a { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-decoration: none; color: var(--text2); }
.lang a[aria-current="page"] { color: var(--text); }
.lang a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 2px; background: var(--grad); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
html:not(.js) .theme-toggle { display: none !important; }

/* Mobile menu */
.menu { margin-left: auto; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 0 0 12px; cursor: pointer; font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--outline); }
.menu__icon .i-x { display: none; }
.menu[open] .menu__icon .i-list { display: none; }
.menu[open] .menu__icon .i-x { display: block; }
.menu__panel { position: fixed; left: 0; right: 0; top: var(--head); bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 24px var(--gut) 40px; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.menu__panel nav { display: grid; }
.menu__panel nav a { font: 400 34px/1.2 var(--serif); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu__panel nav a[aria-current="page"] { color: var(--label); }
.menu__prefs { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.theme-toggle--text { gap: .7em; }

@media (min-width: 901px) {
  :root { --head: 72px; }
  body { font-size: 18px; }
  .menu { display: none; }
  .nav { display: flex; gap: 6px; margin-left: 20px; }
  .nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 500 15px/1 var(--sans); color: var(--text); text-decoration: none; opacity: .86; transition: opacity .18s var(--ease); }
  .nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 1px; background: #FF5F6D; transform: scaleX(0); transform-origin: 0 50%; transition: transform .32s var(--ease-x); }
  .nav a:hover { opacity: 1; }
  .nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { opacity: 1; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  :root[data-theme="light"] .nav a::after { background: #A52F43; }
  .prefs { display: flex; align-items: center; gap: 16px; margin-left: auto; }
  .h2 { font-size: clamp(48px, 4.6vw, 72px); }
  .h3 { font-size: clamp(32px, 2.8vw, 42px); }
  .lede { font-size: 20px; margin-top: 28px; }
}

/* =========================================================
   Shot 1 · HERO, cold open on true black
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #000; color: var(--text);
  /* phone and tablet: the plate takes the space the copy leaves, so the whole hero (actions included) fits one screen */
  height: 100svh; min-height: 560px;
  display: flex; flex-direction: column;
  padding: calc(var(--head) + 6px) 0 calc(22px + env(safe-area-inset-bottom, 0px));
}
/* light theme: the hero is a hard-edged black plate set into the cream page */
:root[data-theme="light"] .hero {
  --bg: #000; --film: #000; --text: #F5F5F5; --text2: #C9C9C9; --line: #353535; --outline: #8A8A8A;
  --label: #FFC371; --focus: #FFC371; --grad-text: linear-gradient(110deg, #FF5F6D 0%, #FFC371 100%);
  color-scheme: dark;
  margin: var(--head) 0 0;
}
.hero__media {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  mix-blend-mode: lighten;
  --edge-x: linear-gradient(to right, #000, #000);
  --edge-y: linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse calc(var(--irx) * 1%) calc(var(--iry) * 1%) at calc(var(--ix) * 1%) calc(var(--iy) * 1%), #000 0%, #000 46%, rgb(0 0 0 / .6) 70%, transparent 100%), var(--edge-x), var(--edge-y);
          mask-image: radial-gradient(ellipse calc(var(--irx) * 1%) calc(var(--iry) * 1%) at calc(var(--ix) * 1%) calc(var(--iy) * 1%), #000 0%, #000 46%, rgb(0 0 0 / .6) 70%, transparent 100%), var(--edge-x), var(--edge-y);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  --irx: 112; --iry: 92; --ix: 50; --iy: 46;
}
/* the plate hangs from the top of its box; its lower quarter (neck, collar) runs under the copy and is masked to black */
.hero__media picture { position: absolute; left: 50%; top: 0; height: calc(100% / .76); aspect-ratio: 1072 / 1600; translate: -50% 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 36%; }
.hero__copy { position: relative; z-index: 3; padding: 0 var(--gut); }
.hero__roles { display: grid; gap: 2px; font: 600 13px/1.45 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.hero__title { margin-top: 10px; font: 400 clamp(42px, 12.2vw, 52px)/.98 var(--serif); letter-spacing: -.02em; }
.ln { display: inline-block; }
.ln--1 { display: block; }
.ln__i { display: inline-block; }
.hero__title .grad { padding-bottom: .14em; margin-bottom: -.14em; }
.g1 { background-size: 200% 100%; background-position: 0 0; }
.g2 { background-size: 200% 100%; background-position: 100% 0; }
.hero__foot { margin-top: 16px; }
.hero__lede { font-size: 17px; line-height: 1.5; color: var(--text2); max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__actions .btn { flex: 1 1 auto; min-height: 48px; }
:root[data-theme="light"] .hero { height: calc(100svh - var(--head)); padding-top: 10px; }

@media (min-width: 600px) and (max-width: 900px) {
  .hero__title { font-size: clamp(56px, 10vw, 84px); }
  .hero__lede { font-size: 18px; }
  .hero__actions .btn { flex: 0 0 auto; }
}

@media (min-width: 901px) {
  .hero { height: 100svh; min-height: 600px; max-height: 1200px; padding: 0; display: block; }
  :root[data-theme="light"] .hero { height: calc(100svh - var(--head) - 24px); min-height: 540px; margin: calc(var(--head) + 12px) 12px 12px; padding: 0; }
  /* the crown clears the header by about 28px; the chin sits above the headline's second line */
  .hero__media {
    position: absolute; flex: none;
    left: 73%; right: auto; top: calc(var(--head) + 4px); height: min(84%, 1000px); width: auto; aspect-ratio: 1072 / 1600;
    translate: -50% 0;
    --edge-x: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .55) 12%, #000 26%);
    --edge-y: linear-gradient(to bottom, #000 0%, #000 61%, transparent 75%);
    --irx: 66; --iry: 56; --ix: 46; --iy: 36;
  }
  :root[data-theme="light"] .hero__media { top: 6px; }
  .hero__media picture { position: static; translate: none; width: 100%; height: 100%; display: block; }
  .hero__img { object-position: 50% 50%; }
  .hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vh, 104px); padding: 0 var(--gut); }
  .hero__title { margin-top: 20px; font-size: clamp(64px, min(9vw, 14.5vh), 156px); line-height: .98; letter-spacing: -.022em; }
  .hero__foot { margin-top: clamp(24px, 3.6vh, 40px); display: flex; align-items: center; gap: 48px; }
  .hero__lede { font-size: 20px; max-width: 25em; }
  .hero__actions { margin-top: 0; gap: 16px; flex: none; }
  .hero__actions .btn { flex: none; min-height: 56px; padding: 0 26px; }
  /* JS measures where "reality." starts and hangs the actions on that column */
  .hero__foot.has-col .hero__lede { flex: none; width: calc(var(--col) - 48px); max-width: 26em; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__media { left: 76%; }
}

/* Scroll cue: a thin line draws down once next to the word, then rests */
.hero__cue {
  position: absolute; z-index: 3; right: var(--gut); top: calc(100svh - 92px);
  display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
  font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--text2);
}
.hero__cue-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--text2), transparent); transform-origin: 50% 0; }
/* phone: no cue, the two actions on the first screen already point down */
@media (min-width: 901px) {
  .hero__cue { display: flex; right: auto; left: 50%; top: auto; bottom: 22px; translate: -50% 0; flex-direction: row; gap: 14px; }
  .hero__cue-line { width: 40px; height: 1px; background: linear-gradient(to right, var(--text2), transparent); transform-origin: 0 50%; }
  .hero__copy { bottom: clamp(76px, 11vh, 112px); }
}
@keyframes cue-draw { from { transform: scale(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__cue { animation: soft-rise .8s var(--ease-x) 1.4s backwards; }
  .hero__cue-line { animation: cue-draw 1.2s var(--ease-io) 1.8s backwards; }
}

/* Load: the iris opens on the face, the shaft settles, lines rise blur-to-sharp 90ms apart (CSS, rests in the final state) */
/* the iris starts wide (about 40%) so the first frame reads as light opening on the face, never a keyhole */
@keyframes iris-open {
  0%   { --irx: 40; --iry: 34; }
  35%  { --irx: 52; --iry: 44; }
}
@keyframes img-settle { from { transform: scale(1.07); filter: brightness(.3); } }
@keyframes line-rise { from { opacity: 0; transform: translateY(.34em); filter: blur(12px); } }
@keyframes soft-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .intro .hero__media { animation: iris-open 1.7s var(--ease-x) .05s backwards; }
  .intro .hero__img { animation: img-settle 1.9s var(--ease-x) backwards; }
  .intro .hero__roles { animation: soft-rise .8s var(--ease-x) .42s backwards; }
  .intro .hero__title .ln__i { animation: line-rise .95s var(--ease-x) backwards; }
  .intro .hero__title .ln--1 .ln__i { animation-delay: .55s; }
  .intro .hero__title .ln--2 .ln__i { animation-delay: .64s; }
  .intro .hero__title .ln--3 .ln__i { animation-delay: .73s; }
  .intro .hero__lede { animation: soft-rise .8s var(--ease-x) 1s backwards; }
  .intro .hero__actions { animation: soft-rise .8s var(--ease-x) 1.1s backwards; }
  .intro .site-head { animation: fade-in .8s var(--ease) .2s backwards; }
}

/* =========================================================
   Shot 3 · METRICS
   ========================================================= */
.metrics { position: relative; background: var(--bg); }
.metrics__stage { position: relative; }
.metrics__list { position: relative; z-index: 1; }
.metric {
  position: relative;
  padding: 64px var(--gut) 68px;
  border-top: 1px solid var(--line);
  display: grid; justify-items: start; align-content: center;
}
.metric__value {
  position: relative; display: inline-block;
  font: 400 1px/0.86 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.035em;
  background: var(--num-grad); background-size: 300% 100%; background-position: calc(var(--sw) * 1%) 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding: .04em .05em .12em 0; margin-left: -.04em;
  white-space: nowrap;
}
/* count-up: the DOM keeps the real value; the running number is generated content */
.metric__value.is-counting { background: none; }
.metric__value.is-counting::after {
  content: attr(data-run); content: attr(data-run) / "";
  position: absolute; inset: 0; padding: inherit; text-align: right;
  background: var(--num-grad); background-size: 300% 100%; background-position: calc(var(--sw) * 1%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.m-3x .metric__value { font-size: 46vw; }
.m-range .metric__value { font-size: 16.4vw; letter-spacing: -.045em; }
.m-8 .metric__value { font-size: 58vw; }
.m-25 .metric__value { font-size: 40vw; }
.metric__cap { margin-top: 18px; }
.metric__label { font: 400 26px/1.2 var(--serif); color: var(--text); text-wrap: balance; }
.metric__note { margin-top: 8px; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.metric__viz { flex: none; height: auto; margin-top: 28px; overflow: visible; }
.metric__viz text { font: 500 13px var(--sans); fill: var(--text2); letter-spacing: .02em; }
.viz-bars { width: 240px; }
.viz-range { width: 320px; max-width: 100%; }
.viz-base, .viz-tick { stroke: var(--outline); stroke-width: 1.5; }
.viz-ghost { fill: none; stroke: var(--outline); stroke-width: 1.5; }
.viz-bars .viz-fill { fill: #FFA06E; }
.viz-range .viz-fill { fill: #FF8E6C; }
.viz-grow, .viz-band { transform-box: fill-box; }
.viz-grow { transform-origin: 50% 100%; }
.viz-band { transform-origin: 0 50%; }
:root[data-theme="light"] .viz-bars .viz-fill, :root[data-theme="light"] .viz-range .viz-fill { fill: #A52F43; }
.metrics__steps { display: none; }

@media (min-width: 901px) {
  /* static desktop: a ledger, one numeric size for every metric */
  .metric {
    padding: 56px 0;
    width: min(100% - 2 * var(--gut), 1248px); margin-inline: auto;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end;
  }
  .metric .metric__value { font-size: clamp(88px, 8.4vw, 132px); letter-spacing: -.03em; grid-row: span 2; }
  .metric__cap { margin: 0; grid-column: 2; }
  .metric__viz { grid-column: 2; margin-top: 20px; }
  .metric__label { font-size: 30px; }
}

/* =========================================================
   Shot 4 · CREDITS
   ========================================================= */
.credits { padding: 80px var(--gut) 88px; text-align: center; border-top: 1px solid var(--line); }
.credits__title { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.credits__logos { margin: 36px auto 0; max-width: 1180px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; align-items: center; justify-items: center; }
.credits__logos li { display: grid; place-items: center; min-height: 48px; }
.credits__logos li:last-child { grid-column: 1 / -1; }
.logo { height: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .92; }
:root[data-theme="light"] .logo { filter: brightness(0); opacity: .86; }
@media (min-width: 901px) {
  .credits { padding: 64px var(--gut) 72px; }
  .credits__logos { grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 48px; margin-top: 44px; }
  .credits__logos li:last-child { grid-column: auto; }
}

/* =========================================================
   Shot 5 · TRACK RECORD
   ========================================================= */
.record { position: relative; padding-top: 88px; }
.record__head { max-width: 60rem; }
.case { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); display: grid; gap: 36px; }
.case__intro .h3 { margin-top: 16px; }
.case__intro p:last-child { margin-top: 18px; color: var(--text2); max-width: 34em; }
.case__points li { padding: 22px 0 24px; border-top: 1px solid var(--line); position: relative; }
.case__points li::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--grad); transform-origin: 0 50%; }
.case__k { font: 400 26px/1.2 var(--serif); }
.case__k .grad { font-size: 1.2em; padding-bottom: .12em; }
.case__points li p:last-child:not(.case__k) { margin-top: 8px; color: var(--text2); }
@media (min-width: 901px) {
  .record { padding-top: 88px; }
  .case { margin-top: 60px; padding-top: 40px; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 26px 72px; }
  .case__points li { padding: 24px 0 28px; }
  .case__k { font-size: 30px; }
}

/* Career: static = vertical, newest first, earlier career in a disclosure */
.career { position: relative; margin-top: 88px; }
.career__years { display: none; }
.career__rail { width: min(100% - 2 * var(--gut), 1248px); margin-inline: auto; }
.career__head { padding-bottom: 28px; }
.career__head p { margin-top: 14px; color: var(--text2); max-width: 30em; }
.role { position: relative; padding: 0 0 36px 28px; border-left: 1px solid var(--line); }
.role::before { content: ""; position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; background: var(--grad); }
.role__span { font: 600 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.role--now .role__span { color: var(--label); }
.role__org { margin-top: 6px; font: 400 30px/1.15 var(--serif); }
.role--minor .role__org { font-size: 24px; }
.role__title { margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--label); }
.role__text { margin-top: 12px; color: var(--text2); max-width: 34em; }
.role__fact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; color: var(--text); max-width: 34em; }
.career__more { margin-top: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.career__more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; font: 400 24px/1.2 var(--serif);
}
.career__more > summary::-webkit-details-marker { display: none; }
.career__more > summary .i { transition: transform .32s var(--ease-x); }
.career__more[open] > summary .i { transform: rotate(45deg); }
.career__earlier { padding-top: 12px; }
.career__edu { padding: 8px 0 28px; }
.edu { margin-top: 14px; display: grid; gap: 14px; }
.edu dt { font: 400 22px/1.3 var(--serif); }
.edu dd { margin-top: 2px; color: var(--text2); }
.career__end { margin-top: 24px; }
.career__langs { color: var(--text2); }
.career__end .tlink { margin-top: 8px; }
@media (min-width: 901px) {
  .career { margin-top: 128px; }
  .career__head { max-width: 40rem; padding-bottom: 48px; }
  .role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 26px; padding: 32px 0 36px; border-left: 0; border-top: 1px solid var(--line); }
  .role > * { grid-column: 2; }
  .role .role__span { grid-column: 1; grid-row: 1 / span 4; padding-top: 10px; }
  .role::before { left: 0; top: -5px; }
  .role__org { font-size: 36px; margin-top: 0; }
  .role--minor .role__org { font-size: 28px; }
  .career__more > summary { min-height: 80px; font-size: 30px; }
  .career__edu { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 26px; padding: 32px 0 40px; border-top: 1px solid var(--line); }
  .career__edu .edu { margin-top: 0; }
}

/* =========================================================
   Shot 7 · LEADERSHIP, full black frame, words lit by the scroll
   ========================================================= */
.lead { position: relative; padding-bottom: 96px; }
.lead__frame { position: relative; isolation: isolate; overflow: hidden; background: var(--film); padding: 120px 0 104px; }
.lead__frame::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
/* feathered top edge: the canvas dissolves into the film black, no hard seam */
.lead__frame::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(to bottom, var(--bg), transparent); pointer-events: none; }
.lead__inner { position: relative; z-index: 1; text-align: center; }
@media (max-width: 600px) { .lead__inner { text-align: left; } .lead__title { margin-inline: 0; } }
.lead__title { font: 400 clamp(36px, 9vw, 46px)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; max-width: 18em; margin-inline: auto; }
.lead__statement {
  margin: 32px auto 0;
  font: 400 clamp(25px, 6.4vw, 30px)/1.36 var(--serif);
  letter-spacing: -.005em; max-width: 26em; text-wrap: pretty;
  color: var(--text);
}
.w { opacity: calc(var(--dim) + (1 - var(--dim)) * var(--lit)); }
.principles { margin-top: 56px; }
.principles li { padding: 26px 0 30px; border-top: 1px solid var(--line); display: grid; gap: 10px; position: relative; }
.principles li::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--grad); transform-origin: 0 50%; }
.principle__k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.principle__h { font: 400 26px/1.22 var(--serif); color: var(--text); text-wrap: balance; }
.principles li > p:last-child { color: var(--text2); }
.lead__belief { margin-top: 40px; font: 400 clamp(24px, 6vw, 30px)/1.35 var(--serif); max-width: 26em; position: relative; padding-top: 28px; }
.lead__belief::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 2px; background: var(--grad); transform-origin: 0 50%; }
@media (min-width: 901px) {
  .lead { padding-bottom: 80px; }
  .lead__frame { min-height: 100svh; display: grid; align-items: center; padding: 140px 0; }
  .lead__title { font-size: clamp(52px, 4.9vw, 78px); }
  .lead__statement { margin-top: 48px; font-size: clamp(32px, 2.85vw, 44px); line-height: 1.32; max-width: 25em; }
  .principles { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .principles li { align-content: start; padding: 32px 0 8px; }
  .principle__h { font-size: 30px; }
  .lead__belief { margin-top: 48px; font-size: 30px; max-width: none; margin-inline: auto; text-align: center; padding-top: 36px; }
  .lead__belief::before { left: 50%; translate: -50% 0; }
}

/* =========================================================
   Shot 8 · APPLIED AI
   ========================================================= */
.ai { padding: 88px 0 96px; border-top: 1px solid var(--line); position: relative; }
.ai .h2 { max-width: 18em; }
.fill { background-size: 100% 100%; background-repeat: no-repeat; }
.fill.armed { background-image: var(--grad-text), linear-gradient(var(--text), var(--text)); background-size: 0% 100%, 100% 100%; transition: background-size 1.6s var(--ease-x); }
.fill.armed.in { background-size: 100% 100%, 100% 100%; }
.bento { margin-top: 48px; display: grid; gap: 16px; }
.card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__body { padding: 24px 24px 28px; }
.card__k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.card__h { margin-top: 10px; font: 400 28px/1.18 var(--serif); }
.card__body > p:nth-of-type(2) { margin-top: 12px; color: var(--text2); }
.card__tags { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }

/* diagrams: labels are HTML (14px), drawn on entry */
.dg { margin: 28px 24px 0; }
.dg-converge { position: relative; aspect-ratio: 640 / 320; }
.dg-converge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg-src { fill: none; stroke: var(--outline); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dg-out { fill: none; stroke: #FFB16F; stroke-width: 3; vector-effect: non-scaling-stroke; }
.dg-node { fill: #FFC371; }
.dg-l, .dg-o { position: absolute; font: 500 14px/1.3 var(--sans); color: var(--text2); white-space: nowrap; }
.dg-l { left: 0; top: var(--y); transform: translateY(calc(-100% - 6px)); }
.dg-l--below { transform: translateY(8px); }
.dg-o { right: 0; top: 50%; transform: translateY(calc(-100% - 10px)); color: var(--text); text-align: right; white-space: normal; max-width: 32%; }
.dg-heat { width: 100%; max-width: 360px; height: auto; }
.dg-heat rect { fill: #242424; }
.dg-heat rect.h { fill: #FF9A6C; fill-opacity: calc(.3 + var(--o) * .7); }
:root[data-theme="light"] .dg-heat rect { fill: #E2DBD2; }
:root[data-theme="light"] .dg-heat rect.h { fill: #A52F43; }
.dg-flow { position: relative; height: 54px; max-width: 420px; }
.dg-flow::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 1.5px; background: var(--outline); transform-origin: 0 50%; }
.dg-flow li { position: absolute; top: 0; font: 500 14px/1 var(--sans); color: var(--text2); padding-top: 28px; white-space: nowrap; }
.dg-flow li::before { content: ""; position: absolute; top: 0; width: 14px; height: 14px; background: var(--panel); border: 1.5px solid var(--text2); }
.dg-flow li:nth-child(1) { left: 0; }
.dg-flow li:nth-child(1)::before { left: 0; }
.dg-flow li:nth-child(2) { left: 33.3%; transform: translateX(-50%); }
.dg-flow li:nth-child(3) { left: 66.6%; transform: translateX(-50%); }
.dg-flow li:nth-child(2)::before, .dg-flow li:nth-child(3)::before { left: 50%; margin-left: -7px; }
.dg-flow li:nth-child(4) { right: 0; }
.dg-flow li:nth-child(4)::before { right: 0; background: #FFC371; border-color: #FFC371; }
:root[data-theme="light"] .dg-out { stroke: #A52F43; }
:root[data-theme="light"] .dg-node { fill: #805017; }
:root[data-theme="light"] .dg-flow li:nth-child(4)::before { background: #805017; border-color: #805017; }
@media (max-width: 420px) { .dg-l, .dg-o { font-size: 13px; } }
@media (max-width: 600px) {
  .dg-flow { height: 84px; }
  .dg-flow::before { top: 37px; }
  .dg-flow li { top: 30px; padding-top: 26px; }
  .dg-flow li:nth-child(even) { top: auto; bottom: 54px; padding-top: 0; padding-bottom: 12px; }
  .dg-flow li::before { top: 0; }
  .dg-flow li:nth-child(even)::before { top: auto; bottom: -30px; }
}

/* drawn on entry (armed only below the fold, by JS) */
/* pathLength=1 with a non-scaling stroke is mis-measured in Chrome (the line stopped about 30px short of the node);
   a dash of 2 over a gap of 2 always covers the whole path at rest and none of it at the start */
.dg.armed .dg-src, .dg.armed .dg-out { stroke-dasharray: 2 2; stroke-dashoffset: 2; transition: stroke-dashoffset 2s var(--ease-io) calc(var(--d, 0) * 1s); }
.dg.armed.in .dg-src, .dg.armed.in .dg-out { stroke-dashoffset: 0; }
.dg.armed.done .dg-src, .dg.armed.done .dg-out { stroke-dasharray: none; transition: none; }
.dg.armed .dg-node, .dg.armed .dg-o, .dg.armed .dg-l { opacity: 0; transition: opacity .6s var(--ease) calc(var(--d, 0) * 1s); }
.dg.armed.in .dg-node, .dg.armed.in .dg-o, .dg.armed.in .dg-l { opacity: 1; }
.dg-heat.armed rect { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .5s var(--ease) calc(var(--d, 0) * 1s), transform .7s var(--ease-x) calc(var(--d, 0) * 1s); }
.dg-heat.armed.in rect { opacity: 1; transform: none; }
.dg-flow.armed::before { transform: scaleX(0); transition: transform 1.2s var(--ease-io) .1s; }
.dg-flow.armed.in::before { transform: none; }
.dg-flow.armed li { opacity: .25; transition: opacity .5s var(--ease) calc(var(--d, 0) * 1s); }
.dg-flow.armed.in li { opacity: 1; }

.ai__close { margin-top: 48px; }
.ai__principle { font: 400 clamp(24px, 6vw, 30px)/1.35 var(--serif); max-width: 30em; }
.ai__close .tlink { margin-top: 20px; }
@media (min-width: 901px) {
  .ai { padding: 104px 0 88px; }
  .ai__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .ai__head .h2 { max-width: none; }
  .ai__head .lede { margin: 0 0 8px; font-size: 19px; }
  .bento { margin-top: 48px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; }
  .card--a { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .card--a .dg { margin: 40px 0 40px 44px; }
  .card--a .card__body { padding: 36px 48px 36px 56px; }
  .card--a .card__h { font-size: 38px; }
  .card--b, .card--c { grid-column: span 6; }
  .card--b .dg, .card--c .dg { margin: 32px 36px 0; }
  .card--b .dg-heat { max-width: 280px; }
  .card--b .card__body, .card--c .card__body { padding: 24px 36px 32px; margin-top: auto; }
  .ai__close { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 26px; align-items: end; }
  .ai__principle { font-size: 32px; }
  .ai__close .tlink { justify-self: end; margin: 0; }
}

/* =========================================================
   Shot 9 · WHERE I CONTRIBUTE, set as end credits
   ========================================================= */
.areas { padding: 88px 0; background: linear-gradient(to bottom, var(--bg), var(--film) 160px); }
.roll { margin-top: 40px; display: grid; }
.roll li { position: relative; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.roll h3 { font: 400 26px/1.2 var(--serif); }
.roll p { margin-top: 8px; color: var(--text2); }
@media (min-width: 901px) {
  .areas { padding: 100px 0 104px; }
  .areas__title { margin-inline: auto; text-align: center; }
  .roll { margin: 52px auto 0; max-width: 1080px; row-gap: 26px; }
  .roll li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: baseline; padding: 0; border: 0; }
  .roll li::before { content: ""; position: absolute; left: 50%; top: .62em; width: 5px; height: 5px; margin-left: -2.5px; background: #FFC371; }
  :root[data-theme="light"] .roll li::before { background: #805017; }
  .roll h3 { text-align: right; font-size: 30px; }
  .roll p { margin-top: 0; max-width: 27em; }
}

/* =========================================================
   Shot 10 · CONTACT end card (also the closing band of inner pages: .contact--band)
   ========================================================= */
.contact { position: relative; isolation: isolate; overflow: hidden; padding: 112px 0 104px; text-align: center; background: var(--film); }
/* a static coral-gold hairline closes the end card (a rule, not a glow) */
.contact::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #FF5F6D 30%, #FFC371 70%, transparent); }
:root[data-theme="light"] .contact::after { background: linear-gradient(90deg, transparent, #A52F43 30%, #805017 70%, transparent); }
.contact__title { font: 400 clamp(36px, 10vw, 56px)/1.06 var(--serif); letter-spacing: -.015em; }
.contact__title .ln { display: block; text-wrap: balance; }
.contact__meta { margin-top: 26px; display: grid; gap: 2px; color: var(--text2); }
.contact__email { margin: 36px auto 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; border: 1px solid var(--line); padding: 6px 6px 6px 20px; max-width: 100%; }
.contact__address { font: 500 18px/1.3 var(--sans); overflow-wrap: anywhere; }
.copy { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 16px; border: 1px solid var(--outline); font-weight: 500; font-size: 15px; transition: border-color .22s var(--ease); }
.copy:hover { border-color: var(--text); }
.copy .i { width: 18px; height: 18px; }
.copy .i-check { display: none; }
.copy[hidden] { display: none; }
.copy.is-done .i-copy { display: none; }
.copy.is-done .i-check { display: block; }
.contact__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 480px) {
  .contact__actions .btn { flex: 1 1 100%; }
  .contact__email { padding: 12px; }
}
@media (min-width: 901px) {
  .contact { min-height: 92svh; display: grid; align-items: center; padding: 128px 0 120px; }
  .contact__title { font-size: clamp(64px, 7.2vw, 116px); }
  .contact__meta { margin-top: 36px; display: flex; justify-content: center; gap: 28px; font-size: 18px; }
  .contact__meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--outline); vertical-align: middle; margin-right: 28px; }
  .contact__email { margin-top: 48px; }
  .contact__address { font-size: 20px; }
  .contact__actions { margin-top: 32px; gap: 16px; }
  .contact__actions .btn { min-height: 56px; padding: 0 26px; }
}

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.site-foot__inner { display: grid; gap: 20px; }
.site-foot__brand { display: grid; gap: 4px; color: var(--text2); }
.site-foot__brand .wordmark { min-height: 0; font-size: 22px; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-foot__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; font-size: 16px; }
.site-foot__nav a:hover { text-decoration: underline; text-decoration-color: #FF5F6D; text-underline-offset: 6px; }
.site-foot__legal { color: var(--text2); font-size: 15px; }
@media (min-width: 901px) {
  .site-foot__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
  .site-foot__nav { justify-content: center; }
}

/* Toast */
.toast { position: fixed; z-index: 70; left: var(--gut); bottom: 24px; background: var(--text); color: var(--bg); padding: 12px 18px; font-weight: 500; font-size: 15px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.toast.is-on { opacity: 1; transform: none; }
.toast:empty { display: none; }

/* =========================================================
   Reveals (lite and film). Only elements below the fold are armed; never below 55% opacity.
   ========================================================= */
.armed-r { opacity: .55; transform: translateY(22px); transition: opacity .8s var(--ease-x), transform .9s var(--ease-x); }
.armed-r.in { opacity: 1; transform: none; }
.metric.armed-r .metric__value { transform: scale(.92); filter: blur(8px); transform-origin: 0 100%; transition: transform 1.2s var(--ease-x), filter 1s var(--ease-x); }
.metric.armed-r.in .metric__value { transform: none; filter: none; }
.metric.armed-r .metric__cap { transform: translateY(16px); transition: transform .8s var(--ease-x) .25s; }
.metric.armed-r.in .metric__cap { transform: none; }
.case__points li.armed-r::before, .principles li.armed-r::before, .lead__belief.armed-r::before { transform: scaleX(0); transition: transform .9s var(--ease-x) .2s; }
.case__points li.armed-r.in::before, .principles li.armed-r.in::before, .lead__belief.armed-r.in::before { transform: scaleX(1); }
.viz-bars.armed .viz-grow { transform: scaleY(.3333); transition: transform 1.2s var(--ease-x) .35s; }
.in .viz-bars.armed .viz-grow { transform: none; }
.viz-range.armed .viz-band { transform: scaleX(0); transition: transform 1.2s var(--ease-x) .35s; }
.in .viz-range.armed .viz-band { transform: none; }
.contact__title.armed .ln__i { opacity: .2; transform: translateY(.3em); filter: blur(12px); transition: opacity 1s var(--ease-x), transform 1.1s var(--ease-x), filter 1s var(--ease-x); }
.contact__title.armed .ln:nth-child(2) .ln__i { transition-delay: .09s; }
.contact__title.armed.in .ln__i { opacity: 1; transform: none; filter: none; }

/* =========================================================
   FILM MODE (desktop, fine pointer, motion allowed, GSAP loaded)
   ========================================================= */

/* metrics: one numeral per beat on a black stage */
.cine .metrics { background: var(--film); z-index: 2; }
.cine .metrics__stage { height: 100vh; overflow: clip; }
:root[data-theme="light"].cine .metrics__stage { overflow: clip; }
.cine .metrics__list { position: absolute; inset: 0; }
.cine .metric {
  position: absolute; inset: 0; width: auto; margin: 0;
  padding: var(--head) var(--gut) 64px; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.cine .metric .metric__value { grid-row: auto; letter-spacing: -.04em; padding: .02em .06em .1em; will-change: transform, filter, opacity; }
.cine .m-3x .metric__value { font-size: min(46vh, 30vw); }
.cine .m-range .metric__value { font-size: min(13.6vw, 27vh); letter-spacing: -.05em; }
.cine .m-8 .metric__value { font-size: min(56vh, 40vw); }
.cine .m-25 .metric__value { font-size: min(48vh, 30vw); }
.cine .metric__cap { margin-top: 1.4vh; }
.cine .metric__label { font-size: clamp(26px, 2.2vw, 34px); }
.cine .metric__note { margin-top: 8px; }
.cine .metric__viz { margin-top: 2.6vh; }
.cine .metrics__steps { display: flex; gap: 8px; position: absolute; z-index: 2; left: 50%; bottom: 28px; translate: -50% 0; }
.cine .metrics__steps span { width: 36px; height: 2px; background: var(--line); transition: background-color .3s var(--ease); }
.cine .metrics__steps span.on { background: #FFC371; }
:root[data-theme="light"].cine .metrics__steps span.on { background: #805017; }

/* career reel: cards in front, giant outlined years behind at 0.55x */
.cine .career { margin-top: 80px; }
.cine .career__pin { position: relative; height: 100vh; overflow: clip; display: flex; align-items: center; border-top: 1px solid var(--line); }
.cine .career__years { display: block; position: absolute; left: 0; top: 0; height: 100%; width: 1px; z-index: 0; pointer-events: none; will-change: transform; }
.career__year {
  --ymaj: min(25vh, 220px); --ymin: min(12vh, 104px);
  position: absolute; top: calc(var(--head) + 4vh); white-space: nowrap;
  font: 400 var(--ymaj)/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.03em; opacity: var(--yo, 1);
  color: transparent; -webkit-text-stroke: 1px var(--outline);
}
.career__year::after {
  content: attr(data-y); position: absolute; left: 0; top: 0;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0; opacity: 0; filter: blur(10px);
  transition: opacity .9s var(--ease-x), filter .9s var(--ease-x);
}
.career__year--minor { font-size: var(--ymin); top: calc(var(--head) + 4vh + .8 * (var(--ymaj) - var(--ymin))); }
.career__year.is-lit { -webkit-text-stroke-color: transparent; transition: -webkit-text-stroke-color .6s var(--ease); }
.career__year.is-lit::after { opacity: .9; filter: none; }
.career__year.is-past::after { opacity: .28; }
.cine .career__rail { position: relative; z-index: 1; width: max-content; margin: 0; padding: 0 var(--gut); margin-top: 26vh; display: flex; align-items: flex-start; will-change: transform; }
.cine .career__head { flex: none; width: 460px; padding: 0 96px 0 0; }
.cine .career__list, .cine .career__earlier { display: flex; }
.cine .career__more { display: none; }
.cine .role { flex: none; width: 300px; margin-right: 56px; padding: 26px 0 0; border: 0; border-top: 1px solid var(--line); display: block; }
.cine .role > * { grid-column: auto; }
.cine .role--major { width: 470px; margin-right: 72px; }
.cine .role--minor + .role--major { margin-left: 80px; }
.cine .role::before { left: 0; top: -5px; background: var(--line); transition: background-color .5s var(--ease); }
.cine .role::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-x); }
.cine .role.is-lit::before { background: #FFC371; }
:root[data-theme="light"].cine .role.is-lit::before { background: #805017; }
.cine .role.is-lit::after { transform: scaleX(1); }
.cine .role .role__span { padding: 0; }
.cine .role__org { font-size: 38px; margin-top: 8px; }
.cine .role--minor .role__org { font-size: 28px; }
.cine .role__text { max-width: 26em; }
.cine .career__end { flex: none; width: 420px; margin: 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.cine .career__end .career__edu { padding: 0 0 18px; display: block; border: 0; }
.cine .career__end .edu dt { font-size: 21px; }

/* leadership words lit by the scroll (no pin) */
.cine .lead__statement .w { transition: none; }

/* print: everything at rest */
@media print {
  :root, :root[data-theme="light"] { --bg: #fff; --film: #fff; --panel: #fff; --text: #201E1C; --text2: #59544F; --line: #D2CBC2; --grad-text: linear-gradient(#A52F43, #A52F43); --num-grad: linear-gradient(#A52F43, #A52F43); --label: #805017; }
  .site-head, .progress, .veil, .menu, .toast, .copy, .metrics__steps, .hero__cue, .theme-toggle, .lang { display: none !important; }
  .contact::after { display: none; }
  * { animation: none !important; transition: none !important; }
  .armed-r { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero { background: #fff; color: #201E1C; }
  .hero__media { -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal; }
  .career__more { display: block; }
}

/* =========================================================
   Final pass (19 Oct): film refinements
   ========================================================= */
/* the metrics stage dissolves into the credits instead of cutting */
.cine .credits { border-top: 0; background: linear-gradient(to bottom, var(--film), var(--bg) 180px); }
/* no thin rule directly under the fixed header at section starts */
.cine .ai, .cine .career__pin { border-top: 0; }
/* less dead air between the career reel and the leadership frame */
.cine .career__rail { margin-top: 18vh; }
/* the leadership frame slides up over the empty foot of the released reel (its top edge is a feather, so no seam) */
.cine .lead { margin-top: -12vh; z-index: 1; }
.cine .lead__frame { min-height: 0; padding: 72px 0 132px; }
.cine .lead__frame::before { height: 120px; }

/* metrics index: all four facts stay on screen as a chapter bar; the giant numerals above are the picture */
.metrics__index { display: none; }
.cine .metrics__steps { display: none; }
.cine .metrics__index {
  position: absolute; z-index: 2; left: 50%; bottom: 26px; translate: -50% 0;
  width: min(100% - 2 * var(--gut), 1248px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px;
  text-align: left;
}
.mi { position: relative; padding-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; color: var(--text2); transition: color .4s var(--ease); }
.mi::before, .mi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.mi::before { background: var(--line); }
.mi::after { background: #FFC371; transform: scaleX(var(--f, 0)); transform-origin: 0 50%; opacity: .55; }
.mi.on::after { opacity: 1; }
:root[data-theme="light"] .mi::after { background: #805017; }
.mi__v { font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; white-space: nowrap; grid-row: span 2; }
.mi__l { font: 500 14px/1.35 var(--sans); }
.mi__n { font: 500 13px/1.35 var(--sans); color: var(--text2); opacity: .9; }
.mi.on { color: var(--text); }
.mi.on .mi__v { color: var(--label); }
.cine .metric { padding-bottom: 118px; }
@media (max-height: 820px) { .cine .metric__viz { display: none; } }

/* lining figures everywhere in the serif: the font shorthands above reset font-variant-numeric, so it is restated last */
.hero__title, .h2, .h3, .case__k, .edu dt, .contact__title, .lead__title, .lead__statement, .lead__belief,
.principle__h, .role__org, .metric__label, .card__h, .roll h3, .ai__principle, .career__more > summary, .mi__v,
.cine .role__org, .cine .career__end .edu dt { font-variant-numeric: lining-nums; }

/* folded earlier career still names every employer and school (reader mode, agents, find-in-page) */
.career__more-sub { display: block; margin-top: 4px; font: 400 15px/1.45 var(--sans); color: var(--text2); }
.career__more[open] .career__more-sub { display: none; }
.career__more > summary > span:first-child { padding: 12px 0; }

/* no JavaScript: nothing toggles the header state, so it is solid from the start (copy never runs under a clear bar) */
html:not(.js) .site-head { background: var(--bg); border-bottom-color: var(--line); }
html:not(.js) .site-head::before { display: none; }


/* =========================================================
   v9 additions shared by every page
   ========================================================= */
/* the email in the end card is a real mailto link */
a.contact__address { text-decoration: none; background: linear-gradient(var(--text), var(--text)) 0 100% / 0 1px no-repeat; transition: background-size .32s var(--ease-x); }
a.contact__address:hover { background-size: 100% 1px; }
/* in-page targets land below the fixed header */
[id] { scroll-margin-top: calc(var(--head) + 8px); }
.metrics, .hero { scroll-margin-top: 0; }

/* =========================================================
   INNER PAGES (biography, applied AI, EN and IT)
   Same cinematic voice as the home film, without pins:
   black page hero, big Playfair title with a gradient phrase, long-form chapters with
   sticky section labels, facts table, vertical timeline, FAQ, sources, cards, closing band.
   ========================================================= */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--film); color: var(--text);
  padding: calc(var(--head) + 48px) 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero__inner { display: grid; gap: 40px; }
.page-hero__copy { min-width: 0; }
.page-hero__title {
  margin-top: 18px;
  font: 400 clamp(44px, 12vw, 60px)/1.0 var(--serif); letter-spacing: -.02em;
  font-variant-numeric: lining-nums; text-wrap: balance; max-width: 13em;
}
.page-hero__title .ln { display: block; }
.page-hero__title .grad { padding-bottom: .14em; margin-bottom: -.14em; }
.page-hero__lede { margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--text2); max-width: 34em; }
.page-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 6px 28px; font: 500 14px/1.45 var(--sans); color: var(--text2); }
.page-hero__meta li { position: relative; }
.page-hero__meta li + li::before { content: ""; position: absolute; left: -16px; top: .62em; width: 4px; height: 4px; background: var(--outline); }
@media (max-width: 600px) { .page-hero__meta { display: grid; gap: 2px; } .page-hero__meta li + li::before { display: none; } }
/* optional portrait: a hard-edged black plate (also in the light theme), monochrome, never stretched */
.page-hero__media { position: relative; width: min(100%, 300px); aspect-ratio: 1072 / 1600; background: #000; overflow: hidden; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
@media (max-width: 900px) { .page-hero--portrait .page-hero__media { order: -1; width: min(56%, 240px); } }
@media (min-width: 901px) {
  .page-hero { min-height: min(86svh, 880px); display: flex; align-items: flex-end; padding: calc(var(--head) + 72px) 0 88px; }
  .page-hero > .wrap { width: min(100% - 2 * var(--gut), 1248px); }
  .page-hero__title { margin-top: 24px; font-size: clamp(64px, min(7vw, 12vh), 116px); line-height: .98; letter-spacing: -.022em; }
  .page-hero__lede { margin-top: 32px; font-size: 21px; }
  .page-hero__actions { margin-top: 40px; gap: 16px; }
  .page-hero__actions .btn { min-height: 56px; padding: 0 26px; }
  .page-hero--portrait .page-hero__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 64px; align-items: end; }
  .page-hero--portrait .page-hero__media { width: 100%; max-height: calc(86svh - var(--head) - 120px); justify-self: end; aspect-ratio: auto; height: min(62svh, 560px); }
}
@media (prefers-reduced-motion: no-preference) {
  .intro .page-hero .label { animation: soft-rise .8s var(--ease-x) .3s backwards; }
  .intro .page-hero__title .ln__i { animation: line-rise .95s var(--ease-x) .45s backwards; }
  .intro .page-hero__title .ln:nth-child(2) .ln__i { animation-delay: .54s; }
  .intro .page-hero__title .ln:nth-child(3) .ln__i { animation-delay: .63s; }
  .intro .page-hero__lede { animation: soft-rise .8s var(--ease-x) .85s backwards; }
  .intro .page-hero__actions, .intro .page-hero__meta { animation: soft-rise .8s var(--ease-x) .95s backwards; }
  .intro .page-hero__media { animation: fade-in 1.4s var(--ease-x) .1s backwards; }
  .intro .page-hero__media img { animation: img-settle 1.9s var(--ease-x) backwards; }
}

/* ---------- Chapters: long-form sections with a section label ---------- */
.chapter { position: relative; padding: 64px 0 72px; border-top: 1px solid var(--line); }
.page-hero + .chapter, .chapter--flush { border-top: 0; }
.chapter__grid { display: grid; gap: 22px; }
.chapter__label { display: flex; align-items: baseline; gap: 14px; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.chapter__num {
  font: 400 30px/1 var(--serif); letter-spacing: 0; font-variant-numeric: lining-nums;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .1em;
}
.chapter__label .chapter__num { flex: none; }
.chapter__body { min-width: 0; }
.chapter__body > .h2 + *, .chapter__body > .h2 + .lede { margin-top: 24px; }
.chapter--black { background: var(--film); }
@media (min-width: 901px) {
  .chapter { padding: 104px 0 112px; }
  .chapter__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 26px; align-items: start; }
  .chapter__head { position: sticky; top: calc(var(--head) + 36px); padding-top: 14px; }
  .chapter__label { display: grid; gap: 14px; }
  .chapter__num { font-size: 56px; }
  .chapter--wide .chapter__grid { grid-template-columns: minmax(0, 1fr); }
  .chapter--wide .chapter__head { position: static; }
}

/* ---------- Prose: running text inside a chapter ---------- */
.prose { color: var(--text2); }
.prose > * + * { margin-top: 20px; }
.prose > .h2 { color: var(--text); }
.prose > .h2 + * { margin-top: 28px; }
.prose > * + .h2 { margin-top: 72px; }
.prose p, .prose li { max-width: 37em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a:not(.btn):not(.tlink):not(.next__link) { color: var(--text); text-decoration: underline; text-decoration-color: #FF5F6D; text-decoration-thickness: 1px; text-underline-offset: 5px; }
:root[data-theme="light"] .prose a:not(.btn):not(.tlink):not(.next__link) { text-decoration-color: #A52F43; }
.prose a:not(.btn):not(.tlink):not(.next__link):hover { text-decoration-thickness: 2px; }
.prose > h3, .prose > .h4 { margin-top: 44px; font: 400 26px/1.25 var(--serif); color: var(--text); font-variant-numeric: lining-nums; text-wrap: balance; }
.prose ul { display: grid; gap: 12px; }
.prose ul > li { position: relative; padding-left: 26px; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--grad); }
.prose ol:not([class]) { display: grid; gap: 14px; counter-reset: n; }
.prose ol:not([class]) > li { position: relative; padding-left: 44px; counter-increment: n; }
.prose ol:not([class]) > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font: 400 20px/1.3 var(--serif); font-variant-numeric: lining-nums; color: var(--label); }
.prose .lede { margin-top: 28px; }
@media (min-width: 901px) { .prose > h3, .prose > .h4 { font-size: 30px; } }

/* a callout: "The discipline: ..." */
.note { position: relative; padding: 4px 0 4px 26px; color: var(--text); max-width: 37em; }
.note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #FF5F6D, #FFC371); }
:root[data-theme="light"] .note::before { background: linear-gradient(to bottom, #A52F43, #805017); }
.prose > .note { margin-top: 32px; }

/* a large serif statement with a short coral-gold rule above */
.pull { position: relative; padding-top: 28px; font: 400 clamp(26px, 6.4vw, 32px)/1.32 var(--serif); color: var(--text); max-width: 26em; text-wrap: pretty; font-variant-numeric: lining-nums; }
.pull::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 2px; background: var(--grad); transform-origin: 0 50%; }
.prose > .pull { margin-top: 48px; }
@media (min-width: 901px) { .pull { font-size: clamp(32px, 2.7vw, 40px); } }

/* ---------- Facts table ---------- */
.facts { margin-top: 36px; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.facts dt { font: 600 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.facts dd { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text); max-width: 37em; }
@media (min-width: 701px) {
  .facts > div { grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); column-gap: 28px; align-items: baseline; padding: 18px 0 20px; }
  .facts dt { font-size: 13px; }
}

/* ---------- Vertical career timeline ---------- */
.timeline { margin-top: 36px; }
.timeline__item { position: relative; padding: 0 0 40px 32px; border-left: 1px solid var(--line); }
.timeline__item:last-child { padding-bottom: 4px; }
.timeline__item::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--grad); }
.timeline__item.is-minor::before { background: var(--bg); border: 1.5px solid var(--outline); }
.timeline__span { font: 600 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.timeline__item.is-now .timeline__span { color: var(--label); }
.timeline__org { margin-top: 6px; font: 400 30px/1.15 var(--serif); color: var(--text); font-variant-numeric: lining-nums; }
.timeline__item.is-minor .timeline__org { font-size: 24px; }
.timeline__title { margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--label); max-width: 34em; }
.timeline__text { margin-top: 12px; color: var(--text2); max-width: 37em; }
.timeline__fact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; color: var(--text); max-width: 37em; }
.prose .timeline { margin-top: 36px; }
.prose .timeline > li { padding-left: 32px; max-width: none; }
.prose .timeline > li::before { top: 8px; left: -5px; width: 9px; height: 9px; }
@media (min-width: 901px) {
  .timeline__item { padding: 0 0 48px 40px; }
  .prose .timeline > li { padding-left: 40px; }
  .timeline__org { font-size: 36px; }
  .timeline__item.is-minor .timeline__org { font-size: 28px; }
}

/* ---------- FAQ: native details ---------- */
.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 16px 0;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__q { font: 400 22px/1.3 var(--serif); color: var(--text); font-variant-numeric: lining-nums; text-wrap: balance; }
.faq__item > summary .i { flex: none; transition: transform .32s var(--ease-x); color: var(--text2); }
.faq__item[open] > summary .i { transform: rotate(45deg); color: var(--label); }
.faq__item > summary:hover .faq__q { text-decoration: underline; text-decoration-color: #FF5F6D; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.faq__a { padding: 0 0 26px; color: var(--text2); }
.faq__a > * + * { margin-top: 14px; }
.faq__a p { max-width: 37em; }
.faq__a a { color: var(--text); text-decoration: underline; text-decoration-color: #FF5F6D; text-underline-offset: 5px; }
:root[data-theme="light"] .faq__a a { text-decoration-color: #A52F43; }
.prose .faq { margin-top: 32px; }
.prose .faq__item > summary { max-width: none; }
@media (min-width: 901px) { .faq__q { font-size: 26px; } .faq__item > summary { min-height: 76px; } }

/* ---------- Sources ---------- */
.sources { margin-top: 28px; border-top: 1px solid var(--line); }
.sources > li { display: grid; gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.sources a { display: inline-flex; align-items: baseline; gap: .55em; color: var(--text); text-decoration: none; font: 400 22px/1.3 var(--serif); max-width: 32em; }
.sources a .i { width: 18px; height: 18px; align-self: center; transition: transform .32s var(--ease-x); }
.prose .sources a:not(.btn):not(.tlink):not(.next__link) { text-decoration: none; }
.sources a:hover, .prose .sources a:not(.btn):not(.tlink):not(.next__link):hover { text-decoration: underline; text-decoration-color: #FF5F6D; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.sources a:hover .i { transform: translate(3px, -3px); }
.sources__meta { font: 500 14px/1.45 var(--sans); color: var(--text2); }
.prose .sources > li { padding-left: 0; }
.prose .sources > li::before { display: none; }

/* ---------- Cards grid (same card as the home Applied AI bento) ---------- */
.cards { margin-top: 40px; display: grid; gap: 16px; }
.cards .card__body { padding: 26px 24px 30px; display: flex; flex-direction: column; height: 100%; }
.card__num { font: 400 40px/1 var(--serif); font-variant-numeric: lining-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .12em; margin-bottom: 14px; align-self: flex-start; }
.cards .card__tags { margin-top: auto; }
.cards .card__h + p { margin-top: 12px; color: var(--text2); }
.cards .card__body > p:nth-of-type(2) { margin-bottom: 18px; }
.card .tlink { margin-top: 8px; align-self: flex-start; }
@media (min-width: 701px) { .cards--2, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .cards .card__body { padding: 32px 32px 34px; } }

/* ---------- Numbered principles (2x2 on desktop) ---------- */
.numbered { margin-top: 36px; display: grid; counter-reset: p; }
.numbered > li { position: relative; padding: 24px 0 28px; border-top: 1px solid var(--line); counter-increment: p; display: grid; gap: 10px; }
.numbered > li::before { content: counter(p, decimal-leading-zero); font: 400 32px/1 var(--serif); font-variant-numeric: lining-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .1em; justify-self: start; }
.numbered > li::after { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--grad); transform-origin: 0 50%; }
.numbered__h { font: 400 26px/1.22 var(--serif); color: var(--text); font-variant-numeric: lining-nums; text-wrap: balance; }
.numbered > li > p:not(.numbered__h) { color: var(--text2); max-width: 34em; }
.prose .numbered > li { padding-left: 0; }
@media (min-width: 701px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 901px) { .numbered__h { font-size: 28px; } }

/* ---------- Next page link band ---------- */
.next { display: block; border-top: 1px solid var(--line); }
.next__link { display: grid; gap: 10px; padding: 48px 0 52px; text-decoration: none; color: var(--text); }
.next__title { display: block; font: 400 clamp(32px, 8vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; font-variant-numeric: lining-nums; }
.next__title .i { display: inline-block; width: .8em; height: .8em; margin-left: .3em; vertical-align: -.06em; transition: transform .4s var(--ease-x); }
.next__link:hover .next__title .i { transform: translateX(10px); }
.next__link:hover .next__title > span { text-decoration: underline; text-decoration-color: #FF5F6D; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.next__text { color: var(--text2); max-width: 37em; }
@media (min-width: 901px) { .next__link { padding: 72px 0 80px; } .next__title { font-size: clamp(44px, 4.4vw, 68px); } }

/* ---------- Closing contact band on inner pages: the end card, shorter ---------- */
.contact--band { padding: 88px 0 96px; }
.contact--band .contact__title { font-size: clamp(34px, 9vw, 52px); }
@media (min-width: 901px) {
  .contact--band { min-height: 0; padding: 112px 0 120px; }
  .contact--band .contact__title { font-size: clamp(56px, 5.6vw, 92px); }
}

/* print: the inner pages and the light-theme hero plate print in ink */
@media print {
  .hero, :root[data-theme="light"] .hero { --text: #201E1C; --text2: #59544F; --label: #805017; --grad-text: linear-gradient(#A52F43, #A52F43); background: #fff !important; margin: 0 !important; height: auto !important; }
  .page-hero { min-height: 0 !important; padding: 24px 0 !important; }
  .chapter__head { position: static !important; }
  .faq__item > summary .i, .next { display: none !important; }
  .page-hero__media { display: none !important; }
}

/* =========================================================
   v9.0 audit fixes (19 Oct): accessibility, layout stability, inner-page consistency
   ========================================================= */
/* phone menu open: the page under the sheet does not scroll */
html.menu-open, html.menu-open body { overflow: hidden; }
/* career reel years: the numeral is generated content, so plain-text readers never see the decorative years */
.career__year::before { content: attr(data-y); }
/* desktop film: the career reel holds with position: sticky instead of a script pin (no layout shift while scrolling) */
.cine .career { height: calc(100vh + 140vh); }
.cine .career__pin { position: sticky; top: 0; }
/* EN home phone hero: one headline phrase per line whatever the font, so the swap to Playfair moves nothing
   (the IT headline already sets the same way in both fonts, and "ai risultati." must stay on one line) */
@media (max-width: 599px) { :root[lang="en"] .hero__title .ln { display: block; } }
/* card tags at the 16px body minimum */
.card__tags { font-size: 16px; }
/* email link: a taller hit area without moving the layout; the hover rule stays under the text */
a.contact__address { padding-block: 10px; margin-block: -10px; background-origin: content-box; background-clip: content-box; }
/* inner page hero, phone: the two actions stack full width, as on the home */
@media (max-width: 600px) {
  .page-hero__actions { flex-direction: column; gap: 10px; }
  .page-hero__actions .btn { width: 100%; min-height: 48px; }
}
/* inner page hero, dark: the black foot feathers into the first chapter instead of a tonal step */
:root:not([data-theme="light"]) .page-hero { border-bottom: 0; background: linear-gradient(to bottom, var(--film) calc(100% - 160px), var(--bg) 100%); }
@media print { .page-hero { background: #fff !important; } }

/* =========================================================
   Light theme hero (owner pick, 19 Oct 2026): the cut-out portrait sits
   directly on the cream page instead of a black plate.
   ========================================================= */
.hero__img-light, .page-hero__img-light { display: none; }
:root[data-theme="light"] .hero {
  --bg: #F8F5F0; --film: #F8F5F0; --text: #201E1C; --text2: #59544F; --line: #D2CBC2; --outline: #8C8279;
  --label: #805017; --focus: #805017; --grad-text: linear-gradient(110deg, #B8324A 0%, #9A5A16 100%);
  color-scheme: light; background: #F8F5F0; margin: var(--head) 0 0; height: calc(100svh - var(--head));
}
:root[data-theme="light"] .hero__media { mix-blend-mode: normal; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 86%); mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 86%); }
:root[data-theme="light"] .hero__media picture { visibility: hidden; }
:root[data-theme="light"] .hero__img-light { display: block; position: absolute; left: 50%; top: 0; height: calc(100% / .76); width: auto; aspect-ratio: 1072 / 1600; translate: -50% 0; object-fit: cover; object-position: 50% 0; }
:root[data-theme="light"] .page-hero__media { background: transparent; }
:root[data-theme="light"] .page-hero__media > img:not(.page-hero__img-light), :root[data-theme="light"] .page-hero__media picture { display: none; }
:root[data-theme="light"] .page-hero__img-light { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
@media (min-width: 901px) {
  :root[data-theme="light"] .hero { margin: var(--head) 0 0; height: calc(100svh - var(--head)); }
  :root[data-theme="light"] .hero__media { top: 0; }
  :root[data-theme="light"] .hero__img-light { left: 0; top: 0; translate: none; width: 100%; height: 100%; }
}
@media print { .hero__img-light, .page-hero__img-light { display: none !important; } }