/* ==========================================================================
   Infocus Food Safety — design system
   Palette derived from the brand mark: crimson #9A0130, bronze #A3915F
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --crimson:        #9A0130;
  --crimson-600:    #B01A3E;
  --crimson-800:    #7A0126;
  --crimson-900:    #4E0B1B;
  --burgundy:       #68191B;

  --bronze:         #A3915F;
  --bronze-400:     #C9A96E;
  --bronze-100:     #EFE7D6;

  /* Neutrals — warm, to sit with the crimson */
  --ink:            #1B1416;
  --ink-700:        #2F2F30;
  --ink-500:        #574E51;
  --muted:          #6E6569;
  --line:           #E7E0DA;
  --line-soft:      #F0EAE4;
  --paper:          #FFFFFF;
  --sand:           #FAF7F3;
  --sand-200:       #F4EEE7;

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

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.26rem + 0.66vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.05rem, 1.6rem + 2.1vw, 3.15rem);
  --step-5:  clamp(2.35rem, 1.8rem + 2.6vw, 3.5rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1640px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(27, 20, 22, .06), 0 2px 8px rgba(27, 20, 22, .04);
  --shadow:    0 2px 6px rgba(27, 20, 22, .06), 0 12px 28px rgba(27, 20, 22, .08);
  --shadow-lg: 0 4px 12px rgba(27, 20, 22, .08), 0 24px 56px rgba(27, 20, 22, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* `clip` (not `hidden`) so the off-canvas nav can't widen the page
     without turning the root into a scroll container — sticky stays sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--crimson-800); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 600; }

/* On dark grounds that near-black is the background colour, so <strong> inside
   a hero, page header or dark band rendered invisible (contrast 1.00). Colour
   must be inherited there instead. */
.hero strong, .page-head strong, .section--dark strong,
.cta-band strong, .sector-card strong, .footer strong { color: inherit; }

.page-head a:not(.btn), .section--dark a:not(.btn), .hero a:not(.btn) { color: var(--bronze-400); }
.page-head a:not(.btn):hover, .section--dark a:not(.btn):hover, .hero a:not(.btn):hover { color: #fff; }

:focus-visible {
  outline: 3px solid var(--crimson-600);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--crimson); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
/* For full-bleed feature bands: the standard container leaves a showcase panel
   sitting at ~59% of a wide monitor, with more surround than panel. */
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--sand { background: var(--sand); }
.section--sand-200 { background: var(--sand-200); }

.section--dark {
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(154, 1, 48, .55) 0%, rgba(154, 1, 48, 0) 55%),
    linear-gradient(160deg, #2A1418 0%, #1B1416 60%, #241318 100%);
  color: rgba(255, 255, 255, .78);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--crimson);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bronze);
  flex: none;
}
.section--dark .eyebrow { color: var(--bronze-400); }
.section--dark .eyebrow::before { background: var(--bronze-400); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-500);
}
.section--dark .lede { color: rgba(255, 255, 255, .8); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

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

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  --btn-bd: var(--crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .875rem 1.6rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: center;
  /* Transparent base shadow so hover interpolates instead of snapping in. */
  box-shadow: 0 0 0 rgba(154, 1, 48, 0);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), border-color .28s var(--ease), color .2s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(154, 1, 48, .26);
}
.btn:active { transform: translateY(0); transition-duration: .08s; }

.btn--primary:hover { --btn-bg: var(--crimson-800); --btn-bd: var(--crimson-800); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--crimson); }
.btn--outline:hover {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  box-shadow: 0 8px 22px rgba(154, 1, 48, .2);
}

.btn--light { --btn-bg: #fff; --btn-fg: var(--crimson); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--bronze-100); --btn-bd: var(--bronze-100); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }

.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { --btn-bd: #fff; --btn-bg: rgba(255, 255, 255, .1); box-shadow: none; }

.btn--sm { padding: .6rem 1.15rem; font-size: var(--step--1); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--step-1); }

.btn .icon { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--crimson);
}
.link-arrow .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Icons
   -------------------------------------------------------------------------- */
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.icon-badge {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(154, 1, 48, .1), rgba(163, 145, 95, .14));
  color: var(--crimson);
  margin-bottom: 1.25rem;
}
.icon-badge .icon { width: 1.6rem; height: 1.6rem; }

/* --------------------------------------------------------------------------
   7. Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: .35rem;
}
.topbar__note { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__note .icon { width: 1rem; height: 1rem; color: var(--bronze-400); }
.topbar__links { display: flex; align-items: center; gap: 1.5rem; }
.topbar a { color: rgba(255, 255, 255, .82); font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: #fff; }
.topbar a .icon { width: 1rem; height: 1rem; }
.topbar__login { color: var(--bronze-400) !important; }

@media (max-width: 860px) {
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
}

/* --------------------------------------------------------------------------
   8. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* backdrop-filter makes an element the containing block for its fixed-position
   descendants, which would collapse the off-canvas drawer. Only apply the frosted
   effect at widths where the nav is not a fixed drawer. */
@media (min-width: 1201px) {
  .header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}
