:root {
  /* Landing/about exception palette — design-system.md §9.2 */
  --bg: #fdf8f0;
  --ink: #16181d;
  --gray: #6b7280;
  --gray-dark: #4b4f58;
  --yellow: #ee964b;
  --black: #111214;
  --white: #ffffff;
  --nav-h: 48px;

  /* Typography — design-system.md §3 (applies site-wide, no exception) */
  --font-display: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", -apple-system, "Segoe UI", sans-serif;

  --text-display: clamp(2.75rem, 1.5rem + 5.2vw, 5rem);
  --text-h1: clamp(2.25rem, 1.5rem + 3.0vw, 3.5rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem);
  --text-h3: clamp(1.375rem, 1.18rem + 0.8vw, 1.6875rem);
  --text-h4: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-body: 1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.875rem;
  --text-eyebrow: 0.8125rem;
  --text-micro: 0.6875rem; /* interview-insight card labels */
  --text-metric: clamp(2.5rem, 1.8rem + 3.0vw, 3.75rem);
  --text-num-lg: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); /* case-study row numbering */

  --leading-display: 1.0;
  --leading-tight: 1.10;
  --leading-snug: 1.35;
  --leading-relaxed: 1.5;
  --leading-body: 1.72;

  --tracking-display: -0.022em;
  --tracking-tight: -0.014em;
  --tracking-normal: 0em;
  --tracking-accent: 0.09em;

  /* Layout — design-system.md §4 (applies site-wide, no exception) */
  --measure: 52rem;
  --measure-wide: 72rem; /* docs/landing-structure-update.md §0b — card grids only */
  --page-gutter: clamp(1.25rem, 5vw, 3rem);
  --rail-width: 8rem; /* design-system.md §4.1 — case-study side nav rail */
  --rail-gap: 2.5rem;

  /* Elevation — docs/landing-structure-update.md §0a */
  --shadow-card: 0 1px 2px rgb(26 23 20 / .05),
                 0 6px 20px rgb(26 23 20 / .07);
  --shadow-card-hover: 0 2px 4px rgb(26 23 20 / .06),
                       0 14px 32px rgb(26 23 20 / .11);

  /* design-system.md §9.2 names, aliased to the tokens above (no value change) */
  --landing-bg: var(--bg);
  --landing-ink: var(--ink);
  --landing-gray: var(--gray);
  --landing-gray-dark: var(--gray-dark);
  --landing-accent: var(--yellow);
  --landing-black: var(--black);
  --landing-white: var(--white);

  /* Color — design-system.md §2.1 (applies site-wide, no exception) */
  --color-paper: #ffffff;
  --color-paper-sunken: #faf8f6;
  --color-line: #e9e5e0;
  --color-line-strong: #d5cfc7;
  --color-ink: #1a1714;
  --color-ink-secondary: #4a443d;
  --color-ink-muted: #7c7469;
  --color-brand: #ee964b;
  --color-brand-ink: #b25a14;
  --color-brand-soft: #fdf1e6;
  --color-teal: #1f6f63;
  --color-teal-soft: #e7f1ef;
  --color-focus: #b25a14;
}

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

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* About page only — the top (.about-hero-wrap) carries its own cream-to-
   white gradient, so the body base just needs to be the white it fades
   into for the sections below. */
body.about-page {
  background: var(--color-paper);
}

/* Matches where "Case Studies" lands when Work is clicked from the landing
   page (.work-white's own top padding), so the two pages' headings sit at
   the same height. */
body.about-page .page-intro {
  padding-top: 7.75rem;
}

a { text-decoration: none; color: inherit; }
button { font: inherit; border: none; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}

/* ---------- Navbar ---------- */

.navbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 6;
  padding: 18px var(--page-gutter);
}

.nav-inner {
  /* spans the full navbar (inset only by its page-gutter padding) so the
     logo and icon sit toward the viewport edges instead of --measure's
     narrower reading width */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* explicit column placement: .nav-pill is position:fixed and out of grid
   flow, so auto-placement would otherwise slide .nav-actions into the
   middle column instead of the right one */
.nav-brand { grid-column: 1; justify-self: start; }
.nav-actions { grid-column: 3; justify-self: end; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo {
  width: var(--nav-h);
  height: var(--nav-h);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
  object-fit: cover;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--gray-dark);
}

.nav-pill {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
}

.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: #4b4f58;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-link:hover { color: var(--ink); }

.nav-link.active {
  background: var(--yellow);
  color: var(--black);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-h);
  height: var(--nav-h);
  background: var(--yellow);
  color: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
  transition: transform 0.15s ease;
}

.btn-linkedin:hover { transform: translateY(-2px); }

.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--nav-h);
  height: var(--nav-h);
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
}

