/* ============================================================
   0.9c STEM Racing — site styles
   Shared by every page (index, about, prototypes, final-model,
   gallery). Loaded once from <head>.
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  --navy-950:#05101f;
  --navy-900:#06122e;
  --navy-800:#0b2a6b;
  --blue-500:#2f7fd6;
  --blue-100:#e6f0ff;
  --yellow:#ffd400;
  --white:#ffffff;
  --ink:#05101f;
  --focus:#ffd400;
  --rule:rgba(255,255,255,.16);
  --max:1140px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --radius:26px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.65;
  color:var(--white);
  background-color:var(--navy-800);
  /* dark blue -> light blue gradient (decorative surface behind the content panels) */
  background-image:linear-gradient(168deg,#05101f 0%,#0a2160 28%,#1f5fb8 58%,#4f93e0 82%,#7db8f0 100%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{line-height:1.12;margin:0 0 .6em;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,1.6rem + 4.4vw,4.5rem);text-transform:uppercase;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem)}
h3{font-size:1.15rem;letter-spacing:0}
p{margin:0 0 1.1em;text-wrap:pretty;max-width:64ch}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* ---------- focus (WCAG 2.1 — 2.4.7 / 1.4.11) ---------- */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- skip link (2.4.1) ---------- */
.skip-link{
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:100;
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  padding:.75rem 1.25rem;
  border-radius:0 0 12px 12px;
  text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--navy-950);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:.7rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.5rem;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
  font-size:1.05rem;
  text-transform:uppercase;
  padding:.25rem 0;
  min-height:44px;
}
.brand strong{color:var(--white)}
.brand span.brand-thin{font-weight:400;color:#cfe0f5}
.brand:hover span.brand-thin{color:var(--white)}

/* the header is injected by js/include.js — reserve its height so the page
   does not jump when it lands (the slot is replaced, not filled) */
[data-include="partials/header.html"]{
  display:block;
  min-height:72px;
  background:var(--navy-950);
}

/* logo — square PNG with its own blue background, so it reads as a tile */
.brand-logo{
  width:52px;
  height:52px;
  flex:none;
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

/* ---------- main navigation ---------- */
/* min-width:0 lets the nav shrink so .nav-list can wrap instead of
   pushing the page wider than the viewport on small screens */
.site-nav{display:flex;flex-wrap:wrap;flex:0 1 auto;min-width:0}
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.5rem .85rem;
  border-radius:999px;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  color:#dbe8f8;                /* 13.9:1 on --navy-950 */
  border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease;
}
.nav-link:hover{
  background:rgba(255,255,255,.12);
  color:var(--white);
}
.nav-link[aria-current="page"]{
  background:var(--yellow);
  color:var(--ink);             /* black on yellow — 12.9:1 */
  font-weight:700;
}
.nav-link[aria-current="page"]:hover{
  background:var(--white);
  color:var(--ink);
}

/* ---------- small-screen menu button ---------- */
.nav-toggle{
  display:none;                 /* revealed below 900px, and only when scripting is on */
  align-items:center;
  justify-content:center;
  width:44px;                   /* square + 100% radius = a true circle */
  height:44px;
  min-height:44px;
  text-align: center;
  padding:0;
  border: none;
  border-radius: 100%;
  background:transparent;
  color:var(--white);
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.nav-toggle:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--white);
}
.nav-toggle[aria-expanded="true"]{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink);             /* black on yellow — 12.9:1 */
}
.nav-toggle-icon{display:grid;gap:4px;width:20px;flex:none}
.nav-toggle-icon span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .15s ease,opacity .15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Below 900px the five links collapse behind the button. The html.js guard
   means that without scripting they stay visible and simply wrap, so the
   navigation is never hidden from a visitor who has JS turned off. */
@media (max-width:899px){
  html.js .nav-toggle{display:inline-flex}
  html.js .site-nav{
    display:none;
    order:3;
    width:100%;
    padding-top:.35rem;
    border-top:1px solid var(--rule);
  }
  html.js .site-nav.is-open{display:block}
  html.js .site-nav .nav-list{flex-direction:column;align-items:center;gap:.15rem}
  html.js .site-nav .nav-link{
    justify-content:flex-start;
    padding:.6rem .9rem;
    border-radius:12px;
    font-size:.98rem;
  }
}

