/* ==========================================================================
   justin-ux.com — Justin Lancaster, Product Design
   Design system ported from the canonical light brand system.
   Vanilla CSS. No build step. No framework.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --white:      #FFFFFF;
  --tint:       #F2F5FF;
  --alt:        #F7F8FC;
  --navy:       #0B1120;

  /* Primary gradient */
  --signal:     #3B6EF8;
  --violet:     #7C3AED;
  --grad:       linear-gradient(135deg, #3B6EF8 0%, #7C3AED 100%);
  --grad-soft:  linear-gradient(135deg, rgba(59,110,248,.07) 0%, rgba(124,58,237,.05) 100%);
  --grad-bd:    linear-gradient(135deg, rgba(59,110,248,.5), rgba(124,58,237,.5));

  /* Deep gradient — contact section */
  --grad-deep:  linear-gradient(135deg, #2D1B8E 0%, #1E1065 40%, #3B0F8C 100%);
  --grad-light: linear-gradient(135deg, #A5B4FC, #C4B5FD);

  /* Accents */
  --cyan:       #0EA5E9;
  --amber:      #F59E0B;
  --slate:      #64748B;
  --blue-lt:    #EEF2FF;
  --blue-bd:    #C7D2FE;

  /* Ink */
  --ink:        #0B1120;
  --ink-2:      #334155;
  --ink-3:      #627288;
  --ink-4:      #66707F;

  /* Lines */
  --line:       #E4E9F2;
  --line-soft:  #F1F5F9;

  /* Type */
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --gut:     clamp(1.25rem, 4vw, 2.5rem);
  --max:     1200px;
  --max-narrow: 760px;

  /* Motion */
  --ease:    cubic-bezier(.22,.61,.36,1);

  /* Elevation */
  --sh-1: 0 1px 2px rgba(11,17,32,.04), 0 4px 16px rgba(11,17,32,.04);
  --sh-2: 0 2px 4px rgba(11,17,32,.05), 0 12px 32px rgba(11,17,32,.07);
  --sh-3: 0 8px 20px rgba(11,17,32,.08), 0 24px 60px rgba(11,17,32,.10);
}

/* ==========================================================================
   Cross-document view transitions
   The card thumbnail morphs into the case study hero image on navigation.
   Progressive enhancement — browsers without support just navigate normally.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-group(*) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
/* Header and footer stay put instead of cross-fading with the page */
.site-head { view-transition-name: site-head; }
.site-foot { view-transition-name: site-foot; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;              /* kills heading orphans */
}
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
li:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }
::selection { background: rgba(59,110,248,.18); }

/* ---------- Utility ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .grad-text { color: var(--signal); -webkit-text-fill-color: var(--signal); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 8px;
  font: 500 14px/1 var(--body); text-decoration: none; transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* Gradient focus ring */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tabular numerals wherever mono numbers align */
.card-idx, .cs-idx, .approach-n, .stat-n, .outcome-n, .cs-meta dd {
  font-variant-numeric: tabular-nums;
}

/* Section eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 24px; height: 3px; border-radius: 2px;
  background: var(--grad); flex: none;
}

/* ---------- Scroll reveal ----------
   Only hide the starting state where a script can actually reveal it again.
   With JavaScript off the observer never runs, so an unconditional opacity:0
   would blank every section below the hero. Engines that don't understand
   `scripting` simply skip the animation and show the content, which is the
   safe direction to fail in. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Reading progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 150;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: var(--grad); pointer-events: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.62);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(226,232,240,.8);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 70px;
}

/* Wordmark — gradient name + light role on one line */
.brand {
  display: inline-flex; align-items: baseline; gap: .7rem;
  text-decoration: none; margin-right: auto; flex: none;
  min-width: 0;
}
.brand-name {
  font-family: var(--display); font-weight: 800; font-size: 25px;
  letter-spacing: -.03em; line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
@supports not (background-clip: text) {
  .brand-name { color: var(--signal); -webkit-text-fill-color: var(--signal); }
}
.brand-rule {
  width: 1px; height: 17px; flex: none;
  background: var(--line); align-self: center;
}
.brand-role {
  font-family: var(--body); font-weight: 300; font-size: 15px;
  color: var(--ink-3); letter-spacing: .005em; white-space: nowrap;
  transition: color .18s var(--ease);
}
.brand:hover .brand-role { color: var(--ink-2); }

@media (max-width: 700px) {
  .brand-name { font-size: 20px; }
  .brand-rule, .brand-role { display: none; }
}

/* Nav — proportions and hover */
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  font-size: 13.5px; font-weight: 400; text-decoration: none; color: var(--ink-3);
  position: relative; padding: 4px 0; transition: color .15s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

/* Must out-specify `.nav a` (0,1,1) — a bare `.nav-cta` (0,1,0) loses to it
   and the padding silently never applies. */
.nav a.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 10px;
  background: var(--grad); color: #fff !important;
  font-size: 14px; font-weight: 500; text-decoration: none;
  box-shadow: 0 2px 16px rgba(59,110,248,.28);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.nav a.nav-cta::after { display: none !important; }
.nav a.nav-cta:hover {
  transform: translateY(-1px); opacity: .95;
  box-shadow: 0 6px 24px rgba(59,110,248,.38);
}

/* Nav link that points at a real page rather than a homepage anchor */
.nav a.nav-page {
  color: var(--ink-2);
}

/* ⌘K affordance — visible so the palette is discoverable, not just clever */
.kbd-hint {
  display: none; align-items: center; gap: 5px; flex: none;
  margin-left: .25rem; padding: 5px 9px; border-radius: 7px; cursor: pointer;
  background: var(--alt); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-4);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.kbd-hint:hover { border-color: var(--signal); color: var(--signal); background: #fff; }
@media (min-width: 1041px) { .kbd-hint { display: inline-flex; } }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 9px; width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}

@media (max-width: 1040px) {
  .nav {
    position: fixed; inset: 70px 0 auto; flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.25rem; align-items: stretch;
    transform: translateY(-140%); transition: transform .3s var(--ease);
    box-shadow: var(--sh-2);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav a::after { display: none; }
  .nav-cta { justify-content: center; margin-top: 1rem; border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec.alt  { background: var(--alt); }
/* Tightened edges where a full-bleed band sits against a section */
.sec.pb-sm { padding-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.sec.pt-sm { padding-top: clamp(2.5rem, 5vw, 4.25rem); }
.sec-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 1rem; }
.sec-head p { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-3); margin: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--tint);
  padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; top: -28%; right: -12%;
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  background: var(--grad); opacity: .12; filter: blur(90px);
  border-radius: 50%; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11,17,32,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,17,32,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.75rem);
  font-weight: 900; letter-spacing: -.035em; margin: 0 0 1.4rem;
  max-width: 15ch;
}

/* Two-column hero: copy left, showcase right */
.hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
}
.hero-lede {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--ink-2); max-width: 58ch; margin: 0 0 2.25rem;
}
.hero-lede strong { color: var(--ink); }

