/* ==========================================================================
   SUE'S HORSE SHIATSU — CORE STYLESHEET
   "For Happy Healthy Horses"
   ==========================================================================

   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base Elements
   3.  Typography
   4.  Layout Utilities (Container, Grid, Flex helpers)
   5.  Utility Classes (spacing, alignment, visibility)
   6.  Accessibility Helpers
   7.  Header & Navigation
   8.  Hero Section
   9.  Buttons
   10. Section Bands (alternating white / gold / navy / photo)
   11. Cards (general, services, stats)
   12. Testimonials
   13. FAQ Accordion
   14. Forms
   15. Tables
   16. Contact Section
   17. Image Placeholders
   18. Footer
   19. Animations
   20. Responsive Breakpoints

   This file is organised so new sections can be appended at the end of
   their relevant category without disturbing earlier rules. Every
   colour, spacing and font value is driven from the custom properties
   in Section 1 — change the brand there and the whole site updates.
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {

  /* ---- Brand colours ---- */
  --color-navy:        #011840;   /* primary brand navy */
  --color-navy-700:    #0A2A5E;   /* lighter navy — hover surfaces, gradients */
  --color-navy-600:    #143564;   /* lighter still — secondary surfaces */
  --color-navy-900:    #000D24;   /* deepest navy — overlays, footer base */

  --color-gold:        #FCC345;   /* primary brand gold */
  --color-gold-600:    #E8AE2E;   /* deeper gold — hover states */
  --color-gold-100:    #FDE9BE;   /* pale gold tint — subtle backgrounds */
  --color-gold-050:    #FFF7E6;   /* faintest gold wash */

  --color-white:       #FFFFFF;
  --color-off-white:   #FBF8F2;   /* warm off-white section background */
  --color-cream:       #F7F2E7;   /* deeper warm neutral for alternation */
  --color-primarygold: #FCC345;   /* primary brand gold */
    
  --color-grey-100:    #F4F5F7;   /* light grey background */
  --color-grey-200:    #E7E9ED;   /* borders, dividers */
  --color-grey-400:    #B9BFC9;   /* muted icons, placeholders */
  --color-grey-600:    #6B7280;   /* secondary text */

  /* ---- Text colours ---- */
  --color-text:         #1C2B3A;  /* primary body copy — soft near-navy */
  --color-text-muted:   #55606E;  /* secondary / supporting copy */
  --color-text-inverse: #FFFFFF;  /* text on navy/dark backgrounds */
  --color-text-gold:    var(--color-gold);
  --color-text-navy:    #011840;  /* primary brand navy for text on lighter                                     backgrounds */
    
  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-off-white);
  --color-bg-gold:     var(--color-gold-050);
  --color-bg-navy:     var(--color-navy);
  --color-border:      var(--color-grey-200);
  --color-link:        var(--color-navy);
  --color-link-hover:  var(--color-gold-600);

  /* ---- Typography ---- 
    'Cormorant Garamond', Georgia, 'Times New Roman', serif;*/
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;
    
  --fs-base:   1rem;         /* 16px */
  --fs-sm:     0.875rem;     /* 14px */
  --fs-xs:     0.75rem;      /* 12px */
  --fs-lg:     1.125rem;     /* 18px */
  --fs-xl:     1.375rem;     /* 22px */

  --fs-h1: clamp(2.75rem, 3vw + 2rem, 4.5rem);
  --fs-h2: clamp(2.1rem, 2vw + 1.5rem, 3.25rem);
  --fs-h3: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
  --fs-h4: clamp(1.25rem, 0.6vw + 1.1rem, 1.6rem);

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.65;

  --ls-heading: 0.02em;
  --ls-eyebrow: 0.25em ;
  --ls-eyebrow2: 0.18em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Layout ---- */
  --page-max-width: 1280px;
  --page-gutter:    2rem;
  --page-gutter-sm: 1.25rem;

  /* ---- Spacing scale (used throughout for consistency) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Radius ---- */
  --radius-xsm: 3px;
    --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(1, 24, 64, 0.06);
  --shadow-md: 0 8px 28px rgba(1, 24, 64, 0.10);
  --shadow-lg: 0 20px 48px rgba(1, 24, 64, 0.14);
  --shadow-gold: 0 10px 30px rgba(252, 195, 69, 0.28);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 180ms var(--ease-standard);
  --transition-base: 320ms var(--ease-standard);
  --transition-slow: 560ms var(--ease-standard);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---- Header height (used to offset sticky nav / anchor scroll) ---- */
  --header-height: 88px;
}

/* Reduced motion: honour user preference site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


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

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

/* Links sitting on dark backgrounds flip their hover to white/gold per brief */
.on-navy a,
.footer a {
  color: var(--color-gold);
}
.on-navy a:hover,
.footer a:hover {
  color: var(--color-white);
}

ul, ol {
  list-style: none;
}

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

/* ==========================================================================
   6. ACCESSIBILITY HELPERS
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--color-navy);
    
}

h2 { margin-bottom: var(--space-sm);}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); }

p {
  color: var(--color-text);
}

p + p {
  margin-top: var(--space-sm);
}

.lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
  margin-top: var(--space-lg);
}

.lead2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--color-gold-600);
  line-height: var(--lh-snug);
}
.eyebrow {
  display: inline-block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: var(--space-sm);
}

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

.eyebrow2 {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow2);
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: var(--space-sm);
}

.on-navy .eyebrow2,
.hero .eyebrow2 {
  color: var(--color-gold);
}

.eyebrowongold {
  display: inline-block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}
/* Large pull-quote treatment for philosophy statements between sections  - has been updated with script font
.pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-snug);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  color: var(--color-navy);
  position: relative;
  padding: 0 var(--space-md);
}
*/

