/* ============================================================
   Sramana — Portfolio
   Clean, white, editorial. Sans for structure, serif italic for accent.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --card: #ffffff;
  --ink: #111111;
  --ink-2: #3a3a3a;
  --muted: #6e6e6e;
  --faint: #a3a3a3;
  --line: #ebebea;
  --line-strong: #dcdcda;
  --green: #22a06b;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .04);
  --shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 30px -12px rgba(17, 17, 17, .10);
  --shadow-lg: 0 2px 4px rgba(17, 17, 17, .04), 0 30px 60px -20px rgba(17, 17, 17, .22);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 22px -8px rgba(0, 0, 0, .45);

  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; color: var(--ink); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.025em; }
p { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
::selection { background: #111; color: #fff; }

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

/* ---------- Primitives ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); box-shadow: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 40px; padding: 0 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-dark { background: #161616; color: #fff; box-shadow: var(--shadow-btn); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 30px -10px rgba(0,0,0,.5); }
.btn-dark svg { transition: transform .25s var(--ease); }
.btn-dark:hover svg { transform: translateX(2px); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: #111; }
.btn-light:hover { transform: translateY(-1px); }
.btn-outline-light { color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-outline-light:hover { border-color: #fff; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.icon-tile {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: #161616; color: #fff;
  border-radius: 11px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.45);
  flex-shrink: 0;
}
.icon-tile svg { width: 19px; height: 19px; }
.icon-tile.sm { width: 34px; height: 34px; border-radius: 9px; }
.icon-tile.sm svg { width: 16px; height: 16px; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcloud span {
  padding: 5px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
}

.ig-link { display: inline-flex; align-items: baseline; gap: 2px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.ig-link:hover { border-bottom-color: currentColor; }
.icon-external { width: .5em; height: .5em; align-self: flex-start; margin-top: .18em; opacity: .45; flex-shrink: 0; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  margin-top: 14px;
  transition: border-color .2s;
}
.link-arrow:hover { border-color: var(--ink); }
.link-arrow svg { width: 12px; height: 12px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  height: 72px;
  display: flex; align-items: center; gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: #161616; color: #fff;
  border-radius: 8px;
  font-family: var(--serif); font-size: 18px; line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
}
.logo-word { font-family: var(--serif); font-style: italic; font-size: 20px; letter-spacing: -0.01em; }
.nav-links { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 2px; }
.nav-links a {
  display: block; padding: 8px 12px;
  font-size: 13.5px; color: var(--muted);
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); background: var(--bg-soft); }
.nav-toggle { display: none; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; }
.section-soft { background: var(--bg-soft); }
.section-soft .tagcloud span { background: var(--card); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-title {
  margin-top: 18px;
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.section-title em { font-size: 1.06em; }
.section-title.left { text-align: left; }
.section-sub { margin-top: 18px; color: var(--muted); font-size: 17px; line-height: 1.65; }

/* ---------- Hero ---------- */
.hero { padding: 24px 0 24px; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: end;
  min-height: min(640px, calc(100vh - 220px));
}
.hero-copy { align-self: start; padding: 72px 0 0 6%; max-width: 560px; }
.hero-title {
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.hero-title .ig-link { border-bottom: 1px solid var(--line-strong); }
.hero-title .ig-link:hover { border-bottom-color: var(--ink); }
.hero-headline {
  margin-top: 24px; max-width: 460px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--muted);
}
.hero-headline em { color: var(--ink); font-size: 1.12em; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; font-size: 15px; color: var(--faint); }
.hero-links a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hero-links a:hover { border-bottom-color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,160,107,.15); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,160,107,.05); } }

/* Cut-out monochrome portrait: no frame, no background — it sits straight on the page and fades out at the bottom */
.hero-visual { display: flex; justify-content: center; align-self: end; }
.hero-visual img {
  /* the side and bottom fade is baked into the PNG's alpha, so no CSS mask is needed */
  width: 100%; max-width: 470px; height: auto;
}