.nav-burger span {
  width: 20px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  width: 200px;
  padding: 0 8px;
  max-height: 0;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
  box-sizing: border-box;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

/* Padding only applies once open — at max-height:0 it left a persistent
   sliver visible even "closed", since Chrome doesn't collapse padding
   along with a max-height clamp the way it does ordinary content. */
.mobile-menu.open { padding: 4px 8px; }

.mobile-menu.open {
  max-height: 240px;
}

.mobile-link {
  position: relative;
  padding: 14px 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

/* Inset from the link's own padding edges (shorter than full-bleed) and
   skipped on the last item — no divider needed below "About". */
.mobile-link:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  border-bottom: 1px solid rgba(17, 18, 20, 0.05);
}

.mobile-link.active { color: var(--black); font-weight: 700; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center; /* without this, the two auto rows stretch to fill
    the hero and each child centers inside its own oversized row instead of
    the headline+copy centering together as one compact block */
  padding: 6.5rem 0 5.75rem; /* top clears the header, bottom clears the scroll cue */
  overflow: hidden;
  color: var(--landing-ink);

  background: linear-gradient(
    to bottom,
    var(--landing-bg) 0%,
    var(--landing-bg) 72%,
    var(--color-paper) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 5;
  /* text column stays exactly --measure wide, as before — the page-gutter
     padding here is only a narrow-viewport safety margin, not a width cut */
  max-width: calc(var(--measure) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  text-align: center;
}

.hero h1 {
  /* --text-display is documented as hero-only at 44→80px (design-system.md §3.2);
     using --text-h1 (36→56px) instead — still an existing design-system token,
     just the next size down, no new value introduced */
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* ---------- Generic page intro (non-hero pages, e.g. about.html) ---------- */
/* Top padding matches .hero's so content clears the absolutely-positioned navbar. */

.page-intro {
  padding: 6.5rem 0 4rem;
  text-align: center;
}

.page-intro h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* ---------- About page: hero gradient (mirrors .hero's cream-to-white fade) ---------- */

.about-hero-wrap {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 55%, white) 0%,
    color-mix(in srgb, var(--bg) 55%, white) 65%,
    var(--color-paper) 100%
  );
}

/* ---------- About page: photo stack + intro (side by side) ---------- */

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 0.5rem 3rem;
}

.photo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}

.photo-stack-item {
  position: relative;
  width: 92%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 4px solid var(--color-paper);
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-brand-soft);
  box-shadow: var(--shadow-card);
  color: var(--color-ink-muted);
  display: grid;
  place-items: center;
  rotate: var(--rot);
  translate: var(--shift, 0) 0;
  cursor: pointer;
  margin-top: -2.75rem;
  transition: rotate 220ms cubic-bezier(.22,.61,.36,1),
              translate 220ms cubic-bezier(.22,.61,.36,1),
              scale 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms ease;
}

.photo-stack-item:first-child { margin-top: 0; }

.photo-stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-stack-item.is-front {
  rotate: 0deg;
  scale: 1.06;
  translate: 0 -0.625rem;
  box-shadow: var(--shadow-card-hover);
}

/* ---------- About page: intro card ---------- */

.intro-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
}

.intro-card-dot {
  display: block;
  width: 2.25rem;
  height: 4px;
  border-radius: 999px;
  background: var(--yellow);
  margin-bottom: 1.25rem;
}

.intro-card h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: 1.125rem;
}

.intro-card p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-secondary);
  margin: 0 0 1rem;
}

.intro-card p:last-child { margin-bottom: 0; }

/* ---------- About page: education + career ---------- */

.education-wrap { padding-block: 1rem 3rem; }
.timeline-wrap { padding-block: 1rem 4rem; }

.section-head { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.section-head h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.education-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.education-item {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.education-item h3 {
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-ink);
}

.education-major {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-secondary);
}

.education-location {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-muted);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-item {
  display: grid;
  /* fixed first-column width, not minmax() — each <li> is its own grid
     container, so a content-sized track resolves to a different width per
     row (short "2026" vs. "May – Aug 2022"), throwing the dot/rail out of
     alignment between rows and making the connecting line look broken */
  grid-template-columns: 6.5rem 2rem 1fr;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-date-col { padding-top: 0.1875rem; }

.timeline-date {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-brand-ink);
}

.timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: var(--color-line);
}

.timeline-item:first-child .timeline-rail::before { top: 0.5625rem; }
.timeline-item:last-child .timeline-rail::before { bottom: calc(100% - 0.5625rem); }

.timeline-dot {
  position: relative;
  z-index: 1;
  margin-top: 0.1875rem;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-line-strong);
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.timeline-body h3 {
  margin: 0 0 0.25rem;
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-ink-muted);
  transition: color 240ms ease;
}

