@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("assets/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url("assets/fonts/GeistMono-Medium.woff2") format("woff2"); }
/* Geist, self-hosted (variable, 100–900) */
@font-face { font-family: "Geist"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("assets/fonts/Geist-Variable.woff2") format("woff2"); }

/* Layout: generous margins (gutter up to 120px, max 1120px), airy vertical rhythm. Home = nav, one-line serif statement, experience list, 2-col project grid, black "Let's Talk". Case studies = 760px reading column with wide media. */
:root {
  --bg: #fafaf9;
  --fg: #1d2127;
  --muted: #737985;
  --line: #e4e5e2;
  --strong-line: #1d2127;
  --surface: #efefec;
  --card: #ffffff;
  --chip: #f7ff66;
  --chip-fg: #16181c;
  --wave: #f24a12;
  --footer: #0b0b0c;
  --footer-fg: #ffffff;

  --serif: "Geist", "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(24px, 8vw, 120px);
  --max: 1120px;
  --text: 760px;
  --wide-max: 1680px;
  --wide-gutter: clamp(16px, 2vw, 28px);
  --space-xl: clamp(96px, 14vw, 180px);
  --space-l: clamp(72px, 10vw, 128px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111214; --fg: #eceae4; --muted: #9a9ca3; --line: #2a2c30; --strong-line: #eceae4;
    --surface: #1c1d20; --card: #17181b; --chip: #f7ff66; --chip-fg: #16181c;
    --footer: #000000; --footer-fg: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111214; --fg: #eceae4; --muted: #9a9ca3; --line: #2a2c30; --strong-line: #eceae4;
  --surface: #1c1d20; --card: #17181b; --chip: #f7ff66; --chip-fg: #16181c;
  --footer: #000000; --footer-fg: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 6px; }
img { max-width: 100%; display: block; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
/* Home: everything shares the project grid's width and side margin */
.wrap.wide { max-width: var(--wide-max); padding-inline: var(--wide-gutter); }
.label { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.25; }
.brand svg { width: 18px; height: 18px; fill: var(--fg); flex: none; transition: transform 2.2s cubic-bezier(.3,.5,.3,1); }
/* Flower spins a full turn on hover */
.brand:hover svg, .brand:focus-visible svg { transform: rotate(360deg); }
.brand-text b { display: block; font-weight: 500; }
.brand-text span { color: var(--muted); font-size: 14px; }
.nav-links { display: flex; gap: clamp(18px, 3vw, 36px); font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--fg); }

/* Media frame */
.media { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface); max-width: 100%; aspect-ratio: 16 / 9; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media .ph { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.media .ph strong { font-weight: 500; color: var(--fg); text-transform: none; letter-spacing: .02em; font-size: 12px; }
.media .tag { position: absolute; top: 14px; left: 16px; z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--chip); color: var(--chip-fg); border-radius: 999px; padding: 5px 12px; font-size: 13px; line-height: 1.3; white-space: nowrap; }

/* ---------- Home ---------- */
/* Hero (Netta's original top) */
/* Hero: photo stack + greeting (reference: piet.website) */
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-block: clamp(56px, 9vw, 140px) clamp(72px, 9vw, 140px); max-width: 860px; }
.hero h1 { font-family: var(--sans); font-weight: 400; margin: 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: pretty; }
.hero .hi { display: block; }
.hero .lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--muted); margin: 0; }
.hero .lede a { color: var(--fg); text-underline-offset: 4px; }

.photo-stack { position: relative; width: clamp(92px, 9vw, 124px); aspect-ratio: 3 / 4; outline: none; cursor: default; margin-bottom: 14px; }
.photo-stack figure { position: absolute; inset: 0; margin: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.photo-stack .media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 10px; border: 0; box-shadow: 0 6px 18px rgb(0 0 0 / .14); }
.ps-front { z-index: 2; }
.ps-mid { z-index: 1; transform: scale(.97); }
.ps-back { z-index: 0; transform: scale(.97); }
.photo-stack video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-stack:hover .ps-front, .photo-stack:focus-visible .ps-front { transform: rotate(-7deg) translate(-6px, 2px); }
.photo-stack:hover .ps-mid, .photo-stack:focus-visible .ps-mid { transform: rotate(4deg) translate(58%, -2px) scale(.97); }
.photo-stack:hover .ps-back, .photo-stack:focus-visible .ps-back { transform: rotate(8deg) translate(110%, -14px) scale(.97); }

@keyframes flower-spin { from { transform: scale(1) rotate(0); } to { transform: scale(1) rotate(360deg); } }
@keyframes wave { 0%, 60%, 100% { transform: scale(1) rotate(0); } 15%, 45% { transform: scale(1) rotate(18deg); } 30% { transform: scale(1) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .hand { animation: none !important; } .photo-stack figure { transition: none; } }
.section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.015em; margin: 0 0 40px; padding-top: 24px; border-top: 1px solid var(--strong-line); scroll-margin-top: 100px; }


