/* ============ MISHRACING shared styles ============ */
:root{
  --bg: #14161a;
  --bg-alt: #1b1e23;
  --line: #33373d;
  --ink: #ece8e0;
  --ink-dim: #92968f;
  --accent: #c79a3e;
  --accent-dim: #7a6329;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ---------- Nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 5vw;
  z-index:50;
  background:linear-gradient(to bottom, rgba(20,22,26,0.92), rgba(20,22,26,0.75));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(51,55,61,0.5);
}
nav .brand{
  font-family:'Oswald'; font-weight:700; font-size:1.1rem;
  letter-spacing:0.06em; text-decoration:none;
}
nav .brand span{color:var(--accent);}
nav ul{
  display:flex; gap:2.2rem; list-style:none; align-items:center;
}
nav ul a{
  font-size:0.78rem; text-decoration:none; color:var(--ink-dim);
  letter-spacing:0.1em; text-transform:uppercase;
  font-family:'IBM Plex Mono', monospace;
  transition:color 0.2s;
}
nav ul a:hover{color:var(--accent);}
nav ul a.active{color:var(--ink);}
nav ul a.cta{
  border:1px solid var(--accent-dim);
  padding:0.55rem 1.1rem;
  color:var(--accent);
}
nav ul a.cta:hover{border-color:var(--accent);}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  color:var(--ink); font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem; letter-spacing:0.1em;
  padding:0.5rem 0.9rem; cursor:pointer; text-transform:uppercase;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative;
  min-height:62vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem 5vw 4rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-hero .bgimg, .hero .bgimg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:contrast(1.06) saturate(1.1);
  opacity:0.8;
  z-index:0;
}
.page-hero::after, .hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 4%, rgba(20,22,26,0.25) 45%, rgba(20,22,26,0.6) 100%),
             linear-gradient(to right, rgba(20,22,26,0.55) 0%, rgba(20,22,26,0) 65%);
  z-index:1;
}
.hero h1, .page-hero h1{text-shadow:0 3px 40px rgba(0,0,0,0.55);}
.hero .lede, .page-hero .lede{color:#c8cbc4; text-shadow:0 1px 18px rgba(0,0,0,0.6);}
.page-hero > *, .hero > *{position:relative; z-index:2;}
.page-hero h1{
  font-size:clamp(2.4rem, 7vw, 5rem);
  line-height:0.95;
  max-width:16ch;
}
.page-hero h1 em, .hero h1 em{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
}
.page-hero .lede, .hero .lede{
  max-width:560px;
  margin-top:1.5rem;
  font-size:1.05rem;
  color:var(--ink-dim);
}
.page-hero .lede b, .hero .lede b{color:var(--ink); font-weight:500;}

.eyebrow{
  font-size:0.72rem;
  color:var(--accent);
  margin-bottom:1.2rem;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.eyebrow::before{content:"// "; color:var(--ink-dim);}

/* ---------- Home hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 5vw;
  overflow:hidden;
}
.hero h1{
  font-size:clamp(3rem, 10vw, 7.5rem);
  line-height:0.92;
}
.hero-ctas{display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.95rem 1.6rem;
  font-size:0.82rem;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--line);
  transition:border-color 0.25s, color 0.25s, background 0.25s;
}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn.primary{
  background:var(--accent); color:#14161a; border-color:var(--accent);
  font-weight:500;
}
.btn.primary:hover{background:#d8ab4f; color:#14161a;}
.scroll-cue{
  position:absolute; bottom:2.4rem; left:5vw;
  font-size:0.65rem; color:var(--ink-dim);
  display:flex; align-items:center; gap:0.6rem; z-index:2;
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;
}
.scroll-cue .bar{width:1px; height:28px; background:var(--line); position:relative; overflow:hidden;}
.scroll-cue .bar::after{content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent); animation:runbar 1.8s ease-in-out infinite;}
@keyframes runbar{ 50%{top:100%;} 100%{top:100%;} }

/* ---------- Hero footer strip ---------- */
.hero-foot{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem 5vw;
  border-top:1px solid rgba(51,55,61,0.55);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-dim);
  z-index:2;
}
.hero-foot .accent{color:var(--accent);}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:1.2rem 0;
  background:var(--bg);
}
.marquee .track{
  display:flex; gap:3rem; width:max-content;
  animation:marq 30s linear infinite;
}
.marquee span{
  font-family:'Oswald', sans-serif; font-weight:600;
  font-size:clamp(1.4rem, 3vw, 2.2rem);
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink); white-space:nowrap;
}
.marquee span.o{color:transparent; -webkit-text-stroke:1px var(--ink-dim);}
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Intro statement ---------- */
.intro-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:4rem; align-items:end;}
.intro-grid h2{
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.05; max-width:22ch;
}
.intro-grid h2 em{font-style:normal; color:var(--accent);}
.intro-grid p{color:var(--ink-dim); font-size:1.02rem;}
.intro-grid p b{color:var(--ink); font-weight:500;}

