/* ==========================================================================
   bohdan.work
   Direction (unslop)
   - Product: personal site of a full-stack developer in Brno who builds
     software that takes manual work off people.
   - Character: precise, bright, a little playful.
   - World: light through fluted glass, a photographer's view.
   - Colors: light theme only; navy ink, sky links, pink signature.
  - Moment: one of Bohdan's photographs, mapped to the palette and seen
     through reeded glass, full bleed in the hero. Everything else is quiet.
   - Signature: viewfinder corner brackets on every image.
   Reference: Pelmatech hero. Palette: #0593C6 sky, #FCFFFF white, #D83995 pink.
   Effects from libraries.dev: Border beam (hero cards), Gooey Move (nav pill).
   Spacing on a 4px grid. One easing curve. Type: Geist + Geist Mono.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --sky: #0593c6;
  --pink: #d83995;
  --white: #fcffff;
  --navy: #141a3d;

  /* Content colors come from the hero photo: the navy of the silhouette is
     the ink, the sky is the link color, the pink is the signature (image
     brackets, section labels, selection). One light theme, like the Pelmatech reference. */
  /* Palette 1, "stripe" (home, legal, 404): white with a cool off-white band */
  --bg: #ffffff;
  --surface: #ffffff;
  --raised: #f6f9fc;
  --band: #f6f9fc;
  --line: rgba(10, 37, 64, 0.08);
  --line-strong: rgba(10, 37, 64, 0.14);
  --text: #0a2540;
  --text-2: #425466;
  --text-3: #697386;
  --accent: #0593c6;
  --accent-ink: #03749d;
  --pink-ink: #c2307f;
  --btn: #0a2540;
  --btn-text: #fcffff;
  --btn-hover: #163a5f;
  --shadow: 0 8px 24px rgba(10, 37, 64, 0.07);
  --pill-bg: var(--raised);
  --pill-active: #ffffff;
  --pill-text: var(--text-2);
  --pill-text-active: var(--text);
  --goo-fill: #ffffff;
  --goo-opacity: 1;

  --glass: rgba(252, 255, 255, 0.14);
  /* Hero glass: a light white sheen over a navy base, so white text on it
     keeps 4.5:1 wherever the photo behind is bright. Used by the nav pill,
     the icon button, the location pill and the project cards. */
  --glass-ui: rgba(255, 255, 255, 0.42);
  --glass-ui-line: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 8px 24px rgba(20, 26, 61, 0.1);
  --glass-strong: rgba(252, 255, 255, 0.22);
  --glass-line: rgba(252, 255, 255, 0.28);
  --on-image: #fcffff;
  --on-image-2: rgba(252, 255, 255, 0.82);
  --on-image-3: rgba(252, 255, 255, 0.66);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: 160ms;
  --t-hover: 160ms;
  --t-enter: 500ms;

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1440px;
  --max-wide: 1440px;
  --header: 72px;

  color-scheme: light;
}


/* Palette 3, "warm" (work): milky paper from the warm light in the photo */
:root[data-palette="warm"] {
  --bg: #fcf8f5;
  --surface: #ffffff;
  --raised: #f5ede7;
  --band: #f7f0ea;
  --line: rgba(43, 26, 38, 0.09);
  --line-strong: rgba(43, 26, 38, 0.16);
  --text: #22182a;
  --text-2: #5a4c58;
  --text-3: #75677a;
  --btn: #22182a;
  --btn-hover: #3a2c42;
  --shadow: 0 8px 24px rgba(43, 26, 38, 0.07);
  --pill-active: #ffffff;
  --goo-fill: #ffffff;
}
/* Palette 5, "graphite" (about): neutral dark, no blue in the greys */
:root[data-palette="graphite"] {
  --bg: #111214;
  --surface: #17181b;
  --raised: #1d1f23;
  --band: #16171a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f6f7;
  --text-2: #a9adb3;
  --text-3: #868a91;
  --accent: #2eaee0;
  --accent-ink: #5cc4ee;
  --pink-ink: #ef6fb4;
  --btn: #fcffff;
  --btn-text: #111214;
  --btn-hover: #ffffff;
  --shadow: none;
  --pill-active: #2a2c31;
  --goo-fill: #2a2c31;
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: max(32px, env(safe-area-inset-left, 0px));
    --gutter-r: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- Page transitions (cross-document View Transitions) ----------
   The header stays put while the page underneath fades and rises slightly.
   Browsers without support simply load the next page. */
@view-transition { navigation: auto; }
/* The header is not captured on its own: a captured element loses its
   backdrop-filter during the transition, so the glass would flash solid.
   It stays in the page image instead: the old page holds still underneath
   and the new one fades in over it (normal blending, not the default
   plus-lighter), so the identical header shows no change at all. */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-in 240ms ease both; mix-blend-mode: normal; }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* No visible page scrollbar (the page still scrolls with wheel, trackpad,
   keys and touch) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Lenis */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--pink); color: #fcffff; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

a, button { touch-action: manipulation; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--btn);
  color: var(--btn-text);
}
.skip:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) + var(--gutter-r));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.wrap.wide { max-width: calc(var(--max-wide) + var(--gutter) + var(--gutter-r)); }

.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 16px; height: 16px; }

.meta {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-2);
  max-width: 36rem;
}

.text-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-hover) ease;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-hover) ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header .wrap {
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sky);
  display: grid;
  place-items: center;
  flex: none;
}
.logo-mark canvas { display: block; }
.over-hero .logo-mark {
  background: var(--glass-ui);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nav {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--pill-bg);
  isolation: isolate;
}
.nav a {
  position: relative;
  z-index: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--pill-text);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.nav a[aria-current="page"] { color: var(--pill-text-active); background: var(--pill-active); }
/* Once the liquid highlight mounts it draws the active pill itself */
.nav.goo-ready a[aria-current="page"] { background: transparent; }
.goo-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.icon-btn:active { transform: scale(0.96); }

