/* ============================================
   CHITRANSHU KUMAR — PORTFOLIO v6
   ============================================ */

:root {
  --bg:           #F8F6F2;
  --surface:      #EFECE6;
  --ink:          #1C1B19;
  --ink-muted:    #6B6660;
  --accent:       #2A5F4F;
  --accent-light: #D4E6DF;
  --rule:         #DEDAD4;
  --wash-green:   #E3EEE8;
  --wash-sand:    #F4EBD8;
  --wash-lilac:   #E9E6F2;
  --wash-rose:    #F2E6E4;
  --wash-blue:    #E6EAF1;
  --case-wash:    var(--surface);
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --max:          800px;
  --gap:          clamp(56px, 8vw, 96px);
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Case-study wash neutralised (2026-07-21): one calm, consistent container fill
   instead of a per-theme colour flood. Theme colour now lives only in the
   outcome band + sparse text accents. */
body.theme-green,
body.theme-sand,
body.theme-lilac,
body.theme-rose,
body.theme-blue { --case-wash: var(--surface); }

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

html { scroll-behavior: smooth; }

/* Cross-page navigation feels softer, not abrupt.
   Modern browsers cross-fade between pages via view transitions;
   others fall back to a gentle enter-fade on the case pages. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  html.js body.case-study main { animation: pageEnter 0.45s var(--ease) both; }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Page loader: cover the page until the webfonts are ready, then open —
   so the serif hero never swap-jumps and above-the-fold reveals never flash. ===== */
.page-loader {
  position: fixed; inset: 0; z-index: 9999; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.5s ease;
}
.page-loader.done { opacity: 0; pointer-events: none; }
.page-loader .pl-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--rule); border-top-color: var(--accent);
  animation: pl-spin 0.7s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
/* Hold the case-study entrance until the loader lifts, so it plays on reveal. */
html.js.loading body.case-study main { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: none; }
  .page-loader .pl-ring { animation: none; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--ink-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ LAYOUT ============ */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ SCROLL REVEAL ============ */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--rd, 0s);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ============ NAV ============ */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  transition: box-shadow 0.3s var(--ease);
}

nav.scrolled {
  box-shadow: 0 1px 16px rgba(28,27,25,0.05);
}

nav .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
  z-index: 101;
  position: relative;
}

.nav-name:hover { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}

/* Resume: on wide screens it pins to the far right edge, beyond the centred
   menu group, as the one deliberate action. On tablet the header column is
   too narrow for that, so it stays inline in the group (no overlap). */
@media (min-width: 1000px) {
  .nav-links li:has(.nav-resume) {
    position: absolute;
    right: clamp(24px, 4vw, 52px);
    top: 50%;
    transform: translateY(-50%);
  }
}


.nav-links a {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}

.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { width: 100%; }

/* Resume: the one deliberate action in the nav. A soft accent fill + a small
   document icon give it presence so it isn't skimmed past, without shouting. */
.nav-links a.nav-resume {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--accent-light);
  border-radius: 100px;
  padding: 6px 15px 6px 13px;
  margin-left: 4px;
  transition: color 0.3s var(--ease), transform 0.2s var(--ease);
}
.nav-resume-icon,
.nav-links a.nav-resume span { position: relative; z-index: 1; }
.nav-resume-icon { width: 13px; height: 13px; flex-shrink: 0; }
.nav-links a.nav-resume::after { display: none; }
.nav-links a.nav-resume:hover { transform: translateY(-1px); }

/* In-context resume link at the end of About, for people reading top to bottom.
   A plain text button (not a pill) so it doesn't conflict with the tag pills
   just above it. */
.about-cta-wrap { margin-top: 26px; }
.about-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
  padding-bottom: 3px;
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}
.about-resume svg { width: 15px; height: 15px; flex-shrink: 0; }
.about-resume-arrow { transition: transform 0.2s var(--ease); }
.about-resume:hover { gap: 11px; border-color: var(--accent); }
.about-resume:hover .about-resume-arrow { transform: translateX(3px); }

/* Click wave: a gradient sweeps once across the fill, then navigation follows. */
.cta-wave::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: linear-gradient(115deg,
    var(--accent-light) 0%, var(--accent-light) 20%,
    #BADACD 42%, #4E8271 60%, #BADACD 78%,
    var(--accent-light) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
}
.cta-wave.wave-go::before {
  background-position: 100% 50%;
  transition: background-position 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-wave.wave-go { color: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  .cta-wave.wave-go::before { transition: none; }
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  transform-origin: center;
}

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

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s var(--ease);
}

.mobile-menu a:hover { color: var(--accent); }

/* ============ HERO ============ */

.hero {
  padding: clamp(72px, 12vw, 120px) 0 var(--gap);
  border-top: none;
  border-bottom: none;
}

.namaste {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.5s var(--ease) 0.1s forwards;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
  font-weight: 400;
  max-width: 630px;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.5s var(--ease) 0.2s forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
  background-image: linear-gradient(var(--accent-light), var(--accent-light));
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: 0% 0.34em;
  animation: emSweep 0.7s var(--ease) 0.9s forwards;
}

@keyframes emSweep {
  to { background-size: 100% 0.34em; }
}

.hero-sub {
  font-size: 17px;
  color: var(--ink-muted);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 24px;
  font-weight: 300;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.5s var(--ease) 0.3s forwards;
}

.fact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.5s var(--ease) 0.38s forwards;
}

.fact {
  font-size: 12px;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 5px 13px;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  cursor: default;
}

.fact:hover {
  color: var(--accent);
  border-color: var(--accent-light);
}

/* A whisper of the project-wash palette on the fact chips, so even the
   supporting facts have a little life. */
.fact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  vertical-align: 1px;
}


/* Hero background motif: connected nodes in the project washes */
.hero .wrap { position: relative; }

