/* ============================================================
   West Coast Wilderness Railway — Plan Your Visit / Journeys /
   Rinadeena, Rack & Rainforest.
   Static implementation of the Figma design (file 1bQEJbNHNRN4tiiKjUX8Sq,
   imported by html.to.design from wcwr.com.au). Built by Data Story
   as a hosting POC, sibling to twc-content-hub.
   Design tokens transcribed from Figma get_design_context output.
   ============================================================ */

/* ---- Custom fonts ---- */
/* Sidetrack — WCWR's heading face (custom). Sourced from the live
   wcwr.com.au theme bundle so headings match the live brand exactly. */
@font-face {
  font-family: "Sidetrack";
  src: url("/assets/fonts/sidetrack.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sidetrack";
  src: url("/assets/fonts/sidetrack-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  --cream:        #d9d1bd;   /* primary text/headings on dark, divider lines, cream bands */
  --warm-grey:    #968c72;   /* body text on dark; warm-taupe card backgrounds */
  --blue:         #71abc5;   /* "Expedition" badge accent */
  --gold:         #d9ad40;   /* primary CTA — Buy Tickets, More Info */
  --ink:          #231f20;   /* page background, text on cream */
  --black:        #000000;   /* footer top section */
  --hairline:     rgba(217, 209, 189, 0.18);
  --radius:       6px;
  --margin:       80px;
  --maxw:         1520px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* overflow-x: clip (not hidden) — clip prevents horizontal scroll the
   same way but doesn't break position: sticky on descendant elements
   the way overflow: hidden does. Supported in all modern browsers. */
html { overflow-x: clip; }
body {
  font-family: "Work Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; font-size: 18px; line-height: 25.2px;
  color: var(--cream); background: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- Type helpers — sizes transcribed from Figma; family is Sidetrack
   per the live wcwr.com.au CSS (--headings-font-family: Sidetrack) ---- */
.h1 { font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400; font-size: 100px; line-height: 1; color: var(--cream); letter-spacing: 0; margin: 0; }
.h2 { font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400; font-size: 32px; line-height: 1; color: var(--cream); margin: 0; }
.h2--display { font-size: 72px; line-height: 1; }
.h3 { font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0; }
.h4 { font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; }
.body { font-size: 18px; line-height: 25.2px; color: var(--warm-grey); margin: 0; }
.body--cream { color: var(--cream); }
.body--ink { color: var(--ink); }
.caption { font-size: 14px; line-height: 20px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Work Sans", sans-serif; font-weight: 400; font-size: 18px;
  line-height: 18px; padding: 13px 24px;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: transparent; color: var(--gold); }
.btn--ghost-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--ghost-cream:hover { background: var(--cream); color: var(--ink); }

/* ---- Layout ---- */
/* Content sections sit at 70% of viewport, centred — matches client request.
   Nav, hero image, footer, POC ribbon stay edge-to-edge.                    */
.section { padding-left: var(--margin); padding-right: var(--margin); }
.shell { max-width: var(--maxw); margin: 0 auto; }
.muted { color: var(--warm-grey); }
.content-width { max-width: 70%; margin-left: auto; margin-right: auto; }

/* ============================================================
   POC RIBBON  (not in the Figma — Data Story build banner)
   ============================================================ */
.poc-ribbon {
  background: var(--gold); color: var(--ink); text-align: center;
  font-size: 13px; line-height: 1.4; padding: 8px 16px;
  font-family: "Work Sans", sans-serif; letter-spacing: 0.3px;
}

/* ============================================================
   HEADER  — matches wcwr.com.au original.
   Three-column grid: BUY TICKETS button left · centred logo ·
   Plan + Discover + corner-bracket hamburger right.
   ============================================================ */
.nav {
  /* Sticky to the top of the viewport while scrolling. Sits below the
     sticky Buy Tickets bottom bar (z-index 100) but above all page
     content. Solid --ink background keeps content readable underneath. */
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); border-bottom: 1px solid var(--hairline);
  padding: 20px var(--margin);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
}
.nav__left { display: flex; justify-content: flex-start; align-items: center; }
.nav__buy {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 0;
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px 26px;
  transition: background-color .15s ease, color .15s ease;
}
.nav__buy:hover { background: var(--gold); color: var(--ink); }
.nav__logo { display: flex; justify-content: center; align-items: center; }
.nav__logo img { height: 100px; width: auto; }
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  color: var(--cream); font-size: 16px; line-height: 1;
  font-family: "Work Sans", sans-serif;
  letter-spacing: .01em;
  padding: 6px 0;
  transition: color .15s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--gold); }
.nav__menu-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: color .15s ease;
}
.nav__menu-btn svg { width: 44px; height: 44px; display: block; }
.nav__menu-btn:hover { color: var(--gold); }

