:root{
  --void:#05070D;
  --panel:#0B101D;
  --line:#1B2334;
  --ink:#E9EBF3;
  --dim:#8A93A8;
  --amber:#FFA028;
  --teal:#3FD0DE;
  --violet:#A388FF;
  --disp:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--void)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2rem;background:linear-gradient(rgba(5,7,13,.85),rgba(5,7,13,0));backdrop-filter:blur(6px)}
.wordmark{font-family:var(--disp);font-weight:900;font-stretch:118%;letter-spacing:.14em;font-size:1.15rem;display:flex;align-items:center;gap:.7rem}
.logomark{height:42px;width:auto;display:block}
.wordmark span{color:var(--dim);font-weight:500;font-stretch:100%;letter-spacing:.28em;font-size:.62rem;display:block;margin-top:.15rem;text-transform:uppercase}
.navlinks{display:flex;gap:1.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.navlinks a{color:var(--dim);transition:color .25s}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--ink)}
.navlinks a:focus-visible{outline:1px solid var(--teal);outline-offset:4px}
@media(max-width:880px){.navlinks{display:none}}

/* ---------- hero triptych ---------- */
.hero{display:flex;height:100svh;min-height:560px}
.hpanel{position:relative;flex:1 1 0;overflow:hidden;transition:flex-grow .8s cubic-bezier(.22,.8,.24,1);display:flex}
.hpanel:hover,.hpanel:focus-within{flex-grow:2.2}
.hpanel img{position:absolute;inset:0;filter:brightness(.82)}
.hpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,.35) 0%,rgba(5,7,13,0) 35%,rgba(5,7,13,.78) 100%)}
.hmeta{position:relative;z-index:2;align-self:flex-end;padding:2.4rem 2rem;width:100%}
.hexp{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;margin-bottom:.5rem;display:inline-block;padding:.28rem .6rem;border:1px solid;border-radius:2px}
.hpanel h2{font-family:var(--disp);font-weight:850;font-stretch:120%;font-size:clamp(1.5rem,3.4vw,2.8rem);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.hsub{color:var(--dim);font-size:.88rem;margin-top:.45rem;max-width:24ch;opacity:0;transform:translateY(8px);transition:opacity .5s .15s,transform .5s .15s}
.hpanel:hover .hsub,.hpanel:focus-within .hsub{opacity:1;transform:none}
.hpanel[data-p="speed"] .hexp{color:var(--amber);border-color:var(--amber)}
.hpanel[data-p="serenity"] .hexp{color:var(--teal);border-color:var(--teal)}
.hpanel[data-p="stars"] .hexp{color:var(--violet);border-color:var(--violet)}
.hpanel+.hpanel{border-left:1px solid rgba(233,235,243,.12)}
@media(max-width:880px){
  .hero{flex-direction:column;height:auto;min-height:0}
  .hpanel{height:33svh;min-height:230px}
  .hpanel+.hpanel{border-left:0;border-top:1px solid rgba(233,235,243,.12)}
  .hsub{opacity:1;transform:none}
}

/* ---------- statement + exposure scale ---------- */
.statement{max-width:980px;margin:0 auto;padding:6.5rem 2rem 4.5rem;text-align:center}
.statement h1{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.18;letter-spacing:.005em}
.statement h1 em{font-style:normal;background:linear-gradient(90deg,var(--amber),var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.statement p{color:var(--dim);max-width:58ch;margin:1.4rem auto 0}
.scale{max-width:820px;margin:3.5rem auto 0}
.scale svg{width:100%;height:auto;display:block}

/* ---------- pillar sections ---------- */
.pillar{max-width:1200px;margin:0 auto;padding:5.5rem 2rem}
.phead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;margin-bottom:2.8rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.9rem}
.pillar h2{font-family:var(--disp);font-weight:850;font-stretch:120%;font-size:clamp(2.2rem,5vw,4rem);text-transform:uppercase;letter-spacing:.03em;line-height:.95}
.phead p{color:var(--dim)}
.plink{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;display:inline-block;margin-top:1.1rem;border-bottom:1px solid;padding-bottom:.2rem;transition:opacity .25s}
.plink:hover{opacity:.65}
.pgrid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:14px}
.fig{position:relative;overflow:hidden;border-radius:3px;background:var(--panel)}
.fig.banner{grid-column:1/-1;aspect-ratio:21/8}
.fig.land{aspect-ratio:3/2}
.fig.tall{aspect-ratio:auto}
.fig img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fig:hover img{transform:scale(1.035)}
.exif{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:rgba(233,235,243,.85);background:linear-gradient(0deg,rgba(5,7,13,.72),rgba(5,7,13,0));display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.exif b{font-weight:500;color:var(--ink)}
.ph{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);background:transparent;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--dim);text-align:center;line-height:2;padding:1.5rem}
#speed .eyebrow,#speed .plink{color:var(--amber)}
#serenity .eyebrow,#serenity .plink{color:var(--teal)}
#stars .eyebrow,#stars .plink{color:var(--violet)}
.rule{height:1px;max-width:1200px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--line),transparent);position:relative;overflow:hidden}
.rule::after{content:"";position:absolute;top:0;bottom:0;width:120px;background:linear-gradient(90deg,transparent,rgba(233,235,243,.8),transparent);animation:streak 7s linear infinite;opacity:.5}
@keyframes streak{from{left:-140px}to{left:100%}}
@media(max-width:880px){
  .phead{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .fig.banner{aspect-ratio:16/9}
  .fig.tall{aspect-ratio:3/4}
}

/* ---------- about ---------- */
.about{max-width:1200px;margin:0 auto;padding:6rem 2rem;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:3.5rem;align-items:center}
.about .fig{aspect-ratio:4/3;border-radius:3px}
.about h2{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;margin-bottom:1.2rem}
.about p{color:var(--dim);margin-bottom:1rem}
.about p b{color:var(--ink);font-weight:600}
.kit{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:.9rem 1.1rem;display:inline-block;margin-top:.6rem}
@media(max-width:880px){.about{grid-template-columns:1fr}}

/* ---------- contact / footer ---------- */
.contact{text-align:center;padding:6rem 2rem 4rem;background:radial-gradient(60% 120% at 50% 120%,rgba(63,208,222,.08),transparent 70%)}
.contact h2{font-family:var(--disp);font-weight:850;font-stretch:118%;font-size:clamp(1.9rem,4vw,3.2rem);text-transform:uppercase;letter-spacing:.03em}
.contact p{color:var(--dim);max-width:46ch;margin:1.1rem auto 2.2rem}
.btnrow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;padding:.9rem 1.7rem;border-radius:3px;border:1px solid var(--line);transition:border-color .25s,color .25s,background .25s}
.btn:hover,.btn:focus-visible{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--void);border-color:var(--ink)}
.btn.primary:hover{background:transparent;color:var(--ink)}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:2rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rule::after{animation:none;display:none}
  .fig img,.hpanel,.hsub{transition:none}
}