/* Shared brand-sites design system. Brand identity comes from the CSS custom
   properties emitted per-site in base.html (site.json theme tokens) plus an
   optional per-brand skin stylesheet (static/skins/<skin>.css). */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --radius: 10px;
  --heading-transform: uppercase;
  --heading-spacing: 0.02em;
  --heading-weight: 700;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.07), 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.10), 0 14px 34px rgba(0, 0, 0, 0.12);
  --header-bg: var(--surface);
  --header-text: var(--text);
  --hero-tint: rgba(10, 12, 14, 0.45);
  --max-content: 72rem;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--primary);
  line-height: 1.08;
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-spacing);
  /* Display faces do not all cut their word space to match. Northern Chalk's
     is roughly three times too wide, which pulls its headings apart; a skin
     can dial it back without touching letter-spacing. */
  word-spacing: var(--heading-word-spacing, normal);
  font-weight: var(--heading-weight);
  text-wrap: balance;
}

p { max-width: 70ch; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand { display: flex; align-items: center; }
.brand img { height: 54px; width: auto; transition: transform 0.2s ease; }
.brand:hover img { transform: scale(1.03); }
.brand-text { font-family: var(--font-heading); font-size: 1.6rem; text-transform: uppercase; color: var(--header-text); }
.brand.on-dark { background: var(--primary); padding: 4px 10px; border-radius: calc(var(--radius) * 0.6); }

.site-header nav { display: flex; gap: clamp(0.9rem, 2.2vw, 2.2rem); }

.site-header nav a {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: var(--heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--header-text);
  padding: 0.35rem 0;
  position: relative;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2.5px;
  background: var(--accent);
  transition: right 0.22s ease;
}

.site-header nav a:hover { text-decoration: none; }
.site-header nav a:hover::after, .site-header nav a.active::after { right: 0; }
.site-header nav a.active { color: var(--accent); }

#nav-toggle, .nav-burger { display: none; }

/* ---------- Ticker (optional, e.g. ICONS "LIVE SPORTS") ---------- */
.ticker {
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
  padding: 0.45rem 0;
  white-space: nowrap;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 28s linear infinite;
}

@keyframes ticker-scroll {
  to { transform: translateX(-100%); }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 74vh;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hero-tint), rgba(8, 9, 10, 0.62) 90%);
  z-index: -1;
}

.hero-inner {
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 52rem;
  animation: rise 0.7s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.hero-logo { max-height: 130px; width: auto; margin: 0.6rem auto 1.5rem; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45)); }
.hero-inner h1 { color: #fff; font-size: clamp(2.6rem, 6.2vw, 5rem); text-shadow: 0 2px 20px rgba(0,0,0,0.45); }
.hero-inner p { color: #f2f0ec; font-size: clamp(1.08rem, 2vw, 1.35rem); margin: 1.2rem auto 2rem; text-shadow: 0 1px 10px rgba(0,0,0,0.55); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: var(--heading-word-spacing, normal);
  background: var(--accent);
  color: var(--on-accent, #fff);
  /* A <button class="btn"> otherwise keeps the browser's own bevel. */
  border: 0;
  padding: 0.8rem 2.1rem;
  border-radius: calc(var(--radius) * 0.5);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); filter: brightness(1.06); }
.btn-outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); box-shadow: none; }

/* ---------- Section rhythm ---------- */
.page-head { text-align: center; padding: clamp(3rem, 7vw, 5rem) 1.5rem 1rem; max-width: 50rem; margin: 0 auto; }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.page-head p { margin: 1rem auto 0; font-size: 1.12rem; }

.prose { max-width: 48rem; margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.8rem) 1.5rem; }
.prose h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1.1rem; position: relative; padding-bottom: 0.7rem; }
.prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 4px; background: var(--accent); border-radius: 2px; }
.prose p + p { margin-top: 1.05rem; }

/* A closing line that sums up the page reads as a sign-off rather than another
   body paragraph, so it centres and drops its heading rule. */
.prose.is-centred { text-align: center; }
.prose.is-centred p { margin-inline: auto; text-wrap: balance; }
.prose.is-centred h2::after { left: 50%; transform: translateX(-50%); }

