/* ==========================================================================
   John DeSouza — portfolio
   Direction: "instrument panel" — a dark, precise, luminous surface.
   Dark is the deliberate default; the toggle switches to light.
   Tokens → base → nav → hero → sections → case studies → motion
   ========================================================================== */

/* Direction: editorial restraint — warm neutral ground, oversized light serif
   statements, vast whitespace, hairline rows. Colour is carried by the work
   imagery, not by the page. Accent is the cobalt of John's own products. */
:root {
  color-scheme: light;
  --paper: #F6F4F0;
  --paper-2: #EFECE6;
  --surface: #FFFFFF;
  --surface-2: #EFECE6;
  --surface-solid: #FFFFFF;
  --ink: #14100C;
  --ink-2: #5C564E;
  --ink-3: #8A8279;
  --hair: #E3DFD7;
  --hair-2: #CFC9BF;
  --accent: #1D4CFF;
  --accent-ink: #1438CC;
  --accent-2: #0E7C9B;
  --glow: rgba(29, 76, 255, .10);
  --danger: #C0392B;
  --grad: linear-gradient(155deg, #2E5BFF 0%, #1436E8 48%, #0A1CA8 100%);
  --grad-text: none;
  --shadow-lift: 0 30px 60px -34px rgba(20, 16, 12, .30);
  --shadow-device: 0 36px 64px -28px rgba(4, 10, 42, .55);
  --radius: 18px;
  --radius-sm: 10px;
  --font-display: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 82px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 200; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 12px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Micro-label: a mono tag with a luminous tick */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; flex: none; background: var(--hair-2);
}
.eyebrow.accent { color: var(--accent-ink); }
.eyebrow.accent::before { background: currentColor; opacity: .5; }

.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 18px 0 0;
}
.num {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.012em;
  font-variant-numeric: lining-nums tabular-nums;
}
.muted { color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1;
  text-decoration: none; cursor: pointer; position: relative;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px var(--glow), 0 0 0 1px rgba(255,255,255,.1) inset; }
.btn-ghost { border-color: var(--hair-2); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 24px -8px var(--glow); }
.btn-sm { padding: 10px 16px; font-size: .875rem; }
.btn svg { width: 16px; height: 16px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 20px -6px var(--glow); }
.icon-btn svg { width: 17px; height: 17px; }

main, .nav { position: relative; z-index: 1; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-color: var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
  font-family: var(--font-display); font-weight: 400; font-size: 1.96rem;
  line-height: 1; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 28px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .95rem; transition: color .2s; }
.nav-links a.nav-icon { display: inline-flex; align-items: center; padding-block: 2px; }
.nav-links a.nav-icon svg { width: 17px; height: 17px; display: block; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav .wrap { gap: 12px; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: var(--nav-h);
    background: var(--paper); border-bottom: 1px solid var(--hair);
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px;
  }
  .nav-links a { display: block; padding: 12px 0; font-size: 1.05rem; }
  .nav.open .nav-links { display: flex; }
  .nav-toggle { display: grid; margin-left: auto; }
  .nav-actions .btn { display: none; }
}

