/* ==========================================================================
   Mwanga Mental Health Assessment Hub
   styles.css

   Contents:
   1.  Design tokens (variables)
   2.  Reset and base
   3.  Typography
   4.  Layout helpers
   5.  Header and navigation
   6.  Buttons
   7.  Hero
   8.  Horizon rule (brand device)
   9.  Route cards
   10. Content sections
   11. Media band (video)
   12. Status notice
   13. Forms
   14. Footer
   15. Utilities
   16. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Colours are sampled directly from the Mwanga logo, then adjusted where
   necessary so that every text/background pair meets WCAG AA contrast.
   ========================================================================== */

:root {
  /* Brand colours ------------------------------------------------------- */
  --navy:        #003078;  /* logo navy — primary brand colour             */
  --navy-dark:   #001E4D;  /* deeper navy for footer and overlays          */
  --ink:         #0A1E3C;  /* body text — navy-tinted near-black           */
  --blue:        #0A5C96;  /* links and accents (darkened for AA contrast) */
  --blue-light:  #0078C0;  /* logo mid-blue — decorative use only          */
  --gold:        #F0C000;  /* logo gold — primary call to action           */
  --gold-dark:   #D9AC00;  /* gold hover state                             */
  --green:       #3D8F2A;  /* logo green — used sparingly                  */

  /* Neutrals ------------------------------------------------------------ */
  --paper:       #FCFBF8;  /* warm off-white page background               */
  --white:       #FFFFFF;
  --mist:        #EDF2F8;  /* cool pale blue section fill                  */
  --line:        #D8DEE7;  /* hairline borders                             */
  --muted:       #55637A;  /* secondary text (AA on paper and white)       */

  /* Typography ---------------------------------------------------------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --size-xs:   0.8125rem;  /* 13px */
  --size-sm:   0.9375rem;  /* 15px */
  --size-base: 1.0625rem;  /* 17px — comfortable body size                 */
  --size-md:   1.1875rem;  /* 19px */
  --size-lg:   1.5rem;     /* 24px */
  --size-xl:   2rem;       /* 32px */
  --size-2xl:  2.5rem;     /* 40px */
  --size-3xl:  3.25rem;    /* 52px */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.65;

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

  /* Structure ----------------------------------------------------------- */
  --wrap:        72rem;    /* main content width                           */
  --wrap-narrow: 44rem;    /* reading width for prose                      */
  --radius:      4px;      /* restrained — this is not a consumer app      */
  --radius-lg:   8px;
  --shadow-sm:   0 1px 2px rgba(10, 30, 60, 0.06);
  --shadow-md:   0 2px 12px rgba(10, 30, 60, 0.08);
  --transition:  180ms ease;
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* The hidden attribute must win over any display rule set later in this
   stylesheet. Without this, elements such as .field__error declare
   display: block and stay visible even when marked hidden. */
[hidden] { display: none !important; }

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — visible only when focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}


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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  /* Clinical vocabulary contains very long words — "neurodevelopmental"
     is 18 characters — which overflow narrow phones. Allow them to break
     rather than forcing a horizontal scrollbar on the whole page. */
  
}

h1 { font-size: var(--size-2xl); }

/* Small phones: step the display sizes down so long words still fit. */
@media (max-width: 26rem) {
  :root {
    --size-2xl: 2rem;      /* 32px */
    --size-xl:  1.625rem;  /* 26px */
    --size-lg:  1.3125rem; /* 21px */
  }
}
h2 { font-size: var(--size-xl); }
h3 { font-size: var(--size-lg); line-height: var(--leading-snug); }
h4 { font-size: var(--size-md); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

a:hover { color: var(--navy); }

strong { font-weight: 700; }

/* Eyebrow label — small caps above a heading. Used to name the audience
   or route, so it carries information rather than decorating. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--space-3);
}

.lede {
  font-size: var(--size-md);
  color: var(--muted);
  max-width: 40rem;
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.wrap-narrow {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-8);
}

.section--tight { padding-block: var(--space-7); }

.section--mist {
  background: var(--mist);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}


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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy);
  padding-block: var(--space-2);
}

.brand__mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* On narrow phones the full name wraps to three lines and crowds the menu
   button, so the subtitle is reduced and allowed only two lines. */
@media (max-width: 26rem) {
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: var(--size-base); }
  .brand__sub { font-size: 0.75rem; line-height: 1.25; max-width: 11rem; }
}

/* Navigation ----------------------------------------------------------- */

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  min-height: 44px;
}