.intro { padding-block: var(--space-l) var(--space-l); display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); }
.intro h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.1; margin: 0; max-width: 18ch; }
.exp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 40px; }
.exp li { display: flex; flex-direction: column; gap: 3px; }
.exp .when { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.exp .org { font-weight: 500; }
.exp .role { color: var(--muted); font-size: 15px; }

.work { padding: 0 var(--wide-gutter) var(--space-xl); max-width: var(--wide-max); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 1.6vw, 28px); align-items: start; }
.col { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 64px); min-width: 0; }
.card { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.card-media { position: relative; }
.card .media { aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--line); }
.card .media img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.card:hover .media img, .card:focus-visible .media img { transform: scale(1.03); }
.card-media .chips { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; margin: 0; letter-spacing: -0.005em; min-width: 0; }
.card-text p { margin: 0; font-family: var(--mono); font-size: clamp(12px, .95vw, 15px); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Footer */
.footer { background: var(--footer); color: var(--footer-fg); }
.footer .wrap { padding-block: clamp(64px, 9vw, 112px) clamp(56px, 7vw, 88px); display: flex; flex-direction: column; gap: 32px; }
.footer .big { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 14vw, 200px); line-height: .95; letter-spacing: -0.035em; margin: 0; display: flex; align-items: flex-start; gap: 14px; }
.footer .big svg { width: clamp(24px, 4vw, 56px); height: auto; fill: var(--footer-fg); margin-top: .1em; flex: none; }
.contacts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: clamp(17px, 1.8vw, 22px); }
.contacts a { text-underline-offset: 5px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.contacts span { color: color-mix(in srgb, var(--footer-fg) 50%, transparent); }

/* ---------- Case study ----------
   Template matched to the reference: a centered 768px reading column, a 280px sticky sidebar in the left
   gutter, 56px title, 32px section claims, 15px body, square media with a hairline border. */
.cs-layout { max-width: none; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 768px) minmax(0, 1fr); column-gap: 32px; }
.cs-layout > .cs { grid-column: 2; }
.toc { display: none; }
.cs { display: flex; flex-direction: column; gap: 96px; padding-block: 48px 144px; min-width: 0; }
.cs .label { font-size: 14px; letter-spacing: .04em; }
.back { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--fg); }
.cs-head { display: flex; flex-direction: column; gap: 16px; }
.cs-head .label { margin-top: 0 !important; }
.cs-head h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
.cs-head .lede { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; max-width: 62ch; }
.cs-hero { display: flex; flex-direction: column; gap: 32px; margin-top: -64px; }
.cs-hero .media { aspect-ratio: 16 / 9; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.facts.facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.facts div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.facts dt { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 96px; }
.sec h2 { font-size: 32px; line-height: 1.2; margin: 0; letter-spacing: -0.02em; font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.sec h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.45; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.sec p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.sec p + p { margin-top: 4px; }
.sec .media { margin-top: 16px; aspect-ratio: 16 / 9; }
.media { border-radius: 0; }
.cs .media { border: 1px solid var(--line); }

/* Three plain columns (Overview / Opportunity style), no boxes */
.cards, .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; counter-reset: p; }
.cards > div, .principles li { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: none; border: 0; padding: 0; }
.cards b, .principles b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; }
.cards span, .principles span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.principles li { counter-increment: p; }
.principles li::before { content: "0" counter(p); font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* Media + text pair (Core flows style): media 60%, text beside it */
.sec .pair + .pair { margin-top: 48px; }
.pair { display: grid; grid-template-columns: minmax(0, 461fr) minmax(0, 275fr); gap: 32px; align-items: center; margin-top: 16px; }
.pair .media { margin-top: 0; aspect-ratio: 461 / 463; }
.pair-text { display: flex; flex-direction: column; gap: 6px; }

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.strip figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.strip .media { aspect-ratio: 9 / 19.5; margin-top: 0; }
.strip figcaption { font-size: 13px; color: var(--muted); line-height: 1.4; }

.reflection { list-style: none; padding: 0; margin: 0; }
.reflection li { border-top: 1px solid var(--line); padding-block: 16px; color: var(--muted); font-size: 15px; }
.todo { background: color-mix(in srgb, var(--chip) 40%, transparent); color: var(--fg); border-radius: 3px; padding-inline: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.next { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.next a { font-family: var(--serif); font-size: 28px; text-decoration: none; letter-spacing: -0.015em; }
.next a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Sidebar navigation (desktop) */
@media (min-width: 1100px) {
  .toc { grid-column: 1; grid-row: 1; justify-self: start; width: min(280px, 100%); display: flex; flex-direction: column; gap: 32px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); align-self: start; padding-top: 48px; max-height: calc(100vh - 96px); overflow-y: auto; }
  .cs-layout > .cs { grid-row: 1; }
  .cs-head .back { display: none; }
}
.toc-back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.toc-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform .2s; }
.toc-back:hover { color: var(--fg); }
.toc-back:hover svg { transform: translateX(-3px); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.toc ol a { color: var(--muted); text-decoration: none; font-size: 16px; line-height: 1.4; display: inline-flex; align-items: center; gap: 10px; transition: color .2s; }
.toc ol a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip); flex: none; margin-left: -16px; opacity: 0; transition: opacity .2s, margin .2s; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 15%, transparent); }
.toc ol a:hover, .toc ol a.active { color: var(--fg); }
.toc ol a.active::before { opacity: 1; margin-left: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 760px) {
  .hero { padding-block: 40px 64px; gap: 22px; }
  .nav .wrap { padding-block: 20px; }
  .brand-text span { display: none; }
  .grid { display: flex; flex-direction: column; gap: 48px; }
  .col { display: contents; }
  .card .media { aspect-ratio: 16 / 9; }
  .card-text p { white-space: normal; }
  .cs-layout { display: block; padding-inline: 20px; }
  .cs { gap: 72px; }
  .cs-hero { margin-top: -40px; }
  .facts, .facts.facts-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards, .pair, .principles { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Live card (Leumi AI): the app's #499AFB glow, multiplied and drifting across the whole card; orb floats above the title ---------- */
.media.live { --glow: 73 154 251; background: #e6f0fe; container-type: inline-size; isolation: isolate; }
.live-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.live-bg i { position: absolute; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow) / var(--a)), rgb(var(--glow) / 0)); will-change: transform; }
.live-bg i:nth-child(1) { --a: .72; left: -20%; top: 30%;  animation: roam1 16s ease-in-out infinite alternate; }
.live-bg i:nth-child(2) { --a: .6;  left: 45%;  top: -35%; animation: roam2 19s ease-in-out infinite alternate; }
.live-bg i:nth-child(3) { --a: .66; left: 40%;  top: 45%;  animation: roam3 14s ease-in-out infinite alternate; }
.live-bg i:nth-child(4) { --a: .6;  left: -10%; top: -40%; width: 70%; animation: roam4 22s ease-in-out infinite alternate; background: radial-gradient(closest-side, rgb(255 255 255 / .7), rgb(255 255 255 / 0)); }
@keyframes roam1 { 50% { transform: translate(60%, -45%) scale(1.15); } 100% { transform: translate(95%, 5%) scale(.9); } }
@keyframes roam2 { 50% { transform: translate(-55%, 55%) scale(.9); } 100% { transform: translate(-85%, 15%) scale(1.2); } }
@keyframes roam3 { 50% { transform: translate(-70%, -30%) scale(1.2); } 100% { transform: translate(-20%, -75%) scale(.95); } }
@keyframes roam4 { 50% { transform: translate(70%, 70%) scale(1.1); } 100% { transform: translate(110%, 20%); } }
.live-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; color: #fff; }
.live-title b { font-weight: 500; font-size: 6cqw; letter-spacing: -0.02em; }
.orb { display: none; width: 13cqw; aspect-ratio: 1; object-fit: cover; clip-path: circle(42.5% at 50% 50%); filter: drop-shadow(0 1.5cqw 2.5cqw rgb(11 59 177 / .25)); }
.media.live.with-orb .orb { display: block; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6cqw); } }
@media (prefers-reduced-motion: reduce) { .live-bg, .live-bg i, .orb { animation: none; } }
.card-media:has(.live) .chips { top: 16px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .live-bg i { animation: none; } }