.timeline-org {
  margin: 0 0 0.5rem;
  font-size: var(--text-body-sm);
  color: var(--color-ink-muted);
}

.timeline-body p:last-child {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  transition: color 240ms ease;
}

.timeline-item.is-active .timeline-dot {
  background: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px var(--color-brand-soft);
}

.timeline-item.is-active .timeline-body h3 { color: var(--color-ink); }

.timeline-item.is-active .timeline-org,
.timeline-item.is-active .timeline-body p:last-child {
  color: var(--color-ink-secondary);
}

.hero-copy {
  position: relative;
  z-index: 5;
  max-width: calc(var(--measure) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  text-align: center;
  margin-block: 44px 64px;
}

.highlight {
  position: relative;
  display: inline-block;
  color: var(--yellow);
}

.highlight .wavy {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 10px;
}

.highlight .wavy path {
  stroke: var(--yellow);
  stroke-width: 3;
  stroke-linecap: round;
}

.subtitle {
  color: var(--gray-dark);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  margin: 0 0 44px;
}

.mobile-break { display: none; }

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 400;
  font-size: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--yellow);
  color: var(--black);
}

.btn-secondary {
  background: var(--white);
  color: var(--black);
  box-shadow: 0 4px 16px rgba(17, 18, 20, 0.06);
}

.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 18, 20, 0.1);
}

/* ---------- Scroll cue ---------- */

.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;

  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-decoration: none;
}

.scroll-cue svg { animation: nudge 2.2s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0);        opacity: .4; }
  50%      { transform: translateY(.375rem);  opacity: 1; }
}

/* ---------- Floating icon bubbles ---------- */

.hero-icons {
  position: absolute;
  /* matches .hero's own padding, so top:%/bottom:% on bubbles clears the
     header/scroll-cue instead of measuring against the full hero box */
  top: 6.5rem;
  right: 0;
  bottom: 5.75rem;
  left: 0;
}

.icon-bubble {
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  animation: float var(--duration, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  z-index: 3;
}

.icon-bubble.active {
  animation-play-state: paused;
  z-index: 11;
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-14px); }
}

.bubble-circle {
  width: clamp(3.25rem, 5.1vw, 4.6875rem);   /* docs/landing-structure-update.md §2 size */
  height: clamp(3.25rem, 5.1vw, 4.6875rem);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.125rem, 3.4vw, 3.125rem);   /* 34 → 50px, docs/landing-structure-update.md §2 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.bubble-circle:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 8px 12px rgba(17, 18, 20, 0.18));
}

.bubble-icon-img {
  /* Color emoji glyphs (piano, etc.) render with much more visual ink than
     their nominal font-size box, so this is sized up from .bubble-circle's
     font-size to read as the same size on screen. */
  height: clamp(2.3rem, 3.68vw, 3.4rem);
  width: auto;
  display: block;
}

.bubble-icon-svg {
  height: clamp(1.75rem, 2.7vw, 2.5rem);
  width: auto;
  display: block;
  color: var(--landing-accent);
}

.icon-bubble.active .bubble-circle {
  transform: scale(1.1);
  filter: drop-shadow(0 8px 12px rgba(17, 18, 20, 0.18));
}

/* Speech-bubble tooltip */

.bubble-tooltip {
  position: absolute;
  top: 50%;
  min-width: 210px;
  max-width: 250px;
  background: var(--white);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 12px 30px rgba(17, 18, 20, 0.14);
  z-index: 10;
}

.bubble-tooltip strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--ink);
}

.bubble-tooltip p { margin: 0; color: var(--gray); }

.icon-bubble.active .bubble-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.bubble-circle[data-tooltip-pos="right"] ~ .bubble-tooltip {
  left: calc(100% + 16px);
}
.bubble-circle[data-tooltip-pos="left"] ~ .bubble-tooltip {
  right: calc(100% + 16px);
  left: auto;
}
.bubble-circle[data-tooltip-pos="bottom"] ~ .bubble-tooltip {
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
}
.icon-bubble.active .bubble-circle[data-tooltip-pos="bottom"] ~ .bubble-tooltip {
  transform: translateX(-50%) scale(1);
}

/* Speech-bubble arrow */
.bubble-tooltip::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--white);
}

