/* =========================================================
   Driver Training Australia: homepage preview V2
   Custom CSS, no framework. Tokens first, then base,
   components and sections in page order.
   ========================================================= */

/* ---------- Fonts (self-hosted, SIL OFL 1.1, licences in assets/fonts) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand (sampled from the existing target logo; provisional until original artwork) */
  --plum: #503150;
  --plum-800: #3a223a;
  --plum-900: #2e1a2e;
  --lavender: #9b73a5;
  --lavender-soft: #d9cbdd;
  --violet: #826488;
  --violet-ink: #6e5574;   /* small text on pale violet: 5.6:1 */
  --yellow: #ffc000;
  --yellow-hover: #ffcd33;

  /* Neutrals */
  --warm: #faf9f6;
  --white: #ffffff;
  --ink: #242127;
  --muted: #5c5560;        /* 6.8:1 on warm white */
  --pale: #f1ecf3;
  --pale-2: #f6f1f8;
  --line: #e4dce6;
  --line-strong: #cbbcd0;
  --on-dark: #ffffff;
  --on-dark-soft: #e6dcea; /* 8.3:1 on plum */
  --error: #b42318;
  --error-bg: #fef3f2;

  /* Glass navigation */
  --glass: rgba(46, 26, 46, 0.58);
  --glass-solid: rgba(46, 26, 46, 0.92);
  --glass-panel: rgba(46, 26, 46, 0.96);
  --glass-line: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);      /* 17 to 18 */
  --fs-small: 0.9375rem;                                     /* 15 */
  --fs-label: 0.9375rem;
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);             /* 32 to 56 */
  --fs-h2: clamp(1.5625rem, 1.2rem + 1.25vw, 2.375rem);      /* 25 to 38 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);      /* 19 to 21 */

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);               /* ~16 at 320, 20 at 390, 32 at desktop */
  --section-y: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);      /* 36 to 68 */
  --gap: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);                /* 16 to 24 */
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --overlap: 0px;

  /* Floating header geometry: every scroll offset derives from these */
  --nav-top: 10px;
  --nav-h: 3.5rem;   /* JS replaces this with the measured capsule height */
  --header-offset: calc(var(--nav-top) + var(--nav-h) + env(safe-area-inset-top, 0px));

  --shadow-sm: 0 1px 2px rgba(46, 26, 46, 0.06), 0 2px 8px rgba(46, 26, 46, 0.05);
  --shadow-md: 0 2px 6px rgba(46, 26, 46, 0.06), 0 12px 32px rgba(46, 26, 46, 0.10);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.5, 0.64, 1);
  --t-fast: 200ms;

  --focus: var(--plum);
}

@media (min-width: 1024px) {
  :root { --nav-top: 14px; --nav-h: 4rem; --overlap: 56px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-offset) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.motion-off { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word; /* long words wrap instead of overflowing at large text sizes */
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--plum);
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
cite { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a[href^="tel:"] { white-space: nowrap; }
.final-cta__phone[href^="tel:"] { white-space: normal; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

[hidden] { display: none !important; }

.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;
}
.break { overflow-wrap: anywhere; }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2; }

.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 100;
  transform: translateY(calc(-100% - 2rem));
  background: var(--yellow); color: var(--ink);
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* Client presentation version hides anything not yet approved */
[data-presentation="client"] [data-unapproved] { display: none !important; }

/* ---------- Target motif (echoes the logo, used sparingly) ---------- */
.target-mark {
  display: inline-block;
  width: 0.875rem; height: 0.875rem;
  border-radius: 50%;
  background: conic-gradient(var(--yellow) 0 25%, var(--plum) 0 50%, var(--violet) 0 75%, var(--lavender) 0);
  box-shadow: 0 0 0 2px var(--white);
  flex: none;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-ink);
}
.eyebrow--light { color: var(--on-dark-soft); }
.eyebrow--light .target-mark { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.625rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--t-fast) var(--ease); }
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--yellow-hover); box-shadow: 0 6px 16px rgba(46, 26, 46, 0.18); }
.btn--primary:hover .icon { transform: translateX(3px); }
.btn--outline { background: var(--white); color: var(--plum); border-color: var(--plum); }
.btn--outline:hover { background: var(--plum); color: var(--white); }
.btn--outline:hover .icon { transform: translateX(3px); }
.btn--quiet { background: transparent; color: var(--plum); border-color: var(--line-strong); }
.btn--quiet:hover { border-color: var(--plum); background: var(--pale); }
.btn--sm { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover, .btn--outline:hover { transform: translateY(-1px); }
}

.link-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 0 0.5rem; margin-right: -0.5rem;
  background: none; border: 0; border-radius: 6px;
  color: var(--plum); font: inherit; font-size: var(--fs-small); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn .icon { width: 1rem; height: 1rem; }