/* ---------- Hero ---------- */
/* A slow wash of warm light behind the statement. Three soft fields drift on
   long, offset cycles so the ground is never quite still, but the movement
   stays under the type rather than competing with it. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: -15% -10% auto; height: 145%; z-index: 0; pointer-events: none; }
.hero-bg span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(60px); will-change: transform; mix-blend-mode: multiply;
}
.hero-bg span:nth-child(1) {
  width: 46vw; height: 36vw; top: -10%; left: 0%;
  background: radial-gradient(closest-side, rgba(29, 76, 255, .30), transparent 70%);
  animation: hero-drift-a 17s ease-in-out infinite alternate;
}
.hero-bg span:nth-child(2) {
  width: 42vw; height: 34vw; top: 12%; right: -2%;
  background: radial-gradient(closest-side, rgba(201, 143, 62, .34), transparent 70%);
  animation: hero-drift-b 21s ease-in-out infinite alternate;
}
.hero-bg span:nth-child(3) {
  width: 50vw; height: 34vw; bottom: -18%; left: 18%;
  background: radial-gradient(closest-side, rgba(14, 124, 155, .26), transparent 70%);
  animation: hero-drift-c 19s ease-in-out infinite alternate;
}
.hero-bg span:nth-child(4) {
  width: 34vw; height: 30vw; top: 30%; left: 34%;
  background: radial-gradient(closest-side, rgba(167, 96, 214, .20), transparent 70%);
  animation: hero-drift-d 24s ease-in-out infinite alternate;
}
@keyframes hero-drift-a { from { transform: translate3d(-6vw, -3vh, 0) scale(.9); } to { transform: translate3d(14vw, 9vh, 0) scale(1.3); } }
@keyframes hero-drift-b { from { transform: translate3d(5vw, 2vh, 0) scale(1.25); } to { transform: translate3d(-13vw, 11vh, 0) scale(.92); } }
@keyframes hero-drift-c { from { transform: translate3d(-4vw, 4vh, 0) scale(1.05); } to { transform: translate3d(12vw, -10vh, 0) scale(1.35); } }
@keyframes hero-drift-d { from { transform: translate3d(8vw, 5vh, 0) scale(.85); } to { transform: translate3d(-10vw, -7vh, 0) scale(1.28); } }

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(84px, 16vh, 190px));
  padding-bottom: clamp(64px, 10vh, 130px);
  text-align: center;
}
.hero .eyebrow { justify-content: center; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -.0125em;
  margin: clamp(26px, 4vw, 46px) auto 0; max-width: 17ch;
}
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero .lede {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.3; color: var(--ink-2);
  max-width: 60ch; margin: clamp(28px, 3.4vw, 40px) auto 0;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: clamp(28px, 3vw, 38px); }
.hero-top, .hero-side { display: contents; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(46px, 6.5vw, 84px); position: relative; }
.section.tight { padding-top: 0; }
.section.alt { border-block: 1px solid var(--hair); background: var(--paper-2); }
.section.alt > .wrap { position: relative; z-index: 1; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 4vw, 60px); flex-wrap: wrap; }
.section-head p { max-width: 48ch; color: var(--ink-2); margin: 0; }

/* ---------- Selected work ----------
   An editorial index: each case study is a row led by the company's wordmark,
   with its own ground carrying the screens on the right. */
.cases { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.case-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4.5vw, 60px) 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; color: inherit;
}
.case-copy { display: flex; flex-direction: column; align-items: flex-start; }
.case-logo { width: auto; margin-bottom: clamp(18px, 2.2vw, 26px); }
/* Standalone in each row, so match overall presence rather than text height
   (the About row does the opposite, since the three sit side by side). */
