/* Rally Medics — homepage prototype. Tokens in tokens.css; rules in DESIGN.md. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink-on-paper); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-size: var(--step-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.h2 { font: 800 var(--step-h2)/1 var(--font-display); font-style: italic; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; }
.h3 { font: 600 var(--step-statement)/1.15 var(--font-text); letter-spacing: -0.01em; }

/* ---------- Links & buttons ---------- */
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; text-decoration-color: currentColor; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--accent); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 24px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--on-accent);
  font: 600 var(--step-body)/1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .15s var(--ease-out);
}
.btn:hover { background: var(--accent-press); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn__pulse { width: 0; height: 20px; color: var(--on-accent); overflow: visible; transition: width .35s var(--ease-out); }
.btn:hover .btn__pulse, .btn:focus-visible .btn__pulse { width: 44px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--margin);
  transition: background-color .3s;
}
.site-header.is-solid { background: var(--bg); }
.brand img { height: 60px; width: auto; }
.site-nav { margin-left: auto; display: flex; gap: 28px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 10px 0; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em; }
@media (max-width: 599px) {
  :root { --header-h: 64px; }
  .site-nav { display: none; }
  .site-header .btn { margin-left: auto; }
  .brand img { height: 40px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { margin: 0; }
.hero__media img { object-fit: cover; object-position: 50% 45%; }
.hero__media img.is-flipped { --flip: -1; }
.hero::after { /* neutral scrim behind the text area only */
  content: ""; position: absolute; inset: 40% 0 0 0;
  background: linear-gradient(to top, rgb(0 0 0 / .78), rgb(0 0 0 / 0)); /* taste-skill-ignore: neutral scrim behind text */
  pointer-events: none;
}
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(to bottom, rgb(0 0 0 / .55), rgb(0 0 0 / 0)); /* taste-skill-ignore: scrim behind header */ z-index: 1; pointer-events: none; }
.hero__copy { position: relative; z-index: 2; width: 100%; padding: 0 var(--margin) clamp(32px, 6vh, 72px); }
.hero h1 { font-size: clamp(2.1rem, 7.2vw, 7rem); }
.hero h1 .line { display: block; overflow: hidden; padding: 0 .12em .06em 0; white-space: nowrap; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .line + .line { padding-left: 0.6em; }
.hero__lede { margin-top: 24px; max-width: 36ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.link--light { color: var(--ink); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 599px) {
  .hero { height: auto; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: flex-end; background: var(--bg); }
  .hero__media { position: relative; height: 40svh; inset: auto; margin-top: var(--header-h); }
  .hero__media img { object-position: 30% 40%; }
  .hero::after { display: none; }
  .hero__copy { padding-top: 24px; padding-bottom: 24px; }
  .hero__lede { margin-top: 16px; }
  .hero__actions { margin-top: 20px; }
  .hero h1 .line + .line { padding-left: 0; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Intro ---------- */
.intro {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: var(--section) var(--margin);
}
.intro__statement {
  grid-column: 7 / 13; grid-row: 1;
  font-size: var(--step-statement); line-height: 1.3; text-indent: 3em; max-width: 34ch;
}
.intro__figure { grid-column: 1 / 5; grid-row: 2; margin-top: -2em; position: relative; }
.intro__note { grid-column: 7 / 11; grid-row: 2; align-self: end; color: var(--muted); max-width: 34ch; }
@media (max-width: 959px) {
  .intro { grid-template-columns: repeat(10, 1fr); }
  .intro__statement { grid-column: 1 / -1; text-indent: 0; }
  .intro__figure { grid-column: 3 / -1; grid-row: 2; margin-top: 48px; }
  .intro__note { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; }
}

/* ---------- Stages: one verb at a time ---------- */
.stages { position: relative; }
.stages__route { position: absolute; left: 0; top: 0; width: 100%; height: 40px; color: var(--accent); z-index: 3; }
.stage { position: relative; min-height: 100svh; overflow: clip; }
.stage__media, .stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__media { margin: 0; }
.stage__media img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .35) 38%, rgb(0 0 0 / .22) 100%); }
.stage__verb { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.stage__verb h3 { font-size: clamp(2.6rem, 8vw, 8.5rem); line-height: 1; padding: .08em .15em; max-width: 92vw; color: var(--ink); text-align: center; text-wrap: balance; }
.stage__text {
  position: absolute; z-index: 2; left: var(--margin); bottom: clamp(32px, 8vh, 80px);
  max-width: 30ch; margin: 0; padding-top: 18px; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.4;
  color: var(--ink); text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}
.stage__text::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--accent); }
@media (max-width: 599px) {
  .stage__verb h3 { font-size: 11vw; }
  .stage__text { left: 20px; right: 20px; max-width: none; }
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--paper); color: var(--ink-on-paper);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: var(--section) var(--margin);
}
.faq__col { grid-column: 1 / 6; min-width: 0; }
.faq__facts { margin-top: 32px; display: grid; gap: 10px; }
.faq__facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; }
.faq__facts dt { color: var(--muted-on-paper); }
.faq__facts dd { overflow-wrap: anywhere; }
.faq__list { grid-column: 7 / 13; display: grid; gap: 28px; align-content: start; padding-top: 12px; }
.faq details summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 1.25rem; line-height: 1.3;
  display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center;
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin-top: 10px; color: var(--muted-on-paper); font-size: 1.0625rem; max-width: 52ch; }
@media (max-width: 959px) {
  .faq { grid-template-columns: 1fr; }
  .faq__col, .faq__list { grid-column: 1; }
  .faq__list { margin-top: 48px; padding-top: 0; }
  .faq__facts div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Request ---------- */
.request {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: var(--section) var(--margin); background: var(--surface);
}
.request__aside { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.request__aside p { margin-top: 20px; max-width: 40ch; }
.request__notice { font-weight: 600; }
.request__card {
  grid-column: 7 / 13; background: var(--paper); color: var(--ink-on-paper); padding: 36px 32px;
}
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-weight: 600; font-size: 1rem; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #8A867F; border-radius: 0;
  background: #fff; color: var(--ink-on-paper); font: 400 var(--step-body)/1.4 var(--font-text);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--ink-on-paper); }
.field input[aria-invalid="true"] { border-color: var(--accent-press); border-width: 2px; }
.hint { font-size: 1rem; color: var(--muted-on-paper); }
.form__error { color: #9E0C11; font-weight: 600; font-size: 1rem; }
.form__alt { text-align: center; }
@media (max-width: 959px) {
  .request { grid-template-columns: 1fr; }
  .request__aside, .request__card { grid-column: 1; position: static; }
  .request__card { margin-top: 32px; }
}
@media (max-width: 599px) {
  .request__card { padding: 28px 20px; margin-left: -4px; margin-right: -4px; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Process: how a request works ---------- */
.process {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px;
  padding: var(--section) var(--margin);
}
.process__head { grid-column: 1 / 6; }
.process__lede { margin-top: 20px; max-width: 40ch; color: var(--ink); }
.process__list { grid-column: 7 / 13; grid-row: 1 / span 2; display: grid; gap: 40px; counter-reset: step; }
.process__list li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
.process__list li::before {
  content: ""; grid-row: 1 / span 2; width: 56px; height: 24px; margin-top: 6px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M0 14h18l4-10 6 18 5-20 5 12h18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M0 14h18l4-10 6 18 5-20 5 12h18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.process__list h3 { font: 600 var(--step-statement)/1.2 var(--font-text); }
.process__list p { margin-top: 8px; color: var(--muted); max-width: 46ch; }
.placeholder {
  grid-column: 1 / 6; align-self: end; padding: 28px; background: var(--surface);
  outline: 2px dashed #6B6760; outline-offset: -2px;
}
.placeholder__tag { font-size: var(--step-small); font-weight: 600; color: #FFB4B6; }
.placeholder h3 { margin-top: 10px; font: 600 1.25rem/1.3 var(--font-text); }
.placeholder p:last-child { margin-top: 8px; color: var(--muted); }
@media (max-width: 959px) {
  .process { grid-template-columns: 1fr; row-gap: 48px; }
  .process__head, .process__list, .placeholder { grid-column: 1; grid-row: auto; }
}
@media (max-width: 599px) {
  .process__list li { grid-template-columns: 40px 1fr; column-gap: 14px; }
  .process__list li::before { width: 40px; }
}

/* ---------- Concept-artwork disclosure (visible on every AI image) ---------- */
.concept, .is-concept > figcaption {
  position: absolute; z-index: 4; right: 12px; bottom: 12px; margin: 0;
  padding: 6px 10px; background: rgb(11 11 12 / .86); color: var(--ink);
  font-size: var(--step-small); line-height: 1.3; font-weight: 600; max-width: calc(100% - 24px);
}
.hero .concept, .hero .is-concept > figcaption { bottom: auto; top: calc(var(--header-h) + 12px); right: var(--margin); }
.stage .concept, .stage .is-concept > figcaption { top: calc(var(--header-h) + 16px); bottom: auto; right: var(--margin); }
.intro__figure .concept, .intro__figure .is-concept > figcaption { right: 8px; bottom: 8px; }
@media (max-width: 599px) {
  .hero .concept, .hero .is-concept > figcaption { top: 10px; bottom: auto; right: 10px; }
  .concept__more { display: none; }
}

/* ---------- Browser surfaces ---------- */
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea { caret-color: var(--accent); accent-color: var(--accent); }
html { scrollbar-color: #4A4844 var(--bg); }

/* ---------- Footer ---------- */
/* Dark, quiet close: logo + one call to action, three short columns, legal line. Red appears only on the button. */
.site-footer { background: var(--bg); color: var(--ink); border-top: 1px solid rgba(244, 242, 238, .12); padding: clamp(48px, 8vw, 96px) var(--margin) 32px; display: grid; gap: clamp(40px, 6vw, 64px); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.footer__brand img { display: block; width: 140px; height: auto; }
.footer__pitch { font-family: var(--font-display); font-style: italic; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; margin: 0; flex: 1 1 18ch; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: clamp(32px, 5vw, 48px); border-top: 1px solid rgba(244, 242, 238, .12); }
.footer__cols ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.footer__cols p:not(.footer__head) { color: var(--muted); max-width: 32ch; }
.footer__cols a { color: var(--ink); }
.footer__head { font-size: var(--step-small); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.footer__legal { font-size: var(--step-small); color: var(--muted); max-width: 65ch; margin: 0; }
@media (max-width: 599px) {
  .footer__top { align-items: flex-start; flex-direction: column; }
  .footer__pitch { flex: none; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__cols > :last-child { grid-column: 1 / -1; }
}

/* ---------- Motion (JS adds .js; content is never hidden without it) ---------- */
.js .hero h1 .line > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
.js .hero h1 .line + .line > span { transition-delay: .11s; }
.js .is-loaded .hero h1 .line > span, .js.is-loaded .hero h1 .line > span { transform: none; }
.js .reveal-late { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out) .55s, transform .7s var(--ease-out) .55s; }
.js.is-loaded .reveal-late { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.hero__media img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(calc(1.02 * var(--flip, 1)), 1.02); } to { transform: scale(calc(1.07 * var(--flip, 1)), 1.07); } }
.hero__media img.is-flipped { transform: scaleX(-1); }
.stages__route path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease-out); }
.stages__route.is-in path, .no-js .stages__route path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .js .reveal, .js .reveal-late, .js .hero h1 .line > span { opacity: 1; transform: none; }
  .stages__route path { stroke-dashoffset: 0; }
}

/* ---------- Hero, split variant (owner-preferred branded-vehicle image) ---------- */
.hero--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; height: auto; min-height: 100svh; background: var(--bg); }
.hero--split::before, .hero--split::after { display: none; }
.hero--split .hero__media { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: 100%; min-height: 100svh; }
.hero--split .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 60%; animation: none; transform: none; }
.hero--split .hero__copy { grid-column: 1; grid-row: 1; align-self: end; padding: calc(var(--header-h) + 48px) var(--margin) clamp(40px, 9vh, 96px); }
.hero--split h1 { font-size: clamp(2.2rem, 3.8vw, 4.4rem); }
.hero--split h1 .line + .line { padding-left: .4em; }
.hero--split .concept, .hero--split .is-concept > figcaption { top: calc(var(--header-h) + 12px); bottom: auto; right: 12px; }
.hero--split .hero__media::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(to bottom, rgb(0 0 0 / .5), rgb(0 0 0 / 0)); } /* taste-skill-ignore: scrim behind header links */
@media (max-width: 959px) {
  .hero--split { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero__media { grid-column: 1; grid-row: 1; min-height: 0; height: auto; aspect-ratio: 4 / 5; max-height: 62svh; margin-top: var(--header-h); }
  .hero--split .hero__copy { grid-row: 2; padding: 24px var(--margin) 40px; }
  .hero--split .hero__media::after { display: none; }
  .hero--split .concept, .hero--split .is-concept > figcaption { top: 10px; bottom: auto; right: 10px; }
}
@media (max-width: 599px) {
  .hero--split .hero__media { max-height: 38svh; }
  .hero--split h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); }
}

/* ---------- Process: closing call to action ---------- */
.process__cta { grid-column: 7 / 13; }
@media (max-width: 959px) { .process__cta { grid-column: 1; } .process__cta .btn, .process__cta .wp-block-button__link { width: 100%; } }

/* ---------- Incident response: four moves, set out as a row ---------- */
.response { background: var(--paper); color: var(--ink-on-paper); padding: var(--section) var(--margin); }
.response > .h2 { max-width: 16ch; }
.response__lede { margin-top: 20px; max-width: 48ch; font-size: var(--step-statement); line-height: 1.3; }
.response__steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.response__step { padding-top: 40px; position: relative; }
.response__step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 24px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M0 14h18l4-10 6 18 5-20 5 12h18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M0 14h18l4-10 6 18 5-20 5 12h18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.response__step h3 { font: 600 1.25rem/1.25 var(--font-text); }
.response__step p { margin-top: 10px; color: var(--muted-on-paper); }
.response__limits { margin-top: 56px; font-weight: 600; max-width: 60ch; }
@media (max-width: 959px) { .response__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .response__steps { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; } }