.hero-motif {
  position: absolute;
  right: -190px;
  top: 16px;
  z-index: -1;
  pointer-events: none;
}

/* Draw-in: the path traces itself, then nodes pop along it, illustrating
   the tagline (scattered points resolving into one clear path). Plays once
   on load. */
.hm-line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: hmDraw 1s var(--ease) 0.5s forwards;
}
.hm-line.hm-dash { animation-delay: 1.05s; }

.hm-node {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  animation: hmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(0.5s + var(--nd));
}

@keyframes hmDraw { to { stroke-dashoffset: 0; } }
@keyframes hmPop { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hm-line { animation: none; stroke-dashoffset: 0; }
  .hm-node { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 1199px) {
  .hero-motif { display: none; }
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.5s var(--ease) 0.46s forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============ BUTTONS ============ */

.btn-primary,
.btn-ghost,
.btn-light {
  display: inline-block;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s var(--ease),
              color 0.2s var(--ease),
              border-color 0.2s var(--ease),
              transform 0.15s var(--ease),
              box-shadow 0.2s var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
}

.btn-primary:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42,95,79,0.12);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1.5px solid var(--rule);
  color: var(--ink-muted);
}

.btn-ghost:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-ghost:active { transform: translateY(0); }

.btn-light {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid #fff;
}

.btn-light:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-1px);
}

/* ============ SECTIONS — no full bleed dividers ============ */

section {
  padding: var(--gap) 0;
  border-top: none;
}

/* Divider scoped inside wrap only */
section .wrap:first-of-type,
section .wrap-mid:first-of-type {
  border-top: 1px solid var(--rule);
  padding-top: var(--gap);
}

.hero .wrap,
.hero .wrap:first-of-type,
#work .wrap:first-of-type,
.magic-invite-section .wrap:first-of-type,
#journey .wrap:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* ============ CASE STUDY: TIGHTER RHYTHM ============ */

.case-study {
  --case-gap: clamp(36px, 5.5vw, 60px);
}

.case-study section {
  padding: var(--case-gap) 0;
}

.case-study section .wrap:first-of-type,
.case-study section .wrap-mid:first-of-type {
  padding-top: var(--case-gap);
}

.case-study .case-hero {
  padding: clamp(32px, 6vw, 60px) 0 var(--case-gap);
}

.wrap-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-wide + .wrap-wide,
.wrap-wide + .wrap,
.wrap + .wrap-wide,
.wrap + .wrap-mid,
.wrap-mid + .wrap,
.wrap + .wrap {
  margin-top: clamp(28px, 4.5vw, 44px);
}

/* ============ SECTION LABEL ============ */

.label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 28px;
  opacity: 0.8;
}

.sub-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  opacity: 0.65;
  margin: 40px 0 20px;
}

/* ============ FEATURED WORK CARDS ============ */

.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--card-wash, var(--surface));
  border-radius: 16px;
  padding: clamp(26px, 4.5vw, 48px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(28,27,25,0.10);
}

.feature-nivesh { --card-wash: var(--wash-green); }
.feature-midas  { --card-wash: var(--wash-sand); }
.feature-galaxy { --card-wash: var(--wash-blue); }

.feature-tag {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 12px;
}

.feature-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.22;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 10px;
  transition: color 0.2s var(--ease);
}

.feature-card:hover .feature-title { color: var(--accent); }

.feature-desc {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 16px;
  max-width: 44ch;
}

.feature-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.chip {
  font-size: 12px;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  border-radius: 100px;
  padding: 5px 13px;
  font-weight: 400;
  white-space: nowrap;
}

.feature-cta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s var(--ease);
}

.feature-card:hover .feature-cta { gap: 10px; }

.feature-media {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
}