.case-logo[alt="Best Egg"] { height: 28px; }
.case-logo[alt="Chainlink Labs"] { height: 28px; }
.case-logo[alt="Auth0"] { height: 28px; }
.case-copy h2,
.case-copy h3 {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em;
  margin: 0 0 10px; max-width: 22ch;
}
.case-copy > p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.case-copy .chips { margin-top: 16px; }
.case-copy .work-cta { margin-top: 20px; }
.case-media {
  border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 26px); padding: clamp(20px, 3vw, 40px);
  background-color: var(--panel-base, #EFE8DB);
  background-image: var(--panel-art, none), var(--panel, linear-gradient(155deg, #F4EFE5 0%, #E4DAC6 100%));
  background-size: var(--panel-size, auto), auto;
}
.case-media img {
  width: auto; max-width: 46%; max-height: 100%;
  border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(20,16,12,.45), 0 0 0 1px rgba(20,16,12,.06);
  transition: transform .5s var(--ease);
}
.case-media.wide img { max-width: 100%; border-radius: 10px; }
.case-row:hover .case-media img { transform: translateY(-5px); }
.case-row:hover .work-cta::after { transform: translateX(5px); }
.work-cta { font-weight: 500; font-size: 1rem; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; }
.work-cta::after { content: "→"; transition: transform .3s var(--ease); }
@media (max-width: 820px) {
  .case-row { grid-template-columns: 1fr; gap: 24px; }
  .case-media { order: -1; aspect-ratio: 4 / 3; }
}

/* ---------- Panels ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 28px;
}
.card h3 { font-size: 1.15rem; font-weight: 600; margin: 10px 0 14px; }
.card > p { color: var(--ink-2); margin: 0 0 16px; }
.tools { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px); padding: 0; margin: 26px 0 0; }
.tools li { display: flex; align-items: center; gap: 10px; }
.tools img { width: 28px; height: 28px; object-fit: contain; }
.tools span { font-size: .95rem; font-weight: 500; color: var(--ink); }

/* Leadership: single AI panel */
.lead-solo + .lead-solo, .framework + .lead-solo { margin-top: clamp(80px, 10vw, 148px); }
.lead-solo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); padding: clamp(32px, 5vw, 56px); align-items: start; }
.lead-solo-intro h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.12; letter-spacing: -.012em; margin: 12px 0 12px; }
.lead-solo-intro p { color: var(--ink-2); margin: 0; }
.lead-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); }
.lead-points > div { padding-top: 20px; border-top: 1px solid var(--hair-2); position: relative; }
.lead-points > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--accent); }
.point-icon { width: 22px; height: 22px; display: block; margin: 0 0 14px; color: var(--accent); }
.lead-points h4 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.lead-points p { margin: 0; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 760px) { .lead-points { grid-template-columns: 1fr; } }

.lead-solo-copy { display: flex; flex-direction: column; gap: 20px; }
.lead-solo-copy p { margin: 0; color: var(--ink-2); max-width: 58ch; }
@media (max-width: 900px) { .lead-solo { grid-template-columns: 1fr; } }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
th, td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; line-height: 1.45; }
thead th { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; background: var(--surface-2); white-space: nowrap; }
tbody th { font-weight: 600; white-space: nowrap; }
tbody td { color: var(--ink-2); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
.hl { background: var(--glow); color: var(--ink) !important; }
thead .hl { color: var(--accent-ink) !important; }

/* Gallery strips */

/* About — portrait beside a single statement, after the Harvey/Reed Smith model */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-top: 26px; }
.portrait { margin: 0; border-radius: 14px; overflow: hidden; background: #DFD9CD; }
.portrait img { width: 100%; height: auto; display: block; }
.about-statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink); margin: 0; max-width: 22ch;
}
.about-who { margin-top: clamp(28px, 3vw, 40px); }
.about-who strong { display: block; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; }
.about-who span { display: block; color: var(--ink-2); font-size: clamp(1rem, 1.35vw, 1.15rem); margin-top: 5px; }
.about-logos {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: clamp(24px, 4vw, 56px); padding: 0; margin: clamp(44px, 6vw, 72px) 0 0;
}
/* subgrid keeps the logo, count and location lines aligned across all three,
   even when one label wraps */