/* ---------- Floating glass header ---------- */
/* Zero-height sticky wrapper: the capsule floats over the hero without taking layout space */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: 0;
}
.site-header__bar {
  padding-top: calc(var(--nav-top) + env(safe-area-inset-top, 0px));
  pointer-events: none;
}
.nav-capsule {
  pointer-events: auto;
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
  min-height: 3.5rem;
  padding: 6px 6px 6px 7px;
  border-radius: 32px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 30px rgba(20, 8, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--white);
  /* Only the colour changes; the blur itself is never animated */
  transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.site-header.is-solid .nav-capsule {
  background: var(--glass-solid);
  box-shadow: 0 12px 32px rgba(20, 8, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-capsule, .site-header.is-solid .nav-capsule { background: var(--plum-800); }
}
.nav-capsule :focus-visible { outline-color: var(--yellow); }

.brand {
  display: inline-flex; align-items: center; gap: 0.65rem;
  flex: 1 1 0%; /* shrink and wrap the name before the capsule wraps */
  min-width: min-content; min-height: 44px;
  padding-right: 0.25rem;
  text-decoration: none; color: var(--white);
  border-radius: 999px;
}
/* The logo JPEG has a white background, so it sits deliberately on a white badge */
.brand__badge {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.brand__badge img { width: 34px; height: auto; }
.brand__name {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
  line-height: 1.15; letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Narrow phones (under 360px): compact two-line name and a slightly smaller badge,
   so the name stays visible and the capsule has no empty centre */
@media (max-width: 359.98px) {
  .brand { gap: 0.5rem; }
  .brand__badge { width: 38px; height: 38px; }
  .brand__badge img { width: 29px; }
  .brand__name { font-size: 0.875rem; line-height: 1.1; letter-spacing: -0.005em; }
  .brand__line { display: block; white-space: nowrap; }
}

.site-nav { flex: none; max-width: 100%; }
.nav-list { list-style: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 0 0.9rem;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--yellow); border-radius: 0; padding-inline: 0.15rem; margin-inline: 0.75rem; }
.nav-link[aria-current="page"]:hover { background: transparent; }
.nav-trigger__chevron { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
.nav-trigger[aria-expanded="true"] .nav-trigger__chevron { transform: rotate(180deg); }

.header-phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.5rem;
  color: var(--white); font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: 999px;
}
.header-phone .icon { width: 1.05rem; height: 1.05rem; color: var(--yellow); }
.header-phone:hover { text-decoration: underline; }
.nav-capsule .btn--primary { border-radius: 999px; white-space: nowrap; }

.menu-toggle, .menu-fallback {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: var(--white);
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
  cursor: pointer;
}
.menu-toggle .icon { width: 1.2rem; height: 1.2rem; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Dropdown (shared) */
.dropdown__list { list-style: none; display: grid; gap: 2px; }
.dropdown__link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.75rem; align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  color: var(--white); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.dropdown__link:hover, .dropdown__link:focus-visible { background: rgba(255, 255, 255, 0.09); }
.dropdown__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--yellow);
}
.dropdown__icon .icon { width: 1.15rem; height: 1.15rem; }
.dropdown__text { display: grid; gap: 0.1rem; min-width: 0; }
.dropdown__title { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.dropdown__desc { font-size: 0.875rem; line-height: 1.35; color: var(--on-dark-soft); }

/* Mobile and tablet: capsule with Menu button and an opaque panel below */
@media (max-width: 1023.98px) {
  /* V7.2: the open panel is positioned against the header's own container (.site-header__bar), not inside the
     glass capsule. A backdrop-filter makes the capsule the panel's containing block and its own compositing
     layer, which on iPhone Safari let the hero show through and along the panel's left edge. While the menu is
     open the capsule drops its blur (solid plum instead), so the panel is no longer a descendant of a filtered
     layer; it shares the capsule's outer left and right edges via the container's own gutters. */
  .site-header__bar { position: relative; }
  .nav-capsule { position: static; }
  .site-header.menu-open .nav-capsule {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--plum-800);
  }
  /* V7.2.1: dim backdrop behind the open menu. Without it, the hero photo's own rounded corner (sitting just
     behind the panel's corner) and other page images showed as bright fragments beside the panel's edge.
     It sits inside the header's stacking context, under the capsule and panel; tapping it closes the menu
     (existing outside-tap handler). */
  .site-header.menu-open::before {
    content: "";
    position: fixed; inset: 0;
    z-index: -1;
    background: rgba(26, 12, 26, 0.9);
  }
  .site-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: max(var(--gutter), env(safe-area-inset-left));
    right: max(var(--gutter), env(safe-area-inset-right));
    padding: 0.5rem 0.75rem 0.9rem;
    border-radius: var(--radius-lg);
    /* V7.2.1: fully opaque surface painted under the border too (border-box), with an opaque border colour.
       Previously the background stopped at the padding box and the border was 14% white, so the hero photo
       showed through the 1px border ring: the bright sliver and uneven edging seen in the screenshots. */
    background-color: var(--plum-800);  /* fully opaque: no hero text or graphics behind the links */
    background-clip: border-box;
    border: 1px solid #564156;           /* opaque equivalent of 14% white over plum-800 */
    box-shadow: 0 18px 40px rgba(20, 8, 20, 0.35);
    /* Short screens: the panel scrolls inside itself; Close stays in the capsule above */
    max-height: calc(100vh - var(--header-offset) - 8px - 16px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--header-offset) - 8px - 16px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
  }
  .site-menu.is-open { display: block; }
  .nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .nav-link { width: 100%; min-height: 52px; padding: 0 0.75rem; font-size: 1.0625rem; justify-content: space-between; border-radius: 12px; }
  .nav-link[aria-current="page"] { box-shadow: none; padding-inline: 0.75rem; margin-inline: 0; border-radius: 12px; }
  .nav-link[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
  .dropdown { margin: 0 0 0.5rem; padding: 0.25rem; border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
  .site-menu__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem;
    padding-top: 0.75rem;
  }
  .site-menu__actions .btn { width: 100%; }
  .header-phone { justify-content: center; min-height: 48px; border: 1px solid rgba(255, 255, 255, 0.2); }
  .menu-fallback { display: inline-flex; }
}
@media (max-width: 339.98px) {
  .menu-toggle { padding: 0 0.75rem; gap: 0.4rem; }
}

/* Desktop: inline navigation with a hover/keyboard dropdown */
@media (min-width: 1024px) {
  .menu-toggle, .menu-fallback { display: none !important; }
  .nav-capsule { padding: 8px 8px 8px 9px; min-height: 4rem; }
  .nav-capsule { flex-wrap: wrap; row-gap: 4px; }
  .site-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.25rem 0.5rem; margin-left: auto; }
  .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
  .nav-item { position: relative; }
  .dropdown {
    position: absolute; top: calc(100% + 18px); left: 50%;
    width: 384px;
    transform: translateX(-50%);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--glass-panel);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--glass-line);
    box-shadow: 0 18px 40px rgba(20, 8, 20, 0.35);
  }
  /* Invisible bridge so the pointer can travel from the trigger into the panel */
  .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
  .site-menu__actions { display: flex; align-items: center; gap: 0.35rem; padding-left: 0.6rem; margin-left: 0.25rem; border-left: 1px solid rgba(255, 255, 255, 0.16); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .dropdown:not([hidden]) { animation: dropdown-in 160ms var(--ease); }
  @keyframes dropdown-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header-phone { display: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-menu, .dropdown { background: var(--plum-900) !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--plum-800);
  color: var(--on-dark);
  isolation: isolate;
}
.hero__media { position: relative; background: var(--plum-900); overflow: hidden; }
/* Still photo fills the media panel; the crop is set per layout below */
.hero__photo, .hero__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* If the photo fails to load, keep its alt text out of sight (it stays available to screen readers) */
.hero__photo img { color: transparent; font-size: 0; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; }

.hero__inner { position: relative; }
.hero__content { position: relative; z-index: 2; }
.hero__title {
  color: var(--white);
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 0.85rem;
}
.hero__line { display: block; }
.hero__lede {
  color: var(--on-dark-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  max-width: 30rem;
  margin-bottom: 0.75rem;
}
.hero__coverage {
  display: flex; align-items: flex-start; gap: 0.5rem;
  color: var(--white); font-weight: 600; font-size: var(--fs-small); line-height: 1.4;
  margin-bottom: 1.35rem;
}
.hero__coverage .icon { color: var(--yellow); width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.hero :focus-visible { outline-color: var(--yellow); }
.hero__secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  color: var(--white); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 5px;
}
.hero__secondary:hover { text-decoration-color: var(--yellow); }
.hero__secondary .icon { width: 1rem; height: 1rem; }

/* Mobile hero: rounded photo panel below the floating header, text beneath */
@media (max-width: 759.98px) {
  .hero { padding-top: calc(var(--header-offset) + 12px); }
  .hero__media {
    margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
  }
  .hero__shade { background: linear-gradient(180deg, rgba(46, 26, 46, 0) 50%, rgba(46, 26, 46, 0.6) 100%); }
  .hero__inner { padding-block: 1.1rem 1.75rem; }
  .hero .eyebrow { font-size: 0.8125rem; margin-bottom: 0.5rem; }
  .hero__lede { margin-bottom: 0.6rem; }
  .hero__coverage { margin-bottom: 1.1rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions { justify-content: center; }
}
/* Short phones (for example 375 x 667): tighter opening so the quote button stays in the first screen */
@media (max-width: 759.98px) and (max-height: 760px) {
  .hero { padding-top: calc(var(--header-offset) + 8px); }
  .hero__media { aspect-ratio: 2.2 / 1; }
  .hero__inner { padding-top: 0.9rem; }
  .hero__title { margin-bottom: 0.6rem; }
}
/* Small phones held landscape: keep the photo panel short so the headline stays in the first screen */
@media (max-width: 759.98px) and (orientation: landscape) and (max-height: 480px) {
  .hero__media { aspect-ratio: auto; height: 34vh; }
}
@media (min-width: 480px) and (max-width: 759.98px) {
  .hero__actions .btn { flex: 0 1 auto; }
  .hero__actions { justify-content: flex-start; }
}

/* Tablet and desktop: full-bleed photo on the right, controlled plum overlay behind text */
@media (min-width: 760px) {
  .hero { min-height: clamp(560px, 70vh, 600px); display: flex; }
  .hero__media {
    position: absolute; top: 0; bottom: 0; right: 0;
    left: 40%;
    z-index: -1;
  }
  .hero__photo img { object-position: 72% 50%; }
  .hero__shade {
    background:
      linear-gradient(90deg,
        rgba(58, 34, 58, 1) 0%, rgba(58, 34, 58, 0.94) 8%, rgba(58, 34, 58, 0.8) 18%,
        rgba(58, 34, 58, 0.58) 30%, rgba(58, 34, 58, 0.34) 44%, rgba(58, 34, 58, 0.16) 60%,
        rgba(58, 34, 58, 0.05) 78%, rgba(58, 34, 58, 0) 100%),
      linear-gradient(180deg, rgba(46, 26, 46, 0.55) 0%, rgba(46, 26, 46, 0) 22%),
      linear-gradient(0deg, rgba(46, 26, 46, 0.55) 0%, rgba(46, 26, 46, 0) 30%);
  }
  .hero__inner {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--header-offset) + 2.25rem) calc(var(--overlap) + 3rem);
  }
  .hero__content { max-width: min(27rem, 56vw); }
  .hero__secondary {
    min-height: 48px; padding: 0 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius-sm);
    background: rgba(46, 26, 46, 0.25);
    text-decoration: none;
  }
  .hero__secondary:hover { background: var(--white); color: var(--plum); border-color: var(--white); }
  .hero__secondary .icon { display: none; }
}
/* Tablet and small laptop: text runs further over the photo, so the plum fade is a little deeper
   and the crop moves the steering wheel clear of the text */
@media (min-width: 760px) and (max-width: 1279.98px) {
  .hero__photo img { object-position: 52% 50%; }
  .hero__shade {
    background:
      linear-gradient(90deg,
        rgba(58, 34, 58, 1) 0%, rgba(58, 34, 58, 0.95) 12%, rgba(58, 34, 58, 0.86) 24%,
        rgba(58, 34, 58, 0.66) 36%, rgba(58, 34, 58, 0.36) 50%, rgba(58, 34, 58, 0.14) 66%,
        rgba(58, 34, 58, 0.04) 82%, rgba(58, 34, 58, 0) 100%),
      linear-gradient(180deg, rgba(46, 26, 46, 0.55) 0%, rgba(46, 26, 46, 0) 22%),
      linear-gradient(0deg, rgba(46, 26, 46, 0.55) 0%, rgba(46, 26, 46, 0) 30%);
  }
}
@media (min-width: 1024px) {
  .hero { min-height: clamp(620px, 76vh, 700px); }
  .hero__media { left: 34%; }
  .hero__content { max-width: min(34rem, 52vw); }
}
@media (min-width: 1600px) {
  .hero__media { left: 38%; }
}
@media (min-width: 760px) and (max-height: 560px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: calc(var(--header-offset) + 1.25rem) calc(var(--overlap) + 4.5rem); }
}

/* ---------- Enquiry section ---------- */
.enquiry-section {
  position: relative; z-index: 5;
  padding-bottom: var(--section-y);
  scroll-margin-top: calc(var(--header-offset) + 12px);
}
.enquiry-panel {
  margin-top: calc(var(--overlap) * -1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
@media (max-width: 759.98px) {
  .enquiry-section .container { padding-inline: 0; }
  .enquiry-panel { border-radius: 0; border-inline: 0; box-shadow: none; }
}

.trust-strip {
  list-style: none;
  display: grid; grid-template-columns: 1fr;
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}
.trust-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem var(--gutter);
  font-size: var(--fs-small); line-height: 1.35;
}
.trust-item + .trust-item { border-top: 1px solid var(--line); }
.trust-item strong { display: block; color: var(--plum); font-size: 1rem; }
.trust-item__sub { display: block; color: var(--muted); }
.trust-item__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--white); color: var(--plum);
  border: 1px solid var(--line);
}
.trust-item__icon .icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 760px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
  .trust-item { padding: 1rem 1.5rem; }
  .trust-item + .trust-item { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 760px) and (max-width: 1023.98px) {
  .trust-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 1.25rem; }
}

.enquiry { padding: clamp(1.25rem, 0.8rem + 1.8vw, 2rem) var(--gutter) clamp(1.25rem, 0.8rem + 1.5vw, 1.75rem); }
@media (min-width: 760px) { .enquiry { padding-inline: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); } }

