/* Site stylesheet. Visual plan and rationale in DESIGN.md.
   No framework: a single lightweight file helps speed and SEO. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.825fabef695f.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Colours (see DESIGN.md) */
  --slate: #22313a;
  --slate-2: #4b5d67;      /* secondary text: 6:1 on --sky */
  --sea: #0b5c78;
  --sea-dark: #08435a;
  --yellow: #f2b705;
  --yellow-dark: #d9a404;
  --yellow-light: #fff1bd;
  --sky: #eaf2f5;
  --paper: #fff;
  --rule: #d2dde2;          /* decorative rules */
  --field-border: #6f818b;    /* input borders: at least 3:1 */
  --on-dark: #d7e2e8;       /* footer text */
  --error: #b42318;
  --error-bg: #fef3f2;
  --success: #067647;
  --success-bg: #ecfdf3;

  /* Typography */
  --font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --fs-small: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --measure: 52ch;          /* ≈ 70-75 real characters with this font */

  /* Spacing: 4px-based scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  --radius: 6px;
  --radius-lg: 14px;
}

/* ---- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--slate-2) var(--sky); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--slate);
  background: var(--paper);
  accent-color: var(--sea);
  overflow-wrap: break-word;
}
::selection { background: var(--yellow-light); color: var(--slate); }
img, svg { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; margin-top: var(--s-7); }
h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: var(--s-5); }
p, li, dd { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }

a { color: var(--sea); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sea-dark); text-decoration-thickness: 2px; }
a[href^="tel:"] { white-space: nowrap; } /* a phone number is never split over two lines */
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 2px; }

.container { width: min(100% - 2 * var(--s-4), 72rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--slate-2); }
.small-text { font-size: var(--fs-small); color: var(--slate-2); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 10; background: var(--paper); padding: var(--s-2) var(--s-3); }

/* ---- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font: inherit; font-weight: 700; line-height: 1.2;
  color: var(--slate); background: var(--yellow);
  border: 2px solid var(--yellow); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); color: var(--slate); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--slate); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-secondary { background: transparent; border-color: var(--slate); }
.btn-secondary:hover { background: var(--slate); color: var(--paper); border-color: var(--slate); }

/* ---- Header -------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
/* Offers banner: under the header on every public page while a promotion has bookable dates. */
.offers-banner { background: var(--yellow-light); border-bottom: 1px solid var(--rule); font-size: var(--fs-small); }
.offers-banner .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-block: var(--s-2); }
.offers-banner a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-3); }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; color: var(--slate); text-decoration: none; font-weight: 800; font-size: 1.125rem; line-height: 1.1; }
.logo span span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--slate-2); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.menu { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: 0; padding: 0; list-style: none; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--slate); text-decoration: none; }
.menu a:hover { color: var(--sea); text-decoration: underline; }
.menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
@media (max-width: 40rem) {
  .header-inner { gap: var(--s-1) var(--s-3); padding-block: var(--s-2); }
  .site-nav { display: contents; }
  .site-nav > .btn { display: none; } /* the bottom bar carries it, within thumb's reach */
  .menu { order: 1; flex: 1 0 100%; gap: 0 var(--s-4); }
  .logo { font-size: 1rem; }
}
@media (min-width: 64rem) {
  .site-header { position: sticky; top: 0; z-index: 5; }
}

