/* Rally Rentals – shared styles.
   Look: a rally roadbook. White paper, blue ruling, slate ink, highlighter yellow. */
:root {
  --paper: #FFFFFF;
  --rule: #9DB4C9;
  --rule-soft: #E3EBF2;
  --ink: #1B2430;
  --ink-2: #4A5868;
  --hilite: #F2E600;
  --caution: #D7261E;
  --measure: 66ch;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 "Barlow", system-ui, sans-serif; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.cond { font-family: "Barlow Condensed", sans-serif; }

/* Masthead + nav */
.mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand span { font: 500 1.05rem/1.1 "Barlow Condensed", sans-serif; color: var(--ink-2); border-left: 1px solid var(--rule); padding-left: 14px; }
@media (max-width: 760px) { .brand img { height: 36px; } .brand span { display: none; } }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
nav a { display: block; padding: 8px 12px; font: 600 1.1rem "Barlow Condensed", sans-serif; text-decoration: none; border: 2px solid transparent; }
nav a:hover { border-color: var(--ink); }
nav a[aria-current="page"] { background: linear-gradient(var(--hilite), var(--hilite)) no-repeat 0 80% / 100% 40%; }
nav a.cta { background: var(--ink); color: var(--hilite); }
nav a.cta:hover { background: var(--hilite); color: var(--ink); border-color: var(--ink); }

/* Type */
h1 { margin: 0; font: 800 clamp(2.7rem, 7.5vw, 5.4rem)/0.92 "Barlow Condensed", sans-serif; letter-spacing: -0.01em; max-width: 16ch; }
h2.sec { margin: 0 0 18px; font: 800 clamp(2rem, 4.5vw, 3rem)/1 "Barlow Condensed", sans-serif; }
h3 { margin: 0 0 6px; font: 700 1.55rem/1.1 "Barlow Condensed", sans-serif; }
p { margin: 0 0 12px; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 54ch; margin: 0; }
.muted { color: var(--ink-2); }
.mark { background: linear-gradient(var(--hilite), var(--hilite)) no-repeat 0 85% / 100% 42%; padding: 0 .08em; }
@media (prefers-reduced-motion: no-preference) {
  .mark.swipe { animation: swipe .9s .35s cubic-bezier(.3,.7,.3,1) both; }
  @keyframes swipe { from { background-size: 0% 42%; } to { background-size: 100% 42%; } }
}

section { padding: 56px 0; }
section + section { border-top: 1px solid var(--rule); }
.hero { padding-top: 56px; padding-bottom: 44px; display: grid; gap: 24px; }
.hero .launch { font: 700 1.15rem "Barlow Condensed", sans-serif; }

/* Two-path panels (home) */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); }
.path { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 28px; text-decoration: none; color: var(--paper); background: var(--ink); min-height: 340px; }
.path + .path { border-left: 2px solid var(--paper); }
.path svg { width: 72px; height: 84px; }
.path h2 { margin: 0; font: 800 clamp(2rem, 4vw, 2.8rem)/1 "Barlow Condensed", sans-serif; color: var(--hilite); }
.path p { color: #D6DEE7; margin: 0; max-width: 40ch; }
.path .go { font: 700 1.2rem "Barlow Condensed", sans-serif; color: var(--paper); border-top: 1px solid #44536A; padding-top: 12px; }
.path:hover, .path:focus-visible { background: #24303F; }
.path:hover .go, .path:focus-visible .go { color: var(--hilite); }

/* Roadbook table */
.roadbook { border: 2px solid var(--ink); }
.rb-head, .rb-row { display: grid; grid-template-columns: 112px 128px 1fr; }
.rb-head { font: 600 .9rem "Barlow Condensed", sans-serif; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.rb-head > div { padding: 8px 14px; }
.rb-row { border-bottom: 1px solid var(--rule); min-height: 124px; }
.rb-row:last-child { border-bottom: 0; }
.rb-row > div { padding: 14px; }
.rb-head > div + div, .rb-row > div + div { border-left: 1px solid var(--rule); }
.dist { display: flex; flex-direction: column; gap: 6px; }
.dist .n { font: 700 2rem/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.dist .step { font: 500 .95rem/1 "Barlow Condensed", sans-serif; color: var(--ink-2); }
.tulip { display: grid; place-items: center; }
.tulip svg { width: 84px; height: 96px; }
.note p { margin: 0; max-width: var(--measure); color: var(--ink-2); }
.caution { color: var(--caution); font: 800 1.2rem "Barlow Condensed", sans-serif; margin-left: 6px; }

/* Ride / route cards – ruled like roadbook pages */
.grid { display: grid; gap: 0; border: 2px solid var(--ink); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.cell { padding: 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: .98rem; }
.facts dt { font: 600 1rem "Barlow Condensed", sans-serif; color: var(--ink-2); }
.facts dd { margin: 0; }
.price { font: 800 2.2rem/1 "Barlow Condensed", sans-serif; margin: 6px 0 10px; }
.price small { font: 500 1rem "Barlow Condensed", sans-serif; color: var(--ink-2); }
.level { display: inline-block; font: 600 .95rem "Barlow Condensed", sans-serif; border: 1.5px solid var(--ink); padding: 1px 8px; margin-top: 8px; }

/* Lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: var(--measure); }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: var(--hilite); border: 2px solid var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* FAQ */
details { border-bottom: 1px solid var(--rule); padding: 14px 0; max-width: 78ch; }
details:first-of-type { border-top: 2px solid var(--ink); }
summary { cursor: pointer; font: 700 1.3rem "Barlow Condensed", sans-serif; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.6rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--ink-2); }

/* Guide */
.guide { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.photo-slot { aspect-ratio: 4/5; border: 2px solid var(--ink); background:
  repeating-linear-gradient(0deg, transparent 0 23px, var(--rule-soft) 23px 24px), var(--paper);
  display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ink-2); font: 500 1rem "Barlow Condensed", sans-serif; }

/* Sign-up */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.signup h2 { margin: 0; font: 800 clamp(2rem, 5vw, 3.2rem)/0.98 "Barlow Condensed", sans-serif; }
.signup .sub { margin: 14px 0 0; color: var(--ink-2); max-width: 40ch; }
form { display: grid; gap: 14px; }
label { font: 600 1rem "Barlow Condensed", sans-serif; display: block; margin-bottom: 6px; }
input[type=email], input[type=text] { width: 100%; font: inherit; color: var(--ink); padding: 12px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font: 600 1rem "Barlow Condensed", sans-serif; margin-bottom: 8px; padding: 0; }
.opts { display: grid; gap: 8px; }
.opts label { font: 400 1rem "Barlow", sans-serif; display: flex; gap: 10px; align-items: center; margin: 0; }
.opts input { width: 20px; height: 20px; accent-color: var(--ink); }
.btn { display: inline-block; justify-self: start; font: 700 1.25rem "Barlow Condensed", sans-serif; padding: 12px 22px; border: 2px solid var(--ink);
  background: var(--hilite); color: var(--ink); cursor: pointer; border-radius: 0; text-decoration: none; }
.btn:hover { background: var(--ink); color: var(--hilite); }
.btn[disabled] { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; }
.status { min-height: 1.5em; margin: 0; font-weight: 500; }
.status.err { color: var(--caution); }

footer { border-top: 2px solid var(--ink); padding-top: 18px; padding-bottom: 40px; color: var(--ink-2); font-size: .95rem;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer p { margin: 0 0 4px; }

@media (max-width: 760px) {
  .paths, .split, .signup, .guide, .grid.c2, .grid.c3 { grid-template-columns: 1fr; }
  .path + .path { border-left: 0; border-top: 2px solid var(--paper); }
  .path { min-height: 0; }
  .rb-head, .rb-row { grid-template-columns: 76px 84px 1fr; }
  .rb-row { min-height: 0; }
  .rb-row > div, .rb-head > div { padding: 10px; }
  .tulip svg { width: 60px; height: 72px; }
  .dist .n { font-size: 1.5rem; }
  .guide .photo-slot { max-width: 220px; }
  section { padding: 44px 0; }
  .hero { padding-top: 36px; }
}

/* Photo header band: header + hero over a darkened woodland photo */
.top { position: relative; color: #fff; background: #17211A var(--photo) center 55% / cover no-repeat; isolation: isolate; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,16,13,.9) 0%, rgba(10,16,13,.82) 90px, rgba(14,20,16,.48) 40%, rgba(14,20,16,.74) 100%); }
.top .mast { border-bottom-color: rgba(255,255,255,.35); }
.top .brand span { color: #E4EAE6; border-left-color: rgba(255,255,255,.4); }
.top nav a { color: #fff; }
.top nav a:hover { border-color: #fff; }
.top nav a[aria-current="page"] { background: none; box-shadow: inset 0 -4px 0 var(--hilite); }
.top nav a.cta { background: var(--hilite); color: var(--ink); }
.top nav a.cta:hover { background: #fff; border-color: #fff; }
.top .hero { padding-top: 88px; padding-bottom: 72px; min-height: 460px; align-content: end; }
.top h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.top .lede { color: #E9EEEA; }
.top .launch .mark { color: var(--ink); background-size: 100% 100% !important; padding: 3px 10px; }
.top + main > .wrap:first-child { margin-top: 48px; }
.top :focus-visible { outline-color: var(--hilite); }
.credit { font-size: .85rem; }
@media (max-width: 760px) { .top .hero { padding-top: 56px; padding-bottom: 48px; min-height: 380px; } }

/* Home hero uses Steve's own photo: keep the left side dark for the text */
.top-home::before { background: linear-gradient(90deg, rgba(10,16,13,.86) 0%, rgba(10,16,13,.62) 42%, rgba(10,16,13,.12) 75%),
  linear-gradient(180deg, rgba(10,16,13,.75) 0%, rgba(10,16,13,0) 120px); }
.top-home { background-position: 70% 40%; }
@media (max-width: 760px) {
  .top-home { background-image: url('/img/hero-ford-mobile.jpg'); background-position: center 30%; }
  .top-home::before { background: linear-gradient(180deg, rgba(10,16,13,.82) 0%, rgba(10,16,13,.55) 45%, rgba(10,16,13,.85) 100%); }
}
.guide-photo { width: 100%; height: auto; border: 2px solid var(--ink); }
.award { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin: 18px 0; padding: 14px; border: 1px solid var(--rule); max-width: 60ch; }
.award img { width: 110px; height: auto; border: 1px solid var(--rule); }
.award p { margin: 0; }

/* Workshop (RallyReady) */
.sub-brand { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sub-brand img { height: 58px; width: auto; }
.sub-brand span { font: 700 1.25rem "Barlow Condensed", sans-serif; color: var(--paper); border-left: 2px solid #13A4AA; padding-left: 14px; }
.kit { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 4px; }
.anything { margin: 24px 0 0; max-width: var(--measure); font-size: 1.1rem; border-left: 6px solid var(--hilite); padding: 4px 0 4px 16px; }
.paths.p3 { grid-template-columns: repeat(3, 1fr); }
.paths.p3 .path p { max-width: 34ch; }
@media (max-width: 1000px) {
  .paths.p3 { grid-template-columns: 1fr; }
  .paths.p3 .path + .path { border-left: 0; border-top: 2px solid var(--paper); }
  .paths.p3 .path { min-height: 0; }
}
@media (max-width: 760px) { .sub-brand img { height: 44px; } }

/* Fitting-price dialog */
.quote { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 2px solid var(--ink); border-radius: 0; color: var(--ink); background: var(--paper); }
.quote::backdrop { background: rgba(27, 36, 48, .7); }
.quote form { padding: 24px; gap: 18px; }
.q-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.q-head h2 { margin: 0; font: 800 2rem/1 "Barlow Condensed", sans-serif; }
.q-close { font: 400 2rem/1 "Barlow", sans-serif; background: none; border: 0; cursor: pointer; padding: 0 4px; color: var(--ink); }
.quote .muted { margin: 0; color: var(--ink-2); }
.q-bike { display: grid; grid-template-columns: 1fr 1.4fr .7fr; gap: 12px; }
.q-items { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.q-you { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type=tel], textarea { width: 100%; font: inherit; color: var(--ink); padding: 12px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
textarea { resize: vertical; }
@media (max-width: 600px) { .q-bike, .q-items, .q-you { grid-template-columns: 1fr; } .quote form { padding: 18px; } }
.q-note { margin: 0; padding: 10px 14px; background: var(--hilite); border: 2px solid var(--ink); }