/* avoid-ai-design-ignore-file: SD2, K3, SD4, M4 (owner-approved: dark ground with the green accent; liquid glass over scrolling content; caps only inside per-client cover mocks; spring easing matches the liquid drop) */
/* Typefaces, self-hosted (Cyrillic + Latin): Unbounded for the large display lines,
   Onest for everything else. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Kuro.Design — minimal studio site with iOS 26-style Liquid Glass
   Mobile-first. Colors, blur radii, shadows and motion live in tokens,
   so themes swap by redefining custom properties only.
   ========================================================================== */

/* ---------- 1. Tokens: Light (default) ---------- */
:root {
  color-scheme: light;

  /* Accent: cool-toned green. --accent passes 4.5:1 with white text. */
  --accent: #0F8C62;
  --accent-hover: #0C7A55;
  --accent-bright: #2DBE86;
  /* Hero Figma cursor: a cleaner green than the teal selection, so it stands apart from it. */
  --cursor: #22C55E;
  --cursor-ink: #fff;
  --accent-text: #0B7A55;
  --accent-soft: rgba(15, 140, 98, 0.1);
  --on-accent: #FFFFFF;

  --bg: #E9ECEA;
  --bg-raised: #F4F6F5;
  --text: #0B0F0D;
  --text-2: rgba(11, 15, 13, 0.64);
  --text-3: rgba(11, 15, 13, 0.62);
  --hairline: rgba(11, 15, 13, 0.1);
  --danger: #C2352B;
  --grid-line: rgba(11, 15, 13, 0.028);

  /* Liquid Glass material (controls only) */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-solid: #F4F6F5;
  --lg-tint-top: rgba(255, 255, 255, 0.5);
  --lg-tint-bottom: rgba(255, 255, 255, 0.28);
  --lg-highlight: rgba(255, 255, 255, 0.95);
  --lg-under-glow: rgba(255, 255, 255, 0.35);
  --blur: 20px;
  --saturate: 180%;

  --shadow-color: 150 15% 15%;
  --shadow-float:
    0 1px 2px hsl(var(--shadow-color) / 0.06),
    0 10px 24px -8px hsl(var(--shadow-color) / 0.16),
    0 28px 60px -24px hsl(var(--shadow-color) / 0.24);

  /* Controls */
  --seg-bg: rgba(11, 15, 13, 0.06);
  --thumb-bg: rgba(255, 255, 255, 0.82);
  --field-bg: #F4F6F5;
  --field-border: rgba(11, 15, 13, 0.12);

  /* Shape & spacing */
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 26px;
  --radius-pill: 999px;
  --gutter: 20px;
  --container: 1240px;
  --section-space: clamp(88px, 13vw, 168px);

  /* Typography */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-head: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
}

/* ---------- 2. Tokens: Dark (keep both blocks in sync) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #27A677;
    --accent-hover: #31B784;
    --accent-bright: #27A677;
    --cursor: #30C379;
    --cursor-ink: #06281A;
    --accent-text: #45C090;
    --accent-soft: rgba(39, 166, 119, 0.12);
    --on-accent: #03140D;
    --bg: #070908;
    --bg-raised: #0E1311;
    --text: #EDF2EF;
    --text-2: rgba(237, 242, 239, 0.64);
    --text-3: rgba(237, 242, 239, 0.52);
    --hairline: rgba(255, 255, 255, 0.1);
    --danger: #FF7A6E;
    --grid-line: rgba(255, 255, 255, 0.026);
    --glass-bg: rgba(20, 26, 24, 0.5);
    --glass-solid: #121815;
    --lg-tint-top: rgba(30, 38, 35, 0.32);
    --lg-tint-bottom: rgba(14, 20, 18, 0.5);
    --lg-highlight: rgba(255, 255, 255, 0.55);
    --lg-under-glow: rgba(255, 255, 255, 0.07);
    --shadow-color: 160 30% 2%;
    --seg-bg: rgba(255, 255, 255, 0.08);
    --thumb-bg: rgba(255, 255, 255, 0.16);
    --field-bg: #0E1311;
    --field-border: rgba(255, 255, 255, 0.12);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #27A677;
  --accent-hover: #31B784;
  --accent-bright: #27A677;
  --cursor: #30C379;
  --cursor-ink: #06281A;
  --accent-text: #45C090;
  --accent-soft: rgba(39, 166, 119, 0.12);
  --on-accent: #03140D;
  --bg: #070908;
  --bg-raised: #0E1311;
  --text: #EDF2EF;
  --text-2: rgba(237, 242, 239, 0.64);
  --text-3: rgba(237, 242, 239, 0.52);
  --hairline: rgba(255, 255, 255, 0.1);
  --danger: #FF7A6E;
  --grid-line: rgba(255, 255, 255, 0.026);
  --glass-bg: rgba(20, 26, 24, 0.5);
  --glass-solid: #121815;
  --lg-tint-top: rgba(30, 38, 35, 0.32);
  --lg-tint-bottom: rgba(14, 20, 18, 0.5);
  --lg-highlight: rgba(255, 255, 255, 0.55);
  --lg-under-glow: rgba(255, 255, 255, 0.07);
  --shadow-color: 160 30% 2%;
  --seg-bg: rgba(255, 255, 255, 0.08);
  --thumb-bg: rgba(255, 255, 255, 0.16);
  --field-bg: #0E1311;
  --field-border: rgba(255, 255, 255, 0.12);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.icon { width: 1.15em; height: 1.15em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- 4. Liquid Glass (controls only) ----------
   Without refraction support this is a frosted panel; liquid-glass.js adds .lg-on with the
   real lens in Chromium, and the dressing below makes it read as thick glass. */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  /* No outline: the shape reads from the tint, the lens and a soft shadow. */
  box-shadow: var(--shadow-float);
}
.lg-on {
  background: linear-gradient(180deg, var(--lg-tint-top), var(--lg-tint-bottom));
  box-shadow:
    inset 0 -10px 22px var(--lg-under-glow),
    var(--shadow-float);
}