/* Inner pages: a strip of the harbour, the bus parked at this page's stop (see base.html). */
.band { --band-h: clamp(120px, 14vw, 200px); position: relative; height: var(--band-h); overflow: hidden; container-type: inline-size; background: #bcdbef; }
.band-scene { display: block; width: 100%; height: 100%; }
@media (max-width: 40rem) { .band { --band-h: 96px; } } /* on a phone the page content comes first */
/* --s is the size of one unit of the drawing: the picture covers the strip, anchored at the bottom */
.band-bus {
  --s: max(100cqw / 1600, var(--band-h) / 679);
  position: absolute; left: var(--stop, 50%); bottom: calc(var(--s) * 56);
  width: calc(var(--s) * 300); height: auto; translate: -50% 0;
  filter: drop-shadow(0 2px 2px rgb(8 32 43 / 0.3));
  view-transition-name: bus;
}

.breadcrumbs { font-size: var(--fs-small); padding-top: var(--s-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--slate-2); }

/* ---- Sections ------------------------------------------------------- */
.section { padding-block: var(--s-8); }
.section > :first-child, .section .container > :first-child { margin-top: 0; }
.section-tinted { background: var(--sky); }
.section-tinted .lead, .section-tinted .small-text { color: var(--slate-2); }
.page { padding-block: var(--s-6) var(--s-8); }

/* Home: Genoa from the sea. The hero is the panorama; the copy sits in the
   morning sky and the bus runs on the Sopraelevata (see DESIGN.md). */
.hero {
  /* tall enough to carry the bus, short enough that the road stays above the fold */
  --scene-h: clamp(320px, min(44vw, 100svh - 16rem), 700px);
  position: relative; overflow: hidden;
}
/* the first screen: copy in the sky, the panorama anchored to the bottom, overlapping where space is short */
.hero-stage {
  display: grid; min-height: max(34rem, calc(100svh - 4.6rem));
  /* the sky of the panorama, carried up behind the copy */
  background: linear-gradient(#bcdbef, #c6e0ee);
}
.hero-stage > * { grid-area: 1 / 1; }
.hero-copy { position: relative; z-index: 1; align-self: start; padding-top: var(--s-7); }
/* on short screens (an office laptop) the headline gives up some size so the bus stays in view */
.hero-copy h1 { font-size: min(var(--fs-h1), 7.5svh); }
.hero .btn-secondary:not(:hover) { background: var(--paper); }
.hero-copy .lead { color: var(--slate); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
/* the top edge of the illustration fades into the same sky */
.scene { display: block; align-self: end; width: 100%; height: var(--scene-h); mask-image: linear-gradient(transparent, #000 12%); }
@media (max-width: 40rem) {
  .hero { --scene-h: clamp(260px, 100svh - 29rem, 440px); }
  .hero-stage { min-height: max(30rem, calc(100svh - 9.25rem)); }
  .hero-copy { padding-top: var(--s-5); }
  .hero-copy .lead { font-size: var(--fs-body); }
  .hero .actions { margin-top: var(--s-4); }
}

/* The route of a typical trip, set on the asphalt under the road. */
/* it slides over the foot of the pillars, so the road and the route read as one strip */
.route { position: relative; margin-top: calc(var(--scene-h) * -0.06); background: var(--slate); color: var(--on-dark); padding-block: var(--s-5) var(--s-6); }
.route-track { position: relative; }
/* the bus marker rides the line and stops on the last stop: each stop starts a quarter of the
   track plus a gap further, so the last one sits at 75% + 3/4 of a gap */
.route-bus { position: absolute; z-index: 2; top: -0.4rem; left: calc(0.5rem + var(--progress) * (75% + 0.75 * var(--s-4))); width: 46px; height: auto; translate: -50% 0; }
.route h2 { color: var(--paper); margin: 0 0 var(--s-5); }
.route :focus-visible { outline-color: var(--yellow); }
/* the price, right where the trip it pays for is drawn */
.route-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-5); max-width: none; margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--slate-2); }
.route-price strong { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--paper); white-space: nowrap; }
.route-price a { color: var(--paper); }
.route { --progress: 1; }
.stops {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  margin: 0; padding: var(--s-6) 0 0; list-style: none;
}
.stops li { position: relative; font-size: var(--fs-small); line-height: 1.4; color: var(--on-dark); }
.stops time { display: block; font-size: var(--fs-lead); font-weight: 800; color: var(--paper); font-variant-numeric: tabular-nums; }
/* the road line, the yellow stretch already driven, and the stop dots */
.stops::before, .stops::after { content: ""; position: absolute; top: 0.4rem; left: 0.5rem; right: calc(25% - 0.75 * var(--s-4) - 0.5rem); height: 3px; border-radius: 2px; }
.stops::before { height: 0; border-top: 3px dashed var(--field-border); }
.stops::after { background: var(--yellow); transform-origin: left; transform: scaleX(var(--progress)); }
.stops li::before { content: ""; position: absolute; top: calc(-1 * var(--s-6) + 0.4rem - 7px); left: 0.5rem; width: 17px; height: 17px; margin-left: -8px; border-radius: 50%; background: var(--slate); border: 3px solid var(--field-border); z-index: 1; }
/* a stop lights up once the bus has reached it */
.stops li::after { content: ""; position: absolute; top: calc(-1 * var(--s-6) + 0.4rem - 7px); left: 0.5rem; width: 17px; height: 17px; margin-left: -8px; border-radius: 50%; background: var(--yellow); z-index: 1; opacity: clamp(0, (var(--progress) * 3 - var(--i, 0)) * 20 + 1, 1); }
@media (max-width: 40rem) {
  .stops { grid-template-columns: none; gap: var(--s-4); padding: 0 0 0 var(--s-6); }
  .stops::before, .stops::after { top: 0.5rem; bottom: 1.6rem; left: 0.5rem; right: auto; width: 3px; height: auto; }
  .stops::before { width: 0; border-top: 0; border-left: 3px dashed var(--field-border); }
  .stops::after { transform-origin: top; transform: scaleY(var(--progress)); }
  .stops li::before, .stops li::after { top: 0.15rem; left: calc(-1 * var(--s-6) + 0.5rem); }
  /* upright, its wheels on the stop it has reached */
  .route-bus { top: calc(0.65rem + var(--progress) * (100% - 3.1rem)); left: 0.5rem; width: 34px; translate: -50% -100%; }
}

/* Strengths: three statements, no boxes */
.three-columns { display: grid; gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
@media (min-width: 48rem) { .three-columns { grid-template-columns: repeat(3, 1fr); } }
.three-columns h3 { margin-top: 0; }
.three-columns p { margin: 0; }
.places { margin: 0; padding-left: 1.1em; }
.places li + li { margin-top: var(--s-2); }

/* Service list with rules */
.service-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.service-list > li { max-width: none; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .service-list > li { display: grid; grid-template-columns: 18rem 1fr; gap: var(--s-6); } }
.service-list h2, .service-list h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.service-list p { margin: 0 0 var(--s-2); }

/* Numbered steps (it really is a sequence) */
.steps { counter-reset: step; list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--s-3); border-radius: 50%; background: var(--slate); color: var(--paper); font-weight: 800; }
.steps strong { display: block; font-size: var(--fs-h3); }

.big-figure { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: var(--s-4) 0 var(--s-2); font-variant-numeric: tabular-nums; }

/* Tables */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5); max-width: 50rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.table thead th { font-size: var(--fs-small); color: var(--slate-2); }
/* Phones: four columns do not fit, so each row becomes a small card and every cell
   repeats its column heading (the data-label attribute set in the template). */