.header.is-stuck { box-shadow: 0 4px 24px rgba(27, 20, 22, .08); border-color: transparent; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 168px; height: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem .55rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--crimson); background: var(--sand-200); }
.nav__link[aria-current="page"] { color: var(--crimson); font-weight: 600; }
/* Parent item of the section you are currently in. */
.nav__item.is-current > .nav__link { color: var(--crimson); font-weight: 600; }
.nav__link .icon { width: .85rem; height: .85rem; stroke-width: 2.2; transition: transform .2s var(--ease); }
.nav__item:hover > .nav__link .icon, .nav__item:focus-within > .nav__link .icon { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  translate: -50% 0;
  min-width: 300px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .55rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__panel li { margin: 0; }
.nav__panel a {
  display: block;
  padding: .625rem .875rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
}
.nav__panel a:hover { background: var(--sand); color: var(--crimson); }
.nav__panel a span {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: .1rem;
}
.nav__panel a:hover span { color: var(--ink-500); }

.header__cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
  white-space: nowrap;
}
.header__phone .icon { width: 1.05rem; height: 1.05rem; color: var(--crimson); }
.header__phone:hover { color: var(--crimson); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}
.nav-toggle .icon { width: 1.35rem; height: 1.35rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Shown only inside the drawer (see the max-width block below). */
.nav__mobile-cta { display: none; }

@media (max-width: 1200px) {
  .nav-toggle { display: grid; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    /* --drawer-top is set from the header's real bottom edge when the drawer
       opens, so it never rides up over the header or the utility bar. */
    inset: var(--drawer-top, var(--header-h)) 0 0 auto;
    width: min(400px, 88vw);
    margin: 0;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem var(--gutter) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line-soft); }
  .nav__link { padding: .95rem .25rem; font-size: 1.05rem; justify-content: space-between; border-radius: 0; }
  .nav__link:hover { background: transparent; }

  .nav__panel {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 .75rem .25rem;
    display: none;
  }
  .nav__item.is-open > .nav__panel { display: block; }
  .nav__item:hover > .nav__panel { display: none; }
  .nav__item.is-open:hover > .nav__panel { display: block; }
  .nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }
  .nav__item:hover > .nav__link .icon { transform: none; }
  .nav__panel a { padding: .55rem .75rem; border-left: 2px solid var(--line); border-radius: 0; }

  .nav__mobile-cta { display: block; margin-top: 1.5rem; }
  .nav__mobile-cta .btn { width: 100%; }
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 20, 22, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  z-index: 99;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
/* Lock scrolling on the root, not on body: making <body> a scroll container
   breaks the sticky header, which then scrolls out of view behind the drawer. */
html.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Sized so the whole hero — headline, copy, CTAs and trust row — lands
     within the first screen rather than running past the fold. */
  min-height: min(74vh, 620px);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 4vw, 3.25rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kept dense across the copy width so text contrast holds whatever the photo does. */
  background:
    linear-gradient(100deg, rgba(27, 20, 22, .95) 0%, rgba(37, 17, 24, .88) 38%, rgba(78, 11, 27, .66) 68%, rgba(78, 11, 27, .42) 100%);
}
/* This element is also `.container`, so the gutter has to be added on top of the
   measure — otherwise the padding eats into it and the CTAs wrap. */
.hero__inner { max-width: calc(44rem + var(--gutter) * 2); }
.hero .eyebrow { color: var(--bronze-400); }
.hero .eyebrow::before { background: var(--bronze-400); }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero h1 em { font-style: normal; color: var(--bronze-400); }
.hero__lede {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, .94);
  max-width: 36rem;
  margin-bottom: 1.75rem;
}
.hero .btn-row { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* V2 hero rotator — the slides the live site cycles through. Both occupy the
   same grid cell so the hero does not resize as they change. */
.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
/* Only the first slide is the page's h1; the rest match it visually without
   adding a second top-level heading to the outline. */
.hero-slide__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 .5em;
}
.hero-dots { display: flex; gap: .6rem; margin-top: .25rem; }
.hero-dot {
  width: 2.25rem;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background .25s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dot.is-active { background: var(--bronze-400); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

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

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--step--1);
  font-weight: 500;
}
.hero__trust .icon { width: 1.15rem; height: 1.15rem; color: var(--bronze-400); }

/* --------------------------------------------------------------------------
   10. Client / trust strip
   -------------------------------------------------------------------------- */
.clients { background: var(--sand); }
.clients__inner { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.clients__label {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 7vw, 5.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.clients__grid li { margin: 0; }
.clients__grid img {
  /* Every asset shares a 120px-tall 2x canvas with the mark scaled inside it,
     so rendering them all at one CSS height keeps them optically balanced. */
  height: clamp(56px, 7vw, 84px);
  width: auto;
  opacity: .9;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.clients__grid li:hover img { opacity: 1; transform: translateY(-2px); }

.clients__note {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
/* Stepped rather than auto-fit: auto-fit dropped to three columns a couple of
   pixels before four would fit, stranding the fourth card on its own row. */
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 76rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 0 0 rgba(27, 20, 22, 0);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.card h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.card p { color: var(--ink-500); font-size: .975rem; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-soft); }

/* Sector cards ---------------------------------------------------------- */
.sector-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: 22rem;
  color: #fff;
  background: var(--ink);
}
.sector-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s var(--ease);
}
.sector-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(27, 20, 22, .92) 0%, rgba(27, 20, 22, .55) 42%, rgba(27, 20, 22, .12) 75%);
  transition: background .35s var(--ease);
}
.sector-card:hover img { transform: scale(1.06); }
.sector-card:hover::after {
  background: linear-gradient(to top, rgba(78, 11, 27, .95) 0%, rgba(78, 11, 27, .6) 45%, rgba(27, 20, 22, .2) 78%);
}
.sector-card__body {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2rem);
}
/* Heading level varies by page (h2 on the homepage grid, h3 elsewhere), so
   colour and size are bound to the card, not to the tag. */
.sector-card h2,
.sector-card h3 { color: #fff; font-size: var(--step-2); margin-bottom: .35rem; }
.sector-card p {
  color: rgba(255, 255, 255, .8);
  font-size: .95rem;
  margin-bottom: .875rem;
}
.sector-card .link-arrow { color: var(--bronze-400); }

/* Service cards --------------------------------------------------------- */
.service-card { display: flex; flex-direction: column; }
/* The intro paragraph takes up the slack so the link lists and buttons
   line up across all three cards regardless of copy length. */
.service-card > p { flex: 1 1 auto; }
.service-card ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.service-card li {
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
.service-card li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  color: var(--ink-700);
  font-weight: 500;
  font-size: .975rem;
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}
.service-card li a:hover { color: var(--crimson); padding-left: .35rem; }
.service-card li .icon { width: .95rem; height: .95rem; color: var(--bronze); }
.service-card .btn { align-self: flex-start; }

/* Course cards ---------------------------------------------------------- */
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 rgba(27, 20, 22, 0);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-soft); }
.course-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-200); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.course-card:hover .course-card__media img { transform: scale(1.05); }
.course-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.course-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.course-card p { color: var(--ink-500); font-size: .95rem; margin-bottom: 1.25rem; }
.course-card .link-arrow { margin-top: auto; font-size: .95rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .875rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--sand-200);
  color: var(--ink-500);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tag--accredited { background: rgba(154, 1, 48, .09); color: var(--crimson); }
