/* How I Work: editorial. Bold type, plain icons, and headlines that move as you scroll. */
.how .top nav a[aria-current="page"] { color: var(--ox); }
.how section { position: relative; }
/* Type moves are allowed to overshoot the edges; the page never scrolls sideways. */
.how main { overflow-x: clip; }
.big { font: 400 clamp(48px, 7.4vw, 128px)/0.94 var(--display); text-transform: uppercase; margin: 0; }

/* Kinetic type: split text keeps words together so lines wrap normally. */
.kw { display: inline-block; white-space: nowrap; }
.kc { display: inline-block; will-change: transform; }
.kmask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }

/* Numbered rows: the pattern the briefs established. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--rule, var(--line));
}
.rows .no { font: 600 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--no, var(--ox)); }
.rows p { margin: 0; font: 500 clamp(21px, 2.3vw, 36px)/1.2 var(--body); letter-spacing: -0.015em; max-width: 34ch; transition: translate 300ms ease, color 300ms ease; }
.rows > li:hover p { translate: 8px 0; color: var(--hover, var(--ox)); }
.rows-dark { --rule: #4a453e; --no: #d47a86; --hover: #f0e3c9; }

/* ---------- 1. Hero ---------- */
.hero { padding-top: clamp(110px, 16vh, 170px); padding-bottom: clamp(70px, 11vh, 130px); }
.hero h1 { font: 400 clamp(56px, 8.6vw, 156px)/0.92 var(--display); text-transform: uppercase; margin: 18px 0 clamp(40px, 6vw, 80px); max-width: 15ch; }
.hero h1 .ox { color: var(--ox); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.hero-who { margin: 0; font: 600 clamp(22px, 2vw, 32px)/1.25 var(--body); letter-spacing: -0.015em; max-width: 20ch; }
.messy-lead { margin: 0 0 14px; font: 600 11px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--soft); }
.hero-access { margin: clamp(48px, 7vw, 96px) 0 0; padding-top: 26px; border-top: 1px solid var(--ink); font: 500 clamp(24px, 2.6vw, 42px)/1.2 var(--body); letter-spacing: -0.02em; max-width: 34ch; }
.hero-access em { font-style: normal; color: var(--ox); }

/* ---------- 2. Superpowers ---------- */
.powers { padding-block: clamp(70px, 11vh, 130px); border-top: 1px solid var(--ink); }
.powers .big { margin-bottom: clamp(40px, 6vw, 80px); transform-origin: 0 100%; }
.power-grid { list-style: none; margin: 0; padding: 0; }
.power {
  display: grid; grid-template-columns: 56px 120px minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 3.4vw, 44px) 0; border-top: 1px solid var(--line);
  transition: opacity 450ms ease;
}
.power:last-child { border-bottom: 1px solid var(--line); }
.power .no { font: 600 12px/1 var(--mono); color: var(--ox); letter-spacing: 0.06em; align-self: start; padding-top: 10px; }
.power .icon { width: 104px; height: 104px; overflow: visible; transition: scale 450ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.power h3 { font: 400 clamp(32px, 3.8vw, 64px)/0.98 var(--display); text-transform: uppercase; margin: 0; }
.power p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--soft); max-width: 46ch; }
/* One superpower at a time: the row nearest the middle of the screen leads. */
.power-grid.has-focus .power:not(.is-focus) { opacity: 0.28; }
.power.is-focus .icon { scale: 1.08; }

/* Icons draw in once, then the focused one keeps moving. */
.icon * { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(0.6, 0, 0.3, 1); transform-box: fill-box; transform-origin: center; }
.icon .ac { stroke: var(--ox); transition-delay: 500ms; }
.icon .dash { stroke-dasharray: 0.06 0.06; stroke-dashoffset: 0; opacity: 0; transition: opacity 600ms ease; }
.icon .mover, .icon .fillup { stroke: none; fill: var(--ox); stroke-dasharray: none; opacity: 0; transition: opacity 300ms ease; }
.icon animateMotion { stroke: none; }
.power.is-in .icon * { stroke-dashoffset: 0; }
.power.is-in .icon .dash { opacity: 1; }
.power.is-focus .icon .mover { opacity: 1; }

