/* ==========================================================================
   Keshav Kahar — portfolio
   Black canvas, electric-blue light, bold geometric display type with a thin
   serif-italic accent, pill buttons, hairline-bordered glass cards.

   Contents
   01 Fonts              07 Hero + editor window     13 Capabilities
   02 Tokens (themes)    08 Tools strip              14 Background
   03 Base               09 Section scaffolding      15 Contact
   04 Building blocks    10 Approach (bento)         16 Footer
   05 Header + menu      11 Projects                 17 Motion
   06 Theme switch       12 Keyword band, Experience 18 Reduced motion
   ========================================================================== */

/* ---------- 01 Fonts (self-hosted, three files, about 83 KB in total) ---------- */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Metric-matched fallbacks: text keeps its size and line breaks while the fonts load. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  size-adjust: 99.72%;
  ascent-override: 100.28%;
  descent-override: 26.07%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 102.86%;
  ascent-override: 98.19%;
  descent-override: 29.16%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia");
  font-style: italic;
  size-adjust: 73.17%;
  ascent-override: 133.93%;
  descent-override: 35.53%;
  line-gap-override: 0%;
}

/* ---------- 02 Tokens ---------- */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #000;
  --bg-rgb: 0, 0, 0;
  --bg-elevated: #111;
  --surface: #141414;
  --surface-2: #181818;
  --surface-strong: #1f1f1f;

  /* Text */
  --text: #fff;
  --text-strong: #d8d8d8;
  --text-muted: #9a9a9a;
  --text-subtle: #868686; /* 5.9:1 on black; still passes on the dark surfaces */

  /* Lines */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --hairline: rgba(255, 255, 255, 0.2);

  /* Glass cards */
  --glass: rgba(0, 0, 0, 0.42);
  --card-line: rgba(255, 255, 255, 0.55);
  --card-lift: rgba(255, 255, 255, 0.062);
  --card-lift-mid: rgba(255, 255, 255, 0.019);
  --card-rule: rgba(255, 255, 255, 0.14);
  --card-border: rgba(255, 255, 255, 0.2);

  /* Tints used inside the editor window */
  --tint-weak: rgba(255, 255, 255, 0.08);
  --tint: rgba(255, 255, 255, 0.13);
  --tint-strong: rgba(255, 255, 255, 0.19);

  /* The accent. Change these and the whole page follows. */
  --accent: #0099ff;
  --accent-light: #7acaff;
  --accent-deep: #0068ad;
  --accent-text: #0099ff; /* accent used as small text: 7:1 on black */
  --accent-button: #0077d6; /* a white label on this passes AA */

  --nav-bg: rgba(0, 0, 0, 0.72);
  --footer-veil: rgba(0, 0, 0, 0.78);
  --dot: rgba(255, 255, 255, 0.5);
  --mark: #fff;

  --font-display: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Geist", "Geist Fallback", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Fraunces", "Fraunces Fallback", Georgia, serif;

  --gutter: 1.5rem;
  --wrap: 86.25rem; /* 1380px */
  --section-y: clamp(5rem, 9vw, 7.5rem);
  --radius: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --bg-elevated: #fafafa;
  --surface: #f6f6f6;
  --surface-2: #f1f1f1;
  --surface-strong: #ececec;

  --text: #000;
  --text-strong: #363636;
  --text-muted: #5a5a5a;
  --text-subtle: #6b6b6b;

  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);
  --hairline: rgba(0, 0, 0, 0.16);

  --glass: rgba(255, 255, 255, 0.78);
  --card-line: rgba(0, 0, 0, 0.45);
  --card-lift: rgba(0, 0, 0, 0.045);
  --card-lift-mid: rgba(0, 0, 0, 0.015);
  --card-rule: rgba(0, 0, 0, 0.14);
  --card-border: rgba(0, 0, 0, 0.2);

  --tint-weak: rgba(0, 0, 0, 0.045);
  --tint: rgba(0, 0, 0, 0.07);
  --tint-strong: rgba(0, 0, 0, 0.1);

  --accent-text: #0068ad; /* 5.9:1 on white */

  --nav-bg: rgba(255, 255, 255, 0.8);
  --footer-veil: rgba(255, 255, 255, 0.86);
  --dot: rgba(0, 0, 0, 0.45);
  --mark: #000;
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
  }
}

/* ---------- 03 Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.25rem;
  background: var(--bg);
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 400 0.9375rem/1.6 var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: #000;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.375rem, 4.6vw, 4rem);
  font-weight: 530;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* The serif accent: one thin italic word or phrase inside a heading. */
h1 em,
h2 em,
.lead em {
  margin-left: -0.03em;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.04em;
}

a {
  color: inherit;
}

svg {
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

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

main:focus {
  outline: none;
}

/* ---------- 04 Building blocks ---------- */

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

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

.js-only {
  display: none;
}

.js .js-only {
  display: inline;
}

.js button.js-only {
  display: inline-flex;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 500;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-250%);
}

.skip-link:focus {
  transform: none;
}

.label,
.case-kind,
.case-cell h4,
.role-phase,
.fig-no {
  font: 500 0.75rem/1.3 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}

