@font-face{font-family:"Sohne";src:url("fonts/Sohne-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sohne";src:url("fonts/Sohne-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sohne";src:url("fonts/Sohne-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Heldane";src:url("fonts/Heldane-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Heldane Display";src:url("fonts/HeldaneDisplay-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Berkeley";src:url("fonts/Berkeley-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --black:#000;--white:#fff;
  --g900:#18181b;--g800:#27272a;--g700:#3f3f46;--g600:#52525b;--g500:#71717a;--g400:#a1a1aa;--g300:#d4d4d8;--g200:#e4e4e7;
  --pink:#ffacab;--yellow:#ffea9e;--blue:#97edff;--green:#b1ff9e;--purple:#e0a4ff;--orange:#ffbd9e;
  --sans:"Sohne",system-ui,sans-serif;--serif:"Heldane",Georgia,serif;--serif-d:"Heldane Display",Georgia,serif;--mono:"Berkeley",ui-monospace,monospace;
  --r-sm:.375rem;--r-md:.875rem;--r-lg:1.625rem;
  --ice:linear-gradient(90deg,#ffffff,#97edff,#88d5e6);
  --ease-out:cubic-bezier(0,0,.2,1);--ease-in:cubic-bezier(.4,0,1,1);
  --pad:24px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-sm)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:5}
.wrap{max-width:1536px;margin:0 auto;padding:0 var(--pad)}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad)}
.logo{font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1;background:var(--ice);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{display:flex;gap:4px;padding:4px;background:var(--g900);border-radius:var(--r-md)}
.pill a{padding:8px 12px;border-radius:var(--r-md);font-weight:500;font-size:14px;color:var(--g300);transition:background .15s var(--ease-in),color .15s var(--ease-in)}
.pill a:hover{color:var(--white)}
.pill a.active{background:var(--white);color:var(--black)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--r-md);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;transition:opacity .15s var(--ease-in),transform .2s var(--ease-out)}
.btn-primary{background:var(--white);color:var(--black)}
.btn-primary:hover{opacity:.9;transform:translateY(-2px)}
.btn-ghost{color:var(--white)}
.btn-ghost:hover{color:var(--blue)}
.btn-start{font-size:18px;padding:14px 20px}
@media(max-width:760px){.pill{display:none}}

/* type */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g500)}
h1,h2,h3{font-weight:400;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(44px,7vw,96px)}
h2{font-size:clamp(36px,5vw,64px);margin:12px 0 32px}
h3{font-size:24px;font-weight:500}
.lead{font-size:18px;color:var(--g400);max-width:720px}
.lead strong{color:var(--white);font-weight:500}
.serif{font-family:var(--serif);font-style:italic;color:var(--g500)}
.serif-d{font-family:var(--serif-d)}
section{padding:112px 0;scroll-margin-top:0}

/* hero */
.hero-track{height:260vh;position:relative}
.hero{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding:96px 0 40px}
.hero .copy{will-change:transform,opacity}
.hero .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.badge{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--g800);border-radius:var(--r-sm);background:var(--black);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)}
.hero p.lead{margin:24px 0 32px}
.cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media(max-width:960px){.hero .grid{grid-template-columns:1fr;gap:0}.fan{order:-1;height:340px;--sc:.15}.hero{padding-top:80px}.hero h1{font-size:40px}}

/* card fan */
@property --i{syntax:"<number>";inherits:true;initial-value:0}
@property --h{syntax:"<number>";inherits:true;initial-value:0}
.fan{--p:0;--sc:.62;--h:0;position:relative;height:560px;perspective:1200px;cursor:pointer;transition:--h .5s var(--ease-out);-webkit-tap-highlight-color:transparent}
.fan:hover,.fan:focus-visible{--h:1}
.card{--i:0;position:absolute;top:50%;left:50%;width:272px;aspect-ratio:5/7;margin:-190px 0 0 -136px;transform-origin:50% 90%;transition:--i .55s cubic-bezier(.2,.9,.25,1.1);will-change:transform;
  transform:
    rotate(calc(-2deg + var(--i)*5.3deg + var(--p)*1deg*max(27 - 30*var(--i),7.3*var(--i)) + var(--h)*var(--i)*3deg))
    translate(calc(var(--i)*40px + var(--p)*1px*max(50,90*var(--i) - 10) + var(--h)*var(--i)*24px),calc(var(--i)*4px + var(--p)*1px*max(10,13*var(--i))))
    scale(calc(1 + var(--p)*var(--sc)*max(0,1 - var(--i))))}
