/* Momo Kagitani — portfolio
   Recreated from the "PM Portfolio Design Directions" Claude Design handoff. */

:root {
  --ink: #14161a;
  --accent: oklch(.5 .14 235);
  --accent-deep: oklch(.45 .13 235);
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --hand: Caveat, cursive;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
}
h1, h2, h3, figure { margin: 0; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
input, textarea, button { font-family: var(--body); }

/* ---------- Page types ---------- */

.page--case { --wide: 1120px; --gutter: clamp(20px, 4vw, 56px); min-height: 100vh; }
.page--about { --wide: 1060px; --gutter: clamp(20px, 5vw, 40px); }

.theme-advisor {
  --band: linear-gradient(118deg, oklch(.955 .035 240) 0%, oklch(.958 .03 200) 48%, oklch(.955 .04 165) 100%);
  --band-bg: oklch(.962 .028 205);
  --hero-bg: oklch(.9 .06 235);
  --tint: oklch(.977 .012 235);
  --stat: oklch(.45 .13 235);
  --stat-size: clamp(26px, 3.2vw, 36px);
  --lede: 50ch;
}
.theme-onboarding {
  --band: linear-gradient(118deg, oklch(.955 .04 160) 0%, oklch(.958 .03 200) 48%, oklch(.955 .035 240) 100%);
  --band-bg: oklch(.962 .028 200);
  --hero-bg: oklch(.92 .055 60);
  --tint: oklch(.97 .02 60);
  --stat: oklch(.44 .095 60);
  --stat-size: clamp(28px, 3.4vw, 40px);
  --lede: 52ch;
}
.theme-heply {
  --band: linear-gradient(118deg, oklch(.955 .045 95) 0%, oklch(.96 .03 150) 48%, oklch(.955 .035 240) 100%);
  --band-bg: oklch(.963 .028 160);
  --hero-bg: oklch(.93 .055 135);
  --tint: oklch(.97 .025 135);
  --lede: 54ch;
}
.theme-discover {
  --band: linear-gradient(118deg, oklch(.955 .045 95) 0%, oklch(.958 .035 120) 48%, oklch(.955 .04 165) 100%);
  --band-bg: oklch(.965 .03 110);
  --hero-bg: oklch(.9 .06 235);
  --tint: oklch(.977 .012 235);
}

/* ---------- Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-image: var(--band);
  background-color: var(--band-bg);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.site-header.is-hidden { transform: translateY(-105%); }

.nav {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand { font: 700 17px/1 var(--display); letter-spacing: -.03em; }
.nav__links {
  display: flex;
  gap: clamp(18px, 3vw, 30px);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav__links a[aria-current="page"] { color: var(--accent); }

/* ---------- Case study hero ---------- */

.band {
  position: relative;
  overflow: hidden;
  background-image: var(--band);
  background-color: var(--band-bg);
}
.band__kicker {
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 26px) var(--gutter) 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .55);
}
.band__body {
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 72px);
}
.case-title {
  margin: 0;
  font: 600 clamp(32px, 5.2vw, 58px)/1.07 var(--display);
  letter-spacing: -.04em;
  text-wrap: pretty;
  max-width: 17em;
}
.case-lede {
  margin: 26px 0 0;
  max-width: var(--lede, 50ch);
  font: 400 clamp(17px, 1.9vw, 20px)/1.55 var(--body);
  color: rgba(20, 22, 26, .8);
  text-wrap: pretty;
}
.case-meta {
  margin-top: 26px;
  font: 500 11px/1.7 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
}

.hero-media {
  max-width: var(--wide);
  margin: clamp(36px, 5vw, 60px) auto 0;
  padding: 0 var(--gutter);
}
.hero-media__frame {
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  background: var(--hero-bg);
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2.5vw, 32px);
}
.hero-media__placeholder {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .82) 0 9px, rgba(255, 255, 255, .55) 9px 18px);
  border-radius: 3px;
  width: 100%;
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media__placeholder span {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
  text-align: center;
  padding: 0 12px;
}

/* ---------- Sections ---------- */

.section {
  --pad: clamp(36px, 5vw, 56px);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pad) var(--gutter);
}
.section--lg { --pad: clamp(36px, 5vw, 60px); }
.section--xl { --pad: clamp(40px, 6vw, 72px); }
.section--intro { --pad: clamp(40px, 6vw, 72px); padding-bottom: 0; }
.section--rule { border-top: 1px solid rgba(20, 22, 26, .1); }

