@charset "UTF-8";
/* ============================================================================
   GOULBURN AIRPORT — site styles

   This is the ONLY stylesheet. Everything that controls the look of the site
   lives in the design tokens in section 1. To restyle the site, change the
   tokens; you should rarely need to touch anything below them.

   CONTENTS
     1.  Design tokens          <- change the look here
     2.  Reset
     3.  Base elements
     4.  Layout primitives
     5.  Site header and navigation
     6.  Hero
     7.  Facts strip
     8.  Prose and media
     9.  Charges table          <- the fee schedule
    10.  Airport information
    11.  Map
    12.  Contact form
    13.  Footer
    14.  Motion
    15.  Print
   ========================================================================= */


/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
  /* --- Colour -------------------------------------------------------------
     The palette is drawn from the airport's own materials: tarmac and dusk
     navy, the retained brand blue, and the ochre-yellow of taxiway markings.

     --colour-marking is a GRAPHIC device only (rules, tags, section markers).
     It does not have enough contrast to carry text on a light background, nor
     to be a focus ring on its own — see the :focus-visible rule.             */
  --colour-ink:       #0c1620;   /* deepest navy-black: header, hero, footer */
  --colour-navy:      #1e3a5f;   /* headings, buttons                        */
  --colour-sky:       #4d6d9a;   /* retained brand blue                      */
  --colour-marking:   #e8a33d;   /* taxiway marking ochre — accents only     */
  --colour-haze:      #e7edf4;   /* tinted panels                            */
  --colour-paper:     #f7f9fb;   /* page background                          */
  --colour-card:      #ffffff;   /* raised surfaces                          */
  --colour-rule:      #ccd6e2;   /* hairlines                                */
  --colour-text:      #1b2733;   /* body text          — 14:1 on paper       */
  --colour-muted:     #5a6b7d;   /* secondary text     — 5.1:1 on paper      */
  --colour-on-dark:   #ffffff;
  --colour-on-dark-muted: #a9bcd0;

  /* --- Typography ---------------------------------------------------------
     Three roles. Only the display face is downloaded; body and data use
     system stacks, which cost nothing and render immediately.               */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-data:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  1.0625rem;
  --text-lg:    clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --text-xl:    clamp(1.375rem, 1vw + 1.1rem,  1.75rem);
  --text-2xl:   clamp(1.75rem,  2vw + 1.2rem,  2.5rem);
  --text-3xl:   clamp(2.25rem,  3vw + 1.4rem,  3.25rem);
  --text-hero:  clamp(3rem,     12vw,          8rem);

  --tracking-label: 0.16em;   /* small uppercase labels */
  --leading-tight:  1.05;
  --leading-body:   1.65;

  /* --- Space --------------------------------------------------------------
     A single scale. --space-section controls the rhythm between sections.   */
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;
  --space-section: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Measure and shape --------------------------------------------------- */
  --measure:      68ch;      /* readable line length for prose */
  --width-page:   1180px;
  --width-narrow: 860px;
  --radius:       4px;
  --radius-lg:    8px;
  --border-hair:  1px solid var(--colour-rule);
  --shadow-card:  0 1px 2px rgb(12 22 32 / 0.05), 0 8px 24px -12px rgb(12 22 32 / 0.18);

  /* --- Chrome ------------------------------------------------------------- */
  --header-height: 60px;
}


/* ============================================================================
   2. RESET
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

:where(a) { color: inherit; }


/* ============================================================================
   3. BASE ELEMENTS
   ========================================================================= */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  /* Stop the sticky header covering a section when you jump to its anchor. */
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body {
  background: var(--colour-paper);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--colour-navy);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { text-wrap: pretty; }

a { color: var(--colour-sky); text-underline-offset: 0.18em; }
a:hover { color: var(--colour-navy); }

strong { font-weight: 600; }