.pull-quote {
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 3vw + 1.4rem, 3.75rem);
  font-weight: var(--fw-medium);
  font-style: normal;
  line-height: 1.25;
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  color: var(--color-navy);
  position: relative;
  padding: 0 var(--space-md);
}

.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  margin: var(--space-md) auto;
  border-radius: var(--radius-pill);
}

.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.section-heading {
  text-align: center;
  max-width: 75ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section-heading h2 {
  margin-bottom: var(--space-sm);
}

.section-heading .lead {
  margin-top: var(--space-lg);
}


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1440px;
}

/* Flexbox helpers */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

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

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Two-column layout with image + content, used across About/Shiatsu pages */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

/* Makes .split__media match the height of .split__content instead of
   sizing to the image's own aspect ratio (the default align-items:
   center just centers the image at its natural height within the
   taller column) — used on the index Welcome section so the photo's
   height always matches the text block beside it. */
.split--stretch {
  align-items: stretch;
}

/* Any photo inside a .split--stretch's .split__media fills the
   stretched box. Sizing lives on this generic selector (not inline on
   each <img>) so the mobile aspect-ratio fallback further down can
   actually win — an inline style always beats a class, so an inline
   height:100% would silently override any class-based height:auto
   fallback. */
.split--stretch .split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Welcome-section photo specifically needs a non-default crop anchor
   (see below) — everything else about its sizing comes from the
   generic rule above. */
.welcome-photo {
  object-position: right center;
}

/* Services "About Dr Sue Mitchell" photo — anchor to the top instead
   of the default centre once it reframes to the 4:3 mobile fallback
   on stacking, so the crop doesn't cut into the top of the subject. */
.split-photo--top {
  object-position: top;
}

/* At wide/large widths (>1024px) the box is wide enough relative to
   its (text-matched) height that anchoring hard-right — where the
   subject sits in the photo — looks right, and that's the default
   above. Between 1024px and the 860px stacking breakpoint the column
   keeps narrowing while the text height doesn't shrink to match, so
   holding a hard-right anchor the whole way down would crop further
   and further past the subject into uninteresting background.
   Instead this slides the anchor smoothly from 100% (right, matching
   the default exactly at 1024px) down to 50% (centred, at 861px) —
   so it keeps cropping in from the left same as before at first, then
   eases off and starts giving back from the right too as it
   approaches the point where a different, more-landscape photo takes
   over on stacking (see .img-swap below). clamp()'s min/max guard the
   formula outside this band in case rounding pushes past either end. */
@media (min-width: 861px) and (max-width: 1024px) {
  .welcome-photo {
    object-position: clamp(50%, calc(-214.15% + 30.67vw), 100%) center;
  }
}

/* ==========================================================================
   Art-direction photo swap — two <img>s in the markup, one shown per
   breakpoint via CSS. Deliberately not the <picture>/<source> element:
   this codebase's global reset (img, picture, svg, video { height:
   auto }) makes a bare <picture> collapse to auto height instead of
   filling a stretched/absolutely-positioned parent, breaking the
   cover-crop sizing above. A plain wrapper div sidesteps that.
   ========================================================================== */
.img-swap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.img-swap__narrow {
  display: none;
}

/* Welcome-section photo: swap to the stacked-friendly photo once
   .split drops to a single column. */
@media (max-width: 860px) {
  .split__media .img-swap__wide {
    display: none;
  }

  .split__media .img-swap__narrow {
    display: block;
  }

}

/* Any .img-swap sitting in a .section-bg (Ringo quote photo, Services
   Feedback section photo, ...) swaps to its narrower/taller crop once
   the section's column gets tall/narrow enough on small screens. */
@media (max-width: 860px) {
  .section-bg .img-swap__wide {
    display: none;
  }

  .section-bg .img-swap__narrow {
    display: block;
  }
}


/* ==========================================================================
   5. UTILITY CLASSES
   ========================================================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-navy    { color: var(--color-navy); }
.text-gold    { color: var(--color-gold-600); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-text-muted); }

.bg-white     { background-color: var(--color-white); }
.bg-off-white { background-color: var(--color-off-white); }
.bg-gold      { background-color: var(--color-bg-gold); }
.bg-navy      { background-color: var(--color-navy); color: var(--color-text-inverse); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-0  { padding: 0; }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-lg) 0;
}

.divider--gold {
  height: 3px;
  width: 60px;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  margin: var(--space-md) auto;
}


/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-navy);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-lg);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.site-logo img {
  height: 48px;
  width: auto;
}

.site-logo__text {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  text-decoration: none;
}

.site-logo__text span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--color-gold);
}

/* Primary nav: centred between logo and CTA */
.main-nav {
  display: flex;
  justify-content: center;
  flex: 1;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  /* Auto margins let the list self-centre inside .main-nav while a
     nested .header-cta (see markup) is pushed to the far right —
     keeps "Book a Session" pinned right without a separate sibling. */
  margin-inline: auto;
}

 /* .main-nav__list a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 0.5rem 0.1rem;
  position: relative;
}

.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width var(--transition-base);
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-gold);
}

.main-nav__list a:hover::after,
.main-nav__list a:focus-visible::after {
  width: 100%;
}

.main-nav__list a[aria-current="page"] {
  color: var(--color-gold);
}

.main-nav__list a[aria-current="page"]::after {
  width: 100%;
}
*/

.main-nav__list a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 0.5rem 0.1rem;
  position: relative;
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-gold);
}

.main-nav__list a[aria-current="page"] {
  color: var(--color-gold);
}

.header-cta {
  flex-shrink: 0;
}

/* Standalone "Book a Session" button shown in place of the collapsed
   nav's copy once the hamburger toggle takes over (see the nav-collapse
   breakpoint below) — sits in the middle of the bar naturally, between
   the logo and toggle, via the container's existing flex layout.
   Specificity (".site-header .header-cta-mobile", not just ".btn")
   is needed here too: the base ".btn { display: inline-flex }" rule
   further down the file is equal-specificity to a plain
   ".header-cta-mobile" selector and comes later in source order, so
   it would otherwise win and make this visible at every width. */
