:root{
  --bg:#EDEDED;--bg-2:#E4E4E4;
  --text:#0E0E10;--text-2:#2A2A2E;--muted:#6B6B72;--muted-2:#9A9AA0;
  --line:rgba(14,14,16,0.10);--line-2:rgba(14,14,16,0.22);
  --grad:linear-gradient(135deg,#FF6B35 0%,#FFB088 28%,#C7A8FF 52%,#7FB8FF 76%,#0066FF 100%);
  --grad-h:linear-gradient(90deg,#FF6B35 0%,#FFB088 28%,#C7A8FF 52%,#7FB8FF 76%,#0066FF 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,176,136,.6),rgba(199,168,255,.6),rgba(127,184,255,.6));
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-sharp:cubic-bezier(0.7,0,0.3,1);
  --pad-x:clamp(24px,5vw,80px);
  --section-y:clamp(160px,20vh,280px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--f-body);overflow-x:hidden;cursor:none;line-height:1.5;font-size:16px;background:var(--bg);font-weight:400}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:none}
::selection{background:#FFB088;color:#0E0E10}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:gradShift 10s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--grad);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;display:none;box-shadow:0 0 20px rgba(255,176,136,.5)}
@media(min-width:769px){.cursor{display:block}}
.cursor.hover{width:64px;height:64px;box-shadow:0 0 40px rgba(255,176,136,.5),0 0 60px rgba(127,184,255,.4)}
.cursor.hidden{opacity:0}

.cursor-thumb{position:fixed;top:0;left:0;width:280px;height:190px;border-radius:6px;pointer-events:none;z-index:9998;background-size:cover;background-position:center;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .35s var(--ease),transform .55s var(--ease-out),width .35s var(--ease),height .35s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.35);display:none;overflow:hidden}
@media(min-width:769px){.cursor-thumb{display:block}}
.cursor-thumb.visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);width:300px;height:204px}
.cursor-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 45%);opacity:0;transition:opacity .35s}
.cursor-thumb.visible::after{opacity:1}
.cursor-thumb__label{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.cursor-thumb.visible .cursor-thumb__label{opacity:1;transform:translateY(0)}

#constellation{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
.noise{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.02;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 8s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(-4%,2%)}30%{transform:translate(2%,-4%)}40%{transform:translate(-3%,3%)}50%{transform:translate(4%,1%)}60%{transform:translate(-1%,-2%)}70%{transform:translate(3%,-1%)}80%{transform:translate(-2%,4%)}90%{transform:translate(1%,2%)}100%{transform:translate(0,0)}}

.nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:28px var(--pad-x);display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:-.01em;mix-blend-mode:difference;color:#fff}
.nav__brand{font-weight:800;letter-spacing:-.03em;font-size:15px}
.nav__links{display:flex;gap:32px}
.nav__links a{opacity:.65;transition:opacity .3s}
.nav__links a:hover{opacity:1}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
section{position:relative;padding:0}

/* HERO */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:160px 0 100px;position:relative;overflow:hidden;z-index:1}
.hero__orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,90vw);height:min(900px,90vw);border-radius:50%;background:radial-gradient(circle at 30% 40%,rgba(255,176,136,.35),transparent 55%),radial-gradient(circle at 70% 60%,rgba(199,168,255,.30),transparent 55%),radial-gradient(circle at 50% 80%,rgba(127,184,255,.30),transparent 55%);filter:blur(80px);pointer-events:none;z-index:0;animation:orbFloat 20s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-45%,-55%) scale(1.1)}}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(115deg,transparent 0%,transparent calc(50% - 1px),rgba(14,14,16,.06) calc(50% - 1px),rgba(14,14,16,.06) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);background-size:120px 120px}
.hero__inner{position:relative;z-index:2;padding:0 var(--pad-x)}
.hero__eyebrow{font-family:var(--f-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:40px;display:flex;align-items:center;gap:14px}
.hero__eyebrow::before{content:"";width:40px;height:1px;background:var(--text)}
.hero__headline{font-family:var(--f-display);font-weight:900;font-size:clamp(52px,11vw,180px);line-height:.86;letter-spacing:-.055em;max-width:14ch}
.hero__line{display:block;overflow:hidden;padding-bottom:.02em}
.hero__line span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease-out)}
.hero__line.in span{transform:translateY(0)}
.hero__line:nth-child(2){padding-left:clamp(20px,6vw,120px)}
.hero__line:nth-child(3){padding-left:clamp(40px,10vw,200px)}
.hero__sub{margin-top:clamp(60px,9vh,100px);margin-left:clamp(20px,6vw,120px);max-width:46ch;font-family:var(--f-body);font-size:clamp(15px,1.3vw,18px);line-height:1.75;color:var(--text-2)}
.hero__sub .grad-text{font-weight:500}
.hero__meta{position:absolute;bottom:48px;right:var(--pad-x);display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--f-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);z-index:2}
.hero__meta-line{width:60px;height:1px;background:var(--grad-h);background-size:200% 100%;animation:gradShift 5s linear infinite}

