/* =============================================================================
   ZanNex Travels, stylesheet
   =============================================================================

   CONTENTS
     1.  Design tokens (colours, type, spacing) ...... edit brand values here
     2.  Reset & base
     3.  Typography
     4.  Layout primitives (container, section, grid, stack)
     5.  Buttons
     6.  Header & navigation
     7.  Hero
     8.  Cards, pillars, steps
     9.  Trust band & notices
     10. Placeholder image blocks
     11. Forms
     12. Contact channels
     13. Prose (long-form legal pages)
     14. Footer
     15. Utilities
     16. Motion (scroll reveals, hover, hero entrance)
     17. Print

   Written mobile-first. Breakpoints are min-width only:
     40rem (640px) · 48rem (768px) · 64rem (1024px) · 80rem (1280px)

   Uses CSS logical properties (padding-inline, margin-block) throughout so the
   site can be flipped to right-to-left for Arabic/Urdu later without a rewrite.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   -----------------------------------------------------------------------------
   These values match the main ZanNex app (app/globals.css) so both stay in sync.
   Change a colour here and it updates across every page.
   ============================================================================= */

:root {
  /* --- Brand colours ------------------------------------------------------ */
  --navy: #0b1f3a;          /* primary, headings, dark sections, footer      */
  --navy-soft: #1e3252;     /* secondary dark surface                         */
  --gold: #c9a24b;          /* accent, rules, borders, hover. See note!      */
  --gold-hover: #d6b364;    /* accent hover state                             */
  --gold-text: #7d611e;     /* darker gold, ONLY for small text on light     */
  --gold-border: #9c7926;   /* deeper gold for button outlines, see note     */
  --cream: #f7f4ec;         /* page background                                */
  --cream-warm: #efeadd;    /* card surfaces on light backgrounds             */
  --white: #ffffff;
  --ink: #1a1a1a;           /* body text on light                             */
  --slate: #4a5568;         /* secondary text on light                        */
  --silver: #a0a8b0;        /* dividers, muted text on dark                   */

  /* IMPORTANT ACCESSIBILITY NOTE ------------------------------------------
     Gold (--gold) on cream is only ~2.2:1 contrast, which fails WCAG AA badly.
     So --gold is used ONLY for non-text purposes on light backgrounds:
     hairline rules, borders, and hover states. It IS safe as text on navy
     (~6.9:1).

     For small gold-coloured TEXT on light backgrounds (the uppercase "eyebrow"
     labels), use --gold-text instead, a darker bronze that passes AA on
     cream, white and cream-warm alike (4.9:1 or better).

     If you change either value, re-check them at
     https://webaim.org/resources/contrastchecker/
     ---------------------------------------------------------------------- */

  --rule: rgba(201, 162, 75, 0.35);       /* gold hairline                    */
  --rule-soft: rgba(11, 31, 58, 0.10);    /* navy hairline on light           */
  --rule-dark: rgba(247, 244, 236, 0.16); /* cream hairline on navy           */

  /* --- Typography --------------------------------------------------------- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale. Headings use clamp() so they shrink gracefully on phones;
     body sizes stay fixed for readability. */
  --step--1: 0.875rem;                          /* 14px, captions, eyebrows  */
  --step-0: 1rem;                               /* 16px, body                */
  --step-1: 1.125rem;                           /* 18px, lead paragraphs     */
  --step-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2rem);
  --step-4: clamp(2rem, 1.6rem + 1.8vw, 2.6rem);
  --step-5: clamp(2.4rem, 1.8rem + 3vw, 3.5rem); /* hero h1                   */

  /* --- Spacing ramp ------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --section-y: 3.5rem;      /* vertical section padding, grows at 64rem      */

  /* --- Layout ------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1440px;
  --measure: 68ch;          /* max line length for long-form prose            */

  /* --- Detail ------------------------------------------------------------- */
  --radius: 2px;            /* deliberately near-square, understated         */
  --radius-lg: 4px;
  --shadow-card: 0 1px 3px rgba(11, 31, 58, 0.06),
                 0 8px 24px rgba(11, 31, 58, 0.05);
  --shadow-lift: 0 2px 6px rgba(11, 31, 58, 0.08),
                 0 16px 40px rgba(11, 31, 58, 0.08);
  --transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 64rem) {
  :root {
    --section-y: 6rem;
  }
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Clears the sticky header when jumping to an #anchor. Keep this a little
     larger than the header height set in .site-header__inner. */
  scroll-padding-block-start: 6.5rem;
}