.feature-media img {
  width: min(44%, 165px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(28,27,25,0.14);
  transition: transform 0.35s var(--ease);
}

.feature-media img:nth-child(2) { margin-top: 28px; }

.feature-card:hover .feature-media img { transform: translateY(-4px); }

/* ============ SECONDARY WORK CARDS ============ */

/* Wizarding-edition invite: a dark, star-flecked strip in the calm flow, found
   only by those who scroll to About. A delight for the curious; invisible noise
   to everyone else. */
/* The strip acts as the divider between About and Journey, so it sits with
   equal breathing room on both sides and neither section draws its own rule. */
.magic-invite-section { padding: var(--gap) 0; }
.magic-invite {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 26px) clamp(22px, 3.4vw, 38px);
  background: radial-gradient(120% 140% at 15% 0%, #1a2036 0%, #0b0e17 60%, #06080f 100%);
  border: 1px solid #262c45;
  text-decoration: none;
  box-shadow: 0 14px 40px -24px rgba(0,0,0,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.magic-invite:hover {
  transform: translateY(-3px);
  border-color: #d9b45b;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.6), 0 0 40px -12px rgba(217,180,91,0.4);
}
.mi-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mi-body { position: relative; z-index: 1; }
.mi-eyebrow {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #d9b45b; margin: 0 0 7px;
}
.mi-line {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.35;
  color: #efe6cf; margin: 0 0 11px; max-width: 520px;
}
.mi-cta {
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: #f2d888; display: inline-flex; align-items: center; gap: 8px;
}
.magic-invite:hover .mi-cta { color: #fbedc0; }
.mi-arw { transition: transform 0.25s var(--ease); }
.magic-invite:hover .mi-arw { transform: translateX(5px); }

/* Portal: the way IN. The calm parchment is swept aside by a dark, magical
   night that gathers from the right, dust rising, then the wizarding page loads.
   Mirror of the way-out transition on the magic page. */
.portal { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0;
  transition: opacity 0.5s ease; }
.portal.on { opacity: 1; pointer-events: all; }
.p-light { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #FBFAF6, #EFECE6 82%); }
/* Solid dark that fills in at the very end so the portal closes to FULL dark
   (the feathered wipe leaves a soft light strip on the left otherwise) — this
   is what hands off seamlessly to the magic page's own dark. */
.p-fill { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(140% 100% at 50% -10%, #161b2e 0%, #0b0e17 55%, #060810 100%);
  transition: opacity 0.45s ease; }
.portal.sealed .p-fill { opacity: 1; }
.p-dark { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, #1a2036, #06080f 82%);
  transform: translateX(105vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 260px);
  mask-image: linear-gradient(90deg, transparent 0, #000 260px);
  transition: transform 2.4s cubic-bezier(0.4, 0, 0.25, 1); }
.portal.enter .p-dark { transform: translateX(0); }
.p-seam { position: absolute; top: -5%; bottom: -5%; right: 0; width: 340px; transform: translateX(340px);
  background: linear-gradient(90deg, transparent, rgba(242,216,136,0.22) 30%, rgba(203,178,255,0.14) 55%, transparent);
  filter: blur(14px); opacity: 0; transition: transform 2.4s cubic-bezier(0.4, 0, 0.25, 1), opacity 0.7s ease; }
.portal.enter .p-seam { transform: translateX(-100vw); opacity: 1; }
.portal #pspark { position: absolute; inset: 0; }
.p-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-family: 'DM Serif Display', Georgia, serif; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6b6660; transition: color 1.4s ease 0.5s, opacity 0.9s ease; }
.portal.enter .p-text { color: #f2d888; text-shadow: 0 0 20px rgba(242,216,136,0.6); }
@media (prefers-reduced-motion: reduce) { .p-dark, .p-seam, .p-text { transition-duration: 0.2s !important; } }

.projects-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  align-items: stretch;
}

.thumb {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover .thumb {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28,27,25,0.08);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.4s var(--ease);
}

.card:hover .thumb img { transform: scale(1.03); }

.thumb-nivesh  { background: var(--wash-green); }
.thumb-midas   { background: var(--wash-sand); }
.thumb-feelpad { background: var(--wash-lilac); }
.thumb-odyssey { background: var(--wash-rose); }

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.card-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  transition: color 0.2s var(--ease);
}

.card:hover .card-title { color: var(--accent); }

.card-desc {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.65;
  font-weight: 300;
}

.card-cta {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transition: gap 0.2s var(--ease);
}

.card:hover .card-cta { gap: 8px; }

.card-status {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-muted);
  opacity: 0.85;
}

.archive-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}

.archive-link:hover {
  border-bottom-color: var(--accent);
  gap: 10px;
}

/* Prominent archive CTA: a calm accent pill, centered, so it isn't missed. */
.archive-cta-wrap { text-align: center; margin-top: clamp(20px, 3vw, 32px); }

.archive-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-light);
  border: 1.5px solid var(--accent-light);
  border-radius: 100px;
  transition: gap 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.archive-cta:hover {
  background: transparent;
  border-color: var(--accent);
  gap: 12px;
  transform: translateY(-1px);
}

/* More work: end-of-case navigation to the other flagships + archive.
   Each project tile carries its own wash so they read as distinct
   temperatures; the archive tile stays neutral so it doesn't compete. */
.more-work { padding: clamp(48px, 7vw, 88px) 0; }
.more-work .wrap-wide { border-top: 1px solid var(--rule); padding-top: var(--gap); }
.more-work .label { margin-bottom: 6px; }
.more-work h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.mw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mw-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--tile-wash, var(--surface));
  border: 1px solid var(--tile-edge, var(--rule));
  border-radius: 14px;
  padding: clamp(22px, 1.9vw, 28px);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mw-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(28, 27, 25, 0.08); }
.mw-tile .mw-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.mw-tile h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}
.mw-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.mw-tile .mw-go {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s var(--ease);
}
.mw-tile:hover .mw-go { gap: 10px; }
.mw-tile.mw-green { --tile-wash: var(--wash-green); --tile-edge: #CFE1D6; }
.mw-tile.mw-sand  { --tile-wash: var(--wash-sand);  --tile-edge: #E4D8BE; }
.mw-tile.mw-blue  { --tile-wash: var(--wash-blue);  --tile-edge: #CFD6E4; }
.mw-tile.mw-archive { --tile-wash: var(--surface); --tile-edge: var(--rule); }
@media (max-width: 640px) { .mw-grid { grid-template-columns: 1fr; } }

/* ============ ABOUT ============ */

.about-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 27px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
}

.about-lead em {
  font-style: italic;
  color: var(--accent);
}

.about-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 300;
}

.about-body:last-of-type { margin-bottom: 0; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--surface);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  cursor: default;
}

.tag:hover {
  background: var(--accent-light);
  color: var(--accent);
}

/* ============ JOURNEY ============ */

.journey {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 26px;
}

.journey::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule);
}

.job {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
}

.job::before {
  content: '';
  position: absolute;
  left: -26.5px;
  top: 27px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
}

.job:first-child::before {
  top: 7px;
  background: var(--accent);
}

html.js .job.reveal::before {
  transform: scale(0);
  transition: transform 0.4s var(--ease) 0.25s;
}

html.js .job.reveal.in::before { transform: scale(1); }

.job:first-child { padding-top: 0; }
.job:last-child  { border-bottom: none; }

.period {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  white-space: nowrap;
  padding-top: 2px;
  opacity: 0.75;
}

.role {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 3px;
  font-weight: 500;
}

.org {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 6px;
  font-weight: 300;
}

.job-note {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.65;
  font-weight: 300;
}

.job-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(42, 95, 79, 0.45);
  transition: border-color 0.2s var(--ease);
}

.job-note a:hover {
  border-bottom: 1px solid var(--accent);
}

/* ============ CONTACT ============ */

#contact .wrap:first-of-type {
  border-top: none;
  padding-top: 0;
}

.contact-panel {
  background: var(--accent);
  border-radius: 16px;
  padding: clamp(32px, 6vw, 56px);
}