.site-header .header-cta-mobile {
  display: none;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   8. HERO SECTION
   ========================================================================== */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--color-text-inverse);
  overflow: hidden;
  background-color: var(--color-navy); /* fallback while photography is placeholder */
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroZoom 16s var(--ease-standard) forwards;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(1, 24, 64, 0.72) 0%,
    rgba(1, 24, 64, 0.55) 45%,
    rgba(1, 24, 64, 0.82) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  /* Scales with viewport width instead of a fixed rem value, so the
     padding stays proportionate to the (fluid-sized) heading/subtitle
     text at every screen size. Without this, the fixed padding used to
     stay full-size even as the text shrank on narrow screens, making
     the header look mostly empty space around a small block of text.
     Caps at the original 6rem so wide screens look exactly as before. */
  padding-block: clamp(1.5rem, 8vw, 6rem);
}

/* Shiatsu page slide-1 title — must never wrap, at any width,
   including the smallest phones. white-space:nowrap guarantees that,
   but only safely if the text is never wider than the available box:
   the box is widened (960px cap, harmless no-op below that width
   since the container itself is narrower there anyway) and the
   heading gets its own, more conservative sizing instead of the
   site's usual --fs-h1 clamp (max 4.5rem) — that grows too large for
   "About Equine Shiatsu" to fit on one line at any width without an
   unreasonably wide box.

   Sized in steps at the site's existing breakpoints (560 / 860 /
   1024px — see the full breakpoint list in the "21. RESPONSIVE
   BREAKPOINTS" section below) rather than one continuous formula, so
   each step's width can be checked/reported against a specific,
   nameable screen size instead of an arbitrary in-between point. */
.hero__content--title-nowrap {
  max-width: 960px;
}

.hero__content--title-nowrap h1 {
  font-size: 3.25rem; /* ≥1025px */
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .hero__content--title-nowrap h1 {
    font-size: 2.5rem; /* 861–1024px */
  }
}

@media (max-width: 860px) {
  .hero__content--title-nowrap h1 {
    font-size: 1.9rem; /* 561–860px */
  }
}

@media (max-width: 560px) {
  .hero__content--title-nowrap h1 {
    font-size: 1.2rem; /* ≤560px */
  }
}

.hero--page {
  min-height: 46vh;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-md);
  animation: fadeUp 900ms var(--ease-standard) both;
}

.hero__subtitle {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--color-white);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
  animation: fadeUp 900ms var(--ease-standard) 150ms both;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  animation: fadeUp 900ms var(--ease-standard) 300ms both;
}

/* Shiatsu slide-1's "jump to section" links — even gaps between all
   three regardless of label length, replacing what used to be a
   run of &nbsp;s between the first pair and nothing between the
   second, which is why the spacing looked uneven. */
.hero__quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* ==========================================================================
   8.1 HERO SLIDER (interactive — About Shiatsu / About Sue / Services headers)
   ========================================================================== */

/* Each .hero-slider__slide is a full, self-contained slide: its own
   photo, its own overlay gradient, its own eyebrow/heading/text. Only
   one slide is ever visible at a time; main.js (initHeroSliders) swaps
   which slide carries .is-active — on a timer, via the prev/next
   arrows, or via the dots — and this stylesheet just crossfades
   between whichever slide is active. */
.hero-slider__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-standard), visibility 0s linear 900ms;
  /* .hero's own align-items:center never actually centers a slide's
     content — being position:absolute takes each slide out of flex
     flow entirely, so .hero's centering doesn't apply to it. Without
     this, .container inside just sits in normal top-down block flow,
     so its top gap is only ever .hero__content's own (viewport-scaled)
     padding, while any leftover room below falls entirely to the
     bottom — fine when the content happens to nearly fill the slide,
     visibly lopsided (tall gap on one side, none on the other) when it
     doesn't, e.g. mid-range widths where the box is the fixed shallow
     height but the text isn't yet using the smaller compact sizing.
     Centering the slide itself fixes this at every width. */
  display: flex;
  align-items: center;
}

.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 900ms var(--ease-standard), visibility 0s linear 0s;
}

/* Each slide's own photo layer — same cover/zoom treatment as the
   single-image hero, just scoped per slide instead of shared. */
.hero-slider__slide .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slider__slide .hero__overlay {
  z-index: 1;
}

.hero-slider__slide .container {
  z-index: 2;
}

/* Prev/next arrows — anchored to the bottom corners (alongside the
   dots) rather than vertically centered, so they never sit on top of
   the heading/quote text when it wraps to extra lines on narrower
   screens. */
.hero-slider__arrow {
  position: absolute;
  bottom: var(--space-md);
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(1, 24, 64, 0.4);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
  background-color: rgba(1, 24, 64, 0.75);
}

.hero-slider__arrow svg {
  width: 20px;
  height: 20px;
}

.hero-slider__arrow--prev { left: var(--space-sm); }
.hero-slider__arrow--next { right: var(--space-sm); }

/* Dots */
.hero-slider__dots {
  position: absolute;
  z-index: 4;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2xs);
}

.hero-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.hero-slider__dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.2);
}

@media (max-width: 560px) {
  .hero-slider__arrow {
    width: 36px;
    height: 36px;
  }
  .hero-slider__arrow svg {
    width: 16px;
    height: 16px;
  }
}

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

/* Quote slide content — .hero__content normally caps at 720px with no
   auto margins, which leaves it flush against the left edge of the
   (centered) .container. That's fine for the title slide, but it
   pins the centered .pull-quote to one side instead of letting it
   span the hero. This modifier removes the cap so the quote can
   center and stretch across the full hero width on larger screens. */