/* Header glass is a little denser than the buttons: text scrolling under it should blur
   into tone, not stay readable through the bar. */
.header .lg-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 62%, var(--lg-tint-top)),
    color-mix(in srgb, var(--bg) 62%, var(--lg-tint-bottom)));
}

/* ---------- 5. Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: max(10px, env(safe-area-inset-top)) 10px 0;
  pointer-events: none;
}
/* Content scrolling up fades out into the page colour before it reaches the capsules,
   so text never shows between or under them. No line, no plate: just a soft fall-off. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 40px);
  background: linear-gradient(180deg,
    var(--bg) 0%,
    var(--bg) 58%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%);
  pointer-events: none;
  z-index: -1;
}
/* No bar: like iOS 26, separate glass capsules float over the content.
   Logo on the left (no plate), nav capsule in the middle, settings capsule on the right. */
.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(0px, calc(var(--gutter) - 10px));
}
.header__bar > * { pointer-events: auto; }
.capsule {
  padding: 4px;
  border-radius: var(--radius-pill);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border-radius: var(--radius-pill);
}
.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  transition: transform 0.6s var(--ease-spring);
}
.brand__word {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand__dot { color: var(--accent-bright); }
.brand__light { font-weight: 400; }

/* Header mark: the ink K squashes like jelly and the green droplet hops off its arm. */
.mark { overflow: visible; color: var(--text); }
.mark > * {
  transform-box: view-box;
  transition: transform 0.7s var(--ease-spring);
}
.mark__ink { transform-origin: 28px 54px; }
.mark__drop { transform-origin: 48.5px 11px; animation: drop-breathe 4.5s ease-in-out infinite; }
@keyframes drop-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.brand:hover .mark__ink { transform: scale(1.06, 0.95); }
.brand:hover .mark__drop { transform: translate(2px, -2px) scale(1.12); animation: none; }

/* Nav with an iOS 26 tab-bar lens: a small glass drop that slides between links and stretches
   while it moves (position, width and stretch are driven by a spring in script.js). */
.nav {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: none;
  align-items: center;
}
/* The capsule is the glass; the lens sits inside its padding. */
.nav.glass { position: absolute; }
.nav__link {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active { color: var(--text); }
/* Like the iOS tab bar, the selection drop sits under the label, so text stays crisp. */
.nav__lens {
  position: absolute;
  top: var(--lens-inset, 4px);
  bottom: var(--lens-inset, 4px);
  left: 0;
  z-index: 0;
  width: var(--lens-w, 0px);
  border-radius: var(--radius-pill);
  transform: translate3d(var(--lens-x, 0px), 0, 0);
  opacity: var(--lens-o, 0);
  background: var(--thumb-bg);
  box-shadow:
    inset 0 1px 1px var(--lg-highlight),
    inset 0 -3px 8px color-mix(in srgb, var(--lg-highlight) 25%, transparent),
    0 4px 12px -4px hsl(var(--shadow-color) / 0.3);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}

.header__controls { display: flex; align-items: center; gap: 4px; }
.brand.capsule { flex: none; padding: 4px 14px 4px 4px; }
/* Narrow phones: the mark alone keeps the header on one line with room to tap. */
@media (max-width: 419px) {
  .brand.capsule { padding: 4px; }
  .brand.capsule .brand__word { display: none; }
}
.lang { display: flex; align-items: center; gap: 2px; padding-left: 8px; color: var(--text-2); }
.lang__icon { width: 17px; height: 17px; }
.controls__divider { width: 1px; height: 20px; margin-inline: 2px; background: var(--hairline); }
/* Inside a glass capsule the segmented tracks need no plate of their own. */
.header__controls .seg { background: transparent; }

/* Segmented control with a sliding thumb. */
.seg {
  --thumb-x: 0px;
  --thumb-w: 0px;
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--seg-bg);
}
.seg__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--thumb-w);
  transform: translateX(var(--thumb-x));
  border-radius: var(--radius-pill);
  background: var(--thumb-bg);
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 1px 3px hsl(var(--shadow-color) / 0.16);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease-spring), width var(--dur-2) var(--ease-spring), opacity var(--dur-1) linear;
}
.seg.is-ready .seg__thumb { opacity: 1; }
.seg:not(.is-animated) .seg__thumb { transition: none; }
.seg__btn {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.seg__btn:hover,
.seg__btn[aria-pressed="true"] { color: var(--text); }
.seg__btn:active { transform: scale(0.92); }
.seg:not(.is-ready) .seg__btn[aria-pressed="true"] { background: var(--thumb-bg); }
.seg--icons .seg__btn { min-width: 30px; padding: 0 6px; }
.seg--icons .seg__btn[aria-pressed="true"] { color: var(--accent-text); }
.seg--icons .icon { width: 16px; height: 16px; }

/* ---------- 6. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform var(--dur-2) var(--ease-spring); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--glass { color: var(--text); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex;
  overflow: hidden;
}
/* Phone: a shorter hero, so the gap under the headline does not read as empty and the
   Work section starts within reach. */
@media (max-width: 639px) { .hero { min-height: max(560px, 84svh); } }
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Fade into the page so the grid and drops never end on a hard line. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(120px, 20vh, 200px);
  padding-bottom: clamp(32px, 6vh, 56px);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11.5vw, 11rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.hero__title .dot { color: var(--accent-bright); }
/* When the WebGL hero runs, the headline is painted on the canvas; keep the DOM copy for
   screen readers and search but take it out of view. */
.hero--gl .hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 48px;
}
.hero--gl .hero__foot { margin-top: auto; }
.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--text-2);
  text-wrap: pretty;
}