/* Header over the hero image (home) */
.over-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--on-image);
  --pill-bg: var(--glass-ui);
  --pill-active: rgba(252, 255, 255, 0.26);
  --pill-text: var(--on-image);
  --pill-text-active: var(--on-image);
  --goo-fill: #fcffff;
  --goo-opacity: 0.26;
}
.over-hero .nav {
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--glass-ui-line);
}
/* Over light content the header switches to light frosted glass with navy
   text: the white of the page, so it blends in, and navy on white is far
   above 4.5:1. Book a call stays the deep sky blue. main.js sets .on-light
   by checking what sits under the header. */
.over-hero .logo, .over-hero .nav, .over-hero .nav a, .over-hero .icon-btn, .over-hero .logo-mark, .over-hero .btn {
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.over-hero.on-light {
  --pill-bg: rgba(255, 255, 255, 0.78);
  --pill-text: var(--text-2);
  --pill-text-active: var(--text);
  --goo-fill: #0a2540;
  --goo-opacity: 0.07;
}
.over-hero.on-light .logo { color: var(--text); }
.over-hero.on-light .nav { box-shadow: inset 0 0 0 1px var(--line), 0 4px 16px rgba(10, 37, 64, 0.06); }
.over-hero.on-light .logo-mark { background: var(--sky); box-shadow: none; }
.over-hero.on-light .icon-btn { color: var(--text); background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px var(--line), 0 4px 16px rgba(10, 37, 64, 0.06); }
.over-hero.on-light .btn.light { background: #03749d; color: #fcffff; }
@media (hover: hover) and (pointer: fine) {
  .over-hero.on-light .icon-btn:hover { background: #ffffff; }
  .over-hero.on-light .btn.light:hover { background: #025f80; }
}
.over-hero .icon-btn {
  color: var(--on-image);
  background: var(--glass-ui);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Buttons ---------- */
.btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: var(--btn);
  color: var(--btn-text);
  font: 500 15px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn.small { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.light { background: var(--white); color: var(--navy); }
.btn .icon { width: 16px; height: 16px; }

.link-on-image {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 4px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-image);
}
.link-on-image .icon { width: 16px; height: 16px; }

.arrow { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--pill-text-active); }
  .icon-btn:hover { color: var(--text); background: var(--raised); }
  .over-hero .icon-btn:hover { color: #141a3d; background: rgba(255, 255, 255, 0.62); }
  .btn:hover { background: var(--btn-hover); }
  .btn.secondary:hover { background: var(--raised); }
  .btn.light:hover { background: #ffffff; }
  .text-link:hover { text-decoration-color: currentColor; }
  a:hover > .arrow, a:hover .title .arrow { transform: translateX(4px); }
  .link-on-image:hover .icon { transform: translateY(2px); }
}
.link-on-image .icon { transition: transform var(--t-hover) var(--ease-out); }

/* ---------- Reeded glass panels (hero, page heads, stages, closing) ---------- */
.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-image);
  /* No-JS fallback: the photo plus a CSS imitation of reeded glass */
  background-color: #1f6ea8;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(10, 16, 48, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 3px,
      rgba(255, 255, 255, 0) 7px,
      rgba(10, 16, 48, 0.08) 14px),
    url("../img/hero-paint.webp");
  background-size: auto, cover;
  background-position: 0 0, 50% 40%;
}
/* Page heads show the home photo laid out a full screen tall, cropped below */
.page-head.glass {
  background-size: auto, max(100%, 177.8svh) auto;
  background-position: 0 0, 55% 0;
}
.glass-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.glass-canvas.is-ready { opacity: 1; }
.glass .frame::after { --c: rgba(252, 255, 255, 0.85); }
.shots.glass::before,
.work-media.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(20, 26, 61, 0.22);
}
.glass figcaption { color: var(--on-image-2); text-shadow: 0 1px 2px rgba(20, 26, 61, 0.3); }

/* ---------- Hero (Pelmatech reference: full bleed, reeded glass) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-image);
  padding-top: calc(var(--header) + env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: 32px;
}

/* Calm space for the text at the bottom: a soft tone shift into navy */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 26, 61, 0) 45%, rgba(20, 26, 61, 0.5) 100%);
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero h1 {
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 300;
  max-width: none;
  /* soft navy halo: keeps the thin white letters readable where they cross
     the bright part of the photo, without a visible box */
  text-shadow: 0 2px 28px rgba(20, 26, 61, 0.45), 0 1px 3px rgba(20, 26, 61, 0.3);
}
.hero-sub { font-size: 15px; line-height: 24px; color: var(--on-image-2); max-width: 45rem; }
.hero-actions { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; }

.hero-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}
.hero-features li { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 20px; color: var(--on-image-3); }
.hero-features li strong { display: block; font-weight: 500; color: var(--on-image); }
.hero-features .icon { color: var(--on-image); }