.tag--online { background: rgba(163, 145, 95, .16); color: #6E5F35; }

/* On dark grounds the pale chip backgrounds disappear and the dark chip text
   lands on near-black (measured 2.09:1). Invert them there. */
.page-head .tag, .hero .tag, .section--dark .tag {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .95);
}
.page-head .tag--accredited, .hero .tag--accredited, .section--dark .tag--accredited {
  background: rgba(201, 169, 110, .2);
  border-color: rgba(201, 169, 110, .45);
  color: var(--bronze-400);
}

/* Value / feature cards ------------------------------------------------- */
.feature { position: relative; }
.feature h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.feature p { color: var(--ink-500); font-size: .975rem; }

/* --------------------------------------------------------------------------
   12. Split content block
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
@media (max-width: 62rem) { .split--reverse .split__media { order: 0; } }

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.split__media::before {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 55%;
  height: 55%;
  border: 2px solid var(--bronze);
  border-radius: var(--radius-lg);
  opacity: .35;
  z-index: -1;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  list-style: none;
  padding-left: 0;
}
.stat-strip > div { margin: 0; }
.stat-strip dt {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--crimson);
  line-height: 1;
  margin-bottom: .35rem;
}
.stat-strip dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   13. Process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps li { position: relative; margin: 0; padding-top: 3.5rem; }
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--crimson);
  line-height: 1;
}
.steps li::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 3.25rem;
  right: -1.25rem;
  height: 1px;
  background: linear-gradient(to right, var(--bronze), transparent);
  opacity: .5;
}
.steps li:last-child::after { display: none; }
@media (max-width: 62rem) { .steps li::after { display: none; } }
.steps h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.steps p { color: var(--ink-500); font-size: .95rem; }
.section--dark .steps p { color: rgba(255, 255, 255, .72); }
.section--dark .steps li::before { color: var(--bronze-400); }

/* --------------------------------------------------------------------------
   14. Testimonial
   -------------------------------------------------------------------------- */
.quote { max-width: 52rem; margin-inline: auto; text-align: center; }
.quote__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--bronze);
  opacity: .5;
  margin-bottom: .5rem;
}
.quote blockquote {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.section--dark .quote blockquote { color: #fff; }
.quote figcaption { font-size: var(--step--1); color: var(--muted); }
.section--dark .quote figcaption { color: rgba(255, 255, 255, .68); }
.quote cite { display: block; font-style: normal; font-weight: 600; color: var(--ink); margin-bottom: .15rem; }
.section--dark .quote cite { color: var(--bronze-400); }

/* --------------------------------------------------------------------------
   15. News cards
   -------------------------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: .75rem;
}
.post-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bronze); }
.post-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--crimson); }
.post-card p { color: var(--ink-500); font-size: .95rem; margin-bottom: 1.25rem; }
.post-card .link-arrow { margin-top: auto; font-size: .95rem; }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cta-band h2 { margin-bottom: .5rem; }
.cta-band__actions { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
@media (min-width: 62rem) { .cta-band__actions { align-items: flex-end; text-align: right; } }

.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}
.cta-phone:hover { color: var(--bronze-400); }
.cta-phone .icon { width: 1.5rem; height: 1.5rem; color: var(--bronze-400); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .68);
  font-size: .95rem;
}
.footer__main {
  display: grid;
  grid-template-columns: 1.35fr .9fr 1.15fr 1.15fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 62rem) { .footer__main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } }

.footer__brand img { width: 176px; margin-bottom: 1.25rem; }
.footer__brand p { color: rgba(255, 255, 255, .62); font-size: .925rem; max-width: 30ch; }

.footer__heading {
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .6rem; }
.footer a { color: rgba(255, 255, 255, .68); }
.footer a:hover { color: var(--bronze-400); }

.footer__contact li { display: flex; gap: .625rem; align-items: flex-start; }
.footer__contact .icon { width: 1.05rem; height: 1.05rem; color: var(--bronze-400); margin-top: .25rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__pay { display: flex; align-items: center; gap: .6rem; }
.footer__pay span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.footer__pay .pay-chip {
  display: inline-grid;
  place-items: center;
  height: 26px;
  padding-inline: .55rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   18. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(90% 130% at 8% 0%, rgba(154, 1, 48, .5) 0%, rgba(154, 1, 48, 0) 60%),
    linear-gradient(150deg, #2A1418 0%, #1B1416 65%);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
}
.page-head--media .page-head__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-head--media .page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(27, 20, 22, .95) 0%, rgba(37, 17, 24, .89) 45%, rgba(78, 11, 27, .7) 100%);
}
.page-head h1 { color: #fff; margin-bottom: .4em; }
.page-head__inner { max-width: calc(46rem + var(--gutter) * 2); }
/* Near-solid: banner photos vary in brightness, and 82% white read as grey
   against the lighter ones. */
.page-head .lede { color: rgba(255, 255, 255, .94); }
.page-head .eyebrow { color: var(--bronze-400); }
.page-head .eyebrow::before { background: var(--bronze-400); }

.breadcrumbs { margin-bottom: 1.5rem; font-size: var(--step--1); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .55); }
.breadcrumbs a { color: rgba(255, 255, 255, .72); }
.breadcrumbs a:hover { color: var(--bronze-400); }
.breadcrumbs .sep { color: rgba(255, 255, 255, .55); }
.breadcrumbs [aria-current="page"] { color: var(--bronze-400); }

/* --------------------------------------------------------------------------
   19. Prose (content pages)
   -------------------------------------------------------------------------- */
.prose h2 { font-size: var(--step-3); margin-top: 2.25em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75em; }
.prose > *:first-child { margin-top: 0; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .625rem;
  color: var(--ink-500);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
}

/* A readable measure, centred — left-aligned it reads as an unfinished column
   next to the full-width blocks it sits between. */
.prose--measure { max-width: 46rem; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   V2 layout standard
   Every V2 section puts its content in this one column, so headings, copy,
   lists, accordions and testimonials all share a single left edge down the
   whole site. Components never set their own width.
   --------------------------------------------------------------------------- */
.v2-col {
  --v2-measure: 46rem;
  max-width: var(--v2-measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.v2-col > * { margin: 0; }

.v2-heading {
  font-size: var(--step-3);
  margin: 0;
}
.v2-heading--center { text-align: center; }

/* Consistent internal rhythm for every prose block. */
.v2-col .prose > * + * { margin-top: 1.1em; }
.v2-col .prose > h2 + *,
.v2-col .prose > h3 + * { margin-top: .6em; }
.v2-col .prose h2 { font-size: var(--step-2); margin-top: 0; }
.v2-col .prose h3 { font-size: var(--step-1); margin-top: 0; }
.v2-col .prose p { color: var(--ink-500); }
.prose--center { text-align: center; }

/* Components inside the column stretch to it rather than setting a width. */
.v2-col .check-grid,
.v2-col .steps,
.v2-col .accordion,
.v2-col .course-listings,
.v2-col .unit-list,
.v2-col .carousel { width: 100%; }

/* Unit code beside the unit it names. */
.unit-list { margin: 0; }
.unit-list__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: .35rem 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
}
.unit-list__row:last-child { border-bottom: 1px solid var(--line); }
.unit-list dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--crimson);
}
.unit-list dd { margin: 0; color: var(--ink-500); }
@media (max-width: 30rem) {
  .unit-list__row { grid-template-columns: 1fr; gap: .15rem; }
}

/* Course listing: title, price and its two actions held together. */
.course-listings {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .course-listings { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}
.course-listing {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.course-listing h3 {
  font-size: var(--step-1);
  margin: 0;
  color: var(--ink);
}
.course-listing__note {
  margin: 0;
  font-size: .9375rem;
  color: var(--ink-500);
}
.course-listing__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--crimson);
  line-height: 1.1;
}
.course-listing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: auto;
  padding-top: .5rem;
}
.section--sand .course-listing { background: #fff; }

/* The default step track needs 15rem per column, which only fits twice in the
   46rem measure and left a lone third step on its own row. */
.v2-col .steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.v2-col .steps li { padding-top: 2.9rem; }
.v2-col .steps li::before { font-size: var(--step-1); }
.v2-col .steps li::after { top: 1.05rem; left: 2.4rem; right: -.75rem; }

/* Two columns of checks read better than three at this measure. */
.v2-col .check-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Bullet points the source ran together on one line, restored to one per row
   with real separation between them. */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bullet-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  color: var(--ink-500);
  line-height: 1.6;
}
.bullet-list li:last-child { margin-bottom: 0; }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
}