/* Two bands, so the indicator is visible on every background the site uses.
   Amber alone reaches only 2:1 against the light page — short of the 3:1
   WCAG asks of a focus indicator — while ink alone would vanish into the
   dark header. The inner amber band carries dark surfaces, the outer ink
   band carries light ones, and one of the two always contrasts. */
:focus-visible {
  outline: 2px solid var(--colour-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--colour-marking);
}

/* Skip link — visible only once focused. */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--colour-card);
  color: var(--colour-navy);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-150%);
}
.skip-link:focus-visible { transform: none; }


/* ============================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: clamp(var(--space-md), 4vw, var(--space-2xl));
}

.container--narrow { max-width: var(--width-narrow); }

/* Vertical rhythm. Only this rule sets section padding, so backgrounds and
   spacing never fight each other. */
.section { padding-block: var(--space-section); }

.section--tint  { background: var(--colour-haze); }
.section--dark  { background: var(--colour-ink); color: var(--colour-on-dark); }
.section--flush { padding-block: 0; }

/* Section heading with a small ochre marker, echoing a holding-point bar. */
.section-head { margin-bottom: var(--space-xl); }

.section-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-muted);
}

.section-head__eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--colour-marking);
}

.lede {
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--colour-muted);
}

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.7em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--colour-navy);
  border-color: var(--colour-navy);
  color: var(--colour-on-dark);
}
.btn--primary:hover {
  background: var(--colour-ink);
  border-color: var(--colour-ink);
  color: var(--colour-on-dark);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--colour-on-dark);
}
.btn--ghost:hover {
  background: var(--colour-on-dark);
  color: var(--colour-ink);
}


/* ============================================================================
   5. SITE HEADER AND NAVIGATION
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--colour-ink);
  border-bottom: 3px solid var(--colour-marking);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-on-dark);
  text-decoration: none;
}
.brand:hover { color: var(--colour-on-dark); }
.brand span { color: var(--colour-marking); }

.nav__toggle {
  display: none;               /* shown below the breakpoint */
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius);
  color: var(--colour-on-dark);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.nav__toggle-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top:  6px; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
}

.nav__link {
  display: block;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-on-dark);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover {
  color: var(--colour-on-dark);
  border-bottom-color: var(--colour-marking);
}

@media (max-width: 800px) {
  .nav__toggle { display: inline-flex; }

  .nav__list {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xs) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-md);
    background: var(--colour-ink);
    border-bottom: 3px solid var(--colour-marking);
  }

  /* Opened by site.js, which sets aria-expanded on the toggle. */
  .nav__list.is-open { display: flex; }

  .nav__link {
    padding-block: var(--space-sm);
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }
  .nav__link:hover { border-bottom-color: var(--colour-marking); }
}


/* ============================================================================
   6. HERO
   ========================================================================= */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 72vh, 680px);
  overflow: hidden;
  background: var(--colour-ink);
  color: var(--colour-on-dark);
}

/* The only photograph of the airport we hold is small. Reducing it to a navy
   monotone turns its softness into atmosphere rather than a defect. Replace
   the source with a larger original and the treatment still holds. */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) blur(1px);
  transform: scale(1.05);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-navy);
  mix-blend-mode: multiply;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(12 22 32 / 0.92) 0%,
    rgb(12 22 32 / 0.72) 45%,
    rgb(12 22 32 / 0.45) 100%
  );
}

.hero__inner {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
}

.hero__title {
  font-size: var(--text-hero);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--colour-on-dark);
}

.hero__title span { display: block; }

.hero__rule {
  width: min(320px, 60%);
  height: 4px;
  margin-block: var(--space-md);
  background: var(--colour-marking);
}

.hero__meta {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-on-dark-muted);
}

/* Button group. Used in the hero and on the confirmation page. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}


/* ============================================================================
   7. FACTS STRIP
   A short band of things a pilot wants confirmed before committing to a stop.
   ========================================================================= */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-lg) var(--space-xl);
}