/* Glass cards, top right */
.hero-side {
  position: absolute;
  z-index: 1;
  top: calc(var(--header) + env(safe-area-inset-top, 0px) + 16px);
  right: max(var(--gutter-r), calc((100% - var(--max-wide)) / 2));
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-place {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--on-image);
  align-self: flex-end;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--glass-ui);
  box-shadow: var(--glass-ui-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.hero-place .sep { opacity: 0.5; }
.hero-place time { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--on-image); }
.beam-host { display: block; }
.glass-card {
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--glass-ui);
  box-shadow: var(--glass-ui-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  color: var(--on-image);
}
.glass-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.glass-card .top strong { font-size: 15px; font-weight: 500; }
.glass-card .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-image); }
.glass-card .span { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.glass-card .span > div { display: flex; flex-direction: column; gap: 2px; }
.glass-card .span > div:last-child { text-align: right; }
.glass-card .label { font-size: 12px; color: var(--on-image); }
.glass-card .value { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.glass-card .chip {
  align-self: center;
  margin-top: 16px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(252, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(252, 255, 255, 0.22);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--on-image);
  white-space: nowrap;
}

/* Shorter screens: keep the three cards clear of the headline */
@media (max-height: 880px) {
  .hero-side { gap: 8px; }
  .glass-card { padding: 12px 16px; }
  .glass-card .top { margin-bottom: 8px; }
  .glass-card .value { font-size: 18px; line-height: 24px; }
  .glass-card .chip { margin-top: 12px; }
}
@media (max-height: 720px) {
  .hero-side { display: none; }
}

/* Load entrance: once, short fade and rise with a small stagger */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hero-copy > *,
.hero-actions,
.hero-features,
.hero-side {
  animation: rise var(--t-enter) var(--ease-out) both;
}
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-actions { animation-delay: 120ms; }
.hero-features { animation-delay: 180ms; }
.hero-side { animation-delay: 240ms; }

/* ---------- Sections ---------- */
main { display: block; }

.section { padding-top: 96px; padding-bottom: 96px; }
.section + .section { border-top: 1px solid var(--line); }
.section.tight { padding-top: 48px; padding-bottom: 48px; }
/* Every second block sits on a faint sky band, so long pages have a rhythm
   without boxes; the hairline between same-colored neighbours stays */
main > .section:nth-of-type(odd):not(:first-of-type),
main > .case:nth-of-type(even) { background: var(--band); }
.case-facts dd, .case-cols h3, .row h3, .principles h3 { color: var(--text); }
.site-footer { background: var(--band); border-top: 1px solid var(--line); }

.section-head { margin-bottom: 40px; }
.section-head .meta { margin-bottom: 12px; }
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Page heads: a shorter band of the same reeded glass, giant title in white */
.page-head {
  padding-top: calc(var(--header) + env(safe-area-inset-top, 0px) + 96px);
  padding-bottom: 64px;
  min-height: min(68svh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 26, 61, 0) 30%, rgba(20, 26, 61, 0.45) 100%);
}
.page-head .meta {
  margin-bottom: 20px;
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--on-image);
  background: rgba(20, 26, 61, 0.56);
  box-shadow: inset 0 0 0 1px rgba(252, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.page-head .lead { color: var(--on-image-2); }
.page-head .case-index a { color: var(--on-image); text-decoration-color: rgba(252, 255, 255, 0.5); }
.page-title {
  font-size: clamp(56px, 11vw, 160px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 400;
  text-shadow: 0 2px 28px rgba(20, 26, 61, 0.4), 0 1px 3px rgba(20, 26, 61, 0.25);
}
.page-head .lead { margin-top: 24px; max-width: 48rem; }

/* ---------- Viewfinder brackets (signature) ---------- */
.frame { position: relative; }
.frame::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  --c: var(--pink-ink);
  --l: 16px;
  --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
}

/* ---------- Rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.row h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.row p { color: var(--text-2); font-size: 17px; line-height: 28px; max-width: 40rem; }

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.principles div { display: flex; flex-direction: column; gap: 8px; }
.principles h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.principles p { color: var(--text-2); }

/* ---------- Work cards (home) ---------- */
/* Home: selected work, each preview in a macOS-style window */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.work-head .meta { color: var(--pink-ink); margin-bottom: 12px; }
.work-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
.work-all { white-space: nowrap; font-size: 15px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.work-card { display: flex; flex-direction: column; gap: 12px; }
.win-card {
  margin-bottom: 8px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.win-card .win-bar { height: 30px; gap: 6px; padding: 0 12px; }
.win-card .win-bar i { width: 9px; height: 9px; }
.win-card .win-bar span { font-size: 10px; padding: 4px 28px; transform: translateX(-20px); }
.win-view { aspect-ratio: 16 / 10; overflow: hidden; background: #151515; }
.win-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.win-view.view-top img { object-position: top; }
.view-phones { display: flex; justify-content: center; gap: 16px; padding: 24px 24px 0; background: #f4f6f9; }
.view-phones img { width: 34%; height: auto; object-fit: initial; align-self: flex-start; border-radius: 14px 14px 0 0; box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.08), 0 12px 32px rgba(10, 37, 64, 0.16); }
.view-phones img:nth-child(2) { margin-top: 24px; }
/* MAO card: the same before / after as on the Work page, in miniature */
.view-story {
  background: #f4f6f9;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9%;  /* % of this box; cq units here would refer to an outer container */
}
.view-story > * { flex: none; }
.view-story .mao-terminal { height: 70cqh; width: calc(70cqh * 142 / 252); color: #9aa6b6; display: block; }
.view-story .mao-arrow { margin: 0; }
.view-story .mao-arrow svg { width: 20px; height: 20px; }
.view-story .device { width: auto; padding: 4px; border-radius: 20px; box-shadow: inset 0 0 0 1px #2a2d36, 0 12px 28px rgba(10, 37, 64, 0.2); }
.view-story .device img { height: calc(70cqh - 8px); width: calc((70cqh - 8px) * 720 / 1279); border-radius: 16px; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .win-card { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.08), 0 32px 64px rgba(10, 37, 64, 0.2); }
}
.work-card .title { display: flex; align-items: baseline; gap: 8px; font-size: 22px; line-height: 28px; letter-spacing: -0.015em; }
.work-card .title .arrow { color: var(--accent-ink); }
.work-card p { color: var(--text-2); }
.work-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-3); }
@media (max-width: 1000px) {
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .work-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .win-card { transition: none; }
}

/* ---------- Case studies ---------- */
.case-index { display: flex; gap: 24px; margin-top: 32px; }
.case-index a { font-size: 15px; }

.case { padding-top: 96px; padding-bottom: 96px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 16px); }
.case-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 40px; }
.case-head h2 { font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
.case-head p { color: var(--text-2); font-size: 17px; line-height: 28px; }

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.case-facts div { display: flex; flex-direction: column; gap: 4px; }
.case-facts dd { font-size: 15px; line-height: 22px; }

.case-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 56px; }
.case-cols h3 { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
.case-cols p { color: var(--text-2); font-size: 16px; line-height: 26px; }

.shots { display: grid; gap: 32px; }
.shots.phones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 24px;
  padding: 56px 48px 40px;
  justify-items: center;
}
.shots.phones figure { width: min(300px, 100%); }
.shots.phones img { border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 26, 61, 0.35); }
.shots.wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; border-radius: 24px; padding: 48px; }
.shots.wide img { border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 26, 61, 0.35); }

figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
figcaption { font-size: 13px; line-height: 20px; color: var(--text-3); }

.case-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---------- Photos (About): a pinned sideways strip and a lightbox ----------
   Desktop: the section sticks to the screen and scrolling down moves the
   photos sideways (like the lenis.dev showcase); after the last photo the page
   carries on. Phones: a plain swipe strip. Images are lazy and sized per
   screen (640 or 1040 px tall). */