/* Pill buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: 500 0.875rem/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--text-strong);
}

.btn-outline {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--text-subtle);
  background: var(--surface);
}

.btn-dark {
  background: var(--surface-strong);
  color: var(--text);
}

.btn-dark:hover {
  background: var(--tint-strong);
}

.btn-accent {
  background: var(--accent-button);
  color: #fff;
}

.btn-block {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.0625rem;
}

/* Comfortable touch targets without changing the look on desktop. */
@media (pointer: coarse) {
  .btn {
    min-height: 2.75rem;
    padding-inline: 1.125rem;
  }
}

/* Label roll: script.js splits a label into letters; on hover each letter rolls up
   to an identical copy, one after another. */
.roll {
  --bleed: 0.2em;
  display: inline-flex;
  align-items: flex-start;
  height: calc(1em + var(--bleed) * 2);
  margin-block: calc(var(--bleed) * -1);
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  overflow: hidden;
  line-height: 1;
  vertical-align: bottom;
}

.roll-char {
  display: inline-flex;
  flex-direction: column;
  white-space: pre;
  transition: transform 0.52s var(--ease);
  transition-delay: calc(var(--i) * 18ms);
}

.roll-char > span {
  flex: none;
  box-sizing: content-box;
  height: 1em;
  padding-block: var(--bleed);
}

:is(a, button):hover .roll-char,
:is(a, button):focus-visible .roll-char {
  transform: translateY(-50%);
}

.link-out {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.link-out:hover {
  color: var(--text);
}

.link-out:hover .icon {
  transform: translate(2px, -2px);
}

/* Badge pill with a blue glow behind it */
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 46px 2px rgba(0, 153, 255, 0.5);
  color: var(--text);
  font: 500 0.8125rem/1.35 var(--font-sans);
  letter-spacing: 0;
  text-wrap: balance;
}

/* Small tags */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips li {
  padding: 0.3em 0.75em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-strong);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* A reference: numbered marker + the name of the role or project it points to. */
.refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.refs .label {
  width: 100%;
  margin-bottom: 0.2rem;
}

.ref {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.875rem;
  padding: 0.2rem 0.75rem 0.2rem 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.72);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.ref-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

/* Links to a role carry a dot, like the marker on the role cards. */
.ref-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.ref:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.refs-plain {
  color: var(--text-subtle);
  font-size: 0.8125rem;
}

/* Glass card: hairline border, a short bright line and a soft highlight on the top edge. */
.glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(var(--bg-rgb), 0.88);
}

/* Real glass only where a giant heading sits behind the cards (wide layouts). On small
   screens the cards are simply near-opaque, so phones never pay for a backdrop blur. */
@media (min-width: 56.25em) {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, var(--card-line) 50%, transparent) top center / min(240px, 80%) 1px no-repeat,
    radial-gradient(58% 46% at 50% 0%, var(--card-lift) 0%, var(--card-lift-mid) 45%, transparent 78%);
  pointer-events: none;
}

.glass > * {
  position: relative;
  z-index: 1;
}

/* Hover ring: a short arc of blue light that travels around the card's edge. */
@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.glass::before,
.svc-card::before,
.case::before,
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring-angle), transparent 0deg, var(--accent) 14deg, var(--accent-light) 28deg, transparent 56deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .glass:hover::before,
  .svc-card:hover::before,
  .case:hover::before,
  .bento-card:hover::before {
    opacity: 1;
    animation: ring-run 2.8s linear infinite;
  }
}

/* ---------- 05 Header + menu ---------- */

/* Three states, like a camera pulling back:
   top of page   - transparent
   .is-scrolled  - full-width frosted bar with a hairline
   .is-floating  - (wide screens, past the hero) a compact floating bar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
}

.js .site-header {
  position: fixed;
  inset: 0 0 auto;
}

/* The frosted layers live on pseudo-elements so the full-screen menu is never trapped
   inside a backdrop-filter containing block. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  transition: opacity 0.5s var(--ease);
}

.js .site-header:not(.is-scrolled)::before {
  opacity: 0;
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1.25rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}

/* The floating bar's own background. Only shown in the .is-floating state below. */
.header-inner::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 50%;
  z-index: -1;
  width: 57.5rem;
  height: 3.75rem;
  border-radius: 8px;
  background: var(--nav-bg);
  box-shadow: 0 0 0 1px var(--border);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  min-height: 2.25rem;
  font: 500 1.1875rem/1 var(--font-display);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.brand-dot {
  fill: var(--accent);
  stroke: none;
}

.site-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: 0.875rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.nav-list a:hover,
.nav-list a[aria-current] {
  color: var(--text);
}

.nav-idx,
.nav-extra,
.nav-contact {
  display: none;
}

.header-actions {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-self: end;
}

.nav-toggle {
  display: none;
  place-items: center;
  flex: none;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav-toggle-icon {
  position: relative;
  width: 1rem;
  height: 0.5rem;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.nav-toggle-icon::before {
  top: 0;
}

.nav-toggle-icon::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  transform: translateY(0.2rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  transform: translateY(-0.2rem) rotate(-45deg);
}

/* Wide screens: name left, links centred, actions right. */
@media (min-width: 61.3125em) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }

  .site-nav {
    grid-column: 2;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 3;
  }

  /* Floating state. Nothing is re-laid out: the name and the actions slide inwards with
     transforms and the compact bar fades in behind them, so the change costs no layout
     shift. --slide is how far the content edge sits from the edge of the 920px bar. */
  @supports (width: 1cqw) {
    .site-header {
      container-type: inline-size;
    }

    .header-inner {
      --slide: calc((min(100cqw, var(--wrap)) - 57.5rem) / 2 - var(--gutter));
    }

    .brand,
    .site-nav,
    .header-actions {
      transition: transform 0.5s var(--ease);
    }

    .site-header.is-floating::before {
      opacity: 0;
    }

    .site-header.is-floating .header-inner::before {
      opacity: 1;
    }

    .site-header.is-floating .brand {
      transform: translate(calc(var(--slide) + 1.5rem), 1rem);
    }

    .site-header.is-floating .site-nav {
      transform: translateY(1rem);
    }

    .site-header.is-floating .header-actions {
      transform: translate(calc((var(--slide) + 0.75rem) * -1), 1rem);
    }
  }
}

