/* ===== Paper and Terracotta : warm paper ground, pastel corner light, terracotta voice ===== */
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  --bg:#EEECE7;
  --surf:#FFFDFA;
  --panel:#FDF8EF;
  --ink:#16140F;
  --mut:#7A766C;
  --ln:#E2DED5;
  --accent:#D96A3F;
  --dark:#16140F;
  --dark-ink:#F6F1E8;
  --lime:#C6F24E;
  --c-coral:#FF7A5C;
  --c-blue:#5B9BFF;
  --c-purple:#A98BFF;
  --c-green:#46C98A;
  --c-orange:#FF9D4D;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-s:'Instrument Serif',Georgia,serif;
  --font-m:'JetBrains Mono',SFMono-Regular,Consolas,monospace;
  --container:1240px;
  --pad:clamp(20px,5vw,56px);
  --r-sm:14px;
  --r-md:28px;
  --sh:0 18px 40px rgba(60,50,35,.08);
  --sh-sm:0 6px 18px rgba(60,50,35,.07);
}

:where(*,*::before,*::after){box-sizing:border-box;}
:where(h1,h2,h3,h4,p,ul,li,figure,blockquote,body,dl,dd){margin:0;padding:0;}
:where(ul){list-style:none;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-weight:400;line-height:1.62;font-size:clamp(15px,1.05vw,16.5px);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
strong{font-weight:500;}
img{max-width:100%;display:block;}
svg{display:block;}
::selection{background:var(--accent);color:#FFFDFA;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%;}
.section{padding-block:clamp(72px,10vw,128px);position:relative;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- type helpers ---------- */
.d{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;line-height:1.04;}
.serif{font-family:var(--font-s);font-weight:400;font-style:italic;letter-spacing:-.01em;font-size:1.07em;line-height:1.12;padding-bottom:.04em;}
.serif--accent{color:var(--accent);}
.mono{font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);}
.lead{color:var(--mut);font-size:clamp(1rem,1.4vw,1.12rem);max-width:60ch;}

/* ---------- atmosphere ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmos__glow{position:absolute;inset:-10%;border-radius:0;opacity:1;}
.atmos__glow--tl{background:radial-gradient(46vw 40vw at 4% 2%,rgba(201,199,240,.62),transparent 68%);}
.atmos__glow--tr{background:radial-gradient(46vw 40vw at 97% 3%,rgba(191,221,198,.6),transparent 68%);}
.atmos__glow--bl{background:radial-gradient(48vw 42vw at 2% 96%,rgba(224,192,189,.62),transparent 68%);}
.atmos__glow--br{background:radial-gradient(48vw 42vw at 98% 98%,rgba(230,220,184,.6),transparent 68%);}
.atmos__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(22,20,15,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(22,20,15,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 20%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 20%,transparent 78%);}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .6s ease,visibility .6s ease;}
.preloader--done{opacity:0;visibility:hidden;pointer-events:none;}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:20px;}
.preloader__name{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.4rem,4vw,2.3rem);display:flex;}
.preloader__name span{opacity:0;transform:translateY(90%);animation:plIn .5s cubic-bezier(.22,1,.36,1) forwards;}
.preloader__name .sp{width:.36em;}
.preloader__name span:nth-child(1){animation-delay:.04s}.preloader__name span:nth-child(2){animation-delay:.08s}.preloader__name span:nth-child(3){animation-delay:.12s}.preloader__name span:nth-child(4){animation-delay:.16s}.preloader__name span:nth-child(5){animation-delay:.2s}.preloader__name span:nth-child(7){animation-delay:.26s}.preloader__name span:nth-child(8){animation-delay:.3s}.preloader__name span:nth-child(9){animation-delay:.34s}.preloader__name span:nth-child(10){animation-delay:.38s}.preloader__name span:nth-child(11){animation-delay:.42s}.preloader__name span:nth-child(12){animation-delay:.46s}.preloader__name span:nth-child(13){animation-delay:.5s}.preloader__name span:nth-child(14){animation-delay:.54s}.preloader__name span:nth-child(15){animation-delay:.58s}
@keyframes plIn{to{opacity:1;transform:translateY(0);}}
.preloader__bar{width:140px;height:2px;background:var(--ln);overflow:hidden;border-radius:2px;}
.preloader__bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:plBar 1.5s .3s cubic-bezier(.66,0,.34,1) forwards;}
@keyframes plBar{to{transform:scaleX(1);}}

/* ---------- floating nav pill ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.nav.hide{transform:translateY(-140%);}
.nav__inner{max-width:var(--container);margin:0 auto;padding:9px 9px 9px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,253,250,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--ln);border-radius:999px;box-shadow:var(--sh-sm);}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:1.02rem;}
.nav__logo{width:30px;height:30px;border-radius:9px;}
.nav__links{display:flex;align-items:center;gap:26px;font-size:.92rem;}
.nav__links a{color:var(--mut);transition:color .2s ease;}
.nav__links a:hover{color:var(--ink);}
.nav__cta{background:var(--ink);color:var(--surf)!important;padding:11px 22px;border-radius:999px;font-weight:500;font-size:.92rem;box-shadow:inset 0 2px 0 rgba(255,255,255,.12);transition:transform .2s ease,background .2s ease;}
.nav__cta:hover{transform:translateY(-1px);background:#25211A;}
.nav__toggle{display:none;background:none;border:0;padding:12px 14px;cursor:pointer;}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease;}
.nav__toggle span+span{margin-top:5px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 28px;font-weight:500;font-size:.95rem;font-family:var(--font-b);border:1px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;}
.btn svg{width:16px;height:16px;}
.btn--ink{background:var(--ink);color:var(--surf);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 8px 20px rgba(22,20,15,.18);}
.btn--ink:hover{background:#25211A;transform:translateY(-2px);}
.btn--paper{background:var(--surf);color:var(--ink);border-color:var(--ln);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),var(--sh-sm);}
.btn--paper:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn--light{background:var(--dark-ink);color:var(--ink);}
.btn--light:hover{transform:translateY(-2px);background:#fff;}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(56px,8vw,96px);text-align:center;overflow:hidden;}
.hero__ghost{position:absolute;top:clamp(120px,17vh,190px);left:50%;transform:translateX(-50%);font-family:var(--font-d);font-weight:700;font-size:clamp(9rem,26vw,20rem);line-height:.82;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(22,20,15,.09);pointer-events:none;user-select:none;white-space:nowrap;z-index:0;}
.hero__inner{position:relative;z-index:2;}
.hero__eyebrow{margin-bottom:26px;}
.hero__title{font-family:var(--font-d);font-weight:700;letter-spacing:-.035em;line-height:1.04;font-size:clamp(2.7rem,7.4vw,5.4rem);max-width:16ch;margin-inline:auto;}
.hero__title .serif{font-size:1.06em;}
.hero__sub{margin:26px auto 0;max-width:52ch;color:var(--mut);font-size:clamp(1rem,1.5vw,1.15rem);}
.hero__actions{margin-top:34px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}

/* floating icon chips */
.hero__chips{position:absolute;inset:0;z-index:1;pointer-events:none;}
.fchip{position:absolute;width:clamp(52px,5.4vw,76px);height:clamp(52px,5.4vw,76px);border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;opacity:0;transform:translateY(26px) scale(.86);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.fchip.in{opacity:1;transform:none;}
.fchip svg{width:44%;height:44%;}
.fchip i{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(0,0,0,.12);}
.fchip--1{background:linear-gradient(155deg,#FF8E72,#F2542D);box-shadow:0 12px 26px rgba(242,84,45,.38);top:8%;left:6%;transition-delay:.05s;}
.fchip--2{background:linear-gradient(155deg,#6EE0A8,#2FA96D);box-shadow:0 12px 26px rgba(47,169,109,.36);top:34%;left:2%;transition-delay:.14s;}
.fchip--3{background:linear-gradient(155deg,#7FB6FF,#3F7BE0);box-shadow:0 12px 26px rgba(63,123,224,.36);top:58%;left:9%;transition-delay:.23s;}
.fchip--4{background:linear-gradient(155deg,#8FC9FF,#4C8FE8);box-shadow:0 12px 26px rgba(76,143,232,.34);top:9%;right:7%;transition-delay:.1s;}
.fchip--5{background:linear-gradient(155deg,#C3ABFF,#8A63EA);box-shadow:0 12px 26px rgba(138,99,234,.34);top:33%;right:2%;transition-delay:.19s;}
.fchip--6{background:linear-gradient(155deg,#FFC078,#F08A2E);box-shadow:0 12px 26px rgba(240,138,46,.36);top:59%;right:8%;transition-delay:.28s;}
.fchip--float{animation:fl 7s ease-in-out infinite;}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* star marks beside the headline */
.hero__star{position:absolute;z-index:1;color:var(--accent);opacity:0;transition:opacity .8s ease .5s;}
.hero__star.in{opacity:.9;}
.hero__star--a{top:26%;right:20%;width:44px;}
.hero__star--b{top:41%;left:20%;width:30px;color:#8FC9FF;}

/* ---------- client strip ---------- */
.strip{padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);overflow:hidden;}
.strip__label{text-align:center;margin-bottom:20px;}
.strip__track{display:flex;align-items:center;gap:44px;width:max-content;white-space:nowrap;will-change:transform;}
.strip__track span{font-family:var(--font-d);font-weight:500;font-size:clamp(1rem,1.8vw,1.35rem);letter-spacing:-.02em;color:var(--ink);opacity:.42;}
.strip__track i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;flex:none;}

/* ---------- the deck ---------- */
.deck{position:relative;}
.deck__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.deck__viewport{overflow:hidden;}
.deck__track{display:flex;transition:transform .1s linear;}
.deck__panel{flex:0 0 100%;min-width:100%;padding-inline:var(--pad);}
.pane{max-width:var(--container);margin:0 auto;background:var(--surf);border:1px solid var(--ln);border-radius:var(--r-md);box-shadow:var(--sh);overflow:hidden;}
.pane__chrome{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--ln);background:var(--panel);}
.pane__dots{display:flex;gap:6px;}
.pane__dots i{width:10px;height:10px;border-radius:50%;background:#E4CFC7;}
.pane__dots i:nth-child(2){background:#EFDCB4;}
.pane__dots i:nth-child(3){background:#C9E3CE;}
.pane__crumb{font-family:var(--font-m);font-weight:500;font-size:.74rem;letter-spacing:.04em;color:#B08A6A;}
.pane__body{padding:clamp(26px,3.6vw,46px) clamp(20px,3.4vw,44px);}
.pane__head{text-align:center;max-width:44ch;margin:0 auto clamp(24px,3vw,38px);}
.pane__head h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.5rem,3.2vw,2.5rem);}
.pane__head p{color:var(--mut);margin-top:12px;font-size:.98rem;}
.pane__scroll{max-height:min(46vh,440px);overflow-y:auto;overscroll-behavior:auto;padding-right:6px;}
.pane__scroll::-webkit-scrollbar{width:6px;}
.pane__scroll::-webkit-scrollbar-thumb{background:var(--ln);border-radius:999px;}

/* project cards */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pcard{border-radius:var(--r-sm);padding:18px;color:#fff;min-height:158px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.pcard:hover{transform:translateY(-4px) rotate(-.6deg);}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.35);pointer-events:none;}
.pcard__tag{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.85);}
.pcard h3{font-family:var(--font-d);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:5px;}
.pcard p{font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.9);}
.pcard__meta{font-family:var(--font-m);font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:10px;}
.pcard--coral{background:#F2694A;box-shadow:0 10px 24px rgba(242,105,74,.35);}
.pcard--blue{background:#5B8DEF;box-shadow:0 10px 24px rgba(91,141,239,.35);}
.pcard--green{background:#34A97B;box-shadow:0 10px 24px rgba(52,169,123,.32);}
.pcard--purple{background:#9B7BF0;box-shadow:0 10px 24px rgba(155,123,240,.32);}
.pcard--cyan{background:#3FB4C4;box-shadow:0 10px 24px rgba(63,180,196,.32);}
.pcard--orange{background:#EE8B33;box-shadow:0 10px 24px rgba(238,139,51,.32);}

/* ledger rows inside panes */
.rows{display:grid;gap:0;}
.row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(16px,3vw,44px);padding-block:22px;border-top:1px solid var(--ln);}
.row:first-child{border-top:0;padding-top:0;}
.row__t{font-family:var(--font-d);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;}
.row__role{display:block;color:var(--accent);font-size:.85rem;margin-top:5px;}
.row__date{display:block;font-family:var(--font-m);font-weight:500;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-top:6px;}
.row__pts li{color:var(--mut);font-size:.92rem;position:relative;padding-left:18px;}
.row__pts li+li{margin-top:9px;}
.row__pts li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--accent);}

/* skill groups inside panes */
.sgroup{display:grid;grid-template-columns:190px 1fr;gap:clamp(14px,3vw,36px);padding-block:20px;border-top:1px solid var(--ln);align-items:start;}
.sgroup:first-child{border-top:0;padding-top:0;}
.sgroup h3{font-family:var(--font-m);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding-top:8px;}
.sgroup ul{display:flex;flex-wrap:wrap;gap:8px;}
.sgroup li{border:1px solid var(--ln);background:var(--panel);border-radius:999px;padding:7px 15px;font-size:.86rem;transition:border-color .25s ease,color .25s ease,transform .25s ease;}
.sgroup li:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

/* ---------- dock ---------- */
.dock{position:absolute;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,calc(var(--container) - 2 * var(--pad)));}
.dots{display:flex;align-items:center;gap:7px;}
.dots b{display:block;width:7px;height:7px;border-radius:999px;background:rgba(22,20,15,.18);transition:width .35s cubic-bezier(.22,1,.36,1),background .35s ease;}
.dots b.on{width:30px;background:var(--ink);}
.dock__bar{display:flex;align-items:center;gap:6px;background:rgba(255,253,250,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--ln);border-radius:26px;padding:10px;box-shadow:var(--sh);max-width:100%;}
.dock__tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 10px 5px;border:0;background:none;cursor:pointer;font-family:var(--font-b);border-radius:16px;transition:background .25s ease;}
.dock__tab:hover{background:rgba(22,20,15,.04);}
.dock__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;box-shadow:inset 0 2px 0 rgba(255,255,255,.4);}
.dock__ico svg{width:20px;height:20px;}
.dock__tab[aria-selected="true"] .dock__ico{transform:translateY(-3px);outline:2px solid var(--ink);outline-offset:2px;}
.dock__tab span{font-size:.7rem;color:var(--mut);letter-spacing:.005em;}
.dock__tab[aria-selected="true"] span{color:var(--ink);font-weight:500;}
.dock__ico--home{background:var(--ink);}
.dock__ico--coral{background:#F2694A;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 8px 18px rgba(242,105,74,.4);}
.dock__ico--blue{background:#5B8DEF;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 8px 18px rgba(91,141,239,.4);}
.dock__ico--purple{background:#9B7BF0;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 8px 18px rgba(155,123,240,.4);}
.dock__ico--green{background:#34A97B;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 8px 18px rgba(52,169,123,.4);}
.dock__sep{width:1px;align-self:stretch;background:var(--ln);margin-inline:8px;}
.dock__cta{background:var(--ink);color:var(--surf);border-radius:999px;padding:13px 24px;font-weight:500;font-size:.9rem;white-space:nowrap;box-shadow:inset 0 2px 0 rgba(255,255,255,.12);}
.dock__cta:hover{background:#25211A;}

/* ---------- stats ---------- */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{background:var(--surf);border:1px solid var(--ln);border-radius:var(--r-md);padding:28px 26px;box-shadow:var(--sh-sm);}
.stat__num{display:block;font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;font-size:clamp(2.1rem,4.2vw,3.1rem);line-height:1;}
.stat__label{display:block;margin-top:10px;font-family:var(--font-m);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,76px);align-items:center;}
.about__photo{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ln);box-shadow:var(--sh);transform:rotate(-1.6deg);}
.about__photo img{width:100%;height:auto;}
.about__head{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.9rem,4vw,3.1rem);margin-bottom:22px;}
.about__col p{color:var(--mut);max-width:58ch;}
.about__col p+p{margin-top:16px;}

/* ---------- education / achievements ---------- */
.edu__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.card{background:var(--surf);border:1px solid var(--ln);border-radius:var(--r-md);padding:clamp(24px,3vw,38px);box-shadow:var(--sh-sm);}
.card h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:22px;}
.mini{padding-block:16px;border-top:1px solid var(--ln);}
.mini:first-of-type{border-top:0;padding-top:0;}
.mini h3{font-weight:500;font-size:1rem;}
.mini p{color:var(--mut);font-size:.9rem;margin-top:4px;}
.mini span{display:block;font-family:var(--font-m);font-weight:500;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:7px;}

/* ---------- inverted contact ---------- */
.invert{background:var(--dark);color:var(--dark-ink);border-radius:var(--r-md);padding:clamp(36px,5.5vw,78px);position:relative;overflow:hidden;}
.invert .mono{color:var(--lime);}
.invert__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.invert h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2rem,4.6vw,3.5rem);margin-top:18px;}
.invert p.lead{color:#B9B2A5;margin-top:20px;}
.invert__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.invert__meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:38px;padding-top:20px;border-top:1px solid rgba(246,241,232,.14);font-size:.85rem;color:#9A9488;}
.invert__meta a:hover{color:var(--lime);}
.toasts{display:flex;flex-direction:column;gap:12px;}
.toast{display:flex;align-items:center;gap:13px;background:rgba(246,241,232,.06);border:1px solid rgba(246,241,232,.12);border-radius:999px;padding:13px 20px 13px 13px;opacity:0;transform:translateX(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.toast.in{opacity:1;transform:none;}
.toast:nth-child(2){transition-delay:.14s;}
.toast:nth-child(3){transition-delay:.28s;}
.toast:nth-child(4){transition-delay:.42s;}
.toast b{width:30px;height:30px;border-radius:10px;flex:none;}
.toast--1 b{background:#F2694A;}
.toast--2 b{background:#5B8DEF;}
.toast--3 b{background:#34A97B;}
.toast--4 b{background:#9B7BF0;}
.toast span{font-size:.88rem;color:var(--dark-ink);}
.toast em{font-style:normal;color:var(--lime);font-family:var(--font-m);font-weight:500;font-size:.8rem;}

/* ---------- footer ---------- */
.foot{padding-block:34px;border-top:1px solid var(--ln);}
.foot__inner{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.84rem;color:var(--mut);}
.foot__tag{font-family:var(--font-m);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal,.fchip,.toast,.hero__star{opacity:1!important;transform:none!important;transition:none!important;}
  .fchip--float{animation:none;}
  .strip__track{transform:none!important;}
  .preloader__name span{opacity:1;transform:none;animation:none;}
  .preloader__bar i{transform:scaleX(1);animation:none;}
  .deck__sticky{position:static;height:auto;}
  .deck{height:auto!important;}
  .deck__track{flex-direction:column;transform:none!important;gap:20px;}
  .deck__panel{min-width:0;}
  .dock{position:static;transform:none;margin:24px auto 0;}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pcards{grid-template-columns:repeat(2,1fr);}
  .about__grid,.edu__grid,.invert__grid{grid-template-columns:1fr;}
  .stats__grid{grid-template-columns:repeat(2,1fr);}
  .row,.sgroup{grid-template-columns:1fr;gap:12px;}
  .hero__chips,.hero__star{display:none;}
}
@media (max-width:860px){
  .nav__links{position:fixed;inset:0;height:100dvh;flex-direction:column;justify-content:center;gap:24px;background:var(--bg);font-size:1.35rem;transform:translateY(-102%);transition:transform .5s cubic-bezier(.22,1,.36,1);}
  .nav.open .nav__links{transform:none;}
  .nav__links .nav__cta{display:none;}
  .nav__toggle{display:block;position:relative;z-index:2;}
  .nav.open .nav__toggle span:first-child{transform:translateY(3.5px) rotate(45deg);}
  .nav.open .nav__toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg);}
  .deck{height:auto!important;}
  .deck__sticky{position:static;height:auto;padding-block:clamp(56px,9vw,96px);}
  .deck__viewport{overflow:visible;}
  .deck__track{flex-direction:column;transform:none!important;gap:22px;}
  .deck__panel{flex:none;min-width:0;width:100%;}
  .pane__scroll{max-height:none;overflow:visible;}
  .dock{position:sticky;bottom:12px;left:auto;transform:none;margin:26px auto 0;}
  .dock__bar{overflow-x:auto;justify-content:flex-start;}
  .dots{display:none;}
}
@media (max-width:620px){
  .pcards{grid-template-columns:1fr;}
  .stats__grid{grid-template-columns:1fr;}
  .hero__ghost{font-size:clamp(5rem,30vw,9rem);}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:10px;}
  .dock__tab span{display:none;}
  .dock__cta{padding:12px 18px;}
}

/* ---------- late corrections ---------- */
.nav__cta--desk{display:none;}
.invert .btn--paper{background:transparent;color:var(--dark-ink);border-color:rgba(246,241,232,.28);box-shadow:none;}
.invert .btn--paper:hover{border-color:var(--lime);color:var(--lime);background:transparent;}
.pcard>div{margin-top:auto;}
@media (max-width:860px){
  .nav__cta--desk{display:inline-flex;}
  .nav__inner{padding-right:6px;}
}
/* ---------- deck fit + performance ---------- */

.deck__sticky{padding-bottom:clamp(132px,17vh,178px);}
.deck__viewport{contain:paint;}
.pane__scroll{max-height:min(38vh,360px);}
.pane__body{padding-bottom:clamp(22px,2.6vw,32px);}
.dock{bottom:clamp(16px,3vh,30px);}
.strip__track{contain:layout style;}
@media (max-width:860px){
  .deck__sticky{padding-bottom:0;contain:none;}
  .deck__viewport{contain:none;}
  .pane__scroll{max-height:none;}
}
/* ---------- pane always fits the viewport above the dock ---------- */
.deck__track{align-items:center;}
.deck__panel{display:flex;align-items:center;}
.pane{width:100%;max-height:calc(100vh - clamp(160px,21vh,210px));display:flex;flex-direction:column;}
.pane__chrome{flex:none;}
.pane__body{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.pane__head{flex:none;margin-bottom:clamp(16px,2.4vw,30px);}
.pane__scroll{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;}
@media (max-height:760px){
  .pane__head h2{font-size:clamp(1.35rem,2.6vw,1.9rem);}
  .pane__head p{font-size:.9rem;margin-top:8px;}
  .pane__body{padding-top:20px;padding-bottom:20px;}
}
@media (max-width:860px){
  .deck__panel{display:block;}
  .pane{max-height:none;display:block;}
  .pane__body{display:block;overflow:visible;}
  .pane__scroll{overflow:visible;}
}
/* ---------- hero fits the first viewport ---------- */
.hero{padding-top:clamp(104px,15vh,160px);padding-bottom:clamp(40px,6vw,72px);}
.hero__ghost{top:clamp(104px,15vh,160px);}
.hero__title{font-size:clamp(2.5rem,6.6vw,4.8rem);}
.hero__eyebrow{margin-bottom:20px;}
.hero__sub{margin-top:20px;}
.hero__actions{margin-top:28px;}
@media (max-height:760px){
  .hero{padding-top:clamp(96px,13vh,132px);}
  .hero__ghost{top:clamp(96px,13vh,132px);font-size:clamp(7rem,20vw,14rem);}
  .hero__title{font-size:clamp(2.2rem,5.4vw,3.9rem);}
}
/* ---------- compositor relief ---------- */
.atmos__grid{mask-image:none;-webkit-mask-image:none;opacity:.55;}
.dock__bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,253,250,.97);}
.nav__inner{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
/* ---------- compositing: keep the fixed wash on its own GPU layer ---------- */


.atmos__glow,.atmos__grid{will-change:auto;}
/* backdrop-filter over a long scrolling document forces a backdrop readback every frame */
.nav__inner{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,253,250,.94);}


/* ---------- stacking: atmosphere sits at 0, all content sits above it ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
main{position:relative;z-index:1;}
.foot{position:relative;z-index:1;}
.nav{z-index:100;}
.preloader{z-index:200;}
/* overflow-x on body makes body a scroll container and breaks position:sticky.
   Every element that can overflow horizontally clips itself instead. */
html,body{overflow-x:visible;}
.hero,.strip,.deck__viewport,.atmos{overflow:hidden;}
/* ---------- all decorative color pulled onto the declared palette ---------- */
.fchip--1{background:#F2694A;box-shadow:0 12px 26px rgba(242,105,74,.38);}
.fchip--2{background:#34A97B;box-shadow:0 12px 26px rgba(52,169,123,.36);}
.fchip--3{background:#5B8DEF;box-shadow:0 12px 26px rgba(91,141,239,.36);}
.fchip--4{background:#3FB4C4;box-shadow:0 12px 26px rgba(63,180,196,.34);}
.fchip--5{background:#9B7BF0;box-shadow:0 12px 26px rgba(155,123,240,.34);}
.fchip--6{background:#EE8B33;box-shadow:0 12px 26px rgba(238,139,51,.36);}
.fchip i{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 8px rgba(22,20,15,.14);}
.hero__star--b{color:#5B8DEF;}
.pane__dots i{background:#E0C0BD;}
.pane__dots i:nth-child(2){background:#E6DCB8;}
.pane__dots i:nth-child(3){background:#BFDDC6;}
.dock__ico--coral{background:#F2694A;}
.dock__ico--blue{background:#5B8DEF;}
.dock__ico--purple{background:#9B7BF0;}
.dock__ico--green{background:#34A97B;}
/* inner panel lists must chain their scroll back to the page, never trap it */
.pane__scroll{overscroll-behavior:auto;}
/* Nothing is hidden unless JS is actually running to reveal it again. */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);}
.js .reveal.in{opacity:1;transform:none;}
.js .fchip{opacity:0;}
.js .fchip.in{opacity:1;}
.js .toast{opacity:0;}
.js .toast.in{opacity:1;transform:none;}
/* ================= round 2 fixes ================= */

/* 1. Mobile nav bar is just the mark plus the menu button. */
.nav__cta--desk{display:none!important;}
@media (max-width:860px){
  .nav__inner{padding:9px 9px 9px 16px;}
  .nav__links{gap:18px;padding-inline:var(--pad);}
  .nav__links a{font-family:var(--font-d);font-weight:700;font-size:1.6rem;letter-spacing:-.025em;color:var(--ink);}
  .nav__links .nav__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;font-family:var(--font-b);font-weight:500;font-size:1rem;letter-spacing:0;padding:15px 34px;color:var(--surf);}
}

/* 2. Project cards: the blank white square now carries the project glyph. */
.pcard__tag{width:30px;height:30px;border-radius:9px;background:#FFFDFA;display:grid;place-items:center;flex:none;}
.pcard__tag svg{width:17px;height:17px;}
.pcard--coral .pcard__tag{color:#F2694A;}
.pcard--blue .pcard__tag{color:#5B8DEF;}
.pcard--green .pcard__tag{color:#34A97B;}
.pcard--purple .pcard__tag{color:#9B7BF0;}
.pcard--cyan .pcard__tag{color:#3FB4C4;}
.pcard--orange .pcard__tag{color:#EE8B33;}

/* 4. Dock glyphs read as crisp white; labels get real contrast. */
.dock__ico{color:#FFFFFF;}
.dock__ico svg{stroke:#FFFFFF;color:#FFFFFF;stroke-width:2;}
.dock__tab span{color:#5F5B52;}
.dock__tab[aria-selected='true'] span{color:#16140F;font-weight:500;}

/* 3 + 5. Mobile: the deck becomes a native horizontal swipe deck. */
@media (max-width:860px){
  .deck{height:auto!important;}
  .deck__sticky{position:static;height:auto;overflow:visible;padding:clamp(52px,9vw,84px) 0 0;contain:none;justify-content:flex-start;}
  .deck__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;contain:none;}
  .deck__viewport::-webkit-scrollbar{display:none;}
  .deck__track{flex-direction:row;transform:none!important;gap:12px;padding-inline:var(--pad);align-items:stretch;transition:none;}
  .deck__panel{flex:0 0 86%;min-width:86%;width:86%;padding-inline:0;display:block;scroll-snap-align:center;}
  .pane{max-height:none;display:flex;flex-direction:column;height:100%;}
  .pane__body{display:flex;flex-direction:column;overflow:hidden;min-height:0;}
  .pane__scroll{max-height:52vh;overflow-y:auto;flex:1 1 auto;}
  .pcards{grid-template-columns:1fr;}
  .dots{display:flex;margin-bottom:10px;}
  .dock{position:sticky;bottom:14px;left:auto;transform:none;margin:22px auto 0;width:auto;z-index:30;}
  .dock__bar{overflow:visible;justify-content:center;padding:8px;gap:0;}
  .dock__sep,.dock__cta{display:none;}
  .dock__tab{padding:5px 7px 4px;}
  .dock__ico{width:42px;height:42px;border-radius:13px;}
  .dock__ico svg{width:19px;height:19px;}
  .dock__tab span{display:block;font-size:.63rem;}
}
@media (max-width:400px){
  .dock__tab{padding:5px 4px 4px;}
  .dock__ico{width:38px;height:38px;}
  .dock__tab span{font-size:.58rem;}
}
/* ---------- hero sits in the middle of the first screen, not pinned to the top ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(96px,13vh,150px);
  padding-bottom:clamp(44px,7vw,84px);
}
.hero__ghost{top:50%;left:50%;transform:translate(-50%,-50%);}
@supports not (min-height:100svh){ .hero{min-height:100vh;} }
@media (max-width:860px){
  .hero{min-height:100svh;padding-top:clamp(88px,12vh,120px);padding-bottom:clamp(36px,8vw,64px);}
  .hero__ghost{font-size:clamp(4.5rem,26vw,8rem);}
}
/* very short screens: let it flow rather than squash */
@media (max-height:620px){
  .hero{min-height:0;padding-top:120px;}
  .hero__ghost{top:auto;transform:translateX(-50%);}
}
/* ---------- mobile: keep the sticky dock clear of panel content ---------- */
@media (max-width:860px){
  .deck__viewport{padding-bottom:112px;}
  .pane__scroll{max-height:40vh;}
  .dock{margin-top:-96px;}
  .dots{margin-bottom:8px;}
  .pane__body{padding:clamp(20px,4vw,28px) clamp(16px,4vw,24px);}
  .pane__head{margin-bottom:16px;}
  .pane__head h2{font-size:clamp(1.3rem,5.6vw,1.7rem);}
  .pane__head p{font-size:.88rem;margin-top:8px;}
  .pcard{min-height:0;}
  .pcard__meta{margin-top:8px;}
}
/* ---------- nav: mark only, floated in from the edges ---------- */
.nav{top:20px;}
.nav__brand{gap:0;}
.nav__logo{width:32px;height:32px;}
@media (max-width:860px){
  .nav{top:18px;}
  .nav__inner{max-width:none;margin-inline:18px;padding:10px 10px 10px 12px;}
  .nav__links{margin-inline:-18px;}
}
@media (max-width:420px){
  .nav__inner{margin-inline:14px;}
  .nav__links{margin-inline:-14px;}
}

/* ---------- dock: never sits on top of panel content ---------- */
@media (max-width:860px){
  .deck__viewport{padding-bottom:126px;}
  .dock{margin-top:-110px;margin-inline:auto;left:0;right:0;}
  .dots{margin-bottom:10px;}
  .pane__scroll{max-height:38vh;}
}
.dock__ico svg{display:block;margin:auto;}
/* ================= round 3 fixes ================= */

/* Flex centring lets tall content overflow BOTH ways, so the headline slid up
   under the nav. Auto margins centre the same way but collapse to zero when
   there is no free space, so padding is always respected. */
.hero{justify-content:flex-start;}
.hero__inner{margin-block:auto;}
@media (max-width:860px){
  .hero{padding-top:104px;padding-bottom:48px;}
  .hero__title{font-size:clamp(1.9rem,8.2vw,2.6rem);}
  .hero__sub{font-size:1rem;margin-top:16px;}
  .hero__actions{margin-top:24px;gap:10px;}
  .hero__eyebrow{margin-bottom:16px;}
}

/* The sticky dock pinned itself as soon as the deck section touched the
   viewport, so it floated over the strip above. On small screens it now simply
   sits under the panels. */
@media (max-width:860px){
  .deck__viewport{padding-bottom:0;}
  .dock{position:static;margin:20px auto 0;transform:none;}
  .pane__scroll{max-height:46vh;}
}

/* Dock glyphs dead-centre in their tile. */
.dock__ico{display:flex;align-items:center;justify-content:center;line-height:0;padding:0;}
.dock__ico svg{width:20px;height:20px;margin:0;display:block;flex:none;}
.dock__tab{align-items:center;}
/* Absolute centring does not depend on the tile's display type, so it cannot be
   knocked out by an earlier grid/flex declaration later in the cascade. */
.dock .dock__ico{position:relative;display:block;}
.dock .dock__ico svg{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:20px;height:20px;}
@media (max-width:860px){ .dock .dock__ico svg{width:19px;height:19px;} }
@media (max-width:400px){ .dock .dock__ico svg{width:18px;height:18px;} }
/* ---------- Instagram feed band ---------- */
.feed__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap;}
.feed__title{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.8rem,3.6vw,2.8rem);margin-top:10px;}
.feed__grid{background:var(--surf);border:1px solid var(--ln);border-radius:var(--r-md);padding:clamp(14px,2vw,22px);box-shadow:var(--sh-sm);overflow:hidden;}
.feed__grid img{border-radius:var(--r-sm);}
@media (max-width:620px){
  .feed__head{align-items:flex-start;}
  .feed__head .btn{padding:12px 20px;font-size:.88rem;}
}

/* nav mark reads as a circular portrait */
.nav__logo{border-radius:50%;object-fit:cover;}
/* The nav bar also carries .container, which sets width:100%. Adding side
   margins therefore pushed the pill past the right edge instead of insetting
   it. Inset the fixed wrapper with padding instead, so it stays symmetric. */
.nav__inner{width:auto;}
@media (max-width:860px){
  .nav{padding-inline:16px;}
  .nav__inner{margin-inline:0;width:auto;max-width:none;}
  .nav__links{margin-inline:0;}
}
@media (max-width:420px){
  .nav{padding-inline:12px;}
  .nav__inner{margin-inline:0;}
}