.bubble-circle[data-tooltip-pos="right"] ~ .bubble-tooltip::after {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.bubble-circle[data-tooltip-pos="left"] ~ .bubble-tooltip::after {
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.bubble-circle[data-tooltip-pos="bottom"] ~ .bubble-tooltip::after {
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- Work (Case Studies + Contact) ---------- */

.work {
  --w-panel: #ffffff;
  --w-border: #ece2d2;
  --w-ink: #1a1714;
  --w-body: #4a443d;
  --w-muted: #7c7469;
  --w-accent: #b25a14;
  --w-orange: #ee964b;
  --w-orange-hover: #e5842f;
  --w-green: #1f6f63;
  --w-red: #b3432f;
  --w-sub-bg: #fbf6ec;

  color: var(--w-body);
  scroll-margin-top: 24px;
}

.work h2, .work h3 {
  color: var(--w-ink);
}

.work-white {
  background: var(--color-paper);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 12vw, 8.75rem);
}

.work-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.work-head h1,
.work-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);          /* not --text-h2 — outweighs the scroll cue above it */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.case {
  display: block;
  background: var(--color-paper);
  border-radius: 1rem;
  padding: 0.875rem 0.875rem 1.5rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 180ms cubic-bezier(.22,.61,.36,1),
              transform  180ms cubic-bezier(.22,.61,.36,1);
}

.case:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* Not a link — just previews an upcoming case study. */
.case.is-soon { cursor: default; }
.case.is-soon:hover { box-shadow: var(--shadow-card); transform: none; }

.thumb-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-paper) 85%, transparent);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 0.625rem;
  background: var(--color-brand-soft);
  margin-bottom: 1.25rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Full-bleed screenshot thumbs (e.g. hero-image reuse) crop badly at 3:2 —
   show the whole image centered instead of covering and cutting off the
   edges. Plain paper bg, not the shared brand-soft one: two case cards
   sitting side by side on the same orange tint read as near-duplicates. */
.thumb.is-contain {
  background: var(--color-paper);
}

.thumb.is-contain img {
  object-fit: contain;
  object-position: center;
  transform: scale(var(--thumb-zoom, 1));
}

.case-body { padding-inline: 0.625rem; }

.tags { display: flex; gap: 0.4375rem; flex-wrap: wrap; margin-bottom: 0.9375rem; }

.tag {
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: var(--color-brand-soft);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-ink-muted);
  line-height: 1;
}

.case h3 {
  margin: 0 0 0.625rem;
  padding-left: 0.6875rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.case p {
  margin: 0;
  padding-left: 0.6875rem;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-secondary);
}

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

.contact {
  border-top: 1px solid var(--w-border);
  background: var(--w-sub-bg);
  padding: 80px var(--page-gutter) 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  scroll-margin-top: 24px;
}

.contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: var(--measure);
}

.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--w-muted);
}

.contact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--w-green);
}

.contact-head h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.contact-head p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
}

.contact-form {
  width: 100%;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field span {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--w-muted);
}

.field input,
.field textarea {
  padding: 13px 16px;
  border: 1px solid var(--w-border);
  border-radius: 10px;
  background: var(--w-panel);
  font-size: var(--text-body);
  font-family: inherit;
  color: var(--w-ink);
  outline: none;
  transition: border-color 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--w-muted);
}

.field textarea { resize: vertical; line-height: 1.6; }

.field input:focus,
.field textarea:focus {
  border-color: var(--w-accent);
}

.field-full { grid-column: 1 / -1; }

.contact-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.contact-submit {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--w-orange);
  color: #1a1714;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(.2,0,0,1);
}

.contact-submit:hover {
  background: var(--w-orange-hover);
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form-message {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: 600;
  min-height: 1.2em;
}

.contact-form-message.is-success { color: var(--w-green); }
.contact-form-message.is-error { color: var(--w-red); }

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

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
  padding: 40px var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.footer-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-tagline {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-secondary);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-links a {
  display: flex;
  color: var(--color-ink-muted);
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--color-ink);
}

.footer-copyright {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* ---------- Case study pages (e.g. urcareer.html) ---------- */
/* design-system.md §9.1 — case studies follow §2–5 with no exception, so
   these components use the standard sitewide palette (orange brand, used
   sparingly, plus neutral ink) rather than a bespoke per-project accent —
   every case study should read as one system, not each with its own hue. */

body.case-page {
  background: var(--color-paper);
  color: var(--color-ink-secondary);
}

.cs-casenav {
  display: none;
  position: fixed;
  top: 22vh;
  z-index: 40;
  width: var(--rail-width);
  right: calc(50% + (var(--measure) + 2 * var(--page-gutter)) / 2 + var(--rail-gap));
}

@media (min-width: 1300px) {
  .cs-casenav { display: block; }
}

.cs-casenav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-casenav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  transition: color 260ms cubic-bezier(.65,0,.35,1);
}

.cs-casenav a::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--color-line-strong);
  flex: none;
  transition: all 260ms cubic-bezier(.65,0,.35,1);
}

.cs-casenav a:hover { color: var(--color-ink); }
.cs-casenav a.is-active { color: var(--color-brand-ink); }
.cs-casenav a.is-active::before { width: 26px; background: var(--color-brand); }