.contact-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 400;
}

.contact-sub {
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 300;
  max-width: 46ch;
}

.contact-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.contact-link {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-bottom: 1px;
}

.contact-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.25s var(--ease);
}

.contact-link:hover::after { width: 100%; }

/* ============ FOOTER ============ */

footer {
  padding: 24px 0;
}

footer .wrap {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-muted);
  opacity: 0.7;
}

.footer-copy {
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.6;
}

.footer-credit {
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.6;
}

/* ============ SKIP LINK ============ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 0 0 4px 0;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ============ FOCUS ============ */

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

/* ============ CASE STUDY PAGES ============ */

.back-link {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  transition: color 0.2s var(--ease);
}

.back-link:hover { color: var(--accent); }

.case-hero {
  padding: clamp(48px, 9vw, 88px) 0 var(--gap);
}

.case-hero .wrap,
.case-hero .wrap:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hero-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 120px);
  border-top: none;
}

.case-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.case-hero-grid .visual-slot,
.case-hero-grid .visual-render {
  margin: 0;
}

.case-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 16px;
}

.case-sub {
  font-size: 17px;
  color: var(--ink);
  max-width: 480px;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 20px;
}
/* Hero proof line — the headline result, direct, with the scale it sits on. */
.hero-stat {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  max-width: 460px;
  margin: 0 0 22px;
}
.hero-stat .hs-num {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  margin-right: 4px;
}
.hero-stat .hs-scale { font-weight: 500; color: var(--ink); }
/* Hero credits — one quiet wrap-line, trimmed values, tiny labels. */
.hero-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  border-top: 1px solid var(--rule);
  padding-top: 15px;
  max-width: 480px;
}
.hero-credits > span { font-size: 12.5px; color: var(--ink-muted); font-weight: 300; }
.hero-credits .hc-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
  font-weight: 500;
  margin-right: 5px;
}
/* Hero impact — sits with the intro, body-sized, divided off. */
.hero-impact {
  border-top: 1px solid var(--rule);
  margin-top: 22px;
  padding-top: 18px;
  max-width: 460px;
}
.hero-impact .hi-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
  font-weight: 500;
  margin-bottom: 8px;
}
.hero-impact p { font-size: 17px; line-height: 1.6; color: var(--ink); font-weight: 300; margin: 0; }
.hero-impact .n { color: var(--accent); font-weight: 500; }

/* Hero facts bar — the three credits across the full width. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 22px;
}
.hero-facts .fcell { padding: 0 22px; border-left: 1px solid var(--rule); }
.hero-facts .fcell:first-child { padding-left: 0; border-left: none; }
.hero-facts .flabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
  font-weight: 500;
  margin: 0 0 6px;
}
.hero-facts .fval { font-size: 13px; line-height: 1.5; color: var(--ink); font-weight: 300; margin: 0; }
.hero-facts .impact .n {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
}
@media (max-width: 720px) {
  .hero-facts { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .hero-facts .fcell:nth-child(odd) { padding-left: 0; border-left: none; }
}

.highlight-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 24px;
  margin: 28px 0 32px;
}

.highlight-index {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 7px;
}

.highlight-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 6px;
}

.highlight-sub {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
  font-weight: 300;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.meta-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.65;
  font-weight: 500;
  margin-bottom: 6px;
}

.meta-value {
  display: block;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.6;
}

.meta-line .meta-label {
  display: inline;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0;
  margin-right: 4px;
}

.meta-sep {
  opacity: 0.35;
}

.case-lead {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 18px 0;
}

.statement {
  max-width: var(--max);
}

.wrap.statement {
  border-top: none !important;
}

/* A statement that CAPS a section (last child) otherwise floats over a
   double gap — this section's bottom pad + the next section's top pad.
   Halve the bottom so it sits balanced, like the statements that lead. */
.case-study section:has(> .wrap.statement:last-child) {
  padding-bottom: clamp(18px, 3vw, 32px);
}

.statement-band {
  background: none;
  padding: clamp(10px, 2.5vw, 20px) 0;
}

.statement-band::before {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  background: var(--accent);
  margin: 0 0 22px;
}

.statement-text {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.42;
  color: var(--ink);
  font-weight: 400;
  text-align: left;
  max-width: 640px;
}

.statement-text em {
  font-style: italic;
}

.wrap-mid {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.highlight-row {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
  margin: 36px 0;
}

.highlight-row:first-child { margin-top: 0; }
.highlight-row:last-child { margin-bottom: 0; }

.highlight-row.reverse .highlight-media { order: 2; }
.highlight-row.reverse .highlight-text { order: 1; }

.highlight-media .visual-render {
  margin: 0;
  padding: 20px;
}

.highlight-media .visual-render img,
.highlight-media .visual-render video {
  max-width: 220px;
  margin: 0 auto;
  display: block;
}

.highlight-text h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 10px;
}

.highlight-text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  font-weight: 300;
}

.case-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.case-list li {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  font-weight: 300;
  padding-left: 18px;
  position: relative;
}

.case-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}

.pain-item {
  background: var(--case-wash);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pain-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}

.pain-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.pain-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
  font-weight: 300;
}

.idea-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 8px;
}

.idea-card {
  background: var(--case-wash);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 15px;
}

.idea-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 6px;
}

.idea-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}

.goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}

.goal-card {
  background: var(--case-wash);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  position: relative;
  padding-left: 30px;
}

.goal-card::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin: 20px 0;
}

.flow-steps .step {
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 6px 14px;
  font-weight: 400;
  white-space: nowrap;
}

.flow-steps .step-arrow {
  color: var(--ink-muted);
  opacity: 0.55;
  font-size: 13px;
}

/* Overflowing step chains stay on ONE line and scroll horizontally, so the
   left-to-right flow never breaks across rows. JS wraps the overflowing ones
   with manual prev/next arrows (no auto-motion); they are also swipe/scrollable.
   Measurement helper forces one line so JS can detect overflow. */