/* tighter header so the two-row nav does not eat the screen on a phone */
@media (max-width:520px){
  .header-inner{padding:.55rem var(--gutter);gap:.45rem 1rem}
  .brand{font-size:.98rem;gap:.65rem}
  .brand-logo{width:44px;height:44px;border-radius:10px}
  [data-include="partials/header.html"]{min-height:62px}
  .nav-list{gap:.15rem}
  .nav-link{font-size:.85rem;padding:.4rem .6rem}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  /* its own solid gradient keeps every colour pair predictable for contrast */
  background:linear-gradient(155deg,#05101f 0%,#0a1f52 58%,#0b2a6b 100%);
  border-bottom:1px solid var(--rule);
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(3.5rem,9vw,7.5rem) var(--gutter) clamp(3rem,7vw,5.5rem);
}
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yellow);
  margin:0 0 1.1rem;
}
h1 .h1-line2{display:block;color:#bcd8ff}
.lead{
  font-size:clamp(1.05rem,1rem + .55vw,1.35rem);
  color:#e8f1ff;
  max-width:56ch;
}

/* shorter hero used by the inner pages */
.page-hero{
  background:linear-gradient(155deg,#05101f 0%,#0a1f52 58%,#0b2a6b 100%);
  border-bottom:1px solid var(--rule);
}
.page-hero .hero-inner{
  padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) clamp(2rem,5vw,3.5rem);
}
.page-hero h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.5rem)}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:2rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink);          /* black on yellow — 12.9:1 */
}
.btn-primary:hover{
  background:var(--white);
  border-color:var(--white);
  color:var(--ink);
}
.btn-primary:focus-visible{
  outline-color:var(--white);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--navy-950);   /* two-tone indicator, visible on any surface */
}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.8);
  color:var(--white);
}
.btn-ghost:hover{
  background:var(--white);
  border-color:var(--white);
  color:var(--ink);
}
.btn-ghost:focus-visible{
  outline-color:var(--yellow);
}

/* ---------- decorative speed lines (aria-hidden, motion-safe) ---------- */
.speedlines{position:absolute;inset:0;z-index:1;overflow:hidden}
.speedlines span{
  position:absolute;
  height:2px;
  width:38%;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  opacity:.5;
}
.speedlines span:nth-child(1){top:22%;right:-38%;animation:slide 5.5s linear infinite}
.speedlines span:nth-child(2){top:58%;right:-38%;animation:slide 7s linear infinite .9s;background:linear-gradient(90deg,transparent,#8ec2ff,transparent)}
.speedlines span:nth-child(3){top:82%;right:-38%;animation:slide 6.2s linear infinite 2.1s;opacity:.35}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-260%)}}