/* Small screens. Without JavaScript the links simply wrap under the name. */
@media (max-width: 61.3115em) {
  .site-nav {
    padding-top: 0.25rem;
  }

  .nav-list a {
    padding-inline: 0 1.25rem;
  }

  .nav-contact {
    display: block;
  }

  .js .nav-toggle {
    display: grid;
  }

  /* With JavaScript: a full-screen menu that opens out of the round button. */
  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
    padding: 6.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    visibility: hidden;
    clip-path: circle(0 at calc(100% - var(--gutter) - 1.3rem) 2.3rem);
    transition: clip-path 0.55s var(--ease), visibility 0s linear 0.55s;
  }

  .js .site-nav.is-open {
    visibility: visible;
    clip-path: circle(160vmax at calc(100% - var(--gutter) - 1.3rem) 2.3rem);
    transition: clip-path 0.75s var(--ease);
  }

  .js .nav-list {
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-list li {
    border-bottom: 1px solid var(--border);
  }

  .js .nav-list a {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: baseline;
    min-height: 0;
    padding: 1.05rem 0;
    color: var(--text-muted);
    font: 500 clamp(1.9rem, 9.4vw, 2.5rem) / 1.1 var(--font-display);
    letter-spacing: -0.04em;
  }

  .js .nav-list a[aria-current] {
    color: var(--text);
  }

  .js .nav-list a[aria-current]::after {
    content: "";
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  .js .nav-idx {
    display: inline;
    color: var(--text-subtle);
    font: 400 0.75rem/1 var(--font-sans);
    letter-spacing: 0;
  }

  .js .nav-extra {
    display: grid;
    gap: 0.75rem;
  }

  .nav-extra-links {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
  }

  .nav-extra-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    text-decoration: none;
  }

  .js .nav-list li,
  .js .nav-extra {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s, transform 0.2s;
  }

  .js .site-nav.is-open .nav-list li,
  .js .site-nav.is-open .nav-extra {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  }

  .js .site-nav.is-open .nav-list li:nth-child(1) { transition-delay: 0.1s; }
  .js .site-nav.is-open .nav-list li:nth-child(2) { transition-delay: 0.15s; }
  .js .site-nav.is-open .nav-list li:nth-child(3) { transition-delay: 0.2s; }
  .js .site-nav.is-open .nav-list li:nth-child(4) { transition-delay: 0.25s; }
  .js .site-nav.is-open .nav-list li:nth-child(5) { transition-delay: 0.3s; }
  .js .site-nav.is-open .nav-extra { transition-delay: 0.38s; }

  html.menu-open,
  html.menu-open body {
    overflow: hidden;
  }
}

/* Phones: tighten the bar so name, switch, contact and menu fit on one line. */
@media (max-width: 30em) {
  .header-inner {
    gap: 0 0.625rem;
  }

  .brand {
    gap: 0.45rem;
    font-size: 1.0625rem;
  }

  .brand-mark {
    width: 1.25rem;
    height: 1.25rem;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .header-cta {
    padding-inline: 0.875rem;
  }
}

/* Very narrow phones: the menu already has the contact button. */
@media (max-width: 24.25em) {
  .header-cta {
    display: none;
  }
}

/* ---------- 06 Theme switch ---------- */

.theme-switch {
  position: relative;
  flex: none;
  width: 2.875rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-strong);
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.js button.theme-switch {
  display: block;
}

/* Larger hit area than the visible track. */
.theme-switch::after {
  content: "";
  position: absolute;
  inset: -0.65rem -0.4rem;
}

.theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

[data-theme="light"] .theme-switch-knob {
  background: var(--accent);
  transform: translateX(1.375rem);
}

/* ---------- 07 Hero + editor window ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}

.js .hero {
  padding-top: clamp(7.5rem, 14vh, 10.5rem);
}

/* Fifteen bars of blue light. Heights form a V; each breathes on its own beat. */
.hero-bars {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  pointer-events: none;
}

.hero-bars i {
  flex: 1 0 calc(100% / 15);
  height: 100%;
  background: linear-gradient(to top, var(--accent), transparent);
  transform: scaleY(var(--s));
  transform-origin: bottom;
}

.hero-inner {
  max-width: 90rem;
}

.hero-title {
  font: inherit;
}

.hero-badge {
  margin-bottom: 1.25rem;
}

.hero-statement {
  display: block;
  margin-bottom: 1.5rem;
  font: 530 clamp(2.25rem, 1rem + 5.3vw, 5.75rem) / 1 var(--font-display);
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-statement .line {
  display: block;
}

.hero-sub {
  max-width: 43rem;
  margin: 0 auto 2.25rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 3.75rem;
}

.hero-ctas .link-out {
  margin-left: 0.5rem;
}

/* The window. Its 6px rim is frosted glass, so the blue bars behind it read as a glowing border. */
.editor {
  position: relative;
  text-align: left;
}

.editor-frame {
  height: 30.625rem;
  padding: 6px 6px 0;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.75) brightness(1.45);
  backdrop-filter: blur(14px) saturate(1.75) brightness(1.45);
}

.editor-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: rgba(var(--bg-rgb), 0.8);
  font-size: 0.8125rem;
}

