:root{
  /* core palette: purple, turquoise, orange */
  --purple:#5b21b6;
  --purple-deep:#2e1065;
  --purple-soft:#e7dcfa;
  --turquoise:#14b8a6;
  --turquoise-deep:#0f766e;
  --turquoise-light:#5eead4;
  --orange:#f97316;
  --orange-light:#fdba74;

  --cream:#faf7fd;
  --white:#fff;
  --ink:#2b2340;
  --muted:#6b6280;

  /* semantic aliases used across the stylesheet */
  --sand:var(--purple-soft);
  --coral:var(--orange);
  --green:var(--turquoise-deep);
  --deep:var(--purple-deep);
}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}a{color:inherit}.hero{min-height:92vh;position:relative;color:white;background:linear-gradient(to top,rgba(24,12,48,.72) 0%,rgba(24,12,48,.34) 34%,rgba(24,12,48,.06) 62%,rgba(24,12,48,0) 100%),linear-gradient(115deg,rgba(46,16,101,.34) 0%,rgba(91,33,182,.14) 45%,rgba(20,184,166,.10) 75%,rgba(249,115,22,.08) 100%),url('assets/hero.jpg') center/cover no-repeat;display:flex;flex-direction:column}.nav{display:flex;justify-content:space-between;align-items:center;padding:24px clamp(20px,5vw,72px);position:relative;z-index:2}.brand{font-weight:800;text-decoration:none;letter-spacing:.02em}.nav-links{display:flex;gap:22px;font-size:.95rem}.nav-links a{text-decoration:none;opacity:.9}.hero-content{max-width:900px;margin:auto 0;padding:72px clamp(22px,7vw,96px) 110px;position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800;color:var(--coral);margin:0 0 12px}.hero .eyebrow{color:var(--turquoise-light)}.hero h1{text-shadow:0 2px 30px rgba(12,6,26,.55);font-size:clamp(3.2rem,10vw,8rem);line-height:.88;margin:0 0 24px;letter-spacing:-.075em;max-width:900px}.lede{text-shadow:0 1px 18px rgba(12,6,26,.5);font-size:clamp(1.15rem,2.4vw,1.6rem);max-width:650px;color:#f3ecff}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.6);text-decoration:none;font-weight:800;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}.button.primary{background:var(--coral);border-color:var(--coral);color:white}.button.ghost{background:transparent}.section{padding:80px clamp(22px,7vw,96px)}.intro{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}.section h2{font-size:clamp(2rem,5vw,4.3rem);line-height:1;margin:0 0 18px;letter-spacing:-.045em;color:var(--deep)}.copy{font-size:1.15rem}.quote-band{background:var(--deep);color:var(--cream);padding:54px clamp(22px,7vw,96px);font-size:clamp(1.6rem,4vw,3.2rem);font-weight:900;line-height:1.08;letter-spacing:-.04em}.quote-band p{max-width:1100px;margin:0}.section-heading{max-width:850px;margin-bottom:30px}.card-grid{display:grid;gap:20px}.three{grid-template-columns:repeat(3,1fr)}.card{background:white;border:1px solid rgba(46,16,101,.09);border-radius:28px;padding:28px;box-shadow:0 18px 50px rgba(46,16,101,.08)}.card h3{margin-top:0;font-size:1.4rem;color:var(--green)}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:#f7f2fd}.split img{width:100%;border-radius:34px;box-shadow:0 28px 80px rgba(46,16,101,.22)}.split li{margin:8px 0}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery img{width:100%;height:300px;object-fit:cover;border-radius:24px;box-shadow:0 12px 32px rgba(46,16,101,.12)}.gallery img:first-child{grid-column:span 2;grid-row:span 2;height:614px}.sponsor{display:grid;grid-template-columns:1fr 1fr;gap:44px;background:var(--sand)}.sponsor-boxes{display:grid;gap:16px;align-content:center}.sponsor-boxes div{background:rgba(255,255,255,.68);border:1px solid rgba(46,16,101,.1);padding:24px;border-radius:24px;font-weight:900;color:var(--green)}.partner{background:linear-gradient(135deg,var(--turquoise-deep) 0%,var(--purple) 55%,var(--purple-deep) 100%);color:white}.partner-card{max-width:980px;margin:0 auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:36px;padding:clamp(28px,6vw,64px);box-shadow:0 28px 80px rgba(0,0,0,.18)}.partner h2{color:white}.partner p{color:#ece5f8}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0}.mini-grid span{background:rgba(255,255,255,.12);border-radius:18px;padding:16px;font-weight:800;text-align:center}footer{padding:36px clamp(22px,7vw,96px);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;background:var(--deep);color:var(--cream)}@media(max-width:850px){.nav{align-items:flex-start}.nav-links{display:none}.intro,.split,.sponsor{grid-template-columns:1fr}.three{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery img,.gallery img:first-child{grid-column:auto;grid-row:auto;height:240px}.mini-grid{grid-template-columns:1fr 1fr}.hero{min-height:86vh}.hero-content{padding-top:120px}}@media(max-width:520px){.gallery{grid-template-columns:1fr}.gallery img,.gallery img:first-child{height:330px}.mini-grid{grid-template-columns:1fr}.button{width:100%}footer{display:block}footer>*{display:block;margin:8px 0}}

/* ============================================================
   sierradegroff.com — ADDITIONS
   Append this to the END of site/styles.css. Nothing existing
   is overwritten; every selector below is new except the two
   noted overrides at the bottom.
   Palette: --purple #5b21b6  --purple-deep #2e1065  --turquoise #14b8a6
                   --orange #f97316   --cream #faf7fd
   ============================================================ */

/* ---------- hero stat bar ---------- */
.stat-bar{
  display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,44px);
  list-style:none;padding:0;margin:34px 0 0;
}
.stat-bar li{display:flex;flex-direction:column}
.stat-bar strong{text-shadow:0 2px 16px rgba(12,6,26,.55);
  font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1;
  letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums;
}
.stat-bar span{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--turquoise-light);margin-top:8px;
}