.about-logos li { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; padding-top: 26px; border-top: 1px solid var(--hair); align-content: start; justify-items: start; text-align: left; }
/* wordmarks only, trimmed to the same ink height, so one size fits all three */
.about-logos img { width: auto; max-width: 100%; align-self: end; justify-self: start; }
/* official vector lockups, sized so the wordmark text matches across all three */
.about-logos img[alt="Best Egg"] { height: 23.0px; }
.about-logos img[alt="Chainlink Labs"] { height: 29px; }
.about-logos img[alt="Auth0"] { height: 29.0px; }
.about-logos strong { font-weight: 600; font-size: 1.02rem; color: var(--ink); align-self: end; padding-top: 22px; }
.about-logos span { color: var(--ink-2); font-size: .94rem; padding-top: 2px; }
.about-logos time { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 700px) {
  .about-logos { grid-template-columns: 1fr; grid-template-rows: none; }
  .about-logos li { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .portrait { max-width: 420px; }
}

/* Contact: the one dark block, closing the page */
.contact {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(44px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center;
}
.contact h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 18px 0 14px; color: var(--paper); max-width: 20ch;
}
.contact p { margin: 0; color: color-mix(in srgb, var(--paper) 70%, transparent); max-width: 50ch; }
.contact .eyebrow { color: color-mix(in srgb, var(--paper) 58%, transparent); }
.contact .eyebrow::before { background: color-mix(in srgb, var(--paper) 38%, transparent); }
.contact-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.contact .btn-primary { background: var(--paper); color: var(--ink); }
.contact .btn-primary:hover { background: #fff; color: var(--ink); box-shadow: none; }
.contact .btn-ghost { border-color: color-mix(in srgb, var(--paper) 34%, transparent); color: var(--paper); background: transparent; }
.contact .btn-ghost:hover { border-color: var(--paper); color: var(--paper); box-shadow: none; }
@media (max-width: 720px) { .contact { grid-template-columns: 1fr; } }
footer { padding: 30px 0 44px; font-size: .85rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ==========================================================================
   Case study pages
   ========================================================================== */
.cs-hero { padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 104px)); padding-bottom: clamp(36px, 5vw, 60px); }
.cs-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.0125em; margin: 18px 0 20px; max-width: 20ch; }
.cs-hero .lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.3; color: var(--ink-2); max-width: 60ch; margin: 0; }
.back { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 7px; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 500; margin-bottom: 30px; transition: color .2s; }
.back:hover { color: var(--accent-ink); }

/* Executive summary — calm, factual, up top on every case study */
.exec-summary { padding-block: clamp(28px, 4vw, 40px) clamp(44px, 6vw, 80px); }
@media (max-width: 760px) { .exec-summary .box { grid-template-columns: 1fr; gap: 14px; } }
.exec-summary .box {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--surface); padding: clamp(26px, 3.4vw, 44px) clamp(26px, 3.6vw, 48px);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.exec-summary h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.exec-summary p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* Hero visual */
.cs-visual {
  background: var(--grad); border-radius: var(--radius); position: relative; overflow: hidden;
  padding: clamp(28px, 5vw, 60px);
  display: flex; justify-content: center; gap: clamp(16px, 3vw, 40px); align-items: center;
}
.cs-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 50% -10%, rgba(255,255,255,.22), transparent 58%); }
.cs-visual img { width: auto; max-width: 40%; max-height: 620px; border-radius: 22px; box-shadow: var(--shadow-device); position: relative; z-index: 1; }
.cs-visual img + img { margin-top: 0; }
.cs-visual.wide img { max-width: 100%; max-height: none; border-radius: 10px; }

.cs-visual.three img { max-width: 30%; }

@media (max-width: 600px) { .cs-visual { flex-wrap: wrap; } .cs-visual img, .cs-visual.three img { max-width: 46%; max-height: 420px; } }

/* Full-width band layout, after Harvey's solutions pages */
.cs-main { padding-block: clamp(88px, 12vw, 160px); }
.cs-body { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 110px); min-width: 0; }
.cs-section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.cs-section h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 18px 0 24px; max-width: 22ch;
}
/* body copy only. Without :not([class]) this outranks every classed paragraph
   inside a case study - eyebrows, captions - and silently resets them. */
.cs-section > p:not([class]) { color: var(--ink-2); max-width: 62ch; margin: 0 0 clamp(36px, 4.5vw, 56px); font-size: 1.03rem; }
.cs-section h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; }

