@font-face{font-family:"Chakra Petch";src:url("ChakraPetch-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("ChakraPetch-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --ground:#0E0F11;
  --plate:#F2F0EA;
  --edge:#6B665E;
  --signal:#F5871F;
  --signal-deep:#C86A14;
  --raised:#15171A;
  --hairline:#23262A;
  --muted:#938F88;
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--plate);
  font-family:var(--body);
  font-size:15.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
  line-height:1.12;
  margin:0;
}
p{margin:0}
a{color:inherit}

.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  font-weight:500;
  color:var(--signal);
  margin-bottom:1.4rem;
}

header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding:1.15rem 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .4s ease,border-color .4s ease,padding .4s ease;
}
header.stuck{
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
  padding:.72rem 0;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header img{height:25px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  text-decoration:none;
  color:var(--muted);
  transition:color .25s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--plate)}
.nav .cta{color:var(--signal)}
@media(max-width:680px){.nav a:not(.cta){display:none}}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to bottom,color-mix(in srgb,var(--ground) 86%,transparent) 0%,color-mix(in srgb,var(--ground) 30%,transparent) 14%,transparent 26%),
    linear-gradient(to top,var(--ground) 1%,color-mix(in srgb,var(--ground) 62%,transparent) 40%,color-mix(in srgb,var(--ground) 28%,transparent) 100%),
    linear-gradient(to right,color-mix(in srgb,var(--ground) 78%,transparent),transparent 60%);
}
.hero .wrap{position:relative;z-index:2;padding:0 0 clamp(3.5rem,9vh,6.5rem)}
.hero h1{
  font-size:clamp(2.5rem,7.2vw,5.4rem);
  max-width:16ch;
  margin-bottom:1.45rem;
}
.hero h1 .sig{color:var(--signal)}
.hero p{
  max-width:50ch;
  font-size:clamp(.95rem,1.55vw,1.08rem);
  color:#CBC8C1;
}
.rule{
  width:64px;height:2px;background:var(--signal);margin-bottom:1.9rem;
  animation:ruleDraw .9s cubic-bezier(.22,.61,.36,1) .25s both;
}

section{padding:clamp(5.5rem,15vh,10rem) 0}
.band{border-top:1px solid var(--hairline)}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,7vw,5.5rem);align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:1.6rem}}
.lede{font-size:clamp(1.4rem,3.3vw,2.15rem);max-width:19ch}
@media(max-width:860px){.lede{max-width:none}}
.prose{color:#C4C1BA;max-width:56ch;font-size:.97rem}
.statement .big{max-width:30ch}
.big{font-size:clamp(1.9rem,5.4vw,3.6rem);margin-bottom:1.6rem}
.statement .prose{max-width:52ch}
.expand{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:500;
  color:var(--signal-deep);
  margin-top:.95rem;
}
.film-lede{margin-bottom:2.6rem}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.5rem}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{
  background:var(--raised);
  border:1px solid var(--hairline);
  padding:1.85rem 1.6rem;
  position:relative;
  transition:border-color .4s ease,transform .4s ease;
}
.card:hover{border-color:var(--edge);transform:translateY(-4px)}
.card h3{font-size:1rem;margin-bottom:.8rem;letter-spacing:.14em}
.card p{color:var(--muted);font-size:.94rem}
.card .num{
  position:absolute;top:1.4rem;right:1.5rem;
  font-family:var(--display);font-size:.69rem;letter-spacing:.2em;
  color:var(--signal-deep);
}

.product{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.5rem}
@media(max-width:860px){.product{grid-template-columns:1fr}}
.unit{border-top:2px solid var(--signal);padding-top:1.35rem}
.unit h3{font-size:.98rem;letter-spacing:.16em;margin-bottom:.25rem}
.unit .tag{
  font-size:.68rem;letter-spacing:.14em;font-family:var(--display);
  text-transform:uppercase;color:var(--signal-deep);
  display:block;margin-bottom:.85rem;
}
.unit p{color:var(--muted);font-size:.94rem}

figure{margin:0}
.film{position:relative;border:1px solid var(--hairline);background:#000;aspect-ratio:16/9}
.film video{width:100%;height:100%;display:block;object-fit:cover}

.contact{text-align:center}
.contact .mail{
  display:inline-block;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.15rem,4.1vw,2.5rem);
  text-decoration:none;
  border-bottom:2px solid var(--signal);
  padding-bottom:.16em;
  transition:color .3s ease;
}
.contact .mail:hover,.contact .mail:focus-visible{color:var(--signal)}
.contact .where{margin-top:2.3rem;color:var(--muted);font-size:.82rem;letter-spacing:.04em}

footer{border-top:1px solid var(--hairline);padding:2.2rem 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer img{height:19px;opacity:.7}
footer p{
  color:var(--muted);font-size:.72rem;letter-spacing:.1em;
  font-family:var(--display);text-transform:uppercase;
}

html.js [data-rise]{
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
html.js [data-rise].in{opacity:1;transform:none}
html.js .grid3 [data-rise]:nth-child(2),.product [data-rise]:nth-child(2){transition-delay:.11s}
html.js .grid3 [data-rise]:nth-child(3),.product [data-rise]:nth-child(3){transition-delay:.22s}

@supports(animation-timeline:view()){
  .hero video{
    animation:heroZoom linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }
  .film{
    animation:filmGrow linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 45%;
  }
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes filmGrow{from{transform:scale(.88);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes ruleDraw{from{width:0;opacity:0}to{width:64px;opacity:1}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-rise]{opacity:1;transform:none;transition:none}
  .hero video,.film{animation:none}
  .rule{animation:none;width:64px;opacity:1}
  .card:hover{transform:none}
}

.subhead{
  position:relative;
  padding-top:calc(clamp(5.5rem,15vh,10rem) + 2.5rem);
  padding-bottom:clamp(3rem,8vh,5rem);
}
.subhead h1{font-size:clamp(2.1rem,6vw,4.2rem);margin-bottom:.9rem}
.subhead .kind{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.74rem;color:var(--signal-deep);margin-bottom:1.9rem;
}
.subhead .prose{font-size:1.05rem;max-width:50ch}
.shot{display:block;width:100%;height:auto;border:1px solid var(--hairline)}
.shot-wide{margin-top:clamp(2rem,5vh,3.4rem)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin-top:3.5rem;align-items:start}
@media(max-width:860px){.pair{grid-template-columns:1fr}}
.back{
  display:inline-block;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;
  color:var(--muted);text-decoration:none;margin-top:3rem;
  border-bottom:1px solid var(--hairline);padding-bottom:.35em;
  transition:color .25s ease,border-color .25s ease;
}
.back:hover,.back:focus-visible{color:var(--signal);border-bottom-color:var(--signal)}
.promo{display:block;position:relative;overflow:hidden;border:1px solid var(--hairline);text-decoration:none;color:var(--plate)}
.promo img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
a.promo:hover img,a.promo:focus-visible img{transform:scale(1.04)}
.promo-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.5rem,3.4vw,3rem);background:linear-gradient(to top,color-mix(in srgb,var(--ground) 94%,transparent) 10%,transparent)}
.promo-name{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.055em;line-height:1.08;font-size:clamp(1.9rem,5.2vw,3.6rem)}
.promo-kind{display:block;margin-top:.6rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--signal)}
.promo-note{margin-top:1.4rem;max-width:56ch}
.promo-next{margin-top:clamp(3rem,7vh,5rem)}
@media(prefers-reduced-motion:reduce){a.promo:hover img,a.promo:focus-visible img{transform:none}}