.hero__content--quote {
  max-width: none;
  width: 100%;
}

@media (min-width: 900px) {
  .hero__content--quote .pull-quote {
    max-width: 68ch;
  }
}

/* Hero-slider quote slides pair an eyebrow above with the citation
   below — the pull-quote's decorative gold divider lines (before the
   quote and before the cite) just add extra vertical gap between
   them, so drop both here at every screen size. Also ease the quote
   font down slightly so it sits more comfortably in the shallow
   fixed-height slider on narrow screens. */
.hero-slider__slide .pull-quote::before,
.hero-slider__slide .pull-quote::after {
  display: none;
}

.hero-slider__slide .pull-quote {
  font-size: clamp(2rem, 2.4vw + 1.2rem, 3.25rem);
}

/* .pull-quote--compact — used on the About and Shiatsu pages' 2nd
   slide quotes, both longer than the other pages' slider quotes and
   needing to keep the fixed shallow header height — so scale down
   further on small mobiles only, where the full-size clamp above
   wraps to too many lines to fit (the Shiatsu quote at the full
   compact size still ran to 5 lines and pushed the citation off the
   bottom of the slide, so the floor here is lower than it first was). */
@media (max-width: 560px) {
  .hero-slider__slide .pull-quote--compact {
    font-size: clamp(1rem, 4vw + 0.25rem, 2rem);
  }
}

/* Shiatsu page's slide-1 subtitle is longer than the other pages'
   slide-1 text, and — same reasoning as .pull-quote--compact above —
   the fixed shallow hero height means it needs to shrink on small
   mobiles rather than wrap to enough lines to clip. */
@media (max-width: 560px) {
  .hero-slider__slide .hero__subtitle--tight {
    font-size: 0.85rem;
    line-height: var(--lh-snug);
  }
}


/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

/* Primary: navy background / white text on light or gold backgrounds */
.btn--primary {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-gold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
  box-shadow: var(--shadow-gold);
}

/* Secondary / on dark: white button, navy text, gold on hover */
.btn--light {
  background-color: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

.btn--light:hover,
.btn--light:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

/* Ghost / outline — for secondary actions like "Learn More" on light backgrounds */
.btn--outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Outline variant for use directly on navy backgrounds */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-gold);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.btn--sm {
  padding: 0.6rem 1.4rem;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* Text link styled as a "Learn More" arrow link on cards */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  text-decoration: none;
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform var(--transition-fast);
}

.link-arrow:hover {
  color: var(--color-gold-600);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Text link arrow link on dark bg */
.link-arrow2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  text-decoration: none;
}

.link-arrow2 svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform var(--transition-fast);
}

.link-arrow2:hover {
  color: var(--color-gold-600);
}

.link-arrow2:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   10. SECTION BANDS
   ========================================================================== */

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

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

/* Alternating rhythm classes — apply directly to <section> elements */
.section--white   { background-color: var(--color-white); }
.section--alt     { background-color: var(--color-off-white); }
.section--gold    { background-color: var(--color-bg-gold); }
.section--cream   { background-color: var(--color-cream); }
.section--gold-100    { background-color: var(--color-gold-100); }

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

.section--primarygold h2,
.section--primarygold h3,
.section--primarygold h4 {
  color: var(--color-white);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-text-inverse);
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--color-white);
}

.section--navy p {
  color: rgba(255, 255, 255, 0.82);
}

/* Photo-backed navy section — same photo + gradient treatment as the
   hero, but sized by its own content (heading + the 2-column grid)
   instead of a forced min-height, so it works as a normal section. */
.section--photo-navy {
  position: relative;
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-navy);
}

/* Tighter than .section--sm's 64px — this section packs a heading
   plus a 2-column grid in one go, and the goal is fitting all of it
   on one screen on medium/large viewports without scrolling.
   Specificity ("section.section--photo-navy", not just the class)
   is needed so this holds at every width: the generic responsive
   ".section { padding-block: var(--space-2xl) }" rule at ≤860px is
   equal-specificity to a plain ".section--photo-navy" selector and
   comes later in the file, so it was winning there and doubling the
   top/bottom spacing right at the hamburger-menu breakpoint. */
section.section--photo-navy {
  padding-block: var(--space-lg);
}

.section--photo-navy .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section--photo-navy .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--photo-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(1, 24, 64, 0.75) 0%,
    rgba(1, 24, 64, 0.6) 45%,
    rgba(1, 24, 64, 0.85) 100%
  );
}

.section--photo-navy .container {
  position: relative;
  z-index: 2;
}

/* Contact page intro paragraph — stretched to the full container
   width (see the max-width:none override on its .section-heading
   parent) so it wraps at 2 lines instead of the narrow centred
   column's ~4. Font size scales with viewport so it stays at 2
   lines as the available width narrows, rather than growing to 3+
   at in-between (tablet/900-1024px) widths.
<div class="section-heading reveal" style="max-width:none;">
*/


/* Note: this keeps the paragraph at 2 lines from full width down to
   roughly tablet width (~700px). Below that, the container itself
   gets too narrow for this sentence at a readable size — the clamp
   floor is set at ~14.5px (small but still legible body text) rather
   than shrinking further to force 2 lines, so it runs to 3-4 lines
   on phones instead of becoming unreadably tiny. */
.contact-lead {
  font-size: clamp(0.9rem, -0.35rem + 2.5vw, 1.5rem);
}

/* Full-width photograph band with optional caption overlay */
.section--photo {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background-color: var(--color-navy-700);
  overflow: hidden;
}

.section--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition: transform var(--transition-slow);*/
}

/* .section--photo:hover img {
  transform: scale(1.04);
}
*/


.section--photo .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section--photo .section-bg img,
.section--photo .section-bg .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}



