:root{
  --primary:#000000;
  --on-primary:#ffffff;
  --ink:#000000;
  --canvas:#ffffff;
  --inverse-canvas:#000000;
  --inverse-ink:#ffffff;
  --hairline:#e6e6e6;
  --hairline-soft:#f1f1f1;
  --surface-soft:#f7f7f5;
  --block-lime:#dceeb1;
  --block-lilac:#c5b0f4;
  --block-cream:#f4ecd6;
  --block-pink:#efd4d4;
  --block-mint:#c8e6cd;
  --block-coral:#f3c9b6;
  --block-navy:#1f1d3d;
  --accent-magenta:#ff3d8b;

  --sans:"Inter","SF Pro Display",system-ui,helvetica,sans-serif;
  --mono:"JetBrains Mono","SF Mono",menlo,monospace;

  --r-xs:2px; --r-sm:6px; --r-md:8px; --r-lg:24px; --r-xl:32px; --r-pill:50px; --r-full:9999px;

  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px; --sp-section:96px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  font-variation-settings:"wght" 320;
  font-size:18px;
  line-height:1.45;
  letter-spacing:-0.26px;
  color:var(--ink);
  background:var(--canvas);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:inherit;}
ul{list-style:none;}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--sp-xxl);
}
@media (max-width:768px){
  .container{padding:0 var(--sp-lg);}
}

.eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:15px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:0.54px;
  text-transform:uppercase;
}
.display-xl{
  font-size:clamp(48px,9vw,86px);
  font-variation-settings:"wght" 340;
  font-weight:340;
  line-height:1.0;
  letter-spacing:-1.72px;
}
.display-lg{
  font-size:clamp(38px,6vw,64px);
  font-variation-settings:"wght" 340;
  font-weight:340;
  line-height:1.1;
  letter-spacing:-0.96px;
}
.subhead{
  font-size:clamp(20px,2.4vw,26px);
  font-variation-settings:"wght" 340;
  line-height:1.35;
  letter-spacing:-0.26px;
}
.body-lg{
  font-size:20px;
  font-variation-settings:"wght" 330;
  line-height:1.4;
  letter-spacing:-0.14px;
}
.caption{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:20px;
  font-variation-settings:"wght" 480;
  font-weight:480;
  line-height:1.4;
  letter-spacing:-0.10px;
  text-decoration:none;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:transform .12s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(0.98);}
.btn-primary{
  background:var(--primary);
  color:var(--on-primary);
  padding:10px 20px;
  border:none;
}
.btn-primary:hover{
  background:linear-gradient(105deg,#f24e1e,#a259ff,#1abcfe);
  color:#ffffff;
}
.btn-secondary{
  background:var(--canvas);
  color:var(--ink);
  padding:8px 18px 10px;
  border:1px solid var(--ink);
}
.btn-secondary:hover{
  border-color:transparent;
  background:linear-gradient(var(--canvas),var(--canvas)) padding-box,
             linear-gradient(105deg,#f24e1e,#a259ff,#1abcfe) border-box;
}

.top-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline-soft);
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:var(--sp-lg);
  min-height:56px;
}
.wordmark{
  font-size:20px;
  font-variation-settings:"wght" 540;
  font-weight:540;
  letter-spacing:-0.26px;
  text-decoration:none;
  margin-right:auto;
  white-space:nowrap;
}
.wordmark:hover{
  background:linear-gradient(90deg,#f24e1e,#a259ff,#1abcfe);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-xxs);
}
.nav-links a{
  display:inline-block;
  font-size:16px;
  font-variation-settings:"wght" 330;
  letter-spacing:-0.14px;
  text-decoration:none;
  padding:var(--sp-xs) var(--sp-sm);
  border-radius:var(--r-full);
}
.nav-links a:hover{
  background:linear-gradient(90deg,#f24e1e,#a259ff,#1abcfe);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.nav-cta{
  font-size:16px;
  padding:8px 18px;
}
.mobile-only{display:none;}
.nav-toggle{
  display:none;
  background:var(--surface-soft);
  border:none;
  border-radius:var(--r-full);
  width:44px;
  height:44px;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  border-radius:1px;
  transition:transform .15s ease,opacity .15s ease;
}
@media (max-width:960px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--canvas);
    border-bottom:1px solid var(--hairline);
    flex-direction:column;
    align-items:stretch;
    padding:var(--sp-lg);
    gap:var(--sp-xs);
  }
  .nav-links.open{display:flex;}
  .nav-links a{font-size:20px;padding:var(--sp-sm) var(--sp-md);}
  .mobile-only{display:block;margin-top:var(--sp-xs);}
  .mobile-only .btn{display:block;font-size:20px;}
  .top-nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .top-nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  .top-nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:560px){
  .nav-cta{display:none;}
}