.tint {
  background: var(--tint);
  border-top: 1px solid rgba(20, 22, 26, .08);
  border-bottom: 1px solid rgba(20, 22, 26, .08);
}
.tint--top { border-bottom: 0; }

.label {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
  margin-bottom: 20px;
}
.label--lg { margin-bottom: 26px; }

.body-copy {
  margin: 16px 0 0;
  font: 400 16.5px/1.75 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}
.label + .body-copy { margin-top: 0; }
.body-copy--strong { color: rgba(20, 22, 26, .78); }
.mt-22 { margin-top: 22px; }

.statement {
  margin: 0;
  font: 600 clamp(21px, 2.5vw, 29px)/1.3 var(--display);
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.statement--sm { font: 600 clamp(19px, 2.2vw, 25px)/1.35 var(--display); }

/* Numbered "What I did" steps */
.steps { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 30px); }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.step__num { font: 500 13px/1.5 var(--mono); color: var(--accent); }
.step__title { font: 600 clamp(17px, 1.9vw, 20px)/1.35 var(--display); letter-spacing: -.02em; }
.step p,
.steps-note {
  margin: 9px 0 0;
  font: 400 16px/1.7 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}
.steps-note { margin-top: 26px; }

/* Outcome stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(150px, 28%)), 1fr));
  gap: clamp(22px, 3vw, 30px);
}
.stat__value {
  font: 700 var(--stat-size)/1 var(--display);
  letter-spacing: -.04em;
  color: var(--stat);
}
.stat__label {
  margin-top: 9px;
  font: 500 11px/1.45 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .68);
}

/* ---------- Dark contact footer ---------- */

.contact {
  position: relative;
  overflow: hidden;
  background: #111214;
  color: #fff;
  padding: clamp(56px, 12vh, 130px) var(--gutter) clamp(32px, 6vh, 60px);
}
.contact__inner { position: relative; max-width: var(--wide); margin: 0 auto; }
.contact__label {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.contact__next {
  display: inline-block;
  margin-top: 18px;
  font: 400 clamp(26px, 3.6vw, 44px)/1.2 var(--display);
  letter-spacing: -.035em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.contact__next:hover { color: #fff; border-bottom-color: #fff; }
.contact__heading {
  margin: 0;
  font: 400 clamp(28px, 4vw, 46px)/1.22 var(--display);
  letter-spacing: -.035em;
  text-wrap: pretty;
  max-width: 22ch;
}
.contact__email,
.contact__email:hover {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.contact__find { margin-top: clamp(48px, 9vh, 96px); display: flex; flex-direction: column; gap: 22px; }
.contact__find-label { font: 400 15px/1 var(--body); color: rgba(255, 255, 255, .55); }
.contact__links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  font: 600 15px/1 var(--body);
}
.contact__links a { color: #fff; border-bottom: 1px solid transparent; }
.contact__links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .55); }
.contact__legal {
  margin-top: clamp(56px, 11vh, 110px);
  font: 600 14px/1.6 var(--body);
  color: rgba(255, 255, 255, .75);
}

/* ---------- About ---------- */

.about-hero { position: relative; overflow: hidden; background: oklch(.962 .016 235); }
.about-hero__deco {
  position: absolute;
  right: -2%;
  bottom: -4%;
  width: min(52%, 560px);
  height: min(74%, 440px);
  pointer-events: none;
  filter: blur(22px);
  opacity: .46;
}
.about-hero__body {
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(48px, 10vh, 110px) var(--gutter) clamp(48px, 10vh, 100px);
}
.about-title {
  margin: 0;
  font: 400 clamp(28px, 4.6vw, 56px)/1.15 var(--display);
  letter-spacing: -.04em;
  text-wrap: pretty;
  max-width: 20em;
}
.about-title strong { font-weight: 700; }
.about-title__hand {
  font: 600 clamp(36px, 6vw, 74px)/.9 var(--hand);
  letter-spacing: 0;
  color: var(--accent);
}

.about-work {
  border-top: 1px solid rgba(20, 22, 26, .09);
  padding: clamp(56px, 11vh, 120px) var(--gutter);
}
.about-work__inner { max-width: var(--wide); margin: 0 auto; }
.eyebrow {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .6);
}
.principles { margin-top: clamp(30px, 5vh, 46px); display: flex; flex-direction: column; }
.principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 54px);
  padding: clamp(26px, 4vh, 40px) 0;
  border-top: 1px solid rgba(20, 22, 26, .08);
}
.principle__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(.955 .03 235);
  font: 500 12px/1 var(--mono);
  letter-spacing: .06em;
  color: oklch(.45 .13 235);
}
.principle__num--yellow { background: oklch(.96 .045 95); color: oklch(.46 .1 85); }
.principle__num--green { background: oklch(.955 .035 150); color: oklch(.42 .1 150); }
.principle__title {
  margin: 0;
  font: 500 clamp(20px, 2.4vw, 26px)/1.3 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 26ch;
}
.principle p {
  margin: 14px 0 0;
  font: 400 15.5px/1.75 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
  max-width: 58ch;
}