.img-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.img-row img { border-radius: var(--radius); height: 100%; object-fit: cover; box-shadow: var(--shadow-1); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.img-row img:hover { transform: scale(1.015); box-shadow: var(--shadow-2); }

/* ---------- Cards (menus / locations / brands / news) ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
}

.menu-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

a.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); text-decoration: none; }
.menu-card-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
/* Logo tiles: contained logos at natural-ish size, not blown up to fill 4:3 */
.menu-card-img.img-contain { aspect-ratio: auto; height: 120px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--surface); background-origin: content-box; padding: 1.5rem 2rem 0.5rem; }
/* A logo standing in for a photo (`contain: "tile"`): keep the 4:3 tile its
   neighbours have, but show the whole mark inside it rather than cropping to
   fill. The card's `bg` paints the surround, e.g. black behind a black roundel. */
.menu-card-img.img-fit { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--surface); }

.menu-card span {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.3rem;
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-spacing);
  color: var(--primary);
  padding: 1rem 1rem 0.4rem;
}

.menu-card span:last-child { padding-bottom: 1rem; }
.menu-card .card-sub { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--text); padding: 0 1.1rem 1.2rem; opacity: 0.88; }

.cards-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 1rem; }
.cards-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin: 1.2rem 0 0.4rem; }
.cards-intro { text-align: center; max-width: 46rem; margin: 0.6rem auto 1rem; }
.cards-grid { padding: 1.2rem 0 2.4rem; }

/* Five cards fall 4 + 1 under the auto-fit rule above, which reads as a
   mistake rather than a layout. Five never divides evenly below five columns,
   so drop to a centred flex wrap: the row that cannot be filled sits centred
   under the one above it instead of hanging off the left edge. Only the basis
   changes per breakpoint. The block also widens, since a fifth column needs
   the room. */
.cards-grid-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
}

.cards-block:has(.cards-grid-5) { max-width: 82rem; }
.cards-grid-5 > * { flex: 0 1 calc((100% - 4 * 1.1rem) / 5); }

@media (max-width: 1040px) {
  .cards-grid-5 > * { flex-basis: calc((100% - 2 * 1.1rem) / 3); }
}

@media (max-width: 700px) {
  .cards-grid-5 > * { flex-basis: calc((100% - 1.1rem) / 2); }
}

@media (max-width: 460px) {
  .cards-grid-5 > * { flex-basis: 100%; }
}

/* A single card stretched across the whole grid reads as a mistake — a photo
   the size of a billboard over two lines of text. Lay the one-card case out
   sideways instead: picture beside the copy, at a width the page can hold.
   Content-driven, like the five-card rule above, so it applies wherever a
   section happens to carry one card. */
.cards-grid-1 { max-width: 40rem; margin-inline: auto; }

/* The 1fr rows above and below the copy centre it against the picture, which
   is taller than the two lines of text beside it. */
.cards-grid-1 .menu-card {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  text-align: left;
}

.cards-grid-1 .menu-card-img {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  height: 100%;
  min-height: 12rem;
}

.cards-grid-1 .menu-card-img.img-contain { padding: 1.4rem; }
.cards-grid-1 .menu-card > span { grid-column: 2; grid-row: 2; padding: 0 1.6rem 0.3rem; font-size: 1.4rem; }
.cards-grid-1 .menu-card .card-sub { grid-column: 2; grid-row: 3; padding: 0 1.6rem; }

@media (max-width: 560px) {
  .cards-grid-1 .menu-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .cards-grid-1 .menu-card-img { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; }
  .cards-grid-1 .menu-card > span { grid-column: 1; grid-row: 2; padding-top: 1.2rem; }
  .cards-grid-1 .menu-card .card-sub { grid-column: 1; grid-row: 3; padding-bottom: 1.3rem; }
}

/* ---------- Carousel ----------
   A scroll-snap strip of photos: it swipes and scrolls on its own, and the
   script in _sections.html layers arrows, dots and autoplay on top. Anything
   that only makes sense once that script has run is gated behind
   .is-enhanced / .is-scrollable, so a no-JS visitor never sees dead controls. */
.carousel-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3.2rem; }
.carousel-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin: 1.2rem 0 0.4rem; }