/* Meta strip: the thin band of facts under the hero */
.meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: clamp(36px, 5vw, 56px); padding-top: 26px; border-block: 1px solid var(--hair);
}
.meta > div { padding: 24px 24px 24px 0; margin-right: 24px; border-right: 1px solid var(--hair); }
.meta > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.meta strong { display: block; font-weight: 500; margin-top: 10px; line-height: 1.5; font-size: .95rem; color: var(--ink); }
@media (max-width: 820px) {
  .meta { grid-template-columns: 1fr 1fr; }
  .meta > div:nth-child(2) { border-right: 0; margin-right: 0; }
  .meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 440px) {
  .meta { grid-template-columns: 1fr; }
  .meta > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--hair); }
  .meta > div:last-child { border-bottom: 0; }
}

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.cols-3 > div { padding-top: 20px; border-top: 1px solid var(--hair-2); position: relative; }
.cols-3 > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--accent); }
.cols-3 h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; }
.cols-3 p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-text { display: flex; flex-direction: column; }
.split-text .eyebrow { margin-bottom: 14px; }
.split-text h2 { margin: 0 0 clamp(24px, 3vw, 36px); max-width: 18ch; }
.split-text > p { color: var(--ink-2); margin: 0 0 clamp(22px, 2.6vw, 32px); max-width: 52ch; }
.split.flip > :first-child { order: 2; }
.split .device { background: var(--grad); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
.split .device::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 50% -10%, rgba(255,255,255,.2), transparent 58%); }
.split .device img { width: auto; max-width: 72%; max-height: 560px; border-radius: 22px; box-shadow: var(--shadow-device); position: relative; z-index: 1; }
/* Illustration panels run the height of the text beside them, with the artwork
   centred inside, so a wide illustration does not float short of the content. */
.split .device.illus { align-self: stretch; padding: clamp(18px, 2.6vw, 32px); max-height: none; }
.split .device.illus img { width: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; }
@media (max-width: 820px) { .split .device.illus { align-self: auto; min-height: 0; } }
.tensions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.tensions li { padding: 20px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 20px; align-items: baseline; }
.tensions strong { font-weight: 600; font-size: 1.02rem; }
.tensions span { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 560px) { .tensions li { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 820px) { .cols-3 { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } }

/* Flow diagrams */
.flow { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 12px; align-items: start; }
.flow.four { grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; }
.flow-step { text-align: center; }
.flow-step img { border-radius: 22px; border: 0; box-shadow: 0 0 0 1px var(--hair); width: 100%; height: auto; background: #fff; }
.flow-step.bad img { box-shadow: 0 0 0 2px var(--danger); }
.flow-step.new img { box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -18px var(--glow); }
.flow-arrow { display: grid; place-items: center; height: 100%; min-height: 120px; color: var(--accent); font-size: 1.2rem; }
/* matches Harvey's section heading: 32px sans, weight 500 */
.flow-caption-second { margin-top: clamp(48px, 6vw, 76px) !important; }
.cs-section > p.flow-caption, .flow-caption {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 clamp(20px, 2.4vw, 28px);
}
@media (max-width: 640px) { .flow, .flow.four { grid-template-columns: 1fr 1fr; } .flow-arrow { display: none; } }

/* Decision snippets */
.snippets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.snippet { border: 1px solid var(--hair); border-radius: 16px; padding: 20px; background: var(--surface); }
.snippet-ui { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 15px; font-size: .85rem; line-height: 1.45; margin-bottom: 16px; color: var(--ink-2); }
.snippet-ui b { display: block; margin-bottom: 5px; font-weight: 600; color: var(--ink); }
.snippet-ui .ui-btn { display: inline-block; margin-top: 10px; padding: 7px 13px; border-radius: 8px; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 600; }
.snippet-ui .ui-link { display: inline-block; margin-top: 8px; color: var(--accent-ink); font-weight: 600; font-size: .8rem; text-decoration: underline; }
.snippet h4 { margin: 0 0 5px; font-size: 1rem; }
.snippet p { margin: 0; color: var(--ink-2); font-size: .92rem; }
@media (max-width: 820px) { .snippets { grid-template-columns: 1fr; } }

/* Quotes — the testimonial band */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.quote { border-left: 0; padding: 0; }
.quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.26; letter-spacing: -.012em;
  margin: 0 0 20px; color: var(--ink);
}
.quote cite { display: block; font-style: normal; font-size: .82rem; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; padding-top: 16px; border-top: 1px solid var(--hair); }
.quote cite b { display: block; font-weight: 600; color: var(--ink); font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; margin-bottom: 4px; }
.split .quotes { grid-template-columns: 1fr; gap: 28px; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }

/* Galleries */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: var(--grad); border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); position: relative; overflow: hidden; }
.gallery::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 50% -10%, rgba(255,255,255,.2), transparent 58%); }
.gallery img { border-radius: 20px; box-shadow: var(--shadow-device); width: auto; max-width: 100%; max-height: 780px; margin-inline: auto; }
.gallery.one { grid-template-columns: 1fr; }
.gallery.one img { width: 100%; max-height: none; }
.gallery figure { margin: 0; position: relative; z-index: 1; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* Walkthrough player */
.walk {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--hair); background: #0B0F1A;
  max-width: 932px; margin-inline: auto;      /* never upscale past native resolution */
}
.walk img { width: 100%; height: auto; display: block; image-rendering: auto; }
/* A scrim marks the poster as a video still, so the control reads as "play"
   rather than a button dropped on top of the screenshot's own content. */