/* Optional darkening overlay — add ONE modifier class alongside
   .section--photo, or none at all, depending on the photo:

     (no modifier)                       no overlay — best for photos
                                          that already read well behind
                                          white text on their own (e.g.
                                          a dark horse's body/coat)

     .section--photo--overlay-medium     medium navy‑blue overlay — the
                                          go‑to choice for lighter photos
                                          (e.g. a grey/white horse, open
                                          sky) where text needs a bit
                                          more help but the photo should
                                          still read clearly through it

     .section--photo--overlay-dark       strong navy overlay — the
                                          original/heaviest option, for
                                          very bright photos or busy
                                          backgrounds behind text

   All overlays are bottom‑weighted (0deg gradient) to match this
   section's flex-end text alignment. */

.section--photo--overlay-medium::before,
.section--photo--overlay-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.section--photo--overlay-medium::before {
  background: linear-gradient(0deg, rgba(1, 24, 64, 0.58) 0%, rgba(1, 24, 64, 0.5) 100%);
}

.section--photo--overlay-dark::before {
  background: linear-gradient(0deg, rgba(1, 24, 64, 0.75) 0%, rgba(1, 24, 64, 0.35) 100%);
}
 /* For a light to dark gradient created originally 
.section--photo--overlay-medium::before {
  background: linear-gradient(0deg, rgba(11, 61, 145, 0.58) 0%, rgba(11, 61, 145, 0.14) 60%);
}

.section--photo--overlay-dark::before {
  background: linear-gradient(0deg, rgba(1, 24, 64, 0.75) 0%, rgba(1, 24, 64, 0.05) 55%);
}

Original for this section was very gradient
.section--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(1,24,64,0.75) 0%, rgba(1,24,64,0.05) 55%);
}
*/

.section--photo .container {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl);
}



.section--photo-shallow {
  position: relative;
  min-height: 40vh;          /* shallower than the hero's 88vh */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  overflow: hidden;
  background-color: var(--color-navy-700);
}

.section--photo-shallow .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section--photo-shallow .section-bg img,
.section--photo-shallow .section-bg .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.section--photo-shallow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1,24,64,0.72) 0%, rgba(1,24,64,0.6) 100%);
}

.section--photo-shallow .container {
  position: relative;
  z-index: 2;
}



/* Lighter, more transparent overlay option — lets more of the photo
   show through than the default .section--photo-shallow overlay.
   Add this class ALONGSIDE .section--photo-shallow on the <section>
   to switch to it, e.g.:
   <section class="section section--sm section--photo-shallow section--photo-shallow--light">
*/
.section--photo-shallow--light::before {
  background: linear-gradient(
    180deg,
    rgba(11, 61, 145, 0.32) 0%,
    rgba(11, 61, 145, 0.6) 100%
  );
}

/* Pull-quote colour variant for use over a photo/navy background 
colour originally for lite cite color: rgba(255, 255, 255, 0.72);*/
.pull-quote--light {
  color: var(--color-white);
}

.pull-quote--light cite {
  color: var(--color-gold-600);  
}









/* CTA banner — navy call-to-action band used between sections */
.cta-banner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-900) 100%);
  color: var(--color-white);
  text-align: center;
  padding-block: var(--space-2xl);
}



.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-lg);
}


/* ==========================================================================
   11. CARDS
   ========================================================================== */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card__media img {
  transform: scale(1.06);
}

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

.card__body h3,
.card__body h4 {
  margin-bottom: var(--space-2xs);
}

.card__body p {
  color: var(--color-text-muted);
  flex: 1;
}

.card__body .link-arrow {
  margin-top: var(--space-md);
}

/* Services card — photograph, short description, Learn More button */
.service-card {
  composes: card;
}

/* Icon feature card — used for "Why choose Sue" / value props, no photo */
.feature-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  color: var(--color-gold-600);
}

.feature-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.feature-card h4 {
  margin-bottom: var(--space-2xs);
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Animated statistic panels ("Qualified / Insured / Evidence-informed...") */
.stat-panel {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.stat-panel__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-sm);
  color: var(--color-gold);
}

.stat-panel__label {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
}

.stat-panel__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3xs);
}

/* Condition / symptom tag cards */
.tag-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.tag-card:hover {
  border-color: var(--color-gold);
  background-color: var(--color-gold-050);
  transform: translateY(-3px);
}
/* Condition / symptom tag cards with no hover effect */
.tag-card2 {
  background-color: var(--color-gold-050);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  /* transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);*/
}




/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.testimonial {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--color-gold);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2xs);
}

.testimonial p {
  font-style: italic;
  color: var(--color-text);
  flex: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-style: normal;
}

.testimonial__author strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}

.testimonial__author span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}




/* ==========================================================================
   Self-hosted responsive horizontal video embed — centred, scales fluidly, keeps a
   locked 16:9 frame on any screen size. Wrap a native <video> element in
   .video-embed; no JS required. */

.video-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  /* No bottom margin — the caption's own margin-top provides the gap
     to it, same as .video-pair below, so the two match. */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-navy-900); /* shows while video loads */
}

.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional caption beneath the video */
.video-embed__caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Two portrait (9:16) clips shown side by side — a companion to
   .video-embed above for clips shot vertically rather than as a
   landscape session recording. Stacks to one column below 860px,
   matching .video-embed's caption styling via the same
   .video-embed__caption class. */
.video-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.video-pair__item {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-navy-900);
}

.video-pair__item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .video-pair {
    flex-direction: column;
    align-items: center;
  }

  .video-pair__item {
    max-width: 360px;
  }
}

/* Split "featured testimonial" panel — a portrait (9:16) self-hosted
   video paired with a landscape image carrying a quote overlay.
   Designed to sit above the regular testimonial-card grid. */
.testimonial-feature {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  height: clamp(420px, 62vh, 640px);
  margin-bottom: var(--space-2xl);
}

.testimonial-feature__video {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-navy-900);
}