/* WORK, sticky native scroll */
.work{position:relative;background:var(--bg);height:400vh;z-index:1}
.work__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.work__track{display:flex;height:100%;width:max-content;will-change:transform}
.panel{width:100vw;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 var(--pad-x);cursor:none;transition:opacity .5s}
.panel__inner{width:100%;max-width:1400px;position:relative;z-index:2}
.panel__num{position:absolute;top:12%;right:var(--pad-x);font-family:var(--f-display);font-size:clamp(80px,16vw,240px);font-weight:900;letter-spacing:-.06em;line-height:.8;color:rgba(14,14,16,.05);pointer-events:none}
.panel__label{font-family:var(--f-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;display:flex;align-items:center;gap:14px}
.panel__label::before{content:"";width:28px;height:1px;background:var(--text)}
.panel__title{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,7vw,110px);line-height:.92;letter-spacing:-.05em;max-width:14ch;margin-bottom:40px;transition:transform .6s var(--ease-out)}
.panel:hover .panel__title{transform:translateX(16px)}
.panel__sub{font-family:var(--f-body);font-size:clamp(14px,1.2vw,17px);line-height:1.75;color:var(--muted);max-width:44ch}

.work__progress{position:absolute;bottom:56px;left:var(--pad-x);right:var(--pad-x);height:1px;background:var(--line-2);z-index:5}
.work__progress-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--grad-h);background-size:200% 100%;animation:gradShift 6s linear infinite;transition:width .15s linear}
.work__dots{position:absolute;bottom:32px;left:var(--pad-x);right:var(--pad-x);display:flex;justify-content:space-between;z-index:5;font-family:var(--f-body);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.work__dot{color:var(--muted-2);transition:color .3s;display:flex;align-items:center;gap:10px}
.work__dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-2);transition:all .3s}
.work__dot.active{color:var(--text)}
.work__dot.active::before{background:#FFB088;box-shadow:0 0 12px rgba(255,176,136,.8);transform:scale(1.6)}

/* NOT WORK, three cards */
.notwork{padding:var(--section-y) var(--pad-x);background:var(--bg);position:relative;z-index:1}
.notwork__header{max-width:900px;margin-bottom:clamp(72px,10vh,120px)}
.notwork__eyebrow{font-family:var(--f-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;display:flex;align-items:center;gap:14px}
.notwork__eyebrow::before{content:"";width:32px;height:1px;background:var(--text)}
.notwork__title{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6.5vw,96px);line-height:.98;letter-spacing:-.045em;max-width:16ch;margin-bottom:28px}
.notwork__sub{font-family:var(--f-body);font-size:clamp(15px,1.3vw,18px);line-height:1.75;color:var(--muted);max-width:44ch}
.notwork__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.notwork__cards{grid-template-columns:1fr;gap:20px}}

