/* ── tokens ────────────────────────────────────────────── */
:root {
  --ui:'Inter',sans-serif;
  /* --serif is retired as a general token: it resolves to the sans UI stack,
     so legacy structural refs (titles, labels, stats) render clean Inter. */
  --serif:'Inter',sans-serif;
  /* Serif is reserved for statement/quote moments ONLY — the hero headline,
     the two site statements, and case-study / testimonial quotes. */
  --serif-display:'Instrument Serif',Georgia,serif;
}
.root[data-palette="paper"] {
  --bg: #FFFFFF; --fg: #0A0A0A; --muted: #8A8A8A;
  --line: rgba(0,0,0,.12); --a1: #C94040; --panel: rgba(0,0,0,.03);
  --bg-glass: rgba(255, 255, 255, 0.55);
  --border-glass: rgba(0, 0, 0, 0.12);
  background: var(--bg);
}


/* ── reset ─────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--ui),sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.has-fine-cursor, .has-fine-cursor * { cursor: none !important; }

/* ── custom cursor ── */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  background: #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease, width 0.3s cubic-bezier(.34,1.56,.64,1), height 0.3s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}

.cursor-viewfinder {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  will-change: transform;
  transition: width 0.5s cubic-bezier(.22,1,.36,1),
              height 0.5s cubic-bezier(.22,1,.36,1),
              opacity 0.25s ease;
}

.vf-corner {
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid rgba(255,255,255,1);
  mix-blend-mode: difference;
  transition: border-width 0.3s ease,
              width 0.5s cubic-bezier(.22,1,.36,1),
              height 0.5s cubic-bezier(.22,1,.36,1),
              border-color 0.25s ease;
}
.vf-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.vf-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.vf-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.vf-br { bottom: 0; right: 0; border-left: none; border-top: none; }

.cursor-ring-label {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #faf8f5;
  background: #111;
  padding: 7px 20px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease 0.05s, transform 0.45s cubic-bezier(.34,1.56,.64,1) 0.05s;
}

/* Base visibility */
body.cursor-ready .cursor-dot { opacity: 1; }
body.cursor-ready .cursor-viewfinder { opacity: 0.35; }

/* Hovering something viewable */
body.cursor-view .cursor-dot { opacity: 0 !important; }
body.cursor-view .cursor-viewfinder { opacity: 1; }
body.cursor-view .vf-corner {
  border-width: 1.5px;
  width: 11px; height: 11px;
  border-color: #111;
}

/* When there is a label */
body.cursor-view .cursor-viewfinder:has(.cursor-ring-label:not(:empty)) {
  width: 0px; height: 0px;
}
body.cursor-view .cursor-viewfinder:has(.cursor-ring-label:not(:empty)) .vf-corner {
  opacity: 0;
  width: 0; height: 0;
  border-width: 0;
}
body.cursor-view .cursor-ring-label:not(:empty) {
  opacity: 1;
  transform: scale(1);
}

/* When there is no text (hovering standard button/link) */
body.cursor-view .cursor-viewfinder:not(:has(.cursor-ring-label:not(:empty))) {
  width: 28px; height: 28px;
}

/* ── curtain ────────────────────────────────────────────── */
#curtain {
  position:fixed; inset:0; background:#0A0A0A;
  z-index:500; transform:scaleY(0); transform-origin:bottom;
  pointer-events:none;
}

/* ── intro ──────────────────────────────────────────────── */

/* ── clock search button ────────────────────────────────── */

/* ── org-card highlight ──────────────────────────────────── */
@keyframes card-ripple {
  0%   { box-shadow: 0 0 0 0 var(--hl-color); }
  65%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes logo-ripple {
  0%   { box-shadow: 0 0 0 2px var(--hl-border), 0 0 0 0 var(--hl-color); }
  65%  { box-shadow: 0 0 0 2px var(--hl-border), 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 2px var(--hl-border), 0 0 0 0 transparent; }
}

/* ── other work (horizontal scroll) ─────────────────────── */
.other-work-scroll::-webkit-scrollbar { display:none; }
/* ── chip category colors ────────────────────────────────── */

/* ── other-work takeover & testimonial modal ─────────────────────────────────── */
.owt-overlay, .tm-overlay, .archive-overlay {
  position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.owt-overlay.open, .tm-overlay.open, .archive-overlay.open { opacity:1; pointer-events:auto; }

.owt-panel, .tm-panel, .archive-panel {
  position:relative; background:var(--bg);
    border-radius:16px; max-width:900px; width:92%;
  max-height:88vh; overflow-y:auto;
  transform:scale(.96) translateY(12px);
  transition:transform .28s cubic-bezier(.34,1.2,.64,1);
  scrollbar-width:none;
}
.owt-panel::-webkit-scrollbar, .tm-panel::-webkit-scrollbar, .archive-panel::-webkit-scrollbar { display:none; }
.owt-overlay.open .owt-panel, .tm-overlay.open .tm-panel, .archive-overlay.open .archive-panel { transform:scale(1) translateY(0); }
.modal-close-pos {
  position:absolute; top:20px; right:20px; z-index:2;
}


/* ══════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════ */
#s-about {
  padding:36px 0 0;
  position:relative; background:var(--bg);
}

/* Core: photo + philosophy */
.ab-philosophy {
  font-family:var(--serif);
  font-size:clamp(15px,1.7vw,20px); line-height:1.65;
  font-style:italic; color:var(--fg); margin:0;
}

/* Facts - match tgcard style */

/* ── heritage divider ───────────────────────────────────── */


/* ── srow bg number glyph ───────────────────────────────── */

/* ── canvas layers ──────────────────────────────────────── */

/* ── root / layout ──────────────────────────────────────── */
.root {
  position:relative; min-height:100vh;
  background:transparent; overflow-x:hidden;
}

/* ── hero landing (OG style) ─────────────────────────────── */
.hero-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; /* between the bg image (0) and .hero-content (2) */
  pointer-events: none;
}
/* Hero background image, revealed on load by an iris (circle) expanding from
   the bottom-middle — i.e. blooming up out of the dock. */
/* Outer wrapper: anchored to the bottom of the hero, full width. Fades to
   transparent on scroll (see initExperienceParallax) — separate from the inner
   image's intro reveal so they never fight. */