/* A single testimonial needs no controls. */
.carousel--single .carousel__track { overflow: visible; }
.carousel--single .carousel__slide { max-height: none; }

/* Sidebar layout */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 68rem) { .with-aside { grid-template-columns: 1fr; } }

.aside-card {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.aside-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.aside-card p { font-size: .95rem; color: var(--ink-500); }
.aside-card .btn { width: 100%; margin-top: .5rem; }
.aside-card__phone {
  display: block;
  text-align: center;
  margin-top: .875rem;
  font-size: .9rem;
  color: var(--muted);
}
.aside-card__phone a { font-weight: 600; }

/* --------------------------------------------------------------------------
   20. Accordion (FAQ / course detail)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.accordion__trigger:hover { color: var(--crimson); }
.accordion__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--crimson);
  transition: transform .3s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.accordion__icon .icon { width: .9rem; height: .9rem; stroke-width: 2.2; }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}
/* Height is driven in JS (see initAccordions). The 0fr/1fr grid trick was
   unreliable here: on the first open the clipped content has never been laid
   out, so the flexible track resolves to 0 and the panel silently stays shut. */
.accordion__panel {
  height: 0;
  overflow: hidden;
  transition: height .32s var(--ease);
}
.accordion__panel p, .accordion__panel ul { color: var(--ink-500); font-size: .975rem; }
.accordion__panel > div > *:last-child { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   21. Team cards
   -------------------------------------------------------------------------- */
.team-card { text-align: left; }
.team-card__avatar {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(154, 1, 48, .1), rgba(163, 145, 95, .16));
  color: var(--crimson);
  margin-bottom: 1.25rem;
}
.team-card__avatar .icon { width: 1.6rem; height: 1.6rem; }
.team-card h2,
.team-card h3 { font-size: var(--step-1); margin-bottom: .15rem; }
.team-card__role {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   22. Callout
   -------------------------------------------------------------------------- */
.callout {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-left: 4px solid var(--crimson);
  border-radius: var(--radius);
  background: var(--sand);
}
.callout .icon-badge { margin-bottom: 0; flex: none; }
.callout h2 { font-size: var(--step-2); margin-bottom: .5rem; }
.callout p { color: var(--ink-500); }
.callout--muted { border-left-color: var(--bronze); }

@media (max-width: 40rem) {
  .callout { flex-direction: column; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   23. Forms
   -------------------------------------------------------------------------- */
/* Gives a bare form structure against a tinted section background. */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

/* Three short fields across, so none is orphaned on its own row.
   Two classes so this beats the base .form-grid rule declared below. */
.form-grid.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 46rem) { .form-grid.form-grid--three { grid-template-columns: 1fr; } }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
}

.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem; border: 0; padding: 0; }
.form-grid .field { margin-bottom: 0; }
.field--full { grid-column: 1 / -1; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field > label,
.field > legend {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}
.field > label span[aria-hidden] { color: var(--crimson); }
.field > legend { margin-bottom: .65rem; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 0 0 0 rgba(154, 1, 48, 0);
}
.field textarea { resize: vertical; min-height: 8rem; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6569' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(154, 1, 48, .14);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--crimson-600); }

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .65rem 1rem; }
.check { display: flex; align-items: center; gap: .6rem; font-size: .975rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--crimson); flex: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.form-note { font-size: var(--step--1); color: var(--muted); max-width: 26rem; margin: 0; }

/* --------------------------------------------------------------------------
   24. Contact layout
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 62rem) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.contact-form-panel h2 { font-size: var(--step-3); margin-bottom: .35rem; }
.contact-form-panel > .text-muted { margin-bottom: 1.75rem; font-size: var(--step--1); }

.contact-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.contact-list li {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: 1rem 0;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list .icon { width: 1.25rem; height: 1.25rem; color: var(--crimson); margin-top: .2rem; flex: none; }
.contact-list__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2rem;
}
.contact-list a { font-weight: 600; }

.contact-cta {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.contact-cta h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.contact-cta p { font-size: .95rem; color: var(--ink-500); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   24b. Content components — used to lay out supplied copy without rewriting it
   -------------------------------------------------------------------------- */

/* Team ------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  /* so expanding one bio doesn't stretch its neighbours */
  align-items: start;
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 rgba(27, 20, 22, 0);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-card__media { aspect-ratio: 1 / 1; background: var(--sand-200); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.team-card__initials {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--crimson-800);
  background: var(--sand-200);
}
.team-card__body { padding: clamp(1.25rem, 2.5vw, 1.6rem); }

/* Bio dialog --------------------------------------------------------------- */
.bio-dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(86vh, 52rem);
  /* explicit, so the centring never depends on the UA margin — `.v2-col > *`
     resets the margin of every direct child, dialogs included */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink-700);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.bio-dialog::backdrop {
  background: rgba(27, 20, 22, .62);
  backdrop-filter: blur(3px);
}
/* Column layout: a compact portrait in the header, all remaining space for the
   bio, and only the bio scrolls so the name stays visible. */
.bio-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 52rem);
}