.flow-steps.measure-nowrap { flex-wrap: nowrap; }
.flow-steps.measure-nowrap .step,
.flow-steps.measure-nowrap .step-arrow { flex: 0 0 auto; }

.flow-steps.scrollable {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: auto;
  padding: 4px 10px;
  scroll-padding: 0 10px;
}

.flow-steps.scrollable::-webkit-scrollbar { display: none; }

.flow-steps.scrollable .step,
.flow-steps.scrollable .step-arrow { flex: 0 0 auto; }

.diagram .flow-steps.scrollable { justify-content: flex-start; }

/* Manual navigation wrapper injected by JS around overflowing step chains. */
.stepper-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.stepper-scroll .flow-steps { flex: 1 1 auto; min-width: 0; margin: 0; }

/* Both arrows grouped on the right, so changing steps needs little cursor travel. */
.stepper-nav-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepper-nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.stepper-nav:hover { color: var(--accent); border-color: var(--accent-light); }
.stepper-nav:disabled { opacity: 0.3; cursor: default; }

.aside-box {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 20px 0;
}

.aside-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
}

.aside-box p {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.7;
  font-weight: 300;
}

.mental-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 8px;
}

.wrap-wide .mental-models {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.wrap-wide .model-card .visual-render {
  height: 300px;
  padding: 20px;
}

.model-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 18px 20px;
}

.model-tag {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
}

.model-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 6px;
}

.model-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* Scan emphasis: reserved for the single most important phrase in a section.
   Kept sparse on purpose; used often it becomes clutter rather than signal. */
.pop {
  color: var(--ink);
  font-weight: 500;
}

/* keyword emphasis — weight contrast against light-set supporting text */
.key {
  font-weight: 500;
  color: var(--ink);
}

/* ============ SCAN LIST — lift buried lists into a scannable set ============ */
.scan-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
  margin: 6px 0 10px;
  max-width: 640px;
}
.scan-item {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 8px 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.scan-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transform: translateY(-2px);
}
.scan-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 620px;
  margin: 18px 0 0;
}
@media (max-width: 640px) {
  .scan-list { grid-template-columns: 1fr; gap: 0; }
}

/* ============ CASE BRIEF — 'at a glance' strip below the hero ============ */
.case-brief {
  padding: clamp(8px, 1.5vw, 16px) 0 0;
}
.case-brief .wrap {
  border-top: 1px solid var(--rule);
  padding-top: clamp(20px, 3vw, 28px);
}
/* Slim at-a-glance: the proof + the essence in one quiet line, no cards. */
.case-brief .glance {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 760px;
  margin: 0 0 18px;
}
.case-brief .glance .g-stat { font-weight: 500; color: var(--ink); }
.case-brief .glance .g-stat .num { color: var(--accent); }
.case-brief .label {
  margin-bottom: clamp(24px, 3vw, 34px);
}
.case-brief .highlight-strip {
  margin: 0;
  gap: clamp(24px, 3vw, 32px) clamp(32px, 4vw, 56px);
}
.case-brief .meta-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 40px;
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 30px);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  font-weight: 300;
}
.case-brief .meta-line .meta-sep { display: none; }
.case-brief .meta-line > span { display: block; }
.case-brief .meta-line .meta-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 500;
}

/* ============ OUTCOME BAND — the payoff, tinted to each project ============ */
.outcome-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 30px) clamp(18px, 2.5vw, 28px);
  border-radius: 16px;
  border: 1px solid transparent;
  padding: clamp(28px, 4vw, 42px) clamp(22px, 3.5vw, 34px);
  margin: 8px 0 14px;
}
.outcome-band.single { grid-template-columns: 1fr; }
.o-stat { min-width: 0; }
.o-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 33px);
  line-height: 1.08;
  font-weight: 400;
  margin-bottom: 8px;
  white-space: nowrap;
}
.outcome-band.single .o-num { font-size: clamp(28px, 3.6vw, 44px); white-space: normal; }
.o-num sup {
  font-size: 0.38em;
  vertical-align: 0.8em;
  font-weight: 400;
}
@media (max-width: 600px) {
  .outcome-band { grid-template-columns: 1fr; }
  .o-num { white-space: normal; }
}

/* ============ BEAT — a key line stepped up from body; the scan anchor.
   Restraint: same two fonts as the rest of the site; the serif + size carry the
   hierarchy, accent green appears only on a number, questions lean on italic. ============ */
.beat {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.36;
  font-weight: 400;
  color: var(--ink);
  max-width: 620px;
  margin: 6px 0 22px;
}
.beat .num { color: var(--accent); }
.beat.q { font-style: italic; }


/* ============ HOW I THINK — still thinking fragments, reader-controlled ============ */
.think {
  padding: clamp(44px, 7vw, 76px) 0 clamp(36px, 5vw, 60px);
  overflow: hidden;
}
.think-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  max-width: 1148px;
  margin: 0 auto clamp(22px, 3vw, 30px);
  padding: 0 24px;
}

.think-nav { display: flex; gap: 6px; flex: none; padding-top: 4px; }
.think-head .label { margin-bottom: 0; }
.think-intro {
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 300;
  margin: 8px 0 0;
  max-width: 520px;
  line-height: 1.55;
}
.think-view {
  max-width: 1148px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 24px;
  --fade-l: 4%;
  --fade-r: 96%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 var(--fade-r), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 var(--fade-r), transparent);
}
/* Only fade a side that actually has more cards to scroll to, so the first
   card isn't cut by the gradient at rest. */
.think-view.at-start { --fade-l: 0%; }
.think-view.at-end { --fade-r: 100%; }
.think-view::-webkit-scrollbar { display: none; }
.think-track {
  display: flex;
  gap: 20px;
  padding: 6px 24px;
  width: max-content;
}
.think-card {
  width: 344px;
  min-height: 252px;
  flex: none;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}