.hero-bg-wrap {
  position: absolute; left: 0; bottom: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-img {
  display: block;
  width: 100%;          /* fits the section width on every screen size … */
  height: auto;         /* … keeps aspect, so the botanicals sit along the bottom
                           and the white top melts into the white hero */
  /* Hidden until the headline finishes typing, then slides up + fades in
     (driven by initIntro's typeTl). */
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img { opacity: 1; transform: none; }
}
#hero-landing {
  position: relative;
  width: 100vw; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; z-index: 0;
  font-family: 'Inter', sans-serif;
}
.hero-bg {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.hero-content {
  text-align: center; z-index: 2; position: relative;
  max-width: 800px; padding-bottom: 60px;
  /* The block is centered, but the photo sits on top so the headline lands in
     the lower half. Nudge the whole cluster up so the reading line sits nearer
     the optical centre. */
  transform: translateY(-48px);
}

/* Credential dossier row: logo + org + detail, editorial and scannable. */
.hero-creds {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 0;
  margin-top: 46px;
}
.hcred { display: flex; align-items: center; gap: 10px; padding: 0 22px; }
.hcred-logo {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  background: #fff; border: 1px solid var(--border-glass); flex-shrink: 0;
}
.hcred-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.hcred-name { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.hcred-sub { font-family: var(--ui); font-size: 12px; font-weight: 500; color: rgba(0,0,0,0.62); }
.hcred-div { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; }
@media (max-width: 620px) {
  /* Stacking these vertically ate a lot of hero height and read worse than
     just shrinking everything to stay on one line. Scrolls as a fallback
     on the very narrowest phones instead of wrapping or overflowing. */
  .hero-creds {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    margin-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  }
  .hero-creds::-webkit-scrollbar { display: none; }
  .hcred { padding: 0 10px; flex-shrink: 0; gap: 7px; }
  .hcred-logo { width: 26px; height: 26px; }
  .hcred-name { font-size: 12px; }
  .hcred-sub { font-size: 10.5px; white-space: nowrap; }
  .hcred-div { display: block; height: 22px; }
}
.hero-photo-cluster {
  position: relative; width: 600px; margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0 0; cursor: default;
}

.pill-bg-scroll, .pill-fg-scroll {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}
/* Hero Out-of-Bounds Parallax Pill */
.hero-out-of-bounds-wrap {
  width: 250px; height: 220px;
  position: relative; z-index: 2; flex-shrink: 0;
  cursor: pointer;
  transform: translateZ(0); /* Hardware accel */
}
.pill-bg-mask {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 110px; /* Horizontal pill height */
  border-radius: 55px; /* Fully rounded horizontal pill */
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
[data-palette="ink"] .pill-bg-mask {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* Greeting Chat Bubble — same dark-glass treatment as the footer's
   "Let's find the gap" pitch card: translucent black, hairline border,
   soft mesh-gradient glow, real backdrop-blur since this sits over the
   busy hero photo/aurora background rather than a flat black section. */
.hero-greeting {
  position: absolute;
  top: 30px;
  left: 155px; /* Pushed far to the right, off the face */
  z-index: 10;
  font-family: var(--ui, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 8px 6px 18px;
  color: #ffffff;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px 20px 20px 4px; /* Flatter bottom-left corner (static) */
  white-space: nowrap;
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom left;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  /* CTA: text + arrow-circle. No shape/size change on hover — only the
     circle, text, and arrow move. */
  display: inline-flex; align-items: center; gap: 12px;
}
.hero-greeting::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(178, 171, 242, 0.4), transparent 35%),
              radial-gradient(circle at 15% 85%, rgba(22, 84, 66, 0.4), transparent 35%);
  pointer-events: none;
  z-index: 0;
}
.hg-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.hg-circle {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: #ffffff;
  display: grid; place-items: center;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.hg-arrows { position: relative; width: 13px; height: 13px; }
.hg-ar {
  position: absolute; inset: 0; width: 13px; height: 13px;
  color: #0a0a0a;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.hg-ar:nth-child(2) { transform: translate(-140%, 140%); } /* waiting, bottom-left */
/* Hover: only the arrow loops (out top-right while its twin slides in from
   bottom-left). The pill, text, and circle all stay put — no layout shift. */
.hero-greeting:hover .hg-ar:nth-child(1) { transform: translate(140%, -140%); }
.hero-greeting:hover .hg-ar:nth-child(2) { transform: translate(0, 0); }
[data-palette="ink"] .hero-greeting {
  background: rgba(10, 10, 10, 0.55);
  color: #ffffff;
}

/* Headline and Accents */

/* Typing Cursor */
.type-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: clamp(36px, 6vw, 56px);
  background: linear-gradient(to bottom, #8b5cf6, #10b981, transparent);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.hero-headline { position: relative; } /* Added for accurate cursor tracking */
.hero-headline {
  font-family: var(--serif-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.01em; max-width: 720px; margin: 0 auto;
  overflow: visible; color: var(--fg);
}
.hero-headline [class^="accent-"] {
  font-family: var(--serif-display);
  font-style: italic; font-weight: 400; font-size: 1em;
  display: inline-block; cursor: default;
  transition: transform .22s cubic-bezier(.34,1.2,.64,1), text-shadow .22s, filter .22s;
}
.hero-headline .accent-r { color: #8b5cf6; }
.hero-headline .accent-a { color: #10b981; }
.hero-headline .accent-d { color: #f59e0b; }
.hero-headline .accent-t { color: #ef4444; }

@keyframes sym-rotate {
  0%, 20% { transform: rotate(0deg); }
  25%, 45% { transform: rotate(90deg); }
  50%, 70% { transform: rotate(180deg); }
  75%, 95% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
.hero-headline .sym {
  font-style: normal; display: inline-block;
  animation: sym-rotate 12s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.hero-headline .accent-d .sym { animation-delay: 0s; }
.hero-headline .accent-a .sym { animation-delay: 0.75s; }
.hero-headline .accent-r .sym { animation-delay: 1.5s; }
.hero-headline .accent-t .sym { animation-delay: 2.25s; }

.hero-headline .accent-r:hover { transform: scale(1.06); filter: brightness(1.15); }
.hero-headline .accent-a:hover { transform: scale(1.06); filter: brightness(1.15); }
.hero-headline .accent-d:hover { transform: scale(1.06); filter: brightness(1.15); }
.hero-headline .accent-t:hover { transform: scale(1.06); filter: brightness(1.15); }



/* Chips */
/* ── Unified chip system ──────────────────────────────────────────
   Canonical chip = the careers-timeline chip (.ab-tl-chip): 12px,
   sentence case, --panel fill, --border-glass hairline, pill radius.
   Every chip family below inherits this look so the site speaks with
   one voice. Deltas are intentional and commented (size for compact
   contexts, opaque fill for dark backgrounds). ───────────────────── */

/* Hero chips render as "Role | Company" (company lighter) with a per-chip
   accent; hover reveals a journey card in #hoverModal (built by the hero-chips
   script from the Journey cards). */

/* Hover journey-card shown inside #hoverModal */
/* Square logo box sized to the height of the role/company/date block beside
   it (~3 rows). Fixed square avoids a flex feedback loop; the logo fills it
   edge to edge (no padding, object-fit:cover). */

/* CTA */



@keyframes scrollLine {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── sidebar ────────────────────────────────────────────── */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; width:340px;
  z-index:40; overflow:hidden;
  display:flex; flex-direction:column;
  background:#ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-right:1px solid rgba(0,0,0,.07);
  opacity:1;
  transform: translateX(-100%);
  pointer-events: none;
}
.sb-inner::-webkit-scrollbar { display:none; }

.sb-toc::-webkit-scrollbar { display: none; }
.sb-toc-link:hover, .sb-toc-link.is-active {
  color: var(--fg);
}
.sb-toc-link.is-active {
  font-weight: 600;
}


.pill-fg-mask {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 110px; /* Same as the horizontal pill */
  /* Allow bleeding out the top by 200px, but clip left, right, bottom */
  clip-path: inset(-200px 0 0 0 round 0 0 55px 55px);
  z-index: 2;
  pointer-events: none;
}
.pill-bg, .pill-fg {
  pointer-events: none;
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
.pill-bg {
  top: -60px; left: -10%;
  width: 120%; height: calc(100% + 120px);
  background-image: url('assets/photos/pill-bg.png');
  z-index: 1;
}
.pill-fg {
  /* Provide bleed space for parallax */
  bottom: -5%; left: -5%;
  width: 110%; height: 210%; /* 210% of 110px mask = ~231px tall */
  background-image: url('assets/photos/pill-fg.png');
  background-position: bottom center; /* Align to the bottom of the pill */
  z-index: 2;
}
/* ── sidebar map ─────────────────────────────────────────── */

/* ── sidebar clock ───────────────────────────────────────── */
.sb-nav-link.is-active { color:var(--fg); }

.root[data-surface="glass"] footer-deleted {
  background:rgba(140,142,150,.10) !important;
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
}
.root[data-surface="glass"] #s-work,
.root[data-surface="glass"] #s-stats,
.root[data-surface="glass"] #s-testimonials,
.root[data-surface="glass"] .heritage-divider {
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
}



/* ── articles & explorations list ────────────────────────── */
/* ── hover reveal index rows ── */


/* Floating Image */

/* ── agent modal ────────────────────────────────────────── */
.agent-modal.is-open .agent-overlay { opacity: 1; pointer-events: auto; }

.agent-modal.is-open .agent-modal-inner { transform: translateY(0) scale(1); opacity: 1; }








/* ── main content area ──────────────────────────────────── */
.sig-main {
  position: relative;
  margin-left: 0;
}

/* word-split animation containers */

/* sections need solid bg */
#s-work, #s-stats, #s-testimonials {
  position:relative; z-index:2;
  background: transparent;
}
footer {
  position:relative; z-index:2;
  background: transparent;
}

/* ── sidebar slot text ──────────────────────────────────── */

/* ── page edge blurs ────────────────────────────────────── */
/* Retired: this top fade was for an old top nav; it now just washes out the
   top of the framed hero photo. */
#page-blur-top { display: none; }


/* ── intro sentence ─────────────────────────────────────── */

/* ── work section ───────────────────────────────────────── */
#s-work {
  padding:16px 28px 40px;
  position:relative; z-index:1;
}

/* ── project cards (original - kept for revert) ─────────── */

/* ── bento grid ─────────────────────────────────────────── */

/* grid positions */

/* image areas */
.bcard--oracleepm .bcard-img,

/* body */

/* image */
/* body */
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--ui);
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border-glass);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1.4;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* ── hero sentinel ──────────────────────────────────────── */
#s-hero { display:none; }

/* ── stats ──────────────────────────────────────────────── */
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
/* ── logo marquee ───────────────────────────────────────── */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}
.marquee-track img {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.3s ease;
}
.marquee-track img:hover {
  transform: scale(1.05);
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 24px)); }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .stat:not(:last-child) { border-right: none; padding-right: 0; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .stat:not(:first-child) { padding-left: 0; }
}
.stat { }
.stat:not(:last-child) { padding-right:24px; border-right:1px solid var(--line); }
.stat:not(:first-child) { padding-left:24px; }
.stat-n {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 96px);
  line-height: .9;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--fg);
}
.stat-l { 
  font-family: var(--ui);
  font-size: 12px; 
  line-height: 1.45; 
  color: var(--muted); 
  margin: 0; 
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── testimonials ───────────────────────────────────────── */
.tgrid-heading {
  width: 100%;
  max-width: 972px;
  margin: 0 auto 40px auto;
  padding: 0 40px;
  text-align: left;
}
/* Section headers: Large, high-end editorial serif with asymmetric detailing. */
.sec-lbl {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.sec-lbl::before {
  content: "✱";
  font-family: var(--ui);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 300;
  color: currentColor;
  opacity: 0.2;
  margin-right: 24px;
  transform: translateY(-2px);
  transition: opacity 0.5s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.tgrid-heading:hover .sec-lbl::before {
  opacity: 0.7;
  transform: translateY(-2px) rotate(180deg);
}

.sec-lbl::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.15;
  margin-left: 32px;
}
/* ── hero map ── */
/* ── testimonials grid ── */
.t-card {
  padding: 24px; border: 1px solid var(--border-glass); border-radius: 12px;
  background: transparent; display: flex; flex-direction: column; justify-content: space-between;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s, box-shadow 0.2s;
  width: 260px; flex-shrink: 0; cursor: pointer;
}
.t-card:hover {
  transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}


/* ── case study drawer ──────────────────────────────────── */
#caseDrawer {
  position:fixed; left:0; top:0; right:0; bottom:0;
  border-left:1px solid var(--line);
  z-index:30; background: #ffffff;
  display:flex; flex-direction:column;
  pointer-events:none;
  clip-path:circle(0px at 50% 50%);
  transition: left 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@media(min-width: 769px) {
  }
#caseDrawer.is-open { pointer-events:auto; }
.drawer-body {
  flex:1; min-height:0; overflow-y:auto;
  scrollbar-width:none; padding:0;
}
.drawer-body::-webkit-scrollbar { display:none; }

/* ── intro full-bleed ────────────────────────────────────── */

/* ── footer ─────────────────────────────────────────────── */



/* parallax ghost */




/* bottom colophon bar */

/* ── case study (m-*) styles ─────────────────────────────── */
.m-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0 100px; /* Added 60px top padding */
}
.m-hero-img { width:100%; border-radius:12px; margin:0 0 28px; display:block; overflow:hidden; }
.m-title {
  font-family:var(--serif-display); font-size:clamp(28px,4vw,48px);
  line-height:1.04; font-weight:400; letter-spacing:-.01em; margin:0 0 12px; color:var(--fg);
}
.m-meta {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  padding:24px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-bottom:48px;
}

/* Conceptual flow diagram (e.g. evaluation loops) */
.m-flow-diagram {
  display:flex; align-items:stretch; justify-content:center;
  gap:12px; flex-wrap:wrap; margin:24px 0 8px;
}
.m-flow-step {
  flex:1; min-width:150px; max-width:220px;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:18px 16px; display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.m-flow-label { font-family:var(--ui); font-size:13px; font-weight:600; line-height:1.4; color:var(--fg); margin:0; }
.m-flow-arrow { flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--muted); }
@media (max-width:640px) {
  .m-flow-diagram { flex-direction:column; align-items:center; }
  .m-flow-step { max-width:280px; width:100%; }
  .m-flow-arrow { transform:rotate(90deg); }
}
.m-meta-label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.m-meta-val { font-size:16px; font-weight:500; margin:0; line-height:1.3; color:var(--fg); }
.m-section { margin-bottom:56px; }
.m-section-h {
  font-family:var(--serif-display); font-size:27px; font-weight:400;
  letter-spacing:-.01em; margin:0 0 24px; color:var(--fg);
}
.m-text { font-size:16px; line-height:1.85; color:var(--fg); margin:0 0 24px; text-wrap:pretty; opacity:.88; }
.m-text strong { font-weight:600; opacity:1; }
.m-img { width:100%; border-radius:12px; margin:36px 0 12px; display:block; overflow:hidden; }
.m-caption { font-size:11.5px; color:var(--muted); text-align:center; margin:0 0 36px; }
.m-stats { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 24px; }
.m-stat { flex:1; min-width:200px; padding:32px 24px; background:var(--bg2); border-radius:8px; border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
.m-stat-n { font-family:var(--ui); font-size:40px; line-height:1; font-weight:700; letter-spacing:-0.02em; margin:0 0 12px; color:var(--fg); }
.m-stat-l { font-size:13px; line-height:1.4; color:var(--muted); margin:0; }
.m-quote {
  font-family:var(--serif-display); font-size:23px; line-height:1.45;
  font-style:italic; background:rgba(0, 0, 0, 0.03); border-radius:8px; border:1px solid rgba(0, 0, 0, 0.08);
  padding:32px 36px; margin:32px 0; color:#404040; text-align:center;
}
.m-2col .m-img { margin:0; }
.nda-banner { 
  display:flex; gap:13px; align-items:flex-start; 
  background: rgba(212, 168, 0, 0.08); 
  border: 1px solid rgba(212, 168, 0, 0.25); 
  border-radius: 8px; 
  padding: 16px 20px; 
  margin-bottom: 32px; 
}
.nda-icon { font-size: 16px; margin-top: 1px; }
.nda-text { font-size:14px; line-height:1.55; color:#7A6200; margin:0; }
.pub-status.review { background:var(--fg); color:var(--bg); }
.pub-status.progress { border:1px solid var(--line); color:var(--fg); }
.m-section ul { margin:12px 0; padding-left:20px; }
.m-section li { font-size:16px; line-height:1.6; color:var(--fg); margin-bottom:8px; opacity:.88; }


/* ── selection ──────────────────────────────────────────── */
::selection { background:var(--a1); color:var(--bg); }

/* ── responsive ─────────────────────────────────────────── */

/* ── tablet ≤820px ─────────────────────────────────────── */
@media(max-width:768px) {
  /* cursor */
  #cursor-dot, 
  

  /* sidebar - off-canvas drawer */
  .mobile-nav-toggle { display:flex; }
  .mobile-nav-overlay { display:block; }
  
  .sidebar { 
    position:fixed !important; top:0; bottom:0; left:-340px !important; width:340px; height:100vh; 
    border-right:1px solid var(--line); border-bottom:none; z-index:9000; 
    transform:translateX(0) !important; transition:left 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) !important; 
    opacity:1 !important; pointer-events:auto !important;
  }
  body.nav-open .sidebar { left:0 !important; }
  .sig-main { margin-left:0; padding:0 20px; }
  
  .bcard-arrow { display:flex; }
  .bcard { padding-bottom:30px; position:relative; }


  
  .ft-body { flex-direction:column; align-items:flex-start; }
  .ft-right { align-items:flex-start; }

  /* sections - strip horizontal padding, sig-main's 20px handles it */
  #s-work        { padding:24px 0 16px !important; }
  #s-stats       { padding:48px 0 !important; }
  #s-testimonials{ padding:16px 0 56px !important; }
  .footer-inner  { padding:56px 0 36px !important; }

  /* work section header */
  .work-header { margin-bottom:8px; }
  .work-header span { display:none; } /* "hover ✦ - click to open" meaningless on touch */

  /* project cards - single column on tablet */
  .work-cards { grid-template-columns:1fr; gap:20px; }

  /* stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .stat { padding:0 !important; border:none !important; }

  /* testimonials */
  .tscroll-row { padding: 4px 16px 24px; }

  /* hero logos */
  .hero-logos { gap:18px; }
  .hero-logos img { height:13px; }

  /* modal content grids */
  .m-meta  { grid-template-columns:1fr 1fr !important; }
  .m-2col  { grid-template-columns:1fr !important; }
  
  .m-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0 100px; /* Added 60px top padding */
}

  /* condensation canvas - too costly on mobile */
}

/* ── phone ≤480px ──────────────────────────────────────── */
@media(max-width:480px) {
  .hero-inner { padding:4vh 16px; }

  /* type scale */
  .hero-eyebrow { font-size:11px; }
  #heroSub      { font-size:14px; }
  .ft-cta       { font-size:clamp(36px,8.5vw,72px) !important; }

  .pcard-desc { display:none; }

  /* stats single column */
  .stats-grid { grid-template-columns:1fr; gap:20px; }

  /* modal grids */
  .m-meta  { grid-template-columns:1fr !important; }
  

  /* reduced motion - respect system setting */
  @media(prefers-reduced-motion:reduce) {
    * { animation:none !important; transition:none !important; }
  }
}

/* ── reduced motion ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #sgBgFixed { opacity:.5 !important; }
  .hero-eyebrow, .hero-sub,
  .footer-eyebrow, .footer-links { opacity:1 !important; }
  .hero-h1 .w-inner { transform:none !important; }
}


/* ── FROSTED AURORA BACKGROUND ──────────────────────────────── */
.aurora-bg {
  /* Retired: the hero now uses the framed campus photo, not the orb mesh. */
  display: none;
}
.aurora-bg.visible {
  opacity: 0.4;
}
.orb {
  position: absolute;
  border-radius: 50%;
  animation: floatOrb 20s infinite alternate ease-in-out;
  mix-blend-mode: normal;
}
.orb-1 {
  width: 25vw; height: 25vw;
  background: #ebd5c1; /* Lighter Gold */
  top: -5vw; left: 5vw;
  animation-duration: 14s;
}
.orb-2 {
  width: 28vw; height: 28vw;
  background: #d1c1e0; /* Lighter Purple */
  bottom: -5vw; right: 5vw;
  animation-duration: 11s;
  animation-delay: -5s;
}
.orb-3 {
  width: 21vw; height: 21vw;
  background: #c9d9b6; /* Lighter Green */
  top: 40vh; left: 25vw;
  animation-duration: 16s;
  animation-delay: -10s;
}
.orb-mouse {
  width: 18vw; height: 18vw;
  background: #b6cbe6; /* Lighter Blue */
  top: 10vh; right: 20vw;
  animation: floatOrb 18s infinite alternate-reverse ease-in-out;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15vw, 10vh) scale(1.1); }
  66% { transform: translate(-10vw, 15vh) scale(0.9); }
  100% { transform: translate(5vw, -5vh) scale(1.05); }
}

[data-palette="ink"] .aurora-bg.visible {
  opacity: 0.15;
}


/* ── mobile nav toggle & overlay ────────────────────────── */
.mobile-nav-toggle {
  display:none; position:fixed; top:20px; right:20px; z-index:8999;
  width:44px; height:44px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  align-items:center; justify-content:center; cursor:pointer; color:var(--fg);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.mobile-nav-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:8998;
  opacity:0; transition:opacity 0.3s; pointer-events:none;
}
body.nav-open .mobile-nav-overlay { opacity:1; pointer-events:auto; }



/* ── bg leak ────────────────────────────────────── */
@media(max-width:768px) { .bg-leak { left: 0; } }



body.leak-deloitte .bg-leak-layer[data-case="deloitte"],
body.leak-mathworks .bg-leak-layer[data-case="mathworks"],
body.leak-iu .bg-leak-layer[data-case="iu"],



.key-hints {
  position: absolute; bottom: 32px; right: 32px;
  display: flex; gap: 8px; z-index: 100;
  opacity: 0; pointer-events: none;
}
.kbd-key {
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--line);
  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: all 0.1s;
}
.kbd-key.is-pressed {
  border-bottom-width: 1px;
  transform: translateY(3px);
}


@keyframes kbd-overheat {
  0%   { transform: scale(1) translateY(3px); background: var(--bg); border-color: var(--line); color: var(--muted); }
  15%  { transform: scale(1.15) translateY(0px) rotate(4deg); background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
  30%  { transform: scale(1.15) translateY(0px) rotate(-4deg); }
  45%  { transform: scale(1.15) translateY(0px) rotate(3deg); }
  60%  { transform: scale(1.15) translateY(0px) rotate(-3deg); background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
  100% { transform: scale(1) translateY(0px); background: var(--bg); border-color: var(--line); color: var(--muted); }
}
.kbd-key.is-overheated {
  animation: kbd-overheat 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}





/* ── CONTACT HEADER ── */

/* ── MECHANICAL CARDS ── */
.pcard, .bcard, .t-card, .article-item {
  box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s !important;
}


/* Override old translateY(-2px) and shadow */
.pcard-wrap:hover .pcard, .bcard:hover, .t-card:hover, .article-item:hover {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}





/* ── ABOUT MODAL (TAKEOVER) ── */
#aboutTakeover {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  border-left: 1px solid var(--line);
  z-index: 100; background: #ffffff;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
#aboutTakeover.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
@media(min-width: 769px) {
  }

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

/* ================= ABOUT SECTION ================= */
.about-section {
  margin-bottom: 40px;
}


@media (min-width: 900px) {
  .ab-split-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
}




.ab-philosophy {
  font-family: var(--serif-display);
  font-size: clamp(32px, 4vw, 48px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}


/* Skills Marquee — every rule scoped under .marquee-wrapper so it can't
   collide with the unrelated logo .marquee-track elsewhere on the page
   (that rule leaked a 48px `gap` into this one, which desynced the -50%
   loop math and made the spacing uneven — this scoping fixes both). */
.marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 48px;
  overflow: hidden;
}

.marquee-wrapper .marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
}

.marquee-wrapper .marquee-left {
  animation: scroll-left 50s linear infinite;
}

.marquee-wrapper .marquee-right {
  animation: scroll-right 50s linear infinite;
}

.marquee-wrapper .marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  padding-right: 16px;
}

/* Decorative only — no hover response at all (no pause, no chip hover). */
.marquee-wrapper .pc-chip {
  pointer-events: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}





.footer-wrapper {
  background: #ffffff !important;
  position: relative; z-index: 2;
}


/* ── ABOUT GALLERY ── */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 6px)); }
}