/* ============================================================
   BREADCRUMBS  (Figma 1:5) — above hero, centred
   ============================================================ */
.breadcrumbs {
  /* ~2cm gap below the breadcrumbs before the hero image */
  padding: 20px var(--margin) 76px;
  display: flex; justify-content: center;
}
.breadcrumbs ol {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none;
  font-size: 16px; color: var(--cream);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 12px; }
.breadcrumbs li a { color: var(--cream); }
.breadcrumbs li a:hover { color: var(--gold); }
.breadcrumbs .sep { color: var(--warm-grey); }
.breadcrumbs li:last-child { color: var(--warm-grey); }

/* ============================================================
   HERO IMAGE  (Figma 1:13)
   ============================================================ */
.hero {
  padding: 0;
}
.hero__media {
  /* Ticket-shape mask extracted from wcwr.com.au's .mask-1 — curved cutouts
     at all four corners, the classic WCWR train-ticket frame.
     Container aspect matches the source image (1900x600 = ~3.17:1) so the
     image sits inside the ticket frame without being upscaled and cropped. */
  width: 70%;
  aspect-ratio: 1900 / 600;
  max-height: 616px;
  margin: 0 auto;
  background: var(--ink); position: relative;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='1568'%20height='530'%20viewBox='0%200%201568%20530'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1498%200C1498%2038.6599%201529.34%2070%201568%2070V460C1529.34%20460%201498%20491.34%201498%20530H70C70%20491.34%2038.6599%20460%200%20460V70C38.6599%2070%2070%2038.6599%2070%200H1498Z'%20fill='black'/%3e%3c/svg%3e");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-image: url("data:image/svg+xml,%3csvg%20width='1568'%20height='530'%20viewBox='0%200%201568%20530'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1498%200C1498%2038.6599%201529.34%2070%201568%2070V460C1529.34%20460%201498%20491.34%201498%20530H70C70%20491.34%2038.6599%20460%200%20460V70C38.6599%2070%2070%2038.6599%2070%200H1498Z'%20fill='black'/%3e%3c/svg%3e");
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   TITLE BLOCK  (Figma 1:19 — H1 below hero)
   ============================================================ */
.title-block {
  padding: 94px 0 0;
}
.title-block__inner { max-width: 70%; margin: 0 auto; }
.title-block h1 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: clamp(56px, 7vw, 100px);
  line-height: 1; color: var(--cream); margin: 0;
}

/* ============================================================
   TAGLINE ROWS  (Figma 1:20 + 1:24) — Expedition badge + steam loco line
   ============================================================ */
.tagline-row {
  padding: 30px 0 0;
}
.tagline-row__inner {
  max-width: 70%; margin: 0 auto;
  border-top: 1px solid var(--cream);
  padding: 28px 0;
  display: flex; align-items: center; gap: 30px;
}
.tagline-row__inner--no-rule { border-top: 0; padding-top: 0; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--blue); color: var(--blue);
  padding: 4px 14px; border-radius: var(--radius);
  font-size: 18px; line-height: 25.2px; white-space: nowrap;
}
.tagline-row p { margin: 0; color: var(--warm-grey); font-size: 18px; line-height: 25.2px; flex: 1; }
.tagline-row .loco-icon {
  width: 90px; height: 54px; flex-shrink: 0; color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
}
.tagline-row .loco-icon svg { width: 100%; height: 100%; }

/* ============================================================
   BODY PARAGRAPHS  (Figma 1:68–1:72) — left column journey description
   ============================================================ */
