/* RUNROO Racing Services, inner pages.
   Loads AFTER styles.css. Tokens, buttons, nav, footer, cards and the
   chat bubble all come from styles.css. Nothing here redefines a token. */

/* ---------- page shell ---------- */
.page-body{background:var(--black);}
.page-main{display:block;}
.section-pad{padding:clamp(64px,9vw,120px) 0;}
.section-pad-sm{padding:clamp(48px,6vw,80px) 0;}
.section-rule{border-top:1px solid var(--rule);}
.lede{max-width:60ch;font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 28px;}
.section-head{max-width:62ch;margin:0 0 44px;}
.section-head .display-h2{margin-bottom:16px;}
.section-head .sub{max-width:60ch;margin-bottom:0;}
.h3{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:22px;letter-spacing:-.01em;margin:0 0 12px;}
.h4{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:16px;letter-spacing:.02em;margin:0 0 10px;}
.body-copy{color:rgba(255,255,255,.78);line-height:1.6;margin:0 0 16px;}
.muted-note{color:var(--muted);font-size:14px;line-height:1.6;}

/* the fixed nav sits over everything, so the page starts below it */
.page-top-pad{padding-top:104px;}

/* ---------- page hero ---------- */
.page-hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:#000;}
.page-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.page-hero-media img,.page-hero-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroSettle 2.4s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes heroSettle{to{transform:scale(1);}}
.page-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.82), rgba(0,0,0,.42) 58%, rgba(0,0,0,.6)),
             linear-gradient(to bottom, rgba(0,0,0,.7), transparent 32%, transparent 52%, rgba(0,0,0,.92));
}
.page-hero-inner{position:relative;z-index:2;width:100%;padding:160px 0 clamp(48px,7vw,88px);}
.page-hero-copy{max-width:min(780px,92%);text-shadow:0 2px 26px rgba(0,0,0,.6);}
.page-hero-copy .display-h1{font-size:clamp(38px,min(6.4vw,10vh),96px);}
.page-hero-copy .sub{max-width:52ch;color:rgba(255,255,255,.84);font-size:17px;}
.page-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;}
.meta-chip{
  display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--rule);
  background:rgba(0,0,0,.42);backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);
}

/* breadcrumb */
.crumbs{position:relative;z-index:2;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 0 14px;}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:11px 0;}
.crumbs a:hover{color:var(--gold);}
.crumbs span{color:rgba(255,255,255,.32);margin:0 8px;}

/* ---------- generic grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-tight{gap:16px;}

/* navy card, same language as .event-card */
.tile{
  position:relative;padding:28px;border-radius:12px;background:var(--navy);border:1px solid var(--rule);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.tile:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 18px 40px rgba(0,0,0,.4),0 0 30px rgba(212,167,44,.14);}
.tile p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}
.tile-num{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--gold);margin:0 0 12px;}
.tile-icon{width:26px;height:26px;color:var(--gold);margin-bottom:16px;}
.tile-photo{height:180px;border-radius:12px 12px 0 0;background-size:cover;background-position:center;margin:-28px -28px 22px;position:relative;}
.tile-photo::after{content:'';position:absolute;inset:0;border-radius:12px 12px 0 0;background:linear-gradient(180deg, rgba(16,26,51,.05), rgba(16,26,51,.68));}

/* bullet list, matching .road-stop ul */
.mark-list li{position:relative;padding-left:18px;margin-bottom:10px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.8);}
.mark-list li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--gold);}

/* ---------- alternating image + copy band ---------- */
.band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:clamp(56px,7vw,104px);}
.band:last-child{margin-bottom:0;}
.band-media{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 30px 70px rgba(0,0,0,.5);aspect-ratio:4/3;}
.band-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease;}
.band:hover .band-media img{transform:scale(1.04);}
.band-media::after{content:'';position:absolute;inset:0;background:linear-gradient(170deg, rgba(6,96,174,.18), rgba(16,26,51,.5));pointer-events:none;}
.band-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid var(--rule);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);
}
.band-copy .display-h2{font-size:clamp(28px,3.2vw,46px);margin-bottom:16px;}
.band-copy .sub{max-width:48ch;margin-bottom:20px;}
.band.is-flipped .band-media{order:2;}
.band.is-flipped .band-copy{order:1;}