.cs-hero { padding-top: 7.75rem; padding-bottom: 2.5rem; }

.cs-hero .tags { margin-bottom: 1.5rem; }

.cs-hero-title {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.cs-lead {
  margin-top: 1.5rem;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-ink-secondary);
}

.cs-figure { margin: 0; }

.cs-frame {
  border: 1px solid var(--color-line);
  border-radius: 1.125rem;
  overflow: hidden;
  background: var(--color-paper-sunken);
  position: relative;
}

.cs-frame img { display: block; width: 100%; height: auto; }

.cs-hero-img { display: block; width: 100%; height: auto; }

/* Stand-in for a figure whose real asset isn't ready yet — same frame,
   a plain label instead of an image. */
.cs-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-muted);
}

.cs-frame-embed { padding: 0; }
.cs-frame-embed iframe { display: block; width: 100%; height: min(70vh, 640px); border: 0; }

.cs-video { position: relative; overflow: hidden; }

/* Source export has a hairline dark column baked into its right edge —
   scale past the frame by a hair and let the wrapper's overflow clip it,
   rather than re-encoding. */
.cs-video-el { display: block; width: 101%; height: auto; }

.cs-video-pp {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: color-mix(in srgb, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 180ms cubic-bezier(.22,.61,.36,1),
              background 180ms cubic-bezier(.22,.61,.36,1);
}

.cs-video-pp:hover { background: var(--color-paper); transform: scale(1.06); }
.cs-video-pp svg { display: block; width: 14px; height: 14px; }

.cs-figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}

.cs-meta-strip {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.cs-meta-strip.is-tri { grid-template-columns: 1.4fr 1.1fr 0.8fr; }
@media (max-width: 640px) { .cs-meta-strip.is-tri { grid-template-columns: 1fr; } }

.cs-meta-strip dt {
  margin-bottom: 0.5rem;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-muted);
}

.cs-meta-strip dd {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.cs-block {
  padding-bottom: clamp(4.5rem, 8vw, 8rem);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  scroll-margin-top: 6rem;
}

/* Reset first — the browser default UA margin-bottom on <p> was never
   overridden, so it stacked on top of each box's own bottom padding and
   made the space under the text look bigger than the space above it.
   Placed here (same specificity as the more specific rules below) so
   source order lets those still set their own margin-top afterward. */
.cs-block p { margin: 0; }

.cs-block:first-of-type { padding-top: clamp(4.5rem, 8vw, 8rem); }

.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.cs-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-line-strong);
  flex: none;
}

/* Sub-item numbering (e.g. "1-1") reads better as a bare label —
   the leading rule is sized for section-level eyebrows. */
.cs-eyebrow.is-plain::before { content: none; }

h2.cs-sec {
  margin-top: 1rem;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.cs-block > p { margin-top: 1.5rem; }

.cs-insightbox-standalone { margin-top: 1.5rem; }

.cs-sub { margin-top: clamp(2.25rem, 4vw, 3.5rem); }

.cs-sublabel {
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-secondary);
}

.cs-sub h3 {
  margin-top: 0.75rem;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.cs-sub h3 + p { margin-top: 1rem; }
.cs-sub .cs-figure { margin-top: 1.5rem; }
.cs-sub .cs-pull:first-of-type { margin-top: 2rem; }

.cs-insightgrid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

/* Grouped interview-insight cards: a sunken well (.cs-well) containing one
   heading + card-grid per theme. Cards default to plain paper/bordered;
   .is-brand marks the one insight per theme worth calling out. */
.cs-note-group + .cs-note-group { margin-top: 2rem; }

.cs-note-heading {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand-ink);
}

.cs-note-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 820px) { .cs-note-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cs-note-grid { grid-template-columns: 1fr; } }

.cs-note {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  padding: 1.25rem;
}

.cs-note.is-brand {
  background: var(--color-brand-soft);
  border-color: transparent;
}

.cs-note-label {
  display: block;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-muted);
  margin-bottom: 0.75rem;
}

.cs-note p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  margin: 0;
}

.cs-insightbox {
  padding: 1.5rem;
  background: var(--color-brand-soft);
  border-left: 3px solid var(--color-brand);
  border-radius: 0.875rem;
}

.cs-insightbox-n {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-brand-ink);
}

.cs-insightbox p { margin-top: 0.75rem; color: var(--color-ink); }
.cs-insightbox p:first-child { margin-top: 0; }

.cs-insightbox cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.cs-pull {
  margin: 2.5rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-line-strong);
}

.cs-pull p {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-brand-ink);
  margin: 0;
}

.cs-pull cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.cs-stats {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  overflow: hidden;
}