/* Equal side columns (the width of the chip) keep the control centred. On narrow phones
   the middle column gives way first, so the avatar is never pushed out of the window. */
.editor-bar {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: clamp(0.5rem, 2.5vw, 0.75rem);
  padding: 0.75rem clamp(0.75rem, 4vw, 1.25rem);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

.editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background: var(--tint-weak);
}

.editor-chip .brand-mark {
  width: 1rem;
  height: 1rem;
}

.editor-chip .icon {
  width: 0.7rem;
  height: 0.7rem;
  color: var(--text-muted);
}

.editor-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
}

.editor-seg {
  display: flex;
  flex: 0 1 10.625rem;
  gap: 2px;
  height: 1.875rem;
  padding: 2px;
  border-radius: 6px;
  background: var(--tint);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

.editor-seg > * {
  display: grid;
  place-items: center;
  flex: 1;
  border-radius: 4px;
  color: var(--text-muted);
}

.editor-seg b {
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
}

.editor-readout {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 10.625rem;
  height: 1.875rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1;
}

.editor-readout b {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.editor-readout i {
  width: 1px;
  height: 0.8rem;
  background: var(--hairline);
}

.editor-avatar {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface-strong);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.editor-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.editor-panel {
  display: none;
  padding: 0.75rem 1.25rem;
  overflow: hidden;
}

.editor-left {
  border-right: 1px solid var(--hairline);
}

.editor-right {
  border-left: 1px solid var(--hairline);
}

.editor-tabs {
  display: flex;
  gap: 2px;
  height: 2.25rem;
  padding: 2px;
  border-radius: 8px;
  background: var(--tint-weak);
  line-height: 1;
}

.editor-tabs > * {
  display: grid;
  place-items: center;
  flex: 1;
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 500;
}

.editor-tabs b {
  background: var(--tint-strong);
  color: var(--text);
}

.editor-select {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.375rem;
  margin-block: 0.75rem;
  padding-inline: 0.75rem;
  border-radius: 6px;
  background: var(--tint-weak);
  font-weight: 500;
}

.editor-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.9rem;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.3rem;
  border-right: 1.5px solid var(--text-subtle);
  border-bottom: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
}

.editor-layers li {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.375rem;
  padding-left: 2.6rem;
  border-radius: 6px;
  color: var(--text-muted);
}

/* layer icon: two stacked sheets */
.editor-layers li::before,
.editor-layers li::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  width: 0.7rem;
  height: 0.4rem;
  border-radius: 2px;
  background: currentColor;
  transform: skewX(-18deg);
}

.editor-layers li::before {
  top: calc(50% - 0.36rem);
  opacity: 0.85;
}

.editor-layers li::after {
  top: calc(50% + 0.02rem);
  opacity: 0.45;
}

.editor-layers .is-on {
  background: var(--accent-deep);
  color: #fff;
  font-weight: 500;
}

.editor-heading {
  margin: 0.4rem 0 0.7rem;
  color: var(--text);
  font-weight: 600;
}

.editor-matches {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}

.editor-matches li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 2rem;
  align-items: center;
  gap: 0.6rem;
  height: 1.875rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.editor-matches li:first-child {
  color: var(--text);
}

.editor-matches span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-matches i {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--tint);
}

.editor-matches i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(var(--w, 0.5));
  transform-origin: left;
}

.editor-matches b {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.editor-props {
  display: grid;
  gap: 0.5rem;
}

.editor-props div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
}

.editor-props dt {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.editor-props dd {
  display: flex;
  align-items: center;
  height: 1.875rem;
  padding-inline: 0.625rem;
  border-radius: 4px;
  background: var(--surface-strong);
  font-size: 0.75rem;
  font-weight: 500;
}

.editor-status {
  display: flex;
  gap: 0.9rem;
  padding: 0.65rem 1.25rem 0.75rem;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.fig-no {
  flex: none;
  color: var(--accent-text);
  line-height: 1.5;
}

/* The field itself. On phones the drawing is enlarged and cropped so labels stay readable. */
.editor-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  cursor: crosshair;
}

.field-svg {
  position: absolute;
  top: -35%;
  left: -35%;
  width: 170%;
  height: 170%;
  -webkit-mask-image: radial-gradient(ellipse 35% 35% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 35% 35% at 50% 50%, #000 58%, transparent 100%);
}

.stop-signal {
  stop-color: var(--accent);
}

.field-dim {
  fill: var(--text);
  opacity: 0.3;
}

.field-lit {
  fill: var(--text);
}

.field-node circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s var(--ease);
}

.field-node text,
.field-query text {
  font: 500 13px var(--font-sans);
}

.field-node text {
  fill: var(--text-muted);
}

.field-node.is-near circle {
  fill: var(--accent);
  transform: scale(1.45);
}

.field-node.is-near text {
  fill: var(--text);
}

.field-links line {
  stroke: var(--accent);
  stroke-opacity: 0.75;
}

.field-ring {
  fill: none;
  stroke: var(--accent-light);
  stroke-opacity: 0.35;
  stroke-dasharray: 2 7;
}

.field-query-halo {
  fill: none;
  stroke: var(--accent-light);
  stroke-opacity: 0.7;
}

.field-query-dot {
  fill: var(--accent-light);
}

.field-query text {
  fill: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 40em) {
  .editor-frame {
    height: 38.75rem;
  }

  .editor-readout {
    display: flex;
  }

  .field-svg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 55%, transparent 100%);
  }
}