@media (max-width: 40rem) {
  .table, .table tbody, .table tr, .table th, .table td { display: block; }
  .table thead { display: none; }
  .table tr { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .table th, .table td { padding: var(--s-1) 0; border: 0; }
  .table td::before { content: attr(data-label); display: block; font-size: var(--fs-small); color: var(--slate-2); }
}

/* FAQ */
.faq { border-bottom: 1px solid var(--rule); max-width: 50rem; }
.faq:first-of-type { border-top: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding-block: var(--s-4); font-weight: 700; font-size: 1.125rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--sea); }
.faq[open] summary::after { content: "−"; }
.faq p { padding-bottom: var(--s-4); margin: 0; }

/* Contact */
.phone-large { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; color: var(--slate); text-decoration: none; }
.phone-large:hover { color: var(--sea); }
.contact-details { display: grid; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0; }
@media (min-width: 40rem) { .contact-details { grid-template-columns: max-content 1fr; } }
.contact-details dt { font-weight: 700; }
.contact-details dd { margin: 0; }
address { font-style: normal; }

/* Long-form text (privacy) */
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }

/* ---- Form ---------------------------------------------------------- */
.form fieldset { border: 0; border-top: 1px solid var(--rule); padding: var(--s-5) 0 0; margin: 0 0 var(--s-5); min-width: 0; }
.form legend { font-weight: 800; font-size: var(--fs-h3); padding: 0 var(--s-3) 0 0; }
.row { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.field { margin-bottom: var(--s-5); }
.field label { display: inline-block; font-weight: 700; margin-bottom: var(--s-1); }
.required-mark { color: var(--error); margin-left: 2px; }
.field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: var(--s-3);
  font: inherit; color: var(--slate); background: var(--paper);
  border: 1px solid var(--field-border); border-radius: var(--radius);
  caret-color: var(--sea);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--sea); }