.cs-stat { padding: 1.5rem; border-right: 1px solid var(--color-line); }
.cs-stat:last-child { border-right: none; }

.cs-stat-label {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-muted);
}

.cs-stat-value {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  /* smaller ceiling than --text-metric — at the full 3.75rem, "11-19%" (the
     widest value in this row) wraps to two lines in a 3-column stat box */
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-brand-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cs-stat-context {
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}

.cs-tradeoffs {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.cs-tocol {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-paper);
}

.cs-tocard { padding: 1.25rem; }

.cs-tocard-lbl {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
}

.cs-tocard-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.cs-tocard.is-drop { background: var(--color-paper-sunken); }
.cs-tocard.is-drop .cs-tocard-lbl,
.cs-tocard.is-drop .cs-tocard-val { color: var(--color-ink-muted); }

/* One of the three "dropped" labels runs to two lines while the other two
   fit on one — reserve two lines' height on all of them so the "kept"
   card below starts at the same row across all three columns. */
.cs-tocard.is-drop .cs-tocard-val {
  min-height: calc(2 * var(--text-h4) * var(--leading-snug));
}

.cs-tocard.is-keep {
  background: var(--color-brand-soft);
  border-top: 1px solid var(--color-line);
  box-shadow: inset 3px 0 0 var(--color-brand);
}

.cs-tocard.is-keep .cs-tocard-lbl { color: var(--color-brand-ink); }
.cs-tocard.is-keep .cs-tocard-val { color: var(--color-ink); font-weight: 600; }

.cs-tocol p {
  margin: 0;
  padding: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-secondary);
}

.cs-solrow {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 2.75rem;
  align-items: start;
}

/* Video first (left, on the smaller track), text second (right) — flipped
   visually via order rather than DOM order, so reading/AT order still
   hits the description before the demo clip. */
.cs-solrow > .cs-figure { order: 1; }
.cs-solrow > div:first-child { order: 2; }

/* Cudagra only: text on the wide track (left), video on the narrow one
   (right) — natural DOM order, so no order flip needed here. */
.cs-solrow.is-reverse { grid-template-columns: 1fr 17rem; }
.cs-solrow.is-reverse > .cs-figure { order: 2; }
.cs-solrow.is-reverse > div:first-child { order: 1; }

.cs-solrow + .cs-solrow { margin-top: clamp(3rem, 6vw, 4.5rem); }

.cs-claim {
  margin-top: 1rem;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* Heading picks up the project accent here (scoped to solrow, not the
   shared .cs-claim used elsewhere); body gets a narrower measure so lines
   don't run the full (now-wider) text column, plus a bit more breathing
   room between eyebrow / heading / body. */
.cs-solrow .cs-claim { margin-top: 1.25rem; color: var(--color-brand-ink); }
.cs-solrow p { margin-top: 1.5rem; max-width: 32rem; }

.cs-grid-2 {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

/* These two are map thumbnails, not reading content — keep them side by
   side even on narrow screens so they read as a pair, not a repeat of the
   full map figures right below them. */
.cs-grid-2.is-maps { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) {
  .cs-grid-2.is-maps { gap: 0.625rem; }
  .cs-grid-2.is-maps .cs-card { padding: 0.875rem; }
}

.cs-maps-hint {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.cs-maps-hint svg { animation: nudge 2.2s ease-in-out infinite; }

.cs-closing { margin-top: 1.25rem; }

.cs-footnote {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}

.cs-grid-3 {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.cs-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  padding: 1.5rem;
}

.cs-card-num {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-brand-ink);
  letter-spacing: var(--tracking-accent);
}

.cs-card h4 {
  margin-bottom: 0.75rem;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* .cs-card-num used on an h4 (e.g. the map-picker cards) needs to win over
   the .cs-card h4 rule above, which otherwise outranks it (0,1,1 vs 0,1,0)
   and overwrites its color/font-size back to the plain heading look. */
.cs-card h4.cs-card-num {
  font-size: 1.375rem;
  color: var(--color-brand-ink);
}

/* Problems section only — its cards stand in for a missing image, so the
   heading also takes the accent and a bit more size (elsewhere just the
   card number is accented, at the shared, smaller .cs-card-num size). */
#problems .cs-card h4 { font-size: var(--text-lead); color: var(--color-brand-ink); }
#problems .cs-card-num { color: var(--color-ink-muted); }

.cs-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0.625rem;
  border: 1px solid var(--color-line);
  margin-bottom: 1rem;
}

.cs-card p { font-size: var(--text-body-sm); line-height: var(--leading-snug); }

.cs-more-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.75rem;
}

/* ---------- Case study: image placeholder (asset not delivered yet) ---------- */

.cs-ph {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: 1.125rem;
  background: var(--color-paper-sunken);
  color: var(--color-ink-muted);
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.8125rem;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- Case study: pan/zoom diagram viewer ---------- */

.cs-viewer {
  border: 1px solid var(--color-line);
  border-radius: 1.125rem;
  overflow: hidden;
  background: var(--color-paper-sunken);
}

.cs-vstage {
  position: relative;
  height: min(70vh, 620px);
  overflow: hidden;
  background: var(--color-paper-sunken);
  cursor: grab;
  touch-action: pan-y;
}

.cs-vstage.is-dragging { cursor: grabbing; }

.cs-vstage img,
.cs-vstage svg.cs-vmedia {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.cs-viewer.is-sub .cs-vstage { height: min(58vh, 460px); background: var(--color-paper); }

/* Floating zoom control, bottom-right of the stage — matches the pan/zoom
   widget already shipped in urcareer-precedents-matrix.html (−/slider/+,
   percent readout, Fit), reused here so every diagram viewer feels the same. */
.cs-vctrl {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: color-mix(in srgb, var(--color-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}

.cs-vctrl-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.5rem;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink-secondary);
  transition: background 180ms cubic-bezier(.20,0,0,1);
}

.cs-vctrl-btn:hover { background: var(--color-paper-sunken); }
.cs-vctrl-btn:active { background: var(--color-line); }

.cs-vctrl-fit {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-ink);
}

.cs-vctrl-pct {
  min-width: 2.75rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  color: var(--color-brand-ink);
  font-variant-numeric: tabular-nums;
}

.cs-vctrl-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 5.5rem;
  height: 2rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.cs-vctrl-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--color-line-strong); }