.journey-body {
  padding: 30px 0 80px;
}
.journey-body__inner {
  max-width: 70%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 28px;
}
.journey-body p { color: var(--warm-grey); font-size: 18px; line-height: 25.2px; margin: 0; }

/* ============================================================
   INTRO — two-column top section.
   Left: title + tagline rows + journey-body paragraphs.
   Right: sticky .booking sidebar (stopping / calendar / fares / buy).
   Mirrors the live wcwr.com.au journey layout.
   ============================================================ */
/* Bottom padding is what creates the gap before the next block
   (Premium / Standard Carriage). Sophie asked for ~2cm of space there. */
.intro { padding: 64px 0 76px; }
.intro__grid {
  max-width: 70%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px;
  align-items: start;
}
.intro__title {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 80px; line-height: 1.05; color: var(--cream); margin: 0;
}
.intro__row {
  border-top: 1px solid var(--cream); margin-top: 30px; padding-top: 28px;
  display: flex; align-items: center; gap: 30px;
}
.intro__row p { margin: 0; color: var(--warm-grey); font-size: 18px; line-height: 25.2px; flex: 1; }
.intro__row .loco-icon {
  width: 90px; height: 54px; flex-shrink: 0; color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
}
.intro__row .loco-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.intro__row .loco-icon svg * { fill: currentColor; stroke: none; }
.inline-link { color: var(--cream); text-decoration: underline; }
.intro__body { display: flex; flex-direction: column; gap: 28px; margin-top: 44px; }
.intro__body p { color: var(--warm-grey); font-size: 18px; line-height: 25.2px; margin: 0; }

/* Booking sidebar */
.booking {
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 28px;
}
.booking__head {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 28px; line-height: 1; color: var(--cream); margin: 0 0 16px;
}
.booking__stations {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 18px; line-height: 22px; color: var(--cream);
}
/* continuous gold rail behind the station dots */
.booking__stations::before {
  content: ""; position: absolute; left: 5px; top: 11px; bottom: 11px;
  width: 2px; background: var(--gold); opacity: .45;
}
.booking__stations li { display: flex; align-items: center; gap: 14px; }
.booking__stations li::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--ink);
  flex-shrink: 0; position: relative; z-index: 1; box-sizing: border-box;
}

/* Operating-dates calendar widget */
.cal {
  border: 1px solid var(--hairline); padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.cal__range {
  display: block; text-align: center; color: var(--cream);
  font-family: "Sidetrack", "Work Sans", sans-serif; font-size: 16px; letter-spacing: .03em;
}
.cal__week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.cal__day {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 0; border-left: 1px solid var(--hairline);
}
.cal__day:first-child { border-left: 0; }
.cal__day i { font-style: normal; color: var(--warm-grey); font-size: 14px; }
.cal__day b { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.cal__day.on i { color: var(--cream); }
.cal__day.on b { background: var(--gold); }
.cal__line { text-align: center; color: var(--warm-grey); font-size: 13px; line-height: 18px; margin: 0; }
.cal__nav { display: flex; justify-content: flex-end; gap: 20px; margin-top: 2px; }
.cal__arrow {
  background: none; border: 0; color: var(--warm-grey); font-size: 18px;
  cursor: pointer; padding: 2px 4px; line-height: 1;
}
.cal__arrow:hover { color: var(--gold); }

.booking__pricing { display: flex; flex-direction: column; gap: 6px; }
.booking__pricing .row {
  display: flex; justify-content: space-between; padding: 5px 0;
  font-size: 18px; line-height: 22px; color: var(--cream);
}
.booking__pricing .row .amount.na { color: var(--warm-grey); }
.booking__buy {
  margin-top: 4px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink); border-radius: var(--radius);
  padding: 14px 24px; font-size: 18px; line-height: 18px; width: 100%;
  border: 1px solid var(--gold);
}
.booking__buy:hover { background: transparent; color: var(--gold); }
.booking__note { font-size: 13px; line-height: 18px; color: var(--warm-grey); margin: 0; }

/* ============================================================
   CARRIAGES BLOCK  (Figma 1:73) — warm-grey card with Premium / Standard
   ============================================================ */
.carriages {
  padding: 0 0 80px;
}
.carriages__card {
  background: var(--warm-grey); color: var(--ink);
  padding: 40px 40px;
  max-width: 700px; margin-left: 15%; margin-right: auto;
  border-radius: 0;
}
.carriages__card h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 32px; line-height: 1.05; color: var(--ink); margin: 0 0 14px;
}
.carriages__card p {
  font-size: 18px; line-height: 25.2px; color: var(--ink); margin: 0;
}
.carriages__card .divider {
  border: 0; border-top: 1px solid var(--ink); margin: 28px 0;
}