/* Hero entrance stagger */
.hero .eyebrow  { animation: fadeUp .6s .05s ease both; }
.hero h1        { animation: fadeUp .6s .15s ease both; }
.hero-lede      { animation: fadeUp .6s .25s ease both; }
.hero .btn-row  { animation: fadeUp .6s .35s ease both; }
.hero-showcase  { animation: fadeUp .7s .4s ease both; }
.hero .stats    { animation: fadeUp .6s .55s ease both; }

/* ==========================================================================
   Hero showcase carousel
   ========================================================================== */
.hero-showcase { position: relative; }

.shot-stack {
  position: relative;
  aspect-ratio: 16 / 10.4;
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Glow bloom behind the stack */
.shot-stack::before {
  content: ""; position: absolute; inset: 8% 6% 2%;
  background: var(--grad); filter: blur(52px); opacity: .22;
  border-radius: 40px; z-index: 0; pointer-events: none;
  animation: bloomPulse 7s ease-in-out infinite;
}
@keyframes bloomPulse {
  0%, 100% { opacity: .18; transform: scale(1); }
  50%      { opacity: .28; transform: scale(1.03); }
}

/* --- Slide --- */
.shot {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  text-decoration: none;
  transform-origin: 50% 60%;
  will-change: transform, opacity;

  /* resting (out of view, waiting behind) */
  opacity: 0; visibility: hidden;
  transform: rotateY(-6deg) rotateX(3deg) translate3d(34px, 16px, -70px) scale(.95);
  transition:
    opacity .62s var(--ease),
    transform .72s var(--ease),
    visibility 0s linear .72s,
    box-shadow .4s var(--ease);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5),
    0 18px 44px rgba(11,17,32,.13),
    0 40px 90px rgba(59,110,248,.13);
}
/* leaving to the upper-left */
.shot[data-state="out"] {
  transform: rotateY(-6deg) rotateX(3deg) translate3d(-26px, -14px, -50px) scale(.97);
}
.shot[data-state="in"] {
  opacity: 1; visibility: visible; z-index: 3;
  transform: rotateY(-6deg) rotateX(3deg) translate3d(0,0,0) scale(1);
  transition:
    opacity .62s var(--ease),
    transform .72s var(--ease),
    visibility 0s linear 0s,
    box-shadow .4s var(--ease);
  animation: shotFloat 8s ease-in-out 1s infinite;
}
@keyframes shotFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
.shot[data-state="in"]:hover,
.shot[data-state="in"]:focus-visible {
  animation-play-state: paused;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6),
    0 26px 60px rgba(11,17,32,.17),
    0 56px 120px rgba(59,110,248,.22);
}

