/* Shared styles for all pages, extracted from the landing page */
:root{
  --bg:#f8f7f3; --bg-img:url(../bg-light.webp?v=20261107-perf1); --hl-end:#62a800; --veil-l:0%;--veil-m:0%;--veil-r:0%;--veil-t:0%;--veil-mid:0%;--veil-b:0%;--bg-filter:none; --bg-2:#fffdf9; --surface:#ffffff; --surface-2:#f3efe7;
  --text:#121212; --muted:#55524c; --line:#e6e0d4;
  --lime:#d6f25c; --lime-ink:#141a00; --link:#3f5a00;
  --chip:#eef6c9; --chip-ink:#3f5a00;
  --tile-a:#efe7da; --tile-b:#e4d9c6; --tile-line:rgba(255,255,255,.65);
  --mosaic-opacity:.75;
  --nav-bg:rgba(255,255,255,.82); --nav-line:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(60,45,20,.08);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1112; --bg-img:url(../bg-dark.webp?v=20261107-perf1); --hl-end:#d6f25c; --veil-l:70%;--veil-m:25%;--veil-r:45%;--veil-t:25%;--veil-mid:45%;--veil-b:75%;--bg-filter:none; --bg-2:#141415; --surface:#19191b; --surface-2:#202023;
    --text:#f4f4f2; --muted:#a6a5a0; --line:#2b2b2e;
    --lime:#d6f25c; --lime-ink:#141a00; --link:#d6f25c;
    --chip:#2a2b25; --chip-ink:#e9ecdf;
    --tile-a:#1c1c1e; --tile-b:#262628; --tile-line:rgba(0,0,0,.6);
    --mosaic-opacity:.9;
    --nav-bg:rgba(20,20,22,.78); --nav-line:rgba(255,255,255,.1);
    --shadow:0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1112; --bg-img:url(../bg-dark.webp?v=20261107-perf1); --hl-end:#d6f25c; --veil-l:70%;--veil-m:25%;--veil-r:45%;--veil-t:25%;--veil-mid:45%;--veil-b:75%;--bg-filter:none; --bg-2:#141415; --surface:#19191b; --surface-2:#202023;
  --text:#f4f4f2; --muted:#a6a5a0; --line:#2b2b2e;
  --lime:#d6f25c; --lime-ink:#141a00; --link:#d6f25c;
  --chip:#2a2b25; --chip-ink:#e9ecdf;
  --tile-a:#1c1c1e; --tile-b:#262628; --tile-line:rgba(0,0,0,.6);
  --mosaic-opacity:.9;
  --nav-bg:rgba(20,20,22,.78); --nav-line:rgba(255,255,255,.1);
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:"Inter Tight",Inter,sans-serif;letter-spacing:-.02em;line-height:1.1}
.bg-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:opacity,transform;transform-origin:50% 0;filter:var(--bg-filter);
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) var(--veil-l),transparent) 0,color-mix(in srgb,var(--bg) var(--veil-m),transparent) 55%,color-mix(in srgb,var(--bg) var(--veil-r),transparent) 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) var(--veil-t),transparent) 0,color-mix(in srgb,var(--bg) var(--veil-mid),transparent) 60%,color-mix(in srgb,var(--bg) var(--veil-b),transparent) 100%),
  var(--bg-img) center top/cover no-repeat}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* mosaic background */
#mosaic{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:var(--mosaic-opacity);pointer-events:none}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 0,var(--bg) 900px)}

/* nav */
nav{position:fixed;inset:16px 0 auto;z-index:50;transform:none!important;transition:none!important}
.bar{display:flex;align-items:center;gap:24px;padding:10px 10px 10px 26px;border-radius:999px;background:var(--nav-bg);border:1px solid var(--nav-line);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--shadow)}
.logo{font:700 18px "Inter Tight",sans-serif;letter-spacing:-.01em;white-space:nowrap}
.links{display:flex;gap:6px;margin-inline:auto}
.links a{position:relative;padding:8px 14px;font-size:14px;font-weight:500;color:var(--muted);border-radius:999px;transition:color .2s}
.links a:hover,.links a.active{color:var(--text)}
.links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--lime)}
.tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--nav-line);background:transparent;color:var(--text);cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.sun{display:none}
:root[data-theme="dark"] .sun{display:block}
:root[data-theme="dark"] .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sun{display:block}
  :root:not([data-theme="light"]) .moon{display:none}
}
.ph-dark{display:none!important}
:root[data-theme="dark"] .ph-dark{display:block!important}
:root[data-theme="dark"] .ph-light{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ph-dark{display:block!important}
  :root:not([data-theme="light"]) .ph-light{display:none!important}
}
#menuBtn{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;font:600 15px Inter,sans-serif;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s;border:1.5px solid transparent;cursor:pointer}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{box-shadow:0 8px 24px rgba(180,220,40,.35);transform:translateY(-1px)}
.btn-ghost{border-color:var(--text);color:var(--text)}
.btn-ghost:hover{background:var(--text);color:var(--bg)}
.btn-outline-lime{border-color:var(--link);color:var(--link)}
.btn-sm{padding:10px 18px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--link);white-space:nowrap}
.link-arrow svg{width:15px;height:15px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(3px)}