.hero-feats-label {
  margin-top: 48px; padding: 28px 0 0 3%;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.hero-feats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  padding: 24px 0 0 3%;
}
.hero-feat svg { width: 24px; height: 24px; color: var(--ink); }
.hero-feat h3 { margin: 16px 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
.hero-feat p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 260px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.about-head { position: sticky; top: 120px; }
.about-head .section-title { margin-bottom: 28px; }
.about-text p { color: var(--ink-2); font-size: 18px; line-height: 1.8; }
.about-text p + p { margin-top: 20px; }
.about-text .lead {
  font-family: var(--display); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.35;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 28px;
}
.about-text .lead strong { font-weight: 500; font-family: var(--serif); font-style: italic; font-size: 1.1em; }

/* ---------- LinkedIn ---------- */
.linkedin-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
.linkedin-shot {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.linkedin-shot-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fbfbfa; }
.linkedin-shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e0; }
.linkedin-shot img { width: 100%; }
.linkedin-icon { width: 36px; height: 36px; color: #0a66c2; margin-bottom: 24px; }
.linkedin-stat { font-family: var(--display); font-size: clamp(56px, 6vw, 80px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.linkedin-stat-label { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--muted); margin: 6px 0 24px; }
.linkedin-copy p { color: var(--ink-2); line-height: 1.75; margin-bottom: 32px; }

/* ---------- Skills ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skill-card { padding: 28px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.skill-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.skill-card h3 { font-size: 20px; margin: 22px 0 16px; }

.marquee { margin-top: 72px; display: flex; align-items: center; gap: 28px; max-width: var(--wrap); margin-left: auto; margin-right: auto; padding: 0 28px; }
.marquee-label { flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
.marquee-track {
  flex: 1; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; gap: 8px; padding-right: 8px; flex-shrink: 0; animation: marquee 32s linear infinite; }
.marquee-row span {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Work ---------- */
.jobs { display: flex; flex-direction: column; gap: 0; }
/* every experience is open — no toggles; each card fades in as it scrolls into view */
.job {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.job-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 24px;
  padding: 36px 44px 28px;
  border-bottom: 1px solid var(--line);
}
.job-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.job-name { font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.job-role { font-size: 16px; color: var(--muted); }
.job-date { font-size: 15px; color: var(--muted); white-space: nowrap; padding-bottom: 2px; }
.job-date:empty { display: none; }

.job-body { padding: 36px 44px 44px; }
.job-sec + .job-sec, .job-top + .job-sec { margin-top: 8px; }
.job-sec > .job-intro { font-size: 18px; }
.job-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.job-media { border-radius: 14px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.job-media video { width: 100%; height: 100%; object-fit: cover; }
.job-intro { color: var(--ink-2); font-size: 18px; line-height: 1.75; max-width: 720px; }
.job-label {
  margin: 36px 0 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.job-list { margin: 0; padding: 0; list-style: none; }
.job-list li { position: relative; padding-left: 20px; color: var(--ink-2); line-height: 1.75; font-size: 17px; }
.job-list li + li { margin-top: 8px; }
.job-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--ink); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.metric {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.metric .num { font-family: var(--display); font-weight: 500; font-size: 17.5px; letter-spacing: -0.01em; line-height: 1.35; }
.metric .desc { margin-top: 6px; font-size: 15.5px; color: var(--muted); line-height: 1.6; }

.big-picture { margin-top: 28px; padding: 24px 26px; border-radius: 14px; background: #161616; color: rgba(255,255,255,.75); }
.big-picture .job-label { margin-top: 0; color: rgba(255,255,255,.45); }
.big-picture p { line-height: 1.75; }
.big-picture strong { color: #fff; }

.freelance { margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
.freelance table { width: 100%; border-collapse: collapse; font-size: 16.5px; min-width: 560px; }
.freelance th { text-align: left; padding: 14px 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.freelance td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.freelance tr:last-child td { border-bottom: 0; }
.freelance .brand { font-weight: 500; color: var(--ink); white-space: nowrap; }
.freelance .role { color: var(--muted); white-space: nowrap; }

/* ---------- Work: long-form case study (RabbleHub) ----------
   Editorial flow: heading left / prose right, hairlines between blocks,
   thin vertical connectors, framed visuals, lots of air. */
.study { margin-bottom: 0; }
.st-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.st-label, .st-num {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}

.st-intro { padding-bottom: 8px; }
.st-name { font-size: clamp(48px, 6.4vw, 84px); line-height: .95; letter-spacing: -0.045em; }
.st-name .ig-link { display: inline; }   /* keep the arrow on the last word when a name wraps */
.st-name .icon-external { display: inline-block; vertical-align: super; width: .32em; height: .32em; margin-left: .06em; }
.st-lead { font-size: 19.5px; line-height: 1.75; color: var(--muted); max-width: 640px; }
.st-lead strong { display: block; margin-bottom: 14px; font-family: var(--display); font-size: clamp(22px, 2.2vw, 27px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }

.st-frame {
  margin: 56px 0 0;
  padding: clamp(14px, 2.4vw, 32px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.st-frame-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #e9e9e7; }

.st-block { position: relative; padding: 104px 0; border-top: 1px solid var(--line); }
.st-intro + .st-block { margin-top: 88px; }
.st-num {                   /* section numbers: large but faded, so they guide without shouting */
  margin-bottom: 10px;
  font-family: var(--display); font-size: clamp(30px, 2.8vw, 40px); font-weight: 500;
  letter-spacing: -0.02em; text-transform: none; line-height: 1;
  color: rgba(17, 17, 17, .2);
}
.st-title { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.st-title-lg { font-size: clamp(34px, 4vw, 54px); max-width: 680px; line-height: 1.05; }
.st-side { margin-top: 22px; color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 360px; }

/* a staggered heading, pushed in from the left like the reference */
.st-offset { padding-left: 16%; margin-bottom: 40px; }
.st-connector { position: absolute; top: 0; left: 8%; width: 1px; height: 72px; background: var(--line-strong); }

.st-prose { max-width: 660px; }
.st-prose p { color: var(--ink-2); font-size: 19px; line-height: 1.8; letter-spacing: -0.003em; }
.st-prose p + p, .st-prose * + p { margin-top: 22px; }
.st-big { font-family: var(--display); font-size: clamp(23px, 2.3vw, 29px) !important; line-height: 1.4 !important; letter-spacing: -0.02em; color: var(--ink) !important; }
.st-big em { font-size: 1.08em; }
.st-note { padding-left: 20px; border-left: 1px solid var(--line-strong); }
.st-note p { font-size: 17.5px; color: var(--muted); }

/* 00 stats */
.st-stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.st-stats > div { padding: 22px 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-stat { display: block; font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.st-stat-label { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.st-across { margin-top: 36px; }
.st-across-list { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 14px; font-size: 17px; }
.st-across-list span::after { content: "·"; margin: 0 12px; color: var(--faint); }
.st-across-list span:last-child::after { content: none; }

/* 02 shift table */
.st-shift { margin: 48px 0 36px 16%; max-width: 820px; }
.st-shift-head, .st-shift-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 16px; align-items: center; }
.st-shift-head { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.st-shift-row { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 17.5px; }
.st-shift-row span { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.st-shift-row svg { width: 16px; height: 16px; color: var(--ink); }
.st-shift-row strong { font-weight: 500; }

/* label / description rows (03, 06, 07) */
.st-rows .st-row, .st-qa .st-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.st-rows .st-row:first-child { border-top: 1px solid var(--line); }
.st-row strong { font-weight: 500; font-size: 17.5px; color: var(--ink); }
.st-row span { font-size: 17px; color: var(--muted); line-height: 1.7; }
.st-qa { margin: 28px 0 32px; }
.st-qa .st-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.st-results .st-row strong { font-family: var(--display); font-size: 21px; letter-spacing: -0.02em; }

/* 04 automation flow */
.st-flow-frame { margin-bottom: 40px; }
.st-flow { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: none; }
.st-flow li {
  position: relative;
  padding: 18px 16px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--display); font-weight: 500; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
}
.st-flow li + li::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 1px; background: var(--ink);
}
.st-flow-n, .st-step {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-bottom: 22px;
  border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted);
}

/* 05 funnel */
.st-funnel { margin: 48px 0 0 16%; }
.st-funnel-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 16px; border-top: 1px solid var(--ink); }
.st-funnel-steps > div { padding: 18px 16px 0 0; }
.st-funnel-steps strong { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; }
.st-step { margin-bottom: 14px; }
.st-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 56px 0 0 16%; max-width: 760px; }
.st-callouts .st-stat { font-size: clamp(36px, 4vw, 52px); }
.st-callouts p { margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 1.7; }

/* intro meta row */
.st-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
}
.st-meta dt { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.st-meta dd { margin: 10px 0 0; font-size: 16.5px; color: var(--ink); line-height: 1.5; }

/* sticky section labels — the left column stays put while the prose scrolls */
@media (min-width: 961px) {
  .st-block > .st-grid > .st-left:not(:empty) { position: sticky; top: 104px; align-self: start; }
}


/* Meta Ads Manager proof */
.st-ads {
  margin: 56px 0 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.st-ads-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #fbfbfa; border-bottom: 1px solid var(--line); }
.st-ads-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e0; }
.st-ads-bar em { margin-left: 10px; font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--muted); }
.st-ads-scroll { overflow-x: auto; }
.st-ads-shot { position: relative; min-width: 860px; }
.st-ads-shot img { width: 100%; }
.st-ads-mark {
  position: absolute; top: 45%; height: 50%;
  border: 1.5px solid var(--ink); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(17,17,17,.06);
  pointer-events: none;
}
.st-ads-mark b {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; background: #161616; color: #fff;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.st-ads-mark-results { left: 53.6%; width: 8.4%; }
.st-ads-mark-cpl { left: 80%; width: 9.6%; }
.st-ads figcaption { padding: 18px 22px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.st-ads figcaption strong { font-weight: 500; color: var(--ink); }

/* 07 timeline graphic */
.st-timeline { display: flex; flex-direction: column; justify-content: center; gap: 0; min-height: 360px; }
.st-tl-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 64px; }
.st-tl-month { height: 44px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px; }
.st-tl-month span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.st-tl-month.is-hit { background: #161616; border-color: #161616; }
.st-tl-month.is-hit span { color: #fff; }
.st-tl-pin { position: absolute; left: calc(33.33% - 18px); bottom: calc(100% + 6px); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.st-tl-pin b { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); }
.st-tl-pin i { width: 1px; height: 14px; background: var(--ink); }
.st-tl-steps { list-style: none; margin: 28px 0 0; padding: 0; }
.st-tl-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; color: var(--muted); }
.st-tl-steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); flex-shrink: 0; }
.st-tl-steps li:last-child { border-bottom: 0; }
.st-tl-steps li:last-child::before { background: var(--ink); }
.st-tl-steps strong { font-weight: 500; color: var(--ink); }

/* 06 cycle */
.st-cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.st-cycle span {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 13.5px; font-weight: 500; background: var(--card);
}
.st-cycle span + span::before { content: "→"; margin: 0 10px 0 -2px; color: var(--faint); font-weight: 400; }
.st-cycle span + span { padding-left: 0; border: 0; background: none; }
.st-cycle span:first-child { background: #161616; color: #fff; border-color: #161616; }

/* 07 moment */
.st-moment { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; margin-top: 64px; }
.st-moment .st-frame { margin: 0; }

/* 08 close */
.st-questions { list-style: none; margin: 22px 0 26px; padding: 0; }
.st-questions li {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: clamp(21px, 2vw, 25px); font-weight: 500; letter-spacing: -0.02em;
}
.st-questions li:first-child { border-top: 1px solid var(--line); }
.st-cycle-wide { justify-content: center; margin-top: 72px; }
.st-closing {
  max-width: 820px; margin: 48px auto 0; text-align: center;
  font-family: var(--display); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; letter-spacing: -0.025em; color: var(--ink-2);
}
.st-closing em { color: var(--ink); }
.st-last { padding-bottom: 24px; }

@media (max-width: 960px) {
  .st-grid, .st-moment { grid-template-columns: 1fr; gap: 28px; }
  .st-left:empty { display: none; }
  .st-offset, .st-shift, .st-funnel, .st-callouts { padding-left: 0; margin-left: 0; }
  .st-connector { left: 0; }
  .st-flow { grid-template-columns: 1fr; gap: 10px; }
  .st-flow li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
  .st-flow li + li::before { left: 26px; top: -10px; width: 1px; height: 10px; }
  .st-flow-n { margin: 0; }
  .st-block { padding: 64px 0; }
}
@media (max-width: 640px) {
  .st-stats { grid-template-columns: repeat(2, 1fr); }
  .st-funnel-steps { grid-template-columns: 1fr; border-top: 0; }
  .st-funnel-steps > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .st-funnel-steps .st-step { margin: 0; }
  .st-callouts { grid-template-columns: 1fr; gap: 28px; }
  .st-shift-head { display: none; }
  .st-shift-row { grid-template-columns: 1fr; gap: 6px; }
  .st-shift-row svg { transform: rotate(90deg); }
  .st-rows .st-row, .st-qa .st-row { grid-template-columns: 1fr; gap: 4px; }
  .st-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Work: butter-yellow ground, joined by one line ---------- */
#work {
  background: #fffcee;
  /* softer, warmer hairlines and frames on the yellow */
  --line: rgba(84, 66, 0, .10);
  --line-strong: rgba(84, 66, 0, .18);
  --bg-soft: rgba(255, 255, 255, .62);
}
#work .chip { background: rgba(255,255,255,.7); }

.timeline { position: relative; padding-left: 84px; }
.tl-item { position: relative; }
/* pin: needle tip sits exactly on the line at heading height
   (tip is at 6.1% / 99.2% of the cut-out image) */
.tl-pin {
  position: absolute; z-index: 3;
  left: -62px; top: -25px;
  width: 76px; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(60, 45, 0, .12));
}
.job.tl-item .tl-pin { top: -39px; }

/* one rail per experience: starts at its pin, ends with it — then a gap ---------- */
.tl-rail {
  position: absolute; pointer-events: none;
  left: -84px; width: 56px; top: 66px; bottom: 0;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s;
}
.job.tl-item > .tl-rail { top: 52px; }
.tl-rail::before {           /* the track */
  content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 1px;
  background: rgba(17,17,17,.2);
}
.tl-rail::after {            /* buffer stop at the end of each experience */
  content: ""; position: absolute; left: 20px; bottom: -1px; width: 15px; height: 2px;
  border-radius: 2px; background: rgba(17,17,17,.45);
}
.tl-progress {               /* how far the dragon has ridden */
  position: absolute; left: 26px; top: 0; width: 3px; height: 0;
  border-radius: 2px; background: #161616;
}
.tl-station {
  position: absolute; left: 27px; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: #fffcee; border: 1.5px solid rgba(17,17,17,.32);
  transition: background .4s, border-color .4s, transform .4s var(--ease);
}
.tl-station.is-passed { background: #161616; border-color: #161616; }
.tl-station.is-here { transform: scale(1.35); }

.tl-dragon {
  position: absolute; left: -5px; top: 0;
  width: 64px; margin-top: -58px;        /* skateboard wheels ride on the progress tip */
  opacity: 0; transition: opacity .5s var(--ease);
  will-change: transform;
}
.tl-dragon .dragon-bg {          /* page-coloured patch: hides the line behind the dragon */
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 979 / 952; background: #fffcee;
}
.tl-dragon .dragon-frame {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 979 / 952;
  mix-blend-mode: darken;          /* clip backdrop -> page colour (see #cream-to-yellow) */
}
/* crop dragon.mp4 (1080x1350) to x 41–1020, y 190–1142 */
.tl-dragon video { position: absolute; width: 110.32%; max-width: none; height: auto; left: -4.19%; top: -19.96%; filter: url(#cream-to-yellow); }
.tl-rail.is-active .tl-dragon { opacity: 1; }
.tl-count {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px;
  background: #161616; color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  transition: background .3s;
}
.tl-count.is-done { background: #2f6b4f; }

/* Skills — character peeking over the Funnels & Automation card ------------ */
#skills .section-head { margin-bottom: 150px; }
.has-peeker { position: relative; }
.peeker {
  position: absolute; left: 50%; bottom: calc(100% + 1px);   /* sit on the 1px border, not over it */
  width: 430px; aspect-ratio: 631 / 462; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
  filter: brightness(1.05);   /* lifts the clip's light-grey backdrop to pure white */
}
/* crop g0.mp4 (1080x1350) to x 236–867, y 400–862 — she's cut exactly at the "desk" edge */
.peeker video { position: absolute; width: 171.16%; max-width: none; height: auto; left: -37.4%; top: -86.58%; }

/* "At a glance" — telescope character facing the numbers */
.st-glance-left { position: static !important; }   /* not sticky: keeps the blend with the yellow intact */
.st-glance-char {
  position: relative; overflow: hidden;
  width: min(230px, 62%); aspect-ratio: 602 / 957;
  margin-top: 36px;
  mix-blend-mode: multiply;
}
/* crop the 1080x1350 frame down to the character (x 293–895, y 218–1175) */
.st-glance-char video { position: absolute; width: 179.4%; max-width: none; left: -48.67%; top: -22.78%; height: auto; }

/* 05 — funnel character in the open space beside the copy */
.st-funnel-char { display: flex; justify-content: center; align-items: flex-start; }
.funnel-frame {
  position: relative; overflow: hidden; width: min(380px, 100%); aspect-ratio: 840 / 1060; margin-top: -24px;
  /* the filter lifts the clip's cream backdrop just above the page colour;
     "darken" then keeps the page wherever the backdrop is, and the character everywhere else */
  mix-blend-mode: darken;
}
.st-funnel-char { position: static !important; }   /* not sticky, so the blend reaches the page */
/* crop g2.mp4 (1080x1350) to x 150–990, y 230–1290 (room around her for the feather); backdrop matched to the yellow */
.funnel-frame video { position: absolute; width: 128.57%; max-width: none; height: auto; left: -17.86%; top: -21.7%; filter: url(#cream-to-yellow); }
/* g3 crop: x 120–1000, y 140–1230 of g3.mp4 — her hair (top at y 187) and feet (y 1164) stay fully in frame */
.funnel-frame.webinar-frame { aspect-ratio: 880 / 1090; }
.funnel-frame.webinar-frame video { width: 122.73%; left: -13.64%; top: -12.84%; }

/* About — she leans out from behind the edge and waves -------------------- */
.hi-peek {
  position: relative; margin-top: 44px;
  display: flex; justify-content: flex-end;
  perspective: 900px;
  margin-right: -118px;        /* reach under the text card, so her cut side is hidden behind it */
}
/* soften the bottom of the clip so there's no hard edge under her */
.hi-peek-frame {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* the About text sits on a raised card, angled slightly toward the reader */
.about-grid { perspective: 1600px; }
.about-text {
  position: relative; z-index: 2;
  padding: 48px 52px 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(17,17,17,.04),
    0 18px 40px -18px rgba(17,17,17,.18),
    0 60px 90px -50px rgba(17,17,17,.22),
    -24px 0 50px -30px rgba(17,17,17,.18);
  transform: rotateY(-3deg) rotateX(.8deg);
  transform-origin: right center;
  transition: transform .8s var(--ease);
}
.about-text:hover { transform: rotateY(-1.5deg) rotateX(.4deg); }
.hi-peek-frame::after {      /* (edge line retired — the text card is now what she peeks from behind) */
  content: none; position: absolute; right: 0; top: 4%; bottom: 0; width: 2px; z-index: 1;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(17,17,17,0), rgba(17,17,17,.55) 18%, rgba(17,17,17,.55) 82%, rgba(17,17,17,0));
}
.hi-peek-frame {
  position: relative; overflow: hidden;
  mix-blend-mode: darken;
  width: min(340px, 86%); aspect-ratio: 900 / 910;
  transform-origin: right center;
  transform: rotateY(-16deg) rotateZ(-4deg);   /* leaning out diagonally, with depth */
}
/* crop g.mp4 (1080x1350) to x 180–1080, y 440–1350 — her right side stays flush with the edge */
.hi-peek-frame video { position: absolute; width: 120%; max-width: none; height: auto; left: -20%; top: -48.35%; filter: url(#cream-to-white); }

@media (max-width: 960px) {
  .timeline { padding-left: 52px; }
  .tl-pin { left: -38px; width: 56px; }
  .job.tl-item .tl-pin { top: -23px; }
  .tl-rail { left: -52px; width: 40px; }
  .job.tl-item > .tl-rail { top: 44px; }
  .tl-rail::before, .tl-progress, .tl-station { left: 17px; }
  .tl-progress { left: 16px; }
  .tl-rail::after { left: 10px; }
  .tl-dragon { left: -9px; width: 52px; margin-top: -47px; }
  .peeker { width: 360px; }
  #skills .section-head { margin-bottom: 300px; }
  .st-glance-char { width: 170px; margin-top: 20px; }
  .funnel-frame { width: 280px; margin-top: 0; }
  .hi-peek { max-width: 420px; }
}
@media (max-width: 640px) {
  .timeline { padding-left: 40px; }
  .tl-pin { left: -29px; width: 42px; }
  .job.tl-item .tl-pin { top: -14px; }
  .tl-rail { left: -40px; width: 30px; }
  .job.tl-item > .tl-rail { top: 36px; }
  .tl-rail::before, .tl-station { left: 14px; }
  .tl-progress { left: 13px; }
  .tl-rail::after { left: 8px; width: 12px; }
  .tl-station { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .tl-dragon { left: -6px; width: 40px; margin-top: -36px; }
  .tl-count { display: none; }
  .peeker { width: 290px; }
  #skills .section-head { margin-bottom: 250px; }
  .hi-peek-frame { width: 270px; }
}

/* rail + dragon only exist for an opened experience, and fade in a beat after it opens */
.study.rail-on > .tl-rail { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }

/* ---------- Work experience cards (3D, collapsible) ---------- */
.timeline > .study + .study { margin-top: 64px; }
.study {
  /* inside the white card, hairlines and frames go back to neutral greys */
  --line: #ebebea; --line-strong: #dcdcda; --bg-soft: #f7f7f5;
  background: #fff;
  border: 1px solid rgba(84, 66, 0, .10);
  border-radius: 30px;
  padding: 52px 56px 44px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(60, 45, 0, .05),
    0 14px 28px -14px rgba(60, 45, 0, .16),
    0 44px 80px -40px rgba(60, 45, 0, .26);
  transform: perspective(1600px) rotateX(0deg) translateY(0);
  transform-origin: center top;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.study:not(.is-open) { cursor: pointer; }
.study:not(.is-open):hover {
  transform: perspective(1600px) rotateX(2.2deg) translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(60, 45, 0, .06),
    0 22px 40px -18px rgba(60, 45, 0, .2),
    0 70px 110px -50px rgba(60, 45, 0, .34);
}
.study.is-open { transform: none; cursor: auto; }

/* the toggle */
.study-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 32px; padding: 8px 8px 8px 22px; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--ink);
  font: 500 15px/1 var(--sans); cursor: pointer;
  box-shadow: 0 1px 2px rgba(17,17,17,.05), 0 10px 22px -14px rgba(17,17,17,.3);
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.study-toggle:hover { border-color: var(--ink); transform: translateY(-1px); }
.study-toggle-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: #161616; color: #fff;
  transition: transform .45s var(--ease);
}
.study-toggle-icon svg { width: 16px; height: 16px; }
.study:not(.is-open) .study-toggle-icon { animation: nudge 2.6s var(--ease) infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(.96); } }
.study-toggle-close .study-toggle-icon { transform: rotate(45deg); }
.study-close { display: flex; justify-content: center; padding: 8px 0 12px; }
.study:not(.is-open) .study-close { visibility: hidden; }   /* not reachable while the card is folded */
.study-close .study-toggle { margin-top: 0; }

/* the unfolding body: closed, only a short peek shows (under the blur veil);
   JS animates max-height to the full height on open, then releases it */
.study { position: relative; }
.study-body {
  --peek: 150px;
  max-height: var(--peek); overflow: hidden;
  transition: max-height 1s var(--ease);
}
.study-body-inner { min-width: 0; }
/* once fully open, let sticky columns and characters behave normally */
.study.is-expanded .study-body { overflow: visible; }

/* progressive blur over the card's last lines while it's closed */
.study-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 4;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 40px;
  border-radius: inherit; overflow: hidden;
  transition: opacity .6s var(--ease), visibility 0s .6s;
}
.veil-blur, .veil-blur i { position: absolute; inset: 0; pointer-events: none; }
.veil-blur i { -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); }
/* each layer blurs a bit more and covers a band further down, so the blur builds gradually */
.veil-blur i:nth-child(1) { --b: 1px;  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 45%, transparent 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 45%, transparent 60%); }
.veil-blur i:nth-child(2) { --b: 2px;  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 75%); mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 75%); }
.veil-blur i:nth-child(3) { --b: 4px;  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 55%, #000 75%, transparent 90%); mask-image: linear-gradient(to bottom, transparent 40%, #000 55%, #000 75%, transparent 90%); }
.veil-blur i:nth-child(4) { --b: 8px;  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 70%, #000 100%); mask-image: linear-gradient(to bottom, transparent 55%, #000 70%, #000 100%); }
.veil-blur i:nth-child(5) { --b: 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 90%); mask-image: linear-gradient(to bottom, transparent 70%, #000 90%); }
/* and a soft white wash so the text fades as it blurs */
.veil-blur::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.88) 78%, #fff 100%);
}
.study-veil .study-toggle { position: relative; margin-top: 0; }
.study.is-open .study-veil { opacity: 0; visibility: hidden; pointer-events: none; }

/* pins only arrive once the card is opened */
.study > .tl-pin { opacity: 0; transform: translateY(-14px) rotate(-8deg); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.study.is-open > .tl-pin { opacity: 1; transform: none; transition-delay: .25s; }
.study-body-inner > .st-frame-video { margin-top: 44px; }
.study-body-inner > .st-block:first-of-type { margin-top: 64px; }

/* characters inside a white card: their cream backdrop maps to white, not yellow */
.study .funnel-frame video { filter: url(#cream-to-white); }

/* role + timeline, small, right under each name (always visible, even when the card is closed) */
.st-subline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 16px; font-size: 14.5px; line-height: 1.45;
}
.st-sub-role { color: var(--ink-2); font-weight: 500; }
.st-sub-time { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-sub-time::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
@media (max-width: 640px) {
  .st-subline { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 12px; }
  .st-sub-time::before { display: none; }
}

/* screen recordings keep their own shape, so nothing gets cropped */
.st-frame-video.is-natural video { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; }
.st-frame-captioned figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.st-frame-captioned figcaption .ig-link { color: var(--ink-2); }

/* vertical phone recording, shown in a phone */
.st-phone {
  position: relative; margin: 36px 0 0; width: min(240px, 72%);
  padding: 9px; border-radius: 38px;
  background: #161616;
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 24px 50px -22px rgba(0,0,0,.45), 0 60px 90px -60px rgba(0,0,0,.4);
}
.st-phone::before {            /* speaker notch */
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 6px; border-radius: 6px; background: #2a2a2a; z-index: 1;
}
.st-phone video { display: block; width: 100%; aspect-ratio: 576 / 1280; object-fit: cover; border-radius: 30px; background: #000; }
@media (max-width: 960px) { .st-phone { width: 220px; margin: 28px 0 8px; } }

/* names sized to the card's column so the link arrow stays beside them */
.study .st-name { font-size: clamp(40px, 4.6vw, 64px); }
.study .st-name-sm { font-size: clamp(34px, 3.6vw, 50px); }

@media (max-width: 960px) {
  .study { padding: 36px 30px 32px; border-radius: 24px; }
  .tl-pin { top: -18px; }
  .tl-rail { top: 50px; }
}
@media (max-width: 640px) {
  .study { padding: 28px 20px 24px; border-radius: 20px; }
  .timeline > .study + .study { margin-top: 44px; }
  .tl-pin { top: -14px; }
  .tl-rail { top: 36px; }
  .study-toggle { width: 100%; justify-content: space-between; }
}

/* sleek rule between experiences */
.tl-divider {
  border: 0; height: 1px; margin: 96px 0 132px -84px;
  background: linear-gradient(90deg, rgba(17,17,17,0), rgba(17,17,17,.22) 10%, rgba(17,17,17,.22) 90%, rgba(17,17,17,0));
}

/* GooCampus visuals ------------------------------------------------------- */
.st-after-rows { margin-top: 28px; }
.st-hero-stat { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.st-hero-stat .st-stat { font-size: clamp(44px, 4.6vw, 64px); }

.st-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px;
  margin: 48px 0 44px 16%; max-width: 860px;
}
.st-compare-card {
  padding: 28px 30px 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.st-compare-card h5 { margin: 14px 0 8px; font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.025em; }
.st-compare-card p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.st-compare-vs { align-self: center; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--faint); }

.st-capture { margin: 48px 0 32px; }
.st-capture-row { display: grid; grid-template-columns: 1.1fr 28px 1fr 28px 1fr; align-items: center; gap: 14px; margin-top: 18px; }
.st-capture-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-capture-sources span {
  padding: 10px 12px; border-radius: 10px; text-align: center;
  background: var(--card); border: 1px solid var(--line);
  font-size: 15px; font-weight: 500;
}
.st-capture-arrow { width: 22px; height: 22px; color: var(--ink); justify-self: center; }
.st-capture-node {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.st-capture-node strong { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.3; }
.st-capture-node .st-step { margin-bottom: 4px; }
.st-capture-node.is-dark { background: #161616; border-color: #161616; color: #fff; }
.st-capture-node.is-dark strong { color: #fff; font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.03em; }
.st-capture-node .st-step svg { width: 12px; height: 12px; color: var(--ink); }
.st-capture-node.is-dark span { font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.5; }

.st-steps-4 { grid-template-columns: repeat(4, 1fr); }

.st-growth { margin: 26px 0 28px; display: grid; gap: 12px; }
.st-growth-row { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 14px; }
.st-growth-label { font-size: 14.5px; color: var(--muted); }
.st-growth-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(17,17,17,.06); overflow: hidden; }
.st-growth-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: rgba(17,17,17,.28); }
.st-growth-row.is-after .st-growth-bar::after { background: #161616; }
.st-growth-row strong { font-family: var(--display); font-weight: 500; font-size: 19px; text-align: right; }

@media (max-width: 960px) {
  .tl-divider { margin: 72px 0 104px -52px; }
  .st-compare { margin-left: 0; }
  .st-capture-row { grid-template-columns: 1fr; }
  .st-capture-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .tl-divider { margin: 56px 0 88px -40px; }
  .st-compare { grid-template-columns: 1fr; gap: 12px; }
  .st-compare-vs { justify-self: center; }
  .st-steps-4 { grid-template-columns: 1fr; }
  .st-growth-row { grid-template-columns: 92px 1fr 52px; gap: 10px; }
}

/* Resume Risers / First Sip visuals ------------------------------------- */
.st-gap-top { margin-top: 32px; }
.st-stats-3 { grid-template-columns: 1fr; }
.st-stats-3 > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.st-stats-3 .st-stat-label { margin-top: 0; text-align: right; }

.st-callouts-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
.st-callouts-head { grid-column: 1 / -1; margin-bottom: -20px; }
.st-callouts-3 p { margin-top: 8px; }

.st-chain-frame { margin: 48px 0 0; }
.st-chain { margin-top: 18px; gap: 10px 8px; }
.st-chain span { font-size: 15px; padding: 9px 16px; }
.st-chain span + span { padding-left: 0; }

.st-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 0 16%; max-width: 900px; position: relative; }
.st-triad::before {            /* a thin line tying the three together */
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: var(--line-strong); z-index: 0;
}
.st-triad-card {
  position: relative; z-index: 1;
  padding: 24px 24px 26px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.st-triad-card strong { display: block; margin: 12px 0 6px; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; }
.st-triad-card p { font-size: 16px; color: var(--muted); line-height: 1.55; }

.st-steps-6 { grid-template-columns: repeat(3, 1fr); row-gap: 8px; border-top: 0; }
.st-steps-6 > div { border-top: 1px solid var(--ink); padding-bottom: 14px; }

.st-checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.st-checklist li {
  position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line);
  font-size: 16.5px; color: var(--ink-2); line-height: 1.45;
}
.st-checklist li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px;
  border-left: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(-45deg);
}

@media (max-width: 960px) {
  .st-triad { margin-left: 0; }
}
@media (max-width: 640px) {
  .st-callouts-3, .st-triad, .st-steps-6, .st-checklist { grid-template-columns: 1fr; }
  .st-triad::before { left: 50%; right: auto; top: 6%; bottom: 6%; width: 1px; height: auto; }
  .st-stats-3 > div { flex-direction: column; gap: 6px; }
  .st-stats-3 .st-stat-label { text-align: left; }
}

/* Freelance chapter ------------------------------------------------------ */
.st-name-sm { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.02; }
.st-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.st-project {
  display: flex; flex-direction: column;
  padding: 28px 28px 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.st-project:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.st-project h5 { margin: 14px 0 10px; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.1vw, 27px); letter-spacing: -0.025em; line-height: 1.15; }
.st-project p { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
/* Tiggle leads, with its video; the other two projects follow side by side */
.st-project-feature { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 8px; }
.st-project-feature .st-frame { margin: 0; display: flex; align-items: center; }
.st-project-feature .st-frame video { width: 100%; }
.st-project-feature .st-project { justify-content: center; }
.st-projects-2 { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
@media (max-width: 960px) { .st-projects, .st-project-feature { grid-template-columns: 1fr; } }

/* ---------- Case studies ---------- */
.case {
  display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start;
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
.case:first-of-type { border-top: 0; padding-top: 0; }
.case.reverse { grid-template-columns: 1fr 360px; }
.case.reverse .case-visual { order: 2; }
.case-visual {
  position: sticky; top: 110px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
.case-visual img { width: 100%; height: 100%; object-fit: cover; }
.case-stats { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.case-stat {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  display: flex; flex-direction: column;
}
.case-stat-num { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.case-stat-label { font-size: 12px; color: var(--muted); }
.case-num { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.case-body h3 { margin-top: 12px; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.03em; }
.stats-line { margin-top: 8px; font-size: 14px; color: var(--muted); }
.case-body p { margin-top: 24px; color: var(--ink-2); line-height: 1.85; font-size: 16px; max-width: 680px; }
.case-takeaway {
  margin: 32px 0 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--ink);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.01em;
  max-width: 640px;
}

/* ---------- Campaigns ---------- */
.section-head .ig-link { border-bottom: 0; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.phase { overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.phase:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.phase-media { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--line); }
.phase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.phase:hover .phase-media img { transform: scale(1.04); }
.phase-body { padding: 24px 26px 28px; }
.phase-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.phase-tag { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-size: 11.5px; }
.phase-duration { padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); }
.phase h3 { font-size: 24px; margin: 16px 0 12px; }
.phase p { color: var(--ink-2); font-size: 15px; line-height: 1.7; }

.takeaway {
  margin-top: 16px;
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
  padding: 40px 44px;
  background: #161616; color: #fff;
  border-radius: var(--radius);
}
.takeaway-label { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.15; }
.takeaway p { color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.7; }

/* ---------- New age ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature { overflow: hidden; }
.feature-media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.feature-media img, .feature-media video { width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: 30px 32px 34px; }
.feature-body .stats-line { margin-top: 0; }
.feature-body h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin: 10px 0 18px; letter-spacing: -0.03em; }
.feature-body p { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.feature-body p + p { margin-top: 14px; }

/* ---------- Testimonials ---------- */
.testimonials { columns: 3; column-gap: 16px; }
.testimonial { break-inside: avoid; margin: 0 0 16px; padding: 28px; display: inline-block; width: 100%; }
.testimonial blockquote { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.testimonial blockquote::before {
  content: "\201C"; display: block;
  font-family: var(--serif); font-size: 52px; line-height: .6; color: var(--ink);
  margin-bottom: 14px; height: 22px;
}
.testimonial figcaption { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.avatar {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: #161616; color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.t-name { display: block; font-weight: 600; font-size: 14.5px; }
.t-role { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* ---------- Contact + footer (finale) ----------
   Light and centred: headline, one line, an email pill, a quiet footer,
   and the meadow artwork running edge to edge at the very bottom. */
.finale { position: relative; background: #fff; padding-top: 160px; overflow: hidden; }
.finale-inner { position: relative; z-index: 1; text-align: center; }
.finale-title {
  font-size: clamp(46px, 6.6vw, 92px); line-height: 1; letter-spacing: -0.045em; color: var(--ink);
}
.finale-title em { font-size: 1.05em; }
.finale-sub { max-width: 540px; margin: 26px auto 0; font-size: 18px; line-height: 1.65; color: var(--muted); }

.finale-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 40px; padding: 6px 6px 6px 20px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 12px 30px -16px rgba(17,17,17,.22);
}
.finale-pill-text { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink-2); padding-right: 10px; }
.finale-pill-text svg { width: 17px; height: 17px; color: var(--muted); }
.finale-pill-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  border-radius: 999px; background: #161616; color: #fff;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--shadow-btn);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.finale-pill-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 30px -10px rgba(0,0,0,.5); }

.finale-foot { margin-top: 88px; }
.finale-made { font-size: 15px; color: var(--muted); }
.finale-made em { color: var(--ink); font-size: 1.12em; }
.finale-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; }
.finale-links a { font-size: 15px; color: var(--muted); transition: color .2s; }
.finale-links a:hover { color: var(--ink); }

/* meadow: footer.png cropped to its greenery (y 480–1024), full width, no box */
.finale-art { position: relative; margin-top: -40px; aspect-ratio: 1536 / 544; pointer-events: none; }
.finale-art img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  filter: brightness(1.02);           /* lifts the artwork's off-white backdrop to the page white */
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* the peeking character needs open space above her card: lead with it when cards stack */
  .has-peeker { order: -1; }
  .nav-links a { padding: 8px 9px; font-size: 13px; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { columns: 2; }
  .case, .case.reverse { grid-template-columns: 300px 1fr; gap: 44px; }
  .case.reverse .case-visual { order: 0; }
}

@media (max-width: 960px) {
  .nav-links {
    position: absolute; top: 72px; left: 16px; right: 16px;
    flex-direction: column; gap: 0; margin: 0;
    padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .2s, transform .2s var(--ease);
  }
  .nav.menu-open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 12px 14px; font-size: 15px; }
  .nav-cta { margin-left: auto; }
  .nav-toggle {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    background: #fff; border: 1px solid var(--line-strong); border-radius: 50%;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 18px; height: 18px; }

  .section { padding: 88px 0; }
  .section-head { margin-bottom: 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .hero-copy { padding: 40px 0 0; }
  .hero-visual img { max-width: 400px; }
  .hero-feats { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-left: 0; }
  .hero-feats-label { padding-left: 0; }
  .about-grid, .linkedin-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-head { position: static; }
  .hi-peek { margin-right: 0; }
  .about-text { transform: none; padding: 36px 32px 40px; }
  .about-text:hover { transform: none; }
  .phases { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .takeaway { grid-template-columns: 1fr; gap: 14px; padding: 32px; }
  .job-head { padding: 28px 28px 22px; }
  .job-body { padding: 28px 28px 32px; }
  .jobs { gap: 0; }
  .job-top { grid-template-columns: 1fr; gap: 24px; }
  .case, .case.reverse { grid-template-columns: 1fr; gap: 32px; }
  .case-visual { position: relative; top: 0; max-width: 360px; }
}

@media (max-width: 640px) {
  .wrap, .nav-inner, .marquee { padding-left: 16px; padding-right: 16px; }
  .nav-inner { height: 64px; gap: 10px; }
  .nav-links { top: 64px; }
  .nav-cta { height: 36px; padding: 0 14px; font-size: 13px; }
  .hero-copy { padding-top: 24px; }
  .hero-visual img { max-width: 320px; }
  .hero-feats { gap: 28px 20px; padding-top: 32px; }
  .skills-grid { grid-template-columns: 1fr; }
  .skill-card { padding: 24px; }
  .marquee { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 56px; }
  .marquee-track { width: 100%; }
  .job-head { grid-template-columns: 1fr; gap: 6px; padding: 22px 20px 18px; }
  .job-date { font-size: 14px; }
  .job-name { font-size: 23px; }
  .job-body { padding: 22px 20px 26px; }
  .jobs { gap: 0; }
  .metric-grid { grid-template-columns: 1fr; }
  .case { padding: 48px 0; }
  .case-visual { max-width: none; aspect-ratio: 4 / 5; }
  .testimonials { columns: 1; }
  .testimonial { padding: 24px; }
  .feature-body { padding: 24px; }
  .finale { padding-top: 112px; }
  .finale-pill { flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; width: 100%; }
  .finale-pill-text { padding-right: 0; font-size: 15px; }
  .finale-pill-btn { width: 100%; justify-content: center; }
  .finale-foot { margin-top: 64px; }
  .finale-art { margin-top: -10px; }
}

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