.photos-section { overflow-x: clip; } /* clip, not hidden: hidden would break the sticky pin */
.photos-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.photos-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.photos-count { font-variant-numeric: tabular-nums; color: var(--text-3); }
.photos-progress { display: block; width: 120px; height: 2px; border-radius: 1px; background: var(--line-strong); overflow: hidden; }
.photos-progress span { display: block; height: 100%; width: 100%; background: var(--pink-ink); transform-origin: left; transform: scaleX(0); }
.photos-nav { gap: 16px; }

/* Desktop pin: JS sets the pin height to one screen plus the strip's extra width */
@media (min-width: 900px) {
  .photos-section.is-pinned { padding-top: 0; padding-bottom: 0; }
  .is-pinned .photos-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--header);
    overflow-x: clip;
  }
  .is-pinned .photos-head { margin-bottom: 32px; }
  .is-pinned .photos-strip { overflow: visible; scroll-snap-type: none; cursor: auto; }
  .is-pinned .photos-track { will-change: transform; }
  .is-pinned .photo-btn { height: min(560px, calc(100svh - var(--header) - 260px)); }
}
.round-btn {
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--t-hover) ease, opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.round-btn:active { transform: scale(0.96); }
.round-btn:disabled { opacity: 0.35; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .round-btn:hover { background: var(--raised); }
}
.photos-strip {
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 0 var(--edge) 4px;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
}
.photos-strip::-webkit-scrollbar { display: none; }
.photos-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.photos-strip.is-dragging .photo-btn { pointer-events: none; }
.photos-strip:focus-visible .photos-track { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 18px; }
.photos-track { display: flex; gap: 16px; width: max-content; }
.photo { scroll-snap-align: start; flex: none; }
.photo-btn {
  display: block;
  height: clamp(320px, 40vw, 560px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--raised);
  cursor: zoom-in;
}
.photo-btn img {
  height: 100%;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.photo-btn img.is-loaded { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .photo-btn:hover img { transform: scale(1.02); }
}

/* Lightbox: native dialog, photo centred, arrows and keys to move */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fcffff;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 10, 20, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in 220ms var(--ease-out); }
.lightbox[open]::backdrop { animation: lb-fade 220ms var(--ease-out); }
.lightbox.is-closing { animation: lb-out 160ms var(--ease-out) forwards; }
.lightbox.is-closing::backdrop { animation: lb-fade 160ms var(--ease-out) reverse forwards; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes lb-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes lb-fade { from { opacity: 0; } }
.lightbox-img {
  max-width: calc(100vw - 176px);
  max-height: calc(100dvh - 128px);
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transition: opacity 180ms var(--ease-out);
}
.lightbox-img.is-swapping { opacity: 0; }
.lightbox .round-btn {
  position: absolute;
  color: #fcffff;
  background: rgba(252, 255, 255, 0.12);
  box-shadow: inset 0 0 0 0.5px rgba(252, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@media (hover: hover) and (pointer: fine) {
  .lightbox .round-btn:hover { background: rgba(252, 255, 255, 0.22); }
}
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 32px; top: 50%; margin-top: -22px; }
.lb-next { right: 32px; top: 50%; margin-top: -22px; }
.lb-count { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: rgba(252, 255, 255, 0.7); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lightbox.is-closing, .lightbox[open]::backdrop { animation-duration: 1ms; }
  .photo-btn img { transition: opacity 200ms ease; }
  .photo-btn:hover img { transform: none; }
}
@media (max-width: 767px) {
  .photos-head { flex-direction: column; align-items: flex-start; }
  .photos-nav .round-btn { display: none; }
  .photos-track { gap: 10px; }
  .photo-btn { height: 260px; border-radius: 12px; }
  .lightbox-img { max-width: 100vw; max-height: calc(100dvh - 160px); border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; margin: 0; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-close { top: 16px; right: 16px; }
}

/* ---------- Work: case studies with a project rail ----------
   Left: a sticky list of projects; the one on screen is marked with the
   pink bar and opens its key facts. Right: each project told in order,
   problem, product, what was built, result. Media sits on calm surfaces
   (device frames, browser windows), never on the hero photo. */
.work-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 80px;
  padding-top: 96px;
  padding-bottom: 120px;
  align-items: start;
}
.work-rail { position: sticky; top: calc(var(--header) + 40px); }
.rail-list { border-top: 1px solid var(--line); }
.rail-list li { border-bottom: 1px solid var(--line); position: relative; }
.rail-list li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: var(--pink-ink);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.rail-list li.is-active::before { opacity: 1; transform: none; }
.rail-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  padding: 16px 0;
  color: var(--text-3);
  transition: color var(--t-hover) ease;
}
.rail-num { font-family: var(--mono); font-size: 12px; line-height: 24px; grid-row: span 2; font-variant-numeric: tabular-nums; }
.rail-name { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.rail-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.rail-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.rail-status.live::before { background: #1f9d6b; opacity: 1; }
.is-active > .rail-link { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .rail-link:hover { color: var(--text); }
}
.rail-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-out);
}
.rail-more > div { overflow: hidden; }
.is-active > .rail-more { grid-template-rows: 1fr; }
.rail-facts { display: grid; gap: 10px; padding: 0 0 18px 36px; }
.rail-facts dt { font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--text-3); }
.rail-facts dd { font-size: 13px; line-height: 20px; color: var(--text-2); }