body {
  min-block-size: 100vh;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

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

::selection {
  background-color: var(--gold);
  color: var(--navy);
}

/* Visible focus ring for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Respect the OS "reduce motion" setting. */
@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;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.015em; }
h2 { font-size: var(--step-4); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: 600; }

p {
  text-wrap: pretty;
}

a {
  color: var(--navy);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--transition), color var(--transition);
}

a:hover {
  text-decoration-color: var(--gold);
}

strong { font-weight: 600; }

/* Small uppercase label above a heading. One of the few places gold text is
   used, it sits on cream at large letter-spacing and is decorative, always
   paired with a real heading beneath it. */
.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text); /* darker than --gold so it passes AA as text */
  margin-block-end: var(--space-xs);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--slate);
  max-inline-size: var(--measure);
}

/* Text on dark navy sections */
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--cream); }

.section--navy { color: rgba(247, 244, 236, 0.86); }
.section--navy .lead { color: rgba(247, 244, 236, 0.78); }
.section--navy .eyebrow { color: var(--gold); } /* safe: ~7:1 on navy */
.section--navy a { color: var(--cream); }


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

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 48rem) {
  .container { padding-inline: var(--space-lg); }
}

.container--wide { max-inline-size: var(--container-wide); }
.container--narrow { max-inline-size: 780px; }

/* --- Sections and their background surfaces ------------------------------- */
.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--loose { padding-block: calc(var(--section-y) * 1.35); }

.section--cream { background-color: var(--cream); }
.section--white { background-color: var(--white); }
.section--warm  { background-color: var(--cream-warm); }
.section--navy  { background-color: var(--navy); }

/* --- Vertical rhythm ------------------------------------------------------ */
.stack > * + * { margin-block-start: var(--space-md); }
.stack--sm > * + * { margin-block-start: var(--space-2xs); }
.stack--lg > * + * { margin-block-start: var(--space-lg); }
.stack--xl > * + * { margin-block-start: var(--space-xl); }

/* --- Grid ----------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Horizontal groups (button pairs, chips) ------------------------------ */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.section-head {
  max-inline-size: var(--measure);
  margin-block-end: var(--space-xl);
}

.section-head--centred {
  margin-inline: auto;
  text-align: center;
}


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 2.875rem;          /* ≥44px touch target */
  padding: 0.75rem var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Primary, solid navy. The main action on a section. */
.btn--primary {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}
.btn--primary:hover {
  background-color: var(--navy-soft);
  border-color: var(--navy-soft);
  color: var(--cream);
}

/* Secondary, an outlined button on light backgrounds.

   It has a solid white fill rather than a transparent one. A transparent
   button on the cream background was too faint to read as a button at all,
   and the pale gold outline on its own only reached about 2.2:1 against
   cream, below the 3:1 that WCAG asks for so people can see where a control
   is. The white fill plus the deeper --gold-border fixes both. */
.btn--secondary {
  background-color: var(--white);
  border-color: var(--gold-border);
  color: var(--navy);
  font-weight: 500;
}
.btn--secondary:hover {
  background-color: var(--cream-warm);
  border-color: var(--gold-text);
  color: var(--navy);
}

/* --- Buttons on dark backgrounds -----------------------------------------
   On navy and over the hero photograph the light-background styles above
   would be wrong: a navy primary would disappear into a navy backdrop, and a
   white secondary would look like a misplaced light patch. Both are restated
   here rather than inherited. */