/* --- Browser chrome --- */
.shot-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; flex: none;
  background: rgba(247,248,252,.9);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.shot-chrome i {
  width: 8px; height: 8px; border-radius: 50%; background: #DDE3EE; flex: none;
}
.shot-chrome i:nth-child(1) { background: #FF5F57; opacity: .55; }
.shot-chrome i:nth-child(2) { background: #FEBC2E; opacity: .55; }
.shot-chrome i:nth-child(3) { background: #28C840; opacity: .55; }
.shot-url {
  margin-left: 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Image --- */
.shot-media { position: relative; flex: 1; overflow: hidden; background: var(--alt); }
.shot-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .8s var(--ease);
}
.shot[data-state="in"]:hover .shot-media img { transform: scale(1.035); }
/* sheen sweep on entry */
.shot-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
}
.shot[data-state="in"] .shot-media::after { animation: sheen 1.15s var(--ease) .18s; }
@keyframes sheen { to { transform: translateX(120%); } }

/* --- Caption --- */
.shot-meta {
  flex: none; display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}
.shot-idx {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; flex: none;
}
@supports not (background-clip: text) {
  .shot-idx { color: var(--signal); -webkit-text-fill-color: var(--signal); }
}
.shot-title {
  font-family: var(--display); font-weight: 800; font-size: .97rem;
  letter-spacing: -.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-org {
  font-size: 12px; color: var(--ink-4); margin-left: auto; flex: none;
  white-space: nowrap;
}
@media (max-width: 520px) { .shot-org { display: none; } }
.shot-go {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--alt); color: var(--ink-3);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.shot[data-state="in"]:hover .shot-go { background: var(--grad); color: #fff; transform: translateX(2px); }

/* --- Indicators --- */
.shot-nav {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 1.35rem;
}
.shot-dot {
  position: relative; height: 26px; padding: 0; border: 0; background: none;
  cursor: pointer; display: flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.shot-dot span {
  display: block; width: 22px; height: 4px; border-radius: 3px;
  background: #D7DEEC; overflow: hidden; position: relative;
  transition: width .5s var(--ease), background .3s var(--ease);
}
.shot-dot:hover span { background: #BAC5DA; }
.shot-dot[aria-selected="true"] span { width: 52px; background: #E2E8F4; }
/* autoplay progress fill */
.shot-dot span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grad); transform-origin: left;
  transform: scaleX(0);
}
.shot-dot[aria-selected="true"] span::after { animation: dotFill var(--dwell, 5200ms) linear forwards; }
.shot-nav[data-paused="true"] .shot-dot span::after { animation-play-state: paused; }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Caption under the rail */
.shot-hint {
  text-align: center; margin-top: .7rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}

@media (max-width: 1039px) {
  .hero-showcase { max-width: 620px; width: 100%; }
  .shot { transform: translate3d(28px, 14px, 0) scale(.96); }
  .shot[data-state="out"] { transform: translate3d(-22px, -10px, 0) scale(.98); }
  .shot[data-state="in"] { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shot, .shot[data-state="in"], .shot[data-state="out"] { transform: none !important; }
  .shot[data-state="in"] { animation: none; }
  .shot-media::after { display: none; }
  .shot-stack::before { animation: none; }
  .shot-dot span::after { animation: none !important; transform: scaleX(1); }
  .shot-dot:not([aria-selected="true"]) span::after { transform: scaleX(0); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 26px; border-radius: 10px;
  font-family: var(--body); font-size: 14.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, opacity .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 2px 16px rgba(59,110,248,.28); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(59,110,248,.38); opacity: .95; }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

/* Stat rail */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 20px rgba(11,17,32,.06);
}
.stat { background: rgba(255,255,255,.78); padding: 1.6rem 1.5rem; }
.stat-n {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em; line-height: 1; margin-bottom: .5rem;
}
.stat-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Work grid
   ========================================================================== */
.work-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Gradient hairline border on hover — mask-composite trick */
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 18px;
  background: var(--grad-bd); opacity: 0; padding: 1px;
  transition: opacity .3s var(--ease); pointer-events: none; z-index: 3;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(59,110,248,.12), var(--sh-2);
  border-color: transparent;
}
.card:hover::after { opacity: 1; }

/* Cursor-tracking spotlight */
.card-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--alt); border-bottom: 1px solid var(--line-soft);
}
.card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0;
  pointer-events: none; transition: opacity .35s var(--ease);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.28), transparent 65%);
}
.card:hover .card-media::after { opacity: 1; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .5s var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); }
.card-idx {
  position: absolute; top: .9rem; left: .9rem; z-index: 3;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em;
  background: rgba(11,17,32,.72); color: #fff; padding: .3rem .55rem; border-radius: 6px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-body { padding: 1.4rem 1.5rem 1.55rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 {
  font-size: 1.28rem; line-height: 1.2; margin: 0 0 .45rem;
  letter-spacing: -.025em; transition: color .2s var(--ease);
  white-space: nowrap; overflow: hidden;   /* one line, always */
}
@media (max-width: 820px) {
  .card-body h3 { white-space: normal; font-size: 1.22rem; }
}
.card:hover .card-body h3 { color: var(--signal); }
.card-org { font-size: 13.5px; color: var(--ink-3); margin: 0 0 1.15rem; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.card-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.card-arrow {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--alt); color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.card:hover .card-arrow { background: var(--grad); color: #fff; transform: translateX(3px); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid; grid-template-columns: 340px minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 1000px) { .about-grid { grid-template-columns: 1fr; } }
.about-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--sh-1); position: sticky; top: 94px;
}
@media (max-width: 1000px) { .about-card { position: static; max-width: 420px; } }
.about-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-card-body { padding: 1.25rem 1.35rem 1.4rem; }
.about-card-body .n { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.about-card-body .r {
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-4); margin-top: .3rem;
}
/* Sized to hold "Domain depth, hands on the work" on one line.
   Measured: 606px of 720px available at 1200px; 511 of 530 at 1001px. */