/* ============================================================
   FAQS  (Figma 1:79) — accordion list
   ============================================================ */
.faqs {
  padding: 0 0 100px;
}
.faqs__inner {
  max-width: 700px; margin-left: 15%; margin-right: auto;
}
.faqs h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 48px; line-height: 1; color: var(--cream); margin: 0 0 32px;
}
.faq {
  background: transparent; border: 0; border-bottom: 1px solid var(--cream);
  width: 100%; text-align: left; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; color: var(--cream); font: inherit;
}
.faq:first-child { border-top: 1px solid var(--cream); }
.faq:focus { outline: none; }
.faq:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq__q {
  flex: 1; color: var(--cream); font-size: 18px; line-height: 25.2px;
  font-family: "Work Sans", sans-serif; font-weight: 400; margin: 0;
}
.faq__toggle {
  width: 24px; height: 24px; flex-shrink: 0; position: relative;
}
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; background: var(--cream); border-radius: 2px;
}
.faq__toggle::before { left: 0; right: 0; top: 11px; height: 2px; }
.faq__toggle::after { top: 4px; bottom: 4px; left: 11px; width: 2px; transition: opacity .15s; }
.faq[aria-expanded="true"] .faq__toggle::after { opacity: 0; }
.faq__a {
  display: none; padding: 12px 0 8px; color: var(--warm-grey);
  font-size: 18px; line-height: 25.2px;
}
.faq[aria-expanded="true"] + .faq__a { display: block; }

/* ============================================================
   HIGHLIGHTS  (Figma 1:703 + 1:704...) — H2 + 4 icon+text rows
   ============================================================ */
.highlights {
  padding: 60px 0 80px;
  text-align: center;
}
.highlights h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 72px; line-height: 1; color: var(--cream); margin: 0 0 60px;
  text-align: center;
}
.highlights__list {
  max-width: 70%; margin: 0 auto; display: flex; flex-direction: column; gap: 0;
}
.highlight {
  display: grid; grid-template-columns: 180px 1fr 1fr; gap: 40px; align-items: center;
  padding: 30px 0; border-top: 1px solid var(--cream); text-align: left;
}
.highlight:last-child { border-bottom: 1px solid var(--cream); }
.highlight__icon {
  width: 150px; height: 90px; color: var(--cream); display: inline-flex; align-items: center; justify-content: center;
}
.highlight__icon svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.highlight__icon svg * { fill: currentColor; stroke: none; }
.highlight h3 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 40px; line-height: 1.1; color: var(--cream); margin: 0;
}
.highlight p { color: var(--warm-grey); font-size: 18px; line-height: 25.2px; margin: 0; }

/* ============================================================
   ROUTE MAP / PRICING  (Figma 1:105 + 1:165 + 1:179)
   Two-column: map illustration left, schedule + pricing right
   ============================================================ */
.route {
  padding: 60px 0 80px;
}
.route__grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  max-width: 84%; margin: 0 auto;
}
/* No cream panel behind the map — it sits on the dark page, like live.
   Only the heading keeps a small cream box. */