/* Secondary becomes a light outline with no fill. */
.section--navy .btn--secondary,
.site-footer .btn--secondary,
.hero .btn--secondary {
  background-color: transparent;
  border-color: rgba(247, 244, 236, 0.55);
  color: var(--cream);
}
.section--navy .btn--secondary:hover,
.site-footer .btn--secondary:hover,
.hero .btn--secondary:hover {
  background-color: rgba(247, 244, 236, 0.14);
  border-color: var(--cream);
  color: var(--white);
}

/* Primary on a plain navy section: inverted to a cream fill. */
.section--navy .btn--primary {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
}
.section--navy .btn--primary:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* Primary over the hero photograph: a solid cream fill.
   A navy button would vanish into the dark hero, and gold was tried but its
   edge only reached about 3:1 against the brightest parts of a photograph.
   Cream stays clearly defined whatever the picture behind it. */
.hero .btn--primary {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
  font-weight: 600;
}
.hero .btn--primary:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--rule-soft);
  color: var(--navy);
}
.btn--ghost:hover { border-color: var(--gold); }

/* WhatsApp, brand green, kept understated. The darker end of WhatsApp's
   palette is used so white text on it passes AA contrast (5.2:1). */
.btn--whatsapp {
  background-color: #0f7a6d;
  border-color: #0f7a6d;
  color: var(--white);
}
.btn--whatsapp:hover {
  background-color: #0c655b;
  border-color: #0c655b;
  color: var(--white);
}

.btn--lg {
  min-block-size: 3.25rem;
  padding: 0.9rem var(--space-lg);
  font-size: var(--step-1);
}

.btn--block { inline-size: 100%; }

/* Disabled, used for the not-yet-live shop checkout placeholder.
   Disabled controls are exempt from the WCAG contrast rules, but this text
   carries real meaning ("Purchasing not yet available"), so it is kept
   readable anyway (5.3:1). */
.btn--disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background-color: #d9d5cc;
  border-color: #c4bfb4;
  color: #565249;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   6. HEADER & NAVIGATION
   ============================================================================= */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--navy);
  color: var(--cream);
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus {
  inset-block-start: var(--space-sm);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: rgba(247, 244, 236, 0.92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-block-size: 5rem;
}

@media (min-width: 48rem) {
  .site-header__inner { min-block-size: 5.75rem; }
}

/* --- Logo slot ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo size. Increase these two numbers to make the mark larger; the header
   grows with it automatically. */
.brand__mark {
  block-size: 3rem;
  inline-size: auto;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.brand:hover .brand__mark { transform: scale(1.04); }

@media (min-width: 48rem) {
  .brand__mark { block-size: 3.75rem; }
}

/* The company name beside the mark. Real text, not an image, so it stays
   sharp on any screen and search engines can read it. */
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name-main {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.brand__name-sub {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-block-start: 0.26rem;
}

@media (min-width: 48rem) {
  .brand__name-main { font-size: 1.7rem; }
  .brand__name-sub { font-size: 0.74rem; }
}

/* --- Nav ------------------------------------------------------------------ */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-inline: var(--space-2xs);
  background: none;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: var(--step--1);
  cursor: pointer;
}

.nav__toggle-bars {
  display: block;
  inline-size: 1.1rem;
  block-size: 1px;
  background-color: currentColor;
  position: relative;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background-color: currentColor;
}
.nav__toggle-bars::before { inset-block-start: -5px; }
.nav__toggle-bars::after  { inset-block-start: 5px; }

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: block;
  padding-block: var(--space-2xs);
  font-size: var(--step-0);
  color: var(--navy);
  text-decoration: none;
  position: relative;
}

/* Active page underline, set by assets/js/site.js via aria-current. */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.1rem;
  block-size: 1px;
  background-color: var(--gold);
}

.nav__link:hover { color: var(--navy-soft); }