@media (min-width: 56.25em) {
  .editor-body {
    grid-template-columns: 16.25rem minmax(0, 1fr);
  }

  .editor-left {
    display: block;
  }
}

@media (min-width: 75em) {
  .editor-body {
    grid-template-columns: 18.75rem minmax(0, 1fr) 18.75rem;
  }

  .editor-right {
    display: block;
  }
}

/* ---------- 08 Tools strip ---------- */

.stack {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* The tools sit on balanced, centred lines: one row where it fits, otherwise even rows
   (5 + 4, then 3 + 3 + 3 for nine tools), however many tools are listed. font-size: 0
   removes the white space between the items, so the markup can be typed either way. */
.stack-list {
  margin-block: -0.55rem;
  color: var(--text-muted);
  font-size: 0;
  text-align: center;
  text-wrap: balance;
}

.stack-list li {
  display: inline-block;
  margin: 0.55rem clamp(0.625rem, 2.25vw, 2rem);
  font: 500 clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  transition: color 0.22s var(--ease);
}

.stack-list li:hover {
  color: var(--text);
}

/* ---------- 09 Section scaffolding ---------- */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-intro {
  max-width: 34rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}

.section-intro p + p {
  margin-top: 0.9rem;
}

.note {
  color: var(--text-subtle);
  font-size: 0.875rem;
}

.section-head-center {
  justify-items: center;
  text-align: center;
}

.section-head-center h2 {
  max-width: 13.5em;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
}

.section-head-center h2 em {
  display: block;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

@media (min-width: 56.25em) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .section-head-center {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-head-split .section-side {
    justify-self: end;
  }
}

/* One-word giant heading that sits partly behind a row of glass cards. */
.giant-section {
  display: grid;
}

.giant {
  font-size: clamp(2.875rem, 9vw, 8.25rem);
  line-height: 1;
  letter-spacing: -0.055em;
  text-align: center;
}

.giant-intro {
  order: -1;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.lead {
  font: 500 clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem) / 1.1 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------- 10 Approach (bento) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: q;
}

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  grid-column: 1 / -1;
  min-height: 21rem;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  counter-increment: q;
}

.bento-card > * {
  position: relative;
  z-index: 1;
}

.bento-text {
  max-width: 34rem;
}

.bento-q {
  font: 500 clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem) / 1.08 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.bento-q::before {
  content: "Q" counter(q);
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent-text);
  font: 500 0.75rem/1 var(--font-sans);
  letter-spacing: 0.14em;
}

.bento-card h3 {
  margin-top: 1.1rem;
  font: 500 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) / 1.35 var(--font-sans);
  letter-spacing: -0.01em;
}

.bento-a {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.5;
}

/* Card art: pure CSS light, anchored bottom-right, kept away from the text by a mask. */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.art-arc::after {
  background: radial-gradient(120% 120% at 88% 150%, var(--bg) 0 46.5%, var(--accent-light) 47%, var(--accent) 48.6%, rgba(0, 104, 173, 0.5) 56%, transparent 72%);
}

.art-stars::after {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 18%, var(--text) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 62%, var(--accent-light) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 74%, var(--text) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 34%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 86%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 46%, var(--accent-light) 50%, transparent 51%),
    radial-gradient(60% 55% at 78% 96%, rgba(0, 153, 255, 0.34), transparent 70%);
  background-size: 190px 170px, 150px 130px, 230px 210px, 130px 150px, 210px 190px, 170px 230px, 110px 110px, 100% 100%;
  -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 80%);
  mask-image: linear-gradient(160deg, transparent 30%, #000 80%);
}

.art-lines::after {
  background:
    linear-gradient(118deg, transparent 54%, rgba(0, 153, 255, 0.5) 56.5%, var(--accent-light) 57%, rgba(0, 153, 255, 0.5) 57.5%, transparent 60%),
    linear-gradient(118deg, transparent 64%, rgba(0, 153, 255, 0.35) 66.6%, rgba(122, 202, 255, 0.8) 67%, rgba(0, 153, 255, 0.35) 67.4%, transparent 70%),
    linear-gradient(118deg, transparent 75%, rgba(0, 153, 255, 0.28) 77.7%, rgba(122, 202, 255, 0.6) 78%, transparent 81%),
    radial-gradient(70% 60% at 100% 100%, rgba(0, 104, 173, 0.55), transparent 70%);
}