.about-body h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
@media (min-width: 1001px) { .about-body h2 { text-wrap: nowrap; } }
.about-body > p { font-size: 1.06rem; }
.pull {
  margin: 2rem 0; padding: 1.4rem 1.6rem;
  background: var(--grad-soft); border-left: 3px solid var(--signal);
  border-radius: 0 12px 12px 0; font-size: 1.06rem; color: var(--ink);
}
.pull p { margin: 0; }

.bring { margin-top: 2.5rem; }
.bring h3 {
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 1rem;
}
.bring ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem 1.5rem;
}
@media (max-width: 620px) { .bring ul { grid-template-columns: 1fr; } }
.bring li { position: relative; padding-left: 1.6rem; font-size: 15px; margin: 0; }
.bring li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--grad);
}

/* ---------- Company marquee ----------
   Full-bleed band. Sits between About and Approach as its own section — not
   inside a .wrap — so it stretches edge to edge on a white ground. */
.orgs {
  background: var(--alt);              /* matches the About section */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; overflow: hidden;
}
/* Same ground as the band — the right-hand rule alone separates label from track */
.orgs-tag-wrap {
  padding: 20px 32px; border-right: 1px solid var(--line);
  display: flex; align-items: center; background: var(--alt);
  flex-shrink: 0; z-index: 1;
}
.orgs-tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.orgs-marquee { flex: 1; overflow: hidden; position: relative; }
.orgs-marquee::before, .orgs-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
/* Fade masks must match the band, not the page */
.orgs-marquee::before { left: 0;  background: linear-gradient(to right, var(--alt), transparent); }
.orgs-marquee::after  { right: 0; background: linear-gradient(to left,  var(--alt), transparent); }
.org-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 42s linear infinite;
}
.org-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.org-item {
  display: flex; align-items: center; padding: 0 40px; height: 64px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; white-space: nowrap;
  color: #607281; flex-shrink: 0; transition: color .25s;
  border-right: 1px solid var(--line-soft);
}
.org-item:hover { color: #3D5666; }

@media (max-width: 640px) {
  .orgs { flex-direction: column; }
  .orgs-tag-wrap {
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 12px var(--gut);
  }
  .org-item { padding: 0 28px; height: 56px; }
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.9rem, 1.6vw, 1.1rem);
}
@media (max-width: 820px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-item {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(1.75rem, 3.2vw, 2.4rem);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.approach-item::after {
  content: ""; position: absolute; inset: -1px; border-radius: 18px;
  background: var(--grad-bd); opacity: 0; padding: 1px;
  transition: opacity .25s; pointer-events: none;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.approach-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(59,110,248,.1);
  border-color: transparent;
}
.approach-item:hover::after { opacity: 1; }

.approach-n {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  color: transparent; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 14px; display: block;
}
.approach-item h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.approach-item p { font-size: 14.5px; line-height: 1.75; color: var(--ink-3); margin: 0; }

/* Animated gradient icon tile */
.svc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(59,110,248,.22);
}
.svc-icon svg { overflow: visible; }

/* 01 — layers, breathing */
.icon-layers { animation: iconPulse 2.6s ease-in-out infinite; }
@keyframes iconPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 5px rgba(255,255,255,.65)); transform: scale(1.08); }
}
/* 02 — signal bars, staggered rise */
.icon-bars rect {
  animation: barRise 1.9s ease-in-out infinite;
  transform-origin: bottom; transform-box: fill-box;
}
.icon-bars rect:nth-child(1) { animation-delay: 0s; }
.icon-bars rect:nth-child(2) { animation-delay: .18s; }
.icon-bars rect:nth-child(3) { animation-delay: .36s; }
@keyframes barRise {
  0%, 100% { opacity: .55; transform: scaleY(.65); }
  50%      { opacity: 1;   transform: scaleY(1); }
}
/* 03 — bolt, quick flash */
.icon-bolt { animation: boltFlash 2.2s ease-in-out infinite; }
@keyframes boltFlash {
  0%, 100% { opacity: .85; transform: translateY(0) scale(1); }
  45%      { opacity: 1;   transform: translateY(-2px) scale(1.1); }
  55%      { opacity: 1;   transform: translateY(-2px) scale(1.1); }
}
/* 04 — shield, steady pulse with check draw */
.icon-shield { animation: shieldPulse 2.8s ease-in-out infinite; }
@keyframes shieldPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.icon-shield .tick {
  stroke-dasharray: 12; stroke-dashoffset: 0;
  animation: tickDraw 2.8s ease-in-out infinite;
}
@keyframes tickDraw {
  0%, 20%  { stroke-dashoffset: 12; }
  45%, 100% { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Contact — deep gradient section
   ========================================================================== */
.sec-gradient {
  position: relative; overflow: hidden; border: none;
  background: var(--grad-deep);
  color: rgba(255,255,255,.62);
}
.sec-gradient::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%,     rgba(59,110,248,.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(124,58,237,.30) 0%, transparent 60%);
}
.sec-gradient::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 70%);
}
.sec-gradient .wrap { position: relative; z-index: 1; }
.sec-gradient .eyebrow {
  background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.sec-gradient .eyebrow::before { background: var(--grad-light); }
.sec-gradient .sec-head h2 { color: #fff; }
.sec-gradient .sec-head p  { color: rgba(255,255,255,.55); }

.contact-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Detail rows */
.contact-detail {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.82); margin-bottom: 16px;
}
.contact-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  color: #C4B5FD;
}