.bio-dialog__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  padding-right: 3.75rem;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.bio-dialog__avatar {
  width: clamp(72px, 12vw, 104px);
  height: clamp(72px, 12vw, 104px);
  flex: none;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--sand-200);
}
.bio-dialog__head h3 { font-size: var(--step-2); margin-bottom: .15rem; }
.bio-dialog__head .team-card__role { margin-bottom: 0 !important; }

.bio-dialog__body {
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bio-dialog__body p { font-size: .975rem; color: var(--ink-500); }
.bio-dialog__body p:last-child { margin-bottom: 0; }

.bio-dialog__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.bio-dialog__close:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.bio-dialog__close .icon { width: 1rem; height: 1rem; stroke-width: 2.2; }

body.dialog-open { overflow: hidden; }

/* Bio trigger -------------------------------------------------------------- */
.team-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--crimson);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.team-card__toggle:hover { color: var(--crimson-800); }
.team-card__toggle .icon { width: .95rem; height: .95rem; stroke-width: 2.2; transition: transform .3s var(--ease); }
.team-card__toggle .team-card__toggle-less { display: none; }
.team-card [data-collapse].is-open .team-card__toggle-more { display: none; }
.team-card [data-collapse].is-open .team-card__toggle-less { display: inline; }
.team-card [data-collapse].is-open .team-card__toggle .icon { transform: rotate(180deg); }

.team-card__panel {
  height: 0;
  overflow: hidden;
  transition: height .32s var(--ease);
}
.team-card__panel > div { padding-top: .75rem; }
.team-card h2,
.team-card h3 { font-size: var(--step-1); margin-bottom: .2rem; }
.team-card__role {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crimson) !important;
  margin-bottom: .85rem !important;
}
.team-card p { font-size: .93rem; color: var(--ink-500); margin-bottom: .7rem; }
.team-card p:last-child { margin-bottom: 0; }

/* Checklist grid ---------------------------------------------------------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: .875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-grid li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-500);
}
.check-grid .icon { width: 1.1rem; height: 1.1rem; color: var(--crimson); margin-top: .25rem; flex: none; }

/* Testimonial cards ------------------------------------------------------- */
/* Carousel ---------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  /* Uniform card height with the content centred: only one slide is visible,
     so equal heights read as deliberate and stop the frame resizing per slide. */
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 3px solid var(--crimson-600); outline-offset: 4px; border-radius: var(--radius); }

/* One testimonial at a time, held to a readable measure and centred. */
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  /* Two of these testimonials are several times longer than the rest and were
     forcing the whole carousel to their height. The card is capped; only the
     quote text inside it scrolls (see .quote-card__text). */
  max-height: 24rem;
  overflow: hidden;
}
/* Presentation for a single, centred testimonial — larger type, a bronze
   quote mark, and the attribution set apart beneath a rule. */
.carousel .quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.carousel .quote-card__mark {
  display: block;
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: .7;
  color: var(--bronze);
  opacity: .55;
  margin-bottom: .5rem;
}
/* Only the quote itself scrolls — the mark and the attribution stay put.
   min-height:0 is required or a flex child refuses to shrink below content. */