.field .help { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--slate-2); }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s-3); align-items: start; }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; }
.field-check label { font-weight: 400; margin: 0; }
.field-check .error { grid-column: 1 / -1; }
.field-check .help { grid-column: 2; }
/* A group of radio buttons: Django's RadioSelect renders a <div> of <div><label><input></label></div>. */
.field-radio > div > div { display: flex; align-items: center; min-height: 44px; }
.field-radio > div label { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-weight: 400; }
.field input[type="radio"] { width: 22px; height: 22px; margin: 0; }
.field.has-error input:not([type="checkbox"], [type="radio"]), .field.has-error select, .field.has-error textarea { border-color: var(--error); border-width: 2px; }
.error { color: var(--error); font-weight: 700; font-size: var(--fs-small); margin: var(--s-1) 0 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: var(--s-4) var(--s-5); border-radius: var(--radius); margin-bottom: var(--s-5); max-width: none; }
.notice h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-2); }
.notice ul { margin: 0; padding-left: var(--s-5); }
.notice-error { background: var(--error-bg); color: var(--error); border: 1px solid currentColor; }
.notice-error a { color: var(--error); }
.notice-success { background: var(--success-bg); color: var(--success); border: 1px solid currentColor; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Booking: steps, calendar, chosen slot, price ------------------- */
/* The two steps are two stops of the route, like the typical trip on the home page. */
.booking-steps { display: flex; gap: var(--s-6); margin: 0 0 var(--s-6); padding: 0; list-style: none; font-size: var(--fs-small); font-weight: 700; color: var(--slate-2); position: relative; }
.booking-steps li { position: relative; display: flex; align-items: center; gap: var(--s-2); max-width: none; }
.booking-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--slate); background: var(--paper); flex: none; }
.booking-steps li + li::after { content: ""; position: absolute; right: calc(100% + 4px); width: calc(var(--s-6) - 8px); height: 3px; background: var(--slate); }
.booking-steps li[aria-current] { color: var(--slate); }
.booking-steps li[aria-current]::before { background: var(--yellow); }
.booking-steps a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; }

.group-size { margin-bottom: var(--s-6); }
.group-size label { display: block; font-weight: 700; margin-bottom: var(--s-2); }
.group-size-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.group-size input {
  width: 8rem; min-height: 48px; padding: var(--s-3); font: inherit; font-variant-numeric: tabular-nums;
  color: var(--slate); background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius); caret-color: var(--sea);
}
.group-size input:focus-visible { outline-offset: 0; border-color: var(--sea); }
.group-size .small-text { margin: var(--s-2) 0 0; }

.cal { margin-bottom: var(--s-6); }
.cal-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); }
.cal-head h2 { margin: 0; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.cal-nav { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; font-weight: 700; text-decoration: none; text-transform: capitalize; }
.cal-nav-next { justify-self: end; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: var(--fs-small); color: var(--slate-2); }
.cal-key { display: inline-block; width: 1.5rem; height: 6px; border-radius: 3px; background: var(--rule); }
.cal-key-free { background: var(--sea); }
.cal-legend > span { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-4); white-space: nowrap; }