/* Link list, glassy */
.contact-links { list-style: none; padding: 0; margin: 0; }
.contact-links li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.contact-links li:first-child { border-top: 1px solid rgba(255,255,255,.09); }
.contact-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem .9rem; text-decoration: none; color: #fff;
  border-radius: 10px;
  transition: background .22s var(--ease), padding-left .22s var(--ease);
}
.contact-links a:hover { background: rgba(255,255,255,.06); padding-left: 1.4rem; }
.cl-label { display: flex; flex-direction: column; gap: .22rem; }
.cl-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.cl-v {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.015em; color: #fff;
}
.cl-arrow {
  color: rgba(255,255,255,.4); flex: none;
  transition: transform .22s var(--ease), color .22s var(--ease);
}
.contact-links a:hover .cl-arrow { transform: translateX(4px); color: #C4B5FD; }

/* Glass note card */
.side-note {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 1.6rem 1.7rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-top: 2rem;
}
.side-note h3 { font-size: 1.02rem; margin-bottom: .6rem; color: #fff; }
.side-note p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.6); margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { background: var(--navy); color: #94A3B8; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.foot-top {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;
  justify-content: space-between; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.foot-brand { display: inline-flex; align-items: baseline; gap: .7rem; text-decoration: none; }
.foot-brand .brand-name { font-size: 21px; }
.foot-brand .brand-rule { background: rgba(255,255,255,.18); }
.foot-brand .brand-role { color: #94A3B8; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.foot-nav a { font-size: 14px; text-decoration: none; color: #CBD5E1; transition: color .18s var(--ease); }
.foot-nav a:hover { color: #fff; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; padding-top: 1.75rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: #94A3B8;
}
.foot-bot a { color: #94A3B8; text-decoration: none; }
.foot-bot a:hover { color: #fff; }

/* ==========================================================================
   Case study pages
   ========================================================================== */
.cs-hero {
  background: var(--tint); position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.cs-hero::before {
  content: ""; position: absolute; top: -40%; left: -8%;
  width: 55vw; height: 55vw; max-width: 640px; max-height: 640px;
  background: var(--grad); opacity: .10; filter: blur(90px); border-radius: 50%;
}
.cs-hero .wrap { position: relative; z-index: 1; }
.back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; margin-bottom: 1.75rem;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.back:hover { color: var(--signal); gap: .7rem; }
.cs-idx {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: transparent; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block; margin-bottom: .8rem;
}
.cs-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 900; letter-spacing: -.035em;
  max-width: 22ch; margin: 0 0 1.1rem;
}
.cs-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 62ch; margin: 0; }

.cs-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; margin-top: clamp(2.25rem, 4.5vw, 3rem);
  background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
@media (max-width: 780px) { .cs-meta { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .cs-meta { grid-template-columns: 1fr; } }
.cs-meta div { background: rgba(255,255,255,.78); padding: 1.05rem 1.2rem; }
.cs-meta dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: .35rem;
}
.cs-meta dd { margin: 0; font-size: 14.5px; color: var(--ink); font-weight: 500; }

/* The one line a skimming reader should not have to scroll for. */
.cs-outcome {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-top: .75rem; padding: 1rem 1.25rem;
  background: var(--grad-soft);
  border: 1px solid rgba(59,110,248,.18);
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  border-image-slice: 0 0 0 1; border-image-width: 0 0 0 3px;
  border-radius: 0 14px 14px 0;
}
.cs-outcome .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; flex: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .cs-outcome .k { color: var(--signal); -webkit-text-fill-color: var(--signal); }
}
.cs-outcome p {
  margin: 0; flex: 1; min-width: 15rem;
  font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.14rem);
  letter-spacing: -.015em; line-height: 1.35; color: var(--ink);
}
@media (max-width: 560px) { .cs-outcome { gap: .4rem; } }

/* Lead image band. Deliberately NOT `.sec` — that carried up to 8rem of bottom
   padding, which stacked with the body's top padding for ~180px of dead space
   between the shot and Overview. This halves it to ~90px. */
.cs-shot { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.cs-shot figure { margin: 0; }

/* Body */
.cs-body { padding: clamp(2.5rem, 4.5vw, 3.4rem) 0 clamp(3.5rem, 7vw, 6rem); }
.cs-body .wrap { max-width: 880px; }
.cs-body h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem); margin: clamp(2.75rem, 5vw, 4rem) 0 1.1rem;
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.cs-body > .wrap > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cs-body h3 { font-size: 1.15rem; margin: 2rem 0 .7rem; }
.cs-body p, .cs-body li { font-size: 1.05rem; }
.cs-body ul { padding-left: 1.35em; }
.cs-body ul li::marker { color: var(--signal); }

figure { margin: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
figure img {
  width: 100%; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: var(--sh-2); background: var(--alt);
}

/* ==========================================================================
   Inline video — UI recordings, muted, looping, plays when scrolled into view
   ========================================================================== */
.vid {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2); background: var(--alt);
  line-height: 0; cursor: zoom-in;
}
.vid-toggle { cursor: pointer; }
.vid video { width: 100%; height: auto; display: block; }

.vid-toggle, .vid-expand {
  position: absolute; z-index: 2;
  width: 34px; height: 34px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(11,17,32,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.vid-toggle { right: 12px; bottom: 12px; border-radius: 50%; }
.vid-expand { right: 12px; top: 12px; border-radius: 9px; }
.vid:hover .vid-toggle, .vid:hover .vid-expand,
.vid-toggle:focus-visible, .vid-expand:focus-visible { opacity: 1; transform: none; }
.vid-toggle:hover, .vid-expand:hover { background: var(--signal); }
/* swap glyph on state */
.vid-toggle .i-play  { display: none; }
.vid-toggle[data-playing="false"] .i-pause { display: none; }
.vid-toggle[data-playing="false"] .i-play  { display: block; }
/* when paused, keep the control visible — it's the only affordance */
.vid-toggle[data-playing="false"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vid-toggle { opacity: 1; transform: none; }
}

/* --- Zoom trigger wrapping every case study image --- */
.fig-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.fig-zoom img { transition: transform .45s var(--ease), box-shadow .35s var(--ease); }
.fig-zoom:hover img { transform: translateY(-2px); box-shadow: var(--sh-3); }
/* expand affordance */
.fig-zoom::after {
  content: "";
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 9px;
  background:
    rgba(11,17,32,.72)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 1h5v5M6 14H1V9M14 1 9 6M1 14l5-5'/%3E%3C/svg%3E")
    center / 15px 15px no-repeat;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.fig-zoom:hover::after, .fig-zoom:focus-visible::after { opacity: 1; transform: scale(1); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(8,12,22,.93);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity .32s var(--ease), visibility 0s linear .32s;
}
.lb[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .32s var(--ease), visibility 0s linear 0s;
}
.lb::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%,   rgba(59,110,248,.20) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 100%, rgba(124,58,237,.18) 0%, transparent 62%);
}

/* Top bar */
.lb-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 1.75rem);
}
.lb-count {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-light); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lb-of { color: rgba(255,255,255,.34); -webkit-text-fill-color: rgba(255,255,255,.34); }
.lb-study {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
  margin-left: auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Stage */
.lb-stage {
  position: relative; z-index: 2; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(.75rem, 5vw, 4.5rem);
}
.lb-figure {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  min-height: 0;
}
.lb-img {
  max-width: 100%; max-height: 74vh; width: auto; height: auto;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  background: #0B1120; object-fit: contain;
  opacity: 0; transform: scale(.985);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.lb[data-ready="true"] .lb-img { opacity: 1; transform: none; }
.lb-vid { object-fit: contain; }
.lb-img[hidden] { display: none; }

/* Video entries in the thumbnail rail get a play badge */
.lb-thumb.is-video { position: relative; }
.lb-thumb.is-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    rgba(11,17,32,.35)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23fff'%3E%3Cpath d='M3 1.5v11l9-5.5z'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
.lb-cap {
  /* margin-top:0 — the generic `figcaption` rule adds .8rem, which would
     double up with the .lb-figure flex gap */
  margin-top: 0;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; letter-spacing: .03em;
  color: rgba(255,255,255,.55); text-align: center; max-width: 62ch;
}

/* Controls */
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 3;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.09); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .22s var(--ease), transform .22s var(--ease),
              border-color .22s var(--ease), opacity .22s var(--ease);
}
.lb-btn:hover {
  background: var(--grad); border-color: transparent;
  transform: translateY(-50%) scale(1.07);
}
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb-btn[hidden] { display: none; }

.lb-close {
  width: 38px; height: 38px; border-radius: 10px; flex: none; cursor: pointer;
  display: grid; place-items: center; margin-left: .25rem;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.lb-close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }

/* Thumbnail rail */
.lb-rail {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  /* Centring an overflowing scroll container pushes the leading thumbnails
     into overflow that cannot be scrolled back to, so centre only when the
     rail actually fits. Older engines keep the flex-start fallback. */
  justify-content: flex-start;
  justify-content: safe center;
  padding: 1rem clamp(1rem, 3vw, 1.75rem) 1.35rem;
  scroll-padding-inline: clamp(1rem, 3vw, 1.75rem);
  overflow-x: auto; scrollbar-width: none;
}
.lb-rail::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: none; width: 62px; height: 40px; padding: 0; cursor: pointer;
  border-radius: 7px; overflow: hidden; background: #0B1120;
  border: 1px solid rgba(255,255,255,.12); opacity: .42;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .8; transform: translateY(-2px); }