/* Mobile: nav collapses into a panel below the header. */
@media (max-width: 47.999rem) {
  .nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background-color: var(--cream);
    border-block-end: 1px solid var(--rule);
    box-shadow: var(--shadow-card);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    display: none;
  }
  .nav[data-open="true"] { display: block; }

  .nav__list > li + li { border-block-start: 1px solid var(--rule-soft); }

  .nav__link { padding-block: var(--space-xs); }

  .nav__cta { margin-block-start: var(--space-sm); }
  .nav__cta .btn { inline-size: 100%; }
}

/* Desktop: inline row, toggle hidden. */
@media (min-width: 48rem) {
  .nav__toggle { display: none; }

  .nav {
    display: flex !important;
    align-items: center;
    gap: var(--space-lg);
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }
}


/* =============================================================================
   7. HERO
   ============================================================================= */

.hero {
  position: relative;
  background-color: var(--navy);
  color: var(--cream);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Navy wash over the hero photograph.
   This exists so the white headline stays readable whatever the picture
   behind it looks like. It is lighter at the top, where the sky usually is,
   and stronger lower down where the text sits.

   If you swap in a darker photograph you can reduce these numbers to let more
   of it show. If you use a very bright one, raise them. Below about 0.55 the
   headline starts to become hard to read on pale images. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 31, 58, 0.72) 0%,
    rgba(11, 31, 58, 0.78) 55%,
    rgba(11, 31, 58, 0.84) 100%
  );
}

.hero__media img,
.hero__media .ph {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl);
  max-inline-size: 46rem;
}

@media (min-width: 64rem) {
  .hero__inner { padding-block: var(--space-3xl); }
}

.hero h1 { color: var(--cream); }

.hero__sub {
  font-size: var(--step-1);
  /* Kept at 94% rather than lower, so it stays legible over a bright
     photograph. See the note on .hero__media::after. */
  color: rgba(247, 244, 236, 0.94);
  margin-block-start: var(--space-md);
  max-inline-size: 38rem;
}

.hero__actions { margin-block-start: var(--space-xl); }

/* On solid navy the gold eyebrow is fine, but over a photograph the backdrop
   is unpredictable and gold becomes hard to read. In the hero it is cream
   instead; the uppercase letter-spacing still marks it as an eyebrow. */
.hero .eyebrow { color: rgba(247, 244, 236, 0.92); }

/* Compact hero for interior pages (no photo). */
.hero--compact .hero__inner {
  padding-block: var(--space-xl);
}

@media (min-width: 64rem) {
  .hero--compact .hero__inner { padding-block: var(--space-2xl); }
}


/* =============================================================================
   8. CARDS, PILLARS, STEPS
   ============================================================================= */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--rule-soft);
  border-block-start: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover { box-shadow: var(--shadow-lift); }

.card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

@media (min-width: 48rem) {
  .card__body { padding: var(--space-lg); }
}

.card__body > .btn { margin-block-start: auto; align-self: flex-start; }

.card__title { margin-block-end: var(--space-3xs); }

/* Three-up highlight block. No icons, BUILD-PLAN forbids crescents and
   mosque clip-art, and generic icons cheapen the premium feel. A gold rule
   does the same job of separating items. */
.pillar {
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--gold);
}

.pillar__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--navy);
  margin-block-end: var(--space-2xs);
}

.section--navy .pillar__title { color: var(--cream); }
.section--navy .pillar { border-block-start-color: var(--gold); }

/* Numbered "how it works" steps. */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--navy);
  margin-block-end: var(--space-sm);
}

.section--navy .step__num { color: var(--gold); }

.step__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  margin-block-end: var(--space-3xs);
}


/* =============================================================================
   9. TRUST BAND & NOTICES
   -----------------------------------------------------------------------------
   The trust band carries the core regulatory disclosure. Do not soften or
   remove this wording, see docs/BUILD-PLAN.md §6.
   ============================================================================= */