.facts__item {
  padding-top: var(--space-sm);
  border-top: 2px solid var(--colour-marking);
}

.facts__label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-on-dark-muted);
}

.facts__value {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--colour-on-dark);
}


/* ============================================================================
   8. PROSE AND MEDIA
   ========================================================================= */

.split {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
}

.prose > * + * { margin-top: var(--space-md); }
.prose p { max-width: var(--measure); }

.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.figure figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-muted);
}


/* ============================================================================
   9. CHARGES TABLE
   The fee schedule is the most-used part of this site and the part people
   print, so it is set as an instrument panel rather than as body copy.
   ========================================================================= */

.charges {
  background: var(--colour-card);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* The table's <caption> carries the heading and the effective date, so the
   schedule stays a single self-describing element in print and for screen
   readers.

   The caption keeps its default display — giving a caption `display: flex`
   removes it from the table's caption slot and it renders below the head
   instead of above it. The inner wrapper does the layout. */
.charges__head {
  caption-side: top;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 2px solid var(--colour-ink);
  text-align: left;
}

.charges__head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.charges__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--colour-navy);
}

.tag {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--colour-marking);
  color: var(--colour-ink);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.charges__scroll { overflow-x: auto; }

.charges table {
  width: 100%;
  border-collapse: collapse;
}

.charges th,
.charges td {
  padding: var(--space-md) var(--space-sm);
  text-align: left;
  vertical-align: top;
}
.charges th:first-child, .charges td:first-child { padding-inline-start: var(--space-xl); }
.charges th:last-child,  .charges td:last-child  { padding-inline-end:   var(--space-xl); }

.charges thead th {
  padding-block: var(--space-sm);
  border-bottom: var(--border-hair);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-muted);
  white-space: nowrap;
}

.charges tbody tr + tr th,
.charges tbody tr + tr td { border-top: var(--border-hair); }

.charges tbody th {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--colour-navy);
  line-height: 1.2;
}

.charges__note {
  display: block;
  margin-top: var(--space-2xs);
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--colour-muted);
}

/* Money columns: right-aligned with figures that line up between rows. */
.charges .amount {
  font-family: var(--font-data);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.charges .amount--gross { color: var(--colour-muted); }

@media (max-width: 620px) {
  .charges th:first-child, .charges td:first-child { padding-inline-start: var(--space-md); }
  .charges th:last-child,  .charges td:last-child  { padding-inline-end:   var(--space-md); }
  .charges__head { padding-inline: var(--space-md); }
  .charges tbody th { font-size: var(--text-base); }
  .charges .amount { font-size: var(--text-sm); }
}

/* A charge that is a process rather than a line item. */
.notice {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--colour-card);
  border: var(--border-hair);
  border-left: 4px solid var(--colour-sky);
  border-radius: var(--radius);
}

.notice h3 { margin-bottom: var(--space-xs); }
.notice ul {
  margin-top: var(--space-sm);
  padding-left: 1.1em;
  list-style: square;
}
.notice li::marker { color: var(--colour-sky); }


/* ============================================================================
   10. AIRPORT INFORMATION
   ========================================================================= */

.datalist {
  display: grid;
  gap: 0;
  margin: 0;
}

.datalist > div {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--border-hair);
}
.datalist > div:last-child { border-bottom: var(--border-hair); }

.datalist dt {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-muted);
  padding-top: 0.25em;
}

.datalist dd {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

@media (max-width: 560px) {
  .datalist > div { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* A second heading within a column, following a finished list. */
.datalist + h3 { margin-top: var(--space-xl); }

/* Where the aeronautical figures came from, and when. */
.notice__source {
  margin-top: var(--space-md);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--colour-muted);
}


/* ============================================================================
   11. MAP
   ========================================================================= */

.map {
  height: clamp(320px, 45vh, 460px);
  background: var(--colour-haze);
}

/* Marker. A div rather than Leaflet's default pin image, so the map matches
   the site palette and costs no extra requests. */
.map-pin {
  background: var(--colour-marking);
  border: 3px solid var(--colour-ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
}

/* Leaflet ships its own control styling; these only align it with the site. */
.map .leaflet-control-attribution {
  font-family: var(--font-body);
  font-size: var(--text-xs);
}
.map .leaflet-control-attribution a { color: var(--colour-sky); }

.map__fallback { padding: var(--space-lg); }


/* ============================================================================
   12. CONTACT FORM
   ========================================================================= */

.contact-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); }
}