.nav__toggle-bars {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}

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

.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }

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

.nav__link {
  display: block;
  color: var(--ink);
  font-size: var(--size-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-3) var(--space-2);
}

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

.nav__link[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Mobile: panel collapses under the header. */
@media (max-width: 70rem) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) 0 var(--space-5);
  }

  .site-nav.is-open { display: block; }

  .nav__list {
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-5);
  }

  .nav__list li + li { border-top: 1px solid var(--line); }

  .nav__link {
    padding-block: var(--space-4);
    font-size: var(--size-base);
  }

  .nav__cta { margin-top: var(--space-4); }
}

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

  .site-nav { display: block !important; }

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

  .nav__link { padding-inline: var(--space-3); }

  .nav__cta { margin-left: var(--space-3); }
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}

/* Gold on navy text — the logo's own pairing, and high contrast. */
.btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-dark);
}

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

.btn--secondary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn--secondary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
}

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

.btn--ghost:hover {
  background: var(--navy);
  color: var(--white);
}

/* On dark photographic backgrounds. */
.btn--ondark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.btn--ondark:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* ==========================================================================
   7. HERO
   Photograph of the consultation room with a navy scrim on the left so the
   headline sits on a readable field rather than over image detail.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--navy-dark);
  isolation: isolate;
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Scrim: strong on the left where the text sits, clearing to the right so
   the room remains visible. Vertical gradient on small screens instead. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 26, 66, 0.88) 0%,
    rgba(0, 26, 66, 0.78) 60%,
    rgba(0, 26, 66, 0.62) 100%
  );
}

.hero__inner {
  padding-block: var(--space-8);
  max-width: 40rem;
}

.hero h1 {
  color: var(--white);
  font-size: var(--size-2xl);
  margin-bottom: var(--space-4);
}

.hero__lede {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--size-md);
  margin-bottom: var(--space-5);
}

.hero .eyebrow { color: var(--gold); }

.hero .btn-group { margin-top: var(--space-5); }

@media (min-width: 48rem) {
  .hero__inner { padding-block: var(--space-9); }

  .hero h1 { font-size: var(--size-3xl); }

  .hero__scrim {
    background: linear-gradient(
      to right,
      rgba(0, 26, 66, 0.90) 0%,
      rgba(0, 26, 66, 0.80) 42%,
      rgba(0, 26, 66, 0.42) 72%,
      rgba(0, 26, 66, 0.22) 100%
    );
  }
}


/* ==========================================================================
   8. HORIZON RULE — brand device
   A thin three-stop gradient (navy → blue → gold) echoing the sunrise over
   water in the Mwanga mark. Used to open sections. Purely decorative, so it
   is hidden from assistive technology at the point of use.
   ========================================================================== */

.horizon {
  width: 4.5rem;
  height: 3px;
  border: 0;
  margin: 0 0 var(--space-5);
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    var(--blue-light) 55%,
    var(--gold) 100%
  );
}

.horizon--light {
  background: linear-gradient(
    to right,
    var(--white) 0%,
    var(--blue-light) 55%,
    var(--gold) 100%
  );
}


/* ==========================================================================
   9. ROUTE CARDS
   The three entry routes. These are the primary navigation decision on the
   homepage, so they are links, not decorative panels.
   ========================================================================== */

.routes {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

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

.route {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.route:hover { box-shadow: var(--shadow-md); }

.route--a { border-top-color: var(--blue-light); }
.route--b { border-top-color: var(--navy); }
.route--c { border-top-color: var(--green); }

.route h3 { margin-bottom: var(--space-3); }

.route__for {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.route p { color: var(--muted); font-size: var(--size-sm); }

.route__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-size: var(--size-sm);
}

.route__list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.route__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background: var(--gold);
}

.route__link {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--size-sm);
  text-decoration: none;
  color: var(--blue);
}

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

.route__link::after {
  content: " \2192";
  transition: none;
}


/* ==========================================================================
   10. CONTENT SECTIONS
   ========================================================================== */

/* Two-column split: text beside an image. */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--reverse .split__media { order: -1; }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* Plain fact list — used for governance and status information. */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.facts li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-1);
}

@media (min-width: 40rem) {
  .facts li {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-5);
  }
}

.facts dt,
.facts .facts__label {
  font-weight: 700;
  font-size: var(--size-sm);
  color: var(--navy);
}

.facts .facts__value {
  color: var(--muted);
  font-size: var(--size-sm);
}