.card-in{width:100%;height:100%;border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;border:1px solid var(--g700);background:linear-gradient(to bottom,var(--g900),var(--black));transition:transform .25s var(--ease-out),border-color .25s var(--ease-out);transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
.card.dashed .card-in{border-style:dashed;border-color:var(--g800);background:var(--black)}
.card.front .card-in{border-color:var(--g400)}
.fan:hover .card.front .card-in{border-color:var(--blue)}
.fan:active .card.front .card-in{transform:perspective(900px) scale(.96)}
.card .tag{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--g800);background:var(--ice);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:8px 0}
.card .body .serif{font-size:18px}
.card .body .big{font-family:var(--serif-d);font-size:25px;color:var(--white);line-height:1.2;text-wrap:balance}
.card .body .stat-line{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card .body .dim{font-family:var(--serif-d);font-size:20px;line-height:1.2;color:var(--g300);text-wrap:balance}
.card .foot{border-top:1px solid var(--g800);padding-top:8px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--g700)}
.card.flying{transition:none}
.card.flying .card-in{animation:flyOut .32s var(--ease-in) forwards}
.card.landing .card-in{animation:flyIn .45s var(--ease-out)}
@keyframes flyOut{to{transform:translateX(130%) rotate(18deg);opacity:0}}
@keyframes flyIn{from{opacity:0;transform:scale(.9)}to{opacity:1}}
.card.front{animation:floatingLeft 6s ease-in-out infinite}
.hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g600);transition:color .2s}
.fan:hover .hint{color:var(--blue)}
@keyframes floatingLeft{0%,100%{translate:0 .75rem}50%{translate:0 -.75rem}}
@keyframes bounceY{0%,100%{transform:translateY(-.625rem);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
.scroll-cue{display:inline-block;margin-top:56px;color:var(--g500);animation:bounceY 1.5s infinite}

/* about */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.stat{border:1px solid var(--g800);border-radius:var(--r-md);padding:20px;background:var(--g900)}
.stat b{display:block;font-size:40px;font-weight:500;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g500)}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* services */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.svc{padding:4px;border-radius:var(--r-lg);background:var(--ice);transition:transform .3s var(--ease-out)}
.svc:hover{transform:translateY(-8px)}
.svc>div{background:var(--black);border-radius:calc(var(--r-lg) - 4px);padding:28px;height:100%;display:flex;flex-direction:column;gap:12px;min-height:280px}
.svc p{color:var(--g400)}
.svc .eyebrow{margin-top:auto}

/* work: pinned horizontal rail */
.work-track{height:320vh;position:relative}
.work-pin{position:sticky;top:0;height:100vh;padding:112px 0 40px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.work-head h2{margin-bottom:24px}
.rail{display:flex;gap:32px;padding:0 var(--pad);will-change:transform;width:max-content}
.frame{flex:0 0 min(704px,86vw);padding:6px;border-radius:var(--r-lg);background:var(--ice);transition:transform .4s var(--ease-out)}
.frame:nth-child(even){background:linear-gradient(to left,#ffffff,#97edff,#88d5e6)}
.frame:hover{transform:translateY(-8px) rotate(-1deg)}
.frame-in{aspect-ratio:16/9;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:40px;border-radius:calc(var(--r-lg) - 6px);background:linear-gradient(to bottom,var(--g900),var(--black))}
.frame h3{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:.95;margin-bottom:8px}
.frame p{color:var(--g400)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);border:1px solid var(--g800);border-radius:var(--r-sm);padding:4px 8px}
.arrow{font-size:28px;color:var(--g500)}

/* faq */
.faq{max-width:880px}
details{border-bottom:1px solid var(--g800);padding:20px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:20px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-size:28px;line-height:1;transition:transform .3s var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--g400);margin-top:12px;max-width:720px}

/* contact */
.contact{text-align:center}
.contact h2{font-size:clamp(44px,7vw,96px);margin-bottom:24px}
.contact .lead{margin:0 auto 32px}
.contact .serif-d{color:var(--blue)}
.mail{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--g400)}
.mail:hover{color:var(--blue)}
.contact-links{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:8px}
.lead+.lead{margin-top:16px}

/* footer */
footer{border-top:1px solid var(--g800);padding:32px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g700)}
footer a:hover{color:var(--blue)}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hero-track,.work-track{height:auto}.hero,.work-pin{position:relative;height:auto;min-height:100vh}.rail{width:auto;flex-wrap:wrap;transform:none!important}.work-pin{overflow:visible}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* awards */
.awards{padding:96px 0 64px}
.awards-head{display:flex;align-items:center;gap:clamp(24px,5vw,72px);margin-bottom:40px;flex-wrap:wrap}
.awards-head h2{margin:8px 0 16px}
.awards-count{font-family:var(--serif-d);font-size:clamp(120px,18vw,240px);line-height:.8;letter-spacing:-.04em;background:var(--ice);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.medals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.medal{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px;border:1px solid var(--g700);border-radius:var(--r-lg);background:linear-gradient(to bottom,var(--g900),var(--black));transition:border-color .25s var(--ease-out),transform .3s var(--ease-out)}
.medal:hover{border-color:var(--blue);transform:translateY(-8px)}
.medal-year{font-family:var(--serif-d);font-size:72px;line-height:1;background:var(--ice);-webkit-background-clip:text;background-clip:text;color:transparent}
.medal-t{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.medal-s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin-bottom:8px}
.badge-ice{color:var(--black);background:var(--ice);border-color:transparent}

/* certifications band */
.cert{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:104px;padding:28px;border:1px solid var(--g700);border-radius:var(--r-lg);background:linear-gradient(to bottom,var(--g900),var(--black));}
.cert h3{margin:8px 0}
.cert p:not(.eyebrow){color:var(--g400);max-width:760px}
.cert-link:hover{text-decoration:underline;text-underline-offset:4px}
.cert-link{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);white-space:nowrap}

/* footer social */
.social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--g800);border-radius:var(--r-sm);color:var(--g500);transition:color .15s,border-color .15s,transform .2s var(--ease-out)}
.social:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-2px)}