.lb-thumb[aria-current="true"] {
  opacity: 1; border-color: #A5B4FC;
  box-shadow: 0 0 0 1px #A5B4FC, 0 6px 18px rgba(59,110,248,.35);
}

body.lb-open { overflow: hidden; }

@media (max-width: 640px) {
  .lb-btn { width: 40px; height: 40px; }
  .lb-img { max-height: 62vh; }
  .lb-study { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img, .lb-btn, .lb-thumb, .fig-zoom img { transition-duration: .01ms !important; }
  .lb-close:hover { transform: none; }
  .lb-btn:hover { transform: translateY(-50%); }
}
figcaption {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; letter-spacing: .03em;
  color: var(--ink-4); margin-top: .8rem; text-align: center;
}
.fig-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.9rem, 2vw, 1.5rem); margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
@media (max-width: 700px) { .fig-grid { grid-template-columns: 1fr; } }
.fig-grid figure { margin: 0; }

.role-list { list-style: none; padding: 0; margin: 0; }
.role-list li { position: relative; padding-left: 1.75rem; margin-bottom: .85rem; font-size: 1.02rem; }
.role-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--grad);
}
.outcomes {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin: 2rem 0;
}
@media (max-width: 700px) { .outcomes { grid-template-columns: 1fr; } }
.outcome { background: var(--white); padding: 1.5rem 1.4rem; }
.outcome-n {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em;
  line-height: 1; margin-bottom: .5rem;
}
.outcome-l { font-size: 14px; color: var(--ink-3); }