/* ---------- numbered timeline ---------- */
.timeline{position:relative;margin:0;padding-left:34px;}
.timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom, var(--gold), rgba(212,167,44,.15));}
.timeline li{position:relative;padding:0 0 30px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:'';position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--black);border:2px solid var(--gold);box-shadow:0 0 14px rgba(212,167,44,.5);
}
.timeline-time{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px;}
.timeline h3{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:18px;margin:0 0 6px;}
.timeline p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:56ch;}

/* ---------- photo strip ---------- */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.photo-strip figure{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:4/3;}
.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease,filter .5s ease;filter:saturate(.86);}
.photo-strip figure:hover img{transform:scale(1.06);filter:saturate(1);}
.photo-strip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-size:12px;color:rgba(255,255,255,.86);
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.photo-grid figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:1/1;}
.photo-grid figure:nth-child(1){grid-column:span 2;aspect-ratio:2/1;}
.photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease;}
.photo-grid figure:hover img{transform:scale(1.05);}

/* ---------- event cards, richer than the homepage row ---------- */
.event-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.event-full{
  display:flex;flex-direction:column;border-radius:12px;overflow:hidden;
  background:var(--navy);border:1px solid var(--rule);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.event-full:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(212,167,44,.14);}
.event-full-img{height:210px;background-size:cover;background-position:center;position:relative;}
.event-full-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(16,26,51,.08), rgba(16,26,51,.72));}
.event-badge{
  position:absolute;left:16px;top:16px;z-index:2;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.6);border:1px solid rgba(212,167,44,.5);backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold);
}
.event-full-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;}
.event-full .event-date{font-size:26px;margin-bottom:8px;}
.event-full h3{font-family:var(--font-display);word-spacing:.12em;font-weight:600;font-size:22px;text-transform:uppercase;margin:0 0 8px;}
.event-facts{margin:14px 0 20px;border-top:1px solid var(--rule);}
.event-facts div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13px;}
.event-facts dt{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700;}
.event-facts dd{margin:0;text-align:right;color:rgba(255,255,255,.88);}
.event-full .btn-row{margin-top:auto;}

/* ---------- results lookup ---------- */
.lookup{
  padding:28px 30px;border-radius:12px;background:var(--navy);border:1px solid var(--rule);
}
.lookup-form{display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;align-items:end;}
.lookup-form .field select{
  background:var(--navy);border:1px solid var(--rule);border-radius:8px;color:var(--white);
  font-family:var(--font-body);font-size:16px;padding:12px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.lookup-form .field select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.lookup-form .field-submit .btn{height:46px;}
/* A select's intrinsic width follows its longest option, and a grid item
   defaults to min-width:auto, so a long race name pushes the form wider
   than the phone. */
.lookup-form .field,.stack-form .field,.newsletter-form .field,.field{min-width:0;}
.field select,.field input,.field textarea{width:100%;max-width:100%;}
.lookup-result{margin-top:24px;}
.lookup-status{font-size:13px;color:var(--gold);margin:14px 0 0;min-height:1.2em;}

/* ---------- tier table ---------- */
.tier-table{width:100%;border-collapse:collapse;border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.tier-table th,.tier-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:top;}
.tier-table thead th{
  background:rgba(255,255,255,.04);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.tier-table tbody tr{transition:background .2s ease;}
.tier-table tbody tr:hover{background:rgba(255,255,255,.05);}
.tier-table tbody tr:hover .tier-name{color:var(--gold);}
.tier-table tbody tr:last-child td{border-bottom:none;}
.tier-name{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:17px;transition:color .2s ease;}
.tier-price{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:17px;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--gold);}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:12px;height:2px;background:var(--gold);
  transform:translateY(-50%);
}
.faq summary::before{
  content:'';position:absolute;right:11px;top:50%;width:2px;height:12px;background:var(--gold);
  transform:translateY(-50%);transition:transform .25s ease,opacity .25s ease;
}
.faq details[open] summary::before{transform:translateY(-50%) scaleY(0);opacity:0;}
.faq details[open] summary{color:var(--gold);}
.faq-body{padding:0 0 24px;color:var(--muted);font-size:15px;line-height:1.65;max-width:70ch;margin:0;}
.faq-body p{margin:0 0 12px;}
.faq-body p:last-child{margin:0;}