/* ---------- Ladder ---------- */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
.ladder .step .series{
  margin-top:0.8rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem; color:var(--accent);
  letter-spacing:0.08em; text-transform:uppercase;
  line-height:1.9;
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee .track{animation:none;}
}

/* ---------- Timing strip ---------- */
.strip{
  display:flex;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:0.7rem;
  color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.06em; text-transform:uppercase;
}
.strip span{flex:1; padding:0.6rem 1rem; border-right:1px solid var(--line);}
.strip span:last-child{border-right:none;}
.strip .accent{color:var(--accent);}

/* ---------- Sections ---------- */
section{
  padding:6.5rem 5vw;
  border-bottom:1px solid var(--line);
  position:relative;
}
section.alt{background:var(--bg-alt);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.2rem; gap:2rem; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.8rem, 4vw, 2.6rem);}
.section-head .num{font-size:0.7rem; color:var(--ink-dim); font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;}

/* Two-column prose layout */
.cols{display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:start;}
.cols p{color:var(--ink-dim); font-size:1rem; max-width:56ch;}
.cols p + p, .prose p + p{margin-top:1.2rem;}
.cols p b, .prose p b{color:var(--ink); font-weight:500;}
.prose p{color:var(--ink-dim); font-size:1rem; max-width:62ch;}

/* Stat blocks */
.stat-block{border-left:1px solid var(--accent-dim); padding-left:1.5rem;}
.stat-block .num{font-family:'Oswald'; font-size:2.4rem; color:var(--accent); line-height:1;}
.stat-block .label{font-size:0.78rem; color:var(--ink-dim); margin-top:0.4rem; max-width:30ch;}
.stat-block + .stat-block{margin-top:2.2rem;}

/* Pit board rows */
.pitboard{border-top:1px solid var(--line);}
.pit-row{
  display:grid;
  grid-template-columns:130px 0.9fr 1.1fr 230px;
  gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.pit-row .pimg{
  border:1px solid var(--line);
  overflow:hidden; aspect-ratio:16/10;
}
.pit-row .pimg img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.06) saturate(1.1);
  transition:transform 0.6s;
}
.pit-row:hover .pimg img{transform:scale(1.06);}
.pit-row .tag{font-size:0.7rem; color:var(--accent); font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;}
.pit-row h3{font-size:1.25rem;}
.pit-row .desc{color:var(--ink-dim); font-size:0.95rem; max-width:48ch;}

/* Card grid */
.card-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem;}
.card{
  border:1px solid var(--line);
  padding:2.2rem;
  background:rgba(27,30,35,0.6);
  transition:border-color 0.25s, transform 0.25s;
  display:flex; flex-direction:column; gap:0.9rem;
}
.card:hover{border-color:var(--accent-dim); transform:translateY(-3px);}
.card .k{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase;}
.card h3{font-size:1.3rem;}
.card p{color:var(--ink-dim); font-size:0.93rem;}
.card ul{list-style:none; margin-top:0.3rem;}
.card ul li{
  color:var(--ink-dim); font-size:0.88rem;
  padding:0.45rem 0; border-bottom:1px solid rgba(51,55,61,0.6);
  display:flex; gap:0.7rem;
}
.card ul li::before{content:"//"; color:var(--accent-dim); font-family:'IBM Plex Mono', monospace; font-size:0.75rem;}
.card ul li:last-child{border-bottom:none;}