/* Floating hero widgets (ported from the earlier version of the site).
   They live in the empty side margins next to the headline, so they only appear on very wide
   screens where those margins can hold them without covering the text. */
.hero__widgets {
  --px: 0;
  --py: 0;
  --side: calc((100% - var(--container) + 96px) / 2);
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.widget {
  --dx: 0px;
  --dy: 0px;
  --tilt: 0deg;
  --lift: 1;
  position: absolute;
  padding: 14px;
  border-radius: 22px;
  font-size: 0.8125rem;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transform:
    translate3d(calc(var(--px) * var(--depth) * 1px + var(--dx)), calc(var(--py) * var(--depth) * 1px + var(--dy)), 0)
    rotate(var(--tilt)) scale(var(--lift));
  transition: transform 0.9s var(--ease-out), box-shadow 0.35s var(--ease-out);
  animation:
    widget-in 1s var(--ease-out) both,
    float 7s ease-in-out var(--float-delay, 0s) infinite alternate;
}
/* Dragging: the widget lifts, follows the cursor closely and leans into the motion. */
.widget.is-dragging {
  --lift: 1.06;
  z-index: 2;
  cursor: grabbing;
  transition: transform 0.12s var(--ease-out), box-shadow 0.35s var(--ease-out);
  animation-play-state: paused;
  box-shadow: 0 34px 70px -20px rgba(0, 0, 0, 0.38), var(--shadow-float);
}
/* Released: it straightens up and settles with a small spring. */
.widget.is-dropped { transition: transform 0.75s var(--ease-spring), box-shadow 0.45s var(--ease-out); }
.widget--code { right: calc(var(--side) / 2 - 125px); top: 140px; width: 250px; animation-delay: 0.45s, var(--float-delay); }

@keyframes widget-in {
  from { opacity: 0; scale: 0.9; }
  to { opacity: 1; scale: 1; }
}
@keyframes float {
  from { translate: 0 -6px; }
  to { translate: 0 8px; }
}

.widget--code { padding: 0; overflow: hidden; }
.widget__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.widget__bar span { font-size: 0.75rem; color: var(--text-3); font-weight: 600; }
.code {
  margin: 0;
  padding: 12px 14px 14px;
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre;
}
.c-t { color: var(--accent-text); }
.c-a { color: #4A90C2; }
.c-s { color: #C2741F; }
.c-p { color: var(--accent-bright); font-weight: 700; }
.c-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--accent-bright);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Figma-style collaborator on the left: a selected button with handles, a layer name and a
   size badge; Kuro's cursor drags the corner to resize it (script.js drives the loop). */
.figma {
  --sel-w: 172px;
  --sel-h: 46px;
  position: absolute;
  left: calc(var(--side) / 2 - 116px);
  top: 380px;
  width: 280px;
  height: 220px;
  font-size: 12px;
  transform: translate3d(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px), 0);
  transition: transform 0.9s var(--ease-out);
  animation: widget-in 1s var(--ease-out) 0.6s both;
}
.figma__layer {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--accent-text);
}
.figma__sel {
  position: absolute;
  left: 0;
  top: 22px;
  width: var(--sel-w);
  height: var(--sel-h);
  outline: 1px solid var(--accent);
}
.figma__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.figma__h {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -4px;
  border: 1px solid var(--accent);
  background: var(--bg);
}
.figma__h--tl { left: 0; top: 0; }
.figma__h--tr { right: 0; top: 0; margin-right: -4px; }
.figma__h--bl { left: 0; bottom: 0; margin-bottom: -4px; }
.figma__h--br { right: 0; bottom: 0; margin: 0 -4px -4px 0; }
.figma__size {
  position: absolute;
  left: calc(var(--sel-w) / 2);
  top: calc(var(--sel-h) + 32px);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.figma__cursor {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
/* The owner's own Windows pointer (Material Design Rounded Dark), taken from its .cur file:
   img/cursor.png is the original (white outline, black body); the black body is repainted
   green through a mask (img/cursor-body.png). Hotspot (5, 1) of 47x60 sits on the point. */
.figma__arrow {
  position: relative;
  display: block;
  width: 20px;
  height: 25.5px;
  margin: -0.4px 0 0 -2.1px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s var(--ease-out);
  transform-origin: 2px 0.5px;
}
.figma__arrow img { display: block; width: 100%; height: 100%; }
.figma__arrow i {
  position: absolute;
  inset: 0;
  background: var(--cursor);
  -webkit-mask: url(img/cursor-body.png) 0 0 / 100% 100% no-repeat;
  mask: url(img/cursor-body.png) 0 0 / 100% 100% no-repeat;
}
.figma__cursor.is-pressing .figma__arrow { transform: scale(0.9); }
/* Name tag: square corner toward the arrow, like Figma's multiplayer labels */
.figma__name {
  position: absolute;
  left: 15px;
  top: 22px;
  padding: 3px 8px 4px;
  border-radius: 2px 9px 9px 9px;
  background: var(--cursor);
  color: var(--cursor-ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s var(--ease-out);
}
.figma__cursor.is-pressing .figma__name { transform: translate(-1px, -1px) scale(0.96); }

@media (min-width: 1760px) {
  .hero__widgets { display: block; }
}
@media (prefers-reduced-transparency: reduce) {
  .widget { background: var(--glass-solid); }
}
@media (prefers-reduced-motion: reduce) {
  /* No floating or pointer drift; dragging still works, just without the lean. */
  .widget { --depth: 0 !important; animation: none !important; }
  .figma { --depth: 0 !important; animation: none; }
  .widget.is-dragging { --tilt: 0deg !important; }
  .c-cursor { animation: none; }
}

/* ---------- 8. Sections ---------- */
.section { padding-block: var(--section-space) 0; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---------- 9. Work ----------
   An editorial grid: tiles of different widths in a repeating rhythm (7+5, 4+4+4, full width),
   so the page reads like a studio case book rather than a row of identical cards.
   Each tile opens the details popup (.case). */
.works {
  --tile-h: clamp(220px, 58vw, 300px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 20px;
}
.work-tile__btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-m);
}
.work-tile__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.work-tile__media {
  position: relative;
  display: block;
  margin-bottom: 14px;
  border-radius: var(--radius-m);
  overflow: hidden;
  transform: translateZ(0);
}
/* Visible edge on every tile, screenshot or empty, drawn above the picture. */
.works { --tile-line: color-mix(in srgb, var(--text) 16%, transparent); }
.work-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--tile-line);
  pointer-events: none;
}
.works .work-tile__shot {
  display: flex;
  width: 100%;
  height: var(--tile-h);
  aspect-ratio: auto;
  border-radius: var(--radius-m);
  transition: transform 0.9s var(--ease-out);
}
.work-tile__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tile gallery: shots side by side in a snap-scrolling track (native swipe on phones),
   arrows on hover for the mouse, thin segments for the position. */
.works .work-tile__track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: zoom-in;
}
.work-tile__track::-webkit-scrollbar { display: none; }
.work-tile__track img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; -webkit-user-select: none; }
.work-tile__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #0B0F0D;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.work-tile__arrow .icon { width: 17px; height: 17px; }
.work-tile__arrow--prev { left: 12px; }
.work-tile__arrow--prev .icon { transform: scaleX(-1); }
.work-tile__arrow--next { right: 12px; }
.work-tile__gallery:hover .work-tile__arrow,
.work-tile__arrow:focus-visible { opacity: 1; }
.work-tile__arrow:hover { transform: scale(1.08); }
.work-tile__arrow:disabled { opacity: 0 !important; pointer-events: none; }
.work-tile__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .work-tile__arrow { display: none; } }
.work-tile__bars {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.work-tile__bars i {
  position: relative;
  flex: 1;
  max-width: 48px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}
/* The active segment fills up: full when still, as a timer while the gallery plays (--p from JS).
   A scaled layer, not background-size: that snaps to whole pixels and makes the fill stutter. */
.work-tile__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.work-tile__bars i.is-on::after { transform: scaleX(var(--p, 1)); }
/* Soft shade under the segments so they read on light screenshots too. */
.work-tile__bars::before {
  content: "";
  position: absolute;
  inset: -40px -24px -18px;
  z-index: -1;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.32));
}
/* Short info under the title: the brief and the key facts. */
.work-tile__desc {
  display: -webkit-box;
  margin-top: 8px;
  max-width: 62ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}