.cal-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s-2); }
.cal-weekday { font-size: var(--fs-small); font-weight: 700; color: var(--slate-2); text-transform: capitalize; padding-inline: var(--s-2); }
/* Each day is a stretch of road (the slate rule on top); a day with room is one big target. */
.day { display: flex; flex-direction: column; gap: var(--s-2); min-height: 7.5rem; padding: var(--s-2); border-top: 3px solid var(--slate); background: var(--paper); color: var(--slate); }
.day-empty { border-top-color: transparent; }
.day-past { border-top-color: var(--rule); color: var(--slate-2); }
.day-full { border-top-color: var(--rule); background: var(--sky); }
a.day { text-decoration: none; border-radius: 0 0 var(--radius) var(--radius); transition: background-color 0.15s; }
a.day:hover { background: var(--sky); }
a.day:hover .day-hours { text-decoration: underline; }
.day-date { margin: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.day-date span:first-child { display: none; }
.day-hours { margin: 0; font-size: var(--fs-small); line-height: 1.35; font-variant-numeric: tabular-nums; }
a.day .day-hours { color: var(--sea); font-weight: 700; }
.day-full .day-hours { color: var(--slate-2); }
/* A promotion on the day (bookings.models.Offer): a lower price for trips inside its hours. */
.day-offer { align-self: flex-start; padding: 2px var(--s-2); font-size: var(--fs-small); font-weight: 700; line-height: 1.35; color: var(--slate); background: var(--yellow-light); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
/* The day from 6:00 to 17:00: free stretches in sea blue, taken ones grey. */
.timeline { display: flex; gap: 2px; height: 6px; margin-top: auto; }
.timeline span { border-radius: 3px; background: var(--rule); }
.timeline .tl-free { background: var(--sea); }

/* Phones: the month becomes a list of days. */
@media (max-width: 48rem) {
  .cal-grid { grid-template-columns: 1fr; gap: 0; }
  .day { min-height: 0; display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-3) var(--s-2); border-top-width: 1px; border-top-color: var(--rule); border-radius: 0; }
  .day-date { grid-row: span 2; }
  .day-full { background: none; }
  .day-date span:first-child { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--slate-2); text-transform: capitalize; }
  .timeline { margin-top: 0; }
  .day-offer, .timeline { grid-column: 2; } /* the date spans two rows; the rest stays beside it */
  .cal-nav span { display: none; }
  .cal-weekday, .day-empty, .day-past { display: none; } /* after .day: same specificity */
}

.chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); background: var(--sky); border-radius: var(--radius-lg); }
.chosen p { margin: 0; }
.chosen strong { font-size: var(--fs-h3); }
.chosen strong::first-letter { text-transform: uppercase; }
.chosen a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

.estimate { padding: var(--s-4) var(--s-5); background: var(--yellow-light); border-radius: var(--radius-lg); }
.estimate-label { margin: 0; font-weight: 700; }
.estimate-amount { margin: 0 0 var(--s-2); font-size: var(--fs-h2); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.estimate .small-text { margin: 0; color: var(--slate); }
.estimate-offer { margin: 0 0 var(--s-2); font-weight: 700; }

/* Home: the promotions, one row per date, separated by thin rules (no card grid, see DESIGN.md). */
.offer-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; max-width: 40rem; }
.offer-list li { border-top: 1px solid var(--rule); }
.offer-list li:last-child { border-bottom: 1px solid var(--rule); }
.offer-list a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); min-height: 44px; padding: var(--s-4) var(--s-2); color: var(--slate); text-decoration: none; transition: background-color 0.15s; }
.offer-list a:hover { background: var(--sky); }
.offer-list a:hover .offer-when strong { text-decoration: underline; }
.offer-when::first-letter { text-transform: uppercase; }
.offer-price { padding: 2px var(--s-3); font-size: var(--fs-h3); font-weight: 800; background: var(--yellow-light); border-radius: var(--radius); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Google Maps address suggestions (static/js/maps.js), under the field they belong to. */
.field:has(.suggestions) { position: relative; }
.suggestions {
  position: absolute; z-index: 3; left: 0; right: 0; margin: var(--s-1) 0 0; padding: var(--s-1) 0; list-style: none;
  background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(34 49 58 / 0.16);
}
.suggestions li { max-width: none; min-height: 44px; display: flex; align-items: center; padding: var(--s-2) var(--s-3); cursor: pointer; line-height: 1.3; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--sky); color: var(--sea-dark); }
.route-map { margin: 0 0 var(--s-5); }
.route-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 22rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.route-map figcaption { margin-top: var(--s-1); }