.ncard{padding:clamp(32px,3vw,48px);border:1px solid var(--line-2);background:rgba(255,255,255,.35);display:flex;flex-direction:column;gap:24px;min-height:440px;opacity:0;transform:translateY(48px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),background .4s,border-color .4s,box-shadow .5s}
.ncard.in{opacity:1;transform:translateY(0)}
.ncard:hover{background:rgba(255,255,255,.7);border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.08);transform:translateY(-6px)}
.ncard__emoji{width:72px;height:72px;border-radius:50%;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;filter:saturate(.9);flex-shrink:0;transition:transform .5s var(--ease-out)}
.ncard:hover .ncard__emoji{transform:rotate(-8deg) scale(1.08)}
.ncard__label{font-family:var(--f-body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ncard__title{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.ncard__body{font-family:var(--f-body);font-size:15px;line-height:1.7;color:var(--muted);margin-top:auto}

/* OATH */
.oath{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-y) 0;background:var(--bg);position:relative;z-index:1;overflow:hidden}
.oath__rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(700px,80vw);height:min(700px,80vw);pointer-events:none;z-index:0}
.oath__ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);opacity:.5}
.oath__ring--1{width:100%;height:100%;animation:spin 60s linear infinite}
.oath__ring--2{width:70%;height:70%;animation:spin 45s linear infinite reverse}
.oath__ring--3{width:40%;height:40%;animation:spin 30s linear infinite}
.oath__ring::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--grad);transform:translateX(-50%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.oath__inner{max-width:760px;width:100%;padding:0 var(--pad-x);text-align:center;position:relative;z-index:2}

.oath__eyebrow{font-family:var(--f-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.oath__title{font-family:var(--f-display);font-weight:900;font-size:clamp(48px,8vw,120px);line-height:.9;letter-spacing:-.055em;margin-bottom:24px}
.oath__sub{font-family:var(--f-body);font-size:clamp(14px,1.2vw,17px);line-height:1.7;color:var(--muted);margin-bottom:64px}

.oath__envelope{width:120px;height:120px;margin:0 auto 32px;cursor:none;transition:transform .5s var(--ease-out);display:block;position:relative}
.oath__envelope svg{width:100%;height:100%;overflow:visible}
.oath__envelope svg rect,.oath__envelope svg path{stroke:url(#envelopeGrad);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .3s}
.oath__envelope:hover{transform:translateY(-12px) rotate(-3deg)}
.oath__envelope:hover svg rect,.oath__envelope:hover svg path{stroke-width:2.5}

.oath__typewriter{display:block;font-family:var(--f-body);font-size:13px;letter-spacing:.02em;color:var(--muted);height:20px;margin-bottom:48px}
.oath__typewriter .caret{display:inline-block;width:1px;height:14px;background:var(--text);margin-left:2px;vertical-align:middle;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.oath__body{display:none;text-align:left}
.oath__body.open{display:block}
.oath__paper{
  position:relative;
  padding:clamp(48px,6vw,88px) clamp(40px,5vw,72px);
  background:
    repeating-linear-gradient(0deg,transparent,transparent 42px,rgba(14,14,16,.045) 42px,rgba(14,14,16,.045) 43px), linear-gradient(180deg,#F7F1E4 0%,#EFE7D5 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06), 0 30px 80px rgba(0,0,0,.10);
  overflow:hidden;
}
.oath__paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E")}
.oath__paper::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(14,14,16,.15),transparent)}
.oath__line{position:relative;z-index:1;font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.4vw,32px);line-height:1.4;letter-spacing:-.02em;margin-bottom:.9em;color:var(--text);opacity:0;transform:translateY(12px);animation:oathLine .9s var(--ease-out) forwards}
.oath__line:nth-child(1){animation-delay:.1s}
.oath__line:nth-child(2){animation-delay:.35s}
.oath__line:nth-child(3){animation-delay:.6s}
.oath__line:nth-child(4){animation-delay:.85s}
.oath__line:nth-child(5){animation-delay:1.1s}
.oath__line:nth-child(6){animation-delay:1.35s}
.oath__line:last-child{margin-bottom:0}
@keyframes oathLine{to{opacity:1;transform:translateY(0)}}

/* END */
.end{min-height:90vh;min-height:90svh;display:flex;align-items:center;justify-content:center;padding:var(--section-y) 0;background:var(--bg);position:relative;z-index:1}
.end__inner{max-width:1100px;width:100%;padding:0 var(--pad-x);text-align:center}
.end__punchline{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,9vw,160px);line-height:.9;letter-spacing:-.055em;margin-bottom:clamp(60px,9vh,100px);max-width:14ch;margin-left:auto;margin-right:auto}
.end__links{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--f-display);font-weight:600;font-size:14px}
.end__links a{color:var(--text-2);position:relative;padding:6px 0;transition:color .3s}
.end__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--grad-h);background-size:200% 100%;animation:gradShift 4s linear infinite;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.end__links a:hover{color:var(--text)}
.end__links a:hover::after{transform:scaleX(1)}
.end__dot{color:var(--muted-2)}

.footer{padding:48px var(--pad-x);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--f-body);font-size:11px;letter-spacing:.06em;color:var(--muted);background:var(--bg);position:relative;z-index:1}
.footer__snack{color:var(--text-2)}
.footer__snack .grad-text{font-weight:500}