.carousel { position: relative; margin-top: 1.6rem; }

.carousel-track {
  --slide: 84%;
  display: flex;
  gap: 1.1rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Room for the card shadow, which a clipped overflow would otherwise cut. */
  padding: 0.4rem 0.4rem 1rem;
  margin: -0.4rem -0.4rem -1rem;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide { flex: 0 0 var(--slide); scroll-snap-align: start; }

.carousel-slide img {
  width: 100%;
  /* The width/height attributes on the img reserve space before the file
     loads, but their height also outranks aspect-ratio unless it is cleared. */
  height: auto;
  aspect-ratio: 1000 / 650;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-slide:hover img { transform: translateY(-4px); box-shadow: var(--shadow-2); }

@media (min-width: 700px) { .carousel-track { --slide: 47%; } }
@media (min-width: 1040px) { .carousel-track { --slide: 31.6%; } }

.carousel-arrow {
  position: absolute;
  top: calc(50% - 1.4rem);
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.carousel.is-enhanced.is-scrollable .carousel-arrow { display: grid; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.carousel-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.carousel-prev { left: -0.6rem; }
.carousel-next { right: -0.6rem; }

/* Chevrons drawn from a rotated border — no icon font, no extra request. */
.carousel-arrow::before {
  content: "";
  width: 0.68rem;
  height: 0.68rem;
  border-top: 2.5px solid var(--primary);
  border-right: 2.5px solid var(--primary);
}

.carousel-prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.carousel-next::before { transform: rotate(45deg) translate(-2px, -2px); }

.carousel-dots { display: none; justify-content: center; gap: 0.5rem; margin-top: 1.4rem; }
.carousel.is-enhanced.is-scrollable .carousel-dots { display: flex; }

.carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  opacity: 0.22;
  cursor: pointer;
  transition: width 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.carousel-dot.is-active { width: 1.7rem; opacity: 1; background: var(--accent); }
.carousel-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* On phones the strip is swiped, so the arrows are just clutter over the art. */
@media (max-width: 700px) {
  .carousel.is-enhanced.is-scrollable .carousel-arrow { display: none; }
}

/* ---------- Menu reader (menus pages with "reader": true) ----------
   Menu PDFs are rasterised to page images at publish time, so the menu reads
   inline on every device. Tabs/paging are layered on by the small script in
   menus.html; without it every menu and page simply stacks down the page. */
.menu-reader {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem clamp(0.6rem, 3vw, 3rem) 2rem;
}

.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.menu-tab {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-spacing);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

.menu-tab:hover { text-decoration: none; border-color: var(--accent); }
.menu-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

.menu-doc {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.menu-reader.is-tabbed .menu-doc { display: none; }
.menu-reader.is-tabbed .menu-doc.is-active { display: block; }

.menu-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem clamp(0.7rem, 2vw, 1.2rem);
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.menu-doc-bar h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.menu-doc-tools { display: flex; align-items: center; gap: 0.4rem; }

.menu-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.menu-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.menu-pageno { font-size: 0.9rem; opacity: 0.8; min-width: 3.5rem; text-align: center; }

/* The page canvas. Scrolls horizontally only while a page is zoomed. */
.menu-doc-pages { background: rgba(128, 128, 128, 0.12); padding: clamp(0.5rem, 2vw, 1.1rem); }

.menu-page + .menu-page { margin-top: clamp(0.5rem, 2vw, 1.1rem); }
.menu-page-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.menu-page img { width: 100%; height: auto; box-shadow: var(--shadow-1); }
/* Zoomed: the page becomes a window onto a picture wider and taller than
   itself, scrollable both ways, so it can be swiped or dragged around.
   Capped to the viewport height so the whole window is on screen at once. */
.menu-page.is-zoomed { overflow: auto; max-height: min(85vh, 1000px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; cursor: grab; }
.menu-page.is-zoomed:active { cursor: grabbing; }
.menu-page.is-zoomed .menu-page-btn { width: max-content; cursor: inherit; }
/* The zoomed width is set by the reader script from the level chosen. */
.menu-page.is-zoomed img { max-width: none; box-shadow: none; }
.menu-page-btn img { user-select: none; -webkit-user-drag: none; }
/* Zoom controls: dead without the script, so shown only once it has run. */
.menu-zoom { display: none; align-items: center; gap: 0.4rem; }
.menu-reader.is-enhanced .menu-zoom { display: inline-flex; }
.menu-zoom .menu-btn { min-width: 2.4rem; padding-inline: 0.6rem; font-size: 1.05rem; }
.menu-zoom .menu-btn:disabled { opacity: 0.4; cursor: default; border-color: rgba(128, 128, 128, 0.4); color: var(--text); }
.menu-zoom .menu-pageno { min-width: 3.2rem; }

.menu-doc.is-paged .menu-page { display: none; }
.menu-doc.is-paged .menu-page.is-active { display: block; margin-top: 0; }

/* Fallback when no rendered pages exist: the browser's own PDF viewer. */
.menu-embed { width: 100%; height: min(85vh, 900px); border: 0; }
.menu-fallback { padding: 2rem; text-align: center; }

/* ---------- Visit / contact ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
}

.visit-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-1);
  text-align: center;
  border-top: 4px solid var(--accent);
}

.visit-card h3 { font-size: 1.45rem; margin-bottom: 0.8rem; }
.visit-card p + p { margin-top: 0.8rem; }
.visit-card p { margin-inline: auto; }
.visit-card .btn { margin-top: 1.1rem; }

/* ---------- Book a table ---------- */
.booking-wrap { max-width: 40rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem; }
.booking-form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); border-top: 4px solid var(--accent); padding: clamp(1.5rem, 4vw, 2.5rem); }
.booking-row { display: flex; flex-direction: column; margin-bottom: 1.1rem; text-align: left; }
.booking-row label { font-family: var(--font-heading); text-transform: var(--heading-transform); letter-spacing: 0.02em; font-size: 0.95rem; margin-bottom: 0.4rem; }
.booking-optional { text-transform: none; opacity: 0.65; font-weight: 400; }
.booking-form input, .booking-form textarea, .booking-form select {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: var(--radius); padding: 0.7rem 0.85rem; width: 100%;
}
/* Uniform height so the number / date / time boxes line up (date & time
   pickers are intrinsically taller than a bare number input otherwise). */
.booking-form input, .booking-form select { height: 2.9rem; }
.booking-form input:focus, .booking-form textarea:focus, .booking-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.booking-form textarea { resize: vertical; }
/* Date + Time share a row; they collapse to one column on very narrow screens. */
.booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 1rem; }
.booking-form .btn { margin-top: 0.4rem; width: 100%; cursor: pointer; }
.booking-form .btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.booking-status { margin-top: 1rem; font-weight: 600; }
.booking-status.is-ok { color: var(--accent); }
.booking-status.is-error { color: #d64545; }
.booking-note { margin-top: 1.1rem; font-size: 0.9rem; opacity: 0.8; text-align: left; }
/* An extra a venue can offer alongside the table — today, the Oceanic's
   meeting room. The box sits inside its label so the whole line is a hit
   target on a phone, and the label keeps body case: it asks a question rather
   than naming a field. The size rules undo the full-width, 2.9rem input
   styling above, which is meant for the text boxes. */
.booking-check { margin-bottom: 1.1rem; text-align: left; }
.booking-check label {
  display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0; cursor: pointer;
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem;
}
.booking-form .booking-check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: none; margin: 0; padding: 0;
  accent-color: var(--accent);
}
.booking-hint { margin: 0.4rem 0 0; font-size: 0.85rem; opacity: 0.75; text-align: left; }
/* Honeypot — gone from the page, still in the DOM for bots to trip over.
   display:none rather than pushed off-screen: browsers' autofill skips a
   field that is not rendered, and this one was being filled in for real
   guests along with their email and phone. */
.booking-hp { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 3.5rem; padding: 3.5rem clamp(1rem, 4vw, 3rem) 1.5rem; }
.site-footer a { color: var(--footer-text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer h4 { color: var(--footer-text); font-size: 1.15rem; margin-bottom: 0.7rem; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.2rem;
  max-width: var(--max-content);
  margin: 0 auto;
  justify-items: center;
  text-align: center;
}
.footer-logo { height: 52px; width: auto; margin: 0 auto 0.9rem; filter: brightness(0) invert(1); }
/* Already-white/branded footer logos must NOT be inverted. */
.footer-logo.footer-logo-plain { filter: none; }
.footer-grid p { font-size: 0.95rem; opacity: 0.92; margin-inline: auto; }

.footer-badge { display: flex; align-items: center; justify-content: center; }

/* Social links: icon plus label, so the target is obvious without relying on
   glyph recognition and the link still reads to a screen reader. */
.footer-social ul { list-style: none; margin: 0; padding: 0; }
.footer-social li + li { margin-top: 0.5rem; }
.footer-social a { display: inline-flex; align-items: center; gap: 0.55rem; color: inherit; }
.footer-social a:hover { text-decoration: none; }
.footer-social a:hover span { text-decoration: underline; }
/* No fill/stroke here: the glyph sets its own via presentation attributes,
   and a stylesheet declaration would outrank them and flood the outline. */
.footer-social svg { width: 1.4rem; height: 1.4rem; flex: none; }
.footer-social span { font-size: 0.95rem; }
/* The award roundel is a badge, not a wordmark: at wordmark height (62px) its
   ring of text was unreadable and the whole thing read as a smudge. */
.footer-badge img { max-height: 130px; width: auto; }

.footer-copy { text-align: center; max-width: none; margin-inline: auto; font-size: 0.85rem; opacity: 0.7; margin-top: 2.6rem; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; }
  .nav-burger span { width: 24px; height: 3px; background: var(--header-text); border-radius: 2px; }

  .site-header { flex-wrap: wrap; }
  .site-header nav { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 0.5rem; }
  #nav-toggle:checked ~ nav { display: flex; }
  .site-header nav a { padding: 0.75rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.18); }
  .site-header nav a::after { display: none; }

  .hero { min-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker span, .hero-inner { animation: none; }
  html { scroll-behavior: auto; }
}

.footer-copy a { display: inline-block; white-space: nowrap; }

/* ---------- Map ---------- */
.map-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.map-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin-bottom: 1.2rem; }
.map-image { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.map-embed { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fixed-count image rows keep large photo sets from becoming tiny thumbnails */
.img-row-2 { grid-template-columns: repeat(2, 1fr); }
.img-row-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- UK locations map (airportretail "Our Locations") ---------- */
.lm-wrap { max-width: 30rem; margin: 0 auto; padding: 8px; }
/* An aeroplane pointer over the whole map (interactive bits reuse the same
   cursor via the custom property below). The SVG is inlined so there is no
   extra network request; '#' must be percent-encoded as %23 in a data URI. */
.lm-svg {
  --plane-cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"><g transform="rotate(45 12 12)"><path d="M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z" fill="%23062236" stroke="%23ffffff" stroke-width="1" stroke-linejoin="round"/></g></svg>') 17 17, pointer;
  width: 100%; height: auto; display: block; overflow: visible;
  cursor: var(--plane-cursor);
  font-family: var(--font-heading), system-ui, sans-serif; }
.lm-land path { fill: url(#lm-land); stroke: #8bb9dd; stroke-width: 3;
  stroke-linejoin: round; transition: fill .3s; }
.lm-svg:hover .lm-land path { fill: #e6f1fa; }
/* ARE roundel pins. The badge is the brand's own map-pin SVG, dropped in as
   an <image>; the halo behind it separates it from the coastline and doubles
   as the hover/active highlight. Nothing is positioned by transform, so the
   CSS lift below cannot fight the SVG x/y attributes. */
.lm-marker { cursor: var(--plane-cursor); }
/* Always on, not just a hover state: the three London badges sit close enough
   to touch, and without a ring between them they read as one shape. */
.lm-halo { fill: #fff; transition: fill .18s ease; }
.lm-pin { transform-box: fill-box; transform-origin: center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 3px 6px rgba(6, 34, 54, .28)); }
.lm-marker:hover .lm-pin,
.lm-marker:focus-visible .lm-pin,
.lm-marker.is-active .lm-pin { transform: scale(1.16); }
.lm-marker:hover .lm-halo,
.lm-marker:focus-visible .lm-halo,
.lm-marker.is-active .lm-halo { fill: var(--accent); }
.lm-marker:focus-visible { outline: none; }

/* ---------- Locations: map beside its airport list ---------- */
.locations-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.locations-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin: 1.2rem 0 0.4rem; }

.locations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 1.6rem;
}

.locations-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; }

.airport { transition: transform .18s ease; }
.airport h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.airport h3 a { color: inherit; }
.airport.is-active h3 a { color: var(--accent); text-decoration: underline; }

.airport-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.airport-sites li { display: flex; }
.airport-site { display: flex; align-items: center; gap: 0.85rem; color: inherit; width: 100%; }
a.airport-site:hover { text-decoration: none; }
a.airport-site:hover .airport-site-name { color: var(--accent); text-decoration: underline; }
a.airport-site:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Fixed logo box: the brand marks run from wide wordmarks to square roundels,
   and without a common box the site names stop lining up down the column. The
   caps are repeated on the image in real units rather than as percentages,
   because a percentage max-height does not resolve against the grid area and
   the square marks overflowed the box. */
.airport-site-logo {
  --mark-w: 66px;
  --mark-h: 38px;
  flex: none;
  width: var(--mark-w);
  height: var(--mark-h);
  display: grid;
  place-items: center;
}

.airport-site-logo img {
  max-width: var(--mark-w);
  max-height: var(--mark-h);
  width: auto;
  height: auto;
}
.airport-site-name { font-size: 0.95rem; line-height: 1.45; }

@media (max-width: 900px) {
  .locations-layout { grid-template-columns: 1fr; }
  .locations-map { max-width: 30rem; margin: 0 auto; }
}

@media (max-width: 560px) {
  .locations-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .lm-pulse { animation: lm-pulse 2.6s ease-out infinite; }
  @keyframes lm-pulse { 0% { r: 8px; opacity: .5; } 70% { r: 34px; opacity: 0; } 100% { opacity: 0; } }
}

/* ---------- Timeline (e.g. "Who we are" UK timeline) ---------- */
.timeline-block { max-width: 56rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 2rem; }
.timeline-block h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 1.6rem; }
/* Node discs sit centred on the spine: --tl-node wide, so their centre is at
   half that from the list's left edge, and the spine is offset to match. */
.timeline { --tl-node: 34px; list-style: none; position: relative; margin: 0; padding: 0; }
/* the vertical spine */
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px;
  left: calc(var(--tl-node) / 2 - 1.5px);
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 30%, transparent)); }
.timeline-item { position: relative; padding: 0 0 1.6rem calc(var(--tl-node) + 1.15rem); }
.timeline-item:last-child { padding-bottom: 0; }
/* A departing plane rather than a bare dot, matching how the original site
   marked each step. Same glyph as the UK map cursor, climbing away to the
   right; the ring in page colour punches the disc out of the spine. */