.walk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 15, 26, .12), rgba(11, 15, 26, .34));
  transition: opacity .35s var(--ease);
}
.walk .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px 12px 17px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .97); color: var(--ink);
  box-shadow: 0 10px 34px rgba(11, 15, 26, .34);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), opacity .3s var(--ease);
}
.walk .play:hover { background: #fff; box-shadow: 0 14px 40px rgba(11, 15, 26, .42); }
.walk.loading .play { cursor: progress; }
.walk.loading .play svg { animation: walk-spin 1s linear infinite; transform-origin: 50% 50%; }
@keyframes walk-spin { to { transform: rotate(360deg); } }
.walk .play svg { width: 13px; height: 13px; flex: none; }
.walk.playing::after, .walk.playing .play { opacity: 0; }
.walk.playing .play { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .walk::after, .walk .play { transition: none; } }
/* the caption tracks the media it describes: same width, same centring,
   so its left edge lines up with the video rather than the section */
.cs-section > p.walk-note,
.walk-note { max-width: 932px; margin: 12px auto 0; font-size: .875rem; color: var(--ink-3); }

/* Chart */
.chart { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 26px; position: relative; }
.chart-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.chart-head .num { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--accent-ink); }
.chart-head small { display: block; color: var(--ink-2); font-size: .92rem; margin-top: 8px; }
.chart-head .eyebrow { text-align: right; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-mono); }
.chart .bar { fill: var(--accent); transition: fill .15s; }
.chart .bar:hover { fill: var(--accent-ink); }
.chart .hit { fill: transparent; }
.chart .grid { stroke: var(--hair); stroke-dasharray: 2 4; }
.chart .axis text { font-size: 12px; fill: var(--ink-3); }
.chart .val { font-size: 13px; fill: var(--ink); font-family: var(--font-body); font-weight: 600; }
.chart .anno { font-size: 11.5px; fill: var(--ink-2); }
.chart .anno-line { stroke: var(--hair-2); stroke-dasharray: 3 3; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface-solid); border: 1px solid var(--hair-2); color: var(--ink); font-size: .8rem; padding: 9px 11px; border-radius: 8px; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 2; box-shadow: var(--shadow-lift); }
.tooltip.show { opacity: 1; }
.tooltip b { display: block; font-weight: 600; }
details.data { margin-top: 14px; font-size: .9rem; }
details.data summary { cursor: pointer; color: var(--ink-2); }
details.data table { min-width: 0; margin-top: 10px; }