.trust-band {
  background-color: var(--navy);
  color: rgba(247, 244, 236, 0.9);
  border-inline-start: 3px solid var(--gold);
  padding: var(--space-md);
  border-radius: var(--radius);
  font-size: var(--step-0);
}

.trust-band p + p { margin-block-start: var(--space-2xs); }

.section--navy .trust-band {
  background-color: var(--navy-soft);
}

/* Neutral advisory banner, used for the "policy not yet solicitor-reviewed"
   note and the "shop not live" note. */
.notice {
  background-color: var(--cream-warm);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-md);
  font-size: var(--step-0);
  color: var(--ink);
}

.notice__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--navy);
  margin-block-end: var(--space-3xs);
}


/* =============================================================================
   10. PLACEHOLDER IMAGE BLOCKS
   -----------------------------------------------------------------------------
   These are pure CSS, no external image services, so the site works offline
   and when opened straight from disk. Replace each one with a real <img>.
   See README.md "Swapping in your own images".
   ============================================================================= */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Inset gold hairline, so it reads as a deliberate design element rather
   than a broken image. */
.ph::after {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  pointer-events: none;
}

/* Subtle diagonal sheen, so an empty panel still reads as a designed surface
   rather than a blank box. */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(201, 162, 75, 0.07) 50%,
    transparent 70%
  );
  pointer-events: none;
}

/* The description of what belongs in each slot is HIDDEN from visitors.
   It stays in the HTML so you can still find it when swapping in real
   photographs, and so it turns up when you search the files. To see the
   labels again while you work, change "position: absolute" to
   "position: static" below. */
.ph__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ph--hero     { aspect-ratio: 16 / 9; }
.ph--wide     { aspect-ratio: 21 / 9; }
.ph--square   { aspect-ratio: 1 / 1; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--card     { aspect-ratio: 4 / 3; }

/* The hero placeholder fills its container rather than using aspect-ratio. */
.hero__media .ph {
  border-radius: 0;
  aspect-ratio: auto;
  min-block-size: 100%;
}
.hero__media .ph::after { inset: var(--space-md); }


/* =============================================================================
   11. FORMS
   ============================================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.field__required {
  color: #a13c2f; /* dark red, passes AA on cream */
  margin-inline-start: 0.15em;
}

.field__hint {
  font-size: var(--step--1);
  color: var(--slate);
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: 2.875rem;
  padding: 0.7rem var(--space-sm);
  background-color: var(--white);
  border: 1px solid #c8c2b4;
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field textarea {
  min-block-size: 8rem;
  resize: vertical;
  line-height: 1.6;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--slate); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.2);
  outline: none;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #a13c2f;
}

.field__error {
  font-size: var(--step--1);
  color: #a13c2f;
  font-weight: 500;
}

.field__error:empty { display: none; }

/* Consent checkbox */
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.field--check input {
  inline-size: 1.15rem;
  min-block-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.3rem;
  flex-shrink: 0;
  accent-color: var(--navy);
}

.field--check label {
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
}

/* Honeypot, visually hidden but NOT display:none, so bots still fill it. */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Submission status region */
.form__status {
  border-radius: var(--radius);
  font-size: var(--step-0);
}

.form__status:empty { display: none; }

.form__status[data-state="working"] {
  padding: var(--space-sm);
  background-color: var(--cream-warm);
  border-inline-start: 3px solid var(--slate);
}

.form__status[data-state="success"] {
  padding: var(--space-md);
  background-color: #eef3ee;
  border-inline-start: 3px solid #2f6b45;
}

.form__status[data-state="error"] {
  padding: var(--space-md);
  background-color: #f8eeec;
  border-inline-start: 3px solid #a13c2f;
}

.form__status-title {
  font-weight: 600;
  color: var(--navy);
  margin-block-end: var(--space-3xs);
}