.timeline-node { position: absolute; left: 0; top: 0;
  width: var(--tl-node); height: var(--tl-node);
  display: grid; place-items: center;
  border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 4px var(--bg), var(--shadow-1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.timeline-node .plane { fill: var(--surface); }
.timeline-item:hover .timeline-node { transform: scale(1.1) translateY(-1px); }
.timeline-card { background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); border-left: 4px solid var(--accent);
  padding: 1rem 1.25rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.timeline-item:hover .timeline-card { transform: translateX(3px); box-shadow: var(--shadow-2); }
.timeline-date { display: inline-block; font-family: var(--font-heading);
  font-weight: var(--heading-weight); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.85rem; color: var(--primary); margin-bottom: 0.25rem; }
.timeline-card p { margin: 0; }

/* ---------- Policy documents (privacy, modern slavery, tips, pay gap) ----------
   These came out of WordPress as one long run of paragraphs, headings and all.
   The section types below give them back their structure; the styling stays
   quiet, because they are read rather than browsed. */
/* One document, not a stack of independent sections: consecutive blocks would
   otherwise stack their own top and bottom padding and drift a screen apart. */
.doc .prose { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.doc > :first-child.prose { padding-top: 2.4rem; }
.doc > :last-child.prose { padding-bottom: 3.4rem; }
.doc .prose h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); }

.doc-list { margin: 0.9rem 0 0 1.15rem; padding: 0; }
.doc-list li { margin-bottom: 0.55rem; padding-left: 0.3rem; max-width: 66ch; }
.doc-list li::marker { color: var(--accent); }

.doc-defs { margin: 1rem 0 0; }
.doc-defs dt {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  color: var(--primary);
  margin-top: 1.05rem;
  /* Terms are often literal values — cookie names, headers, parameters. A
     brand's uppercase heading transform would rewrite `_ga` as `_GA`, which
     is simply not what the cookie is called. */
  text-transform: none;
}
.doc-defs dt:first-child { margin-top: 0; }
.doc-defs dd { margin: 0.2rem 0 0; padding-left: 0; max-width: 66ch; }

/* Wide tables scroll inside their own box rather than pushing the page
   sideways on a phone. */
.doc-table-wrap { margin-top: 1.1rem; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.doc-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.97rem; }
.doc-table caption { caption-side: bottom; padding: 0.7rem 1rem; font-size: 0.85rem; opacity: 0.7; text-align: left; }
.doc-table th, .doc-table td { padding: 0.7rem 1rem; text-align: left; vertical-align: top; }
.doc-table thead th {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  white-space: nowrap;
}
.doc-table tbody th { font-weight: 600; }
.doc-table tbody tr + tr th, .doc-table tbody tr + tr td { border-top: 1px solid rgba(128, 128, 128, 0.18); }
.doc-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.doc-table td { font-variant-numeric: tabular-nums; }

.signature { margin-top: 1.6rem; }
.signature-mark { height: 88px; width: auto; margin-bottom: 0.2rem; }
.signature-name { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--primary); font-size: 1.05rem; }
.signature-role { font-size: 0.95rem; opacity: 0.8; margin: 0; }