.carousel .quote-card__text {
  max-width: 44rem;
  margin-inline: auto;
  min-height: 0;
  flex: 0 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.carousel .quote-card__text::-webkit-scrollbar { width: 6px; }
.carousel .quote-card__text::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.carousel .quote-card p {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
}
.carousel .quote-card cite {
  display: inline-block;
  flex: none;
  align-self: center;
  margin-top: 1.15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--crimson);
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.carousel__arrow {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.carousel__arrow:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.carousel__arrow .icon { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
[data-carousel-prev] .icon { transform: rotate(90deg); }
[data-carousel-next] .icon { transform: rotate(-90deg); }

.carousel__dots { display: flex; align-items: center; gap: .5rem; }
.carousel__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.carousel__dot[aria-current="true"] { background: var(--crimson); width: 1.4rem; border-radius: 999px; }

.quote-card {
  /* <figure> carries a 40px side margin from the UA sheet, which showed up as a
     96px gap between cards in the slider instead of the 16px one set here. */
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.quote-card p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.quote-card cite {
  display: block;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--crimson);
}

/* Inline pull quote ------------------------------------------------------- */
.pull-quote {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--bronze);
  background: var(--sand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.section--sand .pull-quote { background: var(--paper); }

/* Detail tiles ------------------------------------------------------------ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
}
.tile .icon-badge { width: 2.6rem; height: 2.6rem; margin-bottom: .9rem; border-radius: 10px; }
.tile .icon-badge .icon { width: 1.25rem; height: 1.25rem; }
.tile h2,
.tile h3,
.tile h4 { font-size: var(--step-0); margin: 1rem 0 .35rem; color: var(--ink); }
.tile h4:first-of-type { margin-top: 0; }
.tile p { font-size: .96rem; color: var(--ink-500); margin: 0 0 .4rem; }
.tile p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   25. Reveal animation
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .nav-backdrop, .cta-band, .footer__main { display: none; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --------------------------------------------------------------------------
   V2 — contact split panel and card depth
   Scoped to body.v2 so V1's approved look is untouched.
   -------------------------------------------------------------------------- */

/* Contact: their details beside the form, so the fields have context ------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}
@media (min-width: 60rem) {
  .contact-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

.contact-split__aside {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(150deg, #7C0126 0%, var(--crimson) 45%, #58001B 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* A soft highlight stops the panel reading as one flat rectangle. */
.contact-split__aside::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
  pointer-events: none;
}
.contact-split__aside > * { position: relative; z-index: 1; }

.contact-split__lede {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255, 255, 255, .96);
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* border:0 clears the list rule inherited from the prose styles, which drew a
   pale hairline across the crimson panel. */
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; padding: 0; border: 0; }
.contact-list__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.contact-list__icon .icon { width: 1.05rem; height: 1.05rem; color: var(--bronze-400); }
.contact-list__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact-list__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze-400);
}
.contact-list__value { font-size: 1rem; line-height: 1.5; color: #fff; }
.contact-list__value a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.contact-list__value a:hover { border-bottom-color: #fff; }

.contact-split__form { padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--paper); }
.contact-split__form .field:last-of-type { margin-bottom: 0; }
.contact-split__form .form-actions { margin-top: 1.75rem; }
.contact-split__form .form-actions .btn { width: 100%; justify-content: center; }
@media (min-width: 40rem) {
  .contact-split__form .form-actions .btn { width: auto; }
}

/* A field the reader is in should be unmistakable. */
body.v2 .field input:focus,
body.v2 .field textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 4px rgba(154, 1, 48, .12);
}
body.v2 .field input:hover:not(:focus),
body.v2 .field textarea:hover:not(:focus) { border-color: #CFC4BA; }

/* Card depth ------------------------------------------------------------- */
/* One lift, one easing, one shadow ramp — applied to every card so the whole
   variant reads as the same surface treatment rather than per-component tweaks. */
body.v2 .course-listing,
body.v2 .sector-card,
body.v2 .team-card,
body.v2 .tile,
body.v2 .quote-card,
body.v2 .check-grid li {
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
  will-change: transform;
}
body.v2 .course-listing,
body.v2 .team-card,
body.v2 .tile,
body.v2 .check-grid li { box-shadow: var(--shadow-sm); }

body.v2 .course-listing:hover,
body.v2 .team-card:hover,
body.v2 .tile:hover,
body.v2 .quote-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-soft);
}
body.v2 .check-grid li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-soft);
}
body.v2 .sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  body.v2 .course-listing,
  body.v2 .sector-card,
  body.v2 .team-card,
  body.v2 .tile,
  body.v2 .quote-card,
  body.v2 .check-grid li { transition: none; }
  body.v2 .course-listing:hover,
  body.v2 .sector-card:hover,
  body.v2 .team-card:hover,
  body.v2 .tile:hover,
  body.v2 .quote-card:hover,
  body.v2 .check-grid li:hover { transform: none; }
}

/* Course listing as a card ------------------------------------------------ */
body.v2 .course-listing {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding-top: clamp(1.5rem, 3vw, 1.9rem);
}
/* A crimson edge that fills in on hover, so the card responds as one object. */
body.v2 .course-listing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--bronze));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
body.v2 .course-listing:hover::before,
body.v2 .course-listing:focus-within::before { transform: scaleX(1); }

/* The rule sits above the actions rather than under the price: the action row
   is pinned to the bottom of every card, so the rules line up across a row
   even when the cards carry different amounts of copy. */
body.v2 .course-listing__actions {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
body.v2 .course-listing .btn--primary { box-shadow: 0 2px 10px rgba(154, 1, 48, .22); }
body.v2 .course-listing:hover .btn--primary { box-shadow: 0 6px 18px rgba(154, 1, 48, .3); }

/* Course picker (V2 /training/) ------------------------------------------- */
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { text-align: center; max-width: 46rem; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.course-picker__title { font-size: var(--step-3); margin: 0; text-transform: none; }

.course-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 48rem) { .course-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .course-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.course-tile {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.course-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-soft); }
.course-tile:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

.course-tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-200); }
.course-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.course-tile:hover .course-tile__media img { transform: scale(1.05); }

.course-tile__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.course-tile__badge {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--sand-200);
  color: var(--muted);
}
.course-tile__badge--nrt { background: rgba(154, 1, 48, .09); color: var(--crimson); }
.course-tile__body h3 { font-size: var(--step-1); margin: 0; }
.course-tile__body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-500);
  /* keep every card's lead-in the same depth so the footers line up */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.course-tile__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--crimson); }

