/* =====================================================================
   HOME: landing-page sections only. Shared pieces (section headers,
   case cards, segmented control, contact) live in site.css.
   Rhythm: statement → space → content → space → next idea. Most sections
   sit directly on the scene; glass is kept for the trade-off card, the
   nav and the contact panel.
   ===================================================================== */

/* ---------- 01 · Hero ---------- */
.hero{min-height:calc(100svh - var(--nav-h) - 14px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(32px,6vh,72px);padding-bottom:24px}
.hero-inner{margin:auto 0;max-width:1100px}
.hero-id{display:flex;align-items:center;gap:14px}
.hero-portrait{width:52px;height:52px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 10px 24px -10px rgba(var(--shadow),.7)}
.hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:var(--fs-eyebrow);font-weight:500;color:var(--text-2)}
.shift{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.875rem;font-weight:600;letter-spacing:-.005em;color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.shift i{font-style:normal;color:var(--signal);display:inline-block;transition:translate 1.1s var(--spring) .6s}
.js .hero-id:not(.in) .shift i{translate:-6px 0}
.hero-title{font-size:var(--fs-display);line-height:.98;letter-spacing:-.045em;font-weight:700;margin-top:clamp(24px,3.4vh,40px);max-width:16.5ch;text-wrap:balance}
.hero-title span{color:var(--text-3)}
.hero-sub{max-width:620px;margin-top:clamp(24px,3.4vh,36px);font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.005em;color:var(--text-3);text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4.4vh,48px)}
.hero-foot{display:flex;align-items:center;gap:8px 32px;flex-wrap:wrap;margin-top:clamp(40px,6vh,80px);padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--text-3)}
.scroll-cue{margin-left:auto;width:32px;height:44px;display:grid;place-items:center;border-radius:999px}
.scroll-cue i{width:1px;height:28px;background:linear-gradient(var(--text-3),transparent);position:relative;overflow:hidden}
.scroll-cue i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--text);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* ---------- 02 · Proof ---------- */
/* Headline in two sentences: each on its own line, the first one quieter */
.sec-title.two-line{max-width:none}
.sec-title.two-line span{display:block;color:var(--text-3)}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(24px,3vw,48px)}
.proof-item{padding-top:24px;border-top:1px solid var(--line)}
.proof-item dt{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.proof-item dd{margin-top:14px;font-size:1rem;line-height:1.5;color:var(--text-3);max-width:26ch}

/* ---------- 03 · Selected work ---------- */
.work-more{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.work-more .pill span{transition:translate .4s var(--spring)}
@media (hover:hover){.work-more .pill:hover span{translate:3px 0}}

/* ---------- 04 · Toolkit ---------- */
/* The ticker: full-bleed, edges fade out; two copies loop seamlessly */
.marquee{position:relative;overflow:hidden;padding:76px 0 40px;margin-top:-40px;  /* headroom inside the clip so hover tooltips aren't cut off */
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:ticker var(--dur,80s) linear infinite}
.marquee.paused .marquee-track,.marquee.touching .marquee-track{animation-play-state:paused}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
@keyframes ticker{to{transform:translateX(-50%)}}
.tool{position:relative;display:flex;align-items:center;gap:12px;margin-right:clamp(40px,5vw,72px);color:var(--text-3);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:color .3s var(--ease),scale .45s var(--spring);cursor:default}
.tool svg{width:28px;height:28px;flex:none}
.tool-tip{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 4px;padding:7px 12px;border-radius:12px;font-size:.8125rem;font-weight:500;color:var(--text);white-space:nowrap;background:rgba(28,28,31,.92);box-shadow:inset 0 0 0 1px var(--hairline),0 12px 30px -12px rgba(var(--shadow),.8);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),translate .35s var(--spring)}
@media (hover:hover){
  .tool:hover{color:var(--text);scale:1.08}
  .tool:hover .tool-tip{opacity:1;translate:-50% 0}
}
.toolkit-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.toolkit-hint{font-size:.9375rem;color:var(--text-3)}
/* Touch: a tapped tool shows its tooltip for a moment (home.js) */
.tool.show{color:var(--text)}
.tool.show .tool-tip{opacity:1;translate:-50% 0}
@media (hover:none){
  .tradeoffs button:active,.think-source a:active{opacity:.6}
}
/* The same tools, listed by what they're for (and the accessible version of the ticker) */
.tool-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.tool-group{padding-top:20px;border-top:1px solid var(--line)}
.tool-group h3{font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.tool-group ul{margin-top:16px;display:grid;gap:10px}
.tool-group li{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--text-2)}
.tool-group svg{width:16px;height:16px;flex:none;color:var(--text-3)}

/* ---------- 05 · How I think ---------- */
.think{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.tradeoffs{display:flex;flex-direction:column;margin-top:var(--gap-lg);border-top:1px solid var(--line)}
.tradeoffs button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:600;letter-spacing:-.018em;color:var(--text-3);transition:color .25s var(--ease),padding .45s var(--spring)}
.tradeoffs button:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--signal);opacity:0;scale:.4;transition:opacity .25s,scale .45s var(--spring)}
@media (hover:hover){.tradeoffs button:hover{color:var(--text-2)}}
.tradeoffs button[aria-selected="true"]{color:var(--text);padding-left:14px}
.tradeoffs button[aria-selected="true"]:after{opacity:1;scale:1}
.tradeoffs em{font-style:normal;font-weight:400;color:var(--text-3);margin:0 .35em}