.route__map {
  background: transparent; color: var(--ink); position: relative;
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.route__map h3 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 40px; line-height: 1.1; color: var(--ink); margin: 0;
  background: var(--cream); padding: 14px 22px; align-self: flex-start;
}
.route__map img,
.route__map-svg {
  width: 100%; max-width: 100%; height: auto; display: block;
  margin: 0; aspect-ratio: 804 / 434;
}
.route__map-svg { border: 0; }
.route__panel {
  display: flex; flex-direction: column; gap: 32px;
}
.route__stations {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 18px; line-height: 25.2px; color: var(--cream);
  margin: 4px 0 8px;
}
.route__stations li {
  display: flex; align-items: center; gap: 12px;
}
.route__stations li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cream); flex-shrink: 0;
}
.route__panel h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 32px; line-height: 1; color: var(--cream); margin: 0;
}
.route__panel .h2 + .h2 { margin-top: 8px; }
.route__schedule { display: flex; flex-direction: column; gap: 18px; }
.route__schedule .date-range { color: var(--cream); font-size: 18px; line-height: 25.2px; }
.route__days {
  display: flex; gap: 10px;
}
.route__days span {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cream); border-radius: 50%;
  color: var(--cream); font-size: 16px;
}
.route__days span.active { background: var(--cream); color: var(--ink); }
.route__schedule .notes { color: var(--warm-grey); font-size: 14px; line-height: 20px; }
.route__pricing { display: flex; flex-direction: column; gap: 6px; }
.route__pricing .row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 18px; line-height: 25.2px;
  color: var(--cream);
}
.route__pricing .row .amount { color: var(--cream); }
.route__pricing .row .amount.na { color: var(--warm-grey); }
.route__pricing .group-head {
  border-top: 1px solid var(--cream); padding-top: 14px; margin-top: 8px;
}
.route__buy {
  margin-top: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink); border-radius: var(--radius);
  padding: 13px 24px; font-size: 18px; line-height: 18px; width: 100%;
  border: 1px solid var(--gold);
}
.route__buy:hover { background: transparent; color: var(--gold); }
.route__note { font-size: 14px; line-height: 20px; color: var(--warm-grey); margin-top: 8px; }

/* ============================================================
   TESTIMONIALS — 3-up Google review cards above More Journeys.
   Heading + 3 columns of stars / quote / attribution, centred,
   transparent backgrounds. Stars use the gold accent.
   ============================================================ */
.testimonials {
  padding: 80px 0 80px;
}
.testimonials__head {
  max-width: 70%; margin: 0 auto 56px; text-align: center;
}
.testimonials__head h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 700;
  font-size: 72px; line-height: 1; color: var(--cream); margin: 0;
}
.testimonials__grid {
  max-width: 70%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px;
  align-items: start;
}
.testimonial {
  display: flex; flex-direction: column; gap: 20px;
  text-align: center; align-items: center;
}
.testimonial__stars {
  color: var(--gold);
  line-height: 0;
}
.testimonial__stars svg {
  display: block;
}
.testimonial__quote {
  color: var(--cream); font-size: 16px; line-height: 1.65; margin: 0;
  max-width: 360px;
}
.testimonial__attr {
  color: var(--warm-grey); font-size: 14px; line-height: 1.4; margin: 8px 0 0;
  letter-spacing: .02em;
}

/* ============================================================
   MORE JOURNEYS  (Figma 1:809) — H2 + 3 image+text rows
   ============================================================ */
.more {
  padding: 80px 0 80px;
}
.more__head {
  max-width: 70%; margin: 0 auto 60px; text-align: center;
}
.more__head h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 72px; line-height: 1; color: var(--cream); margin: 0;
}
.more__list {
  max-width: 70%; margin: 0 auto; display: flex; flex-direction: column; gap: 64px;
}
.more__item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.more__item--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.more__item--reverse .more__media { order: 2; }
.more__media {
  /* Fixed pixel height (not aspect-ratio) so the image renders the same
     size regardless of column width. align-items: center on the grid then
     vertically centres the text column against the image, which keeps the
     section looking right at every viewport between breakpoints. */
  width: 100%; height: 480px; overflow: hidden;
  background: var(--warm-grey); border-radius: 0;
}
.more__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Portrait variant — used for native portrait imagery (e.g. the
   "moving feast" 706x1024). Drops the fixed landscape height and
   shows the image at its native aspect, centred in the column. */
.more__media--portrait {
  height: auto; aspect-ratio: 706 / 1024;
  max-width: 380px; margin: 0 auto;
}
.more__media--portrait img { object-fit: cover; }
.more__content { display: flex; flex-direction: column; gap: 18px; }
.more__content .badge { align-self: flex-start; }
.more__content h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 56px; line-height: 1.05; color: var(--cream); margin: 0;
}
.more__content .duration {
  color: var(--cream); font-size: 18px; line-height: 25.2px; margin: 0;
}
.more__content .blurb-1 { color: var(--cream); font-style: italic; font-size: 18px; line-height: 25.2px; margin: 0; }
.more__content p { color: var(--warm-grey); font-size: 18px; line-height: 25.2px; margin: 0; }
.more__content .btn { align-self: flex-start; margin-top: 8px; }