.work-flow { min-width: 0; }
.cs { display: grid; gap: 48px; scroll-margin-top: calc(var(--header) + 32px); }
.cs + .cs { margin-top: 120px; padding-top: 120px; border-top: 1px solid var(--line); }
.cs-head { display: grid; gap: 16px; }
.cs-meta { display: flex; align-items: center; gap: 16px; }
.cs-num { font-family: var(--mono); font-size: 12px; color: var(--pink-ink); }
.cs-head h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
.cs-lede { max-width: 42rem; font-size: 19px; line-height: 30px; color: var(--text-2); }
.cs-facts { display: none; }
.cs-step { max-width: 42rem; }
.cs-step h3 { font-size: 17px; line-height: 24px; margin-bottom: 8px; }
.cs-step p { font-size: 17px; line-height: 28px; color: var(--text-2); }
.cs-panel { gap: 12px; }
.cs-media { display: flex; justify-content: center; }
.cs-panel figcaption { font-size: 13px; line-height: 20px; color: var(--text-3); }
.cs-phones { display: flex; gap: 48px; justify-content: center; align-items: flex-start; }
.cs-phones .device:nth-child(2) { margin-top: 48px; }
.cs-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Device frame and browser window */
.device {
  width: min(280px, 100%);
  padding: 9px;
  border-radius: 44px;
  background: #0b0d12;
  box-shadow: inset 0 0 0 1.5px #2a2d36, 0 24px 56px rgba(10, 37, 64, 0.2);
}
.device img { border-radius: 35px; width: 100%; height: auto; display: block; }
.win {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #151515;
  box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.08), 0 24px 56px rgba(10, 37, 64, 0.18);
}
.win-bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #232325; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #48484c; display: block; flex: none; }
.win-bar span {
  margin: 0 auto;
  transform: translateX(-28px);
  font: 12px/1 var(--mono);
  color: #a1a1a6;
  background: #151515;
  border-radius: 7px;
  padding: 6px 48px;
}
.win > img { display: block; width: 100%; height: auto; }
.win-phones {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 56px 32px;
  background: #f4f6f9;
}
.win-phones img { width: min(260px, 40%); height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.08), 0 24px 48px rgba(10, 37, 64, 0.18), 0 4px 12px rgba(10, 37, 64, 0.08); }
.win-phones img:nth-child(2) { margin-top: 40px; }
.win .player { border-radius: 0; box-shadow: none; }

/* Every window on the Work page has the same body: full column width, 16:9,
   the size of the video. The video and the dashboard are 16:9 already; the
   EduHub page (16:10) sits on white, so its side margins blend with its own
   white page; the MAO scenes lay out against the window height. */
.cs .win > :not(.win-bar) { width: 100%; aspect-ratio: 16 / 9; }
.cs .win > img { height: auto; object-fit: cover; }
.cs .win > img[src*="eduhub"] { object-fit: contain; background: #ffffff; }
.cs .win .player { aspect-ratio: 16 / 9; }

/* MAO: before / after story, and one phone with features pointed out.
   Both sit on the light window body; the phones are real device frames. */
.mao-story, .mao-features { background: #f4f6f9; container-type: size; }
.mao-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
  padding: 0 48px;
}
/* both sides: a visual box of the same height, caption on a shared line */
.mao-side { display: grid; grid-template-rows: 64cqh auto; justify-items: center; align-items: start; row-gap: 20px; margin: 0; }
.mao-side figcaption { align-self: start; text-align: center; font-size: 14px; line-height: 20px; color: var(--text-2); max-width: 260px; }
.mao-side figcaption strong { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-2); margin-bottom: 4px; }
.mao-after figcaption strong { color: var(--pink-ink); }
/* the terminal is drawn as tall as the phone, so the two read as equals */
.mao-terminal { height: 64cqh; width: auto; color: #9aa6b6; display: block; }
.mao-story .device, .mao-features .device { width: auto; padding: 7px; border-radius: 36px; }
.mao-story .device img, .mao-features .device img { width: auto; border-radius: 30px; }
.mao-story .device img { height: calc(64cqh - 14px); }
.mao-arrow { color: var(--pink-ink); display: grid; place-items: center; margin-bottom: 52px; }
.mao-arrow svg { width: 32px; height: 32px; }

.mao-features { display: flex; justify-content: center; align-items: center; }
.mao-phone { position: relative; width: max-content; }
.mao-features .device img { height: calc(82cqh - 14px); }
.mao-calls { position: absolute; inset: 8px; pointer-events: none; }
.mao-call { position: absolute; top: var(--y); width: 0; height: 0; }
.mao-call > div {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 220px;
  display: grid;
  gap: 2px;
}
.mao-call b { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--pink-ink); }
.mao-call strong { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); }
.mao-call span:not([class]) { font-size: 13px; line-height: 18px; color: var(--text-2); }
.mao-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--pink-ink);
  box-shadow: 0 0 0 4px rgba(194, 48, 127, 0.18), 0 0 0 1px #fff;
}
.mao-line { position: absolute; top: 0; height: 1px; background: rgba(10, 37, 64, 0.28); }
/* dots sit on the left or right border of the row they point at (6.7% in
   from the screen edge), lines run out past the phone, labels follow */
.mao-call.left { left: 6.7%; }
.mao-call.left .mao-line { right: 0; width: 80px; }
.mao-call.left > div { right: 92px; text-align: right; }
.mao-call.right { left: 93.3%; }
.mao-call.right .mao-line { left: 0; width: 80px; }
.mao-call.right > div { left: 92px; }