/* ---------- Split rows (picture beside copy) ---------- */
.split-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1rem, 4vw, 3rem);
}

/* Reversing by column-placement rather than `direction`, so the copy keeps
   its own reading order and only the picture swaps sides. */
.split-block.is-reversed .split-media { grid-column: 2; grid-row: 1; }
.split-block.is-reversed .split-body { grid-column: 1; grid-row: 1; }

.split-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.split-body { max-width: 34rem; }
.split-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.8rem; }
.split-body p { margin-bottom: 1rem; }
.split-body .btn { margin-top: 0.4rem; }

/* The wordmark stands in for a heading, so it is sized like one rather than
   like a logo tile. */
.split-logo { height: auto; max-height: 4.6rem; max-width: min(100%, 20rem); width: auto; margin-bottom: 1.1rem; }

@media (max-width: 820px) {
  .split-block { grid-template-columns: 1fr; }
  .split-block.is-reversed .split-media,
  .split-block.is-reversed .split-body { grid-column: 1; grid-row: auto; }
  .split-body { max-width: none; }
}

/* ---------- Logo strip ---------- */
.logo-strip { max-width: var(--max-content); margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 3rem) 2rem; }
.logo-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: center; margin-bottom: 1.4rem; }
.logo-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 3rem);
}
.logo-strip img { height: auto; max-height: 3.2rem; max-width: 9.5rem; width: auto; opacity: 0.92; }