.sw-pills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:14px 0 0}
.sw-pill{padding:4px 12px;border:1px solid var(--line);border-radius:100px;font-size:11px;color:var(--fg);background:var(--panel)}
.sw-badge.f{background:rgba(229,32,42,.09);color:var(--a1)}
.sw-badge.i{background:rgba(0,0,0,.05);color:var(--muted)}


/* Flowing Gradient for Hero CTA */
@keyframes btnGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/* Accordion Sub-Grid */
.sb-exp-item.has-drawer.is-open .sb-exp-chevron {
  transform: rotate(180deg);
}
.sb-exp-item.has-drawer.is-open .sb-exp-drawer {
  grid-template-rows: 1fr;
}


/* ── Sidebar toggle (CSS class-based) ──────────────────── */
.sig-main {
  transition: margin-left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Hide toggle btn when sidebar is open */




/* ── UNIFIED BUTTON SYSTEM ──────────────────────────────────── */
/* Base button layout */
.btn-primary, .btn-secondary, .clock-search-btn, .ft-white-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px; border-radius: 12px; /* Soft rounded rectangle */
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s, border-color 0.25s, opacity 0.25s, box-shadow 0.25s;
  flex-shrink: 0; box-sizing: border-box;
  box-shadow: none;
  transform: scale(1);
}