.form-card {
  background-color: var(--white);
  border: 1px solid var(--rule-soft);
  border-block-start: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

@media (min-width: 48rem) {
  .form-card { padding: var(--space-xl); }
}


/* =============================================================================
   12. CONTACT CHANNELS
   ============================================================================= */

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--white);
  border: 1px solid var(--rule-soft);
  border-block-start: 2px solid var(--gold);
  border-radius: var(--radius);
  block-size: 100%;
}

.channel__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.channel__value {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}

.channel__value:hover { text-decoration: underline; }

.channel__note {
  font-size: var(--step--1);
  color: var(--slate);
}

address {
  font-style: normal;
}


/* =============================================================================
   13. PROSE, long-form legal pages
   ============================================================================= */

.prose {
  max-inline-size: var(--measure);
}

.prose > * + * { margin-block-start: var(--space-md); }

.prose h2 {
  font-size: var(--step-3);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule);
}

.prose h2:first-child { margin-block-start: 0; border: 0; padding-block-start: 0; }

.prose h3 {
  font-size: var(--step-2);
  margin-block-start: var(--space-lg);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-md);
}

.prose li + li { margin-block-start: var(--space-2xs); }

.prose a { color: var(--navy); text-decoration-color: var(--gold); }

.prose dl { margin-block-start: var(--space-sm); }
.prose dt { font-weight: 600; color: var(--navy); margin-block-start: var(--space-sm); }
.prose dd { margin-inline-start: 0; color: var(--slate); }

.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}

.prose th,
.prose td {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--rule-soft);
  vertical-align: top;
}

.prose th { color: var(--navy); font-weight: 600; }

/* Wide content must scroll inside its own box, never the page. */
.table-wrap { overflow-x: auto; }


/* =============================================================================
   14. FOOTER
   ============================================================================= */

.site-footer {
  background-color: var(--navy);
  color: rgba(247, 244, 236, 0.78);
  padding-block: var(--space-2xl) var(--space-lg);
  font-size: var(--step-0);
}

.site-footer h2,
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--space-sm);
}

.site-footer a {
  color: rgba(247, 244, 236, 0.86);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); }
}

.footer__logo {
  block-size: 2.5rem;
  inline-size: auto;
  margin-block-end: var(--space-sm);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list li + li { margin-block-start: var(--space-2xs); }

/* The compliance band. This wording is mandated, see BUILD-PLAN §6. */
.footer__compliance {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule-dark);
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(247, 244, 236, 0.7);
}

.footer__compliance p + p { margin-block-start: var(--space-2xs); }

.footer__legal {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: rgba(247, 244, 236, 0.6);
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Fuller partners row on the About page. Sits on a navy section so the
   cream logos read.

   The logos are sized by WIDTH, not height, and scale up to fill their share
   of the section. (These particular SVG files have a lot of empty margin baked
   into their square canvas, so sizing by height would leave them looking small
   with big gaps around them; sizing by width lets the mark grow to fill the
   space.) To make them bigger or smaller, change the clamp() max below. */
.partner-logos {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: var(--space-xl);
  max-inline-size: 960px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

@media (min-width: 40rem) {
  .partner-logos {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.partner-logos li {
  inline-size: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}

.partner-logos__item {
  block-size: clamp(3.5rem, 9vw, 6rem);
  inline-size: auto;
  max-inline-size: 100%;
  opacity: 0.92;
  transition: opacity var(--transition), transform var(--transition);
}

.partner-logos a {
  display: inline-flex;
  border-radius: var(--radius);
}

@media (hover: hover) {
  .partner-logos__item:hover { opacity: 1; transform: translateY(-2px); }
}

/* Partners strip. The logos are cream-coloured SVGs (see assets/img/) so they
   read on the navy footer. They sit at reduced opacity for a quiet, tasteful
   look, and brighten on hover. */
.footer__partners {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule-dark);
}

.footer__partners-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--space-md);
}

.footer__partners-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-2xl);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__partner {
  block-size: 2.5rem;
  inline-size: auto;
  opacity: 0.85;
  transition: opacity var(--transition);
}