/* ============================================================
   STILL NOT SURE  (Figma 1:853) — narrow CTA panel
   ============================================================ */
.still-not-sure {
  padding: 80px 0 100px;
  text-align: center;
}
.still-not-sure__inner { max-width: 70%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.still-not-sure .kicker {
  color: var(--blue); font-size: 14px; line-height: 14px; letter-spacing: 1px;
  text-transform: uppercase; margin: 0;
}
.still-not-sure h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 72px; line-height: 1; color: var(--cream); margin: 0;
}
.still-not-sure p { color: var(--warm-grey); font-size: 18px; line-height: 25.2px; margin: 0; max-width: 720px; }

/* ============================================================
   FOOTER  (Figma 1:864) — black top section + cream Ionata band
   ============================================================ */
.footer { background: var(--black); color: var(--cream); }
.footer__logo {
  display: flex; justify-content: center; padding: 70px var(--margin) 40px;
}
.footer__logo img { height: 150px; width: auto; }
.footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  padding: 40px var(--margin) 60px; max-width: 1720px; margin: 0 auto;
}
.footer__col h2 {
  font-family: "Sidetrack", "Work Sans", sans-serif; font-weight: 400;
  font-size: 24px; line-height: 1; color: var(--warm-grey); margin: 0 0 24px;
}
.footer__col li {
  font-size: 18px; line-height: 40px; color: var(--cream);
}
.footer__col a { color: var(--cream); }
.footer__col a:hover { color: var(--gold); }
.footer__band {
  background: var(--cream); color: var(--ink);
  padding: 50px var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
}
.footer__awards { display: flex; gap: 24px; align-items: center; }
.footer__awards img { height: 60px; width: auto; }
.footer__ionata { color: var(--ink); font-size: 16px; }
.footer__ionata a { text-decoration: underline; color: var(--ink); }

/* ============================================================
   RESPONSIVE
   Strategy: desktop-first, with breakpoints at:
     1400px — wide laptops / large tablets (loosen 70% to 80%)
     1200px — tablet landscape / small laptops (stack the sticky sidebar)
       900px — tablet portrait (further font + spacing trim)
       720px — large phone / phablet (single-column layouts everywhere)
       480px — small phone (collapse footer, trim badges + nav)
       360px — minimum supported width (iPhone SE 1st gen / old Android)
   ============================================================ */

/* Wide laptops / large tablets — loosen the 70% cap a touch */
@media (max-width: 1400px) {
  .hero__media,
  .title-block__inner, .tagline-row__inner, .journey-body__inner, .intro__grid,
  .highlights__list, .route__grid, .more__head, .more__list, .still-not-sure__inner,
  .testimonials__head, .testimonials__grid {
    max-width: 80%;
  }
  .carriages__card, .faqs__inner { margin-left: 10%; max-width: 720px; }
}