/* Capacity meter */
.capacity { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 26px; }
.capacity-bar { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); margin: 26px 0 12px; overflow: hidden; }
.capacity-bar span { position: absolute; inset: 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 24px -4px var(--accent-2); transform-origin: left; animation: fill-x 2.4s var(--ease) both; }
@keyframes fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.capacity-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }

/* Next case study */
.next-cs { border-top: 1px solid var(--hair); padding-top: clamp(36px, 4vw, 52px); margin-top: clamp(16px, 3vw, 40px); display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.next-cs a { text-decoration: none; }
.next-cs .title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -.012em; display: block; margin-top: 6px; }
.next-cs .title:hover { color: var(--accent-ink); }

/* ---------- Password gate ---------- */
.gate-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter); position: relative; }
.gate { position: relative; width: 100%; max-width: 470px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(28px, 5vw, 42px); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lift); }
.gate .brand { margin-bottom: 20px; }
.gate h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.014em; margin: 10px 0 0; }
.gate-lede { margin: 0; color: var(--ink-2); font-size: .98rem; }
.gate-lede a { color: var(--accent-ink); font-weight: 600; }
.gate-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gate-form input { font: inherit; font-size: 1rem; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--surface-2); color: var(--ink); }
.gate-form input::placeholder { color: var(--ink-3); }
.gate-form input:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; border-color: var(--accent); }
.gate-form input[aria-invalid="true"] { border-color: var(--danger); }
.gate-form .btn { justify-content: center; padding: 15px 20px; }
.gate-error { margin: 0; color: var(--danger); font-size: .92rem; }
.gate .back { margin: 10px 0 0; font-size: .88rem; }

/* ---------- Motion ---------- */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .67s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 90ms),
    transform .67s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 90ms + 150ms);
}
.anim [data-reveal].in { opacity: 1; transform: none; }
[data-rise] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim [data-reveal], [data-rise] { opacity: 1; transform: none; transition: none; animation: none; }
  .capacity-bar span, .node-link span, .hero-bg span { animation: none !important; }
  .case-row, .case-media img, .btn { transition: none; }
}

/* Three layers of design tracking, drawn as a connected node chain */
.framework { margin-top: clamp(80px, 10vw, 148px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.framework-intro h3.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 18px 0 0;
}
.framework-intro .muted { margin: 20px 0 0; max-width: 44ch; }

.nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.node {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  padding: 20px 22px; box-shadow: 0 10px 26px -22px rgba(20, 16, 12, .5);
}
.node-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.node-icon { width: 19px; height: 19px; flex: none; color: var(--ink); }
.node-head h4 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.node > p { margin: 14px 0 0; color: var(--ink-2); font-size: .97rem; }
.node-out { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.node-out > span:first-child { font-size: .82rem; color: var(--ink-3); }

/* The connector between two nodes. A pulse travels top to bottom so the
   direction of the chain reads at a glance; the line itself stays quiet. */
.node-link { height: 52px; display: flex; justify-content: center; position: relative; }
.node-link span {
  position: relative; width: 2px; border-radius: 2px;
  background-color: var(--hair-2);
  /* the gradient tiles vertically, so shifting it by exactly one tile loops
     with no seam and the pulse reads as one continuous flow */
  background-image: linear-gradient(180deg, transparent 0%, var(--accent) 46%, var(--accent) 54%, transparent 100%);
  background-repeat: repeat-y;
  background-size: 100% 150%;
  animation: node-pulse 1.5s linear infinite;
}
.node-link:nth-child(4) span { animation-delay: -.75s; }
@keyframes node-pulse {
  from { background-position-y: -150%; }
  to   { background-position-y: 0%; }
}
.node-link span::before,
.node-link span::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.node-link span::before {
  top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--hair-2);
}
.node-link span::after {
  bottom: -1px; width: 8px; height: 8px;
  border-right: 2px solid var(--hair-2); border-bottom: 2px solid var(--hair-2);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 900px) { .framework { grid-template-columns: 1fr; } }

/* Centred "view all" under the work grid */
.work-all { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 52px); }