.marquee{
  background:linear-gradient(90deg,#f24e1e,#a259ff,#1abcfe,#0acf83,#f24e1e);
  background-size:300% 100%;
  animation:gradient-drift 14s linear infinite;
  color:#ffffff;
  height:36px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.marquee-track{
  display:flex;
  flex-shrink:0;
  gap:0;
  animation:marquee 30s linear infinite;
  white-space:nowrap;
}
.marquee-track span{
  font-size:14px;
  font-variation-settings:"wght" 480;
  letter-spacing:-0.14px;
  padding:0 var(--sp-lg);
}
@keyframes gradient-drift{
  from{background-position:0% 50%;}
  to{background-position:300% 50%;}
}

.gradient-text{
  background:linear-gradient(90deg,#f24e1e,#a259ff,#1abcfe);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee:hover .marquee-track{animation-play-state:paused;}

section{scroll-margin-top:72px;}
.section{margin:var(--sp-section) 0;}
.hero{
  padding:var(--sp-section) 0;
}
@keyframes rise{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.hero .eyebrow,
.hero h1,
.hero .sub,
.hero-ctas{animation:rise .6s ease both;}
.hero h1{animation-delay:.08s;}
.hero .sub{animation-delay:.16s;}
.hero-ctas{animation-delay:.24s;}
.hero .eyebrow{margin-bottom:var(--sp-lg);}
.hero h1{margin-bottom:var(--sp-lg);max-width:14ch;}
.hero .sub{
  max-width:560px;
  margin-bottom:var(--sp-xl);
}
.hero-ctas{
  display:flex;
  gap:var(--sp-md);
  flex-wrap:wrap;
}
@media (max-width:560px){
  .hero-ctas .btn{flex:1 1 100%;}
}

.color-block{
  border-radius:var(--r-lg);
  padding:var(--sp-xxl);
}
@media (max-width:768px){
  .block-wrap{padding:0;}
  .color-block{border-radius:0;}
}
.block-navy{background:var(--block-navy);color:var(--inverse-ink);}
.block-cream{background:var(--block-cream);}
.block-lime{background:var(--block-lime);}

.section-head{margin-bottom:var(--sp-xl);}
.section-head .eyebrow{margin-bottom:var(--sp-sm);}

.about-copy{
  max-width:820px;
  display:grid;
  gap:var(--sp-lg);
}
.about-copy .interests{
  font-size:18px;
  font-variation-settings:"wght" 320;
  line-height:1.45;
  letter-spacing:-0.26px;
}
.block-navy .eyebrow,.block-navy .interests{opacity:1;}

.card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-xl);
  align-items:start;
}
@media (max-width:768px){
  .card-grid{grid-template-columns:1fr;}
}
.card{
  --tilt:0deg;
  border-radius:var(--r-lg);
  padding:var(--sp-xl);
  transform:rotate(var(--tilt));
  transition:transform .25s ease;
}
.card-mint{background:var(--block-mint);--tilt:-0.5deg;}
.card-lilac{background:var(--block-lilac);--tilt:0.5deg;}
.card:hover{transform:rotate(0deg) translateY(-4px);}
.card-title{
  font-size:24px;
  font-variation-settings:"wght" 700;
  font-weight:700;
  line-height:1.45;
  letter-spacing:0;
  margin-bottom:var(--sp-sm);
}
.card p{margin-bottom:var(--sp-lg);}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-xs);
  margin-bottom:var(--sp-lg);
}
.tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  background:var(--canvas);
  border-radius:var(--r-sm);
  padding:5px 10px;
}
.card-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-sm);
}
.card-link{
  display:inline-block;
  background:var(--canvas);
  color:var(--ink);
  font-size:18px;
  font-variation-settings:"wght" 480;
  font-weight:480;
  letter-spacing:-0.10px;
  line-height:1.4;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  padding:8px 18px 10px;
}
.card-link:hover{
  background:linear-gradient(var(--canvas),var(--canvas)) padding-box,
             linear-gradient(105deg,#f24e1e,#a259ff,#1abcfe) border-box;
}
.card-link:active{transform:scale(0.98);}

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--sp-lg);
}
@media (max-width:960px){
  .skills-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .skills-grid{grid-template-columns:1fr;}
}
.skill-group{
  background:var(--canvas);
  border-radius:var(--r-md);
  padding:var(--sp-lg);
}
.skill-group h3{
  font-family:var(--mono);
  font-size:13px;
  font-weight:400;
  letter-spacing:0.6px;
  text-transform:uppercase;
  margin-bottom:var(--sp-md);
  padding-bottom:var(--sp-sm);
  border-bottom:1px solid var(--hairline-soft);
}
.skill-group li{
  font-size:16px;
  font-variation-settings:"wght" 330;
  letter-spacing:-0.14px;
  line-height:1.45;
  padding:3px 0;
}

