:root{
  color-scheme:dark;
  --bg:#0a0a0a;
  --green:#4ade80;
  --green-dim:rgba(74,222,128,.72);
  --green-faint:rgba(74,222,128,.15);
  --mono:'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-padding-top:110px}
body{background:var(--bg);color:var(--green);font-family:var(--mono);font-size:.9rem;line-height:1.85;letter-spacing:0}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.18;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green)}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:5px}
::selection{background:var(--green);color:var(--bg)}
.skip-link{position:absolute;left:24px;top:12px;padding:8px 14px;background:var(--bg);border:1px solid var(--green);z-index:20;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:10;background:rgba(10,10,10,.97);border-bottom:1px solid var(--green-faint)}
.header-inner,.case-study,.site-footer{width:min(100% - 96px,1120px);margin-inline:auto}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding-block:18px}
.brand{font-size:.85rem;white-space:nowrap}
.language-switch{display:flex;gap:6px;flex-shrink:0}
.language-switch button{background:transparent;border:1px solid rgba(74,222,128,.3);color:var(--green-dim);font-size:.66rem;min-width:34px;min-height:34px;padding:5px 7px;transition:color .2s,border-color .2s}
.language-switch button:hover,.language-switch button[aria-pressed="true"]{color:var(--green);border-color:var(--green)}
.project-hero{padding-top:88px;padding-bottom:64px;animation:arrive .5s ease-out both}
.eyebrow,.section-label,.section-number,.project-facts dt{font-size:.67rem;color:var(--green-dim);line-height:1.7;text-transform:uppercase}
.eyebrow{margin-bottom:28px}
h1{font-size:4.5rem;line-height:1.15;font-weight:400;max-width:100%;overflow-wrap:break-word}
.hero-subtitle{font-size:1.45rem;line-height:1.5;margin-top:24px;max-width:44rem}
.hero-description{max-width:650px;margin-top:22px;color:var(--green-dim)}
.explore-link{display:inline-flex;align-items:center;gap:24px;margin-top:32px;padding-bottom:7px;border-bottom:1px solid var(--green);font-size:.82rem}
.explore-link span:last-child{transition:transform .2s}
.explore-link:hover span:last-child{transform:translateY(3px)}
.project-facts{display:grid;grid-template-columns:1fr 1fr 2fr;gap:24px;border-top:1px solid var(--green-faint);margin-top:64px;padding-top:24px}
.project-facts div{min-width:0}
.project-facts dd{margin-top:8px;font-size:.8rem}
.case-section{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;padding-block:72px;border-top:1px solid var(--green-faint)}
.section-label{display:flex;align-items:baseline;gap:20px;padding-top:5px}
.section-number{font-variant-numeric:tabular-nums}
.section-body{min-width:0;max-width:720px}
h2{font-size:1.7rem;font-weight:400;line-height:1.45;margin-bottom:28px;text-wrap:balance}
.section-body>p{color:var(--green-dim)}
.section-body>p+p{margin-top:18px}
.section-body .boundary-note{font-size:.79rem;border-left:2px solid var(--green-faint);padding-left:18px;margin-top:30px}
.focus-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;list-style:none;margin-top:40px}
.focus-areas li{border-top:1px solid var(--green-faint);padding-block:24px;min-width:0}
.item-number{display:block;color:var(--green-dim);font-size:.65rem;margin-bottom:10px}
h3{font-size:.92rem;font-weight:400;line-height:1.6}
.focus-areas p{font-size:.8rem;color:var(--green-dim);margin-top:12px}
.technology-list{margin-top:32px}
.technology-list div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-block:17px;border-top:1px solid var(--green-faint);font-size:.8rem}
.technology-list dd{color:var(--green-dim)}
.role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;list-style:none;margin-top:28px;font-size:.81rem}
.role-list li{border-bottom:1px solid var(--green-faint);padding-block:8px}
.project-navigation{display:flex;align-items:baseline;gap:40px;padding-block:48px;border-top:1px solid var(--green-faint)}
.project-navigation a{display:flex;align-items:baseline;gap:16px;font-size:1.1rem;line-height:1.6}
.project-navigation a span:last-child{text-decoration:underline;text-decoration-color:var(--green-faint);text-underline-offset:7px}
.project-navigation a:hover span:last-child{text-decoration-color:var(--green)}
.site-footer{padding-block:32px 48px;color:var(--green-dim);font-size:.66rem}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){
  .header-inner,.case-study,.site-footer{width:calc(100% - 48px)}
  .project-hero{padding-top:64px;padding-bottom:48px}
  h1{font-size:3.25rem}
  .hero-subtitle{font-size:1.25rem}
  .case-section{grid-template-columns:1fr;gap:24px;padding-block:48px}
  .section-body{max-width:none}
  h2{font-size:1.45rem}
  .project-facts{grid-template-columns:1fr 1fr;margin-top:48px}
  .project-facts div:last-child{grid-column:1/-1}
}
@media(max-width:480px){
  html{scroll-padding-top:142px}
  .header-inner{align-items:flex-start;flex-direction:column;gap:12px;padding-block:16px}
  .project-hero{padding-top:48px}
  h1{font-size:2.5rem}
  .hero-subtitle{font-size:1.15rem}
  .focus-areas,.role-list{grid-template-columns:1fr}
  .technology-list div{grid-template-columns:1fr;gap:4px}
  .project-navigation{gap:20px}
  .project-navigation a{font-size:.95rem;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}