/* ---------- Case panels ----------
   Each case study gets its own ground, drawn in CSS from that project's own
   subject matter, and carried from the thumbnail through every panel inside
   the case study. Kept near-invisible so the screenshots stay the subject. */
.case-cross-sell {
  --panel-base: #EFE8DB;
  --panel: linear-gradient(155deg, #F4EFE5 0%, #E4DAC6 100%);
  /* two diagonals that cross: a funnel that forks instead of ending */
  --panel-art:
    repeating-linear-gradient(114deg, rgba(20,16,12,.05) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(66deg, rgba(20,16,12,.035) 0 1px, transparent 1px 36px);
}
.case-verifications {
  --panel-base: #E4EAF2;
  --panel: linear-gradient(155deg, #EDF1F6 0%, #D6DFEC 100%);
  /* ruled lines: a stack of documents waiting to be checked off */
  --panel-art: repeating-linear-gradient(180deg, rgba(20,16,12,.055) 0 1px, transparent 1px 24px);
}
.case-staking {
  --panel-base: #E6E3F2;
  --panel: linear-gradient(155deg, #EFEDF8 0%, #D8D4EE 100%);
  /* concentric rings rising from below: a pool filling to capacity */
  --panel-art: repeating-radial-gradient(circle at 50% 116%, rgba(20,16,12,.05) 0 1px, transparent 1px 42px);
}
.case-no-code {
  --panel-base: #DFEAE3;
  --panel: linear-gradient(155deg, #E9F1EC 0%, #D2E2D8 100%);
  /* a lattice of nodes: the flow builder's canvas */
  --panel-art: radial-gradient(rgba(20,16,12,.10) 1.2px, transparent 1.4px);
  --panel-size: 28px 28px;
}
.case-siwe {
  --panel-base: #E7E3DC;
  --panel: linear-gradient(155deg, #F0EDE9 0%, #DDD8D0 100%);
  /* interlocking diagonals: a key exchanged between two parties */
  --panel-art:
    repeating-linear-gradient(60deg, rgba(20,16,12,.045) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(-60deg, rgba(20,16,12,.045) 0 1px, transparent 1px 32px);
}

.case-media, .cs-visual, .split .device, .gallery {
  background-color: var(--panel-base, #EFE8DB);
  background-image: var(--panel-art, none), var(--panel, linear-gradient(155deg, #F4EFE5 0%, #E4DAC6 100%));
  background-size: var(--panel-size, auto), auto;
}
/* the highlight sweep was built for a dark ground; on these it only muddies */
/* a softer lift now that the grounds are light */
.cs-visual img, .split .device img, .gallery img {
  box-shadow: 0 18px 40px -22px rgba(20, 16, 12, .45), 0 0 0 1px rgba(20, 16, 12, .06);
}

/* ---------- Tags ----------
   One shape for every label on the site: a soft rounded rectangle, sentence
   case, set in the body face. */
.chip, .flow-label, .node-badge, .node-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, var(--paper));
  border: 1px solid rgba(20, 16, 12, .10);
  border-radius: 10px;
  padding: 7px 12px;
  white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-label { margin-top: 14px; }
.bad .flow-label { color: var(--danger); }
.new .flow-label { color: var(--accent-ink); }
.node-badge { margin-left: auto; font-size: .82rem; padding: 5px 10px; }
.node-chip { font-size: .86rem; }
.gallery figcaption {
  margin-top: 14px; text-align: center; font-family: var(--font-body);
  font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}