.summary { margin: 0 0 var(--s-6); border-top: 1px solid var(--rule); }
.summary div { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.summary dt { font-weight: 700; }
.summary dd { margin: 0; }
.summary dd::first-letter { text-transform: uppercase; }
.confirm-form { margin-bottom: var(--s-4); }

/* ---- Footer -------------------------------------------------------- */
.site-footer { margin-top: 0; padding-block: var(--s-7); background: var(--slate); color: var(--on-dark); font-size: var(--fs-small); }
.site-footer a { color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--yellow); }
.footer-grid { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 2fr 1fr; } }
.site-footer strong { color: var(--paper); font-size: 1rem; }
.site-footer p { margin: var(--s-1) 0 0; }

/* Home: the bus arrives at the school, at the end of the booking steps. */
.arrival { display: block; width: 100%; height: auto; min-height: 120px; margin: 0 0 var(--s-6); }
.arrival-road { fill: var(--slate); }
.arrival-line { stroke: var(--on-dark); stroke-width: 2.5; stroke-dasharray: 18 14; }

/* Phones: a bar with the two actions, always within thumb's reach. */
.quick-actions { display: none; }
@media (max-width: 40rem) {
  .quick-actions {
    position: fixed; inset: auto 0 0; z-index: 6;
    display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
    padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px rgb(34 49 58 / 0.12);
  }
  body:has(.quick-actions) .site-footer { padding-bottom: calc(var(--s-7) + 4rem); }
}

/* ---- Motion -----------------------------------------------------------
   One authored moment: the trip. On load the bus drives onto the coast road;
   as the page scrolls it drives on, the route bar fills stop by stop and the
   city drifts slower than the road in front of it. Plain CSS, no JavaScript.
   Keyframes only describe the start, so without support (or with reduced
   motion) everything is in its final place and the route shows complete. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
@property --progress { syntax: "<number>"; inherits: true; initial-value: 1; }

@keyframes drive-in { from { transform: translateX(-800px); } }
.bus { animation: drive-in 1.8s 0.2s var(--ease-out) both; }

/* Small, quick feedback on the controls you press. */
.btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.faq summary::after { transition: transform 0.25s var(--ease-out); }
.faq[open] summary::after { transform: rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}

@supports (animation-timeline: scroll()) {
  @keyframes drive-on { to { transform: translateX(700px); } }
  @keyframes drift-city { to { transform: translateY(20px); } }
  @keyframes route { from { --progress: 0; } }
  .bus-scroll { animation: drive-on linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  .layer-city { animation: drift-city linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .route { animation: route linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  /* on the home page the hero carries the actions, so the bar slides in once it scrolls away */
  @keyframes bar-in { from { translate: 0 100%; visibility: hidden; } }
  body:has(.hero) .quick-actions { animation: bar-in linear both; animation-timeline: scroll(root); animation-range: 35vh 60vh; }
}
@keyframes pull-up { from { transform: translateX(-260px); } }
@supports (animation-timeline: view()) {
  .arrival-bus { animation: pull-up linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
}
/* request sent: the bus pulls up at the school as the page opens */
@keyframes arrive { from { transform: translateX(-700px); } }
.arrival-now .arrival-bus { animation: arrive 1.8s 0.3s var(--ease-out) both; }

/* Moving between pages, the bus drives from this page's stop to the next one's while the
   rest cross-fades (cross-document view transitions; other browsers just load the page). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(bus) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}