/* Facts: one muted line under the tile (labels hidden), a labelled list in the side panel. */
.work-tile__more { display: none; }
/* Short list (.works--soon, fewer than three works): the first work leads across the whole row
   and the rest, real or "soon", share the rows below. Every picture keeps the screenshot's
   16:9, so nothing is cropped and neighbours line up. Breakpoint overrides sit after the
   rhythm rules below. */
.works.works--soon > .work-tile:not(.work-tile--cta) { grid-column: 1 / -1; }
/* The leading work is one card: its gallery and its brief share one background and edge. */
/* The picture runs flush to the card edge (no frame inside a frame), the edge is drawn on top. */
.works.works--soon > .work-tile:not(.work-tile--cta) {
  --card-r: calc(var(--radius-m) + 6px);
  position: relative;
  border-radius: var(--card-r);
  background: var(--bg-raised);
  overflow: hidden;
}
.works.works--soon > .work-tile:not(.work-tile--cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--tile-line);
  pointer-events: none;
}
.works.works--soon > .work-tile:not(.work-tile--cta) > .work-tile__media { margin: 0; border-radius: 0; }
.works.works--soon > .work-tile:not(.work-tile--cta) > .work-tile__media::after { content: none; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__shot { border-radius: 0; }
.works.works--soon .work-tile__shot { height: auto; aspect-ratio: 16 / 9; }
/* Brief: kind of work on top, the name, two lines about it, then facts as label and value. */
.works.works--soon > .work-tile:not(.work-tile--cta) > .work-tile__btn {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 0;
}
/* The kind of work is said in the description; no label above the name. */
.works.works--soon > .work-tile:first-child .work-tile__tag { display: none; }
/* Other works keep it: for a concept it says "concept" right under the name. */
.works.works--soon > .work-tile:not(:first-child):not(.work-tile--cta) .work-tile__tag { margin-top: 10px; font-size: 0.9375rem; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__year { font-size: 0.8125rem; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__desc { margin-top: 16px; max-width: 40ch; font-size: 1.0625rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 78%, transparent); -webkit-line-clamp: 5; }
.work-tile__points { display: none; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__points {
  display: grid;
  gap: 10px;
  margin: 14px 0 28px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
}
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__points > span { position: relative; padding-left: 20px; }
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__points > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 24px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--field-border);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__btn:hover .work-tile__more { background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--text-3); }
}
/* Text links without arrows: a thin underline that firms up on hover. */
.work-tile__more,
.work-tile__cta-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .work-tile__btn:hover .work-tile__more,
  .work-tile--cta .work-tile__btn:hover .work-tile__cta-link { text-decoration-color: currentColor; }
}
/* While the list is short, one invitation strip follows the works and links to the form. */
.work-tile--cta .work-tile__media { margin-bottom: 0; }
.works.works--soon > .work-tile.work-tile--cta { grid-column: 1 / -1; }
.works.works--soon > .work-tile--cta .work-tile__shot { aspect-ratio: auto; height: auto; }
.works .work-tile__empty {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  --pad: clamp(16px, 2.2vw, 28px);
  padding: var(--pad);
  background: var(--bg-raised);
}
.work-tile__cta-title {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
}
.work-tile__cta-text { max-width: 30ch; font-size: 1rem; line-height: 1.45; color: color-mix(in srgb, var(--text) 72%, transparent); }
.works .work-tile--cta .work-tile__cta-link {
  margin-top: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .works .work-tile--cta .work-tile__btn:hover .work-tile__cta-link { background: var(--accent-hover); }
}
.work-tile--cta .work-tile__empty { transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2); }
@media (hover: hover) {
  .work-tile--cta .work-tile__btn:hover .work-tile__empty { transform: none; }
  .work-tile--cta .work-tile__btn:hover .work-tile__media { --tile-line: var(--accent); }
}
.work-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.work-tile__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.work-tile__year { font-size: 0.875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.work-tile__tag { margin-top: 2px; font-size: 0.875rem; color: var(--text-3); }
@media (hover: hover) {
  .work-tile__btn:hover .work-tile__shot { transform: scale(1.03); }
}
@media (min-width: 640px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); --tile-h: clamp(240px, 32vw, 300px); }
  .work-tile__title { font-size: 1.25rem; }
}
@media (min-width: 860px) {
  .works { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; }
  .work-tile { grid-column: span 4; --tile-h: clamp(240px, 24vw, 330px); }
  .work-tile:nth-child(6n+1) { grid-column: span 7; }
  .work-tile:nth-child(6n+2) { grid-column: span 5; }
  .work-tile:nth-child(6n+1),
  .work-tile:nth-child(6n+2) { --tile-h: clamp(300px, 32vw, 440px); }
  .work-tile:nth-child(6n) { grid-column: 1 / -1; --tile-h: clamp(280px, 26vw, 380px); }
  /* Keep the last row full when the count is not a multiple of six. */
  .work-tile:nth-child(6n+1):last-child,
  .work-tile:nth-child(6n+3):last-child { grid-column: 1 / -1; }
  .work-tile:nth-child(6n+3):nth-last-child(2),
  .work-tile:nth-child(6n+4):last-child { grid-column: span 6; }
  /* Short list: halves under the leading work, instead of the 7+5 rhythm above. */
  /* Short list: the first work takes two thirds on the left, the free slots stack on the right,
     so the section stays compact instead of a full-width screenshot plus a row below it. */
  .works.works--soon { row-gap: 24px; }
  .works.works--soon > .work-tile { grid-column: span 6; }
  .works.works--soon > .work-tile:not(.work-tile--cta) { grid-column: 1 / -1; }
  .works.works--soon > .work-tile:not(.work-tile--cta) > .work-tile__btn { padding: 24px 28px 24px; }
}