/* Credibility strip. Replace .nrt-mark's contents with the licensed artwork. */
.nrt-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.nrt-mark {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.nrt-mark--placeholder { border-style: dashed; }
.nrt-mark__text {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
}

/* Testimonial wall (V2) ---------------------------------------------------- */
/* Two rows travelling in opposite directions. Each row's cards are printed
   twice and the track is translated by exactly half its width, so the loop
   restarts on an identical frame and never visibly jumps. */
.quote-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* held inside the panel, not bled to the viewport edges */
  width: 100%;
  padding-block: .25rem;
  overflow: hidden;
  /* Fade the ends so cards enter and leave rather than being cut off. A fixed
     distance, not a percentage: at 8% a narrow panel only gets ~27px of fade
     and the cards read as hard-cropped. */
  --wall-fade: clamp(48px, 8%, 120px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wall-fade), #000 calc(100% - var(--wall-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--wall-fade), #000 calc(100% - var(--wall-fade)), transparent);
}
.quote-wall__row { display: flex; width: max-content; }
.quote-wall__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  animation: quote-wall-ltr 64s linear infinite;
}
.quote-wall__row--rtl .quote-wall__track { animation-name: quote-wall-rtl; }

@keyframes quote-wall-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes quote-wall-rtl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.quote-wall:hover .quote-wall__track,
.quote-wall:focus-within .quote-wall__track { animation-play-state: paused; }

.quote-wall .quote-card {
  flex: 0 0 auto;
  width: min(22rem, 78vw);
  display: flex;
  flex-direction: column;
}

/* Static fallback for pages with only a few testimonials. */
.quote-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 48rem) {
  .quote-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}
.quote-grid--single { max-width: 42rem; margin-inline: auto; }

/* Clamp the body so every card is the same shape; the full text is in the
   dialog, so the ellipsis never costs the reader anything. */
.quote-card { position: relative; }
.quote-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote-card__text p { margin-bottom: .6em; }
.quote-card cite { margin-top: auto; }

/* The whole card is the hit area, but it stays a real button for keyboard
   and screen-reader users. */
.quote-card__open {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.quote-card__open:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.quote-card:hover { border-left-color: var(--crimson); }

@media (prefers-reduced-motion: reduce) {
  .quote-wall__track { animation: none; }
  .quote-wall {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Testimonial dialog ------------------------------------------------------- */
/* The mark and the credit are direct children of __inner, which carries no
   padding of its own (the bio layout pads its head and body instead). */
.quote-dialog__mark { padding-inline: clamp(1.5rem, 3vw, 2rem); }

.quote-dialog .bio-dialog__body {
  max-height: min(58vh, 34rem);
  overflow-y: auto;
  padding-top: .25rem;
}
.quote-dialog__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--bronze);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.quote-dialog .bio-dialog__body p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
}
.quote-dialog__cite {
  display: block;
  padding-top: 1rem;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-soft);
  margin-inline: clamp(1.5rem, 3vw, 2rem);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-500);
}

/* News (V2) --------------------------------------------------------------- */
.news-head {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.news-head__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.news-head__chip {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-500);
  margin-bottom: 1.25rem;
}
.news-head h1 { font-size: var(--step-4); margin-bottom: .5em; }
.news-head .lede { color: var(--ink-500); margin-inline: auto; max-width: 40rem; }

.news-search {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  max-width: 34rem;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
}
.news-search__icon {
  position: absolute;
  margin: .85rem 0 0 .9rem;
  pointer-events: none;
  color: var(--muted);
}
.news-search__icon .icon { width: 1.05rem; height: 1.05rem; }
.news-search input {
  flex: 1;
  min-width: 0;
  padding: .8rem 1rem .8rem 2.6rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.news-search input:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 4px rgba(154, 1, 48, .12);
}
.news-search .btn { flex: none; }

.news-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 64rem) {
  .news-layout { grid-template-columns: minmax(0, 1fr) 19rem; }
}

.news-main__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.news-main__head h2 { font-size: var(--step-2); margin: 0; white-space: nowrap; }
.news-main__rule { flex: 1; height: 1px; background: var(--line); }

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 40rem) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 84rem) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-soft); }
.post-tile__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-tile__link:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

.post-tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-200); }
.post-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-tile:hover .post-tile__media img { transform: scale(1.05); }
.post-tile__chip {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.post-tile__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: clamp(1.1rem, 2.2vw, 1.45rem); }
.post-tile__body h3 { font-size: var(--step-1); margin: 0; }
.post-tile__body p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-tile__body .link-arrow { margin-top: auto; padding-top: .75rem; font-size: .9rem; }

.news-empty { margin-top: 1.5rem; color: var(--muted); }