.think-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
}
.think-mark .t-star { color: var(--t-hue); font-size: 13px; line-height: 1; }
.think-mark .t-prod {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.think-ctx {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
  font-weight: 300;
  margin: 0 0 10px;
}

.think-ins {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 23px);
  line-height: 1.42;
  color: var(--ink);
  margin: 0 0 18px;
}
.think-ins em { font-style: italic; color: var(--t-hue); }
.think-dec {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  font-weight: 300;
  margin: auto 0 0;
  padding: 14px 0 0 18px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.think-dec::before {
  content: '\2192';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--t-hue);
  font-weight: 500;
}

.think-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: 12px;
  align-self: flex-start;
  border-bottom: 1px dotted rgba(42, 95, 79, 0.45);
  transition: border-color 0.2s var(--ease);
}

.think-link:hover { border-bottom-style: solid; }
@media (max-width: 640px) {
  .think-card { width: 300px; min-height: 210px; }
}
.o-lab {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
}
.outcome-band.emerald { background: #E5F0E9; border-color: #D3E4DA; }
.outcome-band.emerald .o-num { color: #245C49; }
.outcome-band.emerald .o-lab { color: #5C6B64; }
.outcome-band.gold { background: #F2E9D4; border-color: #E5D6B4; }
.outcome-band.gold .o-num { color: #8A6516; }
.outcome-band.gold .o-lab { color: #7C6F52; }
.outcome-band.blue { background: #E4EDF7; border-color: #CFDDEE; }
.outcome-band.blue .o-num { color: #234F7C; }
.outcome-band.blue .o-lab { color: #5D6A79; }

.strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 24px;
}

.strategy-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}

.strategy-title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

.strategy-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  font-weight: 300;
  padding-left: 13px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 24px;
}

/* A caption followed by a body paragraph (e.g. a footnote before more prose)
   must not cram into it. */
.visual-caption + .about-body { margin-top: 26px; }

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
  margin: 20px 0 28px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  font-weight: 300;
}

/* ============ VISUALS ============ */

.visual-slot {
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface);
  padding: 32px 24px;
  text-align: center;
  margin: 28px 0;
}

.visual-render {
  border-radius: 10px;
  background: var(--surface);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.visual-render.hero-shot {
  background: var(--case-wash);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
}

.motion-replay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  box-shadow: 0 4px 14px rgba(28,27,25,0.22);
}

.motion-replay.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.motion-replay:hover { background: #22503f; }

/* Galaxy hero splash play/replay button: match the project's sky-blue wash instead of the site-wide green accent. Scoped to theme-blue only. */
body.theme-blue .motion-replay {
  background: var(--wash-blue);
  color: var(--ink);
}

.visual-render.hero-shot img,
.visual-render.hero-shot video {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid var(--rule);
  display: block;
}

/* Editorial hero duo: two staggered screens with a soft connector */
.hero-duo {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
}

/* Screens already carry their own device bezel, so no card frame around them. */
.hero-duo img,
.hero-duo video {
  width: min(46%, 190px);
  height: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.hero-duo img:nth-child(2),
.hero-duo video:nth-child(2) { margin-top: 44px; }

.visual-render svg { max-width: 100%; height: auto; display: block; }

.visual-render img,
.visual-render video {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(28,27,25,0.08);
}

.visual-render.compact { padding: 20px; }
.visual-render.compact img { max-width: 220px; }

.model-card .visual-render {
  margin: 0 0 14px;
  height: 230px;
  padding: 16px;
  overflow: hidden;
}

.model-card .visual-render img,
.model-card .visual-render video {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.model-card .visual-render img.crop {
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.visual-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}

.visual-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 460px;
  margin: 0 auto;
  font-weight: 300;
}

.visual-slot.mini {
  aspect-ratio: 4/3;
  padding: 18px 14px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.visual-slot.mini .visual-desc { font-size: 12px; }

.visual-strip {
  display: flex;
  gap: 10px;
  margin: 24px 0 10px;
}

.visual-strip .screen {
  flex: 1;
  aspect-ratio: 9/16;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface);
}

.visual-strip .screen.img {
  border-style: solid;
  border-color: var(--rule);
  overflow: hidden;
}

.visual-strip .screen.img img,
.visual-strip .screen.img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Framed variant: screenshots that already include the phone bezel.
   No card, no crop, no radius; show the device as-is. */
.visual-strip.framed { align-items: flex-start; }

.visual-strip.framed .screen.img {
  border: none;
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: visible;
}

.visual-strip.framed .screen.img img {
  height: auto;
  object-fit: contain;
}

.visual-caption {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  font-weight: 300;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.visual-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 12px;
}

/* Before / after comparison: a named group of two equal-height screenshots on
   mats, with the caption tied tightly to the pair and clear separation between
   groups. `.compare` bounds the width so the two phones sit close together. */
.compare { max-width: 640px; margin: 0 auto; }
.compare-wrap { margin-top: clamp(40px, 5.5vw, 60px); }

.compare-name {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 14px;
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 12px;
  align-items: start;
}

.ba-col .ba-tag {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 8px;
  text-align: center;
}

.ba-col.after .ba-tag { color: var(--accent); }

/* Fixed height so both columns align regardless of each screenshot's aspect. */
.ba-col .shot {
  height: clamp(300px, 46vh, 420px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-col .shot img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.compare-caption {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  font-weight: 300;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

/* Wide research artefacts (annotated boards) shown as evidence. */
.research-figure {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.research-figure img,
.research-figure video { width: 100%; height: auto; display: block; }

/* Scrollable full-page frames: two equal fixed-size viewports (2-up, matching
   the outcome screen footprint) you scroll inside to experience a full screen. */
.scroll-screens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin: 8px 0 14px;
}

.scroll-figure { position: relative; margin: 0; min-width: 0; }

/* Scroll signifier: a soft bottom fade plus a small up/down badge that gently
   bobs, so it reads as scrollable. Both fade out once the frame is scrolled. */
.scroll-figure::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 58px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.scroll-figure.scrolled::after { opacity: 0; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 3px 10px rgba(28, 27, 25, 0.12);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
  animation: scrollNudge 1.5s var(--ease) infinite;
}

.scroll-figure.scrolled .scroll-hint { opacity: 0; animation: none; }

.scroll-hint svg {
  width: 15px;
  height: 17px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
}

@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, -2px); }
  50% { transform: translate(-50%, 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; transform: translate(-50%, 0); }
}

.scroll-label {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 12px;
}

.scroll-frame {
  width: 100%;
  height: clamp(460px, 60vh, 580px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(28, 27, 25, 0.06);
  scrollbar-width: thin;
}

.scroll-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}

/* In a before/after, the After is a scrollable frame matched to the Before mat.
   `.has-scroll` comparisons use a taller frame (and matching Before mat) so
   there's room to actually scroll the full page. */
.before-after .scroll-figure { width: 100%; }
.before-after .scroll-frame {
  height: clamp(300px, 46vh, 420px);
  border-radius: 10px;
  box-shadow: none;
}
.before-after .scroll-frame img { border-radius: 9px; }
.before-after .scroll-figure::after { border-radius: 0 0 9px 9px; }

.before-after.has-scroll .shot,
.before-after.has-scroll .scroll-frame { height: clamp(480px, 66vh, 660px); }

@media (max-width: 600px) {
  .scroll-screens { grid-template-columns: 1fr; gap: 24px; }
}

/* Row of full screenshots (contained on mats, not cropped). */
.visual-strip.contain { flex-wrap: wrap; align-items: flex-start; }

.visual-strip.contain .screen.img {
  flex: 1 1 180px;
  aspect-ratio: auto;
  overflow: visible;
  background: var(--surface);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.visual-strip.contain .screen.img img,
.visual-strip.contain .screen.img video {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* Five phone screens in a single row (smaller mats, like Galaxy's detail row). */
.visual-strip.contain.five-up { flex-wrap: nowrap; gap: 12px; }
.visual-strip.contain.five-up .screen.img { flex: 1 1 0; min-width: 0; padding: 10px; }
@media (max-width: 720px) {
  .visual-strip.contain.five-up { flex-wrap: wrap; }
  .visual-strip.contain.five-up .screen.img { flex: 1 1 40%; }
}

/* Quieter, smaller analysis cards, centered, no upscaling. */
.visual-strip.analysis-views { justify-content: center; gap: 18px; }
.visual-strip.analysis-views .screen.img { flex: 0 1 250px; max-width: 250px; }

/* Detail cards (e.g. Galaxy's market depth, tax breakup, order trail): show the
   full UI detail contained on a taller mat, not a top-crop that hides content. */
.detail-shots .model-card .visual-render { height: 320px; padding: 12px; }

.visual-compare .screen {
  aspect-ratio: 9/16;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
}

.visual-compare .screen.img {
  aspect-ratio: auto;
  border-style: solid;
  overflow: hidden;
  padding-bottom: 0;
  display: block;
}

.visual-compare .screen.img img {
  width: 100%;
  height: auto;
  display: block;
}

.visual-compare .screen-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Diagrams drawn in site tokens */
.diagram {
  background: var(--case-wash);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 32px);
  margin: 24px 0 10px;
  overflow-x: auto;
}

.diagram { overflow-x: visible; }

.diagram .flow-steps {
  justify-content: center;
  margin: 0;
}

.diagram .step {
  background: #fff;
  border: 1px solid var(--rule);
}

.diagram .step.accent { border-color: var(--accent); }

/* Forking flow: a common path that splits into labelled branch cards, so the
   two registration paths read clearly instead of as loose extra rows. */
.fork-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin: 16px auto 14px;
  max-width: 440px;
}

.fork {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}

.fork-branch {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fork-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 5px 12px;
}

.fork-branch .flow-steps {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.diagram-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
  margin-top: 16px;
}

.diagram-subnote {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 300;
  margin-top: 4px;
}

/* Two-half journey map: app side vs branch side */
.journey-map {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.journey-half {
  flex: 1 1 0;
  background: rgba(255,255,255,0.55);
  border-radius: 10px;
  padding: 16px;
}

.journey-half.customer { flex: 1.55 1 0; }

.half-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 12px;
}

.journey-half.officer .half-label { color: var(--ink-muted); }

.half-label svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-map .flow-steps { margin: 0; }

/* Muted, looping in-product motion clips (autoplay on scroll) */
.motion-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 10px;
}

.motion-row .m-clip {
  background: var(--case-wash);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motion-row video,
.motion-solo video {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule);
  display: block;
}

.motion-solo {
  background: var(--case-wash);
  border-radius: 10px;
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  justify-content: center;
  margin: 24px 0 10px;
}

.motion-solo video { max-width: 250px; }

@media (max-width: 600px) {
  .motion-row { grid-template-columns: 1fr; }
}

/* Officer-side web screenshots */
.web-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0 10px;
}

.web-shots.grid-2 {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.web-shots.grid-2 .shot { aspect-ratio: 16/11; }

.web-shots .shot {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: #fff;
}

.web-shots .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Wide comic / panorama band */
.comic-band img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--rule);
  margin-bottom: 12px;
}

/* ============ ARCHIVE PAGE ============ */

.archive-intro {
  font-size: 16px;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.75;
  max-width: 54ch;
  margin-bottom: 8px;
}

.archive-group { margin-top: 36px; }

.archive-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.archive-list li { border-bottom: 1px solid var(--rule); }
.archive-list li:last-child { border-bottom: none; }

.archive-item {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 8px 20px;
  padding: 15px 0;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
}

.a-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  transition: color 0.2s var(--ease);
}

a.archive-item:hover .a-title { color: var(--accent); }

.a-desc {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.6;
}

.a-arrow {
  font-size: 13px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}

a.archive-item:hover .a-arrow {
  opacity: 1;
  transform: none;
}

.a-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
  justify-self: start;
}

/* ---- Archive bento grid ---- */

.archive-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* Image on top, text in a solid body below, so text never sits over a busy
   image (many archive images are low-res or carry their own text). */
.archive-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

a.archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28, 27, 25, 0.10);
  border-color: var(--accent-light);
}

.archive-card.featured { grid-column: span 2; }

.a-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--rule);
}