/* ---------- Core flow stage: blurred photo + bluish gradient + phone mockup with the screen recording ---------- */
.media.stage { aspect-ratio: 1 / 1; container-type: size; isolation: isolate; background: #c9c0b2; border: 1px solid var(--line); }
.stage-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(12px) saturate(1.05); z-index: -3; }
.media.stage::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgb(193 218 254 / .14), rgb(73 154 251 / .06) 55%, rgb(13 84 216 / .14)); }
/* iPhone frame: titanium edge, black bezel, side buttons */
.phone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 84cqh; aspect-ratio: 752 / 1626;
  padding: .9cqh; border-radius: 6.4cqh; background: #0d0e10;
  box-shadow: 0 0 0 .22cqh #4a4c51, 0 1.2cqh 3cqh rgb(0 0 0 / .18); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 5.5cqh; overflow: hidden; background: #fff; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.island { position: absolute; top: 1.3cqh; left: 50%; translate: -50% 0; width: 31%; height: 3.4cqh; border-radius: 99px; background: #050506; }
.pbtn { position: absolute; width: .7cqh; border-radius: .4cqh; background: #2a2b2f; }
.pbtn.act { left: -1.05cqh; top: 15%; height: 3.6cqh; }
.pbtn.vup { left: -1.05cqh; top: 22%; height: 6.6cqh; }
.pbtn.vdn { left: -1.05cqh; top: 31%; height: 6.6cqh; }
.pbtn.pwr { right: -1.05cqh; top: 25%; height: 10cqh; }
.pair-flow { align-items: end; }
.pair-flow .media.stage { aspect-ratio: 1 / 1; }

/* Stage controls (pause/play + restart), shown on hover like the reference */
.stage-ctrl { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; opacity: 0; transition: opacity .25s; }
.media.stage:hover .stage-ctrl, .media.stage:focus-within .stage-ctrl { opacity: 1; }
@media (hover: none) { .stage-ctrl { opacity: 1; } }
.stage-ctrl button { width: 34px; aspect-ratio: 1; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(30 26 22 / .82); color: #fff; backdrop-filter: blur(6px); transition: transform .15s, background .2s; }
.stage-ctrl button:hover { background: rgb(30 26 22 / .95); transform: scale(1.05); }
.stage-ctrl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stage-ctrl svg { width: 15px; height: 15px; fill: currentColor; }
.stage-ctrl svg.stroke { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stage-ctrl .i-play { display: none; }
.media.stage.is-paused .i-play { display: block; }
.media.stage.is-paused .i-pause { display: none; }

/* Leumi AI motion film */
.media.stage.film { aspect-ratio: 16 / 9; container-type: normal; }
.media.stage.film::before, .media.stage.film::after { display: none; }
.media.stage.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Vouchers card: screen recording in a window over a blurred photo */
.media.window-shot { container-type: inline-size; background: #8a8f96; }
.window-shot .ws-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.window-shot .ws-win { position: absolute; left: 15.5%; width: 69%; top: 4.5%; aspect-ratio: 1786 / 1276; border-radius: 1.6cqw; overflow: hidden; background: #fff; box-shadow: 0 1.4cqw 4cqw -1cqw rgb(10 20 40 / .35); }
.window-shot .ws-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card:hover .media.window-shot img, .card:focus-visible .media.window-shot img { transform: none; }

/* Transfer card: the Figma component's variants, cycling like the prototype */
.media.slides { background: #ededed; }
.slides .sl { position: absolute; inset: 0; background: var(--bg); display: grid; place-items: center; opacity: 0; transition: opacity .35s ease-in; }
.slides .sl.on { opacity: 1; }
.slides .sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card:hover .media.slides img, .card:focus-visible .media.slides img { transform: none; }

/* Video card cover */
.media.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hover pill that follows the cursor over project cards (Figma: Frame 8) */
.view-pill { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  height: 39px; padding: 0 12px; border-radius: 30px; background: #080707; color: #efefef;
  font-family: var(--sans); font-size: 20px; line-height: 1; white-space: nowrap;
  opacity: 0; translate: -50% -50%; scale: .92; transition: opacity .18s ease-out, scale .25s cubic-bezier(.2,.7,.2,1); }
.view-pill.on { opacity: 1; scale: 1; }
.view-pill svg { width: 20px; height: 19px; fill: currentColor; animation: pill-spin 6s linear infinite; }
@keyframes pill-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .card .card-media { cursor: none; } }
@media (prefers-reduced-motion: reduce) { .view-pill svg { animation: none; } }
.media.vid.contain { background: #eaeaea; }
.media.vid.contain video { object-fit: contain; }

/* Book case study */
.sec .media.tall { aspect-ratio: 2000 / 1366; }
.sec .media.wide { aspect-ratio: 2000 / 934; }
.sec .media.spread { aspect-ratio: 3 / 2; background: #fff; }
.sec .media.spread img { object-fit: contain; }
.sec .media.spread + .media.spread { margin-top: 24px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.trio .media { margin-top: 0; aspect-ratio: 3 / 4; }
.trio + .media { margin-top: 16px; }
@media (max-width: 720px) { .trio { grid-template-columns: 1fr 1fr; } .trio .media:last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }

/* About page (Figma frame 7) */
.about { padding-top: 48px; padding-bottom: 120px; }
.about-intro h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(34px, 4.45vw, 64px); line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
.about-intro p { max-width: 1100px; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.45; margin: 28px 0 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 409fr) minmax(0, 811fr); gap: 64px; margin-top: 88px; align-items: start; }
.about-photo { margin: 0; }
.about-photo .media { aspect-ratio: 409 / 499; border-radius: 12px; }
.cv-block + .cv-block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.cv-block h2 { font-family: var(--sans); font-weight: 700; font-size: 20px; margin: 0 0 12px; }
.cv-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.cv-block li { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.cv-block li b { display: block; font-weight: 400; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.2; }
.cv-block li span { display: block; font-size: clamp(15px, 1.67vw, 24px); margin-top: 4px; }
.cv-block time { font-size: clamp(16px, 2.2vw, 32px); color: var(--muted); white-space: nowrap; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-photo { max-width: 360px; } }
.strip .media { background: #fff; }
.strip .media img { object-fit: contain; }
.media:has(img[src*="leumi-ai-before-flow"]) { aspect-ratio: 2000 / 963; }
.media:has(img[src*="leumi-ai-before-menu"]) { aspect-ratio: 2000 / 925; }
.media:has(img[src*="leumi-ai-icon"]) { aspect-ratio: 2000 / 1151; background: #fff; }
.media:has(img[src*="leumi-ai-icon"]) img { object-fit: contain; }

/* About, piet.website/profile layout */
.profile { padding-top: 64px; padding-bottom: 120px; }
.pf-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 5fr) minmax(0, 3fr); grid-template-rows: auto auto; gap: 0; align-items: start; }
.pf-tall { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.pf-tall .media { aspect-ratio: 2 / 3; border-radius: 6px; }
.pf-hero h1 { grid-column: 3 / span 2; grid-row: 1; margin: 0; font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.pf-land { grid-column: 4; grid-row: 2; margin: 48px 0 0; }
.pf-land .media { aspect-ratio: 4 / 3; border-radius: 6px; }
.pf-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 24px; padding: 72px 0; border-top: 1px solid var(--line); }
.pf-hero + .pf-row { border-top: 0; margin-top: 56px; }
.pf-label { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-body { max-width: 640px; }
.pf-body h2 { margin: 0 0 24px; font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; }
.pf-body p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
.pf-wide { margin: 48px 0 0; }
.pf-wide .media { aspect-ratio: 4 / 3; border-radius: 6px; }
.pf-wide .media img { object-position: 50% 30%; }
.pf-wide figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.pf-list li:first-child { border-top: 0; padding-top: 0; }
.pf-list b { display: block; font-weight: 500; font-size: 16px; }
.pf-list span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.pf-list time { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
@media (max-width: 820px) {
  .pf-hero { grid-template-columns: 1fr 1fr; }
  .pf-hero h1 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 28px; }
  .pf-tall { grid-column: 1; grid-row: 2; }
  .pf-land { grid-column: 2; grid-row: 2; margin: 0 0 0 12px; align-self: end; }
  .pf-row { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
}
.media:has(img[src*="leumi-ai-agent-tree"]) { aspect-ratio: 2000 / 935; margin-bottom: 24px; }

/* About hero, closer to piet.website */
.profile { padding-top: 96px; }
.pf-hero { grid-template-columns: minmax(0, 22fr) minmax(0, 8fr) minmax(0, 28fr) minmax(0, 28fr); }
.pf-hero h1 { font-size: clamp(30px, 3.2vw, 60px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.pf-land { grid-column: 4; margin-top: 110px; }
.pf-tall .media, .pf-land .media { border-radius: 10px; }
.pf-hero h1 { max-width: 13em; font-size: clamp(32px, 4.2vw, 58px); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; }
.cs-hero .media:has(img[src*="book-cover-hands"]) { aspect-ratio: 2000 / 935; background: #000; }
.sec .media.hands { aspect-ratio: 2000 / 935; background: #000; margin-bottom: 24px; }

/* Book page, arranged like the Figma frame */
.book-text { display: flex; flex-direction: column; gap: 28px; }
.book-text .label { margin: 0 0 6px; }
.book-text p:not(.label) { margin: 0; }
.book-h { font-family: var(--sans); font-weight: 400; font-size: clamp(36px, 4vw, 64px); margin: 0 0 32px; }
.panel { background: #1d1d1f; border-radius: 14px; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 7% 6%; margin-top: 32px; }
.panel img { display: block; max-width: 100%; height: auto; }
.panel img.w80 { width: 80%; }
.panel.bleed { padding: 0; }
.panel.bleed img { width: 100%; }
.panel.trio3 { padding: 6%; align-items: stretch; }
.panel.trio3 img { flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.panel.duo img { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .panel.duo { flex-direction: column; } .panel img.w80 { width: 100%; } }
.pf-wide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media:has(img[src*="leumi-ai-agent-tree"]) { aspect-ratio: 2000 / 1040; }
.pf-sea { grid-column: 3; grid-row: 2; margin: 260px 0 0; justify-self: center; width: 52%; }
.pf-sea .media { aspect-ratio: 3 / 4; border-radius: 10px; }
.pf-sea video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .pf-sea { grid-column: 1 / -1; grid-row: 3; width: 55%; margin: 20px 0 0 auto; } }
.cs .media:has(img[src*="leumi-ai-agent-tree"]) { border: 0; border-radius: 14px; background: #f5f5f5; }


/* Components carousel: 3 per view */
.strip.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); grid-template-columns: none; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 12px; }
.strip.carousel::-webkit-scrollbar { display: none; }
.strip.carousel figure { scroll-snap-align: start; gap: 12px; }
.strip.carousel img { width: 100%; height: auto; display: block; }
.strip.carousel figcaption { font-size: 15px; }
.carousel-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.carousel-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 18px; cursor: pointer; }
.carousel-nav button:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 720px) { .strip.carousel { grid-auto-columns: 75%; } }
.strip.carousel img { aspect-ratio: 785 / 1501; object-fit: contain; }
@media (max-width: 900px) {
  .grid { align-items: stretch; }
  .grid > .card { width: 100%; }
  .card .card-media, .card .media { width: 100%; }
}

/* Book page: separate images, 8px corners */
#book .bi, #project .bi, #process .bi, #concept .bi { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 24px; }
.bgrid { display: grid; gap: 16px; margin-top: 24px; }
.bgrid .bi { margin-top: 0 !important; }
.bgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bgrid.three .bi { aspect-ratio: 3 / 4; object-fit: cover; height: 100%; }
.bgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.bgrid + .bgrid { margin-top: 16px; }
@media (max-width: 720px) { .bgrid.two { grid-template-columns: 1fr; } }
.cs-hero .media:has(img[src*="assets/book.jpg"]) { border-radius: 8px; border: 0; }

/* Next project card at the bottom of each case study */
.next-card { margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--line); }
.next-card .label { margin: 0 0 20px; }
.next-card .card { gap: 16px; }

/* Back to top */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nowrap { white-space: nowrap; }
.cs .media:has(img[src*="leumi-ai-before"]) { border: 0; border-radius: 8px; background: #f6f6f6; }
.strip.carousel figcaption { text-align: center; }
.cz-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.cz-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .3s, background .3s; }
.cz-dots button.on { width: 24px; background: var(--fg); }

/* Full-screen image viewer */
.zoom-wrap { position: relative; display: block; }
.zoom-wrap > img { display: block; }
.zoomable { position: relative; }
.zoom-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgb(20 20 22 / .72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; backdrop-filter: blur(6px); }
.zoom-btn svg, .lb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zoomable:hover .zoom-btn, .zoom-btn:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .zoom-btn { opacity: 1; transform: none; } }
.bgrid .zoom-wrap, .bgrid > .zoom-wrap > img { height: 100%; }
.zoom-wrap > img.bi { margin-top: 0 !important; }
.sec > .zoom-wrap { margin-top: 24px; }
.lb { position: fixed; inset: 0; z-index: 100; background: rgb(10 10 12 / .92); display: grid; place-items: center; padding: 4vh 4vw; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.lb.on { opacity: 1; }
.lb img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: 8px; cursor: default; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb[hidden] { display: none; }
.lb-close:focus { outline: none; }
.lb-close:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(255 255 255 / .55); }
.lb-close:hover { background: rgb(255 255 255 / .2); }

/* Transfer case study */
.cs-hero .media.hero-shot { aspect-ratio: 2000 / 1422; background: #fff; border: 0; border-radius: 8px; }
.cs-hero .media.hero-shot img { object-fit: contain; }
#transfer-page .bi, .cs .bi { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 24px; }
.cards.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
.bgrid.desk-mob { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); align-items: end; margin-top: 40px; }
.caption { font-size: 14px; color: var(--muted); margin-top: 10px; }
@media (max-width: 720px) { .cards.two-col { grid-template-columns: 1fr; } .bgrid.desk-mob { grid-template-columns: 1fr; } .bgrid.desk-mob .bi:last-child { max-width: 60%; margin-inline: auto; } }
.cs-hero .media.vid.contain { aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.bgrid.two { align-items: start; }
.bgrid.two .zoom-wrap, .bgrid.two > .zoom-wrap > img, .bgrid.two .bi { height: auto !important; }
.bgrid.two .bi { object-fit: contain; }
.media.stage.film:has(video[src*="transfer-flow"]) { aspect-ratio: 2530 / 1798; border: 0; border-radius: 8px; background: #fff; }
.media.stage.film video[src*="transfer-flow"] { object-fit: contain; }

/* 8px corners on every card and image across the site */
.media, .card .media, .cs .media, .media.stage, .media.live, .media.window-shot, .media.slides, .media.vid, .cs .bi, .bi, .pf-hero .media, .pf-wide .media, .about-photo .media, .photo-stack .media, .strip .media { border-radius: 8px !important; }
.media.stage .phone { border-radius: 6.4cqh; }
.pf-wide .media { aspect-ratio: 4 / 3; }
.pf-wide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip.carousel { grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; }
.strip.carousel figure { gap: 4px; }
.strip.carousel img { aspect-ratio: 654 / 1366; }
.strip.carousel figcaption { margin-top: 12px; }
@media (max-width: 720px) { .strip.carousel { grid-auto-columns: 60%; } }
/* show there is more: next screen peeks in, with a soft fade at the edge */
.strip.carousel { grid-auto-columns: calc((100% - 72px) / 3.6); padding-right: 8%; scroll-padding-left: 0; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.strip.carousel.at-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 720px) { .strip.carousel { grid-auto-columns: 62%; } }

/* Ashdod case study */
.bv { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 24px; background: #000; }
.dm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); gap: 16px; align-items: end; margin-top: 24px; }
.dm .bv { margin-top: 0; }
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 16px; margin-top: 24px; }
.phones figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.phones .bi { margin-top: 0 !important; }
.phones figcaption { font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .phones { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm { grid-template-columns: 1fr; } .dm .mob { max-width: 60%; margin-inline: auto; } }
/* desktop + mobile videos at the same height: column widths follow each video's aspect ratio */
.dm { grid-template-columns: minmax(0, 1.7756fr) minmax(0, .4604fr); align-items: stretch; }
.dm .bv { height: 100%; object-fit: cover; }
@media (max-width: 720px) { .dm { grid-template-columns: 1fr; } .dm .bv { height: auto; } }
.flow2 { display:flex; align-items:stretch; gap:20px; margin-top:24px; }
.flow2 .fg { flex:1; margin:0; background:var(--surface); border-radius:8px; padding:20px 20px 16px; display:flex; flex-direction:column; gap:14px; }
.flow2 .fg-t { margin:0; font-size:14px; font-weight:500; text-align:center; }
.flow2 .fg-p { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flow2 .fg-p .bi { margin-top:0 !important; width:100%; height:auto; }
.flow2 figcaption { margin-top:auto; font-size:14px; color:var(--muted); text-align:center; }
.flow2 .fg-arrow { flex:0 0 48px; width:48px; align-self:center; color:var(--muted); }
@media (max-width:720px){ .flow2 { flex-direction:column; } .flow2 .fg-arrow { transform:rotate(90deg); } }
.strip.carousel.ash { margin-top: 24px; }
.strip.carousel.ash img { aspect-ratio: 552 / 1212; object-fit: cover; border-radius: 8px; }
.strip.carousel figure:last-child { scroll-snap-align: end; }
.car-t { margin: 48px 0 0; font-size: 20px; font-weight: 500; }
.cs .car-t { margin: 40px 0 0 !important; }
.strip.carousel.ash { margin-top: 0; }
/* no edge fade on carousels */
.strip.carousel, .strip.carousel.at-end { -webkit-mask-image: none !important; mask-image: none !important; }
/* next screen is cut at the edge, so it reads as scrollable */
.strip.carousel { grid-auto-columns: calc((100% - 72px) / 3.4); padding-right: 0; }
@media (max-width: 720px) { .strip.carousel { grid-auto-columns: 62%; } }
/* Ashdod desktop + mobile on a blurred, grainy photo backdrop */
.dm { padding: 48px; gap: 24px; border-radius: 8px; background: #8fb0cf url(assets/ashdod-blur-bg.jpg) center / cover; }
.dm .bv { box-shadow: 0 12px 32px rgb(0 0 0 / .18); }
@media (max-width: 720px) { .dm { padding: 20px; gap: 16px; } }
#challenges .dm { background-image: url(assets/ashdod-blur-bg2.jpg); }
.flow2 figcaption, .phones figcaption, .strip.carousel figcaption { line-height: 1.3; text-wrap: balance; }
.back { text-transform: none; letter-spacing: 0; color: var(--fg); }
.back:hover { opacity: .6; }
@media (max-width: 720px) { .bgrid.desk-mob > :last-child { width: 55%; max-width: 220px; margin-inline: auto; } .bgrid.desk-mob > :last-child img { width: 100%; } }
/* two images at equal height, widths follow each image's ratio */
.bgrid.two.eqh { grid-template-columns: minmax(0, .963fr) minmax(0, .7226fr); align-items: start; }
.bgrid.eqh .zoom-wrap, .bgrid.eqh img { height: auto !important; width: 100%; }
@media (max-width: 720px) { .bgrid.two.eqh { grid-template-columns: minmax(0, .963fr) minmax(0, .7226fr); } }
/* touch screens: no zoom icon, tapping the image opens it */
@media (hover: none), (max-width: 720px) { .zoom-btn { display: none !important; } }
/* transfer flow video on a blurred, grainy ice backdrop */
.media.stage.film:has(video[src*="transfer-flow"]) { aspect-ratio: 16 / 10.4; background: #ececec; border: 0; }
.media.stage.film video[src*="transfer-flow"] { inset: auto; left: 50%; top: 50%; translate: -50% -50%; height: 86%; width: auto; aspect-ratio: 2530 / 1798; object-fit: cover; border-radius: 8px; box-shadow: 0 16px 40px rgb(20 40 60 / .18); background: #fff; }
.vproto { margin-top: 24px; padding: 40px; border-radius: 8px; background: #f2f2f0; }
.vproto video { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 32px rgb(0 0 0 / .12); }
@media (max-width: 720px) { .vproto { padding: 16px; } }
/* vouchers: one screen per figure */
.vs { margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.vs .bi { margin-top: 0 !important; border: 1px solid var(--line); }
.vs figcaption { font-size: 14px; color: var(--muted); text-align: center; }
.vpair { display: grid; gap: 16px; align-items: start; }
.vpair .zoom-wrap, .vpair .bi { width: 100%; height: auto !important; }
.vproto { background: #8a9aa8 url(assets/ashdod-blur-bg2.jpg) center / cover; }
.vsms { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 24px; padding: 48px 24px; border-radius: 8px; background: #f2f2f0; }
.vsms .zoom-wrap, .vsms > .bi { width: min(240px, 40%); }
.vsms .bi { margin-top: 0 !important; width: 100%; height: auto; border-radius: 24px !important; box-shadow: 0 12px 32px rgb(0 0 0 / .1); }
.vs + p { margin-top: 48px !important; }
/* annotated screens, built in HTML */
.anno { position: relative; margin: 32px 0 0; margin-inline: calc(50% - min(640px, 50vw - 24px)); padding: 40px 40px 56px; border-radius: 8px; background: #f2f2f0; color: var(--fg); }
.anno-t { margin: 0 0 32px; font-size: 22px; }
.anno-g { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.7fr) minmax(150px, 1fr); gap: 64px; align-items: stretch; }
.anno-img { position: relative; align-self: start; }
.anno-img img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(0 0 0 / .06); }
.anno-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: currentColor; font-size: 0; color: var(--fg); }
.anno-col { position: relative; }
.anno-n { position: absolute; left: 0; right: 0; margin: -0.65em 0 0; font-size: 15px; line-height: 1.3; text-wrap: pretty; }
.anno-col.L .anno-n { text-align: left; }
.anno-n.star { padding-left: 24px; }
.anno-n.star svg { position: absolute; left: 0; top: .1em; width: 15px; height: 15px; fill: currentColor; }
.anno-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; color: var(--fg); }
@media (max-width: 1000px) {
  .anno { margin-inline: 0; padding: 24px 20px 28px; }
  .anno-t { margin-bottom: 20px; }
  .anno-g { grid-template-columns: 1fr; gap: 0; }
  .anno-img { order: -1; }
  .anno-svg { display: none; }
  .anno-dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; font: 600 11px/20px var(--sans); text-align: center; color: #fff; background: #1557d8; box-shadow: 0 0 0 2px #fff; }
  .anno-col { counter-reset: none; }
  .anno-col.L { margin-top: 20px; }
  .anno-n { position: static; margin: 0 0 10px; padding-left: 30px; position: relative; font-size: 14px; top: auto !important; }
  .anno-n[data-k]::before { content: attr(data-k); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #1557d8; color: #fff; font: 600 11px/20px var(--sans); text-align: center; }
  .anno-n.star { padding-left: 30px; margin-top: 6px; color: var(--muted); }
  .anno-n.star svg { left: 3px; }
}
.anno-n { color: var(--fg); }
@media (min-width: 1001px) { .anno.tall { padding-bottom: 150px; } .anno-n.star { margin-top: 0; } }
.cs .anno-n, .cs .anno-t { color: var(--fg); }
/* Sundance card: posters and the animated mark side by side, in one card */
.media.sund { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #000; }
.media.sund .sd-p { position: static; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sd-c { position: relative; background: #000; }
.sd-i { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; translate: -50% -50%; opacity: 0; }
.sd-i.on { opacity: 1; }
.vsms { background: #ececec; }
.cs-hero .media.sund { aspect-ratio: 16 / 9; }
.bv[src*="assets/sundance-"] { aspect-ratio: 16 / 9; object-fit: cover; }
.vpair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.vpair2 .bv { margin-top: 0; }
@media (max-width: 720px) { .vpair2 { grid-template-columns: 1fr; } }
/* Sundance: 3 ways to explore, cross-dissolving like the Figma prototype */
.media.ways { aspect-ratio: 2000 / 935; margin-top: 24px; background: #000; border-radius: 8px; }
.media.ways img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.25s ease; }
.media.ways img.on { opacity: 1; }
.bv[src*="assets/sundance-"] { object-fit: contain; background: #000; }
.vpair2 { gap: 0; background: #000; border-radius: 8px; overflow: hidden; }
.vpair2 .bv { border-radius: 0; }
.media.stage.film.sdv { margin-top: 24px; border: 0; background: #000; }
.media.stage.film.sdv video { object-fit: contain; }
.vpair2 { aspect-ratio: 16 / 9; }
.vpair2 .bv[src] { height: 100%; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 720px) { .vpair2 { aspect-ratio: auto; } .vpair2 .bv[src] { height: auto; aspect-ratio: 16 / 9; } }
.sc-sound .i-on { display: none; } .sc-sound.on .i-on { display: block; } .sc-sound.on .i-off { display: none; }
.stage-ctrl .sc-sound svg path[fill] { stroke: none; }
.vpair2 { aspect-ratio: 2.55 / 1; padding: 3% 4%; column-gap: 6%; }
@media (max-width: 720px) { .vpair2 { aspect-ratio: auto; padding: 16px; row-gap: 16px; } }
/* Sundance page: black canvas */
:root.pg-black { --bg: #000; --surface: #141414; --card: #0d0d0d; --line: #262626; }
:root.pg-black .bi, :root.pg-black .bv, :root.pg-black .media { box-shadow: none; }
:root.pg-black { --fg: #ffffff; --muted: #b3b3b3; --strong-line: #ffffff; }
:root.pg-black .cs p, :root.pg-black .cs .lede, :root.pg-black .facts dd { color: #d9d9d9; }
:root.pg-black .cs h1, :root.pg-black .cs h2, :root.pg-black .cs h3 { color: #fff; }
:root.pg-black .label, :root.pg-black .facts dt { color: #8c8c8c; }
:root.pg-black .nav-links a { color: #b3b3b3; } :root.pg-black .nav-links a:hover { color: #fff; }
/* Resume overlay */
.cv { position: fixed; inset: 0; z-index: 60; background: rgb(10 10 12 / .82); backdrop-filter: blur(6px); overflow-y: auto; padding: 72px 16px 40px; opacity: 0; transition: opacity .25s; }
.cv[hidden] { display: none; }
.cv.on { opacity: 1; }
.cv img { display: block; width: min(820px, 100%); height: auto; margin: 0 auto; border-radius: 8px; box-shadow: 0 20px 60px rgb(0 0 0 / .4); }
.cv-bar { position: fixed; top: 16px; right: 16px; display: flex; gap: 10px; align-items: center; }
.cv-dl { padding: 10px 16px; border-radius: 999px; background: #fff; color: #111; text-decoration: none; font-size: 14px; }
.cv-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cv-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.reflection li b { display: block; margin-bottom: 4px; color: var(--fg); font-weight: 500; font-size: 16px; }
.reflection li { line-height: 1.6; padding-block: 20px; }
.nf { min-height: 60vh; padding-block: 120px; display: flex; flex-direction: column; gap: 16px; }