.news-side { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.news-side__block {
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.news-side__title { font-size: var(--step-1); margin: 0 0 .9rem; }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-list li { margin: 0; padding: 0; border: 0; }
.topic-chip {
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sand);
  font: inherit;
  font-size: .8rem;
  color: var(--ink-500);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.topic-chip:hover { border-color: var(--crimson); color: var(--crimson); }
.topic-chip[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); color: #fff; }

.callout--side { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.callout--side p { font-size: .92rem; color: var(--ink-500); }
.callout--side .btn { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   V2 depth layer — cursor glow, grain, light-catching card edges
   -------------------------------------------------------------------------- */

/* Cursor glow. `screen` means it lifts the dark bands and leaves the white and
   sand sections alone, instead of graying them over. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .5s var(--ease);
  mix-blend-mode: screen;
  /* Deliberately faint and wide: the dark areas should feel alive without the
     reader noticing a light following the cursor. */
  background: radial-gradient(
    circle closest-side,
    rgba(178, 22, 66, .13),
    rgba(154, 1, 48, .06) 38%,
    rgba(88, 0, 27, 0) 78%
  );
  filter: blur(48px);
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* Grain. One tiled turbulence tile, so the dark areas read as a printed
   surface rather than a flat fill. */
body.v2 .hero__media::after,
body.v2 .page-head__bg::after,
body.v2 .section--dark::after,
body.v2 .cta-band::after,
body.v2 .contact-split__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* Keep the content above its own grain. Only the layout container is lifted —
   an earlier version targeted every child, which turned the absolutely
   positioned .hero__media into an in-flow block and broke the hero image. */
body.v2 .cta-band > .container,
body.v2 .section--dark > .container { position: relative; z-index: 2; }

/* Light-catching edge: a one-pixel gradient ring, bright at the top-left and
   fading to nothing at the bottom-right, as if lit from above. */
body.v2 .course-listing,
body.v2 .course-tile,
body.v2 .post-tile,
body.v2 .team-card,
body.v2 .tile,
body.v2 .news-side__block,
body.v2 .quote-card { position: relative; }

body.v2 .course-listing::after,
body.v2 .course-tile::after,
body.v2 .post-tile::after,
body.v2 .team-card::after,
body.v2 .tile::after,
body.v2 .news-side__block::after,
body.v2 .quote-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 42%, rgba(27, 20, 22, .07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

/* The breadcrumb is coloured for a dark banner. The news header is light, so
   it needs the ink palette or the trail sits at ~1:1 against the sand. */
.news-head .breadcrumbs li,
.news-head .breadcrumbs .sep { color: var(--muted); }
.news-head .breadcrumbs a { color: var(--ink-500); }
.news-head .breadcrumbs a:hover { color: var(--crimson); }
.news-head .breadcrumbs [aria-current="page"] { color: var(--crimson); }

/* Testimonial band and panel (V2) ------------------------------------------ */
.quote-band {
  position: relative;
  background: linear-gradient(150deg, #7C0126 0%, var(--crimson) 48%, #58001B 100%);
  overflow: hidden;
}
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.quote-band > .container { position: relative; z-index: 2; }

.quote-panel {
  background: var(--paper);
  border-radius: clamp(var(--radius-lg), 2.5vw, 28px);
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 30px 70px rgba(40, 0, 12, .28);
  overflow: hidden;
}
.quote-panel__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.quote-panel__title {
  font-size: var(--step-3);
  margin: 0 0 .35em;
}
.quote-panel__subtitle {
  margin: 0 auto;
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-500);
}
/* Static quotes get the panel's own padding; the sliding rows keep their
   full width so cards can travel to the panel edge and fade there. */
.quote-panel .quote-grid { padding-inline: clamp(1.25rem, 3vw, 2.5rem); }

/* Testimonials on small screens ------------------------------------------- */
/* Two auto-scrolling rows are unreadable on a phone: cards are clipped on both
   sides and the motion fights the reader. Below this width it becomes a single
   row the reader swipes themselves, with the mirrored copies removed so no
   testimonial appears twice. */
@media (max-width: 47.99rem) {
  .quote-wall {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* no fade: the reader controls the position, so a soft edge just hides
       where the strip actually ends */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .quote-wall::-webkit-scrollbar { display: none; }

  /* flatten the rows and tracks so the cards become the scroller's own items */
  .quote-wall__row { display: contents; }
  .quote-wall__track { display: contents; animation: none; }
  .quote-wall__track[aria-hidden="true"] { display: none; }

  .quote-wall .quote-card {
    /* narrow enough that the next card peeks in — without that edge there is
       nothing telling the reader the strip scrolls at all */
    width: min(19rem, 76vw);
    /* start, not center: the cards keep a consistent left edge and the next one
       always shows at the right, so the peek is a reliable cue */
    scroll-snap-align: start;
  }
  /* the panel clips the scroller otherwise, so let it run to the panel edge */
  .quote-panel { padding-inline: 0; }
}


/* --------------------------------------------------------------------------
   V2 client feedback — sans headings, shaded tiles, client marquee
   -------------------------------------------------------------------------- */

/* Headings move off the serif. Inter is already loaded for body copy, so this
   costs no extra download and renders identically on every platform (Segoe UI
   is a Windows-only face and would silently differ on Mac, iOS and Android). */
body.v2 {
  --font-display: var(--font-sans);
}
body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4 {
  font-weight: 600;
  letter-spacing: -0.021em;   /* sans needs slightly tighter tracking than the serif did */
}

/* Light shading on the floating tiles, so they read as raised surfaces rather
   than outlines. */
body.v2 .check-grid li {
  background: linear-gradient(168deg, #fff 0%, var(--sand) 100%);
  box-shadow: var(--shadow-sm);
}
body.v2 .check-grid li:hover {
  background: linear-gradient(168deg, #fff 0%, var(--sand-200) 100%);
}
body.v2 .section--sand .check-grid li {
  background: linear-gradient(168deg, #fff 0%, #FBF8F4 100%);
}

/* Hero: one photo per slide, cross-fading with the copy ------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__bg.is-active { opacity: 1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }

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

/* Client banner: a continuous strip rather than a fixed row --------------- */
.clients__marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  /* soften both ends so logos enter and leave rather than being clipped */
  --clients-fade: clamp(40px, 6%, 120px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--clients-fade), #000 calc(100% - var(--clients-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--clients-fade), #000 calc(100% - var(--clients-fade)), transparent);
}
.clients__inner { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

.clients__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 7vw, 5.5rem);
  padding-right: clamp(2rem, 7vw, 5.5rem);
  list-style: none;
  margin: 0;
  padding-left: 0;
  /* travels left to right, so the logos advance the way the client described */
  animation: clients-scroll 38s linear infinite reverse;
}
.clients__track li { margin: 0; padding: 0; border: 0; flex: none; }
.clients__track img {
  /* Every asset shares a 120px-tall 2x canvas with the mark scaled inside it,
     so rendering them all at one CSS height keeps them optically balanced. */
  height: clamp(56px, 7vw, 84px);
  width: auto;
  opacity: .9;
  transition: opacity .3s var(--ease);
}
.clients__track img:hover { opacity: 1; }

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.clients__marquee:hover .clients__track,
.clients__marquee:focus-within .clients__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
  .clients__marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}