.enquiry__head { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.enquiry__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); margin-bottom: 0.35rem; }
.enquiry__text { color: var(--muted); font-size: var(--fs-small); max-width: 36rem; }
@media (min-width: 1024px) {
  /* V7: flex with wrapping instead of a two-column grid. Same side-by-side layout at normal text size, but with
     enlarged text the step indicator drops below the heading instead of squeezing it to one letter per line */
  .enquiry__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; }
  .enquiry__head > .enquiry__intro { flex: 1 1 16rem; min-width: 0; }
  .enquiry__head > .progress { flex: 0 1 auto; min-width: 0; }
}

/* Interactive form only when initialised; otherwise a working contact fallback */
.enquiry__fallback { display: none; }
.no-js .enquiry__fallback { display: block; }
.js .enquiry:not(.is-ready) .enquiry__fallback { display: block; visibility: hidden; animation: fallback-show 0s linear 2.5s forwards; }
@keyframes fallback-show { to { visibility: visible; } }
.enquiry:not(.is-ready) .enquiry__form,
.enquiry:not(.is-ready) .progress,
.enquiry:not(.is-ready) .enquiry__phone { display: none; }
.enquiry__phone a { font-weight: 600; color: var(--plum); white-space: nowrap; }
.enquiry__fallback {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--pale-2);
}
.enquiry__fallback-title { font-family: var(--font-head); font-weight: 700; color: var(--plum); margin-bottom: 0.4rem; }
.enquiry__fallback-list { list-style: none; display: grid; gap: 0.35rem; margin: 0.25rem 0 0.75rem; }
.enquiry__fallback-list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.enquiry__fallback-list .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--violet); }
.enquiry__fallback-hint { color: var(--muted); font-size: var(--fs-small); }

/* Progress */
.progress__count { font-size: var(--fs-small); font-weight: 600; color: var(--plum); margin-bottom: 0.5rem; }
.progress__list { list-style: none; display: flex; gap: 0.5rem; }
.progress__step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem; font-weight: 600; line-height: 1.2;
  background: var(--white);
}
.progress__num {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-head); font-size: 0.8125rem;
  color: var(--muted);
}
.progress__num .icon { width: 0.95rem; height: 0.95rem; }
.progress__step[aria-current="step"] { border-color: var(--plum); color: var(--plum); background: var(--pale); }
.progress__step[aria-current="step"] .progress__num { background: var(--plum); border-color: var(--plum); color: var(--white); }
.progress__step.is-complete { color: var(--plum); }
.progress__step.is-complete .progress__num { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
@media (max-width: 559.98px) {
  .progress__step { justify-content: center; padding: 0.4rem; }
  .progress__step .progress__label { display: none; }
}
@media (min-width: 1024px) { .progress__list { min-width: 520px; } }

/* Error summary */
.error-summary {
  scroll-margin-top: calc(var(--header-offset) + 16px);
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--error);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
}
.error-summary__title { color: var(--error); font-size: 1.0625rem; margin-bottom: 0.35rem; }
.error-summary__list { list-style: none; }
.error-summary__list a { color: var(--error); font-weight: 600; }
.error-summary:focus-visible { outline: 3px solid var(--error); outline-offset: 2px; }

/* Steps */
.step { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Step stage (V5): only the active step is rendered, so it alone sets the height.
   main.js animates the stage between the measured heights of the old and new step,
   then returns it to height:auto. Inactive steps are display:none, inert and aria-hidden. */
.enquiry.is-ready .step:not(.is-active) { display: none; }
.step-stage.is-sizing { overflow: hidden; }
.motion-on .step-stage { transition: height 260ms var(--ease); }
.motion-on .step-stage.is-changing > .step.is-active { animation: step-in 260ms var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step__title { font-size: 1.125rem; margin-bottom: 0.875rem; color: var(--plum); }

.grid-fields { display: grid; gap: 1rem var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid-fields--4, .grid-fields--step1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
  /* V7.1: top-aligned, so an error message under one field no longer pushes its neighbour down */
  .grid-fields--step1 { align-items: start; }
  .grid-fields--step1 > .field--note { align-self: end; } /* the incident note lines up with the select beside it */
}
/* V7.1: four location fields in one row only from 1280 px; from 1024 to 1279 px "Postcode (required in Australia)"
   wrapped and pushed its input out of line, so those widths keep the 2 x 2 arrangement */
@media (min-width: 1280px) {
  .grid-fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Incident investigation has no number question: the note fills the second column
   as a deliberate, input-height panel instead of leaving an empty slot */
.field--note .field__note {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0; min-height: 52px; padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--pale-2); border: 1px solid var(--line);
  color: var(--ink); font-size: var(--fs-small); line-height: 1.4;
}
.field--note .field__note .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--violet); }
/* Short service note under the step 1 fields */
.service-note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.85rem 0 0;
  color: var(--muted); font-size: var(--fs-small); line-height: 1.45;
}
.service-note[hidden] { display: none; }
.service-note .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--violet); }
/* Facilities question (V6): question, help line and answers grouped in one soft panel,
   answers directly beneath the help text. A row from 480px; stacked full width below. */
.field[data-facilities] {
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--pale-2);
  border: 1px solid var(--line);
}
.field[data-facilities] .field__label { margin-bottom: 0.25rem; text-wrap: pretty; }
.field[data-facilities] .field__help { margin-bottom: 0.75rem; text-wrap: pretty; }
.field[data-facilities] .choice-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
@media (min-width: 480px) {
  .field[data-facilities] .choice-row { display: flex; flex-wrap: wrap; }
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field__label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.45rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.field__label .icon { width: 1.05rem; height: 1.05rem; color: var(--violet); }
.field__optional, .field__hint-inline { font-weight: 400; color: var(--muted); }
.field__help--below { margin: 0.4rem 0 0 !important; }
.field__help { margin: 0 0 0.6rem; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit; font-size: 1.0625rem; line-height: 1.3;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  scroll-margin-block: calc(var(--header-offset) + 72px) 120px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: var(--violet); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(80, 49, 80, 0.25);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum);
  transform: rotate(45deg); pointer-events: none;
}
select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }

[aria-invalid="true"] { border-color: var(--error) !important; background: var(--error-bg); }
.field__error {
  display: flex; align-items: flex-start; gap: 0.35rem;
  margin: 0.4rem 0 0;
  color: var(--error); font-size: var(--fs-small); font-weight: 600; line-height: 1.35;
}
.field__error .icon { width: 1rem; height: 1rem; margin-top: 0.1rem; }

.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group legend { padding: 0; }
/* Keep the icon on the first line of a long question instead of on a line of its own */
.choice-group legend.field__label { display: block; }
.choice-group legend.field__label .icon { display: inline-block; vertical-align: -0.18em; margin-right: 0.35rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--plum); }
.choice:hover { border-color: var(--violet); }
.choice:has(input:checked) { border-color: var(--plum); background: var(--pale); color: var(--plum); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(80, 49, 80, 0.3); }

.step__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 1.5rem; /* 24px after the content: no reserved gap */
}
.step__actions--first { justify-content: flex-end; }
.step__actions .btn { min-width: 160px; }
@media (max-width: 639.98px) {
  .step__actions { flex-direction: column-reverse; align-items: stretch; }
  .step__actions .btn { width: 100%; }
}

/* Review */
.review__grid { display: grid; gap: var(--gap); }
/* V7.1: three review cards side by side only from 1280 px; narrower cards broke the email address mid-word */
@media (min-width: 1280px) { .review__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review__card {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--warm);
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.review__head h4 { font-size: 1rem; color: var(--plum); }
.review__list { margin: 0; display: grid; gap: 0.5rem; font-size: var(--fs-small); }
.review__list div { display: grid; gap: 0.05rem; }
.review__list dt { color: var(--muted); }
.review__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
/* Desktop: label and value on one line, so the review stays close to the height of the other steps */
@media (min-width: 1024px) {
  .review__list { gap: 0.35rem; }
  .review__list div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); column-gap: 0.6rem; }
  .review__card { padding-block: 0.85rem; }
}

/* Preview completion state (not a success message) */
.preview-complete {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 1.25rem;
  border: 2px dashed var(--violet);
  border-radius: var(--radius);
  background: var(--pale);
}
.preview-complete__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--plum);
}
.preview-complete__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.preview-complete__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 479.98px) {
  .preview-complete { grid-template-columns: 1fr; }
  .preview-complete__actions .btn { width: 100%; }
}