/* ==========================================================================
   11. MEDIA BAND
   Full-width video section break. Uses object-fit rather than
   background-attachment: fixed, which iOS Safari does not support.
   ========================================================================== */

.band {
  position: relative;
  min-height: 20rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-dark);
}

@media (min-width: 48rem) {
  .band { min-height: 26rem; }
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.band__media img,
.band__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 30, 77, 0.55);
}

.band__inner {
  text-align: center;
  max-width: 40rem;
  padding: var(--space-7) var(--space-5);
}

.band__inner p {
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  margin: 0;
}

@media (min-width: 48rem) {
  .band__inner p { font-size: var(--size-xl); }
}

.band__attribution {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   12. STATUS NOTICE
   States plainly that Mwanga is not yet accepting referrals. This is the
   most important honesty device on the site, so it is given real weight
   rather than being tucked into the footer.
   ========================================================================== */

.notice {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.notice h2,
.notice h3 {
  font-size: var(--size-md);
  margin-bottom: var(--space-2);
}

.notice p:last-child { margin-bottom: 0; }

.notice--inverse {
  background: var(--navy-dark);
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: var(--gold);
  color: rgba(255, 255, 255, 0.9);
}

.notice--inverse h2,
.notice--inverse h3 { color: var(--white); }


/* ==========================================================================
   13. FORMS
   ========================================================================== */

.form { max-width: 36rem; }

.field { margin-bottom: var(--space-5); }

.field label {
  display: block;
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.field__hint {
  display: block;
  font-weight: 400;
  font-size: var(--size-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

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

.field--error input,
.field--error select,
.field--error textarea { border-color: #B3261E; border-width: 2px; }

.field__error {
  display: block;
  color: #B3261E;
  font-size: var(--size-sm);
  font-weight: 600;
  margin-top: var(--space-2);
}

.required { color: #B3261E; }


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

.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--size-sm);
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

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

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}

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

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

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

.footer__list li { margin-bottom: var(--space-1); }

/* Footer links are a real navigation route, so they need a usable tap
   target rather than the 17px height of a bare line of text. */
.footer__list a {
  display: inline-block;
  padding-block: var(--space-2);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--size-md);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--size-xs);
  color: rgba(255, 255, 255, 0.65);
}


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

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

.stack > * + * { margin-top: var(--space-4); }

.text-muted { color: var(--muted); }


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */

@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;
  }
}


/* ==========================================================================
   17. ADDITIONAL COMPONENTS
   Added when the inner pages were built.
   ========================================================================== */

/* Page header — the banner at the top of every page except the homepage. */
.page-head {
  background: var(--navy-dark);
  color: var(--white);
  padding-block: var(--space-7);
}

.page-head h1 { color: var(--white); margin-bottom: var(--space-3); }

.page-head .eyebrow { color: var(--gold); }

.page-head p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--size-md);
  max-width: 42rem;
  margin-bottom: 0;
}

/* Breadcrumb ---------------------------------------------------------- */
.crumb {
  font-size: var(--size-xs);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-4);
}

.crumb a { color: rgba(255, 255, 255, 0.9); }

/* Numbered process steps ---------------------------------------------
   Numbers are used only where the content genuinely is a sequence. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: var(--space-6);
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

/* Vertical connector between steps. */
.steps > li::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2rem;
  bottom: var(--space-3);
  width: 1px;
  background: var(--line);
}

.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }

.steps h3 { font-size: var(--size-md); margin-bottom: var(--space-2); }
.steps p { color: var(--muted); font-size: var(--size-sm); margin-bottom: 0; }

/* Feature grid --------------------------------------------------------- */
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

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

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.panel h3 { font-size: var(--size-md); margin-bottom: var(--space-2); }
.panel p:last-child { margin-bottom: 0; }
.panel p { color: var(--muted); font-size: var(--size-sm); }

/* Tick list ------------------------------------------------------------ */
.ticks {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--size-sm);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--gold);
}

/* FAQ — native details/summary, so it works without JavaScript. -------- */
.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  min-height: 48px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: var(--size-lg);
  font-weight: 400;
  color: var(--blue);
  flex-shrink: 0;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details > div {
  padding-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--size-sm);
  max-width: 44rem;
}

.faq details > div p:last-child { margin-bottom: 0; }

/* Footer social links -------------------------------------------------- */
.social {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  font-size: var(--size-xs);
  font-weight: 600;
}

.social a:hover {
  border-color: var(--gold);
  text-decoration: none;
}

.social svg { width: 16px; height: 16px; fill: currentColor; }