.cs-vctrl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 1px 3px rgba(26,23,20,.2);
  margin-top: -5px;
}
.cs-vctrl-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-line-strong); }
.cs-vctrl-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: var(--color-paper);
}

.cs-vhint {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  padding: 0.25rem 0.625rem;
  background: color-mix(in srgb, var(--color-paper) 85%, transparent);
  border-radius: 999px;
  font-family: var(--font-accent);
  font-size: 0.6875rem;
  color: var(--color-brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 700px) { .cs-vhint { display: none; } }
@media (max-width: 460px) { .cs-vctrl-slider { width: 3.5rem; } }

/* ---------- Case study: map + leverage-point overlay pairing ---------- */

.cs-mapset + .cs-mapset { margin-top: var(--space-section, clamp(4.5rem, 8vw, 8rem)); }

.cs-setnum {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-accent);
  text-transform: uppercase;
  color: var(--color-brand-ink);
}

.cs-derived {
  margin-top: 2.5rem;
  position: relative;
  padding-top: 2.5rem;
}

.cs-derived::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 2rem;
  background: var(--color-line-strong);
}

.cs-derived::after {
  content: "Overlay";
  position: absolute;
  top: calc(2rem - 0.7rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-paper);
  padding-inline: 0.75rem;
  font-family: var(--font-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink-muted);
}

.cs-well {
  background: var(--color-paper-sunken);
  border: 1px solid var(--color-line);
  border-radius: 1.125rem;
  padding: 2rem;
}

@media (max-width: 600px) { .cs-well { padding: 1.25rem; } }

.cs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 860px) { .cs-split { grid-template-columns: 1fr; gap: 1.5rem; } }

.cs-hypo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  align-content: start;
}

@media (max-width: 480px) { .cs-hypo { grid-template-columns: 1fr; } }

.cs-hypo-bubble {
  background: var(--color-paper-sunken);
  border: 1px solid var(--color-line);
  border-radius: 1.125rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.cs-hypo-bubble.is-brand {
  background: var(--color-brand-soft);
  border-color: transparent;
}

.cs-addlist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-addlist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.cs-addlist li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 0.35em;
  background: var(--color-ink-muted);
}

/* ---------- Case study: positive/negative comparison grid ---------- */

.cs-compare {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);
  gap: 0.75rem;
  align-items: stretch;
}

/* Stays a 3-column table at every width — cells just shrink — rather than
   collapsing to one column, which loses the positive/negative pairing that
   is the whole point of this comparison. */
@media (max-width: 640px) {
  .cs-compare { gap: 0.4rem; }
  .cs-compare-head { font-size: 0.6875rem; }
  .cs-compare-row { font-size: var(--text-caption); }
  .cs-compare-cell { padding: 0.625rem; font-size: var(--text-caption); }
}

.cs-compare-head {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  text-align: center;
}

.cs-compare-head.is-positive { color: var(--color-teal); }
.cs-compare-head.is-negative { color: var(--color-brand-ink); }