.art-grid::after {
  background:
    linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(50% 60% at 82% 100%, rgba(0, 153, 255, 0.4), transparent 72%);
  -webkit-mask-image: radial-gradient(75% 85% at 85% 100%, #000 10%, transparent 75%);
  mask-image: radial-gradient(75% 85% at 85% 100%, #000 10%, transparent 75%);
}

.art-dial::after {
  background:
    repeating-conic-gradient(from 0deg at 86% 118%, var(--hairline) 0deg 0.5deg, transparent 0.5deg 6deg),
    repeating-radial-gradient(circle at 86% 118%, transparent 0 46px, var(--border-strong) 46px 47px),
    radial-gradient(45% 80% at 86% 118%, rgba(0, 153, 255, 0.36), transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 86% 118%, #000 12%, transparent 62%);
  mask-image: radial-gradient(circle at 86% 118%, #000 12%, transparent 62%);
}

@media (min-width: 56.25em) {
  .bento-card:nth-child(1),
  .bento-card:nth-child(4) {
    grid-column: span 7;
  }

  .bento-card:nth-child(2),
  .bento-card:nth-child(3) {
    grid-column: span 5;
  }

  .bento-card:nth-child(5) {
    min-height: 17rem;
  }

  .bento-card:nth-child(5) .bento-text {
    max-width: 44rem;
  }
}

/* ---------- 11 Projects ---------- */

.works {
  isolation: isolate;
}

/* Blue light streaks behind the section title. */
.works-light {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(100%, 62rem);
  background:
    linear-gradient(124deg, transparent 38%, rgba(0, 153, 255, 0.1) 47.4%, rgba(122, 202, 255, 0.4) 49.6%, rgba(0, 153, 255, 0.1) 51.8%, transparent 61%),
    linear-gradient(57deg, transparent 40%, rgba(0, 153, 255, 0.08) 48%, rgba(122, 202, 255, 0.3) 50%, rgba(0, 153, 255, 0.08) 52%, transparent 60%),
    linear-gradient(98deg, transparent 20%, rgba(0, 153, 255, 0.06) 30%, rgba(0, 153, 255, 0.2) 33%, rgba(0, 153, 255, 0.06) 36%, transparent 46%),
    linear-gradient(172deg, transparent 36%, rgba(0, 153, 255, 0.08) 47%, rgba(0, 153, 255, 0.22) 50%, rgba(0, 153, 255, 0.08) 53%, transparent 64%),
    radial-gradient(70% 55% at 50% 30%, rgba(0, 104, 173, 0.28), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 62%, transparent);
  pointer-events: none;
}

.cases {
  display: grid;
  gap: 1.25rem;
}

.case {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent, var(--card-line) 50%, transparent) top center / min(240px, 80%) 1px no-repeat,
    radial-gradient(58% 40% at 50% 0%, var(--card-lift) 0%, var(--card-lift-mid) 45%, transparent 78%),
    var(--bg);
}

.case-top {
  display: grid;
  gap: 2rem 2.5rem;
}

.case-index {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.case-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Arriving from a reference link: the marker of the project or role lights up. */
.case:target .case-no,
.role:target .role-phase::before {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(0, 153, 255, 0.28);
}

.case-title {
  margin: 1.1rem 0 0.8rem;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.case-summary {
  max-width: 30rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
}

.case-head .chips {
  margin-top: 1.25rem;
}

/* The pipeline as text: crawlable, and it wraps on small screens. */
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: 1.25rem;
  color: var(--text-strong);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.flow li {
  display: inline-flex;
  align-items: center;
}

/* The connector trails each step, so a wrapped row never starts with a stray dash. */
.flow li:not(:last-child)::after {
  content: "";
  width: 1.1rem;
  height: 1px;
  margin-inline: 0.5rem;
  background: var(--hairline);
}

.flow li:last-child {
  color: var(--accent-text);
}

/* Diagram in a small window frame */
.plate {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--bg-elevated);
}

.plate-bar {
  display: flex;
  gap: 6px;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.plate-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}

.plate-bar i:nth-child(2) {
  background: #febc2e;
}

.plate-bar i:nth-child(3) {
  background: #28c840;
}

.plate svg {
  width: 100%;
  height: auto;
}

.plate figcaption {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem 0.7rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Diagram drawing vocabulary */
.p-box {
  fill: var(--surface-strong);
  stroke: var(--hairline);
}

.p-box.faint {
  opacity: 0.5;
}

.p-fill {
  fill: var(--text);
  fill-opacity: 0.2;
}

.p-fill.strong {
  fill-opacity: 0.42;
}

.p-dot {
  fill: var(--text);
  fill-opacity: 0.38;
}

.p-line {
  fill: none;
  stroke: var(--hairline);
}

.p-wire {
  fill: none;
  stroke: var(--text);
  stroke-opacity: 0.42;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}

.p-wire.hot {
  stroke: var(--accent-light);
  stroke-opacity: 1;
}

[data-theme="light"] .p-wire.hot {
  stroke: var(--accent);
}

.p-hot {
  fill: var(--accent);
}

.p-hot-ring {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.6;
}

.p-hot-soft {
  fill: var(--accent);
  fill-opacity: 0.16;
}

.p-cells {
  fill: none;
  stroke: var(--text);
  stroke-opacity: 0.2;
  stroke-width: 5;
  stroke-dasharray: 30 18;
}

.p-cells.strong {
  stroke-opacity: 0.42;
}

.p-cells.thin {
  stroke-width: 4;
  stroke-dasharray: none;
  stroke-linecap: round;
}

.p-cells.is-signal {
  stroke: var(--accent);
  stroke-opacity: 1;
}

.p-chunk rect {
  fill: var(--text);
  fill-opacity: 0.07;
  stroke: var(--hairline);
}

.p-chunk-hot {
  fill: var(--accent);
}

.case-grid {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--card-rule);
}

.case-cell {
  padding-block: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--card-rule);
}

.case-cell:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.case-cell h4 {
  margin-bottom: 0.6rem;
}

.case-cell.is-value h4 {
  color: var(--accent-text);
}

.case-cell p {
  color: var(--text-muted);
  line-height: 1.6;
}

.case-cell.is-value p {
  color: var(--text);
}

@media (min-width: 40em) and (max-width: 71.99em) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-cell:nth-child(even) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--card-rule);
  }

  .case-cell:nth-child(odd) {
    padding-right: 1.5rem;
  }

  .case-cell:nth-last-child(-n + 2) {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (min-width: 56.25em) {
  .case-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }
}

@media (min-width: 72em) {
  .case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-cell {
    padding: 1.4rem 1.5rem 0;
    border-bottom: 0;
    border-left: 1px solid var(--card-rule);
  }

  .case-cell:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .case-cell:last-child {
    padding-right: 0;
  }
}

/* ---------- 12 Keyword band, Experience ---------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem;
  background: var(--surface);
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(3rem, 12vw, 11rem);
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface) 6%, transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface) 6%, transparent);
}

.marquee-track {
  display: flex;
  gap: 3.25rem;
  width: max-content;
  color: var(--text-muted);
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
  line-height: 1.2;
  white-space: nowrap;
}

.marquee-track span {
  position: relative;
}

.marquee-track span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.75rem;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--text-subtle);
}

.roles {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.role {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
}

.role-phase {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.role-phase::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.role:first-child .role-phase::before {
  background: var(--accent);
}

.role h3 {
  margin-top: 1.6rem;
  font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.role-org {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin-top: 1rem;
  color: var(--text);
  font-weight: 500;
}

.role-dates {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.role-award {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid rgba(0, 153, 255, 0.5);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.4;
}

.role-award-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.role-points {
  margin-top: 1.75rem;
  border-top: 1px solid var(--card-rule);
}

.role-points li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--card-rule);
  color: var(--text-strong);
  font-size: 0.84375rem;
  line-height: 1.5;
}

.role-points li:last-child {
  border-bottom: 0;
}

.role .chips {
  margin-top: auto;
  padding-top: 1.5rem;
}

@media (min-width: 61.3125em) {
  .roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(-1.375rem, -1.5vw, -0.625rem);
  }
}

/* ---------- 13 Capabilities ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  transition: background-color 0.3s var(--ease);
}

.svc-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
}

.svc-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-card h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.svc-desc {
  margin: 0.7rem 0 1.25rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.svc-card .refs {
  margin-top: auto;
  padding-top: 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:hover {
    background: var(--bg-elevated);
  }
}

@media (min-width: 40em) {
  .svc-card {
    grid-column: span 3;
  }

  .svc-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .svc-card,
  .svc-card:nth-child(5) {
    grid-column: span 2;
  }

  .svc-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* ---------- 14 Background ---------- */

.background {
  isolation: isolate;
  overflow: hidden;
}

/* A dotted globe, lit from the upper left. */
.halftone {
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  left: 50%;
  z-index: -1;
  width: min(54rem, 130%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.6px) 0 0 / 9px 9px;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(circle at 40% 28%, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 66%);
  mask-image: radial-gradient(circle at 40% 28%, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 66%);
  pointer-events: none;
}

.bg-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 70rem;
  margin: 1.75rem auto 0;
}