.callout {
  background: var(--grad-soft); border: 1px solid rgba(59,110,248,.16);
  border-radius: 14px; padding: 1.5rem 1.7rem; margin: 2rem 0;
}
.callout p { margin: 0; color: var(--ink); }
.callout .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--signal); display: block; margin-bottom: .5rem;
}

/* Prev / next */
.cs-nav { border-top: 1px solid var(--line); background: var(--alt); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.cs-nav-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
@media (max-width: 700px) { .cs-nav-grid { grid-template-columns: 1fr; } }
.cs-nav a {
  position: relative; display: block; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; padding: 1.35rem 1.5rem;
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cs-nav a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.cs-nav .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); display: block; margin-bottom: .45rem;
}
.cs-nav .t {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -.015em;
}
.cs-nav .next { text-align: right; }
.cs-nav .next:only-child { grid-column: 2; }

/* ==========================================================================
   Sticky section rail — case study navigation
   ========================================================================== */
.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: none; flex-direction: column; gap: 2px;
  padding: 10px 8px; border-radius: 14px;
  background: rgba(255,255,255,.72); border: 1px solid var(--line-soft);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sh-1);
}
@media (min-width: 1200px) { .rail { display: flex; } }

.rail a {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 22px; padding: 0 4px; text-decoration: none; cursor: pointer;
}
/* the tick */
.rail a::before {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink-4); opacity: .5;
  transition: width .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.rail a:hover::before { width: 28px; opacity: 1; background: var(--ink-2); }
.rail a[aria-current="true"]::before {
  width: 28px; opacity: 1; background: var(--grad);
}

/* hover label */
.rail a::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: #fff; background: rgba(11,17,32,.92);
  padding: .38rem .6rem; border-radius: 7px;
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: var(--sh-2);
}
.rail a:hover::after, .rail a:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.rail-top {
  margin-bottom: 6px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); text-align: right;
}

/* ==========================================================================
   Resume
   ========================================================================== */
.resume-shell { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem); }
.resume-shell .wrap { max-width: 820px; }

.resume-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .8rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}