/* All six share one 2.4s timeline: a single crisp move, a short hold, a clean reset. */
.power { --loop: 2.4s; --snap: cubic-bezier(0.65, 0, 0.35, 1); }
/* 01 Seeing the system: the pulse reaches the outlier at 45%, and it answers. */
.power.is-focus .icon-system .node { animation: sys-ping var(--loop) var(--snap) infinite; }
@keyframes sys-ping { 0%, 42% { scale: 1; fill: transparent; } 50% { scale: 1.3; fill: var(--ox); } 60%, 88% { scale: 1; fill: var(--ox); } 100% { scale: 1; fill: transparent; } }
/* 02 Zero to working: turn, push, fill. One sequence. */
.power.is-focus .icon-zero .dash { animation: zero-turn var(--loop) var(--snap) infinite; }
.power.is-focus .icon-zero .arrow { animation: zero-push var(--loop) var(--snap) infinite; }
.power.is-focus .icon-zero .fillup { opacity: 1; transform-origin: 50% 100%; animation: zero-fill var(--loop) var(--snap) infinite; }
@keyframes zero-turn { 0% { rotate: 0deg; } 25%, 100% { rotate: 90deg; } }
@keyframes zero-push { 0%, 22% { translate: 0 0; } 32% { translate: 3px 0; } 42%, 100% { translate: 0 0; } }
@keyframes zero-fill { 0%, 38% { scale: 1 0; opacity: 1; } 62%, 88% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
/* 03 Design: the pencil draws one stroke; the question answers with a small nod. */
.icon-design .sketch { stroke: var(--ox); }
.power.is-focus .icon-design .sketch { animation: d-sketch var(--loop) var(--snap) infinite; }
.power.is-focus .icon-design .pencil { animation: d-pencil var(--loop) var(--snap) infinite; }
.power.is-focus .icon-design .query { animation: d-query var(--loop) var(--snap) infinite; transform-origin: 50% 100%; }
@keyframes d-sketch { 0%, 10% { stroke-dashoffset: 1; opacity: 1; } 60%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d-pencil { 0%, 10% { translate: -6px 2px; } 60%, 86% { translate: 5px -1px; } 100% { translate: -6px 2px; } }
@keyframes d-query { 0%, 60% { rotate: 0deg; } 68% { rotate: -10deg; } 76% { rotate: 6deg; } 84%, 100% { rotate: 0deg; } }
/* 04 End to end: each tick lights the moment the dot passes it (x = 22, 32, 42 on a 10→54 run). */
.power.is-focus .icon-end .t1 { animation: e-t1 var(--loop) linear infinite; }
.power.is-focus .icon-end .t2 { animation: e-t2 var(--loop) linear infinite; }
.power.is-focus .icon-end .t3 { animation: e-t3 var(--loop) linear infinite; }
@keyframes e-t1 { 0%, 26% { stroke: var(--ink); } 27%, 96% { stroke: var(--ox); } 100% { stroke: var(--ink); } }
@keyframes e-t2 { 0%, 49% { stroke: var(--ink); } 50%, 96% { stroke: var(--ox); } 100% { stroke: var(--ink); } }
@keyframes e-t3 { 0%, 72% { stroke: var(--ink); } 73%, 96% { stroke: var(--ox); } 100% { stroke: var(--ink); } }
/* 05 Product and story: the circles close together, then the check. */
.power.is-focus .icon-agree .left { animation: a-left var(--loop) var(--snap) infinite; }
.power.is-focus .icon-agree .right { animation: a-right var(--loop) var(--snap) infinite; }
.power.is-focus .icon-agree .check { animation: a-check var(--loop) var(--snap) infinite; }
@keyframes a-left { 0%, 100% { translate: -7px 0; } 35%, 86% { translate: 0 0; } }
@keyframes a-right { 0%, 100% { translate: 7px 0; } 35%, 86% { translate: 0 0; } }
@keyframes a-check { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 58%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* 06 Talented people: three heads lift in quick succession, then rest. */
.power.is-focus .icon-people .h1 { animation: p-lift var(--loop) var(--snap) infinite; }
.power.is-focus .icon-people .h2 { animation: p-lift var(--loop) var(--snap) 0.16s infinite; }
.power.is-focus .icon-people .h3 { animation: p-lift var(--loop) var(--snap) 0.32s infinite; }
@keyframes p-lift { 0%, 30%, 100% { translate: 0 0; } 12% { translate: 0 -3px; } }

/* ---------- 3. Good fits ---------- */
.briefs { background: var(--ink); color: var(--bg); padding-block: clamp(80px, 12vh, 140px); overflow: hidden; }
.briefs .kicker { color: #a9a196; margin-bottom: 14px; }
.briefs .big { margin-bottom: clamp(36px, 5vw, 64px); }
.circled { position: relative; white-space: nowrap; color: #f0e3c9; }
.circled svg { position: absolute; left: -14%; top: -38%; width: 128%; height: 176%; overflow: visible; pointer-events: none; }
.circled svg { rotate: -2deg; }
.circled path { fill: none; stroke: #d47a86; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); }
.circled .pass1 { stroke-width: 2.6; }
.circled .pass2 { stroke-width: 1.3; opacity: 0.7; --draw: var(--draw2, 1); }

/* ---------- 4. Where I'm not strongest ---------- */
.limits { padding-block: clamp(80px, 12vh, 140px); }
.limits .big { margin-bottom: clamp(36px, 5vw, 64px); }
[data-kinetic="fill"] {
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  background: linear-gradient(90deg, var(--ink) var(--fill, 100%), transparent var(--fill, 100%));
  -webkit-background-clip: text; background-clip: text;
}
.limits-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.limits-lede { margin: 0; font: 600 clamp(24px, 2.3vw, 36px)/1.2 var(--body); letter-spacing: -0.015em; }
.limits-copy p { margin: 0 0 18px; font-size: 18px; max-width: 48ch; }
.disagree { margin: clamp(80px, 12vh, 140px) 0 clamp(30px, 4vw, 50px); overflow: hidden; }
.disagree p { margin: 0; font: 400 clamp(44px, 6.6vw, 112px)/0.98 var(--display); text-transform: uppercase; }
.disagree-punch { color: var(--ox); text-align: right; }
.disagree-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.disagree-copy p { margin: 0; font-size: 18px; max-width: 46ch; }

/* ---------- 5. Environment ---------- */
.env { background: var(--ox); color: var(--bg); padding-block: clamp(80px, 12vh, 140px); overflow: hidden; }
.env .kicker { color: #f0c7cd; margin-bottom: 26px; }
.conditions { list-style: none; margin: 0; padding: 0; }
.conditions li { font: 400 clamp(46px, 8.4vw, 150px)/0.96 var(--display); text-transform: uppercase; white-space: nowrap; width: max-content; }
.conditions li:nth-child(even) { color: #f0c7cd; }
.conditions [data-kinetic="squash"] { transform-origin: 0 100%; }
/* Rising letters come up through their own line, never into the next one. */
.conditions [data-kinetic="rise"] { overflow: hidden; padding-block: 0.03em; }
.env-copy { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 6vw, 80px); padding-top: 24px; border-top: 1px solid rgb(243 239 231 / 0.35); }
.env-own { font: 600 clamp(22px, 2vw, 30px)/1.3 var(--body); margin: 0; max-width: 46ch; }
.env-copy p:not(.env-own) { margin: 0; font-size: 18px; max-width: 46ch; color: #f6e3e6; }

/* ---------- 4b. Not my best use: three columns per weakness ---------- */
.fit { border-top: 1px solid var(--ink); margin-top: clamp(36px, 5vw, 60px); }
.fit-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(20px, 3.5vw, 56px); padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.fit-label { margin: 0 0 12px; font: 600 11px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ox); }
.fit-cell h3 { font: 400 clamp(28px, 2.8vw, 44px)/1 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.fit-cell p:not(.fit-label) { margin: 0; font-size: 17px; line-height: 1.55; }
.fit-cell:not(:first-child) p:not(.fit-label) { color: var(--soft); }
.fit-cell:last-child { border-left: 1px solid var(--line); padding-left: clamp(16px, 2.5vw, 36px); }
.fit-row .fit-cell { opacity: 1; transition: opacity 500ms ease, translate 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.how.js-motion .fit-row:not(.is-in) .fit-cell { opacity: 0; translate: 0 18px; }
.fit-row.is-in .fit-cell:nth-child(2) { transition-delay: 150ms; }
.fit-row.is-in .fit-cell:nth-child(3) { transition-delay: 300ms; }

/* ---------- 6. What that looks like: PARDNER, step by step ---------- */
.proof { padding-block: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--ink); }
.proof .kicker { margin-bottom: 14px; }
.proof .big { margin-bottom: clamp(30px, 4vw, 56px); }
.proof-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.proof-lede { margin: 0; font: 600 clamp(24px, 2.4vw, 38px)/1.2 var(--body); letter-spacing: -0.015em; max-width: 26ch; }
.proof-art { margin: 0; }
.proof-art > img { width: 100%; box-shadow: 0 24px 50px -30px rgb(38 35 31 / 0.6); }
.proof-art figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; font: 600 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.proof-mark { height: 30px; width: auto; }
/* The rope grows down the steps with scroll; each bead lights as it arrives. */
.proof-steps { --run: 0; list-style: none; margin: 0; padding: 0 0 0 76px; position: relative; max-width: 980px; }
.proof-steps::before, .proof-steps::after { content: ""; position: absolute; left: 22px; top: 14px; bottom: 40px; width: 6px; border-radius: 3px; }
.proof-steps::before { background: var(--line); }
.proof-steps::after { background: repeating-linear-gradient(-58deg, var(--ox) 0 3px, var(--ox-dark) 3px 4.5px); transform-origin: top; transform: scaleY(var(--run)); }
.proof-step { position: relative; display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); padding: 0 0 clamp(34px, 5vh, 60px); }
.proof-step::before {
  /* Beads sit on top of the rope as it grows past them. */
  content: ""; position: absolute; z-index: 1; left: -61px; top: 10px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); transition: background 300ms ease, box-shadow 300ms ease, scale 300ms ease;
}
.proof-step.is-on::before { background: radial-gradient(circle at 35% 35%, #f3dfae, #c9a25c 55%, #8a6a2f); box-shadow: 0 0 0 4px rgb(201 162 92 / 0.2); scale: 1.1; }
.proof-step h3 { font: 400 clamp(36px, 4.2vw, 68px)/0.95 var(--display); text-transform: uppercase; margin: 0; color: var(--line); transition: color 400ms ease; }
.proof-step.is-on h3 { color: var(--ink); }
.proof-step:last-child.is-on h3 { color: var(--ox); }
.proof-step p { margin: 0; padding-top: 6px; font-size: 18px; line-height: 1.55; max-width: 52ch; opacity: 0.35; transition: opacity 400ms ease; }
.proof-step.is-on p { opacity: 1; }
.proof-link { margin: 0 0 0 76px; }
.proof-link a { color: var(--ox); font-weight: 700; font-size: 15px; text-underline-offset: 4px; }

.loop-section { padding-block: clamp(80px, 12vh, 140px); }
.did { list-style: none; margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.did li { position: relative; padding: 14px 0 14px 42px; border-top: 1px solid var(--line); font-size: 18px; }
.did li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 8px; margin-top: -4px; border-radius: 99px;
  background: repeating-linear-gradient(-58deg, var(--ox) 0 3px, var(--ox-dark) 3px 4.5px);
  background-size: 26px 8px;
}
.did li > span { display: inline-block; }
.did.is-armed li::before { width: 0; }
.did.is-armed li > span { opacity: 0; translate: -14px 0; }
.did li.is-in::before { animation: pull 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.did li.is-in > span { opacity: 1; translate: 0 0; transition: opacity 500ms ease 200ms, translate 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms; }
@keyframes pull { from { width: 0; background-position: 30px 0; } to { width: var(--rope, 26px); background-position: 0 0; } }
.did .did-ship { --rope: 44px; padding-left: 64px; }
.did .did-ship::before { height: 12px; margin-top: -6px; background-size: 26px 12px; }
.did .did-ship { grid-column: 1 / -1; font: 400 clamp(32px, 3.6vw, 56px)/1 var(--display); text-transform: uppercase; color: var(--ox); padding-top: 22px; border-top: 1px solid var(--ink); }
.loop-block { text-align: center; }
.loop-intro { font-size: clamp(18px, 1.4vw, 21px); max-width: 44ch; margin: 0 auto 10px; }
.loop { position: relative; width: min(640px, 92vw); aspect-ratio: 1; margin: 0 auto; }
.loop canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stations { list-style: none; margin: 0; padding: 0; }
.stations li {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  padding: 9px 14px; background: var(--bg); border: 1px solid var(--ink);
  font: 700 clamp(10px, 1vw, 13px)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}
.stations li.is-on { background: var(--ox); border-color: var(--ox); color: var(--bg); }
.loop-happy { margin: 0 auto 30px; font-size: clamp(40px, 5.6vw, 96px); text-wrap: balance; }

/* ---------- 7. The short version ---------- */
.colophon { border-top: 1px solid var(--ink); padding-block: 40px 70px; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 16px 40px; align-items: baseline; }
.colophon .kicker { color: var(--soft); }
.short { margin: 0; font-size: 18px; line-height: 1.55; max-width: 62ch; }
.short-link { color: var(--ox); font-weight: 700; font-size: 14px; text-underline-offset: 4px; white-space: nowrap; }
.how-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1000px) {
  .power { grid-template-columns: 44px 96px minmax(0, 1fr); }
  .power p { grid-column: 3; }
}
@media (max-width: 760px) {
  .hero-grid, .limits-grid, .disagree-copy, .env-copy, .did { grid-template-columns: 1fr; }
  .fit-row, .proof-intro { grid-template-columns: 1fr; }
  .fit-cell:last-child { border-left: 0; padding-left: 0; }
  .proof-steps { padding-left: 52px; }
  .proof-steps::before, .proof-steps::after { left: 14px; }
  .proof-step { grid-template-columns: 1fr; }
  .proof-step::before { left: -45px; top: 8px; }
  .proof-link { margin-left: 52px; }
  .rows > li { grid-template-columns: 40px minmax(0, 1fr); }
  .power { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
  .power .no { grid-column: 1; grid-row: 1; padding-top: 0; }
  .power .icon { grid-column: 1; grid-row: 2 / 4; width: 60px; height: 60px; }
  .power h3 { grid-column: 2; grid-row: 1 / 3; }
  .power p { grid-column: 2; }
  .disagree-punch { text-align: left; }
  .conditions li { font-size: 12.5vw; }
  .colophon { grid-template-columns: 1fr; }
  .stations li { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .icon *, .circled path, .rows p, .power { transition: none; animation: none !important; }
  .did li::before { animation: none !important; width: var(--rope, 26px) !important; }
  .proof-steps::after { transform: none; }
  .proof-step *, .proof-step::before, .fit-cell { transition: none !important; }
}