/* Base press/hover effect (Ghostly shrink instead of 3D drop) */
.btn-primary:active, .btn-secondary:active, .clock-search-btn:active, .ft-white-btn:active,
.btn-primary:hover, .btn-secondary:hover, .clock-search-btn:hover, .ft-white-btn:hover {
  transform: scale(0.98);
}

/* Naked Close (X) Buttons */
.btn-close {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; 
  border: none !important;
  box-shadow: none !important;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
}
.btn-close:hover {
  color: var(--fg);
  transform: rotate(90deg) scale(1.1); /* Elegant spin & slight pop */
}

/* Icon Buttons (.btn-icon modifier for perfect circles) */
.btn-icon {
  width: 38px !important; height: 38px !important; padding: 0 !important;
  border-radius: 50% !important; /* Perfect circle */
}

/* SVG icon standardizations */
.btn-primary svg, .btn-secondary svg, .btn-close svg, .clock-search-btn svg, .ft-white-btn svg { 
  width: 16px; height: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-width: 1.5; /* Delicacy */
}


/* --- LIGHT MODE (Default) --- */
/* Primary: Solid bg fill, dark text */
.btn-primary {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
}
.btn-primary:hover {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.15);
}

/* Secondary: Transparent, dark outline, dark text */

/* --- FOOTER BUTTONS (Always acts as Dark Secondary) --- */




/* ================= UPGRADED EXPERIENCE CSS ================= */



.exp-horizontal-track::before,













/* Floating Modal */

/* ================= END UPGRADED EXPERIENCE CSS ================= */


/* ----- */

/* ================= DYNAMIC DOCK CSS ================= */
.dock-solid-white {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #ffffff;
  border-radius: 24px;
  padding: 12px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.12);
  /* The transition is handled via GSAP Flip, but we can have a basic transition for colors if needed */
}
.dock-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}
/* Ripple: gray-bordered, transparent rounded rects that expand uniformly out
   from the dock edge and fade — replaces the drop shadow as the dock's
   presence cue. Three staggered rings on a gentle loop. */
@keyframes dockRipple {
  0%   { inset: 0;      border-radius: 24px; opacity: 0; }
  15%  { opacity: 0.5; }
  100% { inset: -20px;  border-radius: 44px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-ripple { display: none; }
}
/* Each button rests as a 40x40 circle (border-radius is a fixed px, not a
   %, so it stays perfectly round when square and becomes a pill once the
   label expands it wider than it is tall — no shape transition needed). */
.dock-btn {
  background: transparent;
  border: none;
  border-radius: 20px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

/* Dock Brand */

/* Dock CTAs */
.dock-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 2px;
}

.dock-cta-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid rgba(0,0,0,0.15);
}
.dock-cta-secondary:hover {
  background: #f4f4f4;
  border-color: rgba(0,0,0,0.25);
}

/* Same dark-glass treatment as the hero greeting bubble and the footer's
   pitch card: translucent black, hairline border, small mesh-gradient glow. */
.dock-cta-primary {
  position: relative;
  overflow: hidden;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}
.dock-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(178, 171, 242, 0.4), transparent 35%),
              radial-gradient(circle at 15% 85%, rgba(22, 84, 66, 0.4), transparent 35%);
  pointer-events: none;
  z-index: 0;
}
.dock-cta-primary .dock-cta-label,
.dock-cta-primary .dock-cta-mail-icon,
.dock-cta-primary .dock-cta-arrow-box {
  position: relative;
  z-index: 1;
}
.dock-cta-primary:hover {
  background: rgba(24, 24, 24, 0.95);
  border-color: rgba(255,255,255,0.22);
}

/* Mail icon shown in place of the arrow on the mobile icon-only CTA — an
   arrow alone doesn't mean "contact me" once the "Let's Talk" label is
   hidden, so this swaps in on small screens instead (see media query). */
.dock-cta-mail-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

/* CTA Arrow animation */
.dock-cta-arrow-box {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dock-cta-arrow, .dock-cta-arrow-hover {
  position: absolute;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.dock-cta-arrow-hover {
  transform: translate(-100%, 100%);
}
.dock-cta-primary:hover .dock-cta-arrow {
  transform: translate(100%, -100%);
}
.dock-cta-primary:hover .dock-cta-arrow-hover {
  transform: translate(0, 0);
}
.dock-cta-next .dock-cta-arrow-hover {
  transform: translate(-100%, 0);
}
.dock-cta-next:hover .dock-cta-arrow {
  transform: translate(100%, 0);
}
.dock-cta-next:hover .dock-cta-arrow-hover {
  transform: translate(0, 0);
}
.dock-btn:hover {
  background: #f0f0f0;
  color: #000;
}
.dock-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dock-btn-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  transition: max-width 0.3s cubic-bezier(.4,0,.2,1), margin-left 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
}
.dock-btn:hover .dock-btn-label,
.dock-btn:focus-visible .dock-btn-label {
  max-width: 120px;
  margin-left: 7px;
  opacity: 1;
}
.dock-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  margin-right: 8px;
}
#dock-context-toc {
  flex: 1;
  min-width: 0;
}
/* .sb-toc-link was built for a vertical sidebar list; scoped here so it
   behaves as a horizontal, non-wrapping row of flex items instead. */
#dock-context-toc .sb-toc-link {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Reading-progress fill along the bottom inner edge of the pill —
   only ever shown while a case study with sections is open. */