/* ---------- step list (how it runs) ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.steps li{
  counter-increment:step;position:relative;padding:26px 24px;border-radius:12px;
  background:rgba(16,26,51,.6);border:1px solid var(--rule);transition:border-color .3s ease,transform .3s ease;
}
.steps li:hover{border-color:var(--gold);transform:translateY(-4px);}
.steps li::before{
  content:counter(step,decimal-leading-zero);display:block;
  font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--gold);margin-bottom:12px;line-height:1;
}
.steps h3{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:17px;margin:0 0 8px;}
.steps p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}

/* ---------- checklist ---------- */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;
  background:rgba(16,26,51,.55);border:1px solid var(--rule);font-size:15px;color:rgba(255,255,255,.84);
}
.check-box{flex:0 0 18px;width:18px;height:18px;border:1.5px solid var(--gold);border-radius:4px;margin-top:2px;}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);
  padding:clamp(36px,5vw,64px);text-align:center;background:var(--navy);
}
.cta-band-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.4;}
.cta-band-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg, rgba(6,96,174,.32), rgba(16,26,51,.88));}
.cta-band-inner{position:relative;z-index:1;}
.cta-band .display-h2{font-size:clamp(28px,3.6vw,52px);margin-bottom:14px;}
.cta-band .sub{margin:0 auto 28px;max-width:52ch;}
.cta-band .btn-row{justify-content:center;}

/* ---------- article ---------- */
.article{max-width:720px;margin:0 auto;}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 18px;}
.article-meta span:last-child{color:var(--muted);}
.article p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 22px;}
.article h2{font-family:var(--font-display);word-spacing:.2em;font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;margin:44px 0 16px;}
.article h3{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:19px;margin:32px 0 12px;}
.article ul,.article ol{margin:0 0 24px;padding-left:0;}
.article ul li{position:relative;padding-left:20px;margin-bottom:12px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.8);}
.article ul li::before{content:'';position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--gold);}
.article ol{counter-reset:a;}
.article ol li{counter-increment:a;position:relative;padding-left:32px;margin-bottom:12px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.8);}
.article ol li::before{content:counter(a,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:14px;}
.article-figure{margin:36px 0;border-radius:12px;overflow:hidden;border:1px solid var(--rule);}
.article-figure img{width:100%;display:block;height:auto;aspect-ratio:16/9;object-fit:cover;}
/* Reserve the box before a lazy image loads, so layout and any DOM
   measurement see the figure's real height instead of zero. */
.article-figure.is-tall{max-width:480px;margin-left:auto;margin-right:auto;}
.article-figure.is-tall img{aspect-ratio:4/5;}
.article-figure figcaption{padding:12px 16px;font-size:12px;color:var(--muted);background:rgba(16,26,51,.7);}
.pullquote{
  margin:36px 0;padding:26px 28px;border-left:2px solid var(--gold);background:rgba(16,26,51,.6);border-radius:0 12px 12px 0;
}
.pullquote p{font-family:var(--font-display);word-spacing:.2em;font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.25;color:var(--white);margin:0;text-transform:uppercase;letter-spacing:-.01em;}
.article-footnote{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:20px;margin-top:40px;}

/* ---------- legal pages ---------- */
.legal-body{max-width:760px;}
.legal-body h2{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:20px;margin:40px 0 12px;}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body p,.legal-body li{color:rgba(255,255,255,.76);line-height:1.7;font-size:16px;}
.legal-body p{margin:0 0 16px;}
.legal-body ul{margin:0 0 20px;}
.legal-body ul li{position:relative;padding-left:18px;margin-bottom:10px;}
.legal-body ul li::before{content:'';position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--gold);}
.legal-updated{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 32px;}

/* ---------- misc ---------- */
.split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.split-head .display-h2{margin:0;}
.inline-link{color:var(--gold);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;}
.inline-link:hover{color:var(--white);}
.note-card{padding:24px 26px;border-radius:12px;border:1px solid rgba(212,167,44,.4);background:rgba(212,167,44,.07);}
.note-card p{margin:0;color:rgba(255,255,255,.82);line-height:1.65;font-size:15px;}
.link-list li{border-top:1px solid var(--rule);}
.link-list li:last-child{border-bottom:1px solid var(--rule);}
.demo-tag{font-size:12px;color:var(--muted);letter-spacing:.08em;}
.form-status{font-size:13px;color:var(--gold);margin:6px 0 0;min-height:1.2em;}
.stack-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:640px;}
.stack-form .field-wide{grid-column:1/-1;}
.stack-form .btn-row{grid-column:1/-1;margin-top:4px;}
.stack-form select{
  background:var(--navy);border:1px solid var(--rule);border-radius:8px;color:var(--white);
  font-family:var(--font-body);font-size:16px;padding:12px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.stack-form select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px 0;}