/* ---------- Generic section ---------- */
.section { padding-block: var(--section-y); }
.section-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.section-head h2 { max-width: 22ch; }
.section-head__lede { color: var(--muted); margin-top: 0.75rem; max-width: 40rem; }
.section-head__aside { color: var(--muted); max-width: 26rem; margin: 0; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.section-head--split > div { min-width: 0; flex: 1 1 28rem; }

/* ---------- Programmes ---------- */
.programmes { padding-top: 0; }
.programme-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.programme-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.programme-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.programme-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pale); }
.programme-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .programme-card:hover .programme-card__media img { transform: scale(1.03); }
}
.programme-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.15rem 1.25rem 1.35rem;
  font-size: 1rem; line-height: 1.55;
}
.programme-card__body > p { margin-bottom: 0.65rem; }
.programme-card__title { margin-bottom: 0.45rem; }
.programme-card__suits { color: var(--muted); font-size: var(--fs-small); padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.programme-card__suits strong { color: var(--plum); }
.programme-card__body > p.programme-card__suits { margin-bottom: 1.15rem; }
.programme-card__cta { margin-top: auto; align-self: flex-start; }

.chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 0.35rem;
  margin: 0 0 0.75rem !important;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--pale); color: var(--plum);
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
}
.chip .icon { width: 0.95rem; height: 0.95rem; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .programme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .programme-card:last-child { grid-column: 1 / -1; flex-direction: row; }
  .programme-card:last-child .programme-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 1024px) {
  .programme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Illustrated scenes (shared) ---------- */
.scene { margin: 0; position: relative; }
.scene__svg { width: 100%; height: auto; overflow: visible; }

/* Shapes: one palette, one stroke family */
.s-card { fill: var(--white); stroke: var(--line); stroke-width: 1.2; }
.s-card--raised { filter: drop-shadow(0 6px 10px rgba(80, 49, 80, 0.12)); }
.s-icon { color: var(--plum); }
.s-icon--soft { color: var(--violet); }
.s-icon--ink { color: var(--ink); }
.s-link { fill: none; stroke: var(--lavender); stroke-width: 1.6; stroke-dasharray: 3 4; stroke-linecap: round; }
.s-plum { fill: var(--plum); }
.s-row { fill: #f4eff6; }
.s-bar { fill: var(--lavender-soft); }
.s-yellow { fill: var(--yellow); }
.s-q1 { fill: var(--yellow); } .s-q2 { fill: var(--plum); } .s-q3 { fill: var(--violet); } .s-q4 { fill: var(--lavender); }
.s-shadow { fill: rgba(80, 49, 80, 0.12); }
.s-fold { fill: var(--pale); stroke: var(--line); stroke-width: 1.2; }
.s-rule { stroke: #ece4ee; stroke-width: 1.2; }
.s-check { fill: #f4eff6; stroke: var(--lavender); stroke-width: 1.2; }
.s-tick { fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-tick--light { stroke: var(--white); }
.s-ink-bar { fill: rgba(36, 33, 39, 0.5); }
.s-spark { fill: var(--lavender); }
.s-box { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.4; }
.s-box-on { fill: var(--plum); }
.s-track { stroke: var(--lavender); stroke-width: 2.5; stroke-linecap: round; }
.s-node { fill: var(--white); stroke: var(--plum); stroke-width: 2; }
.s-road { fill: #e6dcea; }
.s-lane { stroke: var(--white); stroke-width: 2; stroke-dasharray: 8 8; }
.s-car { fill: var(--plum); }
.s-car-glass { fill: rgba(255, 255, 255, 0.55); }
.s-dot { fill: var(--lavender); }

/* Animation system: final state is the default; .is-playing runs a one-off sequence */
.scene [class*="a-"] { transform-box: fill-box; transform-origin: center; }
.scene .a-grow { transform-origin: left center; }
.scene .a-scan { transform-origin: 0% 81%; } /* apex of the look-ahead fan */
.a-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

.motion-on .scene.is-playing .a-pop   { animation: a-pop 520ms var(--ease-pop) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-rise  { animation: a-rise 560ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-fade  { animation: a-fade 450ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-grow  { animation: a-grow 480ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-draw  { animation: a-draw 560ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-stamp { animation: a-stamp 520ms var(--ease-pop) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-drive { animation: a-drive 1100ms cubic-bezier(0.45, 0, 0.2, 1) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-enter { animation: a-enter 900ms cubic-bezier(0.3, 0, 0.2, 1) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-scan  { animation: a-scan 650ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-nudge { animation: a-nudge 650ms var(--ease) both; animation-delay: var(--d, 0s); }
.motion-on .scene.is-playing .a-pop.a-dim {
  animation: a-pop 520ms var(--ease-pop) both, a-dim 500ms var(--ease) forwards;
  animation-delay: var(--d, 0s), var(--d2, 1s);
}
@keyframes a-pop   { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes a-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes a-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-grow  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes a-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes a-stamp { from { opacity: 0; transform: scale(1.5) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes a-drive { from { transform: translateX(-118px); } to { transform: none; } }
@keyframes a-enter { from { opacity: 0; transform: translateX(-110px); } to { opacity: 1; transform: none; } }
@keyframes a-scan  { from { opacity: 0; transform: scale(0.15); } to { opacity: 1; transform: none; } }
@keyframes a-nudge { from { transform: translateY(-16px); } to { transform: none; } }
@keyframes a-dim   { from { background-color: var(--white); color: var(--plum); border-color: var(--lavender); } }

/* ---------- Process (four illustrated steps) ---------- */
.process { background: var(--pale); }
.process__list {
  list-style: none;
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.process-card .scene {
  padding: 0.6rem 0.75rem 0.25rem;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(155, 115, 165, 0.26), rgba(155, 115, 165, 0) 60%),
    linear-gradient(180deg, var(--pale-2), #efe7f2);
  border-bottom: 1px solid var(--line);
}
.process-card__body { padding: 1rem 1.2rem 1.3rem; }
.process-card__num {
  display: inline-block; margin-bottom: 0.3rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet-ink);
}
.process-card__title { margin-bottom: 0.35rem; }
.process-card__body p { font-size: 1rem; line-height: 1.55; color: var(--ink); }
@media (max-width: 639.98px) {
  .process-card .scene { padding: 0.5rem 1.25rem 0.1rem; }
  .process-card .scene__svg { max-height: 210px; margin-inline: auto; }
}

/* ---------- Approach: two visual panels ---------- */
.approach__panels { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .approach__panels { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.lr-panel {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lr-panel__visual {
  margin: 0;
  min-height: clamp(220px, 20vw + 120px, 290px);
  display: grid; place-items: center;
  padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
}
.lr-panel__body { padding: 0.25rem clamp(1.25rem, 0.8rem + 1.5vw, 2rem) clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.lr-panel__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); margin-bottom: 0.6rem; }
.lr-panel__body p { font-size: 1rem; line-height: 1.6; }

.lr-panel--dark { background: var(--plum-800); color: var(--on-dark-soft); }
.lr-panel--dark .lr-panel__visual {
  background:
    radial-gradient(90% 80% at 20% 10%, rgba(155, 115, 165, 0.35), rgba(155, 115, 165, 0) 60%),
    linear-gradient(180deg, var(--plum), var(--plum-800));
}
.lr-panel--dark .lr-panel__title { color: var(--white); }
.lr-panel--dark .hl { color: var(--yellow); }
.lr-road { width: 100%; height: auto; max-height: 280px; }
.r-asphalt { fill: rgba(255, 255, 255, 0.06); }
.r-edge { stroke: rgba(255, 255, 255, 0.24); stroke-width: 1.5; }
.r-lane { stroke: rgba(255, 255, 255, 0.38); stroke-width: 2; stroke-dasharray: 16 14; }
.r-car--ours { fill: var(--lavender); }
.r-car--other { fill: rgba(255, 255, 255, 0.82); }
.r-glass { fill: rgba(46, 26, 46, 0.55); }
.r-light { fill: var(--yellow); }
.r-giveway { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
.r-bubble { fill: rgba(255, 192, 0, 0.06); stroke: rgba(255, 192, 0, 0.8); stroke-width: 1.6; stroke-dasharray: 6 6; }
/* Brake lights on the purple car: steady red by default (reduced motion shows them lit);
   a slow, restrained blink only with motion on, paused off screen and when the tab is hidden */
.r-brake { fill: #ff4d4f; }
[data-loop][data-loop-brake] { --cycle: 3.2s; }
.motion-on [data-loop] .l-brake { animation: l-brake 3.2s ease-in-out infinite both; }
@keyframes l-brake { 0%, 45%, 100% { opacity: 1; } 70% { opacity: 0.35; } }
/* V7.1: the car, stopping-distance bubble and both observation glows loop together as one group (10 s).
   0 to 0.9 s: glide in from the left and fade in. 0.9 to 8.8 s: complete diagram at rest (about 80% of the cycle).
   8.8 to 9.6 s: gentle fade in place. 9.6 to 10 s: hidden, moved back to the start while invisible, then re-enter.
   The default (no animation) is the resting position, so reduced motion shows the complete diagram. */
.motion-on [data-loop] .l-group { animation: l-group 10s linear infinite both; animation-delay: 0s; }
@keyframes l-group {
  0%       { opacity: 0; transform: translateX(-110px); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  9%       { opacity: 1; transform: none; }
  88%      { opacity: 1; transform: none; animation-timing-function: ease-in-out; }
  96%      { opacity: 0; transform: none; }
  97%, 100% { opacity: 0; transform: translateX(-110px); }
}
.r-alert { fill: var(--yellow); }
.r-alert-icon { color: var(--plum-900); }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.tag-list li {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.875rem; font-weight: 600; color: var(--on-dark-soft);
}

.lr-panel--light { background: var(--white); border: 1px solid var(--line); }
.lr-panel--light .lr-panel__visual {
  background:
    radial-gradient(90% 80% at 85% 0%, rgba(155, 115, 165, 0.22), rgba(155, 115, 165, 0) 60%),
    linear-gradient(180deg, var(--pale-2), var(--pale));
}
.lr-panel__note {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--pale);
  color: var(--plum); font-weight: 600; font-size: var(--fs-small);
}
/* V7.2: a restrained editorial note instead of a pill, so a wrapped line no longer reads like a button.
   Block-level, so its outer left edge lines up with the heading and paragraph above. Not interactive. */
.lr-panel__body .lr-panel__note {
  display: block;
  margin: 1.125rem 0 0;              /* about 18px below the paragraph */
  padding: 0.75rem 1rem;              /* about 12px by 16px */
  border-left: 3px solid var(--plum);
  border-radius: 11px;
  background: var(--pale);
  color: var(--plum);
  font-size: 1rem; font-weight: 600; line-height: 1.5;
  text-align: left;
  cursor: auto;
}

/* Panel B illustration, built in HTML so the text stays readable at every width */
.thinking {
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 0.95fr);
  align-items: center; gap: 0.5rem;
  width: 100%;
}
.thinking__thoughts { display: grid; gap: 0.6rem; }
.thought {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0;
  padding: 0.6rem 0.85rem 0.6rem 0.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: 16px 16px 16px 4px;
  background: var(--pale-2);
  color: var(--muted);
  font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
  box-shadow: var(--shadow-sm);
}
.thought--2 { margin-left: 1rem; }
.thought__mark {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lavender); color: var(--white);
  font-size: 0.8125rem;
}
.thinking__arrow { width: 52px; height: 52px; overflow: visible; }
.t-arrow, .t-arrow-head { fill: none; stroke: var(--plum); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.reflection {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  background: var(--plum);
  color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.3;
  box-shadow: 0 10px 24px rgba(80, 49, 80, 0.25);
}
.reflection__icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--yellow); color: var(--plum-900);
}
.reflection__icon .icon { width: 1.2rem; height: 1.2rem; }
@media (max-width: 479.98px) {
  .lr-panel--light .lr-panel__visual { padding-bottom: 1.5rem; }
  .thinking { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .thinking__arrow { justify-self: center; transform: rotate(45deg); width: 40px; height: 40px; }
  .thought--2 { margin-left: 1.25rem; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .thinking { grid-template-columns: minmax(0, 1fr); }
  .thinking__arrow { justify-self: center; transform: rotate(45deg); width: 40px; height: 40px; }
}

.approach__source { margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }

/* ---------- Brand milestone (V5: after the enquiry panel) ---------- */
.milestone-section { padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
/* One rule controls the space between the anniversary panel and the audience section
   (the programmes section starts with no top padding, so nothing doubles it) */
.milestone-section { padding-bottom: 28px; }
@media (min-width: 760px) { .milestone-section { padding-bottom: 40px; } }
.milestone {
  position: relative; overflow: hidden;
  display: grid; gap: 0.9rem; align-items: center; justify-items: center; text-align: center;
  padding: 1.25rem clamp(1rem, 0.6rem + 2vw, 2.25rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(155, 115, 165, 0.36), rgba(155, 115, 165, 0) 55%),
    var(--plum);
  color: var(--white);
}
.milestone__count { display: grid; justify-items: center; gap: 0.15rem; }
.milestone__num { display: flex; align-items: flex-end; gap: 0.35rem; margin: 0; line-height: 0.9; }
.milestone__30 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(3.5rem, 2.9rem + 2.4vw, 4.75rem); letter-spacing: -0.04em;
  color: var(--white);
}
.milestone__unit {
  margin-bottom: 0.45rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--lavender-soft);
}
.milestone__years {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.06em;
  color: var(--yellow);
}
.milestone__dash { width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.milestone__body { min-width: 0; }
.milestone__title { color: var(--white); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2; margin-bottom: 0.3rem; max-width: 26ch; margin-inline: auto; }
.milestone__text { margin: 0; color: var(--on-dark-soft); }
.milestone__stat { margin: 0 0 0.3rem; max-width: 46ch; color: var(--white); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 899.98px) { .milestone__stat { margin-inline: auto; } }
.milestone__art { margin: 0; width: min(100%, 340px); }
@media (max-width: 899.98px) { .milestone__svg { max-height: 92px; } }
.milestone__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms-road { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 12; stroke-linecap: round; }
.ms-lane { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; stroke-dasharray: 5 6; }
.ms-start { fill: var(--plum-900); stroke: var(--lavender-soft); stroke-width: 2.5; }
.ms-ring { fill: none; stroke: rgba(217, 203, 221, 0.4); stroke-width: 1.5; }
.ms-ring--outer { stroke-dasharray: 2 5; }
.ms-arrive { fill: none; stroke: var(--yellow); stroke-width: 2.5; opacity: 0; }
.ms-label { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; fill: var(--on-dark-soft); }
.m-q--yellow { fill: var(--yellow); }
.m-q--soft { fill: var(--lavender-soft); }
.m-q--plum { fill: var(--plum-900); }
.m-q--lav { fill: var(--lavender); }
.ms-marker__halo { fill: rgba(255, 192, 0, 0.28); }
.ms-marker__dot { fill: var(--yellow); stroke: var(--white); stroke-width: 1.5; }
@media (min-width: 900px) {
  .milestone {
    grid-template-columns: auto minmax(0, 1fr) minmax(280px, 340px);
    justify-items: start; text-align: left;
    gap: 0 clamp(1.5rem, 1rem + 2vw, 2.75rem);
    padding-block: 1.25rem;
  }
  .milestone__count { justify-items: start; padding-right: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-right: 1px solid rgba(255, 255, 255, 0.16); }
  .milestone__title { margin-inline: 0; }
  .milestone__art { justify-self: end; }
}
/* Narrow laptops and small desktops: give the heading and statistic more room */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .milestone { grid-template-columns: auto minmax(0, 1fr) minmax(200px, 240px); }
}
/* Loop: the marker travels from 1996 to the 2026 target, rests, then repeats.
   Text never moves. Paused off screen and when the tab is hidden (shared data-loop rules). */
[data-loop][data-loop-ms] { --cycle: 10s; }
.ms-marker { transform-box: view-box; transform-origin: 0 0; }
.motion-on [data-loop] .ms-marker { animation: ms-marker var(--cycle) linear infinite both; }
.motion-on [data-loop] .l-arrive { animation: l-arrive var(--cycle) ease-out infinite both; }
.motion-on [data-loop]:not(.is-live) .ms-marker, .page-hidden [data-loop] .ms-marker { animation-play-state: paused; }
@keyframes l-arrive { 0%, 64% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1); } 82% { opacity: 0.6; transform: scale(1.25); } 90%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ms-marker {
  0% { opacity: 0; transform: translate(30.0px, 86.0px); }
  6% { opacity: 1; transform: translate(30.0px, 86.0px); }
  8.00% { opacity: 1; transform: translate(30.0px, 86.0px); }
  10.42% { opacity: 1; transform: translate(31.2px, 86.0px); }
  12.83% { opacity: 1; transform: translate(34.7px, 85.9px); }
  15.25% { opacity: 1; transform: translate(40.3px, 85.4px); }
  17.67% { opacity: 1; transform: translate(47.7px, 84.2px); }
  20.08% { opacity: 1; transform: translate(56.5px, 81.8px); }
  22.50% { opacity: 1; transform: translate(66.3px, 77.9px); }
  24.92% { opacity: 1; transform: translate(76.8px, 72.4px); }
  27.33% { opacity: 1; transform: translate(87.7px, 65.5px); }
  29.75% { opacity: 1; transform: translate(99.2px, 58.1px); }
  32.17% { opacity: 1; transform: translate(111.7px, 51.1px); }
  34.58% { opacity: 1; transform: translate(125.6px, 46.0px); }
  37.00% { opacity: 1; transform: translate(140.3px, 43.8px); }
  39.42% { opacity: 1; transform: translate(155.3px, 44.5px); }
  41.83% { opacity: 1; transform: translate(169.8px, 47.2px); }
  44.25% { opacity: 1; transform: translate(183.4px, 51.6px); }
  46.67% { opacity: 1; transform: translate(196.1px, 56.7px); }
  49.08% { opacity: 1; transform: translate(208.2px, 61.3px); }
  51.50% { opacity: 1; transform: translate(219.8px, 63.7px); }
  53.92% { opacity: 1; transform: translate(230.3px, 63.7px); }
  56.33% { opacity: 1; transform: translate(239.3px, 62.1px); }
  58.75% { opacity: 1; transform: translate(246.5px, 59.9px); }
  61.17% { opacity: 1; transform: translate(251.7px, 57.9px); }
  63.58% { opacity: 1; transform: translate(254.9px, 56.5px); }
  66.00% { opacity: 1; transform: translate(256.0px, 56.0px); }
  86% { opacity: 1; transform: translate(256.0px, 56.0px); }
  93% { opacity: 0; transform: translate(256.0px, 56.0px); }
  94%, 100% { opacity: 0; transform: translate(30.0px, 86.0px); }
}

/* ---------- About / Jeremy (V5: editorial profile, full-width credential rows) ---------- */
.about {
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(155, 115, 165, 0.10), rgba(155, 115, 165, 0) 70%),
    var(--white);
  border-block: 1px solid var(--line);
}
.about__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: start; }
.about__profile { margin: 0 auto; width: min(220px, 64vw); text-align: center; }
.about__frame { position: relative; padding: 10px; border-radius: calc(var(--radius) + 10px); background: var(--pale); border: 1px solid var(--line); }
.about__profile picture { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 286 / 357; background: var(--white); }
.about__profile img { width: 100%; height: 100%; object-fit: cover; }
.about__profile figcaption {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 0.85rem;
  font-size: var(--fs-small); color: var(--muted); line-height: 1.4;
}
.about__profile figcaption strong { color: var(--plum); font-family: var(--font-head); font-size: 1.125rem; }
.about__content { min-width: 0; }
.about__lede { margin-top: 0.85rem; max-width: 60ch; }
.about__subhead {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.75rem 0 0.25rem;
  font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-ink);
}
.about__subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.credentials { list-style: none; display: grid; font-size: 1rem; line-height: 1.45; }
.credentials li {
  display: flex; gap: 0.85rem; align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.credentials li:last-child { border-bottom: 0; }
.credentials__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pale); color: var(--plum); }
.credentials__icon .icon { width: 1rem; height: 1rem; }
@media (min-width: 760px) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .about__profile { width: 100%; max-width: 260px; margin: 0; justify-self: center; } /* top-aligned with the heading, not sticky */
}
@media (max-width: 759.98px) {
  .about__subhead { margin-top: 1.4rem; }
  .credentials li { padding: 0.6rem 0; }
}

.feedback { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-top: 1px solid var(--line); }
.feedback__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.feedback__title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.feedback__grid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .feedback__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  margin: 0;
  display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: var(--radius);
  background: var(--warm);
  border: 1px solid var(--line);
}
.quote::before {
  content: "“";
  font-family: var(--font-head); font-weight: 700;
  font-size: 3.25rem; line-height: 0.7; height: 1.5rem;
  color: var(--lavender);
}
.quote blockquote { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; }
.quote figcaption { margin-top: auto; font-weight: 600; color: var(--plum); font-size: var(--fs-small); display: flex; flex-direction: column; }
.quote figcaption span { font-weight: 400; color: var(--muted); }


/* ---------- Marquee ---------- */
.marquee {
  display: flex; align-items: stretch;
  background: var(--plum);
  color: var(--white);
  border-block: 1px solid var(--plum-900);
}
.marquee__viewport { overflow: hidden; flex: 1; min-width: 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__group { list-style: none; display: flex; align-items: center; flex: none; padding-block: 1rem; }
.marquee__group li {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding-right: 1.25rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  white-space: nowrap;
}
.marquee__group li::after {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: conic-gradient(var(--yellow) 0 25%, var(--plum-900) 0 50%, var(--violet) 0 75%, var(--lavender) 0);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.motion-on .marquee.is-running .marquee__track { animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee.is-running:hover .marquee__track, .marquee.is-running:focus-within .marquee__track, .page-hidden .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Static list until JS starts it, and whenever motion is reduced */
.marquee:not(.is-running) .marquee__viewport { padding-inline: var(--gutter); }
.marquee:not(.is-running) .marquee__track { display: block; width: auto; max-width: var(--container); margin-inline: auto; }
.marquee:not(.is-running) .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 0.25rem; }
.marquee:not(.is-running) .marquee__group li:last-child::after { display: none; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.faq__intro > p:not(.eyebrow) { color: var(--muted); margin-top: 0.75rem; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-offset) + 24px); }
}
.contact-card {
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  display: grid; gap: 0.25rem;
}
.contact-card__title { font-family: var(--font-head); font-weight: 700; color: var(--plum); margin-bottom: 0.25rem; }
.contact-card__line {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px; min-width: 0;
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.contact-card__line .icon { width: 1.1rem; height: 1.1rem; color: var(--violet); }
.contact-card__line:hover { color: var(--plum); text-decoration: underline; }

.faq__list { display: grid; gap: 0.75rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  scroll-margin-top: calc(var(--header-offset) + 16px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px;
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
  color: var(--plum);
  border-radius: var(--radius-sm);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 1.25rem; height: 1.25rem; color: var(--violet); transition: transform var(--t-fast) var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--pale); }
.faq-item__body { padding: 0 1.15rem 1.1rem; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.faq-item.is-target { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(155, 115, 165, 0.35); }

/* ---------- Footer (V4): invitation, contact-led grid, slim base ---------- */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: var(--section-y);
  background: var(--plum-900);
  color: var(--on-dark-soft);
  font-size: var(--fs-small);
  padding-bottom: env(safe-area-inset-bottom);
}
.site-footer a:not(.btn) { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--yellow); }
/* Target-inspired rings behind the invitation */
.site-footer__target {
  position: absolute; z-index: -1; pointer-events: none;
  /* centre sits above the footer edge, so only the rings show behind the invitation */
  right: -120px; top: -300px;
  width: 560px; height: 560px; border-radius: 50%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) center / 1.5px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) center / 100% 1.5px no-repeat,
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0) 0 46px, rgba(255, 255, 255, 0.07) 46px 48px);
}
.site-footer__target::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: conic-gradient(var(--yellow) 0 25%, var(--plum) 0 50%, var(--violet) 0 75%, var(--lavender) 0);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
  opacity: 0.9;
}
.footer-cta {
  display: grid; gap: 1rem; align-items: center;
  padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-cta__title {
  color: var(--white);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
  line-height: 1.15; letter-spacing: -0.015em;
  max-width: 24ch;
}
.footer-cta__btn { justify-self: start; }
@media (min-width: 760px) {
  .footer-cta { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
  .footer-cta__btn { justify-self: end; }
}
@media (max-width: 479.98px) { .footer-cta__btn { justify-self: stretch; } }

/* Main grid: brand | contact and coverage | Explore (two-column links) */
.footer-grid {
  display: grid; gap: 1.75rem 2rem; align-items: start;
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-explore { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; }
  .footer-explore { grid-column: auto; }
}
.footer-brand__mark { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-bottom: 0.75rem; }
.footer-brand__logo { display: grid; place-items: center; width: 52px; height: 52px; flex: none; background: var(--white); border-radius: 50%; }
.footer-brand__logo img { width: 38px; }
.footer-brand__name { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: 1.0625rem; line-height: 1.25; }
.footer-brand p { margin: 0; max-width: 32ch; line-height: 1.55; }
.footer-col__heading {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 0.5rem;
}
.footer-col__heading--sub { margin-top: 0.5rem; } /* about 23px visible: the email link keeps its 44px tap height */
#footer-pages { scroll-margin-top: calc(var(--header-offset) + 16px); }
.footer-contact__line {
  display: flex; align-items: flex-start; gap: 0.65rem;
  min-height: 44px; padding-block: 0.3rem;
  text-decoration: none; font-weight: 600; min-width: 0;
}
.email { overflow-wrap: anywhere; } /* clean breaks after @ and before .com.au; splits further only at very large text sizes */
.audience-item > span { min-width: 0; }
/* Let grid columns shrink so long words wrap at very large text sizes */
.faq__grid > *, .quote-grid > *, .quote-panel > *, .contact-card > *, .faq-item, .faq-item summary > span { min-width: 0; }
.audience-item__title { hyphens: auto; }
.check-list li, .cov-item { min-width: 0; overflow-wrap: anywhere; } /* only splits words that cannot fit, i.e. at very large text sizes */
.footer-contact__line > span, .contact-card__line > span { min-width: 0; }
.footer-contact__line .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; color: var(--yellow); }
.footer-contact__line:hover > span { text-decoration: underline; }
.footer-contact__line--big { font-family: var(--font-head); font-size: 1.375rem; line-height: 1.2; }
.footer-contact__line--big .icon { margin-top: 0.3rem; }
.footer-contact__line--big:hover > span { text-decoration: none; }
.footer-contact__sub { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--on-dark-soft); }
.footer-links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 1.5rem; }
@media (max-width: 374.98px) { .footer-links { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .footer-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; }
}
/* Avoid single-word last lines in the short footer lines (ignored where unsupported) */
.footer-brand p, .footer-coverage, .footer-office span, .footer-contact__sub { text-wrap: pretty; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; line-height: 1.3; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-links { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: 2rem; }
}
.footer-coverage { margin: 0 0 0.5rem; color: var(--white); line-height: 1.5; }
.footer-office { display: flex; gap: 0.5rem; margin: 0; line-height: 1.45; }
.footer-office .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--lavender-soft); }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-block: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
}
.footer-base p { margin: 0; }
.footer-base__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
.footer-base__links a { display: inline-flex; align-items: center; min-height: 44px; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 0.25rem;
  background: none; border: 0; border-radius: 8px;
  color: var(--white); font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
}
.motion-toggle__switch {
  position: relative; width: 34px; height: 20px; flex: none;
  border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.motion-toggle__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--white);
}
.motion-on .motion-toggle__switch::after { transition: transform 160ms var(--ease); }
.motion-toggle[aria-pressed="true"] .motion-toggle__switch { background: var(--yellow); border-color: var(--yellow); }
.motion-toggle[aria-pressed="true"] .motion-toggle__switch::after { transform: translateX(14px); background: var(--plum-900); }
.motion-toggle__state { color: var(--on-dark-soft); font-weight: 400; }
.motion-toggle[aria-disabled="true"] { cursor: default; }
.no-js .motion-toggle { display: none; }
@media (max-width: 639.98px) {
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   V3 additions
   ========================================================= */

.inline-link { font-weight: 600; color: var(--plum); }

/* ---------- Form: service-specific fields ---------- */
.field--note { justify-content: flex-end; }
.field__note {
  display: flex; gap: 0.5rem; align-items: flex-start;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--pale);
  color: var(--plum); font-size: var(--fs-small); line-height: 1.45;
}
.field__note .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--violet); }

/* ---------- Audience introduction ---------- */
.audience {
  display: grid; gap: 1.25rem clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-bottom: calc(var(--section-y) * 0.85);
  margin-bottom: calc(var(--section-y) * 0.85);
  border-bottom: 1px solid var(--line);
}
.audience__title { font-size: var(--fs-h2); max-width: 16ch; }
.audience__lede { color: var(--muted); margin-top: 0.75rem; max-width: 30rem; }
.audience__grid { list-style: none; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
.audience-item {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.4;
}
.audience-item__icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--pale); color: var(--plum);
}
.audience-item__icon .icon { width: 1.25rem; height: 1.25rem; }
.audience-item__title { display: block; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: 1.0625rem; line-height: 1.3; margin-bottom: 0.2rem; }
.audience-item__text { display: block; color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 560px) { .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .audience { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
}
.programmes__head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

/* ---------- Additional services: numbered rows ---------- */
.services { margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem); }
.services__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1rem; }
.services__title { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); }
.services__lede { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.service-rows { list-style: none; border-top: 1px solid var(--line-strong); }
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon num" "icon title" "text text" "action action";
  gap: 0 0.85rem;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: background-color var(--t-fast) var(--ease);
}
.service-row:hover, .service-row:focus-within { background: var(--pale); }
.service-row__num { grid-area: num; font-family: var(--font-head); font-weight: 700; font-size: 0.8125rem; color: var(--violet-ink); letter-spacing: 0.04em; line-height: 1.3; }
.service-row__icon {
  grid-area: icon; align-self: start;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--plum);
}
.service-row__icon .icon { width: 1.2rem; height: 1.2rem; }
.service-row__title { grid-area: title; font-size: 1.1875rem; }
.service-row__text { grid-area: text; margin: 0.5rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.service-row__action {
  grid-area: action; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; margin-top: 0.25rem;
  font-weight: 600; color: var(--plum); text-decoration: none;
}
.service-row__action .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--t-fast) var(--ease); }
/* The whole row is clickable, while the link stays the single accessible control */
.service-row__action::after { content: ""; position: absolute; inset: 0; border-radius: 2px; }
.service-row__action:focus-visible { outline: none; }
.service-row:has(.service-row__action:focus-visible) { outline: 3px solid var(--plum); outline-offset: 2px; }
.service-row:hover .service-row__action .icon { transform: translateX(4px); }
@media (min-width: 900px) {
  .service-row {
    grid-template-columns: 2.75rem 48px minmax(12rem, 0.9fr) minmax(0, 1.6fr) auto;
    grid-template-areas: "num icon title text action";
    align-items: center; gap: 1.25rem;
    padding: 1.1rem 1rem;
  }
  .service-row__text { margin: 0; }
  .service-row__icon { align-self: center; }
  .service-row__action {
    margin: 0; padding: 0 1rem;
    border: 1.5px solid var(--plum); border-radius: 999px;
    background: var(--white);
  }
  .service-row:hover .service-row__action { background: var(--plum); color: var(--white); }
}