.testimonial-feature__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-feature__media {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.testimonial-feature__media img,
.testimonial-feature__media .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Gradient scrim + overlaid quote, anchored to the bottom of the image */
.testimonial-feature__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
  background: linear-gradient(
    180deg,
    rgba(1, 24, 64, 0) 40%,
    rgba(1, 24, 64, 0.55) 75%,
    rgba(1, 24, 64, 0.85) 100%
  );
}

.testimonial-feature__overlay blockquote {
  color: var(--color-white);
}

.testimonial-feature__overlay p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.testimonial-feature__overlay cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Flip interaction: the photo + short overlay quote is the "front"
   face; clicking/hovering/tapping flips to a solid navy "back" face
   carrying the fuller testimonial. Toggled by hover on devices that
   support it, and by a .is-flipped class (added via click/tap — see
   main.js initFlipCards) for touch and keyboard users. */
.testimonial-feature__media.flip-card {
  perspective: 1400px;
  cursor: pointer;
}

.testimonial-feature__media.flip-card:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 700ms var(--ease-standard);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Belt-and-braces alongside backface-visibility: explicitly fade out
     whichever face isn't the current one, so the front's photo/quote
     can never show through on top of the back face (or vice versa),
     regardless of any 3D-rendering quirks in a given browser. */
  opacity: 1;
  transition: opacity 700ms var(--ease-standard);
}

.flip-card__back {
  transform: rotateY(180deg);
  opacity: 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-900) 100%);
  display: flex;
  align-items: center;
  padding: var(--space-lg);
}

.flip-card:hover .flip-card__front,
.flip-card.is-flipped .flip-card__front {
  opacity: 0;
}

.flip-card:hover .flip-card__back,
.flip-card.is-flipped .flip-card__back {
  opacity: 1;
}

.flip-card__back blockquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.flip-card__back cite {
  display: block;
  margin-top: var(--space-md);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Small "tap to read more" hint, visible on touch devices where hover
   doesn't apply. Hidden once flipped — via hover too, so it doesn't
   sit on top of the back face on devices where hover does the flip. */
.flip-card__hint {
  position: absolute;
  z-index: 2;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-pill);
  background: rgba(1, 24, 64, 0.55);
  color: var(--color-white);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 200ms ease;
}

.flip-card:hover .flip-card__hint,
.flip-card.is-flipped .flip-card__hint {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner {
    transition: none;
  }
  .flip-card__front,
  .flip-card__back {
    transition: none;
  }
}

/* Mobile: stack video above image, both at natural aspect ratio */
@media (max-width: 860px) {
  .testimonial-feature {
    flex-direction: column;
    height: auto;
  }

  .testimonial-feature__video {
    height: auto;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .testimonial-feature__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}


/* ==========================================================================
   13. FAQ ACCORDION
   ========================================================================== */

.accordion {
  max-width: 780px;
  margin-inline: auto;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.accordion-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.accordion-item__icon::before,
.accordion-item__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-gold-600);
  transition: transform var(--transition-base);
}

.accordion-item__icon::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}

.accordion-item__icon::after {
  left: 50%; top: 0;
  height: 100%; width: 2px;
  transform: translateX(-50%);
}

.accordion-item[open] .accordion-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.accordion-item__panel {
  padding-bottom: var(--space-md);
  color: var(--color-text-muted);
  animation: fadeUp 320ms var(--ease-standard);
}

/* Native <details>/<summary> friendly reset so JS is optional */
details.accordion-item summary {
  list-style: none;
  cursor: pointer;
}

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


/* ==========================================================================
   14. FORMS
   ========================================================================== */

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

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

.form-group label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

.form-group .required {
  color: var(--color-gold-600);
}

.form-control {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px var(--color-gold-050);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.form-success,
.form-error {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.form-success {
  background-color: #EAF6EC;
  color: #1F6B33;
}

.form-error {
  background-color: #FCEAEA;
  color: #A32424;
}


/* ==========================================================================
   15. TABLES
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  min-width: 480px;
  background-color: var(--color-white);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table caption {
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-navy);
  padding: var(--space-sm) var(--space-md);
}

.table th,
.table td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table thead th {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.table tbody tr:nth-child(even) {
  background-color: var(--color-off-white);
}

.table tbody tr:hover {
  background-color: var(--color-gold-050);
}


/* ==========================================================================
   16. CONTACT SECTION
   ========================================================================== */

.contact-section {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-2xl);
}

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

.contact-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.contact-item__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-gold);
}


.contact-item__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.contact-item h4 {
  color: var(--color-white);
  font-size: var(--fs-h4);
  margin-bottom: 0.2rem;
}

.contact-item p,
.contact-item a {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-base);
  text-decoration: none;
}

.contact-item a:hover {
  color: var(--color-gold);
}

/* Left-column wrapper for the contact-item list — mirrors .qr-panel's
   box treatment (background/border/padding) so the two columns on the
   Contact page read as a matching pair, just stacked instead of a
   single row. Gap is wider than a plain list so the QR-mini graphic
   in the "wide" item has more room to be sized up. */
.contact-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
   background-color: var(--color-navy-700);
  /* background-color: rgba(255, 255, 255, 0.06);  
    background: linear-gradient(135deg, var(--color-navy-600) 10%, var(--color-navy) 55%, var(--color-navy-900) 100%);*/  
  border: 1px solid var(--color-navy-700);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

/* QR code booking panel — used on the dedicated Contact page */
.qr-panel {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background-color: var(--color-navy-700);
  border: 1px solid var(--color-navy-700);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  flex-wrap: wrap;
}

/* This panel's own dark background means it needs light text
   regardless of what section it's placed in — .qr-panel__text
   below covers this too, but that wrapper class isn't actually
   used in the markup, so these un-scoped h4/p rules were being
   read as navy/default-text colour instead once the surrounding
   section stopped being .section--navy. Tighter line-height here
   also keeps this panel closer in depth to the other column. */