/* Trade-off card: a physical object: drag to flip (home.js) */
.flip-stage{perspective:1600px}
.flip{position:relative;aspect-ratio:1.3;min-height:340px;transform-style:preserve-3d;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;will-change:transform}
.flip.dragging{cursor:grabbing}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:clamp(28px,3.4vw,44px);border-radius:calc(var(--radius) + 4px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
.flip:focus-visible .flip-face{outline:2px solid var(--accent);outline-offset:4px}
.flip-tag{font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.flip-q{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.375rem);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin-top:auto;text-wrap:balance}
.flip-a{font-size:clamp(1.25rem,1rem + .9vw,1.75rem);line-height:1.2;letter-spacing:-.02em;font-weight:700;margin-top:auto;text-wrap:balance}
.flip-why{margin-top:16px;font-size:1rem;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.flip-hint{margin-top:28px;font-size:.875rem;font-weight:500;color:var(--text-3);display:flex;align-items:center;gap:10px}
.flip-hint:before{content:'';width:28px;height:28px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E") center/13px no-repeat}
.hint-touch{display:none}
@media (hover:none){.hint-drag{display:none}.hint-touch{display:inline}}
.flip-q,.flip-a,.flip-why{transition:opacity .25s var(--ease)}
.flip.swapping .flip-q,.flip.swapping .flip-a,.flip.swapping .flip-why{opacity:0}
.think-source{margin-top:20px;font-size:.9375rem;color:var(--text-3);min-height:1.5em}
.think-source a{color:var(--text);font-weight:600}
@media (hover:hover){.think-source a:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---------- 06 · Trajectory ---------- */
.path{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.path-story{margin-top:var(--gap-lg);display:grid;gap:.9em;max-width:620px}
.path-story p{font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);line-height:1.45;letter-spacing:-.014em;color:var(--text-3);text-wrap:pretty}
.path-story p:last-child{color:var(--text);font-weight:600}
.path-line{position:relative;display:grid;gap:clamp(28px,3.4vw,44px);padding-left:36px;margin-top:8px;--fill:0}
/* the rail, and a lit segment that fills as you scroll (home.js sets --fill) */
.path-line:before,.path-line:after{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:1px;border-radius:1px}
.path-line:before{background:var(--line)}
.path-line:after{background:linear-gradient(var(--text-2),var(--signal));transform-origin:top;transform:scaleY(var(--fill))}
.path-line li{position:relative}
.path-line li:before{content:'';position:absolute;left:-36px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--scene-base);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.path-line li.lit:before{background:var(--text-2);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.path-line li.now:before{background:var(--signal);box-shadow:0 0 0 5px rgba(233,183,127,.16),0 0 24px rgba(233,183,127,.6)}
.path-line i{display:block;margin-bottom:6px;font-style:normal;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.path-line small{display:block;margin-top:4px;font-size:1rem;line-height:1.4;color:var(--text-2)}
.path-line b{display:block;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:650;letter-spacing:-.018em}
.path-line span{display:block;margin-top:8px;font-size:.9375rem;line-height:1.45;color:var(--text-3);max-width:34ch}
.path-line li.now b{color:var(--signal)}

/* ---------- 07 · About ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}
.about-photo{position:sticky;top:calc(var(--nav-h) + 48px);aspect-ratio:4/5;border-radius:var(--radius);box-shadow:0 0 0 1px var(--hairline),0 50px 100px -50px rgba(var(--shadow),.9)}
.about-photo.hidden+.about-copy{grid-column:1/-1;max-width:820px}
.about-title{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-top:20px}
.about-title span{display:inline-block;color:var(--signal);font-weight:400;transition:translate 1.2s var(--spring) .35s}
.js .about-title:not(.in) span{translate:-.4em 0}
.statement{margin-top:var(--gap-lg);display:grid;gap:1.1em;max-width:640px}
.statement p{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;letter-spacing:-.012em;color:var(--text-3);text-wrap:pretty}
.statement p:first-child{font-size:var(--fs-statement);line-height:1.25;letter-spacing:-.022em;font-weight:600;color:var(--text)}
.statement p:last-child{color:var(--text);font-weight:600}
/* Sign-off under the About statement */
.about-sign{margin-top:var(--gap-lg);padding-top:20px;border-top:1px solid var(--line);max-width:640px}
.about-sign b{display:block;font-size:1.125rem;font-weight:650;letter-spacing:-.015em}
.about-sign span{display:block;margin-top:6px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.tool-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .think,.path,.about{grid-template-columns:1fr}
  .think-card{max-width:520px}
  .about-photo{position:static;max-width:420px}
}
@media (max-width:640px){
  .hero-cta .pill{flex:1 1 100%}
  .hero-foot span+span{display:none}
  .flip{aspect-ratio:.95}
  .tool-groups{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .scroll-cue i:after{animation:none}
  .marquee{-webkit-mask:none;mask:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:20px;padding:0 var(--gx)}
  .marquee-track [data-dup]{display:none}
  #marqueeToggle{display:none}
}
@media (prefers-contrast:more){.hero-sub,.statement p,.path-line span,.proof-item dd,.tradeoffs button{color:var(--text-2)}}