/* Intro copy broken at chosen points rather than wherever the measure ends. */
.page-intro-lines p { font-weight: 600; margin-inline: auto; text-wrap: balance; }
.page-intro-lines p + p { margin-top: 0.35rem; }

/* ---------- News feed ----------
   Press coverage as stacked rows: thumbnail, source, headline, standfirst.
   The whole row is one link, so the hit target is the story rather than a
   "read more" the size of a postage stamp. */
.news-block { max-width: 58rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.news-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin: 1.2rem 0 0.4rem; }

.news-feed { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.2rem; }

.news-link {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.news-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; }

.news-thumb { background-size: cover; background-position: center; min-height: 100%; }
/* A story with no picture (a feed item whose publisher offered none) takes the
   full width rather than squeezing its copy into the thumbnail column. */
.news-link-text { grid-template-columns: 1fr; }
.news-link-text .news-body { padding: 1.3rem 1.5rem; }

.news-body { display: flex; flex-direction: column; align-items: flex-start; padding: 1.3rem 1.5rem 1.3rem 0; }

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: var(--heading-weight);
  letter-spacing: 0.02em;
  /* Left as the domain reads: some of these run to 36 characters, and in caps
     the source shouted over the headline it belongs to. */
  text-transform: none;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.news-date { color: var(--text); opacity: 0.55; }