/* Form status message -------------------------------------------------- */
.form__status {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: var(--white);
  margin-bottom: var(--space-5);
}

.form__status p:last-child { margin-bottom: 0; }

/* Error summary shown above the form after a failed submit. */
.form__errors {
  padding: var(--space-4);
  border: 2px solid #B3261E;
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: var(--space-5);
}

.form__errors h2 {
  font-size: var(--size-md);
  color: #B3261E;
  margin-bottom: var(--space-2);
}

.form__errors ul { margin: 0; padding-left: var(--space-5); }
.form__errors a { color: #B3261E; font-weight: 600; }

/* Prose page (privacy, accessibility) ---------------------------------- */
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); font-size: var(--size-md); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }

.prose > :first-child { margin-top: 0; }

/* Editor note — visible marker for information still to be supplied.
   Delete these blocks from the HTML once the real content is in place. */
.todo {
  background: #FFF8E1;
  border: 1px dashed #B08900;
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: var(--size-sm);
  color: #6B5200;
  margin-bottom: var(--space-5);
}

.todo strong { color: #6B5200; }
.todo p:last-child { margin-bottom: 0; }


/* ==========================================================================
   19. NAVIGATION AND GRID CORRECTIONS
   Added when the Programmes pages were introduced.
   ========================================================================== */

/* With seven navigation items the labels began wrapping onto two lines at
   mid-range desktop widths. Keeping each label on one line and trimming the
   horizontal padding fixes it without collapsing to the mobile menu early. */
@media (min-width: 70.0625rem) {
  .nav__link,
  .nav__cta .btn {
    white-space: nowrap;
  }

  .nav__link { padding-inline: var(--space-2); }

  .nav__cta .btn { padding-inline: var(--space-4); }
}

/* Between the desktop breakpoint and 76rem the navigation is tight, so the
   brand subtitle is dropped. The full name stays in the footer and in the
   page title, so nothing is lost. */
@media (min-width: 70.0625rem) and (max-width: 88rem) {
  .brand__sub { display: none; }
  .brand__name { font-size: var(--size-base); }
}

/* The routes grid is designed for three cards. When only two are present,
   stretching them across three columns leaves an awkward empty cell. */
@media (min-width: 48rem) {
  .routes--two { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   20. EDITORIAL DETAIL BLOCKS
   Replaces the boxed .panel grid used across most pages.

   Wrapping every piece of information in a bordered, shadowed, rounded box
   is the most recognisable signature of a generated site: it flattens
   hierarchy, because everything ends up looking equally important, and it
   fills the page with rules that carry no meaning.

   This treatment uses a single rule above each item and lets whitespace do
   the separating. Same information, less furniture.
   ========================================================================== */

.detail-grid {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: 1fr;
}

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

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

.detail {
  border-top: 2px solid var(--navy);
  padding-top: var(--space-4);
}

/* Alternating accent picks up the sunrise in the logo without adding
   another decorative element. */
.detail:nth-child(3n + 2) { border-top-color: var(--blue-light); }
.detail:nth-child(3n + 3) { border-top-color: var(--gold); }

.detail h3 {
  font-size: var(--size-md);
  margin-bottom: var(--space-2);
}

.detail p {
  color: var(--muted);
  font-size: var(--size-sm);
  margin-bottom: 0;
}

.detail p + p { margin-top: var(--space-3); }

.detail ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-sm);
}

.detail li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 2px;
  background: var(--gold);
}


/* --------------------------------------------------------------------------
   Service entry — used on the assessment pages. A heading, a description,
   and two supporting columns, separated by a rule rather than boxed.
   -------------------------------------------------------------------------- */

.service {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
}

.service:first-of-type { border-top: 2px solid var(--navy); }

.service > h3 {
  font-size: var(--size-lg);
  margin-bottom: var(--space-3);
}

.service__intro {
  max-width: 44rem;
  color: var(--ink);
}

.service__cols {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}

@media (min-width: 44rem) {
  .service__cols { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.service__cols h4 {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-3);
}

.service__cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-sm);
}

.service__cols li {
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-2);
}

.service__cols li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 2px;
  background: var(--gold);
}


/* --------------------------------------------------------------------------
   Scope table — what is and is not provided, side by side.
   -------------------------------------------------------------------------- */

.scope {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .scope { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.scope__col h3 { font-size: var(--size-md); }

.scope__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-sm);
}

.scope__col li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.scope--in li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--green);
}

.scope--out li {
  color: var(--muted);
}