/* ---------- content shell / panels ---------- */
.shell{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--gutter);
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
}
.panel{
  background:var(--blue-100);   /* black text on light blue — 17.8:1 */
  color:var(--ink);
  border-radius:var(--radius);
  padding:clamp(1.75rem,5vw,3.5rem);
  box-shadow:0 24px 60px rgba(3,10,25,.35);
}
.panel h2{color:var(--navy-800)}
.panel a:focus-visible{outline-color:var(--navy-800)}
.panel--dark{
  background:var(--navy-950);
  color:var(--white);
}
.panel--dark h2{color:var(--white)}
.panel--dark p{color:#e3edfb}

.section + .section{margin-top:clamp(2.5rem,5vw,3.5rem)}

.rule{
  height:4px;
  width:76px;
  background:var(--yellow);
  border-radius:2px;
  margin:0 0 1.4rem;
}

/* ---------- build steps ---------- */
.steps{
  list-style:none;
  counter-reset:step;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  gap:1.1rem;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:1rem 1.25rem 1rem 4.25rem;
  background:#f6faff;
  border:1px solid #c3d9f5;
  border-radius:16px;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:1rem;
  top:1rem;
  width:2.25rem;height:2.25rem;
  display:grid;place-items:center;
  background:var(--yellow);
  color:var(--ink);
  border-radius:999px;
  font-weight:800;
  font-size:1rem;
}
.steps h3{margin-bottom:.25rem;color:var(--navy-800)}
.steps p{margin:0;max-width:60ch}

/* ---------- card grid (home links + gallery tiles) ---------- */
.card-grid{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem;
}
.card{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  background:#f6faff;
  border:1px solid #c3d9f5;
  border-radius:16px;
  padding:1.25rem;
}
.card h3{margin:0;color:var(--navy-800)}
.card p{margin:0;max-width:52ch}
.card-link{
  margin-top:.5rem;
  align-self:start;
  font-weight:700;
  color:var(--navy-800);
  text-decoration:underline;
  text-underline-offset:3px;
}
.card-link:hover{color:var(--ink)}

/* gallery tiles — replace .tile-media with the real <img> */
.tile{
  background:#f6faff;
  border:1px solid #c3d9f5;
  border-radius:16px;
  overflow:hidden;
}
.tile-media{
  aspect-ratio:4 / 3;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,#dbe9fb,#f6faff);
  border-bottom:1px solid #c3d9f5;
  color:#3a5a80;                /* 5.8:1 on the darkest tile background */
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  padding:.5rem;
}
.tile-body{padding:1rem 1.25rem}
.tile-body h3{margin:0 0 .25rem;font-size:1rem;color:var(--navy-800)}
.tile-body p{margin:0;font-size:.95rem}

/* ---------- specification table (Final Model) ---------- */
.spec-table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0 0;
  font-size:.98rem;
}
.spec-table caption{
  text-align:left;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy-800);
  padding-bottom:.6rem;
}
.spec-table th,.spec-table td{
  text-align:left;
  padding:.7rem .6rem;
  border-bottom:1px solid #c3d9f5;
  vertical-align:top;
}
.spec-table th{color:var(--navy-800);white-space:nowrap;width:12rem}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}

/* let the label column shrink on a phone so the table never overflows */
@media (max-width:600px){
  .spec-table th{width:auto;white-space:normal}
  .spec-table th,.spec-table td{padding:.6rem .35rem}
}

/* ---------- contact list ---------- */
.contact-list{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  gap:1rem;
}
.contact-list li{
  display:grid;
  gap:.15rem;
  padding-left:1rem;
  border-left:3px solid var(--yellow);
}
.contact-list dt, .contact-list .label{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9dc2f0;
}
.contact-list .value{font-size:1.05rem;font-weight:600;justify-self:start}

.value.ph a {
  color: var(--yellow);
  text-decoration: none;
}
/* placeholder marker — remove with the placeholder content */
.ph{
  border-bottom:2px dashed currentColor;
  padding-bottom:1px;
}

/* ---------- footer ---------- */
.chequer{
  height:16px;
  background-image:repeating-conic-gradient(#ffffff 0 25%,#05101f 0 50%);
  background-size:12px 12px;
}
.site-footer{
  background:var(--navy-950);
}
.footer-inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) var(--gutter) clamp(1.5rem,3vw,2.25rem);
  display:grid;
  gap:1.25rem;
}
.footer-inner p{color:#cfe0f5;font-size:.95rem;max-width:60ch}
.footer-brand{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--white);
  margin:0 0 .35rem;
  font-size:1.05rem;
}
.footer-meta{
  border-top:1px solid var(--rule);
  padding-top:1rem;
  font-size:.88rem;
  color:#b9cbe3;
}

/* ---------- wide screens ---------- */
@media (min-width:700px){
  /* four cards read better as a balanced 2x2 than as 3 + 1 */
  .card-grid--pair{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  [data-include="partials/header.html"]{min-height:84px}
  .steps{grid-template-columns:1fr 1fr;gap:1.25rem}
  .contact-list{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr;align-items:start}
  .footer-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
  .footer-nav{flex:none}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .speedlines{display:none}
}

/* ---------- forced colours ---------- */
@media (forced-colors: active){
  .panel,.steps li,.card,.tile{border:1px solid CanvasText}
  .btn,.nav-link,.nav-toggle{border:1px solid CanvasText}
}