/* Tablet landscape / small laptops — stack the sticky sidebar, drop grids to single column */
@media (max-width: 1200px) {
  :root { --margin: 40px; }
  .hero__media,
  .title-block__inner, .tagline-row__inner, .journey-body__inner, .intro__grid,
  .highlights__list, .route__grid, .more__head, .more__list, .still-not-sure__inner,
  .testimonials__head, .testimonials__grid {
    max-width: 88%;
  }
  .testimonials__grid { gap: 40px; }
  .testimonials__head h2 { font-size: 56px; }
  .carriages__card, .faqs__inner { margin-left: 6%; max-width: 680px; }
  .intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .booking { position: static; max-width: 420px; }
  .route__map { min-height: 0; }
  .more__item, .more__item--reverse { grid-template-columns: 1fr; gap: 32px; }
  .more__item--reverse .more__media { order: -1; }
  .more__media { height: 420px; }
  .more__media--portrait { height: auto; max-width: 320px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .highlight { grid-template-columns: 120px 1fr; }
  .highlight p { grid-column: 2 / -1; }
  .highlight h3 { grid-column: 2 / -1; }
  .h2--display, .more__content h2, .more__head h2, .still-not-sure h2, .highlights h2 { font-size: 56px; }
  .more__content h2 { font-size: 44px; }
  .nav__links { gap: 20px; }
}

/* Tablet portrait — trim heading sizes, ease padding */
@media (max-width: 900px) {
  .nav { padding: 16px var(--margin); gap: 20px; }
  .nav__buy { font-size: 11px; padding: 12px 20px; letter-spacing: .14em; }
  .nav__logo img { height: 80px; }
  .nav__right { gap: 20px; }
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 14px; padding: 4px 0; }
  .title-block { padding-top: 64px; }
  .intro__title { font-size: 56px; }
  .h2--display, .more__head h2, .still-not-sure h2, .highlights h2 { font-size: 48px; }
  .more__content h2 { font-size: 36px; }
  .faqs h2 { font-size: 36px; }
  .carriages__card { padding: 32px 28px; }
  .highlight { padding: 24px 0; }
  .highlight h3 { font-size: 32px; }
  .journey-body, .carriages, .faqs, .highlights, .route, .more, .still-not-sure { padding-left: 0; padding-right: 0; }
  .more { padding-top: 60px; padding-bottom: 60px; }
  .more__list { gap: 48px; }
  .more__media { height: 380px; }
  .more__media--portrait { height: auto; max-width: 300px; }
  .testimonials { padding: 60px 0; }
  .testimonials__head h2 { font-size: 48px; }
  .testimonials__head { margin-bottom: 40px; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
  .testimonial__quote { max-width: 540px; }
}

/* Large phone / phablet — single column, mobile typography, no hamburger drawer yet */
@media (max-width: 720px) {
  :root { --margin: 24px; }
  body {
    font-size: 16px; line-height: 24px;
    /* Reserve space at the bottom for the sticky Buy Tickets bar so the
       footer + last content row aren't covered. */
    padding-bottom: 84px;
  }
  .hero__media,
  .title-block__inner, .tagline-row__inner, .journey-body__inner, .intro__grid,
  .highlights__list, .route__grid, .more__head, .more__list, .still-not-sure__inner,
  .testimonials__head, .testimonials__grid {
    max-width: calc(100% - 48px);
  }
  .testimonials { padding: 48px 0 56px; }
  .testimonials__head h2 { font-size: clamp(32px, 8vw, 44px); }
  .testimonials__quote { font-size: 16px; }
  .testimonials__grid { gap: 36px; }
  /* The booking sidebar drops to position: static at ≤1200px (grid
     collapses), so the Stopping > calendar > pricing > Buy Tickets
     widget sits inline. Pin just the Buy Tickets button to the bottom
     of the viewport on mobile so it's always tappable while scrolling. */
  .booking__buy {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; margin: 0; border-radius: 0;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
    font-size: 18px; min-height: 56px;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
    z-index: 100;
  }
  .carriages__card, .faqs__inner {
    margin-left: 24px; margin-right: 24px; max-width: calc(100% - 48px);
  }
  .intro__title { font-size: 36px; line-height: 1.1; }
  .intro__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .booking { max-width: none; }
  .booking__head { font-size: 24px; }
  .nav {
    padding: 12px var(--margin); gap: 12px;
    /* Header collapses to a 2-col phone layout: logo centred-left,
       hamburger right. Buy Tickets in the header is hidden because the
       sticky bottom bar already covers the persistent CTA. */
    grid-template-columns: 1fr auto;
  }
  .nav__left { display: none; }
  .nav__logo { justify-content: flex-start; }
  .nav__logo img { height: 56px; }
  .nav__links { display: none; }
  .nav__right { gap: 12px; }
  .nav__menu-btn, .nav__menu-btn svg { width: 40px; height: 40px; }
  .breadcrumbs { padding: 14px var(--margin) 40px; }
  .breadcrumbs ol { font-size: 13px; flex-wrap: wrap; gap: 8px; }
  .breadcrumbs li { gap: 8px; }
  /* Hero — let aspect-ratio do the work, no fixed height */
  .hero__media { max-height: none; }
  .title-block { padding-top: 40px; }
  .title-block h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.05; }
  .h2--display, .more__head h2, .still-not-sure h2, .highlights h2 { font-size: clamp(32px, 8vw, 44px); line-height: 1.05; }
  .more__content h2 { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.1; }
  .faqs h2 { font-size: 28px; }
  .h3 { font-size: 24px; line-height: 30px; }
  .tagline-row__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 0; }
  .tagline-row .loco-icon, .intro__row .loco-icon { width: 72px; height: 42px; }
  .highlights { padding: 48px 0 56px; }
  .highlights h2 { margin-bottom: 36px; }
  .highlight { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .highlight__icon { width: 80px; height: 48px; }
  .highlight h3 { font-size: 26px; }
  .more__media { height: 280px; }
  .more__media--portrait { height: auto; max-width: 260px; }
  .more__list { gap: 36px; }
  .footer__logo { padding: 48px var(--margin) 32px; }
  .footer__logo img { height: 110px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 28px var(--margin) 40px; }
  .footer__col h2 { font-size: 20px; margin-bottom: 14px; }
  .footer__col li { font-size: 16px; line-height: 32px; }
  .footer__band { padding: 28px var(--margin); flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__awards img { height: 48px; }
  .carriages__card { padding: 28px 22px; }
  .carriages__card h2 { font-size: 26px; }
  .carriages__card .divider { margin: 22px 0; }
  .faq { padding: 16px 0; gap: 12px; }
  .faq__q { font-size: 16px; line-height: 22px; }
  .route__pricing .row, .booking__pricing .row { font-size: 16px; line-height: 22px; }
  .route__days { gap: 6px; }
  .route__days span { width: 32px; height: 32px; font-size: 14px; }
  /* Calendar in booking sidebar — keep 7 cols but compact cells */
  .cal__day { padding: 8px 0; gap: 6px; }
  .cal__day i { font-size: 12px; }
  /* Map heading: let it wrap inside the small cream tab */
  .route__map h3 { font-size: 26px; padding: 10px 16px; }
  .still-not-sure { padding: 56px 0 72px; }
  /* Touch targets — ensure interactive elements are ≥44px tall */
  .btn, .booking__buy, .route__buy { padding: 14px 22px; min-height: 44px; }
}

/* Small phone — collapse footer to one column, ease everything */
@media (max-width: 480px) {
  :root { --margin: 18px; }
  .poc-ribbon { font-size: 12px; padding: 8px 14px; }
  .nav__menu-btn { width: 44px; height: 44px; }
  .footer__cols { grid-template-columns: 1fr; gap: 22px; }
  .footer__awards { flex-wrap: wrap; gap: 14px; }
  .footer__awards img { height: 42px; }
  .more__media { height: 220px; }
  .more__media--portrait { height: auto; max-width: 220px; }
  .more__list { gap: 28px; }
  .highlights__list { gap: 0; }
  .booking__stations { font-size: 16px; gap: 12px; }
  .booking__pricing .row, .route__pricing .row { padding: 4px 0; }
  /* Tighter map zoom on small phones — heading + map stack closer */
  .route__map { gap: 14px; }
  .breadcrumbs ol { font-size: 12px; gap: 6px; }
  .breadcrumbs li { gap: 6px; }
}

/* Tiny phones (iPhone SE 1st gen, old Android) */
@media (max-width: 360px) {
  :root { --margin: 14px; }
  .hero__media,
  .title-block__inner, .tagline-row__inner, .journey-body__inner, .intro__grid,
  .highlights__list, .route__grid, .more__head, .more__list, .still-not-sure__inner,
  .testimonials__head, .testimonials__grid {
    max-width: calc(100% - 28px);
  }
  .carriages__card, .faqs__inner { margin-left: 14px; margin-right: 14px; max-width: calc(100% - 28px); }
  .title-block h1 { font-size: 36px; }
  .intro__title { font-size: 32px; }
  .h2--display, .more__head h2, .highlights h2, .still-not-sure h2 { font-size: 28px; }
  .more__content h2 { font-size: 24px; }
  .footer__logo img { height: 90px; }
}