.eyebrow{font:600 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--text);opacity:.85;margin-bottom:12px}

/* hero */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:0;padding-top:90px}
.hero-text{position:relative;z-index:2}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1 .hl{background:linear-gradient(90deg,var(--text) 0%,var(--hl-end,var(--link)) 45%,var(--hl-end,var(--link)) 55%,var(--text) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.scroll-cue{position:absolute;left:0;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);z-index:2}
.scroll-cue i{width:1.5px;height:44px;background:linear-gradient(var(--text),transparent);border-radius:2px;position:relative;overflow:hidden}
@keyframes drop{from{top:-14px}to{top:44px}}
.hero::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse 45% 55% at 22% 52%,color-mix(in srgb,var(--bg) 70%,transparent),transparent 75%);pointer-events:none;z-index:-1}
.hero h1{font-size:clamp(48px,6.6vw,88px);font-weight:800;letter-spacing:-.045em;line-height:.98;margin-bottom:22px}
.hero p.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:30em;margin-bottom:30px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.stats{display:flex;gap:0}
.stat{padding-right:32px;margin-right:32px;border-right:1px solid var(--line)}
.stat:last-child{border:0;margin:0;padding:0}
.stat b{display:block;font:700 30px "Inter Tight",sans-serif;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--muted);line-height:1.3;display:block}
.hero-photo{position:relative;align-self:start;height:150vh;height:150svh;margin:0 -22% calc(-50svh - 90px) -14%}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform:scale(1.1);transform-origin:55% 0;}

/* sections */
section{padding:110px 0;position:relative;z-index:1}
.sec-title{font-size:clamp(40px,5.4vw,84px);font-weight:800;letter-spacing:-.04em;line-height:.98}
.sec-title em{font-style:normal;color:var(--hl-end,var(--link))}
section .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--hl-end,var(--link));opacity:1}
section .eyebrow::before{content:"";width:30px;height:1.5px;background:currentColor}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.sec-top p{max-width:30em;color:var(--muted);font-size:16px}
.arrow{width:18px;height:18px;flex-shrink:0}

/* marquee */
.marquee{position:relative;z-index:1;overflow:hidden;padding:26px 0;border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:800 clamp(44px,6.5vw,104px)/1 "Inter Tight",sans-serif;letter-spacing:-.04em;padding-right:.5em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--text);opacity:.55}
.marquee span:nth-child(4n+3){color:var(--link);-webkit-text-stroke:0;opacity:1}
.marquee span.star{-webkit-text-stroke:0;color:var(--link);opacity:1;font-size:clamp(28px,3.6vw,56px);align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}