a:focus-visible,button:focus-visible{outline:2px solid #FFB088;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .noise,#constellation,.hero__orb{display:none}
  .reveal,.hero__line span{opacity:1 !important;transform:none !important}
}

/* =========================================================
   HERO v3, two-column rail + statement
   Overrides the old centered hero. Old hero CSS stays in file.
   ========================================================= */

.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:stretch;
  padding:120px 0 80px;
  position:relative;z-index:1;
  overflow:visible;
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(40px,6vw,120px);
  width:100%;
  padding:0 var(--pad-x);
  align-items:start;
  position:relative;z-index:2;
}
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:56px}
  .hero{padding:110px 0 60px}
}

/* RAIL */
.rail{display:flex;flex-direction:column;gap:36px;position:sticky;top:120px;align-self:start}
@media(max-width:900px){.rail{position:static;top:auto}}

.rail__photo{
  width:100%;max-width:220px;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(135deg,#D8D8D8,#BDBDBD);
  position:relative;
}
.rail__photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out),filter 1.4s var(--ease-out);
  filter:grayscale(.15) contrast(1.02);
}
.rail__photo:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.05)}
.rail__photo.missing::after{
  content:"Add photo.jpg";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

.rail__block{display:flex;flex-direction:column;gap:8px}
.rail__label{font-family:var(--f-body);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.rail__value{font-family:var(--f-display);font-weight:600;font-size:14px;line-height:1.5;color:var(--text)}
.rail__value .rail__muted{color:var(--muted);font-weight:500}
.rail__dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,.7);
  margin-right:8px;vertical-align:middle;
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

.rail__contact{
  margin-top:auto;padding-top:32px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
}
@media(max-width:900px){.rail__contact{margin-top:0}}
.rail__contact-line{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.3;letter-spacing:-.02em;color:var(--text);
}
.rail__contact-link{
  font-family:var(--f-body);font-size:12px;
  letter-spacing:.06em;color:var(--muted);
  transition:color .3s;position:relative;
  width:fit-content;padding-bottom:4px;
}
.rail__contact-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--grad-h);background-size:200% 100%;
  animation:gradShift 4s linear infinite;
  transform:scaleX(1);transform-origin:left;opacity:.6;
}
.rail__contact-link:hover{color:var(--text)}
.rail__contact-link:hover::after{opacity:1}

/* STATEMENT */
.statement{
  display:flex;flex-direction:column;gap:40px;
  padding-top:8px;
  min-height:calc(100vh - 200px);
}
.statement__headline{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(38px,5.4vw,92px);
  line-height:1;letter-spacing:-.045em;
  color:var(--text);
}
.statement__headline .grad-text{font-weight:800}
.statement__em{font-weight:800}
.statement__meta{
  margin-top:auto;padding-top:60px;
  font-family:var(--f-body);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:14px;
}
.statement__arrow{display:inline-block;font-size:14px;animation:bobArrow 2.4s ease-in-out infinite}
@keyframes bobArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}


/* =========================================================
   CURSOR + GRADIENT fixes, 2026-09-21
   Softer cursor, gradient with real orange + electric blue.
   ========================================================= */

.cursor{opacity:0.85}
.cursor.hover{
  width:44px;height:44px;
  opacity:0.4;
  box-shadow:0 0 30px rgba(255,107,53,.35),0 0 60px rgba(0,102,255,.25);
}


/* =========================================================
   MOBILE FIXES — landing, work, not work
   ========================================================= */

.rail__top { display: contents; }
.panel__thumb-mobile,
.panel__btn-mobile { display: none; }