.scope--out li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: -0.1em;
  color: var(--muted);
  font-size: var(--size-md);
  line-height: 1.4;
}


/* ==========================================================================
   21. PATHWAY
   A scroll-linked process section. The media panel stays put while the
   numbered steps move past it, and the active step is highlighted.

   Without JavaScript every step is fully visible and readable, and without
   position: sticky it degrades to an ordinary two-column layout.
   ========================================================================== */

.pathway {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .pathway {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* Sticky media column ---------------------------------------------------- */
.pathway__media { position: relative; }

@media (min-width: 62rem) {
  .pathway__media {
    position: sticky;
    top: 6rem;
  }
}

.pathway__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-dark);
}

.pathway__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Large step number sitting over the image. */
.pathway__count {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--navy-dark);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-top-right-radius: var(--radius-lg);
}

.pathway__progress {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pathway__tick {
  height: 3px;
  flex: 1;
  background: var(--line);
  transition: background var(--transition);
}

.pathway__tick.is-done { background: var(--gold); }

/* Steps column ----------------------------------------------------------- */
.pathway__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pathstep;
}

.pathway__step {
  counter-increment: pathstep;
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-7);
  border-top: 1px solid var(--line);
}

.pathway__step:first-child { border-top: 0; }

.pathway__step::before {
  content: counter(pathstep, decimal-leading-zero);
  position: absolute;
  left: var(--space-4);
  top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition);
}

/* A rule that fills in as the step becomes active. */
.pathway__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-5);
  width: 2px;
  height: 0;
  background: var(--gold);
  transition: height 300ms ease;
}

.pathway__step h3 {
  font-size: var(--size-md);
  color: var(--muted);
  transition: color var(--transition);
  margin-bottom: var(--space-2);
}

.pathway__step p {
  color: var(--muted);
  font-size: var(--size-sm);
  margin-bottom: 0;
  max-width: 34rem;
}

/* Active state, applied by script. Everything stays legible when it is
   not applied, so nothing is hidden behind the interaction. */
.pathway__step.is-active::before { color: var(--gold); }
.pathway__step.is-active h3 { color: var(--navy); }
.pathway__step.is-active p { color: var(--ink); }

@media (min-width: 62rem) {
  .pathway__step { padding-left: calc(var(--space-8) + var(--space-2)); }
  .pathway__step::before { font-size: var(--size-base); }
  .pathway__step.is-active::after { height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pathway__step::after { transition: none; }
}


/* ==========================================================================
   22. CONTRAST PAIR
   The "before and after" framing: what people run into, and what we do
   about it. Two columns, no boxes.
   ========================================================================== */

.pair {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

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

.pair__col h3 {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--line);
}

.pair__col--problem h3 { color: var(--muted); }
.pair__col--answer h3 { color: var(--navy); border-bottom-color: var(--gold); }

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

.pair__col li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--size-sm);
}

.pair__col--problem li { color: var(--muted); }
.pair__col--answer li { color: var(--ink); font-weight: 500; }


/* ==========================================================================
   23. SPONSORSHIP TIERS
   Bronze, silver and gold. Metal tones only, kept restrained: a top rule
   and the tier name, not a gradient.
   ========================================================================== */

.tiers {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 56rem) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.tier {
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--line);
  padding-top: var(--space-5);
}