.cs-compare-row {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-accent);
  color: var(--color-ink);
  align-self: center;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.cs-compare-cell {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.cs-compare-cell.is-positive { background: var(--color-teal-soft); }
.cs-compare-cell.is-negative { background: var(--color-brand-soft); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* Full nav bar collapses to a burger menu; brand mark and pill nav hide. */
  .nav-brand,
  .nav-pill {
    display: none;
  }

  .nav-inner { grid-template-columns: 1fr; }

  /* Fixed (not absolute, like the rest of .navbar) so the burger and its
     menu — unlike the LinkedIn button — stay on screen while scrolling,
     the same way .nav-pill does on desktop. Pinned to the left since
     .nav-brand is hidden here and would otherwise leave that side empty. */
  .nav-burger {
    display: flex;
    position: fixed;
    top: 16px;
    left: var(--page-gutter);
    z-index: 50;
  }

  .mobile-menu {
    display: flex;
    position: fixed;
    top: calc(16px + var(--nav-h) + 8px);
    left: var(--page-gutter);
    z-index: 50;
  }

  /* top padding clears .navbar, which is position:absolute and overlaps the
     hero here too (~84px: 18px*2 padding + 48px burger) — 24px left the
     headline starting underneath it */
  .hero { min-height: auto; padding: 96px var(--page-gutter) 40px; align-items: stretch; }
  .page-intro { padding: 96px var(--page-gutter) 40px; }

  /* Case study page (urcareer.html) — clear the burger nav, then stack the
     components that assume desktop-width columns. */
  .cs-hero { padding-top: 96px; padding-bottom: 40px; }
  .cs-meta-strip { grid-template-columns: repeat(2, 1fr); }
  .cs-tradeoffs { grid-template-columns: repeat(2, 1fr); }
  .cs-stats { grid-template-columns: 1fr; }
  .cs-stat { border-right: none; border-bottom: 1px solid var(--color-line); }
  .cs-stat:last-child { border-bottom: none; }
  .cs-solrow { grid-template-columns: 1fr; }
  .cs-solrow.is-reverse { grid-template-columns: 1fr; }

  /* photo stack stays on top, intro card below */
  .about-top { grid-template-columns: 1fr; }

  .photo-stack { max-width: 15rem; }

  /* Reorder so both icon groups sit together as one row directly under the headline. */
  .hero-content { order: 1; }
  .hero-icons-top { order: 2; }
  .hero-icons-bottom { order: 3; }
  .hero-copy { order: 4; }

  /* was absolutely positioned from .hero's bottom edge, which overlapped the
     buttons once .hero collapses to its content height on mobile */
  .scroll-cue {
    position: static;
    /* left:50% no longer applies once static, but translate is a transform
       and still runs — without resetting it, it shifts the already-centered
       item another 50% of its own width to the left */
    left: auto;
    translate: none;
    order: 5;
    margin-top: 24px;
  }

  .hero-content,
  .hero-copy {
    text-align: center;
  }

  .mobile-break { display: block; }

  .hero-copy {
    margin: 0 0 8px;
  }

  .hero-actions {
    justify-content: center;
    gap: 10px;
  }

  .btn-primary, .btn-secondary {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Icon rows sit together as one wrapped row below the headline —
     static (not floating) so they never sit on top of the text. */
  .hero-icons {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .hero-icons-top { margin: 28px 0 0; }
  .hero-icons-bottom { margin: 0 0 28px; }

  .icon-bubble {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    animation: none;
  }
  .bubble-circle { width: 60px; height: 60px; font-size: 40px; }
  .bubble-icon-img { height: 43px; }
  .bubble-tooltip {
    position: absolute;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 10px) !important;
    max-width: min(230px, 70vw);
    transform: scale(0.9) !important;
    transform-origin: top left;
  }
  .icon-bubble.active .bubble-tooltip {
    transform: scale(1) !important;
  }
  .bubble-tooltip::after {
    top: -4px; left: 16px; right: auto;
    transform: rotate(45deg) !important;
  }

  .contact {
    padding: 48px var(--page-gutter) 56px;
    gap: 28px;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 46rem) {
  /* docs/landing-structure-update.md §5 — card grid's own breakpoint */
  .grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* text stacks above the screen instead of sitting beside it */
  .case-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Case study page — 2-up tradeoff cards get cramped below this width */
  .cs-tradeoffs { grid-template-columns: 1fr; }

  /* Education cards stay 3-across through tablet widths (stacking them
     there just leaves each short card floating in a lot of empty space) —
     only stack once truly cramped. */
  .education-grid { grid-template-columns: 1fr; }
}

/* ---------- Reveal motion (docs/landing-structure-update.md §6) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1),
              transform 560ms cubic-bezier(.22,.61,.36,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .icon-bubble { animation: none; }
  .scroll-cue svg { animation: none; }
  .cs-maps-hint svg { animation: none; }
}