@media (min-width: 1200px) {
  /* Wide screens: the whole 16:9 shot on the left, nothing cropped, the brief beside it;
     the card is as tall as the picture. */
  .works.works--soon > .work-tile:not(.work-tile--cta) {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  }
  .works.works--soon > .work-tile:not(.work-tile--cta) > .work-tile__btn { padding: 30px 32px 28px; }
  .works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__more { margin-top: auto; }
  .works.works--soon > .work-tile:not(.work-tile--cta) .work-tile__desc { margin-bottom: 20px; }
}
@media (min-width: 900px) {
  /* Wide screens: the invitation is one low row — heading, a line of text, the button. */
  .works.works--soon > .work-tile--cta .work-tile__empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
    padding: 30px 36px;
  }
  .works.works--soon > .work-tile--cta .work-tile__cta-title { max-width: 14ch; font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .works.works--soon > .work-tile--cta .work-tile__cta-link { margin-top: 0; }
}


/* ---------- Project popup ---------- */
html.has-modal { overflow: hidden; }
.case {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.case[open] { display: flex; animation: case-in 0.5s var(--ease-out) both; }
.case::backdrop {
  background: rgba(5, 8, 7, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  animation: case-fade 0.4s var(--ease-out) both;
}
.case.is-closing { animation: case-out 0.22s ease-in both; }
.case.is-closing::backdrop { animation: case-fade 0.22s ease-in reverse both; }
@keyframes case-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes case-out { to { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes case-fade { from { opacity: 0; } }

.case__panel { position: relative; display: flex; flex-direction: column; width: 100%; overflow-y: auto; overscroll-behavior: contain; }
.case__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2), color var(--dur-2);
}
.case__close:hover { background: rgba(0, 0, 0, 0.55); }
.case__close:active { transform: scale(0.9); }
/* The cross is two strokes: they draw in one after the other when the popup opens, retract
   when it closes, and redraw on hover. */
.case__x { width: 18px; height: 18px; overflow: visible; }
.case__x path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.22s ease-in;
}
.case[open] .case__x path { animation: case-x-draw 0.42s var(--ease-out) 0.18s both; }
.case[open] .case__x path + path { animation-delay: 0.3s; }
.case.is-closing .case__x path { animation: none; stroke-dashoffset: 17; }
/* Hover: the cross turns red and makes a quarter turn on a spring. */
.case__x { transition: transform 0.45s var(--ease-spring); }
@media (hover: hover) {
  .case .case__close:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
  .case__close:hover .case__x { transform: rotate(90deg); }
}
@keyframes case-x-draw { from { stroke-dashoffset: 17; } }

.case__gallery { position: relative; flex: none; }
.case__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.case__track::-webkit-scrollbar { display: none; }
.case__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; overflow: hidden; }
.case__slide > img { display: block; }
.case__slide > img, .case__slide > .cover { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.case__gallery:has(.case__thumbs:not(:empty)) { --thumbs-h: 78px; }
.case__nav {
  position: absolute;
  top: calc((100% - var(--thumbs-h, 0px)) / 2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #0B0F0D;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.case__nav:hover { transform: scale(1.08); }
.case__nav:disabled { opacity: 0; pointer-events: none; }
.case__nav .icon { width: 18px; height: 18px; }
.case__nav--prev { left: 14px; }
.case__nav--prev .icon { transform: scaleX(-1); }
.case__nav--next { right: 14px; }
.case.is-single .case__nav { display: none; }
/* Thumbnails sit in their own row under the picture, never over it. */
.case__thumbs {
  display: flex;
  justify-content: safe center;
  gap: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.case__thumbs::-webkit-scrollbar { display: none; }
.case__thumbs:empty { display: none; }
.case__thumbs button {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--dur-2);
}
.case__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--text); }
.case__thumbs button:hover { opacity: 1; }
.case__thumbs > button > * { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; aspect-ratio: auto; }

.case__top { display: grid; grid-template-columns: minmax(0, 1fr); }
.case__gallery, .case__info { min-width: 0; }
.case__info { display: flex; flex-direction: column; gap: 0; padding: 24px; }
.case__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-right: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}
.case__desc { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 78%, transparent); }
.case__visit { margin-top: 16px; }
/* The case in brief, in the info column next to the pictures: three short titled lines. */
.case__story { display: grid; gap: 22px; margin-top: 26px; }
.case__story[hidden], .case__desc[hidden] { display: none; }
.case__story section { display: grid; gap: 4px; }
.case__story h4, .case__story p { margin: 0; }
.case__story h4 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; }
.case__story p { font-size: 0.9375rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 78%, transparent); }
.case__review { margin: 0; padding: 26px 24px 28px; border-top: 1px solid var(--hairline); }
.case__review[hidden] { display: none; }
.case__quote { margin: 0; max-width: 52ch; font-family: var(--font-head); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; text-indent: -0.45em; }
.case__author { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; font-size: 0.875rem; color: var(--text-3); }
.case__author b { font-weight: 600; color: var(--text); }
/* Plain rows divided by hairlines, no boxed card */
.case__year { font-family: var(--font); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
/* Client facts (budget, timeline...): label above value, left-aligned, no ruled table. */
.case__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 16px 24px; margin: 24px 0 0; }
.case__stats > div { display: grid; gap: 2px; }
.case__stats > div[hidden] { display: none; }
.case__stats dt { font-size: 0.875rem; color: var(--text-3); }
.case__stats[hidden] { display: none; }
.case__stats dd { margin: 0; font-size: 0.9375rem; color: var(--text); }