/* ---------- personal bests ---------- */
.pb-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 20px;
}
.pb{
  background:#fff;border:1px solid rgba(46,16,101,.09);border-radius:28px;
  padding:26px 20px;text-align:center;box-shadow:0 18px 50px rgba(46,16,101,.08);
}
.pb strong{
  display:block;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.05;
  letter-spacing:-.035em;color:var(--deep);font-variant-numeric:tabular-nums;
}
.pb span{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--green);margin-top:10px;
}
.pb em{
  display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:8px;
}

/* ---------- results tables ---------- */
.rz-head{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--coral);margin:52px 0 10px;
}
.results{width:100%;border-collapse:collapse}
.results td{
  padding:15px 12px;border-bottom:1px solid rgba(46,16,101,.1);font-size:1rem;
}
.results tr:hover td{background:rgba(255,255,255,.55)}
.results .yr{width:64px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700}
.results .ev{font-weight:800;color:var(--deep)}
.results .pl{color:var(--muted)}
.results .pl.win{color:var(--green);font-weight:700}
.results .pl.win b{color:var(--coral)}
.results .tm{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--deep);font-weight:700;
}
.results-foot{font-size:.92rem;color:var(--muted);margin-top:22px}
.results-foot a{font-weight:700;color:var(--green)}

/* ---------- race chapters (Instagram highlights) ---------- */
.chapters-section{background:#f7f2fd}
.chapters{
  display:flex;gap:clamp(16px,2.4vw,28px);overflow-x:auto;
  padding:10px 4px 24px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.chapters::-webkit-scrollbar{height:6px}
.chapters::-webkit-scrollbar-thumb{background:rgba(46,16,101,.18);border-radius:99px}
.chapter{
  flex:0 0 auto;width:112px;text-align:center;text-decoration:none;
  color:var(--ink);scroll-snap-align:start;
}
.chapter img{
  width:104px;height:104px;border-radius:50%;object-fit:cover;padding:3px;
  background:
    linear-gradient(#f7f2fd,#f7f2fd) padding-box,
    linear-gradient(45deg,var(--purple),var(--turquoise),var(--orange)) border-box;
  border:3px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease;
}
.chapter:hover img,.chapter:focus-visible img{
  transform:scale(1.06);box-shadow:0 14px 34px rgba(46,16,101,.22);
}
.chapter span{display:block;font-size:.82rem;font-weight:700;margin-top:11px;line-height:1.3}
.chapter em{
  display:block;font-style:normal;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:800;color:var(--coral);margin-top:4px;
}

/* ---------- live instagram feed ---------- */
.ig-section{background:var(--deep);color:var(--cream)}
.ig-section h2{color:var(--cream)}
.ig-section .eyebrow{color:var(--orange)}
.ig-handle{text-decoration:none;font-weight:800;color:var(--orange)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}  /* 3 cols = 6 posts in 2 clean rows */
.ig-tile{
  position:relative;display:block;overflow:hidden;border-radius:24px;
  aspect-ratio:1/1;text-decoration:none;background:rgba(255,255,255,.06);
}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ig-tile:hover img{transform:scale(1.06)}
.ig-badge{
  position:absolute;top:12px;right:12px;background:rgba(46,16,101,.72);color:#fff;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px);
}
.ig-cap{
  position:absolute;inset:auto 0 0 0;padding:44px 14px 14px;color:#fff;
  font-size:.78rem;line-height:1.38;
  background:linear-gradient(transparent,rgba(46,16,101,.88));
  opacity:0;transition:opacity .25s ease;
}
.ig-tile:hover .ig-cap,.ig-tile:focus-visible .ig-cap{opacity:1}
.ig-foot{margin-top:30px}
.button.dark{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:var(--cream)}

/* ---------- media & features list ---------- */
.media-list{list-style:none;padding:0;margin:26px 0 0}
.media-list li{padding:14px 0;border-bottom:1px solid rgba(46,16,101,.12)}
.media-list strong{display:block;font-size:1.02rem;color:var(--deep)}
.media-list span{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
.press-cta{margin-top:24px;font-weight:800}
.press-cta a{color:var(--green);text-decoration:none}

/* ---------- media kit stats ---------- */
.kit-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 4px;
}
.kit-stats div{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:20px 14px;text-align:center;
}
.kit-stats strong{display:block;font-size:1.6rem;line-height:1;letter-spacing:-.03em}
.kit-stats span{
  display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:#ece5f8;opacity:.8;margin-top:8px;
}

/* ---------- footer social links ---------- */
.foot-links{display:flex;gap:16px}
.foot-links a{text-decoration:none;font-weight:700;opacity:.85}
.foot-links a:hover{opacity:1;color:var(--orange)}

/* ---------- OVERRIDES of two existing rules ---------- */
/* sponsor boxes are now <a> instead of <div> */
.sponsor-boxes a{
  background:rgba(255,255,255,.68);border:1px solid rgba(46,16,101,.1);
  padding:24px;border-radius:24px;font-weight:900;color:var(--green);
  text-decoration:none;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .18s ease;
}
.sponsor-boxes a:hover{background:#fff;transform:translateY(-2px)}
/* partner mini-grid grew from 4 to 8 items */
.mini-grid{grid-template-columns:repeat(4,1fr)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .pb-grid,.kit-stats,.ig-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .stat-bar{gap:20px}
  .stat-bar li{flex:0 0 calc(50% - 10px)}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .results td{display:block;padding:4px 0;border:0}
  .results tr{display:block;padding:16px 0;border-bottom:1px solid rgba(46,16,101,.1)}
  .results tr:hover td{background:none}
  .results .yr{width:auto}
  .results .tm{text-align:left;margin-top:2px}
  .chapter{width:94px}
  .chapter img{width:88px;height:88px}
}
@media(max-width:520px){
  .pb-grid,.kit-stats,.ig-grid{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
  .foot-links{flex-wrap:wrap}
}

/* ---------- contact / inquiry form ---------- */
.contact-section{background:var(--sand)}
.inquiry-form{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;
  background:rgba(255,255,255,.72);border:1px solid rgba(46,16,101,.1);
  border-radius:32px;padding:clamp(24px,4vw,40px);
  box-shadow:0 18px 50px rgba(46,16,101,.08);
}
.inquiry-form .field{display:flex;flex-direction:column;gap:7px}
.inquiry-form .full{grid-column:1 / -1}
.inquiry-form label{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--green);
}
.inquiry-form label span{color:var(--coral)}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid rgba(46,16,101,.18);border-radius:16px;
  padding:13px 15px;width:100%;transition:border-color .16s ease,box-shadow .16s ease;
}
.inquiry-form textarea{resize:vertical;min-height:130px}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{
  outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(249,115,22,.18);
}
.inquiry-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.inquiry-form .button{border-color:var(--coral);cursor:pointer}
.inquiry-form .button[disabled]{opacity:.6;cursor:not-allowed}
.form-status{margin:0;font-size:.92rem;font-weight:700;color:var(--muted)}
.form-status.ok{color:var(--green)}
.form-status.err{color:#c2410c}
@media(max-width:700px){
  .inquiry-form{grid-template-columns:1fr}
}


/* ---------- resume section on a photo background ---------- */
.resume-photo{
  position:relative;
  background:
    linear-gradient(180deg, rgba(22,10,45,.42) 0%, rgba(30,14,60,.66) 22%, rgba(38,18,76,.78) 55%, rgba(15,118,110,.70) 100%),
    url('assets/resume-bg.jpg') center 30% / cover no-repeat;
  color:var(--cream);
}
.resume-photo h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.resume-photo .eyebrow{color:var(--orange)}
.resume-photo .rz-head{color:var(--orange)}

/* PB cards become glass instead of solid white */
.resume-photo .pb{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.resume-photo .pb strong{color:#fff}
.resume-photo .pb span{color:var(--orange)}
.resume-photo .pb em{color:rgba(243,236,255,.62)}

/* results tables inverted for a dark backdrop */
.resume-photo .results td{border-bottom-color:rgba(255,255,255,.16)}
.resume-photo .results tr:hover td{background:rgba(255,255,255,.06)}
.resume-photo .results .yr{color:rgba(243,236,255,.55)}
.resume-photo .results .ev{color:#fff}
.resume-photo .results .pl{color:rgba(243,236,255,.78)}
.resume-photo .results .pl.win{color:var(--turquoise-light)}
.resume-photo .results .pl.win b{color:var(--orange)}
.resume-photo .results .tm{color:#fff}
.resume-photo .results-foot{color:rgba(243,236,255,.7)}
.resume-photo .results-foot a{color:var(--orange)}

@media(max-width:850px){
  .resume-photo{background-attachment:scroll;background-position:center}
}


/* ---------- media & features: three linked columns ---------- */
.media-section{background:#f7f2fd}
.media-cols{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,3vw,48px);
  align-items:start;
}
.media-col .rz-head{margin-top:0;color:var(--coral)}
.media-col .media-list{margin:0}
.media-list li{padding:0;border-bottom:1px solid rgba(46,16,101,.1)}
.media-list li a{
  display:block;padding:14px 0;text-decoration:none;color:inherit;
  transition:padding-left .16s ease;
}
.media-list li a:hover{padding-left:8px}
.media-list li a strong{
  display:block;font-size:1rem;color:var(--deep);line-height:1.35;
}
.media-list li a:hover strong{color:var(--green)}
.media-list li a span{display:block;font-size:.86rem;color:var(--muted);margin-top:4px}
.media-list li a strong::after{
  content:' \2197';font-size:.82em;color:var(--coral);opacity:0;transition:opacity .16s ease;
}
.media-list li a:hover strong::after{opacity:1}
@media(max-width:900px){
  .media-cols{grid-template-columns:1fr}
  .media-col .rz-head{margin-top:28px}
}


/* ---------- featured film card ---------- */
.film-feature{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,44px);
  align-items:center;text-decoration:none;color:var(--cream);
  background:linear-gradient(135deg,var(--deep),#4c1d95);
  border:1px solid rgba(255,255,255,.14);border-radius:36px;
  padding:clamp(18px,2.4vw,28px);margin-bottom:clamp(36px,5vw,64px);
  box-shadow:0 28px 80px rgba(46,16,101,.26);
  transition:transform .2s ease,box-shadow .2s ease;
}
.film-feature:hover{transform:translateY(-3px);box-shadow:0 36px 96px rgba(46,16,101,.34)}

.film-thumb{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9}
.film-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.film-feature:hover .film-thumb img{transform:scale(1.04)}
.film-play{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:rgba(249,115,22,.94);box-shadow:0 10px 34px rgba(0,0,0,.42);
}
.film-play::after{
  content:'';position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;
  transform:translateX(4px);
}
.film-feature:hover .film-play{background:var(--coral);transform:scale(1.06);transition:transform .2s ease}

.film-flag{
  display:inline-block;margin:0 0 12px;padding:5px 13px;border-radius:999px;
  background:var(--coral);color:#fff;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:900;
}
.film-copy h3{
  margin:0 0 12px;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.08;
  letter-spacing:-.035em;color:#fff;
}
.film-desc{margin:0;color:#ede7f7;font-size:.98rem}
.film-meta{
  display:flex;gap:26px;list-style:none;padding:0;margin:22px 0 20px;flex-wrap:wrap;
}
.film-meta strong{display:block;font-size:1.15rem;color:#fff;line-height:1.1}
.film-meta span{
  display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin-top:5px;font-weight:800;
}
.film-cta{font-weight:900;color:var(--orange)}
.film-feature:hover .film-cta{color:#fff}

@media(max-width:900px){
  .film-feature{grid-template-columns:1fr;padding:16px}
  .film-play{width:58px;height:58px}
  .film-play::after{border-left-width:19px;border-top-width:12px;border-bottom-width:12px}
}

/* ============================================================
   MOBILE / iOS PASS
   ============================================================ */

/* iOS inflates text in landscape without this */
html{-webkit-text-size-adjust:100%}

/* Nav was display:none under 850px with no replacement, so phones had
   no navigation at all. A later pass restored it as a horizontal
   scrolling chip row, but that hides overflow items with no visual
   cue that there's more to scroll to. Replaced with a standard
   hamburger disclosure: a 44px toggle button drives the panel purely
   off its own aria-expanded attribute, so open/closed state lives in
   one place instead of a class the JS has to keep in sync. */
.nav-toggle{display:none}
@media(max-width:850px){
  .nav{align-items:center;justify-content:space-between;padding:16px 20px;z-index:5}
  .brand{min-height:44px;display:flex;align-items:center}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;padding:0;margin:0;flex:0 0 auto;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
    border-radius:999px;backdrop-filter:blur(8px);cursor:pointer;
  }
  .nav-toggle-bar{
    display:block;width:18px;height:2px;border-radius:2px;background:#fff;
    transition:transform .2s ease,opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-links{
    display:none;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + 10px);left:20px;right:20px;
    background:rgba(24,12,48,.94);border:1px solid rgba(255,255,255,.16);
    border-radius:20px;padding:10px;backdrop-filter:blur(14px);
    box-shadow:0 24px 60px rgba(0,0,0,.4);
    max-height:calc(100vh - 110px);overflow-y:auto;
  }
  .nav-toggle[aria-expanded="true"] ~ .nav-links{display:flex}
  .nav-links a{
    background:transparent;border:0;backdrop-filter:none;
    padding:13px 16px;min-height:44px;display:flex;align-items:center;
    border-radius:12px;font-size:1rem;font-weight:700;
    white-space:normal;opacity:1;
  }
  .nav-links a:hover,.nav-links a:focus-visible{background:rgba(255,255,255,.12)}
}

@media(max-width:700px){
  /* hero was 726px tall before any content, with a 120px top pad */
  .hero{min-height:auto}
  .hero-content{padding:28px 22px 56px}
  .hero h1{font-size:clamp(2.1rem,10.5vw,2.9rem);letter-spacing:-.04em;line-height:.97}
  .lede{font-size:1.02rem}
  .stat-bar{gap:16px 20px;margin-top:24px}
  .stat-bar strong{font-size:1.3rem}
  .actions{gap:10px}

  /* 80px top and bottom on every section added ~1,400px of dead space */
  .section{padding:52px 22px}
  .section h2{font-size:clamp(1.75rem,7vw,2.3rem)}

  /* single-column grids made the page 18,000px long */
  .pb-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pb{padding:18px 12px}
  .pb strong{font-size:1.2rem}
  .kit-stats{grid-template-columns:1fr 1fr;gap:12px}
  .mini-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mini-grid span{padding:12px 10px;font-size:.82rem}

  /* tap targets: these were 20-26px tall */
  footer{gap:4px}
  .foot-links{gap:6px;flex-wrap:wrap}
  .foot-links a,
  footer > a,
  .results-foot a,
  .press-cta a,
  .ig-handle{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

  /* captions only appeared on hover, which never fires on touch */
  .ig-cap{opacity:1;padding:28px 10px 10px;font-size:.7rem}
  .media-list li a{padding:15px 0;min-height:44px}
}

@media(max-width:520px){
  /* one image per row at 330px tall = a very long scroll */
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .gallery img,
  .gallery img:first-child{height:168px;grid-column:auto;grid-row:auto;border-radius:16px}
  .ig-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ig-tile{border-radius:16px}
  .button{width:100%;min-height:48px}
  .chapter{width:84px}
  .chapter img{width:78px;height:78px}
  .film-feature{border-radius:24px}
  .film-copy h3{font-size:1.25rem}
  .film-meta{gap:18px;margin:16px 0 14px}
  .inquiry-form{border-radius:24px;padding:20px}
  .quote-band{padding:40px 22px}
}

/* ============================================================
   RESULTS / MEDIA DRAWERS
   Racing Resume (17 result rows) and Media & Features (13 list
   items) were long, un-collapsible scroll blocks on phones. Wrapped
   each table/list in a native <details> so it's collapsed by default
   and expands on tap, with no JS required. Above the 700px cutoff
   used elsewhere on this page to control mobile scroll length, the
   UA's native collapse rule is overridden so desktop/tablet always
   sees everything expanded, exactly as before this change.
   ============================================================ */
summary.rz-head{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
summary.rz-head::-webkit-details-marker{display:none}
summary.rz-head::after{
  content:'';flex:0 0 auto;width:9px;height:9px;margin-right:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary.rz-head::after{transform:rotate(-135deg)}
summary.rz-head:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:4px}

.media-drawer .media-list{margin-top:16px}

@media(min-width:701px){
  .results-drawer:not([open]) .results{display:table}
  .media-drawer:not([open]) .media-list{display:block}
  .results-drawer summary.rz-head,
  .media-drawer summary.rz-head{cursor:default;pointer-events:none}
  .results-drawer summary.rz-head::after,
  .media-drawer summary.rz-head::after{display:none}
}

@media(max-width:700px){
  summary.rz-head{padding:14px 0;min-height:44px}
}