@media (max-width: 900px) {
  .cs .win > .mao-story, .cs .win > .mao-features { aspect-ratio: auto; container-type: normal; }
  .mao-side { grid-template-rows: auto auto; }
  .mao-story .device img, .mao-features .device img { height: auto; width: 100%; }
  .mao-terminal { height: auto; }
  .mao-arrow { margin-bottom: 0; }
  .mao-story { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
  .mao-arrow { transform: rotate(90deg); }
  .mao-terminal { width: 120px; }
  .mao-story .device, .mao-features .device { width: 200px; padding: 6px; border-radius: 32px; }
  .mao-story .device img, .mao-features .device img { border-radius: 26px; }
  .mao-features { flex-direction: column; align-items: center; padding: 32px 16px; }
  .mao-phone { width: 212px; }
  /* labels drop under the phone as a numbered list; dots stay on the screen */
  .mao-calls { position: static; margin-top: 24px; display: grid; gap: 12px; width: 280px; margin-left: -34px; }
  .mao-call { position: static; width: auto; height: auto; }
  .mao-call .mao-line { display: none; }
  .mao-call > div { position: static; transform: none; width: auto; text-align: left !important; grid-template-columns: 28px 1fr; column-gap: 8px; }
  .mao-call > div b { grid-row: span 2; line-height: 22px; }
  .mao-call .mao-dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-more, .rail-list li::before { transition: none; }
}
@media (max-width: 900px) {
  .work-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .work-rail {
    position: sticky;
    top: var(--header);
    z-index: 20;
    margin: 0 calc(var(--gutter) * -1);
    padding: 12px var(--gutter);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--line);
  }
  /* once stuck, the bar extends up behind the fixed header so text never
     shows through it */
  .work-rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--header);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: inherit;
    backdrop-filter: inherit;
    opacity: 0;
    pointer-events: none;
  }
  .work-rail.is-stuck::before { opacity: 1; }
  .rail-list { display: flex; gap: 8px; border: 0; overflow-x: auto; scrollbar-width: none; }
  .rail-list li { border: 0; }
  .rail-list li::before, .rail-more, .rail-list .rail-status, .rail-num { display: none; }
  .rail-link { display: block; padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
  .rail-name { font-size: 14px; }
  .is-active > .rail-link { background: var(--btn); color: var(--btn-text); box-shadow: none; }
  .cs { scroll-margin-top: calc(var(--header) + 72px); gap: 32px; }
  .work-flow { padding-top: 40px; }
  .cs + .cs { margin-top: 72px; padding-top: 72px; }
  .cs-facts { display: grid; gap: 12px; margin-top: 8px; }
  .cs-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .cs-facts dt { font-family: var(--mono); font-size: 12px; line-height: 22px; color: var(--text-3); }
  .cs-facts dd { font-size: 15px; line-height: 22px; color: var(--text-2); }
  .cs-lede { font-size: 17px; line-height: 28px; }
  .cs-phones { gap: 12px; }
  .cs-phones .device { width: 47%; padding: 5px; border-radius: 26px; }
  .cs-phones .device img { border-radius: 21px; }
  .cs-phones .device:nth-child(2) { margin-top: 24px; }
  .win-bar { height: 28px; }
  .win-bar i { width: 8px; height: 8px; }
  .win-bar span { padding: 4px 20px; font-size: 10px; transform: none; }
}

/* ---------- Video player (SpendSplif overview) ----------
   Apple TV style: round frosted buttons over the picture, title and a thin
   progress line at the bottom, volume in its own pill at the top right.
   Media Chrome (Mux, MIT) does the work; main.js loads it when the stage
   is near or the page is idle. Before the first play only the big button and title show. */