.tier--bronze { border-top-color: #A9652E; }
.tier--silver { border-top-color: #8A929B; }
.tier--gold   { border-top-color: var(--gold); }

.tier__name {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.tier--bronze .tier__name { color: #8C5225; }
.tier--silver .tier__name { color: #61686F; }
.tier--gold   .tier__name { color: #8A6D00; }

.tier h3 {
  font-size: var(--size-lg);
  margin-bottom: var(--space-3);
}

.tier > p {
  color: var(--muted);
  font-size: var(--size-sm);
}

.tier ul {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-size: var(--size-sm);
}

.tier li {
  position: relative;
  padding-left: var(--space-5);
  padding-block: var(--space-2);
  border-top: 1px solid var(--line);
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.tier .btn { margin-top: auto; }


/* ==========================================================================
   24. NAVIGATION DROPDOWNS
   Eight top-level items left the header cramped and made the organisation
   name compete with the menu. Grouping the service pages under two headings
   gives the brand room and shortens the decision for the visitor.

   Built on a <button> plus a list, so it works by keyboard and by touch.
   Hover opens it on pointer devices; click and Enter work everywhere.
   ========================================================================== */

.nav__group { position: relative; }

.nav__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}

.nav__trigger:hover { color: var(--blue); }

.nav__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}

.nav__trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

.nav__group.is-current > .nav__trigger {
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--gold);
}

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

.nav__menu a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--size-sm);
}

.nav__menu a:hover { color: var(--blue); }

.nav__menu .nav__desc {
  display: block;
  font-size: var(--size-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* Mobile: the group is just an indented list, always open. -------------- */
@media (max-width: 70rem) {
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--space-4);
    font-size: var(--size-base);
    pointer-events: none;
  }

  .nav__trigger::after { display: none; }

  .nav__group > .nav__trigger {
    font-weight: 700;
    color: var(--navy);
  }

  .nav__menu li { border-top: 1px solid var(--line); }

  .nav__menu a {
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
  }

  .nav__menu .nav__desc { display: none; }
}

/* Desktop: a panel below the trigger. ------------------------------------ */
@media (min-width: 70.0625rem) {
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 17rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition),
                visibility var(--transition);
    z-index: 120;
  }

  .nav__group:hover > .nav__menu,
  .nav__group:focus-within > .nav__menu,
  .nav__trigger[aria-expanded="true"] + .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__menu a {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid transparent;
  }

  .nav__menu a:hover,
  .nav__menu a:focus-visible {
    background: var(--mist);
    border-left-color: var(--blue-light);
  }
}


/* --------------------------------------------------------------------------
   Brand: with fewer top-level items the full organisation name can breathe.
   -------------------------------------------------------------------------- */

@media (min-width: 70.0625rem) {
  .brand__sub { display: block; }
  .brand__name { font-size: var(--size-md); }
}


/* ==========================================================================
   25. GRID AND PATHWAY CORRECTIONS
   ========================================================================== */

/* An auto-fitting grid so a five-item set does not strand two items on a
   half-empty row. */
.detail-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Pathway without imagery: the sticky panel becomes a number and the name
   of the current step. */
.pathway__marker {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pathway__marker .pathway__count {
  position: static;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--size-3xl);
  margin: 0 0 var(--space-3);
}

.pathway__label {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--white);
  margin: 0;
}

@media (min-width: 62rem) {
  .pathway { grid-template-columns: 0.75fr 1.25fr; }
}
/* Footer crisis notice — full width above the footer bar. */
.footer__notice {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 180, 171, 0.45);
  border-left: 4px solid #FFB4AB;
  border-radius: var(--radius);
  background: rgba(255, 180, 171, 0.08);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.footer__notice h3 {
  color: #FFB4AB;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer__notice p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--size-sm);
  margin-bottom: 0;
  max-width: 60rem;
}

.footer__notice a {
  color: #FFB4AB;
  font-weight: 700;
  text-decoration: underline;
}

.footer__notice a:hover { color: var(--white); }

/* ==========================================================================
   27. LOCATIONS MAP
   Leaflet with OpenStreetMap tiles. The written list beside it carries the
   same information, so nothing depends on the map rendering.
   ========================================================================== */

.locations {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .locations { grid-template-columns: 1.2fr 1fr; gap: var(--space-6); }
}

.locations__map {
  height: 22rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--mist);
  z-index: 0;   /* keep Leaflet panes below the sticky header */
}

@media (min-width: 56rem) {
  .locations__map { height: 26rem; }
}

.locations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--navy);
}

.locations__item { border-bottom: 1px solid var(--line); }

.locations__btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-body);
  transition: padding-left 180ms ease;
}

.locations__btn:hover { padding-left: var(--space-3); }

.locations__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-md);
  color: var(--navy);
  margin-bottom: 2px;
}

.locations__address,
.locations__note {
  display: block;
  font-size: var(--size-sm);
  color: var(--muted);
}

.locations__note { margin-top: var(--space-1); font-style: italic; }

/* Pins, drawn in CSS so there is no image to load. */
.pin { display: grid; place-items: center; }

.pin__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue-light);
  border: 3px solid var(--white);
  box-shadow: 0 1px 6px rgba(10, 30, 60, 0.5);
}

.pin--main .pin__dot {
  width: 22px;
  height: 22px;
  background: var(--gold);
  border-color: var(--navy-dark);
}

/* Leaflet's own popup, restyled to match the site. */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  font-family: var(--font-body);
}

.leaflet-popup-content { font-size: var(--size-sm); line-height: 1.5; }
.leaflet-popup-content strong { color: var(--navy); }
.leaflet-popup-content em { color: var(--muted); margin-top: 4px; }