@media (hover: hover) {
  .footer__partner:hover { opacity: 1; }
}

@media (min-width: 48rem) {
  .footer__partner { block-size: 2.75rem; }
}


/* =============================================================================
   15. UTILITIES
   ============================================================================= */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-centre { text-align: center; }
.mx-auto { margin-inline: auto; }
.muted { color: var(--slate); }
.section--navy .muted { color: rgba(247, 244, 236, 0.7); }

.small { font-size: var(--step--1); }

/* Italic pricing caveat, required whenever a price is shown. */
.price-caveat {
  font-style: italic;
  font-size: var(--step--1);
  color: var(--slate);
}

.divider {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: var(--space-xl);
}


/* =============================================================================
   16. MOTION
   -----------------------------------------------------------------------------
   Sections fade and rise gently as they scroll into view, and cards lift on
   hover. Deliberately understated: slow, small movements, nothing bouncing or
   sliding across the screen.

   Two safety rules are built in:

     1. Nothing is hidden unless JavaScript is running. The <html> element only
        gets the "motion-ready" class from site.js, so if scripts fail every
        section is simply visible. Content is never trapped behind an animation.

     2. If the visitor has asked their device to reduce motion (a common
        accessibility and motion-sickness setting), all of this switches off
        and everything appears immediately.

   To turn the animations off entirely, delete the "motion-ready" line in
   assets/js/site.js.
   ============================================================================= */

/* Starting state, applied only once JavaScript confirms it can animate. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Children of a revealed group come in one after another, which reads as
   considered rather than mechanical. */
.motion-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
}

.motion-ready [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.motion-ready [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.motion-ready [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 110ms; }
.motion-ready [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 220ms; }
.motion-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 330ms; }

/* --- Hero entrance -------------------------------------------------------- */
.motion-ready .hero__inner > * {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.motion-ready .hero__inner > *:nth-child(1) { animation-delay: 100ms; }
.motion-ready .hero__inner > *:nth-child(2) { animation-delay: 220ms; }
.motion-ready .hero__inner > *:nth-child(3) { animation-delay: 340ms; }
.motion-ready .hero__inner > *:nth-child(4) { animation-delay: 460ms; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* A very slow drift on the hero backdrop, so the header feels alive without
   drawing attention to itself. */
.motion-ready .hero__media {
  animation: hero-drift 24s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.2%); }
}

/* --- Card and panel hover ------------------------------------------------- */
.card {
  transition: box-shadow var(--transition), transform 300ms var(--transition);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
  .channel {
    transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1),
                border-color var(--transition);
  }
  .channel:hover {
    transform: translateY(-3px);
    border-block-start-color: var(--gold-hover);
  }
  .btn--primary:hover,
  .btn--secondary:hover { transform: translateY(-1px); }
}

/* The gold rule above each highlight draws itself in. */
.motion-ready .pillar { position: relative; border-block-start-color: transparent; }

.motion-ready .pillar::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 0;
  background-color: var(--gold);
  transition: inline-size 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}

.motion-ready [data-reveal-group].is-visible .pillar::before,
.motion-ready [data-reveal].is-visible.pillar::before { inline-size: 100%; }

/* Numbered steps settle into place. */
.step__num { transition: border-color var(--transition), color var(--transition); }

/* --- Turn everything off if the visitor prefers reduced motion ------------ */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal],
  .motion-ready [data-reveal-group] > *,
  .motion-ready .hero__inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .motion-ready .hero__media { animation: none !important; }
  .motion-ready .pillar {
    border-block-start-color: var(--gold);
  }
  .motion-ready .pillar::before { display: none; }
  .card:hover,
  .channel:hover,
  .btn:hover { transform: none !important; }
}


/* =============================================================================
   17. PRINT
   ============================================================================= */

@media print {
  .site-header,
  .nav,
  .hero__media,
  .btn { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}