.qr-panel h4 {
  color: var(--color-white);
}

.qr-panel p {
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--lh-snug);
}

.qr-panel__code {
  width: 140px;
  height: 140px;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-400);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-sm);
}

.qr-panel__text h4 {
  color: var(--color-white);
  margin-bottom: var(--space-2xs);
}

.qr-panel__text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}

.qr-panel a {
  color: var(--color-white);
}

.qr-panel a:hover,
.qr-panel a:focus-visible {
  color: var(--color-gold);
}

/* Simple map placeholder, replace with embedded map later */
.map-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}


/* ==========================================================================
   17. IMAGE PLACEHOLDERS
   ========================================================================== */

/* Elegant placeholder that already reads as "part of the design" —
   swap the containing <img> for a real photograph later with zero
   other changes required. Apply to a <div> or figure wrapping the
   eventual <img>, or use directly as the background of an empty figure. */

.img-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-navy-600) 0%, var(--color-navy) 55%, var(--color-navy-900) 100%);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(252, 195, 69, 0.16), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(255, 255, 255, 0.06), transparent 50%);
}

.img-placeholder__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
}

.img-placeholder__dims {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Aspect-ratio presets so placeholders reflow responsively */
.img-placeholder--hero    { aspect-ratio: 16 / 9; min-height: 320px; }
.img-placeholder--wide    { aspect-ratio: 21 / 9; }
.img-placeholder--square  { aspect-ratio: 1 / 1; }
.img-placeholder--portrait{ aspect-ratio: 3 / 4; }
.img-placeholder--card    { aspect-ratio: 4 / 3; }

/* Lighter variant for gold/white sections so contrast stays gentle */
.img-placeholder--light {
  background: linear-gradient(135deg, var(--color-gold-100) 0%, var(--color-cream) 60%, var(--color-white) 100%);
  color: var(--color-navy-700);
}

.img-placeholder--light .img-placeholder__dims {
  color: rgba(1, 24, 64, 0.45);
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy-900);
  color: rgba(255, 255, 255, 0.9);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer-brand .site-logo__text {
  color: var(--color-white);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-sm);
  max-width: 32ch;
}

.footer-heading {
  font-family: var(--font-heading);
  color: var(--color-gold);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-sm);
}

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

.footer-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.footer-links a:hover {
  color: var(--color-gold);
}

.footer-socials {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--color-white);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.footer-socials a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.footer-socials a:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

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

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-white);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a:hover {
  color: var(--color-gold);
}


/* ==========================================================================
   19. ANIMATIONS
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Scroll-reveal utility: pair with a small IntersectionObserver in main.js.
   IMPORTANT: this is scoped under html.js so it is a true progressive
   enhancement. If main.js fails to load or run for any reason, the
   <html> element never gets the "js" class, this rule never applies,
   and every .reveal element is simply visible by default — content is
   never permanently hidden by a missing or broken script. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Simple page-load fade for the whole document */
.page-transition {
  animation: fadeIn 480ms var(--ease-standard);
}


/* ==========================================================================
   20.1 PARTNER / ACCREDITATION LOGOS (tESA, IAAT)
   ========================================================================== */

/* Hero placement — sits to the right of the two hero buttons on large
   screens, and stacks below them on small screens via flex-wrap. */
.hero__actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  animation: fadeUp 900ms var(--ease-standard) 300ms both;
}

.hero__actions-row .hero__actions {
  animation: none; /* parent row already handles the entrance animation */
}

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

.partner-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.partner-logos__item img {
  height: 100%;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}


.partner-logos__item2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 138px;
}

.partner-logos__item img2 {
  height: 100%;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}
/* Use on dark/navy or photo backgrounds (hero headers, footer) to force
   the logos to render as clean white silhouettes, regardless of the
   source artwork's own colour. */
.partner-logos--light .partner-logos__item img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Placeholder chip shown until real logo artwork is supplied */
.partner-logos__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-sm);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

/* Footer placement — small mono logos beside the "Professional
   Registrations" copy. Overrides the base .footer-memberships (which
   is a simple wrapping row) with a stacked layout: one row per
   registration, logo + name side by side. */
.footer-memberships {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}

.footer-memberships__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-memberships__logo {
  height: 26px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  flex-shrink: 0;
}

.footer-memberships__placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-2xs);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}


/* ==========================================================================
   20.2 PRICING / SESSION CARDS
   ========================================================================== */

.pricing-card {
  background-color:var(--color-gold-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.pricing-card__header {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-700) 100%);
  color: var(--color-white);
  padding: var(--space-lg);
}

.pricing-card__header h3 {
  color: var(--color-white);
  margin-bottom: var(--space-3xs);
}

.pricing-card__price {
  color: var(--color-gold);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

.pricing-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
}

.pricing-card__body p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.pricing-card__area {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: auto;
}


/* ==========================================================================
   20.3 STEP LIST (numbered how-to steps, e.g. booking via Equigate)
   ========================================================================== */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.step-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.step-list__number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list p {
  margin: 0;
  padding-top: 0.2rem;
}


/* ==========================================================================
   20.4 VIDEO PLACEHOLDER
   ========================================================================== */

.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy-600) 0%, var(--color-navy) 55%, var(--color-navy-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.video-placeholder__play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.video-placeholder__play svg {
  width: 26px;
  height: 26px;
  fill: var(--color-white);
  margin-left: 4px;
}

.video-placeholder__label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  text-align: center;
}


/* ==========================================================================
   20.5 STYLED CONTENT LISTS & INFO CARDS
   ========================================================================== */

/* Gold-bulleted list for benefit / qualification / condition lists used
   across the content pages. */
.styled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.styled-list li {
  position: relative;
  padding-left: 1.4em;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.styled-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-gold-600);
}