.milestone-num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4vw,54px);color:var(--gold);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;}
.milestone-label{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.value-card .tile-icon{margin-bottom:14px;}

/* Without JavaScript the header and footer never mount, so every page
   carries a plain static bar instead. */
.noscript-bar{
  position:relative;z-index:300;background:var(--black);border-bottom:1px solid var(--rule);
  padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
}
.noscript-bar img{height:42px;width:auto;}
.noscript-bar ul{display:flex;flex-wrap:wrap;gap:8px 20px;}
.noscript-bar a{font-size:14px;font-weight:500;color:var(--white);}
.noscript-bar a:hover{color:var(--gold);}
.noscript-bar p{margin:0;width:100%;font-size:13px;color:var(--muted);}
.noscript-bar p a{color:var(--gold);}

/* The homepage animates the nav quote button in from zero. Inner pages
   have no film, so it is simply visible. */
.page-body .nav-register{opacity:1;}
.page-body .nav{background:rgba(0,0,0,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
.page-body .nav-link[aria-current="page"]{color:var(--gold);}
.page-body .nav-link[aria-current="page"]::after{width:100%;}
/* Homepage film start-states that must not apply to a static page. */
.page-body .results-row,.page-body .stat-tile,.page-body .blog-card,.page-body .partner-list li{opacity:1;transform:none;}
.page-body .line-inner{transform:none;}
.page-body .newsletter-band,.page-body .community-hero{opacity:1;}
/* Listing cards use h2 for correct heading order; match the h3 styling. */
.blog-card h2{font-family:var(--font-display);word-spacing:.12em;font-weight:600;font-size:20px;line-height:1.15;margin:0 0 10px;transition:color .2s ease;}
.blog-card:hover h2{color:var(--gold);}
.blog-card .blog-card-link{margin-top:auto;}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .photo-strip{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
}

/* ---------- phone / small tablet ---------- */
@media (max-width:900px){
  .page-hero{min-height:auto;}
  .page-hero-inner{padding:132px 0 48px;}
  .page-hero-copy{max-width:none;}
  .page-hero-copy .display-h1{font-size:clamp(32px,9.5vw,46px);}
  .page-hero-copy .sub{font-size:15px;}
  .page-hero-copy .btn-row{flex-direction:column;align-items:stretch;}
  .page-hero-copy .btn{height:46px;padding:0 24px;}
  .page-top-pad{padding-top:96px;}

  .grid-2,.grid-3,.grid-4,.event-list,.checklist{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:1fr 1fr;}
  .photo-grid figure:nth-child(1){grid-column:span 2;}
  .band{grid-template-columns:1fr;gap:24px;}
  .band.is-flipped .band-media{order:0;}
  .band.is-flipped .band-copy{order:0;}
  .band-copy .display-h2{font-size:clamp(26px,7.4vw,38px);}
  .lookup{padding:22px 20px;}
  .lookup-form{grid-template-columns:1fr;}
  .lookup-form .field-submit .btn{width:100%;}
  .stack-form{grid-template-columns:1fr;max-width:none;}
  .milestones{grid-template-columns:1fr 1fr;gap:24px;}
  .cta-band{padding:32px 22px;}
  .cta-band .btn-row{flex-direction:column;align-items:stretch;}
  .article p{font-size:16px;}
  .tier-table th,.tier-table td{padding:12px 14px;font-size:13px;}
  .tier-table{min-width:560px;}
  .timeline{padding-left:28px;}
  .timeline li::before{left:-26px;}
  .split-head{flex-direction:column;align-items:flex-start;}
}

@media (max-width:600px){
  .photo-strip{grid-template-columns:1fr;}
  .tile-photo{height:150px;}
  .event-full-img{height:170px;}
  .pullquote{padding:20px 20px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .page-hero-media img,.page-hero-media video{animation:none;transform:none;}
  .tile:hover,.steps li:hover,.event-full:hover{transform:none;}
  .band:hover .band-media img,.photo-strip figure:hover img,.photo-grid figure:hover img{transform:none;}
}

/* ---------- review pass: overflow, notes, skip link ---------- */
.results-row>span{min-width:0;overflow-wrap:anywhere;}

/* Standings are a real table. The grid look from styles.css lives on the
   rows, so table/thead/tbody are set to block and the cells carry no
   chrome of their own. */
table.results-table{display:block;width:100%;border-collapse:separate;border-spacing:0;}
table.results-table thead,table.results-table tbody{display:block;width:100%;}
.results-row>th,.results-row>td{
  min-width:0;overflow-wrap:anywhere;padding:0;border:0;background:none;
  text-align:left;font:inherit;color:inherit;letter-spacing:inherit;
  font-variant-numeric:tabular-nums;transition:color .2s ease;
}
.results-row:hover>td:nth-child(3){color:var(--gold);}
.results-row.is-first>td:nth-child(4){color:var(--gold);}
table.results-table caption{caption-side:bottom;text-align:left;padding-top:12px;font-size:13px;color:var(--muted);}
[data-demo-link]{position:relative;}
.demo-note{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  max-width:min(88%,300px);padding:8px 14px;border-radius:14px;background:var(--gold);color:var(--black);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.3;
  pointer-events:none;
}
.skip-link{
  position:absolute;left:16px;top:-72px;z-index:400;padding:13px 18px;min-height:44px;border-radius:999px;
  background:var(--gold);color:var(--black);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:top .15s ease;
}
.skip-link:focus{top:12px;}

/* ---------- round 2: chips, shift grid, bleed bands, legal hero ---------- */

/* Results: browse past races */
.race-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;}
.race-chip{
  min-height:44px;padding:10px 20px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule);background:rgba(16,26,51,.6);color:rgba(255,255,255,.78);
  font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.04em;
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;
}
.race-chip:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(212,167,44,.22);}
.race-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--black);}
.race-chip[aria-pressed="true"]:hover{color:var(--black);}