.dock-progress {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
  height: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.dock-progress.is-visible {
  opacity: 1;
}
.dock-progress-fill {
  height: 100%;
  width: 100%;
  background: #0a0a0a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
}
.dock-divider {
  width: 1px;
  height: 24px;
  background: #eaeaea;
  margin: 0 4px;
}
.dock-clock {
  font-family: var(--ui);
  font-size: 14px;
  color: #666;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}
#dockSearchInput {
  border: none;
  background: transparent;
  font-family: var(--ui);
  font-size: 15px;
  color: #333;
  width: 260px;
  padding: 8px;
  outline: none;
}
.dock-btn-close {
  background: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.dock-btn-close:hover {
  background: #f0f0f0;
  color: #333;
}
.dock-search-results {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  padding: 8px;
}
.dock-search-results.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ds-item {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
  display: block;
  text-decoration: none;
}
.ds-item:hover {
  background: #f5f5f5;
}
.ds-title {
  font-family: var(--head);
  font-size: 15px;
  color: #000;
  margin-bottom: 4px;
}
.ds-desc {
  font-family: var(--ui);
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-empty {
  padding: 16px;
  text-align: center;
  color: #666;
  font-family: var(--ui);
  font-size: 13px;
}

/* ================= OVERRIDE EXP STYLES ================= */

/* Ensure the horizontal track scrolls properly but aligns center if space permits */

.exp-horizontal-track::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1200px) {
  
}
/* Completely static cards - rip out the hover */



/* ================= PROPER OVERRIDES ================= */




.exp-horizontal-track::-webkit-scrollbar {
  display: none;
}






/* Make badge size match 3 lines of text. 3 lines * ~20px = ~60px */








/* Subtle left accent bar */






/* ── Header: badge + text ── */








/* ── Body: tags & desc ── */











.exp-horizontal-track::-webkit-scrollbar { display: none; }





/* Accent left border — only on hover */



/* ── Header ── */


/* Badge: fixed square, fills its box, matches sidebar logo scale */






/* Typography: directly inherits from design system rules */
/* .exp-role  → font-size:15px, weight:500, var(--fg)  */
/* .exp-co    → font-size:11px, weight:500, var(--fg)  */
/* .exp-yr    → font-size:9px, uppercase, var(--muted) */
/* No overrides needed — they are already defined above  */

/* ── Footer: chips ↔ desc crossfade ── */




/* Journey resume-strip chips: same family as the canonical chip, scaled
   down to fit the compact 240px cards. Sentence case, no shouting. */
.pc-chip-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: 0.7;
}
.pc-chip:hover {
  color: var(--card-accent, var(--a1));
  border-color: var(--card-accent, var(--a1));
  transform: translateY(-1px);
}
.pc-chip:hover .pc-chip-icon {
  opacity: 1;
  color: var(--card-accent, var(--a1));
}



/* Darken overlay so white cards read well over the photo */


/* Push track above overlay */
/* ── Card hover states (properly prefixed) ── */
/* ============================================================
   EXPERIENCE SECTION
   ============================================================ */

#s-experience {
  /* Removed from the page — the hero credential dossier now carries this.
     Hidden (not deleted) since it's been toggled on/off before. */
  display: none;
  margin: 16px;
  border-radius: 24px;
  padding: 52px 0;
  overflow: hidden;
  position: relative;
  background-image: url('assets/home-experience-bg.jpeg');
  background-size: cover;
  background-position: 50% 50%;
}

/* Cards carry their own near-opaque surface, so the photo runs at full strength */

/* Keep heading and track above the scrim */
.tgrid-heading,
.exp-horizontal-track {
  position: relative;
  z-index: 1;
}

/* ── Horizontal scroll track ──
   Cards size to their content (header + chips); the description is a hover
   tooltip, not inline, so there's no growth to reserve space for. Height is
   intrinsic — no dead space below the row. */
.exp-horizontal-track {
  display: flex;
  gap: 12px;
  height: auto;
  padding: 0 24px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  align-items: stretch;
  /* Center when cards fit, scroll when they don't */
  justify-content: safe center;
}
.exp-horizontal-track::-webkit-scrollbar { display: none; }

/* ── Card shell ── */
.exp-h-card {
  flex: 0 0 240px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  background: rgba(255,255,255,0.92);
  padding: 14px;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.exp-h-card:hover {
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ── Header row: logo + text ── */
.exp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exp-logo-box {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-badge {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-card-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}




.exp-h-card:hover .exp-toggle-icon {
  color: var(--fg);
}

.exp-h-card.open .exp-plus-vert {
  transform: rotate(90deg);
}

/* Typography — matches design system exactly */
/* .exp-role  → already defined: 15px, 500, var(--fg), -0.02em */
/* .exp-co    → already defined: 11px, 500, var(--fg) */
/* .exp-yr    → already defined: 9px, uppercase, var(--muted) */
/* Override margins only, to tighten the stack */
.exp-card-titles .exp-role {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-card-titles .exp-co {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-card-titles .exp-yr {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Footer: chips are permanent, the story simply appears below them on
   hover — no crossfade, no collapsing. The row's fixed height (above) is
   what absorbs the card's growth so the rest of the page never moves. ── */
.exp-card-foot {
  position: relative;
}

.exp-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Chips use pc-chip class from design system — no overrides needed */

/* Description is now surfaced as a cursor-following tooltip on card hover
   (see initJourneyHover) — same pattern as the careers-timeline chips.
   Kept in the DOM (JS reads its text) but not rendered inline. */
.exp-desc-panel {
  display: none;
}

.exp-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
  font-family: var(--ui);
}


/* ============================================================
   SELECTED WORK — grid, rebalanced toward story over image
   ============================================================ */
/* Wide, short band — enough to show the work without it taking over */
/* Org badge + name — same shape/size language as .exp-logo-box in the
   Experience section, so the two read as one system. */
@media (max-width: 900px) {
  .selwork-list { grid-template-columns: 1fr; padding: 0 20px; }
  .selwork-more { padding: 28px 20px 0; }
}

/* ============================================================
   ABOUT — career timeline, projects mapped to the era they came from
   ============================================================ */
/* ── Career Stats Grid ── */
.career-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.career-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.career-stat-card:hover {
  background: rgba(0,0,0,0.05); /* slightly darker than --panel */
  transform: translateY(-4px);
}
.root[data-palette="dark"] .career-stat-card:hover {
  background: rgba(255,255,255,0.08);
}
.career-stat-icon {
  width: 24px;
  height: 24px;
  color: var(--muted);
  margin-bottom: 8px;
}
.career-stat-num {
  font-family: var(--serif-display);
  font-size: 32px;
  color: var(--fg);
  line-height: 1;
}
.career-stat-label {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .career-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .career-stats-grid {
    grid-template-columns: 1fr;
  }
}

.ab-timeline {
  display: flex;
  flex-direction: column;
}
.ab-tl-item {
  display: flex;
  gap: 20px;
}
.ab-tl-rail {
  position: relative;
  width: 48px; /* Match new logo width */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.ab-tl-rail::before {
  content: '';
  position: absolute;
  top: 56px; /* 48px logo + margin */
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.ab-tl-item:last-child .ab-tl-rail::before {
  display: none;
}
.ab-tl-content {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-bottom: 28px;
}
.ab-tl-date {
  font-family: var(--ui);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.ab-tl-role {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 4px;
}
.ab-tl-org {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px;
}
.ab-tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0; /* Important for grid transition */
}

/* Accordion Specifics for Career Timeline */
.ab-tl-chips-wrapper {
  display: grid;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ab-tl-chips-wrapper > .ab-tl-chips {
  overflow: hidden;
}

#careerTimeline .ab-tl-item {
  cursor: pointer;
  border-radius: 12px;
  padding: 12px;
  margin: -12px -12px 16px -12px; /* offset padding */
  transition: background 0.3s ease;
}
/* .ab-timeline has no side padding of its own (it sits in a full-bleed
   mobile section), so the -12px offset above pushed every row past the
   screen edge on phones. Give it a gutter to absorb the offset instead. */
@media (max-width: 620px) {
  .ab-timeline { padding: 0 20px; }
}

#careerTimeline .ab-tl-item:hover {
  background: var(--panel);
}

#careerTimeline .ab-tl-item:not(.is-expanded) .ab-tl-chips-wrapper {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

#careerTimeline .ab-tl-item.is-expanded .ab-tl-chips-wrapper {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
  transform: translateY(0);
  pointer-events: auto;
}

/* Make sure the last item's padding bottom aligns well in accordion mode */
#careerTimeline .ab-tl-item:not(.is-expanded) .ab-tl-content {
  padding-bottom: 4px;
}

/* Accordion Toggle Icon */
.ab-tl-toggle {
  position: absolute;
  top: -2px;
  right: 0;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: color 0.2s ease;
}
#careerTimeline .ab-tl-item:hover .ab-tl-toggle {
  color: var(--fg);
}
.ab-tl-toggle svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#careerTimeline .ab-tl-item:not(.is-expanded) .toggle-icon-minus {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
#careerTimeline .ab-tl-item:not(.is-expanded) .toggle-icon-plus {
  opacity: 1;
  transform: rotate(0) scale(1);
}
#careerTimeline .ab-tl-item.is-expanded .toggle-icon-minus {
  opacity: 1;
  transform: rotate(0) scale(1);
}
#careerTimeline .ab-tl-item.is-expanded .toggle-icon-plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
/* Sub-roles held during one degree/era — indented under the parent dot
   with their own light connecting line, so it reads as "part of" rather
   than a separate top-level moment in the career. */
.ab-tl-chip {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border-glass);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ab-tl-chip:hover {
  border-color: var(--a1);
  color: var(--a1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
/* Real work, no dedicated case study — informational only (hover for a
   one-line synopsis), visually quieter and not mistaken for a live link. */



/* ══════════════════════════════════════════
   OFF THE CLOCK
══════════════════════════════════════════ */
.otc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 24px;
}
/* Same card DNA as .lab5-card (Selected Work): framed media, serif title,
   muted one-liner, black arrow-button action row. Fewer fields (no
   logo/stat chips - there's no org or metric to show here) and full-bleed
   square media instead of the padded/inset treatment, since these are
   real photos/illustrations/frames rather than product screenshots that
   need breathing room on a color field. */
.otc-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}
.otc-card:hover {
  transform: translateY(-4px);
}
.otc-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: #f4f4f5;
  border: 1px solid rgba(0,0,0,0.05);
  background-size: cover;
  background-position: center;
}
.otc-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.otc-title {
  font-family: var(--serif-display);
  font-size: 26px;
  font-weight: normal;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0;
  line-height: 1.2;
}
.otc-desc {
  font-family: var(--ui);
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .otc-grid { grid-template-columns: 1fr; gap: 40px; }
  .otc-title { font-size: 24px; }
}