/* Image + text split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;}
.split .imgwrap{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/3;
  background:var(--bg-alt);
}
.split .imgwrap{outline:1px solid var(--accent-dim); outline-offset:8px;}
.split .imgwrap img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(1.08);
  transition:transform 0.6s;
}
.split .imgwrap:hover img{transform:scale(1.03);}
.split .imgwrap .cap{
  position:absolute; bottom:0; left:0; right:0;
  padding:0.7rem 1rem;
  font-size:0.62rem; color:var(--ink-dim);
  background:linear-gradient(to top, rgba(20,22,26,0.9), transparent);
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;
}

/* Stacked direction panels */
.duo{display:flex; flex-direction:column; gap:1.4rem;}
.duo .imgwrap{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/9;
  outline:1px solid var(--accent-dim); outline-offset:8px;
}
.duo .imgwrap img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.06) saturate(1.1);
  transition:transform 0.6s;
}
.duo .imgwrap:hover img{transform:scale(1.04);}
.duo .cap{
  position:absolute; bottom:0; left:0; right:0;
  padding:0.7rem 1rem;
  font-size:0.62rem; color:var(--ink);
  background:linear-gradient(to top, rgba(20,22,26,0.92), transparent);
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;
}
.duo .cap b{color:var(--accent); font-weight:500;}

/* Full-bleed photo breaker */
.breaker{
  position:relative;
  min-height:48vh;
  display:flex; align-items:flex-end;
  padding:4rem 5vw 3rem;
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
@media (hover:hover) and (min-width:900px){
  .breaker{background-attachment:fixed;}
}
.breaker::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,22,26,0.75) 0%, rgba(20,22,26,0.1) 55%);
}
.breaker .inner{position:relative; z-index:2;}
.breaker h2{
  font-size:clamp(1.9rem, 5.5vw, 4rem);
  line-height:0.98; max-width:20ch;
  text-shadow:0 3px 40px rgba(0,0,0,0.6);
}
.breaker h2 em{font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--accent);}
.breaker .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.9rem;
}

/* Timeline */
.timeline{border-left:1px solid var(--line); margin-left:0.4rem;}
.tl-item{position:relative; padding:0 0 2.4rem 2.2rem;}
.tl-item:last-child{padding-bottom:0.4rem;}
.tl-item::before{
  content:""; position:absolute; left:-5px; top:0.45rem;
  width:9px; height:9px; background:var(--bg); border:1.5px solid var(--accent);
  transform:rotate(45deg);
}
.tl-item .when{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase;}
.tl-item h3{font-size:1.1rem; margin:0.35rem 0 0.3rem;}
.tl-item p{color:var(--ink-dim); font-size:0.92rem; max-width:52ch;}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step;}
.step{border-top:2px solid var(--line); padding-top:1.4rem; position:relative;}
.step:hover{border-top-color:var(--accent);}
.step .n{font-family:'Oswald'; font-size:2rem; color:var(--accent); line-height:1;}
.step h3{font-size:1.05rem; margin:0.6rem 0 0.4rem;}
.step p{color:var(--ink-dim); font-size:0.88rem;}

/* Checklist */
.checklist{list-style:none;}
.checklist li{
  display:flex; gap:1rem;
  padding:0.9rem 0;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
  align-items:baseline;
}
.checklist li .mark{font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--ink-dim); width:18px; flex:none;}
.checklist li.done .mark{color:var(--accent);}
.checklist li.done{color:var(--ink);}
.checklist li:not(.done){color:var(--ink-dim);}

/* CTA band */
.cta-band{
  padding:5.5rem 5vw;
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  gap:2.5rem; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--bg-alt), var(--bg));
}
.cta-band h2{font-size:clamp(1.7rem, 4vw, 2.6rem); max-width:22ch;}
.cta-band p{color:var(--ink-dim); max-width:46ch; margin-top:0.7rem;}