/* color sheets: each section is a rounded panel stacked over the previous one */
section.sheet{isolation:isolate;margin-top:-56px;padding-top:150px;color:var(--text)}
section.sheet::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--sheet);border-radius:56px 56px 0 0;z-index:-1;box-shadow:0 -24px 60px rgba(0,0,0,.18)}
section.sheet.reveal{transform:none}
.sh-green{--sheet:#dfeedd;--text:#122017;--muted:#4d5e51;--line:rgba(18,32,23,.12);--surface:#f4faf2;--surface-2:#cfe2cc;--hl-end:#3f7a00;--link:#3f7a00}
.sh-cream{--sheet:#1c1e19;--text:#f4f4f2;--muted:#a9aba3;--line:rgba(255,255,255,.1);--surface:#25281f;--surface-2:#2e3127;--hl-end:#d6f25c;--link:#d6f25c}
.sh-violet{--sheet:#e9e4fb;--text:#1c1633;--muted:#5b5478;--line:rgba(28,22,51,.12);--surface:#f6f3ff;--surface-2:#dcd5f5;--hl-end:#6a3fe0;--link:#6a3fe0}
.sh-base{--sheet:#f8f7f3;--text:#121212;--muted:#55524c;--line:#e6e0d4;--surface:#ffffff;--surface-2:#f3efe7;--hl-end:#62a800;--link:#62a800}
.sh-paper{--sheet:#efe9dc;--text:#15130f;--muted:#5d574b;--line:rgba(0,0,0,.1);--surface:#fbf8f1;--surface-2:#e4dccb;--hl-end:#4f7a00;--link:#4f7a00}
.sh-lime{--sheet:#d6f25c;--text:#141a00;--muted:#3d4a10;--line:rgba(20,26,0,.16);--surface:#e4f78f;--surface-2:#c7e449;--hl-end:#141a00;--link:#141a00}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .sh-green{--sheet:#13241a;--text:#eef3ea;--muted:#a5b4a7;--line:rgba(255,255,255,.1);--surface:#1a2f22;--surface-2:#22392a;--hl-end:#d6f25c;--link:#d6f25c}
:root:not([data-theme="light"]) .sh-cream{--sheet:#efe9dc;--text:#15130f;--muted:#5d574b;--line:rgba(0,0,0,.1);--surface:#fbf8f1;--surface-2:#e4dccb;--hl-end:#4f7a00;--link:#4f7a00}
:root:not([data-theme="light"]) .sh-violet{--sheet:#1c1633;--text:#f1eefb;--muted:#b3abd0;--line:rgba(255,255,255,.1);--surface:#251e42;--surface-2:#2e2650;--hl-end:#d6f25c;--link:#d6f25c}
:root:not([data-theme="light"]) .sh-base{--sheet:#0f1112;--text:#f4f4f2;--muted:#a6a5a0;--line:#2b2b2e;--surface:#19191b;--surface-2:#202023;--hl-end:#d6f25c;--link:#d6f25c}
:root:not([data-theme="light"]) .sh-paper{--sheet:#efe9dc;--text:#15130f;--muted:#5d574b;--line:rgba(0,0,0,.1);--surface:#fbf8f1;--surface-2:#e4dccb;--hl-end:#4f7a00;--link:#4f7a00}
:root:not([data-theme="light"]) .sh-lime{--sheet:#d6f25c;--text:#141a00;--muted:#3d4a10;--line:rgba(20,26,0,.16);--surface:#e4f78f;--surface-2:#c7e449;--hl-end:#141a00;--link:#141a00}
}
:root[data-theme="dark"] .sh-green{--sheet:#13241a;--text:#eef3ea;--muted:#a5b4a7;--line:rgba(255,255,255,.1);--surface:#1a2f22;--surface-2:#22392a;--hl-end:#d6f25c;--link:#d6f25c}
:root[data-theme="dark"] .sh-cream{--sheet:#efe9dc;--text:#15130f;--muted:#5d574b;--line:rgba(0,0,0,.1);--surface:#fbf8f1;--surface-2:#e4dccb;--hl-end:#4f7a00;--link:#4f7a00}
:root[data-theme="dark"] .sh-violet{--sheet:#1c1633;--text:#f1eefb;--muted:#b3abd0;--line:rgba(255,255,255,.1);--surface:#251e42;--surface-2:#2e2650;--hl-end:#d6f25c;--link:#d6f25c}
:root[data-theme="dark"] .sh-base{--sheet:#0f1112;--text:#f4f4f2;--muted:#a6a5a0;--line:#2b2b2e;--surface:#19191b;--surface-2:#202023;--hl-end:#d6f25c;--link:#d6f25c}
:root[data-theme="dark"] .sh-paper{--sheet:#efe9dc;--text:#15130f;--muted:#5d574b;--line:rgba(0,0,0,.1);--surface:#fbf8f1;--surface-2:#e4dccb;--hl-end:#4f7a00;--link:#4f7a00}
:root[data-theme="dark"] .sh-lime{--sheet:#d6f25c;--text:#141a00;--muted:#3d4a10;--line:rgba(20,26,0,.16);--surface:#e4f78f;--surface-2:#c7e449;--hl-end:#141a00;--link:#141a00}
.sh-lime .btn-lime{background:#141a00;color:#d6f25c}
.sh-lime .btn-ghost{border-color:#141a00;color:#141a00}
.sh-lime .sec-title em::after{background:#141a00}
.sh-lime .eyebrow{color:#141a00}


/* shared color family for About and What I do cards */
.zi.c-lime .card,.pstep.on.f-lime{background:#d6f25c;color:#141a00;border-color:transparent}
.zi.c-violet .card,.pstep.on.f-violet{background:#6a3fe0;color:#ffffff;border-color:transparent}
.zi.c-orange .card,.pstep.on.f-orange{background:#ef7a2f;color:#1a0d02;border-color:transparent}
.zi.c-sky .card,.pstep.on.f-sky{background:#4cc3f0;color:#062633;border-color:transparent}
.zi .card em,.zi .card p{color:inherit;opacity:.75}
.zi .card .k{color:inherit}
.zi .card .k i{background:color-mix(in srgb,currentColor 16%,transparent)}
.pstep.on p,.pstep.on dt{color:inherit;opacity:.75}
.pstep.on dt,.pstep.on dd{border-top-color:color-mix(in srgb,currentColor 22%,transparent)}
.pstep.on .n{color:currentColor;-webkit-text-stroke-color:currentColor}
.pstep.on dd.get::before{color:inherit}


/* ---- motion family: one easing, one rhythm, all driven by scroll ---- */
#prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,#b5d932,#6a3fe0,#ef7a2f,#4cc3f0);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.st>*{opacity:0;translate:0 34px;transition:opacity .7s ease calc(var(--i,0) * 90ms),translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms)}
.st.in>*{opacity:1;translate:0 0}
.reveal .sec-title{clip-path:inset(0 0 100% 0);translate:0 40px;transition:clip-path 1s cubic-bezier(.2,.7,.2,1),translate 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in .sec-title{clip-path:inset(0 0 -20% 0);translate:0 0}
section.sheet{transform-origin:50% 0;will-change:scale}
.cta .sec-title{scale:calc(.86 + .14 * var(--cp,1))}
.band b{display:inline-block}



footer{padding:30px 0 36px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot b{display:block;font:700 16px "Inter Tight",sans-serif}
.foot small{font-size:12.5px;color:var(--muted)}
.foot .totop{display:inline-flex;align-items:center;gap:8px;font:600 13px Inter,sans-serif;padding:10px 18px;border-radius:999px;border:1px solid var(--line);color:var(--text);transition:background .25s,color .25s,border-color .25s}
.foot .totop:hover{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.foot .totop svg{width:15px;height:15px}
.foot .copy{font-size:12.5px;color:var(--muted)}

/* closing title: words rise one by one; the hello button leans toward the cursor */
.cta-title .cw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.cta-title .cw>*{display:inline-block;translate:0 105%;transition:translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--w) * 90ms + .1s)}
.cta.in .cta-title .cw>*{translate:0 0}
.cta .btn-lime{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .2s}

/* about statement: same word-by-word rise as the closing title, key phrase in the accent colour */
.about-title .cw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.about-title .cw>*{display:inline-block;translate:0 105%;transition:translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--w) * 45ms + .15s)}
.about-head.in .about-title .cw>*{translate:0 0}
.about-title .hlw{color:var(--hl-end)}


/* hero title: each line slides up out of a mask on load, then the accent line shimmers slowly */
.h1-anim .ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.h1-anim .ln>span{display:inline-block;animation:lineUp 1s cubic-bezier(.2,.7,.2,1) both}
.h1-anim .ln:nth-of-type(2)>span{animation-delay:.18s}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
.hero h1 .hl{background-size:220% 100%;animation:lineUp 1s cubic-bezier(.2,.7,.2,1) .18s both,shimmer 7s ease-in-out 1.4s infinite alternate}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}

/* stats band */
.band{position:relative;z-index:1;background:var(--lime);color:var(--lime-ink);padding:64px 0 120px}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.band .it{padding:0 28px;border-left:1px solid rgba(20,26,0,.18)}
.band .it:first-child{border-left:0;padding-left:0}
.band b{display:block;font:800 clamp(44px,4.6vw,72px)/1 "Inter Tight",sans-serif;letter-spacing:-.04em;white-space:nowrap}
.band .it > span{display:block;margin-top:10px;font:600 15px Inter,sans-serif}
.band small{display:block;font-size:13px;opacity:.65}

.odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.odo .strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.8s cubic-bezier(.15,.85,.25,1) calc(var(--k) * 110ms)}
.odo .strip span{height:1em;line-height:1;text-align:center}
.band.roll .odo .strip{transform:translateY(calc((var(--d) + 10) * -1em))}
.odo-s{display:inline-block}
.band .it{position:relative;cursor:default}
.band .it b{transition:scale .35s cubic-bezier(.2,.7,.2,1);transform-origin:left bottom}
.band .it:hover b{scale:1.07}
.band .it > span{display:table;position:relative}
.band .it > span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.band .it:hover > span::after{transform:scaleX(1)}

/* approach */
.proc{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.plist{position:relative;padding-left:40px}
.plist::before{content:"";position:absolute;left:8px;top:30px;bottom:30px;width:1.5px;background:var(--line)}
.pstep{position:relative;padding:26px 28px;border-radius:22px;margin-bottom:14px;border:1px solid transparent;transition:background .45s,border-color .45s,box-shadow .45s;display:grid;grid-template-columns:86px 1fr;gap:6px 20px}
.pstep::before{content:"";position:absolute;left:-39px;top:36px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted);background:var(--sheet);transition:background .3s,border-color .3s,box-shadow .3s}
.pstep.on{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.pstep.on::before{background:var(--fc,var(--hl-end));border-color:var(--fc,var(--hl-end));box-shadow:0 0 0 6px color-mix(in srgb,var(--fc,var(--hl-end)) 22%,transparent)}
.f-lime{--fc:#b5d932}.f-violet{--fc:#6a3fe0}.f-orange{--fc:#ef7a2f}.f-sky{--fc:#4cc3f0}
.pstep .n{grid-row:span 3;font:800 56px/1 "Inter Tight",sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--muted);transition:color .4s,-webkit-text-stroke-color .4s}
.pstep.on .n{color:var(--hl-end);-webkit-text-stroke-color:var(--hl-end)}
.pstep h3{font-size:28px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.pstep p{color:var(--muted);font-size:15px;max-width:34em}
.pstep dl{display:grid;grid-template-columns:auto 1fr;margin-top:8px;font-size:14px}
.pstep dt,.pstep dd{padding:10px 0;border-top:1px solid var(--line)}
.pstep dt{font:600 10.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-right:18px;align-self:center}
.pstep dd{font-weight:500}
.pstep dd.get::before{content:"✓ ";color:var(--hl-end);font-weight:700}
.pvis{position:sticky;top:100px;height:calc(100vh - 130px);border-radius:26px;overflow:hidden;background:#0d0e0c;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.pvis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pvis img.on{opacity:1;transform:none}
.pvis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,8,10,.9))}
.pvis .meta{position:absolute;left:26px;right:26px;bottom:24px;z-index:1}
.pdots{display:flex;align-items:center;margin-bottom:18px}
.pdots span{flex:1;height:1.5px;background:rgba(255,255,255,.25);position:relative}
.pdots span:last-child{flex:0}
.pdots span::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-2px,-50%);border:1.5px solid rgba(255,255,255,.6);background:#0d0e0c;transition:background .3s,border-color .3s}
.pdots span:nth-child(1){--dc:#b5d932}.pdots span:nth-child(2){--dc:#6a3fe0}.pdots span:nth-child(3){--dc:#ef7a2f}.pdots span:nth-child(4){--dc:#4cc3f0}
.pdots span.on::before{background:var(--dc);border-color:var(--dc)}
.pvis small{font-size:13px;color:rgba(255,255,255,.7)}
.pvis b{display:block;font:800 34px "Inter Tight",sans-serif;text-transform:uppercase;letter-spacing:-.02em}

/* work: fanned cards */
.fan{position:relative;height:560px;margin-top:10px}
.pcard{position:absolute;top:30px;left:50%;width:min(370px,30vw);height:480px;margin-left:calc(min(370px,30vw) / -2);border-radius:26px;padding:28px;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.28);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s ease,z-index 0s;overflow:hidden}
.pcard{opacity:0;transform:translateY(110%) scale(.9);pointer-events:none}
.pcard.s-l,.pcard.s-c,.pcard.s-r{opacity:1;pointer-events:auto}
.pcard.s-l{transform:translateX(calc(-100% * var(--fp,1))) rotate(calc(-7deg * var(--fp,1)));z-index:1}
.pcard.s-c{transform:translateY(calc(-14px * var(--fp,1)));z-index:2}
.pcard.s-r{transform:translateX(calc(100% * var(--fp,1))) rotate(calc(7deg * var(--fp,1)));z-index:1}
.pcard.o-l{opacity:0;transform:translateX(-100%) translateY(-45%) rotate(-12deg) scale(.92);z-index:0}
.pcard.o-c{opacity:0;transform:translateY(-45%) scale(.92);z-index:0}
.pcard.o-r{opacity:0;transform:translateX(100%) translateY(-45%) rotate(12deg) scale(.92);z-index:0}
.pcard.e-l,.pcard.e-c,.pcard.e-r{transition:none!important;opacity:0}
.pcard.e-l{transform:translateX(-100%) translateY(75%) rotate(-7deg)}
.pcard.e-c{transform:translateY(75%)}
.pcard.e-r{transform:translateX(100%) translateY(75%) rotate(7deg)}
.pcard.s-l:hover{transform:translateX(calc(-100% * var(--fp,1))) translateY(-34px) scale(1.03);z-index:5}
.pcard.s-c:hover{transform:translateY(-34px) scale(1.03);z-index:5}
.pcard.s-r:hover{transform:translateX(calc(100% * var(--fp,1))) translateY(-34px) scale(1.03);z-index:5}
.pc-lime{background:#d6f25c;color:#141a00}
.pc-dark{background:#1d1f1a;color:#f4f4f2;border:1px solid rgba(255,255,255,.08)}
.pc-cream{background:#efe9dc;color:#1a1814}
.pcard .st{align-self:flex-end;font:600 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid currentColor;opacity:.8}
.pcard .pic{margin:22px 0;flex:1;border-radius:16px;overflow:hidden;min-height:0}
.pcard .pic img{width:100%;height:100%;object-fit:cover}
.pcard .metric{font:800 44px/1 "Inter Tight",sans-serif;letter-spacing:-.04em}
.pcard h3{font-size:24px;font-weight:700;margin:8px 0 8px}
.pcard p{font-size:14.5px;opacity:.75;margin-bottom:14px}
.pcard ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.pcard li{font:600 10.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid currentColor;opacity:.75}

/* work + writing lists */
.rows{border-bottom:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:64px 150px 1fr 170px 70px 40px;align-items:center;gap:20px;padding:30px 0;border-top:1px solid var(--line);transition:padding .35s cubic-bezier(.2,.7,.2,1)}
.row::before{content:"";position:absolute;inset:0 -16px;background:var(--surface);opacity:0;border-radius:14px;transition:opacity .3s;z-index:-1}
.row:hover{padding-left:16px}
.row:hover::before{opacity:.6}
.row .thumb{display:block;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.row:hover .thumb img{transform:scale(1.06)}
.row .idx{font:600 13px Inter,sans-serif;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.row h3{font-size:clamp(22px,2.4vw,36px);font-weight:700;letter-spacing:-.025em;transition:color .3s}
.row:hover h3{color:var(--link)}
.row .desc{display:block;font:400 14.5px/1.5 Inter,sans-serif;color:var(--muted);margin-top:6px;letter-spacing:0;max-width:46em}
.row .tag{font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row .yr{font-size:14px;color:var(--muted);text-align:right}
.row .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,transform .3s}
.row:hover .go{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);transform:rotate(-45deg)}
.row .go svg{width:16px;height:16px}

/* about: zigzag timeline */
.about-head{text-align:center;max-width:860px;margin:0 auto 70px}
.about-head .statement{font:700 clamp(28px,3vw,46px)/1.18 "Inter Tight",sans-serif;letter-spacing:-.03em;max-width:none;margin:18px 0 22px;font-size:clamp(28px,3vw,46px)}
.about-head p.sub{color:var(--muted);font-size:16px;max-width:36em;margin:0 auto 26px}
.zig{position:relative;max-width:980px;margin:0 auto}
.zig::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1.5px;transform:translateX(-50%);background:linear-gradient(var(--line),var(--line)) ,var(--line)}
.zi{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:36px}
.zi .card{grid-column:1;justify-self:end;width:min(400px,100%);margin-right:56px;padding:22px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;transform:translateX(-70px) rotate(-3deg);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.zi:nth-child(even) .card{grid-column:2;justify-self:start;margin:0 0 0 56px}
.zi.in .card{opacity:1;transform:none}
.zi .dot{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--sheet);border:2px solid var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}
.zi .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c)}
.zi .k{display:flex;align-items:center;gap:10px;font:800 26px "Inter Tight",sans-serif;letter-spacing:-.02em;color:var(--c)}
.zi .k i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:15px;background:color-mix(in srgb,var(--c) 18%,transparent)}
.zi b{display:block;font:700 18px "Inter Tight",sans-serif;margin:10px 0 2px}
.zi em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-bottom:8px}
.zi p{font-size:14.5px;color:var(--muted)}
.c-lime{--c:#b5d932}.c-violet{--c:#6a3fe0}.c-orange{--c:#ef7a2f}.c-sky{--c:#4cc3f0}


/* about timeline is scroll-driven: the line fills down, each dot pops and its card slides in when the fill reaches it */
.zi:nth-child(even) .card{transform:translateX(70px) rotate(3deg)}
.zi.in .card,.zi.in:nth-child(even) .card{opacity:1;transform:none}
.zig::after{content:"";position:absolute;left:50%;top:10px;width:3px;height:calc((100% - 20px) * var(--zp,0));transform:translateX(-50%);border-radius:3px;background:linear-gradient(#b5d932,#6a3fe0,#ef7a2f,#4cc3f0)}
.zi .dot{scale:.4;opacity:.4;transition:scale .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.zi.in .dot{scale:1;opacity:1}

/* experiments: cards orbiting the title, the ring turns with scroll */
.orbit{position:relative;height:860px;margin-top:-40px}
.ocard{position:absolute;left:50%;top:640px;width:176px;height:228px;margin:-114px 0 0 -88px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 24px 50px rgba(0,0,0,.35);will-change:transform;transition:box-shadow .3s}
.ocard:hover{box-shadow:0 30px 70px rgba(0,0,0,.5);z-index:5}
.ocard .ic{font:800 34px/1 "Inter Tight",sans-serif;letter-spacing:-.04em;margin-top:auto}
.ocard b{font:700 16px/1.15 "Inter Tight",sans-serif}
.ocard small{font-size:12px;opacity:.7}
.ocard .vp{align-self:flex-start;font:600 10px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid currentColor}
.ocard .obar{display:block;flex-shrink:0;height:4px;border-radius:4px;background:currentColor;opacity:.18;position:relative}
.ocard .obar i{position:absolute;inset:0 auto 0 0;width:var(--m);border-radius:4px;background:currentColor;opacity:1}
.o-white{background:#f4f2ec;color:#141414}.o-lime{background:#d6f25c;color:#141a00}.o-dark{background:#1b1c1a;color:#f4f4f2;border:1px solid rgba(255,255,255,.08)}
.o-violet{background:#6a3fe0;color:#fff}.o-orange{background:#ef7a2f;color:#1a0d02}.o-sky{background:#4cc3f0;color:#062633}
.ocenter{position:absolute;left:50%;top:560px;transform:translate(-50%,-50%);text-align:center;width:min(620px,92%);z-index:2}
.ocenter .sec-title{margin-bottom:16px}
.ocenter p{color:var(--muted);font-size:16px;margin-bottom:26px}

/* writing: article cards in a row that bleeds off the right edge */
.wcard{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:26px;box-shadow:0 1px 2px rgba(0,0,0,.06),8px 12px 20px -10px rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.wcard:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(0,0,0,.06),12px 18px 28px -12px rgba(0,0,0,.32)}
.wcard .shot{display:block;height:250px;flex-shrink:0;overflow:hidden;background:#eee;margin:5px 5px 0;border-radius:21px}
.wcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wcard:hover .shot img{transform:scale(1.05)}
.wcard .src{display:flex;align-items:center;gap:10px;padding:20px 24px 0;font-size:13.5px;opacity:.75}
.wcard .src i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 11px Inter,sans-serif;font-style:normal;background:color-mix(in srgb,currentColor 16%,transparent)}
.wcard .src svg{width:15px;height:15px;margin-left:auto;transition:transform .3s}
.wcard:hover .src svg{transform:translate(2px,-2px)}
.wcard h3{padding:14px 24px 0;font-size:24px;font-weight:700;line-height:1.08;letter-spacing:-.025em}
.wcard p{padding:10px 24px 0;font-size:14px;opacity:.75;flex:1}
.wcard .foot{display:flex;align-items:center;gap:12px;padding:18px 24px 22px;margin-top:auto}
.wrow{display:flex;gap:18px;overflow-x:auto;scroll-padding-inline:max(16px,calc((100vw - 1180px)/2));scrollbar-width:none;padding:6px max(16px,calc((100vw - 1180px)/2)) 30px;margin:0 calc(50% - 50vw);cursor:grab}
.wrow::-webkit-scrollbar{display:none}
.wrow.drag{cursor:grabbing;scroll-snap-type:none}
.wrow.drag .wcard{pointer-events:none}
.wcard{flex:0 0 330px;scroll-snap-align:start}
.wcard .tag{font:600 10.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid currentColor;opacity:.8}
.wcard .rt{margin-left:auto;font-size:12.5px;opacity:.7}
.wcard.all{display:grid;place-items:center;text-align:center;background:var(--surface);color:var(--text);border:1px dashed var(--line);box-shadow:none}
.wcard.all b{font:700 24px "Inter Tight",sans-serif}
.wnav{display:flex;gap:10px}
.wnav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.wnav button:hover{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.wnav svg{width:18px;height:18px}
.whint{font-size:13px;color:var(--muted);margin-top:-30px;margin-bottom:22px}

/* cta */
.cta{text-align:center;padding:150px 0 120px}
.cta .sec-title{font-size:clamp(48px,8vw,136px);max-width:12ch;margin:0 auto 40px}
.cta .sec-title em{position:relative;white-space:nowrap}
.cta .sec-title em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;background:var(--lime);border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s .3s cubic-bezier(.2,.7,.2,1)}
.cta.in .sec-title em::after{transform:scaleX(1)}
.cta p{color:var(--muted);font-size:17px;max-width:34em;margin:0 auto 34px}
.cta .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.socials{list-style:none;display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.socials a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);transition:color .2s}
.socials a:hover{color:var(--text)}
.socials svg{width:18px;height:18px;flex-shrink:0}


.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1080px){
  .notes{grid-template-columns:1fr 1fr}
  .pcard{height:440px}
  .band .wrap{grid-template-columns:1fr 1fr;row-gap:36px}
  .band .it:nth-child(3){border-left:0;padding-left:0}
  .row{grid-template-columns:40px 120px 1fr 60px 40px}
  .row .tag{display:none}
}
@media (max-width:920px){
  .links{display:none}
  #menuBtn{display:grid}
  .bar{justify-content:space-between}
  nav.open .links{display:flex;flex-direction:column;position:absolute;top:66px;left:16px;right:16px;padding:12px;border-radius:20px;background:var(--nav-bg);border:1px solid var(--nav-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .hero{grid-template-columns:1fr;padding-top:96px;min-height:auto}
  .hero-photo{order:-1;align-self:end;margin:0;height:auto;aspect-ratio:1366/1151}
  .hero-photo img{object-fit:contain;object-position:center bottom;}
  .scroll-cue{display:none}
  .hero{min-height:auto}
  section{padding:80px 0}
  .proc{grid-template-columns:1fr}
  .orbit{height:auto;margin:0;display:flex;flex-direction:column}
  .ocenter{position:static;transform:none;width:auto;order:-1;margin-bottom:28px}
  .orbit{overflow:visible}
  .orbit .ocard{position:relative;left:auto;top:auto;margin:0;width:calc(50% - 7px);max-width:220px;height:200px}
  .orbit{flex-direction:row;flex-wrap:wrap;gap:14px;justify-content:center}
  .ocenter{flex-basis:100%}
  .pvis{display:none}
  section.sheet{padding-top:110px;margin-top:-36px}
  section.sheet::before{border-radius:36px 36px 0 0}
  .fan{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .pcard,.pcard[class*="s-"],.pcard[class*="s-"]:hover{position:relative;top:0;left:0;margin:0;width:100%;height:auto;transform:none;opacity:1;pointer-events:auto}
  .pcard .pic{flex:none;aspect-ratio:16/9}
}
@media (max-width:620px){
  .bar .btn-lime{display:none}
  .xp-row,.fan{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .wcard{flex-basis:82%}
  .wnav{display:none}
  .zig::before,.zig::after{left:9px}
  .zi{grid-template-columns:1fr}
  .zi .card,.zi:nth-child(even) .card{grid-column:1;justify-self:stretch;width:auto;margin:0 0 0 40px}
  .zi .dot{left:9px}
  .pstep{grid-template-columns:1fr;padding:22px}
  .pstep .n{grid-row:auto;font-size:40px}
  .xp-row{margin-top:48px}
  .row{grid-template-columns:96px 1fr 40px;gap:14px;padding:22px 0}
  .row .idx,.row .yr{display:none}
    .stat{padding-right:18px;margin-right:18px}
  .stat b{font-size:24px}
  }
@media (prefers-reduced-motion:reduce){
  .st>*{opacity:1;translate:none}
  .reveal .sec-title{clip-path:none;translate:none}
  .cta-title .cw>*,.about-title .cw>*{translate:none}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* header: a soft pill glides to the hovered link, labels roll up, the bar hides on scroll down */
nav{transition:none!important;transform:none!important}
nav.hidden{transform:none!important}
.links{position:relative}
.links .pill-h{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1),opacity .25s}
.links.hovering .pill-h{opacity:1}
.links a .rw{display:block;overflow:hidden;height:1.5em;line-height:1.5em}
.links a .rl{display:block;position:relative;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.links a .rl::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--nc,var(--text))}
/* each link rolls in with its own family colour (deeper tones on the light theme for contrast) */
.links a:nth-of-type(1){--nc:#5f8f00}.links a:nth-of-type(2){--nc:#6a3fe0}.links a:nth-of-type(3){--nc:#d2611a}.links a:nth-of-type(4){--nc:#1a8fbf}.links a:nth-of-type(5){--nc:#5f8f00}
:root[data-theme="dark"] .links a:nth-of-type(1),:root[data-theme="dark"] .links a:nth-of-type(5){--nc:#d6f25c}
:root[data-theme="dark"] .links a:nth-of-type(2){--nc:#a58bff}:root[data-theme="dark"] .links a:nth-of-type(3){--nc:#ff9a52}:root[data-theme="dark"] .links a:nth-of-type(4){--nc:#4cc3f0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .links a:nth-of-type(1),:root:not([data-theme="light"]) .links a:nth-of-type(5){--nc:#d6f25c}
  :root:not([data-theme="light"]) .links a:nth-of-type(2){--nc:#a58bff}:root:not([data-theme="light"]) .links a:nth-of-type(3){--nc:#ff9a52}:root:not([data-theme="light"]) .links a:nth-of-type(4){--nc:#4cc3f0}
}
.links a:hover .rl{transform:translateY(-100%)}
.bar .btn-lime:hover svg{transform:translateX(3px) rotate(-45deg)}