*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#001307;color:#fff;font-family:Inter,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
h1,p,ul,figure{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}

/* film grain from the Figma file, laid over the whole page once */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;background:url('assets/noise.webp') repeat;background-size:198px}

.case-nav{position:fixed;top:16px;left:16px;right:16px;z-index:60;display:flex;justify-content:space-between;pointer-events:none}
.case-nav a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:rgba(0,19,7,.55);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15px;font-weight:500;text-decoration:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,color .3s}
.case-nav a:hover{background:#fff;color:#001307}
.case-nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.progress{position:fixed;top:0;left:0;z-index:61;height:3px;width:0;background:#fff}

main,.thanks{max-width:1600px;margin:0 auto}

/* hero */
.hero{position:relative;aspect-ratio:1600/1014;background:#000 url('assets/hero.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-words{position:absolute;top:13.5%;left:50%;transform:translateX(-50%);list-style:none;text-align:center;font-size:clamp(14px,1.5vw,24px);line-height:.96}
h1,.thanks p{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;text-align:center;letter-spacing:.04em;line-height:.9;font-size:min(14.5vw,232px);text-shadow:0 2px 3px rgba(0,0,0,.25)}
h1 span{display:block}

/* labels and copy */
.label{font-size:clamp(15px,1.5vw,24px);line-height:1;display:flex;gap:12px}
.about{padding:72px 4.6% 16px;background:#030303}
.lead{margin-top:40px;max-width:640px;font-size:clamp(17px,1.5vw,24px);line-height:1.3}
.laptop{background:#030303}
.laptop img{width:100%}

.product{padding:52px 5% 0}
.site{margin-top:40px}
.site img{width:100%}

.illustrations{padding:80px 5.3% 0}
.illus-grid{margin-top:40px;display:grid;grid-template-columns:834fr 557fr;gap:clamp(12px,2.5vw,40px);align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(12px,2.5vw,40px)}
.col img{width:100%}
.caption{margin-top:40px;text-align:right;font-size:clamp(14px,1.5vw,24px);line-height:1.3}

/* thank you */
.thanks{margin-top:76px;aspect-ratio:1600/900;background:#000 url('assets/thanks.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center}

@media (max-width:1000px){
  .about{padding-top:56px}
  .lead{margin-top:28px;max-width:560px}
  .product{padding-top:40px}
  .site,.illus-grid{margin-top:28px}
  .illustrations{padding-top:64px}
  .caption{margin-top:24px}
  .thanks{margin-top:64px}
}

@media (max-width:600px){
  .case-nav{top:12px;left:12px;right:12px}
  .case-nav a{padding:9px 14px;font-size:14px}
  .hero{aspect-ratio:auto;min-height:max(78svh,520px);background-position:58% center}
  .hero-words{top:96px;font-size:15px}
  h1{font-size:18vw}
  .about,.product,.illustrations{padding-left:20px;padding-right:20px}
  .about{padding-top:48px}
  .lead{margin-top:20px;font-size:17px;line-height:1.4}
  .about{padding-bottom:24px}
  .laptop img{aspect-ratio:1/1;object-fit:cover;object-position:52% 50%}
  .product{padding-top:48px}
  .site{margin:20px -20px 0}
  .illustrations{padding-top:56px}
  .illus-grid{display:flex;flex-direction:column;gap:12px;margin-top:20px}
  .col{display:contents}
  .col--wide img:first-child{order:1}
  .col--narrow img:first-child{order:2}
  .col--wide img:last-child{order:3}
  .col--narrow img:last-child{order:4}
  .caption{text-align:left;margin-top:20px;font-size:14px}
  .thanks{margin-top:56px;aspect-ratio:auto;min-height:max(62svh,420px)}
  .thanks p{font-size:22vw}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Reveal on scroll (see script.js) */
.reveal:not(.is-in){opacity:0;translate:0 28px}