/* Volunteer: demo shift grid */
.shift-grid{display:flex;flex-direction:column;gap:10px;}
.shift-head,.shift-row{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:10px;align-items:center;}
.shift-head span{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:0 4px 6px;
}
.shift-race{font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:-.01em;}
.shift-cell{
  min-height:44px;width:100%;padding:10px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--rule);background:rgba(16,26,51,.6);color:rgba(255,255,255,.82);
  font-family:var(--font-body);font-weight:700;font-size:13px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  transition:border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.shift-cell:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 0 18px rgba(212,167,44,.2);}
.shift-cell[disabled]{opacity:.42;cursor:default;}
.shift-cell[disabled]:hover{border-color:var(--rule);color:rgba(255,255,255,.82);transform:none;box-shadow:none;}
.shift-role{display:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.shift-count{font-variant-numeric:tabular-nums;}
.shift-cell[data-full="1"] .shift-count{color:var(--muted);}

/* Full-bleed image band between sections */
.bleed-band{position:relative;height:clamp(260px,40vw,440px);overflow:hidden;background:#000;}
.bleed-band img{width:100%;height:100%;object-fit:cover;}
.bleed-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.12) 42%, rgba(0,0,0,.82));
}
.bleed-band-copy{position:absolute;left:0;right:0;bottom:clamp(22px,3.4vw,44px);z-index:2;}
.bleed-band-copy p{
  margin:0;max-width:34ch;font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.1;font-size:clamp(20px,2.6vw,34px);text-shadow:0 2px 24px rgba(0,0,0,.7);
}

/* Legal pages: a dark plate behind the title so they read as the same site */
.legal-hero{position:relative;overflow:hidden;background:#000;padding:124px 0 clamp(36px,5vw,64px);}
.legal-hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.18;filter:grayscale(1) brightness(.85);
}
.legal-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.35) 45%, #000);
}
.legal-hero .container{position:relative;z-index:2;}
.legal-hero .legal-updated{margin-bottom:0;}

/* Services pillars: the gold rule draws in with the reveal */
.rule-line{
  display:block;height:2px;width:64px;margin:0 0 16px;background:var(--gold);
  box-shadow:0 0 12px rgba(212,167,44,.55);
}
/* The draw-in itself is a GSAP scaleX tween in pages.js, so the rule is
   drawn already when JavaScript or GSAP is unavailable. */