.archive-card.featured .a-thumb { aspect-ratio: 16 / 6.5; }

.a-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
  flex: 1;
}

.archive-card .a-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.32;
  color: var(--ink);
  font-weight: 400;
  transition: color 0.2s var(--ease);
}

a.archive-card:hover .a-title { color: var(--accent); }

.archive-card .a-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  font-weight: 300;
}

.archive-card .a-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 4px;
}

.archive-card .a-arrow {
  font-size: 13px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
  margin-top: 4px;
  align-self: flex-start;
}

a.archive-card:hover .a-arrow { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .archive-bento { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .archive-bento { grid-template-columns: 1fr; }
  .archive-card.featured { grid-column: span 1; }
  .archive-card.featured .a-thumb { aspect-ratio: 16 / 10; }
}


/* ============ RESUME PAGE ============ */

.r-head { margin-bottom: 8px; }

.r-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 6px;
}

.r-role {
  font-size: 15px;
  color: var(--ink-muted);
  font-weight: 400;
  margin-bottom: 14px;
}

.r-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  margin-bottom: 22px;
}

.r-contact a, .r-contact span {
  color: var(--ink-muted);
  text-decoration: none;
}

.r-contact a:hover { color: var(--accent); }

.r-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button.btn-primary, button.btn-ghost {
  cursor: pointer;
  font-size: 13px;
}