/* ══════════════════════════════════════════
   TESTIMONIALS SPLIT DECK
══════════════════════════════════════════ */
.tm-split-container {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 60px;
  align-items: center;
  max-width: 972px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 900px) {
  .tm-split-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.tm-split-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tm-split-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0;
}

.tm-nav-controls {
  display: flex;
  gap: 12px;
}

.tm-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  border: 1px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
  overflow: hidden;
  position: relative;
}

.tm-nav-btn:hover {
  transform: scale(1.05);
  background: #f4f4f4;
}

.tm-nav-btn svg {
  width: 20px;
  height: 20px;
}

#tm-prev:hover svg {
  animation: arrowShootLeft 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#tm-next:hover svg {
  animation: arrowShootRight 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes arrowShootLeft {
  0% { transform: translateX(0); }
  40% { transform: translateX(-120%); opacity: 0; }
  41% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes arrowShootRight {
  0% { transform: translateX(0); }
  40% { transform: translateX(120%); opacity: 0; }
  41% { transform: translateX(-120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.tm-deck {
  position: relative;
  width: 100%;
  height: 520px;
}

@media (max-width: 900px) {
  .tm-deck {
    height: 560px;
  }
}

.tm-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), 
              opacity 0.7s ease, 
              filter 0.7s ease;
  transform-origin: top center;
  will-change: transform, opacity, filter;
}

.tm-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

.tm-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tm-portrait {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.tm-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.tm-name {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: #111;
}

.tm-role {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.tm-quote-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tm-quote {
  font-family: var(--serif-display);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.4;
  font-weight: 300;
  color: #111;
  margin: 0;
}

.tm-context {
  font-family: var(--ui);
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

@keyframes spinIconAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.tm-spin-icon {
  animation: spinIconAnim 12s linear infinite;
  display: inline-block;
}

/* ================= NODE GRAPH TIMELINE CSS ================= */

/* Branch Lines */




/* Mobile Fallback */
@media (max-width: 768px) {
  .nt-era, .nt-era.nt-alt {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .nt-left, .nt-right {
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .nt-left::after, .nt-right::after {
    display: none;
  }
  .nt-axis-bg, .nt-axis-fill {
    left: 40px;
    display: none; /* simpler on mobile to just stack */
  }
}

/* Hover Modal */
.hover-modal {
  position: fixed;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 16px;
  width: 300px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.hover-modal.is-visible {
  opacity: 1;
  transform: scale(1);
}
.hover-modal h4 {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 6px 0;
}
.hover-modal p {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Chip Icons */
.ab-tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ab-tl-chip svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.ab-tl-chip:hover svg {
  opacity: 1;
}

/* Timeline Logo Badges */
/* Timeline Logo Badges */
.ab-tl-logo {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 8px; /* Sleek rounded square */
  border: 1px solid var(--border-glass);
  background: #fff;
  object-fit: cover;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  margin-top: 0;
  z-index: 1;
  flex-shrink: 0;
}
.ab-tl-rail::before {
  top: 56px; /* Just in case it overrides the other one */
}

/* Override chip hover to be bold instead of red */
.ab-tl-chip {
  box-sizing: border-box;
}
.ab-tl-chip:hover {
  border-color: var(--fg) !important;
  color: var(--fg) !important;
  font-weight: 600 !important;
  border-width: 2px !important;
  padding: 5px 13px !important;
}

/* Remove grayscale filter from gallery images */

/* Skills chips: canonical chip, but with an opaque light fill because
   this cluster sits on the dark About photo (a translucent --panel fill
   would wash out). That solid fill is the one intentional delta. */




.m-methods { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; background: var(--bg2); border-radius: 8px; border: 1px solid var(--line); margin-top: 16px; }
.m-methods-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; flex-shrink: 0; margin: 0; }
.m-methods-list { font-size: 13px; color: var(--fg); line-height: 1.5; margin: 0; }
@media (max-width: 600px) {
  .m-methods { flex-direction: column; gap: 4px; }
}

.m-testimonial { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:24px 28px; margin:20px 0; display:flex; flex-direction:column; }
.m-testimonial-quote { font-family:var(--serif-display); font-size:16px; font-style:italic; line-height:1.6; color:var(--fg); margin:0 0 20px; opacity:.9; }
.m-testimonial-img { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.m-testimonial-name { font-size:11px; font-weight:600; color:var(--fg); margin:0; }
.m-testimonial-role { font-size:9.5px; color:var(--muted); margin:0; line-height:1.3; }

/* ── mobile hero (kept at end of file so it wins the cascade) ──────────
   Same structure and word flow as desktop, scaled to fit the viewport.
   Root cause of the old overflow: .hero-photo-cluster's fixed 600px width
   forced .hero-content to ~720px on a 375px screen. */
@media (max-width: 768px) {
  .hero-content { width: 100%; max-width: 100%; padding: 0 20px 48px; }
  .hero-photo-cluster { width: 100%; max-width: 320px; margin: 0 auto 20px; }
  .hero-out-of-bounds-wrap { width: 190px; height: 170px; }
  .pill-bg-mask { height: 86px; border-radius: 43px; }
  .pill-fg-mask { height: 86px; clip-path: inset(-160px 0 0 0 round 0 0 43px 43px); }
  .hero-greeting { left: auto; right: -77px; top: 14px; font-size: 12px; padding: 8px 12px; }
  .hero-headline { font-size: clamp(26px, 7.6vw, 34px); max-width: 100%; line-height: 1.15; }
  .hero-chips { margin: 20px 0 24px; gap: 6px; }
  .hero-chip { font-size: 10px; }
  .hero-cta-row { margin-top: 24px; }
}

/* ── playhead dock: chapter strip ──────────────────────────
   The strip is a scrubber for the page. Segments = sections,
   widths proportional to scroll length, playhead = reader. */
.dock-strip {
  position: relative;
  flex: 1; width: auto; height: 40px;
  min-width: 280px;
  display: flex; align-items: center; gap: 3px;
  padding: 0 6px;
  cursor: pointer;
  touch-action: none;
  flex-shrink: 0;
}
.dock-seg {
  position: relative;
  flex-grow: 1; flex-basis: 0; min-width: 26px;
  height: 22px;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.dock-seg::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px; border-radius: 2px;
  background: rgba(10,10,10,0.14);
  transition: background .2s ease, height .15s ease;
}
.dock-seg:hover::before { background: rgba(10,10,10,0.32); height: 6px; }
.dock-seg.is-active::before { background: rgba(10,10,10,0.55); }
.dock-seg:focus-visible { outline: none; }
.dock-seg:focus-visible::before { outline: 2px solid #0a0a0a; outline-offset: 3px; }
.dock-playhead {
  position: absolute; top: 50%; left: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #0a0a0a; border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(10,10,10,0.12);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 2;
  transition: transform .15s ease;
}
.dock-strip.is-scrubbing .dock-playhead { transform: translate(-50%, -50%) scale(1.35); }
.dock-strip-preview {
  position: absolute;
  bottom: calc(100% + 10px); left: 0;
  transform: translateX(-50%);
  background: #0a0a0a; color: #ffffff;
  font-family: var(--ui); font-size: 11px; font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 10px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.dock-strip-preview.is-visible { opacity: 1; }
.dock-section-label {
  font-family: var(--serif-display); font-size: 19px; font-weight: 500;
  color: var(--fg);
  flex-shrink: 0;
  text-align: left;
  margin-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .dock-solid-white { padding: 8px 12px; bottom: 16px; max-width: calc(100vw - 20px); width: calc(100vw - 20px); }
  .dock-clock { display: none; }
  .dock-inner > .dock-divider { display: none; }
  /* Truncated instead of hidden — without a name attached, the strip reads
     as decoration rather than "you are here" navigation. */
  .dock-section-label { flex-shrink: 1; min-width: 0; max-width: 110px; font-size: 13px; margin-right: 6px; }
  .dock-inner { width: 100%; }
  .dock-strip { flex: 1 1 auto; width: auto; min-width: 70px; }
  .dock-seg { min-width: 14px; }
  /* CTAs were still full desktop width (icon + label) here, which pushed
     "Let's Talk" and the search button off the right edge of the screen —
     the aria-label keeps them accessible with the text gone. */
  .dock-cta { width: 36px; height: 36px; padding: 0; margin-left: 0; justify-content: center; border-radius: 50%; }
  .dock-cta-label { display: none; }
  .dock-cta-secondary svg { margin-right: 0 !important; }
  /* Resume just needs to exist on desktop — dropping it on mobile buys
     the section label room to breathe instead of truncating hard. */
  #dock-default .dock-cta-secondary { display: none; }
  /* An arrow alone doesn't say "contact" once "Let's Talk" is gone. */
  .dock-cta-primary .dock-cta-arrow-box { display: none; }
  .dock-cta-primary .dock-cta-mail-icon { display: flex; }
  /* Keyboard hints (←/→/ESC) don't apply on touch and were overlapping the
     context dock at the bottom of the screen. */
  #keyHints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-playhead, .dock-seg::before, .dock-strip-preview { transition: none; }
}

/* Clock: smaller and never wrapping — "9:41 PM" was folding to two lines
   next to the strip. */
.dock-clock { font-size: 12px; white-space: nowrap; padding: 0 8px; flex-shrink: 0; }

/* ── drawer strip (context mode) ───────────────────────────
   Same strip grammar as page mode; more room since there are
   fewer chrome items when a study is open. */
#dock-context .dock-strip { width: 320px; }
#dock-context .dock-seg { min-width: 12px; }
@media (max-width: 768px) {
  .dock-study-title { display: none; }
  #dock-context .dock-strip { flex: 1 1 auto; width: auto; min-width: 90px; }
}

/* Study logo in the context dock — same rounded-rect badge treatment as the
   org logo on its Selected Work card (.lab5-logo / .hcred-logo), so the dock
   stays visually consistent with the rest of the site. */
.dock-study-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: #fff; border: 1px solid var(--border-glass);
  margin-right: 8px;
}
@media (max-width: 768px) {
  .dock-study-logo { display: none !important; }
}

/* ── DOCK LIVE BORDER ────────────────────────────────────────
   A scroll-reactive rim light. As you scroll the page, a soft
   pastel highlight orbits the dock's perimeter — its position
   mapped to scroll progress — glowing while scrolling and fading
   when you stop. The masked pseudo shows the gradient as a ring
   only. Driven by --mx/--my (point on the perimeter) and --edge
   (0..1 glow strength), set in initDockBorder(). Colors are the
   pastel stops of the hero accents (amber / coral / lavender / mint). */
#dynamic-dock { --mx: 50%; --my: 100%; --edge: 0; }
#dynamic-dock::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 2px;
  background: radial-gradient(140px circle at var(--mx) var(--my),
    rgba(255, 179, 71, 1), rgba(255, 153, 153, 0.9) 30%,
    rgba(178, 171, 242, 0.8) 55%, rgba(117, 219, 185, 0.6) 75%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--edge);
  pointer-events: none;
  transition: opacity .4s ease;
  animation: dockEdgeDrift 6s ease-in-out infinite;
}
@keyframes dockEdgeDrift { 0%,100% { filter: hue-rotate(-8deg); } 50% { filter: hue-rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { #dynamic-dock::after { animation: none; } }

/* ── card clip: calm poster by default, plays in place on hover ── */

/* ═════════�  .lab5-card[data-id="nest"] .lab5-video-wrapper,
  .lab5-card[data-id="indyquest"] .lab5-video-wrapper {
    aspect-ratio: 16/9;
  }
}

/* ── GLOBAL SCROLL FLY-THROUGH EFFECT ── */

/* ── BOTTOM DOCK BLUR MASK ── */
/* NOTE: the real .bottom-blur lives further down (single source of truth).
   The old duplicate here carried an opaque paper-white gradient that sat on
   top of the backdrop-filter and read as a flat white fade — removed. */

#s-experience {
  margin-top: -15vh;
  position: relative;
  z-index: 10;
}

#s-selected-work {
  padding: 80px 0;
}

.lab5-container {
  width: 100%;
  max-width: 972px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 40px;
}

.lab5-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  cursor: pointer;
  transition: transform 0.3s ease;
  grid-column: span 2;
}

.lab5-card[data-id="nest"],
.lab5-card[data-id="indyquest"] {
  grid-column: span 1;
}
.lab5-card:hover {
  transform: translateY(-4px);
}

.lab5-media {
  width: 100%;
  position: relative;
  padding: clamp(30px, 4.5vw, 60px) clamp(40px, 6vw, 80px);
  border-radius: 24px;
  overflow: hidden;
  background: #f4f4f5;
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes pastelShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.lab5-video-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  background: transparent;
  transition: transform 0.4s ease;
}

.lab5-video-wrapper video {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transform: translateY(150%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.lab5-thumbnail-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.lab5-thumbnail-overlay img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.lab5-card[data-id="stewlab"] .lab5-thumbnail-overlay img,
.lab5-card[data-id="redlab"] .lab5-thumbnail-overlay img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}

/* Hover States */
.lab5-card:hover .lab5-thumbnail-overlay {
  transform: translateY(-150%);
}
.lab5-card:hover .lab5-video-wrapper video {
  transform: translateY(0);
}

.lab5-card[data-id="nest"] .lab5-media,
.lab5-card[data-id="indyquest"] .lab5-media {
  padding: clamp(20px, 3vw, 40px);
}

.lab5-card[data-id="indyquest"] .lab5-media {
  background-size: 140% !important;
  background-position: center center !important;
  background-color: #2d1b5e !important;
}

.lab5-card[data-id="nest"] .lab5-video-wrapper,
.lab5-card[data-id="indyquest"] .lab5-video-wrapper {
  aspect-ratio: 1/1;
}

.lab5-card[data-id="nest"] .lab5-video-wrapper video,
.lab5-card[data-id="indyquest"] .lab5-video-wrapper video {
  transform: translateY(0);
  transition: none;
}
.lab5-card[data-id="nest"]:hover .lab5-video-wrapper video,
.lab5-card[data-id="indyquest"]:hover .lab5-video-wrapper video {
  transform: translateY(0);
}

/* Stewlab and MathWorks don't have a video, so freeze their thumbnail on hover */
.lab5-card[data-id="stewlab"] .lab5-thumbnail-overlay,
.lab5-card[data-id="stewlab"]:hover .lab5-thumbnail-overlay,
.lab5-card[data-id="mathworks"] .lab5-thumbnail-overlay,
.lab5-card[data-id="mathworks"]:hover .lab5-thumbnail-overlay {
  transform: translateY(0) !important;
}

.lab5-card:hover .lab5-video-wrapper {
  transform: scale(1.03);
}

.lab5-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px;
}

.lab5-context {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.lab5-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.lab5-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Card meta as chips (unified chip system), not bulleted text. */
.lab5-stat {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border-glass);
  padding: 4px 11px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  white-space: nowrap;
}

.lab5-desc { 
  font-family: var(--ui); 
  font-size: 16px; 
  color: var(--muted); 
  margin: 0; 
  line-height: 1.5;
}

.lab5-title {
  font-family: var(--serif-display);
  font-size: 34px;
  font-weight: normal;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0;
  line-height: 1.2;
}

.lab5-action {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}
.lab5-action:hover {
  opacity: 0.8;
}

.lab5-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  margin-left: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}
.lab5-arrow-btn svg {
  width: 13px;
  height: 13px;
}
.lab5-card:hover .lab5-arrow-btn {
  transform: scale(1.05);
}
.lab5-card:hover .lab5-arrow-btn svg {
  animation: arrowShoot 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes arrowShoot {
  0% { transform: translate(0, 0); }
  40% { transform: translate(120%, -120%); opacity: 0; }
  41% { transform: translate(-120%, 120%); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@media (max-width: 1000px) {
  #s-selected-work {
  padding: 80px 0;
}

.lab5-container { padding: 0 20px; }
  .lab5-title { font-size: 28px; }
}

@media (max-width: 768px) {
  #s-selected-work {
  padding: 80px 0;
}

.lab5-container {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }
  .lab5-card[data-id="nest"],
  .lab5-card[data-id="indyquest"] {
    grid-column: span 2;
  }
  .lab5-card[data-id="nest"] .lab5-video-wrapper,
  .lab5-card[data-id="indyquest"] .lab5-video-wrapper {
    aspect-ratio: 16/9;
  }
}

/* ── GLOBAL SCROLL FLY-THROUGH EFFECT ── */

/* ── BOTTOM DOCK BLUR MASK ── */
.bottom-blur {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  pointer-events: none;
  z-index: 90; /* Just below the dock which is 100 */
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  /* Only a whisper of tint so it reads as frosted glass, not a white wash.
     The mask fades the whole effect out toward the top. */
  background: linear-gradient(to top, rgba(250, 248, 245, 0.18) 0%, rgba(250, 248, 245, 0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
}

/* ── Creative Scroll Indicator ── */
.scroll-pulse-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto 20px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  user-select: none;
}
.scroll-pulse-wrapper:hover {
  opacity: 1;
}

.scroll-pulse-track {
  width: 1px;
  height: 90px;
  background: rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.scroll-pulse-thumb {
  position: absolute;
  top: -30%;
  left: -1px;
  width: 3px;
  height: 30%;
  background: linear-gradient(to bottom, transparent, #111, transparent);
  animation: scroll-drop 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  border-radius: 4px;
}

@keyframes scroll-drop {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(450%); opacity: 0; }
}


/* ── How I Work Section ── */

.hiw-header {
  margin-bottom: 48px;
}


.hiw-headline {
  font-family: var(--serif-display);
  font-size: clamp(32px, 4vw, 42px);
  color: var(--fg);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 16px;
}

.hiw-subhead {
  font-family: var(--ui);
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Hover Swap Effect */
.hiw-hover-swap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 16px;
  width: 100%; /* Take full width of container */
  cursor: default;
  /* Define transition and fallback variables */
  --t-bounce: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --img-w: 220px;
  --gap: 16px;
  --text1-w: 500px; /* Fallback */
  --text2-w: 500px; /* Fallback */
}
.hiw-line {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  width: 100%; /* Take full width */
}

/* Line 1: Text then Image */
.hiw-line-1 .hiw-hover-text {
  transition: var(--t-bounce);
}
.hiw-line-1 .hiw-img {
  transition: var(--t-bounce);
}

.hiw-hover-swap:hover .hiw-line-1 .hiw-hover-text {
  transform: translateX(calc(var(--img1-w) + var(--gap)));
}
.hiw-hover-swap:hover .hiw-line-1 .hiw-img {
  transform: translateX(calc(-1 * (var(--text1-w) + var(--gap))));
}

/* Line 2: Image then Text */
.hiw-line-2 .hiw-hover-text {
  transition: var(--t-bounce);
}
.hiw-line-2 .hiw-img {
  transition: var(--t-bounce);
}

.hiw-hover-swap:hover .hiw-line-2 .hiw-hover-text {
  transform: translateX(calc(-1 * (var(--img2-w) + var(--gap))));
}
.hiw-hover-swap:hover .hiw-line-2 .hiw-img {
  transform: translateX(calc(var(--text2-w) + var(--gap)));
}

.hiw-img {
  height: 64px;
  flex-grow: 1; /* Automatically expand to fill all remaining space */
  width: 0; /* Ensures it shrinks below intrinsic width if needed */
  max-width: none;
  object-fit: cover; /* Responsive horizontal crop */
  border-radius: 16px;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.hiw-hover-swap:hover .hiw-img {
  opacity: 1;
}

.hiw-hover-text {
  font-family: var(--serif-display);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

/* The hover-swap is a mouse-only trick (text slides to reveal the image);
   on touch it never triggers, and the nowrap headline just overflowed the
   viewport. Drop the images and let the two lines wrap as plain text. */
@media (max-width: 620px) {
  .hiw-hover-text { white-space: normal; font-size: 26px; }
  .hiw-img { display: none; }
  .hiw-hover-swap:hover .hiw-line-1 .hiw-hover-text,
  .hiw-hover-swap:hover .hiw-line-2 .hiw-hover-text {
    transform: none;
  }
}







/* Responsive Breakdown */
@media (max-width: 900px) {
  .hiw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ── Hero Image Trail ── */
.trail-img {
  position: absolute;
  width: 180px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  /* Use hardware acceleration for smoother animation */
  will-change: transform, opacity;
  animation: trail-fade var(--trail-dur, 1.2s) forwards cubic-bezier(0.16, 1, 0.3, 1);
  /* A tiny border to make the images pop */
  border: 4px solid #fff;
}

@keyframes trail-fade {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(var(--trail-scale-start, 0.5)) rotate(var(--trail-rot, 0deg)); 
  }
  10% { 
    opacity: var(--trail-opacity, 1); 
    transform: translate(-50%, -50%) scale(var(--trail-scale-mid, 1)) rotate(var(--trail-rot, 0deg)); 
  }
  60% { 
    opacity: var(--trail-opacity, 1); 
    transform: translate(-50%, -50%) scale(var(--trail-scale-mid, 1)) rotate(var(--trail-rot, 0deg)); 
  }
  100% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(var(--trail-scale-end, 0.9)) translateY(20px) rotate(var(--trail-rot, 0deg)); 
  }
}


/* ── BENTO FINALE FOOTER ────────────────────────────────── */
/* One flat black section, edge-to-edge, sharp corners — not a floating
   rounded card. Body/.root carry no side padding, so width:100% is already
   full-bleed; the black fill lives on the footer itself now, and the grid
   below is just an inset content column. */
.bento-footer {
  width: 100%;
  margin: 120px 0 0;
  padding: 60px 40px 0;
  background-color: #0a0a0a;
  background-image: url('assets/home-footer-bg.jpg');
  background-position: bottom center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.bento-f-grid {
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin: 0 auto 24px;
}

/* Zones read as flat panels within the black section (subtle fill + hairline,
   no radius) rather than separate rounded boxes floating on white. */
.bento-f-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  /* Rounded to match the rest of the site's card/panel language — only the
     outer .bento-footer section itself stays sharp-cornered. */
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Zone 1: Pitch */
.bento-pitch {
  grid-row: span 2;
  min-height: 360px;
}

.bento-f-mesh {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 80%, rgba(178, 171, 242, 0.2), transparent 50%),
              radial-gradient(circle at 20% 20%, rgba(117, 219, 185, 0.15), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bento-f-status {
  position: relative;
  z-index: 1;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  align-self: flex-start;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.bento-f-headline {
  position: relative;
  z-index: 1;
  font-family: var(--ui);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
  margin: 40px 0 0 0;
}
.bento-f-headline em {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: normal;
  color: #fff;
}

/* Zone 2: CTA */
.bento-cta-card.cal-trigger {
  padding: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: left;
}
.bento-cta-card.cal-trigger:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

.cal-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-cta-text h3 {
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
.cal-cta-text p {
  font-family: var(--ui);
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.cal-action-btn {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}
.cal-action-btn svg {
  width: 24px;
  height: 24px;
}
.bento-cta-card.cal-trigger:hover .cal-action-btn {
  transform: scale(1.05);
  background: rgba(255,255,255,0.2);
}
.bento-cta-card.cal-trigger:hover .cal-action-btn svg {
  animation: arrowShoot 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Zone 3: Directory */
.bento-links-card {
  min-height: 172px;
}
.bento-links-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}
.bento-link-item:hover {
  background: rgba(255,255,255,0.06);
}

button.bento-link-item {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.bento-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 8px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.bento-link-icon svg {
  width: 14px;
  height: 14px;
}
.bento-link-item:hover .bento-link-icon {
  transform: scale(1.05);
  background: rgba(255,255,255,0.2);
}
.bento-link-item:hover .bento-link-icon svg {
  animation: arrowShoot 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The Base — sits on the black footer now, so it needs light-on-dark
   contrast instead of the dark-on-white values it was written for. */
.bento-f-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 0 48px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--ui);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Responsive Breakdown */
@media (max-width: 900px) {
  .bento-f-grid {
    grid-template-columns: 1fr;
  }
  .bento-pitch {
    grid-row: span 1;
    min-height: 280px;
  }
  .bento-footer {
    padding: 72px 20px 0;
    margin-top: 80px;
  }

}
@media (max-width: 600px) {
  .bento-f-card {
    padding: 24px;
  }
  .bento-f-base {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════
   AI MODE — plain-text, dark, minimal reading view
   Hidden by default; content is static markup (not JS-built)
   so it's present in the raw HTML regardless of this CSS.
══════════════════════════════════════════ */
#ai-mode { display: none; }

body.ai-mode-active > .root,
body.ai-mode-active #dynamic-dock,
body.ai-mode-active .bottom-blur,
body.ai-mode-active #cursorDot,
body.ai-mode-active #cursorViewfinder {
  display: none !important;
}

body.ai-mode-active #ai-mode {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-y: auto;
  background: #121110;
  color: #EDE9E2;
  -webkit-font-smoothing: antialiased;
}

/* The custom cursor system hides the real OS cursor site-wide via
   .has-fine-cursor (see line ~30); restore it inside AI Mode since the
   custom cursor dot/viewfinder are hidden here too. */
body.ai-mode-active.has-fine-cursor #ai-mode,
body.ai-mode-active.has-fine-cursor #ai-mode * {
  cursor: auto !important;
}
body.ai-mode-active.has-fine-cursor #ai-mode a,
body.ai-mode-active.has-fine-cursor #ai-mode button,
body.ai-mode-active.has-fine-cursor #ai-mode summary {
  cursor: pointer !important;
}

.ai-close-x {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 20001;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #EDE9E2;
}
.ai-close-x:hover { background: rgba(255,255,255,.16); }

.ai-mode-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 64px 24px 120px;
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.75;
}

.ai-mode-inner h1 {
  font-family: var(--serif-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 8px 0 4px;
}

.ai-mode-inner h2 {
  font-family: var(--serif-display);
  font-size: 27px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.ai-mode-inner h3 {
  font-family: var(--serif-display);
  font-size: 21px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 40px 0 10px;
}

.ai-mode-inner p,
.ai-mode-inner li {
  color: #C9C4BB;
  margin: 0 0 14px;
}

.ai-mode-inner .ai-note {
  font-size: 14px;
  line-height: 1.6;
  color: #948E84;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 20px 0 40px;
}

.ai-mode-inner .ai-lede {
  font-size: 20px;
  color: #EDE9E2;
}

.ai-mode-inner .ai-stats {
  font-size: 15px;
  color: #948E84;
}

.ai-mode-inner .ai-meta {
  font-size: 13px;
  color: #948E84;
  margin-bottom: 16px;
}

.ai-mode-inner ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.ai-mode-inner a {
  color: #E4785A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-mode-inner blockquote {
  font-family: var(--serif-display);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: #EDE9E2;
  border-left: 2px solid #E4785A;
  margin: 0 0 20px;
  padding: 2px 0 2px 20px;
}

.ai-mode-inner .ai-case {
  margin-top: 20px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.ai-mode-inner .ai-case summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
}
.ai-mode-inner .ai-case summary::-webkit-details-marker { display: none; }
.ai-mode-inner .ai-case summary h3 { margin: 0; flex: 1; }
.ai-mode-inner .ai-case summary::before {
  content: '+';
  flex-shrink: 0;
  font-family: var(--ui);
  font-size: 20px;
  color: #948E84;
  width: 20px;
}
.ai-mode-inner .ai-case[open] summary::before { content: '\2212'; }
.ai-mode-inner .ai-case summary:hover h3 { color: #E4785A; }

.ai-mode-inner .ai-case-body {
  padding: 4px 0 32px 32px;
}

.ai-mode-inner .ai-nda {
  font-size: 13px;
  font-style: italic;
  color: #948E84;
}

.ai-mode-inner .ai-methods {
  font-size: 13px;
  color: #7C766C;
  margin: -4px 0 16px;
}

.ai-mode-inner .ai-exit {
  font-family: var(--ui);
  font-size: 14px;
  color: #EDE9E2;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
}
.ai-mode-inner .ai-exit:hover { background: rgba(255,255,255,.12); }
.ai-mode-inner .ai-exit { margin-top: 48px; }

@media (max-width: 640px) {
  .ai-mode-inner { padding: 48px 20px 90px; font-size: 16.5px; }
  .ai-mode-inner h1 { font-size: 34px; }
  .ai-mode-inner h2 { font-size: 23px; margin-top: 44px; }
}