.r-masthead h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900;
  letter-spacing: -.035em; margin: 0 0 .8rem;
}
.r-subtitle {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em;
  color: var(--ink-3); margin: 0 0 1.4rem;
}
.r-contact {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.r-contact li { margin: 0; }
.r-contact a { text-decoration: none; border-bottom: 1px solid var(--line); }
.r-contact a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.r-lead { padding-top: 2.25rem; }
.r-lead p { font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.6; color: var(--ink); }
.r-lead .coda { font-size: .97rem; line-height: 1.7; color: var(--ink-3); }
.r-thesis {
  margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.025em; line-height: 1.25;
}

.r-block { padding-top: 3.25rem; }
.r-eyebrow {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.75rem;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.r-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.role { padding-bottom: 2.1rem; }
.role:last-child { padding-bottom: 0; }
.role-head { display: flex; align-items: baseline; gap: .75rem; }
.role-org {
  margin: 0; font-family: var(--display); font-size: 1.24rem; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.2;
}
.role-head .rule {
  flex: 1; height: 1px; min-width: 1rem; background: var(--line);
  transform: translateY(-.3em);
}
.role-dates {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.role-title {
  margin: .5rem 0 .9rem; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; display: inline-block;
}
@supports not (background-clip: text) {
  .role-title { color: var(--signal); -webkit-text-fill-color: var(--signal); }
}
.work { margin: 0; padding: 0; list-style: none; }
.work li {
  position: relative; padding-left: 1.4rem; margin-bottom: .55rem;
  font-size: .95rem; line-height: 1.62; color: var(--ink-2);
}
.work li:last-child { margin-bottom: 0; }
.work li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .6rem; height: 1px; background: var(--ink-4);
}
.artifact { font-weight: 700; color: var(--ink); }
/* A shade under --signal: as bold body text this needs 4.5:1, and the
   brand blue lands at 4.40 on white. The ring/accent uses stay on --signal. */
.metric { font-weight: 700; color: #3A6CF3; }

.r-skills { margin: 0; display: grid; gap: 1.15rem; }
.r-skills dt {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  margin-bottom: .3rem;
}
.r-skills dd { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--ink-2); }
.r-degree { margin: 0; font-size: .98rem; }
.r-degree strong { font-weight: 700; }
.r-degree span { color: var(--ink-3); }

/* ==========================================================================
   /system — design tokens colophon
   ========================================================================== */
/* Reference page — denser than the narrative pages by intent.
   Vertical rhythm is ~40% tighter than the case study body. */
.sys-body { padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem); }
.sys-block { padding-top: clamp(1.75rem, 3vw, 2.6rem); }
.sys-block > h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  padding-bottom: .6rem; margin-bottom: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.sys-block > h3 { margin-bottom: .6rem !important; }
.sys-note { font-size: .96rem; color: var(--ink-3); max-width: 62ch; margin: 0 0 1.05rem; }
.sys-block .swatches { margin-bottom: 1.2rem !important; }
.sys-block .btn-row { margin-top: 1.1rem !important; }
.sys-block p + p { margin-top: -.2em; }

.swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.swatch { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.swatch .chip { height: 68px; }
.swatch .meta { padding: .7rem .8rem .8rem; }
.swatch .nm { font-family: var(--mono); font-size: 11px; color: var(--ink); letter-spacing: .04em; }
.swatch .hx {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
  margin-top: .2rem; text-transform: uppercase;
}

.scale { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.scale-row {
  background: #fff; padding: 1rem 1.2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
}
.scale-row .spec {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
  letter-spacing: .08em; white-space: nowrap; flex: none;
}
.scale-row .sample { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: var(--ink); min-width: 0; overflow: hidden; }

.spec-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.spec-table th, .spec-table td {
  text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.spec-table th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); background: var(--alt); font-weight: 500;
}
.spec-table td:first-child { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.spec-table tr:last-child td { border-bottom: 0; }

.sys-demo {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 1.75rem; border: 1px dashed var(--line);
  border-radius: 14px; background: var(--alt);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
    /* Zeroing duration alone is not enough. The hero staggers its entrance
       with delays up to .55s, and `animation-fill-mode: both` holds the
       from-state (opacity 0) for the whole delay — so reduced-motion users
       still got a blank hero, just a briefer one. */
    animation-delay: 0s !important; transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .org-track { animation: none; }
  .progress { display: none; }
}

/* ==========================================================================
   Print — tuned so Cmd+P on /resume produces a clean two-page letter PDF
   ========================================================================== */
@media print {
  @page { size: letter; margin: .5in .6in; }

  .site-head, .site-foot, .cs-nav, .btn-row, .progress,
  .orgs, .rail, .no-print, .skip { display: none !important; }

  /* Scroll reveals are opacity:0 until the observer fires. Printing never
     scrolls, so every role below the fold would come out blank on paper. */
  .reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  html, body { background: #fff !important; color: #000; font-size: 10.2pt; line-height: 1.44; }
  .card, figure img { box-shadow: none; }

  /* Resume-specific pagination */
  .resume-shell { padding: 0; }
  .resume-shell .wrap { max-width: none; padding: 0; }
  .resume-bar { display: none; }
  .r-masthead h1 { font-size: 26pt; }
  .r-subtitle { font-size: 8.6pt; margin-bottom: .8rem; }
  .r-contact { font-size: 8.6pt; }
  .r-lead { padding-top: .9rem; }
  .r-lead p { font-size: 10.6pt; }
  .r-thesis { font-size: 12pt; margin-top: .9rem; padding-top: .7rem; }
  .r-block { padding-top: 1.15rem; }
  .r-eyebrow { margin-bottom: .7rem; }
  .role { padding-bottom: .8rem; break-inside: avoid; page-break-inside: avoid; }
  .role-org { font-size: 12.5pt; }
  .work li { margin-bottom: .14rem; font-size: 9.6pt; }
  .r-skills { gap: .5rem; }
  .r-skills dd { font-size: 9.4pt; }

  /* Gradient text has no ink value on paper */
  .role-title, .grad-text, .brand-name, .r-thesis {
    background: none !important;
    -webkit-text-fill-color: #0B5D63 !important;
    color: #0B5D63 !important;
  }
  .metric { color: #0B5D63 !important; }

  a { text-decoration: none; border-bottom: none; color: #000; }
  a[href^="http"]::after { content: ""; }
  .r-contact a::after { content: ""; }
}