.r-item {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 0 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.r-item:last-child { border-bottom: none; }

.r-period {
  font-size: 12px;
  color: var(--ink-muted);
  opacity: 0.8;
  line-height: 1.5;
}

.r-role-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.r-org {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.r-item .case-list { margin: 8px 0 0; gap: 7px; }
.r-item .case-list li { font-size: 14px; line-height: 1.6; }
.r-item .case-list a { color: var(--accent); text-decoration: none; }
.r-item .case-list a:hover { text-decoration: underline; }

.r-note {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 14px;
}

@media (max-width: 600px) {
  .r-item { grid-template-columns: 1fr; gap: 3px; }
}

/* ============ PRINT (resume page) ============ */

@media print {
  nav, footer, .r-actions, .skip-link, .mobile-menu, .r-note, .back-link { display: none !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #222; font-size: 12px; }
  section { padding: 0 !important; }
  section .wrap:first-of-type { border-top: none; padding-top: 0; }
  .wrap { max-width: 100%; padding: 0; }
  .r-name { font-size: 26px; }
  .label { margin-bottom: 10px; }
  .r-item { padding: 10px 0; }
  .tags .tag { border: 1px solid #ddd; background: none; }
  a { color: #222 !important; }
  @page { margin: 14mm; }
}

/* ============ MOBILE ============ */

@media (max-width: 600px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero h1 { font-size: 30px; }
  .label { font-size: 11px; }
  .archive-item { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .a-arrow { display: none; }

  .feature-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px;
  }

  .feature-media img { width: 44%; max-width: 160px; }
  .feature-media img:nth-child(2) { margin-top: 20px; }

  .projects-secondary { grid-template-columns: 1fr; gap: 28px; }

  .job {
    grid-template-columns: 1fr;
    gap: 3px;
    align-items: start;
  }

  .period { white-space: normal; padding-top: 0; }

  .case-meta { grid-template-columns: 1fr; gap: 14px; }
  .meta-line { flex-direction: column; align-items: flex-start; gap: 6px; }
  .meta-line .meta-sep { display: none; }
  .mental-models { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 20px; }

  .visual-strip { flex-wrap: wrap; }
  .visual-strip .screen { flex: 1 1 40%; max-width: calc(50% - 5px); }
  .visual-compare { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; gap: 24px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .highlight-strip { grid-template-columns: 1fr; gap: 20px; }
  .model-card .visual-render { height: 260px; }
  .goal-grid { grid-template-columns: 1fr; }
  .wrap-wide .mental-models { grid-template-columns: 1fr; }
  .wrap-wide .model-card .visual-render { height: 260px; }
  .web-shots { grid-template-columns: 1fr; }

  .case-hero-grid { grid-template-columns: 1fr; }
  .case-hero-grid .visual-slot,
  .case-hero-grid .visual-render { margin-top: 28px; }

  .highlight-row,
  .highlight-row.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .highlight-row.reverse .highlight-media,
  .highlight-row.reverse .highlight-text { order: initial; }
  .highlight-media .visual-render img { max-width: 200px; }
  .hero-duo img { width: 44%; }
  .hero-duo img:nth-child(2) { margin-top: 28px; }
  .flow-steps { gap: 6px 4px; }
  .flow-steps .step { font-size: 12px; padding: 5px 11px; }
  .web-shots.grid-2 { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr; }
  .idea-grid { grid-template-columns: 1fr 1fr; }
  .journey-map { flex-direction: column; }
}

@media (min-width: 601px) and (max-width: 1000px) {
  .case-hero-grid { grid-template-columns: 1fr; }
  .case-hero-grid .visual-slot,
  .case-hero-grid .visual-render { margin-top: 32px; max-width: 400px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 601px) and (max-width: 860px) {
  .wrap-wide .mental-models { grid-template-columns: 1fr 1fr; }
  .web-shots { grid-template-columns: 1fr 1fr; }
}