/* Founder card */
.founder-card{
  border:1px solid var(--line);
  padding:2rem 2.2rem;
  background:rgba(27,30,35,0.7);
  max-width:420px;
}
.founder-card .name{font-family:'Oswald'; font-size:1.4rem; text-transform:uppercase; letter-spacing:0.03em;}
.founder-card .role{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; margin-top:0.25rem;}
.founder-card .links{display:flex; gap:1rem; margin-top:1.2rem; flex-wrap:wrap;}
.founder-card .links a{
  font-size:0.72rem; color:var(--ink-dim); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase;
}
.founder-card .links a:hover{color:var(--accent); border-color:var(--accent);}

/* Contact */
.contact-links{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;}
.contact-links a{
  display:inline-flex; align-items:center; gap:0.6rem;
  border:1px solid var(--line);
  padding:0.95rem 1.5rem;
  font-size:0.85rem;
  text-decoration:none;
  transition:border-color 0.25s, color 0.25s;
}
.contact-links a:hover{border-color:var(--accent); color:var(--accent);}
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem;}

/* Footer */
footer{
  padding:4rem 5vw 2rem;
  border-top:1px solid var(--line);
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem;
}
.foot-grid .brand{font-family:'Oswald'; font-weight:700; font-size:1.2rem; letter-spacing:0.06em;}
.foot-grid .brand span{color:var(--accent);}
.foot-grid p{color:var(--ink-dim); font-size:0.85rem; max-width:38ch; margin-top:0.8rem;}
.foot-grid h4{font-size:0.8rem; letter-spacing:0.1em; color:var(--ink); margin-bottom:1rem;}
.foot-grid ul{list-style:none;}
.foot-grid ul li{padding:0.3rem 0;}
.foot-grid ul a{color:var(--ink-dim); text-decoration:none; font-size:0.85rem; transition:color 0.2s;}
.foot-grid ul a:hover{color:var(--accent);}
.foot-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:0.65rem; color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cols, .split, .contact-grid{grid-template-columns:1fr; gap:2.2rem;}
  .card-grid{grid-template-columns:1fr;}
  .intro-grid{grid-template-columns:1fr; gap:1.6rem; align-items:start;}
  .ladder{grid-template-columns:1fr 1fr; gap:1.2rem;}
  .breaker{min-height:38vh;}
  section{padding:4.5rem 6vw;}
  .section-head{margin-bottom:2.2rem;}
  .hero{padding-top:6.5rem; padding-bottom:7.5rem;}
  .hero-foot{
    flex-wrap:wrap; justify-content:center; text-align:center;
    gap:0.35rem 1.2rem; font-size:0.58rem; padding:0.9rem 4vw;
  }
  .pit-row .pimg{max-width:420px;}
  .duo .imgwrap{outline-offset:5px;}
  .split .imgwrap{outline-offset:5px;}
  .steps{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .pit-row{grid-template-columns:1fr; gap:0.6rem;}
  .strip span:nth-child(n+3){display:none;}
  nav ul{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:0.5rem 0;
  }
  nav ul.open{display:flex;}
  nav ul li{width:100%;}
  nav ul a{display:block; padding:0.9rem 5vw;}
  nav ul a.cta{border:none; padding:0.9rem 5vw;}
  .nav-toggle{display:block;}
}
@media (max-width:520px){
  .steps, .ladder{grid-template-columns:1fr;}
  .hero-foot span.accent{display:none;}
  .hero h1{font-size:clamp(2.6rem, 14vw, 4rem);}
  .page-hero h1{font-size:clamp(2rem, 11vw, 3rem);}
  .breaker h2{font-size:clamp(1.5rem, 8vw, 2.2rem);}
  .marquee span{font-size:1.2rem;}
  .card{padding:1.6rem;}
  .cta-band{padding:3.5rem 6vw;}
  footer{padding:3rem 6vw 1.6rem;}
}