.player-stage { border-radius: 24px; padding: 48px; gap: 16px; }
.player-frame { border-radius: 16px; }
.player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #151515;
  box-shadow: 0 16px 40px rgba(20, 26, 61, 0.35);
  color: #fcffff;
  --media-font-family: var(--font);
  --media-font-size: 12px;
  --media-primary-color: #fcffff;
  --media-secondary-color: transparent;
  --media-icon-color: #fcffff;
  --media-text-color: #fcffff;
  --media-control-background: transparent;
  --media-control-hover-background: transparent;
  --media-control-padding: 0;
  --media-focus-box-shadow: 0 0 0 2px #38b2e3;
  --media-range-padding: 0;
  --media-range-track-height: 4px;
  --media-range-track-border-radius: 2px;
  --media-range-track-background: rgba(252, 255, 255, 0.28);
  --media-range-bar-color: #fcffff;
  --media-time-range-buffered-color: rgba(252, 255, 255, 0.4);
  --media-range-thumb-width: 12px;
  --media-range-thumb-height: 12px;
  --media-range-thumb-background: #fcffff;
  --media-range-thumb-opacity: 0;
  --media-range-thumb-transition: opacity 160ms var(--ease-out);
  --media-preview-time-background: rgba(20, 26, 61, 0.7);
  --media-preview-time-border-radius: 6px;
  --media-control-transition-in: opacity 200ms var(--ease-out);
  --media-control-transition-out: opacity 400ms var(--ease-out);
}
.player video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Frosted material shared by every control */
.pc, .player-volume {
  background: rgba(252, 255, 255, 0.2);
  box-shadow: inset 0 0 0 0.5px rgba(252, 255, 255, 0.38), 0 4px 16px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
}
.pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  flex: none;
  transition: opacity 200ms var(--ease-out), background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.pc:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .pc:hover, .player-volume:hover { background: rgba(252, 255, 255, 0.26); }
}
.pc-sm { width: 36px; height: 36px; --media-button-icon-width: 18px; --media-button-icon-height: 18px; }
.pc-md { width: 52px; height: 52px; }
.pc-lg { width: 76px; height: 76px; }
.seek-icon { width: 30px; height: 30px; display: block; color: #fcffff; }
.seek-icon text { font: 600 7px/1 var(--font); fill: currentColor; }
.player-main svg { width: 32px; height: 32px; fill: #fcffff; display: block; transition: fill var(--t-hover) ease; }
.player-main [slot="play"], .player-main [slot="pause"] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Subtitles: clean white text on a soft dark plate, placed above the controls
   (line position comes from the .vtt file). The CC button sits with speed. */
.player video::cue {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
  color: #fcffff;
  background: rgba(10, 14, 30, 0.72);
}
.pc-cc { --media-button-icon-width: 20px; --media-button-icon-height: 20px; }
.pc-cc[mediasubtitlesshowing] { background: rgba(252, 255, 255, 0.9); --media-icon-color: #141a3d; }

/* Speed stays a circle whatever the label (1x, 1.25x, 1.5x, 2x) */
.pc-rate {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1;
  --media-control-padding: 0;
  --media-font-size: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* No dark shade over the picture: the video keeps its own brightness when
   the controls show. Text stays readable with a soft shadow instead. */
.player-shade { display: none; }
.player-title, .player-times { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35); }
.player-range { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

.player-top {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0;
}
.player-group { display: flex; gap: 8px; align-items: center; }
.player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  transition: background-color var(--t-hover) ease;
  --media-button-icon-width: 18px;
  --media-button-icon-height: 18px;
}
.player-volume media-volume-range { width: 96px; --media-range-thumb-opacity: 1; }
.player-volume media-mute-button { width: 24px; height: 24px; }

.player-center {
  display: flex;
  align-items: center;
  gap: 32px;
}

.player-bottom {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 18px;
}
.player-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.player-title { display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.player-title span { font-size: 12px; line-height: 16px; color: rgba(252, 255, 255, 0.78); }
.player-title strong { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.player-range { width: 100%; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .player-range:hover { --media-range-thumb-opacity: 1; --media-range-track-height: 6px; }
}
.player-times {
  margin-top: -4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  --media-font-family: var(--mono);
  color: rgba(252, 255, 255, 0.78);
}
.player-times media-time-display { padding: 0; color: rgba(252, 255, 255, 0.78); }

/* Before the first play: big button and title only, no shade */
/* Showing and hiding the controls.
   The fade runs on each control itself, never on a wrapper: a parent with
   opacity below 1 cuts the glass buttons off from the video behind them, so
   their blur would flash light and then snap dark. Media Chrome's own
   wrapper fade is off (noautohide in the markup). */
.player-volume, .player-title, .player-range, .player-times, .player-shade {
  transition: opacity 200ms var(--ease-out), background-color var(--t-hover) ease;
}
.player[userinactive]:not([mediapaused]) :is(.pc, .player-volume, .player-title, .player-range, .player-times, .player-shade) {
  opacity: 0;
  pointer-events: none;
  transition-duration: 400ms;
}
/* Wrappers let clicks through to the video (click to pause); controls take them */
.player-top, .player-center, .player-bottom, .player-group, .player-row { pointer-events: none !important; }
.player .pc, .player-volume, .player-range { pointer-events: auto; }
/* Before the first play: only the big button and the title */
.player:not([mediahasplayed]) :is(.player-top .pc, .player-volume, .pc-seek, .player-range, .pc-after .pc, .player-times, .player-shade) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.player:not([mediahasplayed]) .player-bottom { padding-bottom: 24px; }

/* Before the components load (a fraction of a second): poster, title and a
   plain play button in the middle */
.player:not(:defined) > :not(video):not(.player-center):not(.player-bottom) { display: none; }
.player:not(:defined) .player-center {
  position: absolute; inset: 0; justify-content: center;
}
.player:not(:defined) .player-center > :not(.player-main),
.player:not(:defined) .player-bottom > :not(.player-row),
.player:not(:defined) .pc-after { display: none; }
.player:not(:defined) .player-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  .pc, .player-volume { transition: none; }
  .pc:active { transform: none; }
}
@media (max-width: 767px) {
  .player-stage { padding: 12px; border-radius: 20px; }
  .player-frame, .player { border-radius: 12px; }
  .player-volume, .pc-pip, .player-times, .player-title span { display: none !important; }
  .player-top { padding: 8px 8px 0; }
  .pc-sm { width: 28px; height: 28px; --media-button-icon-width: 16px; --media-button-icon-height: 16px; }
  .pc-rate { width: 32px; min-width: 32px; max-width: 32px; height: 32px; --media-font-size: 10px; font-size: 10px; }
  .pc-md { width: 36px; height: 36px; }
  .seek-icon { width: 20px; height: 20px; }
  .pc-lg { width: 48px; height: 48px; }
  .player-main svg { width: 22px; height: 22px; }
  .player-center { gap: 16px; }
  .player-bottom { padding: 0 10px 8px; gap: 6px; }
  .player:not([mediahasplayed]) .player-bottom { padding-bottom: 10px; }
  .player-title strong { font-size: 15px; line-height: 20px; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.about-photo img { border-radius: 16px; width: 100%; }
.story { display: flex; flex-direction: column; gap: 20px; max-width: 40rem; }
.story p { font-size: 19px; line-height: 30px; color: var(--text-2); }
.story p:first-child { color: var(--text); }
.story .meta { font-size: 12px; line-height: 16px; color: var(--pink-ink); }
.section-head .meta { color: var(--pink-ink); }
.story h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }

.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.skills h3 { font-size: 16px; line-height: 24px; margin-bottom: 12px; }
.skills li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.skills li:first-child { border-top: 1px solid var(--line); }

.timeline .row h3 { font-size: 18px; }

.outside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.outside img { border-radius: 16px; }

/* ---------- Closing ---------- */
.closing { padding-top: 128px; padding-bottom: 96px; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 26, 61, 0.1) 0%, rgba(20, 26, 61, 0.5) 100%);
}
.closing .closing-body p { color: var(--on-image-2); }
.closing .meta { color: var(--on-image-2); }
.closing .text-link { color: var(--on-image); text-decoration-color: rgba(252, 255, 255, 0.5); }
.closing-title {
  font-size: clamp(64px, 15vw, 224px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 300;
}
.closing-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  margin-top: 40px;
  align-items: end;
}
.closing-body p { font-size: 19px; line-height: 30px; color: var(--text-2); max-width: 32rem; }
.closing-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.closing-actions .meta { font-size: 13px; }

/* ---------- Legal ---------- */
.legal { max-width: 48rem; }
.legal .row { padding: 16px 0; }
.legal .row h3 { font-size: 15px; font-weight: 500; }
.legal .row p { font-size: 16px; }
.legal h2 { font-size: 24px; letter-spacing: -0.015em; margin: 48px 0 12px; }
.legal p.body { color: var(--text-2); }

/* ---------- Footer ---------- */
.site-footer {
  padding-top: 32px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.site-footer p { font-size: 14px; color: var(--text-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .foot-links a:hover { color: var(--text); }
  .foot-links a { transition: color var(--t-hover) ease; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-features { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}

@media (max-width: 960px) {
  .hero-side { display: none; }
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .section-head,
  .row,
  .case-head,
  .closing-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .work-grid,
  .about-grid,
  .outside,
  .shots.wide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .principles,
  .case-cols,
  .skills { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-photo { max-width: 420px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .case { padding-top: 64px; padding-bottom: 64px; }
  .closing { padding-top: 80px; padding-bottom: 64px; }
}

@media (max-width: 640px) {
  :root { --header: 64px; }
  .logo .name { display: none; }
  .site-header .wrap { gap: 8px; }
  .nav a { padding: 0 12px; }
  .icon-btn { display: none; }
  .hero { padding-bottom: 24px; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero-actions { gap: 8px; }
  .hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .hero-features li:last-child { grid-column: 1 / -1; }
  .shots.phones { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; gap: 40px; }
  .shots.wide { padding: 24px; }
  .page-head { padding-bottom: 40px; min-height: 0; }
  .case-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-actions,
  .hero-features,
  .hero-side { animation: fade 200ms ease both; animation-delay: 0ms !important; }
  .btn:active,
  .icon-btn:active { transform: none; }
  .arrow,
  .link-on-image .icon { transition: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }


/* ---------- Liquid Glass (glassy-liquid) on the hero controls ----------
   glass.js turns these into light Liquid Glass and adds .is-liquid. Before it
   runs (each page load) and without it, the same light frosted glass with
   navy text is drawn by CSS, so switching pages never flashes a dark bar. */
.liquid-ready .over-hero .nav.is-liquid,
.liquid-ready .over-hero .icon-btn.is-liquid,
.liquid-ready .over-hero .logo-mark.is-liquid,
.liquid-ready .glass-card.is-liquid {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}
.over-hero {
  --pill-text: #141a3d;
  --pill-text-active: #141a3d;
  --goo-fill: #0a2540;
  --goo-opacity: 0.1;
}
.over-hero .icon-btn { color: #141a3d; }
/* the location line: plain white text on the sky, no glass, aligned with the
   left edge of the cards. White alone is only ~2:1 on this sky, so a tight
   navy halo sits behind each letter (WCAG counts a halo as the text's
   background, see Understanding SC 1.4.3). */
.hero-place.hero-place {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 2px;
  align-self: flex-start;
  font-weight: 500;
  text-shadow: 0 0 1px rgba(20, 26, 61, 0.9), 0 0 2px rgba(20, 26, 61, 0.75), 0 0 8px rgba(20, 26, 61, 0.45);
}
.hero-place,
.hero-place time { color: #fcffff; }
.hero-place .icon { filter: drop-shadow(0 0 1.5px rgba(20, 26, 61, 0.9)); }
.liquid-ready .over-hero.on-light .logo-mark.is-liquid { background: none; }
.glass-card { color: #141a3d; text-shadow: none; }
.glass-card .tag,
.glass-card .label { color: #3a4566; }
.glass-card .chip { background: rgba(20, 26, 61, 0.08); box-shadow: none; color: #141a3d; }

/* Headline: two set lines on wide screens, natural balanced wrap on phones
   (no lone last word) */
@media (max-width: 767px) {
  .br-wide { display: none; }
  .hero h1 { text-wrap: balance; }
}
/* Press feedback on the remaining pressable items */
.nav a, .rail-link, .photo-btn { transition-property: color, background-color, transform; }
.nav a:active, .photo-btn:active { transform: scale(0.97); }
.text-link { text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .nav a:active, .photo-btn:active { transform: none; }
}

/* Player controls in Liquid Glass (glass.js): our frosted fill steps aside */
.player .pc.is-liquid,
.player .player-volume.is-liquid {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pc-glass { display: inline-flex; flex: none; border-radius: 999px; position: relative; }
/* the wrapper fades with its button when the controls hide */
.pc-glass { transition: opacity 200ms var(--ease-out); }
.player[userinactive]:not([mediapaused]) .pc-glass { opacity: 0; }
.player:not([mediahasplayed]) .player-top .pc-glass,
.player:not([mediahasplayed]) .pc-glass:has(.pc-seek),
.player:not([mediahasplayed]) .pc-after .pc-glass { opacity: 0 !important; pointer-events: none !important; }
.pc-glass:has(.pc-seek) { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .player .pc.is-liquid:hover, .player .player-volume.is-liquid:hover { background: rgba(252, 255, 255, 0.1); }
}

/* ==========================================================================
   Phones and tablets (desktop from 1200 px up is unchanged)
   ========================================================================== */

/* Small laptops and tablets in landscape: the project panel would cover the
   headline and the buttons, so it steps out and the hero goes single column */
@media (max-width: 1199px) {
  .hero-side { display: none; }
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-actions { padding-bottom: 0; }
}

/* MAO callouts need ~900 px beside the phone; below that they become a
   numbered list under the phone (same as on phones) */
@media (max-width: 1199px) {
  .mao-features { flex-direction: column; align-items: center; padding: 32px 16px; }
  .cs .win > .mao-features { aspect-ratio: auto; container-type: normal; }
  .mao-features .device img { height: auto; width: 100%; }
  .mao-phone { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .mao-phone .device { width: 232px; }
  .mao-calls { position: static; margin: 24px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; width: min(520px, 100%); inset: auto; }
  .mao-call { position: static; width: auto; height: auto; }
  .mao-call .mao-line, .mao-call .mao-dot { display: none; }
  .mao-call > div { position: static; transform: none; width: auto; text-align: left !important; grid-template-columns: 28px 1fr; column-gap: 8px; }
  .mao-call > div b { grid-row: span 2; line-height: 22px; }
}

/* Tablets in portrait: keep "before / after" side by side, skills in columns */
@media (min-width: 601px) and (max-width: 900px) {
  .cs .win > .mao-story { aspect-ratio: 16 / 9; container-type: size; }
  .mao-story { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0; padding: 0 24px; }
  .mao-side { grid-template-rows: 58cqh auto; row-gap: 18px; }
  .mao-terminal { height: 58cqh; width: auto; }
  .mao-story .device { width: auto; padding: 6px; border-radius: 30px; }
  .mao-story .device img { height: calc(58cqh - 12px); width: auto; border-radius: 24px; }
  .mao-arrow { transform: none; margin-bottom: 40px; }
  .mao-side figcaption { font-size: 13px; line-height: 18px; }
}
@media (min-width: 640px) and (max-width: 960px) {
  .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
  .mao-calls { grid-template-columns: minmax(0, 1fr); width: min(280px, 100%); }
  .mao-phone .device { width: 200px; }
}

/* Narrow phones (360 px): the header row must fit */
@media (max-width: 400px) {
  .site-header .wrap { gap: 6px; }
  .nav a { padding: 0 10px; }
  .header-actions .btn.small { padding: 0 12px; }
}

/* Touch screens: footer links get a finger-sized hit area (WCAG 2.5.8) */
@media (pointer: coarse) {
  .foot-links a, .site-footer [data-email] { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links { row-gap: 0; }
}

/* Lightbox buttons in Liquid Glass (glass.js): our frosted fill steps aside */
.lightbox .round-btn.is-liquid {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine) {
  .lightbox .round-btn.is-liquid:hover { background: rgba(252, 255, 255, 0.1); }
}