.case__visit { justify-content: center; }
.case__visit[hidden] { display: none; }

@media (min-width: 860px) {
  .case { width: min(1280px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); }
  .case__top { grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 380px); }
  .case__gallery { align-self: start; }
  .case__info { padding: 32px 32px 28px; padding-top: 64px; }
  /* Here the close button sits on the info column, not on the picture: no dark blob. */
  .case__close { background: transparent; color: var(--text-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .case__close:hover { background: var(--hairline); color: var(--text); }
  .case__review { padding: 24px 28px 28px; }
}
@media (max-width: 639px) {
  /* Phone: the popup becomes a bottom sheet. */
  .case { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  @keyframes case-in { from { transform: translateY(100%); } }
  @keyframes case-out { to { transform: translateY(100%); } }
  .case__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case[open], .case::backdrop, .case__x path { animation: none !important; }
}
/* Screenshots in the popup open in the viewer. */
.case__slide > img { cursor: zoom-in; }

/* ---------- Screenshot viewer ---------- */
.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #050807;
  color: #fff;
  overflow: hidden;
}
.viewer[open] { display: block; animation: case-fade 0.25s var(--ease-out) both; }
.viewer::backdrop { background: transparent; }
.viewer__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}
.viewer__img {
  display: block;
  max-width: min(94vw, 1600px);
  max-height: 84dvh;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.viewer__img.is-animated { transition: transform 0.35s var(--ease-out); }
.viewer.is-zoomed .viewer__img { cursor: grab; border-radius: 0; }
.viewer.is-zoomed .viewer__img:active { cursor: grabbing; }
.viewer__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.viewer__btn:hover { background: rgba(255, 255, 255, 0.22); }
.viewer__btn:active { transform: scale(0.92); }
.viewer__btn .icon { width: 20px; height: 20px; }
.viewer__close { top: 16px; right: 16px; }
.viewer__nav { top: 50%; margin-top: -22px; }
.viewer__nav--prev { left: 16px; }
.viewer__nav--prev .icon { transform: scaleX(-1); }
.viewer__nav--next { right: 16px; }
.viewer.is-single .viewer__nav { display: none; }
/* A quiet line under the picture that fades out by itself (or on the first zoom). */
.viewer__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 2;
  margin: 0;
  font-size: 0.8125rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.viewer.is-hint .viewer__hint { opacity: 1; }
@media (max-width: 639px) {
  .viewer__nav { top: auto; bottom: 12px; margin: 0; }
  .viewer__hint { bottom: 76px; }
  .viewer__img { border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .viewer[open] { animation: none; } }

/* Brand cover: the client's colour and wordmark, used until real screenshots exist.
   Every style has its own composition, like a slice of the client's identity.
   The cover is a size container, so type scales with the tile height (cqh). */
.cover {
  container-type: size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: clamp(18px, 2.4vw, 32px);
  overflow: hidden;
  background: var(--cover-bg);
  color: var(--cover-fg);
}
.cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.cover__art { position: absolute; inset: 0; pointer-events: none; }
.cover__mark, .cover__note { position: relative; }
.cover__mark { line-height: 0.95; white-space: nowrap; }
.cover__note { font-family: var(--font); font-size: max(0.6875rem, 4.6cqh); letter-spacing: 0.02em; opacity: 0.75; }

/* serif: a roastery. Italic wordmark low on the left, a bean outline on the right. */
.cover--serif { justify-content: flex-end; }
.cover--serif .cover__mark { order: 2; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 28cqh; letter-spacing: -0.02em; }
.cover--serif .cover__note { order: 1; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.cover--serif .cover__art::before {
  content: "";
  position: absolute;
  right: 9%;
  top: 14%;
  width: 34cqh;
  height: 48cqh;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
  transform: rotate(28deg);
}
.cover--serif .cover__art::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 14%;
  width: 34cqh;
  height: 48cqh;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent calc(50% - 0.5px), currentColor 0 calc(50% + 0.5px), transparent 0);
  clip-path: inset(10% 0 10% 0);
  opacity: 0.35;
  transform: rotate(28deg);
}

/* sans: a clinic. Light lowercase wordmark top left, a quiet arc in the corner. */
.cover--sans .cover__mark { font-family: var(--font-display); font-weight: 300; font-size: 20cqh; letter-spacing: -0.04em; }
.cover--sans .cover__art::before {
  content: "";
  position: absolute;
  right: -22cqh;
  bottom: -38cqh;
  width: 110cqh;
  height: 110cqh;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.07;
}
.cover--sans .cover__art::after {
  content: "";
  position: absolute;
  right: 18cqh;
  bottom: 22cqh;
  width: 3.2cqh;
  height: 3.2cqh;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* engraved: a joinery. Wood grain and a framed plaque in the middle. */
.cover--engraved { align-items: center; justify-content: center; text-align: center; }
.cover--engraved .cover__art {
  background:
    repeating-radial-gradient(ellipse 180% 26% at 30% 120%, transparent 0 9px, rgba(60, 40, 20, 0.07) 9px 10px),
    repeating-linear-gradient(176deg, transparent 0 22px, rgba(60, 40, 20, 0.05) 22px 23px);
}
.cover--engraved .cover__mark {
  padding: 5cqh 7cqh 4cqh;
  border: 1px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 1.4cqh;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13cqh;
  letter-spacing: 0.16em;
}
.cover--engraved .cover__note { margin-top: 5cqh; font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: 0.2em; font-size: max(0.625rem, 3.8cqh); }

/* heavy: a barbershop. A huge wordmark that runs off the bottom edge. */
.cover--heavy { justify-content: space-between; }
.cover--heavy .cover__note { order: 1; align-self: flex-end; text-transform: uppercase; letter-spacing: 0.28em; }
.cover--heavy .cover__mark {
  order: 2;
  margin: 0 0 -0.2em -0.06em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 78cqh;
  line-height: 0.78;
  letter-spacing: -0.06em;
}

/* mono: an accounting firm. Ledger lines with a margin rule. */
.cover--mono { padding-left: 64px; }
.cover--mono .cover__art {
  background:
    linear-gradient(90deg, transparent 44px, rgba(200, 60, 50, 0.45) 0 45px, transparent 0),
    repeating-linear-gradient(180deg, transparent 0 calc(10cqh - 1px), rgba(29, 29, 27, 0.12) 0 10cqh);
}
.cover--mono .cover__mark { font-family: var(--font-mono); font-weight: 500; font-size: 17cqh; letter-spacing: -0.05em; }
.cover--mono .cover__note { font-family: var(--font-mono); }

/* stencil: a car service. Heavy uppercase top left, hazard stripes along the bottom. */
.cover--stencil .cover__mark { font-family: var(--font-display); font-weight: 900; font-size: 26cqh; letter-spacing: -0.04em; line-height: 0.85; white-space: normal; max-width: 6ch; }
@container (min-aspect-ratio: 2) { .cover--stencil .cover__mark { max-width: none; white-space: nowrap; font-size: 34cqh; } }
.cover--stencil .cover__note { text-transform: uppercase; letter-spacing: 0.28em; }
.cover--stencil .cover__art::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18cqh;
  background: repeating-linear-gradient(-45deg, #141414 0 6cqh, transparent 0 12cqh);
  opacity: 0.9;
}

/* ---------- 10. Services ----------
   A plain list: service and what is included. */
.price-list { border-bottom: 1px solid var(--hairline); }
.price-row:first-child { border-top: 0; padding-top: 0; }
.price-row {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
.price-row__title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.025em;
  transition: color var(--dur-2) var(--ease-out);
}
.price-row__desc { max-width: 34em; color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 1rem; line-height: 1.5; }
.price-note { margin-top: 20px; max-width: 40em; font-size: 0.875rem; color: var(--text-3); }

@media (min-width: 860px) {
  .price-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    align-items: baseline;
    gap: 32px;
    padding: 28px 0;
  }
  .price-row__title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
  .price-row__desc { font-size: 1.0625rem; }
}
@media (hover: hover) {
  .price-row:hover .price-row__title { color: var(--accent-text); }
}

/* ---------- 11. Contact ---------- */
.contact { padding-bottom: var(--section-space); }
.contact__inner { display: grid; gap: 48px; }
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 4.75rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.contact__lead { margin-top: 18px; font-size: 1.125rem; color: var(--text-2); }
.contact__list { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; }
.contact__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.contact__item:hover { color: var(--accent-text); border-color: currentColor; }
.contact__item .icon { color: var(--accent-text); width: 20px; height: 20px; }

/* The form reads like a short letter: open lines to write on, not a stack of boxes. */
.form { display: flex; flex-direction: column; gap: 30px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 0.9375rem; font-weight: 600; color: color-mix(in srgb, var(--text) 74%, transparent); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--field-border);
  border-radius: 0;
  background-color: transparent;
  font-size: 1.25rem; /* >= 16px prevents iOS zoom on focus */
  font-weight: 500;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.field__input::placeholder { color: var(--text-3); font-weight: 400; }
.field__input:hover { border-bottom-color: var(--text-3); }
.field__input:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field__input--area { min-height: 6.5em; resize: none; line-height: 1.45; field-sizing: content; max-height: 16em; }
.field__input[aria-invalid="true"],
.field__input[aria-invalid="true"]:focus { border-bottom-color: var(--danger); box-shadow: none; }
.field__error { font-size: 0.875rem; color: var(--danger); animation: field-error-in 0.32s var(--ease-out) both; }
.field__input { background: linear-gradient(var(--danger), var(--danger)) no-repeat left bottom / 0 2px; }
.field__input[aria-invalid="true"] { background-size: 100% 2px; transition: background-size 0.45s var(--ease-out), border-color var(--dur-2); }
.field.is-shaking .field__input { animation: field-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes field-error-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes field-shake {
  15%, 85% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  45%, 55% { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .field__error, .field.is-shaking .field__input { animation: none; }
}
.field__error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.form__actions .icon { width: 18px; height: 18px; }
.form__alt {
  border: 1px solid var(--field-border);
  background: transparent;
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.form__alt:hover { border-color: var(--text-3); background: var(--seg-bg); }
.form__note { max-width: 34rem; font-size: 0.9375rem; line-height: 1.45; color: color-mix(in srgb, var(--text) 70%, transparent); }

.form__status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  font-size: 0.9375rem;
  font-weight: 500;
  animation: status-in var(--dur-3) var(--ease-spring);
}
.form__status[hidden] { display: none; }
.form__status { background: var(--accent-soft); color: var(--accent-text); }
.form__status-icon { width: 20px; height: 20px; margin-top: 1px; flex: none; }
@keyframes status-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 12. Footer ---------- */
.footer { padding: 28px 0 max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.brand--small .brand__mark { width: 24px; height: 24px; }
.brand--small .brand__word { font-size: 0.9375rem; }
.footer__copy { font-size: 0.875rem; color: var(--text-3); }
.footer__top { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.footer__top:hover { color: var(--accent-text); }
.footer__top .icon { width: 16px; height: 16px; }

/* ---------- 12b. Language switch: text blurs out, swaps, and blurs back in ---------- */
.lang-out [data-i18n],
.lang-out [data-i18n-html],
.lang-out [data-i18n-lines],
.lang-out .hero__canvas { animation: lang-out 0.2s var(--ease-out) forwards; }
.lang-in [data-i18n],
.lang-in [data-i18n-html],
.lang-in [data-i18n-lines],
.lang-in .hero__canvas { animation: lang-in 0.45s var(--ease-out); }
@keyframes lang-out { to { opacity: 0; filter: blur(8px); } }
@keyframes lang-in { from { opacity: 0; filter: blur(8px); } }

/* ---------- 12c. Theme switch: the new theme spreads as a circle from the button ---------- */
.vt-theme::view-transition-old(root),
.vt-theme::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- 12d. Language switch: the page turns like a sheet, the header stays put ---------- */
.vt-lang .header { view-transition-name: header; }
.vt-lang::view-transition { background: var(--bg); }
.vt-lang::view-transition-old(root) { animation: lang-sheet-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
.vt-lang::view-transition-new(root) { animation: lang-sheet-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.vt-lang::view-transition-group(header) { animation-duration: 0.3s; }
@keyframes lang-sheet-out { to { opacity: 0; transform: translateY(-28px); } }
@keyframes lang-sheet-in { from { opacity: 0; transform: translateY(36px); } }

/* ---------- 14. Responsive ---------- */
@media (min-width: 400px) {
  .brand__mark { width: 32px; height: 32px; }
  .brand__word { font-size: 1.0625rem; }
  .seg__btn { min-width: 36px; }
  .seg--icons .seg__btn { min-width: 34px; }
}
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .header { padding-top: max(14px, env(safe-area-inset-top)); }
  .header__controls { gap: 6px; }
  .hero__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 860px) {
  .nav { display: flex; }
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; }
  .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .contact__intro { position: sticky; top: 120px; }
}

/* ---------- 15. Accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .lg-on {
    background: var(--glass-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav__lens { background: var(--seg-bg); backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mark__drop { animation: none; }
  .btn__spinner { animation: spin 1.6s linear infinite !important; }
}
@media (forced-colors: active) {
  .glass, .btn, .seg, .field__input { border: 1px solid CanvasText; }
  .seg__btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}