.contact-card {
  padding: var(--space-xl);
  background: var(--colour-card);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
}

.contact-card dt {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-muted);
}

.contact-card dd {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--colour-navy);
}
.contact-card dd:last-child { margin-bottom: 0; }
.contact-card dd a { text-decoration: none; color: inherit; }
.contact-card dd a:hover { color: var(--colour-sky); }

.form__row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 620px) {
  .form__row--split { grid-template-columns: 1fr 1fr; }
}

.form > * + * { margin-top: var(--space-md); }

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-muted);
}

.field__control {
  width: 100%;
  padding: 0.7em 0.85em;
  background: var(--colour-card);
  border: 1px solid var(--colour-rule);
  border-radius: var(--radius);
  font-size: var(--text-base);
  transition: border-color 0.15s ease;
}
.field__control:hover { border-color: var(--colour-sky); }
.field__control:focus-visible { border-color: var(--colour-sky); }

textarea.field__control {
  min-height: 9rem;
  resize: vertical;
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never shown to a real visitor. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--text-base);
}
.form__status[hidden] { display: none; }
.form__status--ok {
  background: var(--colour-haze);
  border-color: var(--colour-sky);
  color: var(--colour-navy);
}
.form__status--error {
  background: #fdf0e4;
  border-color: #b4632a;
  color: #7a3d13;
}

button[disabled] { opacity: 0.6; cursor: progress; }


/* ============================================================================
   13. FOOTER
   ========================================================================= */

.site-footer {
  padding-block: var(--space-2xl);
  background: var(--colour-ink);
  color: var(--colour-on-dark-muted);
  border-top: 3px solid var(--colour-marking);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: baseline;
  justify-content: space-between;
}

.site-footer a { color: var(--colour-on-dark); }


/* ============================================================================
   14. MOTION
   One orchestrated entrance on the hero, and nothing else.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .hero__title  { animation-delay: 0.05s; }
  .hero__rule   { animation-delay: 0.18s; }
  .hero__meta   { animation-delay: 0.26s; }
  .hero__actions{ animation-delay: 0.34s; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   15. PRINT
   The charge schedule is what people print and pin up, so it is the only
   thing that survives onto paper.
   ========================================================================= */

/* Shown only on paper — identifies the schedule once it is off the screen. */
.print-only { display: none; }

@media print {
  :root { --colour-text: #000; --colour-navy: #000; --colour-muted: #333; }

  /* Everything except the schedule comes off the page: header, hero, facts
     strip, about, airport information, map, contact form and footer. */
  body > *:not(main) { display: none !important; }
  main > *:not(#charges) { display: none !important; }

  .print-only { display: block; }

  body { background: #fff; font-size: 11pt; }

  #charges { padding-block: 0; background: #fff; }

  .print-header { margin-bottom: 1.5rem; }
  .print-header h2 { font-size: 20pt; margin-bottom: 0.2rem; }
  .print-header p { font-family: var(--font-data); font-size: 9pt; }

  .section-head { display: none; }   /* the print header replaces it */

  .charges {
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
  }

  .charges__head { border-bottom-color: #000; }

  .tag {
    background: transparent;
    border: 1px solid #000;
    color: #000;
  }

  .charges tbody tr { break-inside: avoid; }

  .notice {
    margin-top: 1.5rem;
    border: 1px solid #000;
    border-radius: 0;
    break-inside: avoid;
  }
}