/* Article byline and next-post foot */
.article-byline{
  display:flex;flex-wrap:wrap;align-items:center;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 22px;
}
.article-byline .dot{margin:0 10px;}
.next-post{border-top:1px solid var(--rule);margin-top:40px;padding-top:24px;}
.next-post .eyebrow{margin-bottom:10px;}
.next-post-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:6px 0;
  font-family:var(--font-display);word-spacing:.12em;font-weight:600;text-transform:uppercase;font-size:clamp(18px,2.2vw,24px);
  line-height:1.15;transition:color .2s ease,padding-left .2s ease;
}
.next-post-link:hover{color:var(--gold);padding-left:6px;}
.next-post-link:hover .icon-arrow{transform:translateX(4px);}
.next-post-link .icon-arrow{width:20px;height:20px;flex:0 0 20px;}

/* A trailing child's bottom margin stacks on top of the 120px section
   padding (the ol keeps its UA margin, the last legal paragraph keeps
   16px), so the section read 136px of dead space at 1440. */
.steps{margin-bottom:0;}
.legal-body > :last-child{margin-bottom:0;}
.page-body .results-caption{margin-bottom:0;}
/* Root cause, caught once for every section rather than per element. */
.section-pad > .container > :last-child,
.section-pad-sm > .container > :last-child{margin-bottom:0;}

/* Hero video pause and play. Sits inside .page-hero, which is relative. */
.hero-media-toggle{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:4;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--gold);background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.hero-media-toggle:hover{background:var(--gold);color:var(--black);box-shadow:0 0 20px rgba(212,167,44,.4);}
.hero-media-toggle svg{width:18px;height:18px;}
.hero-media-toggle .icon-play{display:none;}
.hero-media-toggle[data-state="paused"] .icon-play{display:block;}
.hero-media-toggle[data-state="paused"] .icon-pause{display:none;}

/* ---------- round 3: race photography galleries ---------- */
.shot{
  position:relative;margin:0;border-radius:12px;overflow:hidden;background:#000;
  border:1px solid var(--rule);aspect-ratio:16/9;
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(.9);transition:transform .9s ease,filter .5s ease;}
.shot:hover img{transform:scale(1.05);filter:saturate(1);}
.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,26,51,.06), rgba(16,26,51,.46));
}
.shot.is-tall{aspect-ratio:4/5;}
.shot .band-tag{z-index:2;}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery-2{grid-template-columns:repeat(2,1fr);}
.gallery-4{grid-template-columns:repeat(4,1fr);}

/* Mixed portrait and landscape wall. Rows are fixed so a 4:5 shot can
   take two of them and the wall still lines up. */
.gallery-wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;}
.gallery-wall .shot{aspect-ratio:auto;height:100%;}
.gallery-wall .row-2{grid-row:span 2;}
.gallery-wall .col-2{grid-column:span 2;}

.gallery-caption{margin:16px 0 0;font-size:13px;color:var(--muted);}

@media (max-width:1024px){
  .gallery,.gallery-4{grid-template-columns:repeat(2,1fr);}
  .gallery-wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;}
}

@media (max-width:900px){
  .shift-head{display:none;}
  .shift-row{
    grid-template-columns:1fr 1fr;gap:8px;padding:16px;border-radius:12px;
    background:rgba(16,26,51,.5);border:1px solid var(--rule);
  }
  .shift-race{grid-column:1/-1;margin-bottom:2px;}
  .shift-role{display:block;}
  .bleed-band{height:clamp(220px,58vw,320px);}
  .legal-hero{padding-top:112px;}
}

@media (prefers-reduced-motion: reduce){
  /* Split on purpose: a shift cell has no padding-left hover to cancel,
     and zeroing it would shift the button's own text. */
  .shift-cell:hover{transform:none;}
  .next-post-link:hover{padding-left:0;}
  .shot:hover img{transform:none;}
}

/* Gallery phone rules live last on purpose: the tablet rule above is
   further down the file than the original phone block, so it would win
   at 390 if these sat up there. */
@media (max-width:600px){
  .gallery,.gallery-2,.gallery-4{grid-template-columns:1fr;gap:12px;}
  .gallery-wall{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;}
  .gallery-wall .shot{aspect-ratio:16/9;height:auto;}
  .gallery-wall .shot.is-tall{aspect-ratio:4/5;}
  .gallery-wall .row-2,.gallery-wall .col-2{grid-row:auto;grid-column:auto;}
}