.exp-panel{
  display:grid;
  gap:var(--sp-lg);
}
.exp-row{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp-xl);
}
.exp-top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-xxs) var(--sp-md);
  margin-bottom:var(--sp-md);
}
.exp-role{
  font-size:24px;
  font-variation-settings:"wght" 700;
  font-weight:700;
  letter-spacing:0;
  line-height:1.45;
}
.exp-company{
  font-size:16px;
  font-variation-settings:"wght" 330;
  letter-spacing:-0.14px;
}
.exp-dates{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  margin-left:auto;
}
@media (max-width:560px){
  .exp-dates{margin-left:0;flex-basis:100%;}
}
.exp-row ul{
  display:grid;
  gap:var(--sp-xs);
}
.exp-row ul li{
  font-size:16px;
  font-variation-settings:"wght" 330;
  letter-spacing:-0.14px;
  line-height:1.45;
  padding-left:var(--sp-md);
  position:relative;
}
.exp-row ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:5px;
  height:5px;
  border-radius:var(--r-full);
  background:var(--ink);
}
.exp-company-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-xxs) var(--sp-md);
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid var(--hairline);
  margin-bottom:var(--sp-lg);
}
.exp-company-name{
  font-size:26px;
  font-variation-settings:"wght" 540;
  font-weight:540;
  letter-spacing:-0.26px;
  line-height:1.35;
}
.exp-company-meta{
  font-size:16px;
  font-variation-settings:"wght" 330;
  letter-spacing:-0.14px;
}
.exp-roles{
  display:grid;
  gap:var(--sp-lg);
}
.exp-sub{
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid var(--hairline-soft);
}
.exp-sub:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.exp-sub .exp-role{font-size:20px;}

.contact-block h2{margin-bottom:var(--sp-md);}
.contact-block .line{
  max-width:560px;
  margin-bottom:var(--sp-xl);
}
.contact-form{
  max-width:680px;
  display:grid;
  gap:var(--sp-md);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-md);
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr;}
}
.form-field{display:grid;gap:var(--sp-xs);}
.form-field label{
  font-size:16px;
  font-variation-settings:"wght" 480;
  font-weight:480;
  letter-spacing:-0.10px;
}
.form-field input,
.form-field textarea{
  font-family:var(--sans);
  font-size:18px;
  font-variation-settings:"wght" 320;
  letter-spacing:-0.26px;
  color:var(--ink);
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:12px 14px;
  min-height:48px;
  width:100%;
}
.form-field textarea{
  min-height:140px;
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:transparent;
  background:linear-gradient(var(--canvas),var(--canvas)) padding-box,
             linear-gradient(105deg,#f24e1e,#a259ff,#1abcfe) border-box;
  box-shadow:0 0 0 3px rgba(162,89,255,0.15);
}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-submit{margin-top:var(--sp-xs);}
.form-status{
  font-size:16px;
  font-variation-settings:"wght" 480;
  letter-spacing:-0.14px;
  min-height:1.4em;
}
.form-status.is-success{color:#1a7f37;}
.form-status.is-error{color:#c62828;}
@media (max-width:560px){
  .form-submit .btn{display:block;width:100%;}
}
.cta-actions{
  margin-top:var(--sp-xl);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-md) var(--sp-lg);
}
.contact-alt a:hover{
  background:linear-gradient(90deg,#f24e1e,#a259ff,#1abcfe);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.contact-alt{
  display:flex;
  gap:var(--sp-xs);
  align-items:baseline;
}
.contact-alt a{
  font-size:20px;
  font-variation-settings:"wght" 480;
  font-weight:480;
  letter-spacing:-0.10px;
  text-decoration:none;
}
.contact-alt .sep{font-variation-settings:"wght" 330;}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.card.reveal{transform:translateY(16px) rotate(var(--tilt));}
.card.reveal.in-view{transform:translateY(0) rotate(var(--tilt));}
.card.reveal.in-view:hover{transform:rotate(0deg) translateY(-4px);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee-track{animation:none;}
  .marquee{animation:none;}
  .hero .eyebrow,.hero h1,.hero .sub,.hero-ctas{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .card,.btn{transition:none;}
  .btn:hover{transform:none;}
  .card:hover{transform:rotate(var(--tilt));}
}

footer{
  background:var(--inverse-canvas);
  color:var(--inverse-ink);
  padding:var(--sp-section) 0 var(--sp-xxl);
  margin-top:var(--sp-section);
}
.footer-wordmark{
  font-size:clamp(38px,6vw,64px);
  font-variation-settings:"wght" 340;
  font-weight:340;
  line-height:1.1;
  letter-spacing:-0.96px;
  margin-bottom:var(--sp-xxl);
}
footer p:last-child{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
}