/* BookAPedicab.com styles
   Palette taken from the tunnel hero photo. Change brand colors here, in one place. */

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --night: #16233f;   /* navy of the tunnel leaves; text and dark sections */
  --sky: #52c4d6;     /* tunnel sky turquoise */
  --amber: #f6a93b;   /* sunset band */
  --signal: #f15a24;  /* slow-moving-vehicle triangle orange; buttons */
  --led: #d93a9c;     /* LED magenta; used sparingly */
  --mist: #eef7f8;    /* light background */
  --white: #ffffff;

  --display: "Unbounded", "Arial Black", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 4vw, 2.75rem);
  --step-4: clamp(2.75rem, 9vw, 6.5rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: var(--step-0); line-height: 1.6; color: var(--night); background: var(--mist); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, dt { font-family: var(--display); line-height: 1.08; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: var(--step-3); font-weight: 700; max-width: 18ch; }
p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--white); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* Signature: the tunnel-color livery stripe. Used only at the top and bottom of the page. */
.livery {
  height: 18px;
  background: linear-gradient(90deg, var(--sky) 0 30%, var(--amber) 30% 62%, var(--signal) 62% 88%, var(--led) 88% 100%);
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--night); color: var(--white); }
.hero-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero-copy { padding: 1.75rem var(--gutter) 2.5rem; }
.hero h1 { font-size: var(--step-4); font-weight: 800; max-width: 9ch; }
.lede { font-size: var(--step-1); line-height: 1.45; margin: 1.25rem 0 1.75rem; max-width: 30rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.btn { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 1rem; text-decoration: none; padding: .95rem 1.4rem; border-radius: 999px; }
.btn-primary { background: var(--signal); color: var(--white); }
.btn-primary:hover { background: #d94a17; }
.btn-ghost { border: 2px solid currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

@media (min-width: 760px) {
  .hero-img { aspect-ratio: auto; height: min(78vh, 56vw); object-position: center 45%; }
  .hero-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 3rem; align-items: end; padding: 2.5rem var(--gutter) 3rem; max-width: 84rem; margin: 0 auto; }
  .hero h1 { max-width: none; }
  .lede { margin: 0 0 1.5rem; }
}

/* ---------- What you can book ---------- */
.book { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); display: grid; gap: 2.5rem; max-width: 76rem; margin: 0 auto; }
.services { margin: 0; display: grid; }
.services > div { padding: 1.4rem 0; border-top: 2px solid var(--night); display: grid; gap: .4rem; }
.services > div:last-child { border-bottom: 2px solid var(--night); }
.services dt { font-size: var(--step-1); font-weight: 600; }
.services dd { margin: 0; max-width: var(--measure); }
@media (min-width: 900px) {
  .book { grid-template-columns: 1fr 1.6fr; }
  .book h2 { position: sticky; top: 2rem; align-self: start; }
  .services > div { grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
}

/* ---------- Rolling billboards ---------- */
.billboards { background: var(--night); color: var(--white); padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.billboards-intro { max-width: 76rem; margin: 0 auto 2.5rem; display: grid; gap: 1rem; }
.billboards-intro h2 { color: var(--amber); }
.mosaic { list-style: none; margin: 0 auto; padding: 0; max-width: 76rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.mosaic li { margin: 0; }
.mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.mosaic p { font-size: var(--step--1); margin: .5rem 0 0; color: #c9d6e6; }
@media (min-width: 600px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic .tall img { aspect-ratio: 3 / 4; }
}
@media (min-width: 900px) {
  .billboards-intro { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
  .mosaic li { grid-column: span 2; }
  .mosaic .wide { grid-column: span 4; }
  .mosaic .wide img { aspect-ratio: 16 / 9; }
  .mosaic .tall { grid-row: span 2; }
  .mosaic .tall img { aspect-ratio: auto; height: calc(100% - 2rem); }
}

/* ---------- After dark ---------- */
.after-dark { background: #0d1529; color: var(--white); padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); display: grid; gap: 2.5rem; }
.after-dark h2 { color: var(--led); }
.dark-copy p { margin-top: 1rem; }
.dark-copy img { border-radius: 6px; margin-top: 2rem; }
.loop { width: 100%; max-width: 22rem; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; justify-self: center; background: var(--night); }
@media (min-width: 900px) {
  .after-dark { grid-template-columns: minmax(16rem, 22rem) 1fr; max-width: none; padding-left: max(var(--gutter), calc((100vw - 76rem) / 2)); padding-right: max(var(--gutter), calc((100vw - 76rem) / 2)); align-items: center; gap: 4rem; }
}

/* ---------- Cities ---------- */
.cities { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); max-width: 76rem; margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; }
.cities-img { border-radius: 6px; width: 100%; }
.cities h2 { margin-bottom: 1rem; }
.city-list { list-style: none; margin: 1.5rem 0 0; padding: 0; font-family: var(--display); font-weight: 700; font-size: var(--step-2); line-height: 1.25; }
.city-list li:first-child { color: var(--signal); }
@media (min-width: 900px) { .cities { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- Contact ---------- */
.contact {
  color: var(--white); padding: clamp(6rem, 16vw, 12rem) var(--gutter);
  background: linear-gradient(rgba(22,35,63,.15), rgba(22,35,63,.7)), url("/assets/img/tunnel-700.webp") center / cover;
}
@media (min-width: 760px) {
  .contact { background-image: linear-gradient(rgba(22,35,63,.1), rgba(22,35,63,.65)), url("/assets/img/tunnel-1200.webp"); }
}
.contact-copy { max-width: 76rem; margin: 0 auto; }
.contact h2 { font-size: var(--step-3); max-width: 16ch; margin-bottom: 1.25rem; text-shadow: 0 2px 18px rgba(13,21,41,.7); }
.contact p { text-shadow: 0 1px 10px rgba(13,21,41,.8); }

/* ---------- Footer ---------- */
footer { background: var(--night); color: #c9d6e6; }
footer p { padding: 1.5rem var(--gutter) 2rem; margin: 0; max-width: none; font-size: var(--step--1); }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 2rem; background: var(--night); color: var(--white); }
.notfound h1 { font-size: var(--step-4); }
.notfound p { margin: 1rem auto; }
.notfound a { color: var(--amber); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}