/* ---------- Training-day explanation (inside the process band) ---------- */
.training-day {
  display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-offset) + 16px);
}
.training-day__title { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); margin-bottom: 0.5rem; }
.training-day__note {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--pale);
  color: var(--plum); font-size: 0.875rem; font-weight: 600; line-height: 1.4;
}
.day-stages { list-style: none; display: grid; gap: 0; }
.day-stage {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem;
  padding-bottom: 1.25rem;
}
.day-stage:last-child { padding-bottom: 0; }
.day-stage::before {
  content: ""; position: absolute; left: 23px; top: 48px; bottom: 0;
  width: 2px; background: var(--lavender-soft);
}
.day-stage:last-child::before { display: none; }
.day-stage__num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--plum); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem;
}
.day-stage:last-child .day-stage__num { background: var(--yellow); color: var(--ink); }
.day-stage__title { font-size: 1.125rem; margin: 0.6rem 0 0.25rem; }
.day-stage p { color: var(--ink); font-size: 1rem; line-height: 1.55; }
.training-day__visual {
  margin: 0;
  padding: 0.75rem;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(155, 115, 165, 0.24), rgba(155, 115, 165, 0) 60%),
    linear-gradient(180deg, var(--pale-2), #efe7f2);
}
.d-road { fill: none; stroke: var(--lavender-soft); stroke-width: 22; stroke-linecap: round; }
.d-lane { fill: none; stroke: var(--white); stroke-width: 2; stroke-dasharray: 7 7; }
.d-badge { fill: var(--plum); stroke: var(--white); stroke-width: 2; }
.d-badge--yellow { fill: var(--yellow); }
.d-num { fill: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 13px; text-anchor: middle; }
.d-num--ink { fill: var(--ink); }
@media (min-width: 900px) {
  .training-day { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- Quote, requirements and coverage ---------- */
.quote-section { padding-top: 0; }
.quote-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.quote-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  min-width: 0;
}
.quote-panel__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.quote-panel__tag {
  order: -1; width: 100%;
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet-ink);
}
.quote-panel--summary {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: var(--pale-2);
}
.quote-panel__visual {
  margin: 0;
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem) clamp(1rem, 0.6rem + 2vw, 2.5rem) 0.5rem;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(155, 115, 165, 0.28), rgba(155, 115, 165, 0) 60%),
    linear-gradient(180deg, #efe7f2, var(--pale-2));
}
.quote-panel__visual .scene__svg { max-height: 230px; margin-inline: auto; }
.quote-panel__body { padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0; }
.quote-panel__body > p:not(.quote-note) { color: var(--ink); font-size: 1rem; max-width: 34rem; }
.quote-panel__body .btn { align-self: flex-start; }
.quote-note {
  display: flex; gap: 0.55rem; align-items: flex-start;
  margin: 0.25rem 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--white);
  color: var(--plum); font-size: var(--fs-small); font-weight: 600; line-height: 1.45;
}
.quote-note .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; color: var(--violet); }