.styled-list--tight li {
  font-size: var(--fs-sm);
}

/* NAVY-bulleted list for lists used on primarygold background sections
   across the content pages. */
.styled-listPG {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.styled-listPG li {
  position: relative;
  padding-left: 1.4em;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.styled-listPG li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-navy);
}

.styled-listPG--tight li {
  font-size: var(--fs-sm);
}



/* Small white content card — used for the "conditions helped" category
   groupings and similar boxed lists. */
.info-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

/* .info-card sits in a repeat(auto-fit, minmax(260px, 1fr)) grid, so
   it gets narrower as more columns fit (e.g. 4-up on medium/large
   screens) rather than wider — the opposite of the general heading
   scale (--fs-h3, up to 2.25rem), which grows with viewport width.
   That combination let a long word in a heading (e.g. "Maintenance")
   run past the card's edge at exactly the widths with the most
   columns. Sized here instead of inheriting --fs-h3, and with a
   word-break fallback in case a future heading is still too long. */
.info-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
}


/* Small QR-code placeholder that floats to the right of a contact-item
   row (used for the Equigate app line on the Contact page). */
.contact-item--wide {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.contact-item__qr-mini {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  object-fit: contain;
  padding: 2px;
}


/* Row that puts the numbered Equigate steps on the left and the QR
   code placeholder floating to the right, wrapping on mobile. */
.qr-steps-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.qr-steps-row__list {
  flex: 1 1 240px;
  min-width: 220px;
}

.qr-steps-row__code {
  flex-shrink: 0;
  margin: 0;
}


/* ==========================================================================
   21. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  :root {
    --header-height: 76px;
  }

  /* Narrows the gap between nav links (not their font size) so the
     full 6-link nav + Book a Session button keeps fitting on one line
     all the way down to the 860px hamburger breakpoint, instead of
     clipping off the right edge before that switch happens. */
  .main-nav__list {
    gap: var(--space-sm);
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split {
    gap: var(--space-xl);
  }
}

/* ---- Nav collapse (≤ 860px) ---- */
@media (max-width: 860px) {

  .main-nav,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Sits between the logo and the toggle in DOM order, so the
     container's existing justify-content:space-between naturally
     places it in the middle of the bar — no absolute positioning,
     so it can never overlap the logo text on narrow screens.
     Specificity (not just source order) beats the small-mobile
     ".btn { width: 100%; }" rule below, which would otherwise stretch
     it to the full header width. */
  .site-header .header-cta-mobile {
    display: inline-flex;
    width: auto;
  }

  /* Compact dropdown menu, toggled via main.js — sized to its own
     content (not the full screen) so the page stays visible around
     it. Anchored under the toggle via the sticky .site-header as its
     positioning context (the nearest positioned ancestor). */
  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    right: var(--page-gutter);
    width: max-content;
    max-width: calc(100vw - 2 * var(--page-gutter));
    max-height: calc(100vh - var(--header-height) - var(--space-lg));
    margin-top: var(--space-sm);
    background-color: var(--color-navy);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    z-index: var(--z-overlay);
    overflow-y: auto;
  }

  .main-nav.is-open .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    /* Base rule's margin-inline:auto would otherwise self-centre the
       list inside this now auto-width dropdown, pulling it out of
       alignment with the Book a Session button below it. */
    margin-inline: 0;
    gap: var(--space-md);
  }

  /* Book a Session sits as part of the same left-aligned column as
     the links above it, instead of stretching full-width. */
  .main-nav.is-open .header-cta {
    display: block;
    align-self: stretch;
    margin-top: var(--space-lg);
  }

  .main-nav.is-open .header-cta .btn {
    width: 100%;
  }
}

/* ---- Mobile / small tablet (≤ 860px) ---- */
@media (max-width: 860px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .split,
  .split--reverse {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__media {
    order: 0;
  }

  /* .split--stretch relies on .split__media being stretched to match
     its sibling column's height — once .split drops to a single
     column above, there's no sibling row to stretch against, so the
     img's height:100% would resolve against an indefinite height and
     collapse. Fall back to a fixed aspect ratio here instead. */
  .split--stretch .split__media img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 78vh;
    text-align: left;
  }

  /* The rule above was written for the full-height homepage hero only,
     but because .hero and .hero--page share the same specificity, this
     later rule was silently overriding the shallow inner-page header
     back up to 78vh on every phone/tablet — nearly full-screen instead
     of a shallow band. This re-asserts a shallow (but not paper-thin)
     height for .hero--page specifically. */
  .hero--page {
    min-height: 34vh;
  }

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

/* ---- Small mobile (≤ 560px) ---- */
@media (max-width: 560px) {
  :root {
    --page-gutter: var(--page-gutter-sm);
    /* Header keeps the depth it had just above this breakpoint
       (the 76px set at ≤1024px) instead of shrinking further to
       68px, so there's room for the logo's two lines. */
  }

  /* Logo + centered "Book a Session" + hamburger no longer all fit on
     one line at this width, so the logo wordmark and subtitle and the
     button are scaled down — freeing enough room for all three to sit
     on the header without overlapping or clipping. */
  .site-logo__text {
    font-size: 0.85rem;
  }

  .site-logo__text span {
    font-size: 0.45rem;
  }

  .site-header .header-cta-mobile {
    padding: 0.45rem 0.65rem;
    font-size: 0.6rem;
  }

  .site-header .container {
    gap: var(--space-3xs);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .qr-panel {
    flex-direction: column;
    text-align: center;
  }

  .contact-item {
    text-align: left;
  }
}

/* Print: strip decorative chrome */
@media print {
  .site-header, .nav-toggle, .site-footer, .hero__actions, .btn {
    display: none !important;
  }
  body {
    color: #000;
  }
}

/* ==========================================================================
   END OF FILE
   ========================================================================== */