/* ---------- phone pass: photos between stacked text blocks ---------- */
.timeline + .timeline{margin-top:30px;}
.steps + .steps{margin-top:24px;}
.phone-only{display:none;}
.event-full-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

@media (max-width:600px){
  .phone-only{display:block;}
  .page-body .newsletter-band{padding:22px 20px;}

  /* Stacked columns become one flex column so a photo can sit between
     text blocks: display:contents lifts grid children into it and order
     places them. Markup is unchanged and nothing is duplicated. */
  #portal > .container,#give > .container,#morning > .container,#timing > .container,
  #roles > .container,#signup > .container,#process > .container,#how > .container,
  #guide .grid-2,#help .grid-2{display:flex;flex-direction:column;gap:20px;}

  #portal .gallery,#portal .grid-3,
  #give .gallery,#give .container > .grid-2,
  #morning .grid-2,#morning .grid-2 > div,
  #timing .grid-3,#timing .gallery,
  #roles .gallery,#roles .grid-4,
  #signup .gallery,#signup .container > .grid-2,
  #process .gallery,
  #how .grid-3,#how .gallery,
  #guide .grid-2 > div{display:contents;}

  #portal .gallery > :nth-child(1){order:1;}
  #portal .grid-3 > :nth-child(-n+2){order:2;}
  #portal .gallery > :nth-child(2){order:3;}
  #portal .grid-3 > :nth-child(n+3):nth-child(-n+4){order:4;}
  #portal .gallery > :nth-child(3){order:5;}
  #portal .grid-3 > :nth-child(n+5){order:6;}
  #portal .btn-row{order:7;}

  #give .gallery > :nth-child(-n+2){order:1;}
  #give .container > .grid-2 > :first-child{order:2;}
  #give .gallery > :nth-child(3){order:3;}
  #give .container > .grid-2 > :last-child{order:4;}

  #morning .band-media{order:1;}
  #morning .timeline{order:2;}
  #morning .phone-only{order:3;}
  #morning .note-card{order:4;margin-top:0 !important;}

  #timing .grid-3 > :nth-child(1),#how .grid-3 > :nth-child(1){order:1;}
  #timing .gallery > :nth-child(1),#how .gallery > :nth-child(1){order:2;}
  #timing .grid-3 > :nth-child(2),#how .grid-3 > :nth-child(2){order:3;}
  #timing .gallery > :nth-child(2),#how .gallery > :nth-child(2){order:4;}
  #timing .grid-3 > :nth-child(3),#how .grid-3 > :nth-child(3){order:5;}
  #timing .gallery > :nth-child(3),#how .gallery > :nth-child(3){order:6;}
  #timing .container > .grid-2,#how .note-card{order:7;margin-top:0 !important;}
  #timing .container > p{order:8;}

  #roles .gallery > :nth-child(1){order:1;}
  #roles .grid-4 > :nth-child(-n+2){order:2;}
  #roles .gallery > :nth-child(2){order:3;}
  #roles .grid-4 > :nth-child(n+3){order:4;}
  #roles .gallery > :nth-child(3){order:5;}

  #signup .gallery > :nth-child(-n+2){order:1;}
  #signup .container > .grid-2 > :first-child{order:2;}
  #signup .gallery > :nth-child(3){order:3;}
  #signup .container > .grid-2 > :last-child{order:4;}

  #process .gallery > :nth-child(-n+2){order:1;}
  #process .steps:first-of-type{order:2;margin:0;}
  #process .gallery > :nth-child(3){order:3;}
  #process .steps:last-of-type{order:4;margin:0;}

  #guide .timeline:first-of-type{order:1;}
  #guide .band-media{order:2;}
  #guide .timeline:last-of-type{order:3;margin-top:0;}
  #guide .phone-only{order:4;}
  #guide .note-card{order:5;margin-top:0 !important;}
  #guide .tile{order:6;margin-top:0 !important;}

  #help .band-media{order:-1;}
}

/* ---------- steps: CSS numbers only; a photo between the two rows ---------- */
.steps{list-style:none;}
.steps-break{aspect-ratio:21/8;margin:24px 0;}
@media (max-width:600px){ .steps-break{aspect-ratio:16/9;margin:16px 0;} }