.check-list { list-style: none; display: grid; gap: 0.6rem; }
.check-list li { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.check-list__icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--pale); color: var(--plum);
}
.check-list__icon .icon { width: 1.1rem; height: 1.1rem; }
.quote-panel--provide { background: var(--plum-800); border-color: var(--plum-800); }
.quote-panel--provide .quote-panel__title { color: var(--white); }
.quote-panel--provide .quote-panel__tag--you { color: var(--yellow); }
.quote-panel--provide .check-list li { color: var(--white); }
.quote-panel--provide .check-list__icon { background: rgba(255, 255, 255, 0.1); color: var(--yellow); }

.quote-panel--coverage { display: grid; gap: 1.25rem; align-items: center; background: var(--white); }
.coverage__text { color: var(--ink); font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; max-width: 30rem; }
.cov-group { list-style: none; display: grid; gap: 0.6rem; }
.cov-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--pale-2);
  line-height: 1.3;
}
.cov-item--main { border-style: solid; border-color: var(--lavender); background: var(--white); }
.cov-item strong { display: block; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: 1.0625rem; }
.cov-item__sub { display: block; color: var(--muted); font-size: 0.9375rem; }
.cov-item__icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--pale); color: var(--plum);
}
.cov-item--main .cov-item__icon { background: var(--plum); color: var(--yellow); }
.cov-item__icon .icon { width: 1.1rem; height: 1.1rem; }
/* V7: three across only when the coverage panel is full width (560 to 639 px); from 640 to 899 px it shares the row, so the items stack (fixes "Australi/a" breaking at 768) */
@media (min-width: 560px) and (max-width: 639.98px) { .cov-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cov-item { flex-direction: column; align-items: flex-start; } }
@media (min-width: 900px) { .cov-group { grid-template-columns: minmax(0, 1fr); } .cov-item { flex-direction: row; align-items: center; } }
@media (min-width: 1200px) { .cov-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cov-item { flex-direction: column; align-items: flex-start; } }
.quote-scope { margin: -0.5rem 0 1.25rem; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
/* V7: the scope explanation leads into the two lists it describes, at every width */
.quote-lists { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.quote-lists > .quote-scope {
  margin: 0 0 calc(0.75rem - var(--gap));
  padding-left: 0.85rem; border-left: 3px solid var(--lavender);
  color: var(--ink); font-size: 0.9375rem; line-height: 1.5;
}
.quote-lists > .quote-panel--list { grid-column: auto; }

/* ---------- V3.1 mobile compaction (no text-size changes) ---------- */
@media (max-width: 639.98px) {
  .audience { gap: 1rem; }
  .audience__grid { gap: 0.5rem; }
  .audience-item { padding: 0.7rem 0.85rem; gap: 0.75rem; align-items: center; }
  .audience-item__icon { width: 36px; height: 36px; border-radius: 10px; }
  .audience-item__title { margin-bottom: 0.05rem; }
  .programme-card__media { aspect-ratio: 16 / 9; }
  .process-card .scene { padding: 0.4rem 1rem 0.15rem; }
  .process-card .scene__svg { height: 136px; max-height: none; width: auto; max-width: 100%; margin-inline: auto; }
  .process-card__body { padding: 0.85rem 1.1rem 1.05rem; }
  .training-day { margin-top: var(--gap); gap: 1rem; }
  .training-day__note { margin-bottom: 1rem; }
  .day-stage { padding-bottom: 1rem; }
  .training-day__visual { padding: 0.4rem; }
  .training-day__visual .scene__svg { height: 170px; width: auto; max-width: 100%; margin-inline: auto; }
  .quote-panel__visual .scene__svg { height: 140px; width: auto; max-width: 100%; }
  .insight__target { width: 26px; height: 26px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
  .lr-panel__visual { min-height: 0; }
}

@media (min-width: 900px) {
  .quote-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .quote-panel--summary { grid-column: 1 / span 7; }
  .quote-lists { grid-column: 8 / span 5; grid-template-rows: auto 1fr 1fr; }
  .quote-panel--coverage { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-panel--summary, .quote-panel--coverage, .quote-lists { grid-column: 1 / -1; }
  .quote-panel--coverage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quote-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-lists > .quote-scope { grid-column: 1 / -1; }
}

/* ---------- Selected articles ---------- */
.insights { padding-top: var(--section-y); }
.insight-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The icon sits beside the date and title only; the summary and link use the full card width */
.insight {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "art meta" "art title" "text text" "link link";
  column-gap: 1rem; align-items: start;
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.insight__body { display: contents; }
.insight__art { grid-area: art; align-self: center; }
.insight__meta { grid-area: meta; align-self: end; }
.insight__title { grid-area: title; }
.insight__body > p:not(.insight__meta) { grid-area: text; margin-top: 0.6rem; }
.insight__link { grid-area: link; justify-self: start; }
.insight__art {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 14px;
  background:
    radial-gradient(90% 80% at 20% 10%, rgba(155, 115, 165, 0.45), rgba(155, 115, 165, 0) 60%),
    var(--plum);
  color: var(--yellow);
}
@media (max-width: 479.98px) {
  .insight { grid-template-columns: 48px minmax(0, 1fr); column-gap: 0.85rem; padding: 1rem; }
  .insight__art { width: 48px; height: 48px; border-radius: 12px; }
  .insight__art .icon { width: 1.4rem !important; height: 1.4rem !important; }
  .insight__target { width: 28px !important; height: 28px !important; }
}
.insight__art .icon { width: 1.6rem; height: 1.6rem; }
.insight__target {
  width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--yellow) 0 25%, var(--plum-900) 0 50%, var(--violet) 0 75%, var(--lavender) 0);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.insight__meta { margin: 0 0 0.2rem; color: var(--violet-ink); font-size: 0.875rem; font-weight: 600; }
.insight__title { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.insight__body > p:not(.insight__meta) { color: var(--ink); font-size: 1rem; line-height: 1.55; margin-bottom: 0.4rem; }
.insight__link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; }
.insight__link .icon { width: 1rem; height: 1rem; }

/* =========================================================
   V4: looping scene details (How onsite training works, training day)
   The complete drawing is the default. Loops run only with html.motion-on,
   only while the scene is on screen (.is-live) and never while the tab is hidden.
   ========================================================= */
.s-ring { fill: none; stroke: var(--violet); stroke-width: 2; opacity: 0; }
.s-node-ring { fill: none; stroke: var(--yellow); stroke-width: 3; opacity: 0; }
.s-flow { fill: none; stroke: var(--plum); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0; }
.s-ripple { fill: none; stroke: var(--yellow); stroke-width: 2.5; opacity: 0; }
.s-check-off { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.5; }
.d-badge-ring { fill: none; stroke: var(--yellow); stroke-width: 3; opacity: 0; }
[data-loop] { --cycle: 8s; }
[data-loop-day] { --cycle: 10s; }
[data-loop] [class*="l-"] { transform-box: fill-box; transform-origin: center; }
[data-loop] .l-fill { transform-origin: left center; }

.motion-on [data-loop] .l-fill    { animation: l-fill var(--cycle) var(--ease) infinite both; }
.motion-on [data-loop] .l-pop     { animation: l-pop var(--cycle) var(--ease) infinite both; }
.motion-on [data-loop] .l-stamp   { animation: l-stamp var(--cycle) var(--ease) infinite both; }
.motion-on [data-loop] .l-glow    { animation: l-glow var(--cycle) ease-in-out infinite both; }
.motion-on [data-loop] .l-flow    { animation: l-flow var(--cycle) linear infinite both; }
.motion-on [data-loop] .l-send    { animation: l-send var(--cycle) var(--ease) infinite both; }
.motion-on [data-loop] .l-ripple  { animation: l-ripple var(--cycle) ease-out infinite both; }
.motion-on [data-loop] .l-drive   { animation: l-drive var(--cycle) linear infinite both; }
.motion-on [data-loop] .l-badge   { animation: l-glow var(--cycle) ease-in-out infinite both; }
.motion-on [data-loop] .l-nod     { animation: l-nod var(--cycle) ease-in-out infinite both; }
.motion-on [data-loop] .l-day-review { animation: l-review var(--cycle) var(--ease) infinite both; }
.motion-on [data-loop] .l-float   { animation: l-float 6s ease-in-out infinite alternate both; }
.motion-on [data-loop] .l-twinkle { animation: l-twinkle 4.5s ease-in-out infinite both; }
.motion-on [data-loop] .d-car     { animation: day-car var(--cycle) linear infinite both; }
.motion-on [data-loop] [class*="l-"], .motion-on [data-loop] .d-car {
  animation-delay: calc(var(--ld, 0s) + var(--stagger, 0s));
}
/* Pause off screen and while the tab is hidden (resume from the same frame, no reset) */
.motion-on [data-loop]:not(.is-live) [class*="l-"], .motion-on [data-loop]:not(.is-live) .d-car,
.page-hidden [data-loop] [class*="l-"], .page-hidden [data-loop] .d-car { animation-play-state: paused; }

@keyframes l-fill   { 0%, 4% { transform: scaleX(0); opacity: 1; } 14% { transform: scaleX(1); } 84% { transform: scaleX(1); opacity: 1; } 93% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes l-pop    { 0%, 4% { opacity: 0; transform: scale(0.5); } 10% { opacity: 1; transform: scale(1.1); } 14% { transform: none; } 84% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes l-stamp  { 0%, 4% { opacity: 0; transform: scale(1.35) rotate(-8deg); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes l-glow   { 0%, 3% { opacity: 0; } 9% { opacity: 1; } 22% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes l-flow   { 0%, 3% { opacity: 0; stroke-dashoffset: 42; } 9% { opacity: 0.9; } 22% { opacity: 0.9; } 30% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes l-send   { 0%, 38% { transform: none; } 43% { transform: scale(1.14); } 48%, 100% { transform: none; } }
@keyframes l-ripple { 0%, 40% { opacity: 0; transform: scale(1); } 44% { opacity: 0.85; } 62%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes l-drive  { 0% { opacity: 0; transform: translateX(-112px); } 6% { opacity: 1; } 86% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateX(112px); } }
@keyframes l-nod    { 0%, 100% { transform: none; } 4% { transform: scale(1.28); } 9% { transform: none; } 80% { transform: none; } 84% { transform: scale(1.28); } 89% { transform: none; } }
@keyframes l-review { 0%, 78% { transform: none; } 83% { transform: scale(1.12); } 89%, 100% { transform: none; } }
@keyframes l-float  { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes l-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* Training-day car: generated from the road centreline, offset 5.5 units to the left of travel
   (Australian left-side traffic) at every keyframe, not just the final frame. */
.d-car { transform-box: view-box; transform-origin: 0 0; }
@keyframes day-car {
  0%, 6% { opacity: 0; transform: translate(128.0px, 86.5px) rotate(-0.3deg); }
  9.00% { opacity: 1; transform: translate(128.0px, 86.5px) rotate(-0.3deg); }
  10.89% { opacity: 1; transform: translate(141.3px, 85.9px) rotate(-5.3deg); }
  12.78% { opacity: 1; transform: translate(154.5px, 84.0px) rotate(-11.1deg); }
  14.67% { opacity: 1; transform: translate(167.3px, 80.7px) rotate(-17.4deg); }
  16.56% { opacity: 1; transform: translate(179.8px, 76.0px) rotate(-23.1deg); }
  18.44% { opacity: 1; transform: translate(192.0px, 70.3px) rotate(-26.9deg); }
  20.33% { opacity: 1; transform: translate(204.2px, 63.9px) rotate(-27.9deg); }
  22.22% { opacity: 1; transform: translate(216.8px, 57.5px) rotate(-25.2deg); }
  24.11% { opacity: 1; transform: translate(230.2px, 52.0px) rotate(-18.7deg); }
  26.00% { opacity: 1; transform: translate(244.4px, 48.4px) rotate(-9.8deg); }
  27.89% { opacity: 1; transform: translate(259.1px, 47.1px) rotate(-0.3deg); }
  29.78% { opacity: 1; transform: translate(273.7px, 48.1px) rotate(7.6deg); }
  31.67% { opacity: 1; transform: translate(288.3px, 51.6px) rotate(20.1deg); }
  33.56% { opacity: 1; transform: translate(301.8px, 58.5px) rotate(34.1deg); }
  35.44% { opacity: 1; transform: translate(313.2px, 68.5px) rotate(47.7deg); }
  37.33% { opacity: 1; transform: translate(322.0px, 80.7px) rotate(60.2deg); }
  39.22% { opacity: 1; transform: translate(328.1px, 94.3px) rotate(71.0deg); }
  41.11% { opacity: 1; transform: translate(331.6px, 108.6px) rotate(80.7deg); }
  43.00% { opacity: 1; transform: translate(332.8px, 123.3px) rotate(90.0deg); }
  44.89% { opacity: 1; transform: translate(331.6px, 138.0px) rotate(99.3deg); }
  46.78% { opacity: 1; transform: translate(328.0px, 152.3px) rotate(109.2deg); }
  48.67% { opacity: 1; transform: translate(321.7px, 165.9px) rotate(120.3deg); }
  50.56% { opacity: 1; transform: translate(312.8px, 177.9px) rotate(132.4deg); }
  52.44% { opacity: 1; transform: translate(301.4px, 187.8px) rotate(145.1deg); }
  54.33% { opacity: 1; transform: translate(288.6px, 195.0px) rotate(154.7deg); }
  56.22% { opacity: 1; transform: translate(275.1px, 200.4px) rotate(161.4deg); }
  58.11% { opacity: 1; transform: translate(261.3px, 204.3px) rotate(166.7deg); }
  60.00% { opacity: 1; transform: translate(247.2px, 207.0px) rotate(171.3deg); }
  61.89% { opacity: 1; transform: translate(233.1px, 208.6px) rotate(175.5deg); }
  63.78% { opacity: 1; transform: translate(218.8px, 209.2px) rotate(179.4deg); }
  65.67% { opacity: 1; transform: translate(204.6px, 208.9px) rotate(183.5deg); }
  67.56% { opacity: 1; transform: translate(190.4px, 207.5px) rotate(187.8deg); }
  69.44% { opacity: 1; transform: translate(176.3px, 204.9px) rotate(192.4deg); }
  71.33% { opacity: 1; transform: translate(162.5px, 201.2px) rotate(197.9deg); }
  73.22% { opacity: 1; transform: translate(149.0px, 195.9px) rotate(204.3deg); }
  75.11% { opacity: 1; transform: translate(136.1px, 189.0px) rotate(212.2deg); }
  77.00% { opacity: 1; transform: translate(124.4px, 180.1px) rotate(221.5deg); }
  80%, 100% { opacity: 0; transform: translate(124.4px, 180.1px) rotate(221.5deg); }
}

/* Mobile: day-stage numbers no longer reserve a wide empty column */
@media (max-width: 639.98px) {
  .day-stage { gap: 0.85rem !important; }
  .day-stage__num { width: 36px !important; height: 36px !important; font-size: 0.875rem !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .marquee .marquee__track { animation: none !important; }
}
/* Footer "Reduce motion" switch: same result as the device setting */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: 0.01ms !important; }

/* ---------- Print ---------- */
@media print {
  .site-header, .hero__media, .marquee, .enquiry-section, .site-footer__target { display: none !important; }
  .hero { background: none; color: var(--ink); min-height: 0; padding-top: 0; }
  .hero__title { color: var(--plum); }
}

/* V7.1: readable line lengths where paragraphs ran to about 95 to 105 characters per line (tablet and wide FAQ) */
.faq-item__body p, .insight__body > p:not(.insight__meta), .lr-panel__body p, .service-row__text, .quote-lists > .quote-scope { max-width: 75ch; }