.facts,
.creds {
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
}

.facts {
  display: grid;
  align-content: start;
  gap: 1.6rem;
}

.fact {
  display: grid;
  gap: 0.3rem;
}

.fact dt {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.fact dd {
  font: 500 1.125rem/1.25 var(--font-display);
  letter-spacing: -0.02em;
}

.fact-stat dd {
  order: -1;
  font-size: clamp(3rem, 2.4rem + 2vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.fact-stat sup {
  margin-left: 0.05em;
  color: var(--accent-text);
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: top;
}

.creds li {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--card-rule);
}

.creds li:first-child {
  padding-top: 0;
}

.creds li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.creds h3 {
  margin: 0.7rem 0 0.45rem;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.creds li p:last-child {
  color: var(--text-muted);
}

@media (min-width: 56.25em) {
  .bg-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    margin-top: clamp(-1.375rem, -1.5vw, -0.625rem);
  }
}

/* ---------- 15 Contact ---------- */

.contact {
  position: relative;
  padding-block: clamp(5rem, 9vw, 7.5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.contact-inner {
  display: grid;
  justify-items: center;
}

.contact-title {
  max-width: 13.5em;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
}

.contact-lede {
  max-width: 39rem;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}

.contact-email-row {
  max-width: 100%;
  margin-top: 1.75rem;
}

.contact-email {
  font: 500 clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem) / 1.15 var(--font-display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.22s var(--ease);
}

.contact-email:hover {
  text-decoration-color: var(--accent);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

/* Keeps the button from resizing when its label changes to "Copied". */
.btn[data-copy] {
  min-width: 8rem;
}

/* ---------- 16 Footer ---------- */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(9rem, 21vw, 19rem);
}

.footer-mark {
  position: absolute;
  top: clamp(0.5rem, 2vw, 2rem);
  left: 50%;
  z-index: -1;
  width: min(60vw, 40rem);
  transform: translateX(-50%);
}

.footer-mark svg {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--mark);
  stroke-width: 4.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* The grid is frosted, so the lower part of the monogram dissolves behind it. */
.footer-frame {
  width: 100%;
  max-width: 89rem;
  margin-inline: auto;
  border-top: 1px solid var(--border);
  background: var(--footer-veil);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.footer-links,
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: var(--gutter);
  border-inline: 1px solid var(--border);
}

.footer-links {
  border-bottom: 1px solid var(--border);
}

.footer-links li + li,
.footer-col + .footer-col {
  border-left: 1px solid var(--border);
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.875rem;
  padding-inline: 1.5rem;
  color: var(--text);
  font-size: 0.84375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.22s var(--ease);
}

.footer-links .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-links .icon-arrow {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: auto;
  color: var(--text-muted);
}

.footer-links a:hover {
  background: var(--tint-weak);
}

.footer-links a:hover .icon-arrow {
  color: var(--text);
  transform: translateX(3px);
}

.footer-col {
  padding: 2.75rem 1.5rem 2.25rem;
}

.footer-heading {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font: 400 0.8125rem/1.4 var(--font-sans);
  letter-spacing: 0;
}

.footer-col li {
  font-size: 0.84375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.footer-col a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--text);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.footer-col .footer-plain {
  padding-block: 0.4rem;
  color: var(--text-muted);
}

.footer-col a:hover {
  color: var(--accent-text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 89rem;
  margin-inline: auto;
  padding: 1.1rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.footer-top:hover {
  color: var(--text);
}

.footer-top:hover .icon {
  transform: translateY(-3px);
}

@media (max-width: 47.99em) {
  .footer-links li:nth-child(odd),
  .footer-col:nth-child(odd) {
    border-left: 0;
  }

  .footer-links li:nth-child(n + 3),
  .footer-col:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .footer-links a,
  .footer-col {
    padding-inline: 1rem;
  }
}

/* Very narrow screens: a little more room, so the email address breaks at the @. */
@media (max-width: 21.25em) {
  .footer-links a,
  .footer-col {
    padding-inline: 0.75rem;
  }
}

@media (min-width: 48em) {
  .footer-links,
  .footer-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 17 Motion ---------- */

/* Loops are paused while their section is off screen (script.js sets data-anim="paused"). */
[data-anim="paused"],
[data-anim="paused"] * {
  animation-play-state: paused !important;
}

/* Everything below is an enhancement. Content is visible without it. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: pure CSS, so it never waits for script.js. */
  .hero-badge,
  .hero-statement .line,
  .hero-sub,
  .hero-ctas {
    animation: rise 0.6s var(--ease) backwards;
  }

  /* Short stagger on purpose: the paragraph is the largest text on a phone, and it should
     not be held back by its own entrance. */
  .hero-statement .line:nth-child(1) { animation-delay: 0.04s; }
  .hero-statement .line:nth-child(2) { animation-delay: 0.08s; }
  .hero-sub { animation-delay: 0.1s; }
  .hero-ctas { animation-delay: 0.16s; }

  /* With a real pointer (desktop-class hardware) the headline arrives out of a soft blur. */
  @media (hover: hover) and (pointer: fine) {
    .hero-statement .line {
      animation-name: rise-blur;
      animation-duration: 0.8s;
    }
  }

  .editor {
    animation: lift 0.8s var(--ease) 0.14s backwards;
  }

  .hero-bars {
    animation: glow 1.1s ease-out backwards;
  }

  .hero-bars i {
    animation: bar-pulse 2s ease-in-out var(--d) infinite alternate;
  }

  .marquee-track {
    animation: marquee 30s linear infinite;
  }

  /* Scroll reveals: only when script.js is running (html.js). */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* A link can jump to a card before it has been revealed; allow for its starting offset. */
  .js [data-reveal]:not(.is-in) {
    scroll-margin-top: 34px;
  }

  /* Headings arrive word by word, out of a soft blur. */
  .js .split-word {
    display: inline-block;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(45%);
    transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.7s var(--ease);
    transition-delay: calc(var(--i) * 45ms);
  }

  .js .is-in .split-word {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* The monogram in the footer settles into place. */
  .js .footer-mark {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.985);
    transition: opacity 1.2s cubic-bezier(0.5, 0, 0.6, 1), transform 1.2s cubic-bezier(0.5, 0, 0.6, 1);
  }

  .js .footer-mark.is-in {
    opacity: 1;
    transform: translateX(-50%);
  }

  /* Small signs of life while a card is hovered. */
  @media (hover: hover) and (pointer: fine) {
    .svc-card:hover .svc-icon svg {
      animation: icon-float 2.4s ease-in-out infinite alternate;
    }

    .case:hover .p-wire {
      animation: wire 0.9s linear infinite;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes rise-blur {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(30%);
  }
}

@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
}

@keyframes glow {
  from {
    opacity: 0;
  }
}

@keyframes bar-pulse {
  from {
    transform: scaleY(var(--s));
  }
  to {
    transform: scaleY(calc(var(--s) * 0.7));
  }
}

/* The track holds four identical sets of keywords. One loop moves it by exactly one set:
   a quarter of the track plus a quarter of one 3.25rem gap. */
@keyframes marquee {
  to {
    transform: translateX(calc(-25% - 0.8125rem));
  }
}

@keyframes ring-run {
  to {
    --ring-angle: 360deg;
  }
}

@keyframes icon-float {
  from {
    transform: translateY(1.5px) rotate(-4deg);
  }
  to {
    transform: translateY(-2.5px) rotate(4deg);
  }
}

@keyframes wire {
  to {
    stroke-dashoffset: -14;
  }
}

/* Theme change: a short cross-fade where the browser supports view transitions. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 18 Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}