/* ---------- Discover ---------- */

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.chip {
  font: 500 11px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
  background: rgba(20, 22, 26, .05);
  padding: 9px 13px;
  border-radius: 99px;
}
.case-intro {
  margin: 30px 0 0;
  max-width: 62ch;
  font: 400 clamp(16px, 1.8vw, 18.5px)/1.65 var(--body);
  color: rgba(20, 22, 26, .72);
  text-wrap: pretty;
}
.case-intro strong { font-weight: 600; color: var(--ink); }

.facts {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 40px);
}
.fact__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
  margin-bottom: 10px;
}
.fact__value { font: 400 15px/1.6 var(--body); }

.summary-band { border-top: 1px solid rgba(20, 22, 26, .1); border-bottom: 1px solid rgba(20, 22, 26, .1); }
.summary {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(200px, 28%)), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.summary__col { min-width: 0; }
.summary__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
}
.summary__title {
  margin-top: 12px;
  font: 600 clamp(19px, 2.1vw, 23px)/1.25 var(--display);
  letter-spacing: -.025em;
}
.summary__col p {
  margin: 12px 0 0;
  font: 400 15.5px/1.65 var(--body);
  color: rgba(20, 22, 26, .7);
  text-wrap: pretty;
}

.big-stats {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(150px, 20%)), 1fr));
  gap: clamp(24px, 3vw, 32px);
}
.big-stat__value {
  font: 700 clamp(30px, 3.8vw, 46px)/1 var(--display);
  letter-spacing: -.04em;
  color: var(--accent);
}
.big-stat__value small {
  font-size: .55em;
  font-weight: 500;
  letter-spacing: -.02em;
  color: rgba(20, 22, 26, .62);
}
.big-stat__label {
  margin-top: 10px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.big-stat__note {
  margin-top: 6px;
  font: 400 13px/1.55 var(--body);
  color: rgba(20, 22, 26, .62);
}

.bullets { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.bullet { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.bullet__dot { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); margin-top: 11px; }
.goals { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.goal { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.goal__num { font: 500 13px/1.5 var(--mono); color: var(--accent); }
.bullet p,
.goal p {
  margin: 0;
  font: 400 16px/1.7 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}
.bullet strong,
.goal strong { font-weight: 600; color: var(--ink); }

.section--insights { --pad: clamp(40px, 6vw, 68px); }
.stack { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 30px); }
.stack--tight { gap: clamp(22px, 3vw, 28px); }
.subhead {
  font: 600 clamp(18px, 2vw, 21px)/1.3 var(--display);
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.subhead__num {
  font: 500 13px/1 var(--mono);
  color: var(--accent-deep);
  margin-right: 10px;
}
.stack p {
  margin: 10px 0 0;
  font: 400 16px/1.7 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}

/* Orchestration engine diagram */
@keyframes flowdash { to { stroke-dashoffset: -140; } }
@keyframes flowpulse { 0%, 100% { opacity: .25; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.25); } }
@keyframes flowrow { 0%, 100% { background: transparent; } 40% { background: rgba(255, 255, 255, .62); } }

.flow {
  margin-top: 30px;
  border: 1px solid rgba(20, 22, 26, .1);
  border-radius: 8px;
  padding: clamp(18px, 2.5vw, 28px);
}
.flow__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
  margin-bottom: 22px;
}
.flow__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.flow__sources { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.flow__heading {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.flow__source {
  background: var(--c);
  border: 1px solid rgba(20, 22, 26, .07);
  border-radius: 6px;
  padding: 14px 15px;
  font: 500 13.5px/1.4 var(--body);
  color: var(--ink);
}
.flow__link { flex: 0 1 72px; min-width: 40px; align-self: stretch; display: flex; align-items: center; }
.flow__link svg { width: 100%; height: 78%; overflow: visible; }
.flow__link path {
  fill: none;
  stroke: oklch(.72 .1 235);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  animation: flowdash 3.4s linear var(--d, 0s) infinite;
}
.flow__engine {
  flex: 1.3 1 220px;
  min-width: 0;
  background: oklch(.93 .05 235);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow__stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(20, 22, 26, .07);
  border-radius: 99px;
  padding: 11px 16px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  animation: flowrow 6s ease-in-out var(--d, 0s) infinite;
}
.flow__pulse {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: oklch(.55 .13 235);
  flex: 0 0 auto;
  animation: flowpulse 6s ease-in-out var(--d, 0s) infinite;
}
.flow__outcome {
  flex: 1 1 170px;
  min-width: 0;
  background: oklch(.96 .05 95);
  border: 1px solid rgba(20, 22, 26, .08);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 20px);
}
.flow__outcome-label {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .62);
}
.flow__outcome-text {
  margin-top: 10px;
  font: 400 14.5px/1.55 var(--body);
  color: var(--ink);
  text-wrap: pretty;
}

/* Decisions */
.decisions .label { margin-bottom: clamp(24px, 3vw, 34px); }
.decision { padding: clamp(26px, 3.5vw, 36px) 0; border-bottom: 1px solid rgba(20, 22, 26, .09); }
.decision:first-of-type { padding-top: 0; }
.decision:last-of-type { padding-bottom: 0; border-bottom: 0; }
.decision__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.decision__kicker {
  font: 500 11px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
}
.decision__tag {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: oklch(.955 .03 235);
  padding: 6px 10px;
  border-radius: 99px;
}
.decision__title {
  margin-top: 12px;
  font: 600 clamp(20px, 2.3vw, 26px)/1.28 var(--display);
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.decision p {
  margin: 14px 0 0;
  font: 400 16px/1.7 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}
.decision p.decision__against { font-size: 15.5px; color: rgba(20, 22, 26, .72); }
.decision__against em { font-style: italic; color: rgba(20, 22, 26, .62); }

.hard-call { background: oklch(.965 .05 95); border-top: 1px solid rgba(20, 22, 26, .08); }

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.next-grid__title { font: 600 17px/1.35 var(--display); letter-spacing: -.02em; }
.next-grid p {
  margin: 10px 0 0;
  font: 400 15px/1.65 var(--body);
  color: rgba(20, 22, 26, .72);
  text-wrap: pretty;
}

/* ---------- Home ---------- */

.page--home { --band: none; --band-bg: #fff; }

.home-hero { position: relative; overflow: hidden; }
.home-hero .about-hero__deco { height: min(62%, 460px); }
.home-hero__body {
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 12vh, 130px);
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.home-title {
  font: 400 clamp(30px, 5vw, 58px)/1.18 var(--display);
  letter-spacing: -.04em;
  text-wrap: pretty;
  max-width: 22em;
}
.home-title strong { font-weight: 700; }
.home-title__hand { position: relative; display: inline-block; }
.home-title__hand span {
  position: relative;
  font: 600 clamp(40px, 6.6vw, 80px)/.9 var(--hand);
  letter-spacing: 0;
  color: var(--accent);
}

.journey {
  background: #fff;
  border-top: 1px solid rgba(20, 22, 26, .09);
  padding: clamp(56px, 11vh, 120px) var(--gutter) clamp(40px, 8vh, 90px);
  transition: background-color 1.1s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.journey__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.journey__title {
  font: 400 clamp(26px, 3.6vw, 42px)/1.2 var(--display);
  letter-spacing: -.035em;
  text-wrap: pretty;
  max-width: 26ch;
}
.journey__hand {
  font: 600 clamp(32px, 4.6vw, 56px)/.9 var(--hand);
  letter-spacing: 0;
  color: var(--accent);
}

.timeline {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: clamp(48px, 8vh, 90px) auto 0;
  padding-top: 8px;
}
.timeline__track,
.timeline__fill { position: absolute; left: 17px; top: 0; width: 2px; }
.timeline__track { bottom: 70px; background: rgba(20, 22, 26, .1); }
.timeline__fill {
  height: 0;
  background: linear-gradient(180deg, oklch(.5 .14 235) 0%, oklch(.65 .13 195) 35%, oklch(.72 .14 95) 70%, oklch(.6 .12 150) 100%);
}
.tl-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(52px, 10vh, 110px);
  text-align: left;
}
.tl-item__marker { display: flex; justify-content: center; }
.tl-item__dot {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 6px #fff;
}
.tl-item__text { min-width: 0; max-width: 46ch; }
.tl-item__when {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20, 22, 26, .55);
}
.tl-item__name {
  margin-top: 12px;
  font: 600 clamp(24px, 3.2vw, 36px)/1.15 var(--display);
  letter-spacing: -.035em;
}
.tl-item__name a { color: inherit; }
.tl-item__name a:hover { color: var(--accent); }
.tl-item__ext {
  display: inline-block;
  margin-left: .2em;
  font-size: .55em;
  vertical-align: .55em;
  color: rgba(20, 22, 26, .4);
  transition: transform .2s ease, color .2s ease;
}
.tl-item__name a:hover .tl-item__ext { color: var(--accent); transform: translate(2px, -2px); }
.tl-item__role { margin-top: 8px; font: 400 15.5px/1.6 var(--body); color: var(--role); }
.tl-item p {
  margin: 16px 0 0;
  font: 400 16px/1.75 var(--body);
  color: rgba(20, 22, 26, .75);
  text-wrap: pretty;
}

/* ---------- Small screens ---------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.contact__email { max-width: 100%; overflow-wrap: anywhere; }

@media (min-width: 641px) {
  .br-mobile { display: none; }
}

/* Narrow phones: keep the footer email on one line */
@media (max-width: 359px) {
  .contact__email { font-size: .8em; }
}

@media (max-width: 640px) {
  /* Larger tap targets without shifting the layout */
  .nav__links a { padding: 12px 0; margin: -12px 0; }

  /* Home hero: keep some open space above the headline, scaled to the screen height,
     without the desktop's tall bottom-pinned banner */
  .home-hero__body {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(96px, 18vh, 160px);
    padding-top: clamp(96px, 18svh, 160px);
    padding-bottom: 64px;
  }
  .home-title { font-size: clamp(32px, 9.6vw, 44px); line-height: 1.16; }
  .home-title__hand span { font-size: clamp(42px, 12.8vw, 58px); }

  /* About hero: same breathing room as the home hero */
  .about-hero__body {
    padding-top: clamp(96px, 18vh, 160px);
    padding-top: clamp(96px, 18svh, 160px);
    padding-bottom: 64px;
  }

  /* Decorative ribbons: a wide soft backdrop rather than a thin strip at the edge */
  .about-hero__deco,
  .home-hero .about-hero__deco {
    width: 110%;
    height: 70%;
    right: -35%;
    bottom: -12%;
    opacity: .34;
  }

  /* Discover diagram: stack top to bottom with the connectors pointing down */
  .flow__row { flex-direction: column; align-items: stretch; gap: 0; }
  .flow__sources,
  .flow__engine,
  .flow__outcome { flex: none; }
  .flow__link {
    flex: none;
    align-self: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    min-width: 0;
  }
  .flow__link svg { flex: none; width: 44px; height: 64px; transform: rotate(90deg); }
}

/* ---------- Scroll motion (enabled by site.js) ---------- */

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease var(--rd, 0s), transform .8s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s);
}
.motion [data-reveal].is-in { opacity: 1; transform: translateY(0); }

.motion .journey { transform: translateY(14px); }
.journey.is-in { background-color: oklch(.977 .012 235); transform: translateY(0); }

.motion .tl-item__marker {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.motion .tl-item__text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease .12s, transform .7s cubic-bezier(.22, 1, .36, 1) .12s;
}
.motion .tl-item.is-in .tl-item__marker { opacity: 1; transform: scale(1); }
.motion .tl-item.is-in .tl-item__text { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .journey { transition: none; }
  .flow__link path,
  .flow__stage,
  .flow__pulse { animation: none; }
}