@media (max-width: 900px) {
  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero__inner { display: flex; flex-direction: column; gap: 36px; }

  .statement { order: -1; min-height: auto; gap: 20px; padding-top: 0; }
  .statement__headline { font-size: clamp(30px, 8.5vw, 46px); line-height: 1.02; letter-spacing: -.04em; }
  .statement__meta { padding-top: 0; margin-top: 0; font-size: 10px; }
  .statement__arrow { display: none; }

  .rail { position: static; top: auto; gap: 24px; padding-top: 0; }
  .rail__top { display: flex; gap: 18px; align-items: flex-start; }
  .rail__top .rail__photo { width: 110px; max-width: 110px; flex-shrink: 0; aspect-ratio: 4/5; }
  .rail__top .rail__block { padding-top: 4px; }
  .rail__label { font-size: 9px; letter-spacing: .2em; }
  .rail__value { font-size: 13px; line-height: 1.5; }
  .rail__contact { margin-top: 0; padding-top: 24px; }
  .rail__contact-line { font-size: 17px; }
  .rail__contact-link { font-size: 11px; }

  .work { height: auto !important; }
  .work__sticky { position: static !important; height: auto !important; overflow: visible !important; }
  .work__header { position: static; padding: 72px var(--pad-x) 0; margin-bottom: 24px; }

  .work__track {
    display: flex !important; flex-direction: row !important;
    width: 100% !important; height: auto !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 14px; padding: 0 6vw 72px !important;
    align-items: stretch; transform: none !important;
  }
  .work__track::-webkit-scrollbar { display: none; }

  .panel {
    width: 88vw !important; height: auto !important;
    flex-shrink: 0; scroll-snap-align: center;
    padding: 0 !important; display: block !important;
    cursor: auto; transform: none !important;
  }
  .panel__num { display: none !important; }
  .panel__inner { padding: 0 !important; max-width: 100% !important; }
  .panel__title { font-size: clamp(28px, 7.5vw, 42px) !important; margin-bottom: 14px !important; transform: none !important; }
  .panel:hover .panel__title { transform: none !important; }
  .panel__sub { font-size: 14px; margin-bottom: 22px; }
  .panel__label { margin-bottom: 14px; }

  .panel__thumb-mobile {
    display: block; aspect-ratio: 16/10; width: 100%;
    overflow: hidden; background: rgba(0,0,0,.04); margin-bottom: 22px;
  }
  .panel__thumb-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .panel__btn-mobile {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; background: var(--text); color: var(--bg);
    font-family: var(--f-display); font-weight: 600; font-size: 13px;
    letter-spacing: -.005em; text-decoration: none;
  }
  .panel__btn-mobile:active { transform: scale(.97); }

  .work__progress { position: static; margin: 0 var(--pad-x) 18px; width: auto; }
  .work__dots { position: static; margin: 0 var(--pad-x) 60px; width: auto; font-size: 9px; gap: 6px; }
  .work__dot { font-size: 9px; }

  .notwork { padding: clamp(80px, 12vh, 120px) var(--pad-x); }
  .notwork__header { margin-bottom: 40px; }
  .notwork__title { font-size: clamp(30px, 8.5vw, 46px); }
  .notwork__sub { font-size: 14px; }

  .notwork__cards { grid-template-columns: 1fr; gap: 12px; }
  .ncard { min-height: auto; padding: 24px; cursor: pointer; position: relative; }
  .ncard__emoji { width: 56px; height: 56px; font-size: 28px; }
  .ncard__label { font-size: 10px; margin-bottom: 2px; }
  .ncard__title { font-size: 18px; line-height: 1.2; margin-bottom: 0; }
  .ncard__body {
    font-size: 14px; line-height: 1.6;
    max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
    transition: max-height .5s var(--ease-out), margin-top .5s var(--ease-out), opacity .4s;
  }
  .ncard.expanded .ncard__body { max-height: 240px; margin-top: 14px; opacity: 1; }
  .ncard::after {
    content: "Tap to read"; position: absolute; bottom: 22px; right: 24px;
    font-family: var(--f-body); font-size: 9px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--muted);
  }
  .ncard.expanded::after { content: "Tap to close"; }
  .ncard:hover { transform: none !important; box-shadow: none; background: rgba(255,255,255,.35); }
  .ncard:hover .ncard__emoji { transform: none; }
}