.news-title {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--primary);
  text-wrap: balance;
}

.news-excerpt { margin-top: 0.55rem; font-size: 0.95rem; opacity: 0.9; }

/* Pushed to the bottom so the cue sits on the row's baseline whatever the
   headline's length. */
.news-more {
  margin-top: auto;
  padding-top: 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}

.news-link:hover .news-more { text-decoration: underline; }

@media (max-width: 640px) {
  .news-link { grid-template-columns: 1fr; gap: 0; }
  .news-thumb { aspect-ratio: 16 / 9; min-height: 0; }
  .news-body { padding: 1.2rem 1.3rem; }
}

/* ---------- FAQ ----------
   One card per question: the question is the card's heading, the answer its
   body, two across on a desktop and stacked on a phone. */
.faq-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.faq-block h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); text-align: center; margin: 1.2rem 0 0.4rem; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.faq-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); border-top: 4px solid var(--accent); padding: 1.4rem 1.5rem 1.5rem; }
.faq-item h3 {
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.2rem;
  text-transform: var(--heading-transform); letter-spacing: var(--heading-spacing);
  color: var(--primary); margin: 0 0 0.6rem;
}
.faq-item p { margin: 0; font-size: 0.97rem; line-height: 1.6; }

/* ---------- Section divider ----------
   A flight path rather than a plain rule: the dashed trail already flown, the
   plane, then the line ahead of it. Purely decorative — `divider` sections
   carry no content and are hidden from assistive tech in the template. */
.section-divider {
  --divider-ink: color-mix(in srgb, var(--primary) 55%, transparent);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 4vw, 3rem);
}

/* No `background` here: this rule is more specific than the single-class ones
   below, so setting one would win over both and flatten them to plain lines. */
.section-divider > span { flex: 1; height: 2px; border-radius: 2px; }

/* The trail already flown — dashes, fading in from nothing at the far end.
   Without mask support they simply run at full strength the whole way. */
.section-divider-trail {
  background: repeating-linear-gradient(90deg,
    var(--divider-ink) 0 8px, transparent 8px 15px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}

/* The line ahead of it, fading out the same way. */
.section-divider-path {
  background: linear-gradient(90deg, var(--divider-ink), transparent);
}

.section-divider .plane { fill: var(--primary); flex: none; }

/* ---------- Benefits (card grid of perks) ---------- */
.benefits-block { max-width: var(--max-content); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 2rem; }
.benefits-block h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); text-align: center; margin-bottom: 0.4rem; }
.benefits-grid { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.benefit-card { display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
  border-top: 4px solid var(--accent); padding: 1.25rem 1.35rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.benefit-card p { margin: 0; font-size: 0.97rem; }
.benefit-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 14%, transparent); position: relative; margin-top: 2px; }
/* a check-mark drawn from two borders */
.benefit-icon::after { content: ""; position: absolute; left: 9px; top: 5px;
  width: 6px; height: 11px; border: solid var(--primary); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); }

/* ---------- Call-to-action block ---------- */
.cta-block { max-width: 52rem; margin: 0.5rem auto; padding: 1.75rem clamp(1rem, 4vw, 3rem);
  text-align: center; }
.cta-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 0.6rem; }
.cta-text { margin: 0 auto 1.3rem; }
.cta-btn { font-size: 1.15rem; padding: 0.95rem 2.6rem; }

/* ---------- Generic page banner ---------- */
.page-banner { position: relative; isolation: isolate; display: grid; place-items: center;
  min-height: 34vh; background-size: cover; background-position: center; text-align: center; }
.page-banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,34,54,0.55), rgba(6,34,54,0.72)); }
.page-banner-inner { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; max-width: 52rem; }
.page-banner-inner h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.8rem); text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.page-banner-inner p { color: #eef5fa; margin: 1rem auto 0; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }