/* ==========================================================================
   CADD Centre Gurugram — Design System
   Implements Document 1, Section 6. Swiss Modernism 2.0.
   Token-driven: no raw hex or raw pixel spacing below the :root block.
   ========================================================================== */

:root {
  /* --- Colour (Doc 1, 6.2) --------------------------------------------- */
  --c-bg:            #FFFFFF;
  --c-bg-warm:       #FAFAF9;
  --c-bg-inverse:    #141414;
  --c-ink:           #141414;
  --c-ink-2:         #4A4A4A;
  --c-ink-muted:     #5F5F5F;
  --c-accent:        #D42027;
  --c-accent-hover:  #B01A20;
  --c-border:        #E5E5E3;
  --c-technical:     #6E6E6E;
  --c-success:       #1B7F4D;
  --c-error:         #C42B1C;
  --c-on-inverse:    #FFFFFF;
  --c-on-inverse-2:  #D0D0D0;

  /* --- Type ------------------------------------------------------------ */
  --f-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Technical labels use Lato too, differentiated by tracking and case
     rather than by a second family. Lato has no 500/600 weight. */
  --f-mono: "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-hero:     clamp(2.5rem, 1.2rem + 5.6vw, 5.5rem);
  --t-display:  clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --t-h1:       clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  --t-h2:       clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --t-h3:       clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-body-lg:  clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --t-body:     clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --t-small:    1rem;
  --t-label:    0.8125rem;   /* uppercase + wide tracking */

  /* --- Space (8px base, Doc 1, 6.4) ------------------------------------ */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-6: 48px;  --s-8: 64px;  --s-12: 96px; --s-16: 128px;

  /* --- Radius & elevation (reference-layout direction) ----------------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(20,20,20,.05), 0 2px 8px rgba(20,20,20,.05);
  --sh-2: 0 2px 6px rgba(20,20,20,.06), 0 12px 28px -12px rgba(20,20,20,.14);
  --sh-3: 0 8px 20px -6px rgba(20,20,20,.12), 0 28px 56px -20px rgba(20,20,20,.22);

  /* How far the statistics card is pulled up over the hero. The hero reserves
     exactly this much extra bottom padding, so the card can never cover hero
     content no matter how short the viewport gets. */
  --statbar-overlap: 64px;

  /* Sticky-header geometry. The subnav on programme pages parks directly under
     the header, so it has to know how tall the header actually is — including
     the Home/Back strip. Kept here so the two can never drift apart. */
  --header-h:  76px;
  --pagebar-h: 41px;   /* 40px row + 1px top border */

  --container: 1320px;
  /* The four chrome bars carry a ten-item nav, a logo lockup and a CTA. At
     --container they fight for about 1160px and end up touching each other,
     so they get a wider track of their own. Page content stays at
     --container; only the chrome runs wider. */
  --container-chrome: 1720px;
  --gutter: 24px;
  --margin: 80px;

  /* --- Motion (Doc 1, 6.7) --------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 160ms;
  --d-base: 250ms;
  --d-slow: 360ms;
}

@media (max-width: 1023px) { :root { --margin: 48px; --gutter: 20px; } }
@media (max-width: 767px)  { :root { --margin: 20px; --gutter: 16px; } }

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-optical-sizing: auto;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: optimizeLegibility;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0 0 var(--s-2); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

/* Focus — never removed (Doc 1, 5.5) */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 999;
  background: var(--c-ink); color: #fff; padding: var(--s-2) var(--s-3);
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  transition: top var(--d-fast);
}
.skip-link:focus { top: var(--s-2); }

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

/* ==========================================================================
   Layout
   ========================================================================== */

/* The hidden attribute has to beat any component that sets its own display.
   Without this a rule like `.grr__nav { display: flex }` silently overrides
   `hidden`, and JavaScript that hides a control leaves it on screen looking
   clickable but doing nothing — which is exactly what happened to the review
   carousel arrows. Several components had each patched this for themselves;
   one rule covers the lot. */
[hidden] { display: none !important; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); }
.ribbon > .wrap,
.utility > .wrap,
.header > .wrap,
.newsbar > .wrap { max-width: var(--container-chrome); }
/* Below the chrome track the wrap is viewport-width, so the side padding is
   what the nav is competing with. Give half of it back exactly where the bar
   starts to run out of room. */
/* Desktop only: below 1024 the page margin is already 48px and then 20px,
   and overriding it to 40 here would squeeze the phone layout instead. */
@media (min-width: 1024px) and (max-width: 1520px) {
  .ribbon > .wrap,
  .utility > .wrap,
  .header > .wrap,
  .newsbar > .wrap { padding-inline: 40px; }
}

.section { padding-block: var(--s-12); position: relative; }
.section--tight { padding-block: var(--s-8); }
.section--warm { background: var(--c-bg-warm); }
.section--inverse { background: var(--c-bg-inverse); color: var(--c-on-inverse); }
.section--inverse p { color: var(--c-on-inverse-2); }
.section--rule { border-top: 1px solid var(--c-border); }
@media (max-width: 767px) { .section { padding-block: var(--s-8); } }

.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: var(--s-2); }
.measure { max-width: 68ch; }

/* ==========================================================================
   Typography components
   ========================================================================== */

.t-hero {
  font-size: var(--t-hero); font-weight: 900;
  letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase;
}
.t-display { font-size: var(--t-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
.t-lead { font-size: var(--t-body-lg); line-height: 1.55; color: var(--c-ink-2); }
.t-small { font-size: var(--t-small); }
.t-muted { color: var(--c-ink-muted); }

/* The mono utility label — the engineering signal (Doc 1, 6.3) */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--c-ink-muted);
  font-weight: 400;
}
.label--accent { color: var(--c-accent); }
.section--inverse .label { color: var(--c-on-inverse-2); }

/* Section marker: numbered only where content is genuinely a sequence */
.marker {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.marker::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border);
}
.section--inverse .marker::after { background: #333; }

/* ==========================================================================
   Signature: dimension marks (Doc 1, 6.1)
   A drafting annotation used as the divider + statistic system.
   ========================================================================== */

.dim {
  position: relative;
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.dim::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--c-technical);
  opacity: 0.4;
}
.dim::after {
  content: "";
  position: absolute; top: -4px; left: 0; width: 1px; height: 9px;
  background: var(--c-technical); opacity: 0.6;
}

.stat { border-top: 1px solid var(--c-border); padding-top: var(--s-2); }
.stat__n {
  font-family: var(--f-mono); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1;
  letter-spacing: -0.02em; display: block;
}
.stat__l { margin-top: var(--s-1); }
.section--inverse .stat { border-color: #333; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 48px; padding: 0 var(--s-3);
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 0;
  transition: background var(--d-fast) ease-out, color var(--d-fast) ease-out,
              border-color var(--d-fast) ease-out, transform var(--d-fast) ease-out;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.btn--accentline { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.btn--accentline:hover { background: var(--c-accent); color: #fff; }
.btn--ghost:hover { border-color: var(--c-ink); }

.section--inverse .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.5); }
.section--inverse .btn--secondary:hover { background: #fff; color: var(--c-ink); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn--wide { width: 100%; }

/* Arrow link */
.alink {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-small); font-weight: 700; text-decoration: none;
  color: var(--c-ink); border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
  transition: gap var(--d-fast) ease-out;
}
.alink:hover { gap: 14px; }
.alink svg { width: 14px; height: 14px; }
.section--inverse .alink { color: #fff; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.utility {
  background: var(--c-bg-inverse); color: var(--c-on-inverse-2);
  font-family: var(--f-mono); font-size: var(--t-label);
}
.utility__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 38px; }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: #fff; }
.utility__group { display: flex; gap: var(--s-3); align-items: center; }
@media (max-width: 900px) { .utility__hide { display: none; } }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--header-h); flex-wrap: nowrap; }
.nav { flex: 1 1 auto; justify-content: center; min-width: 0; }

.logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1439px) { .logo__sub { display: none; } }
.logo__mark { font-weight: 900; font-size: 1.125rem; letter-spacing: -0.03em; }
.logo__mark span { color: var(--c-accent); }
.logo__sub { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-ink-muted); }
.logo__img { display: block; height: 38px; width: auto; }
@media (max-width: 900px) { .logo__img { height: 30px; } }

/* The header lockup is split so the CADD Centre mark can be set larger than
   the two campaign badges beside it. Sized so the pair still occupies the same
   ~228px the single strip did — the nav next to it has no width to spare — while
   the mark itself goes from 38px to 50px tall. */
/* baseline alignment on .logo would hang the badges off the bottom of the
   mark; they belong centred against it. */
.header .logo { align-items: center; gap: 12px; }
.logo__cadd  { display: block; height: 50px; width: auto; }
.logo__india { display: block; height: 30px; width: auto; }
@media (max-width: 900px) {
  .logo__cadd  { height: 40px; }
  .logo__india { height: 24px; }
}
@media (max-width: 420px) { .logo__india { display: none; } }

.nav { display: flex; align-items: center; gap: 0; }
@media (max-width: 1337px) { .nav { display: none; } }

.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  /* The header sits inside .wrap, which caps at --container and never gets
     wider than about 1160px of usable space however large the monitor is. So
     the nav gains nothing from roomier sizing on a big screen — it only runs
     out of room. The chrome now runs to --container-chrome rather than
     --container, which is what buys ten items their original spacing back. */
  padding: 10px 6px; font-size: 0.8125rem; font-weight: 700;
  white-space: nowrap;            /* never wrap a nav label */
  text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color var(--d-fast);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--c-accent); }
.nav__link[aria-current="page"] { color: var(--c-accent); }
.nav__chev { width: 9px; height: 9px; transition: transform var(--d-fast); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.header__cta { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 1337px) { .header__cta .btn { display: none; } }

/* Home / Back strip — lives inside the sticky header, so both controls stay
   reachable at every scroll position and at every width (unlike .nav, which
   collapses into the drawer below 1338px). Hidden on the home page. */
.pagebar { border-top: 1px solid var(--c-border); background: var(--c-bg-warm); }
.pagebar__inner { display: flex; align-items: center; gap: var(--s-1); min-height: calc(var(--pagebar-h) - 1px); }
.pagebar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin-left: -12px;
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--c-ink-2); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color var(--d-fast);
}
.pagebar__btn + .pagebar__btn {
  margin-left: 0;
  border-left: 1px solid var(--c-border);
}
.pagebar__btn:hover { color: var(--c-accent); }
.pagebar__ico { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 767px) { .pagebar__btn { padding: 7px 10px; } }

/* Mega menu — opens on click, not hover (Doc 1, 3.4) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--c-border);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.18);
  display: none;
}
.mega[data-open="true"] { display: block; }
.mega__inner { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-8); padding-block: var(--s-6); }
.mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); }
.mega__link {
  display: block; text-decoration: none; padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  transition: padding-left var(--d-fast) ease-out;
}
.mega__link:hover { padding-left: 8px; color: var(--c-accent); }
.mega__link strong { display: block; font-size: 1rem; font-weight: 700; }
.mega__link span { font-size: var(--t-small); color: var(--c-ink-muted); }
.mega__feature { background: var(--c-bg-warm); padding: var(--s-3); }

/* Burger */
.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--c-border); cursor: pointer;
}
@media (max-width: 1337px) { .burger { display: inline-flex; } }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--c-ink); position: relative; transition: background var(--d-fast); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--c-ink);
  transition: transform var(--d-base) var(--e-out);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200; background: #fff;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--d-base) var(--e-out), visibility 0s linear var(--d-base);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer[data-open="true"] {
  transform: translateX(0); visibility: visible;
  transition: transform var(--d-base) var(--e-out), visibility 0s;
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) var(--margin); border-bottom: 1px solid var(--c-border); min-height: 76px; }
.drawer__body { padding: var(--s-3) var(--margin) var(--s-16); }
.acc__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0; background: none; border: 0; border-bottom: 1px solid var(--c-border);
  font-size: 1.0625rem; font-weight: 700; text-align: left; cursor: pointer; min-height: 52px;
}
.acc__trigger .plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.acc__trigger .plus::before, .acc__trigger .plus::after {
  content: ""; position: absolute; background: var(--c-accent); transition: transform var(--d-base) var(--e-out);
}
.acc__trigger .plus::before { top: 5.5px; left: 0; width: 12px; height: 1.5px; }
.acc__trigger .plus::after  { left: 5.5px; top: 0; width: 1.5px; height: 12px; }
.acc__trigger[aria-expanded="true"] .plus::after { transform: rotate(90deg); }
.acc__panel { display: none; padding: var(--s-2) 0 var(--s-3); }
.acc__panel[data-open="true"] { display: block; }
.acc__panel a { display: block; padding: 9px 0; text-decoration: none; font-size: 1rem; color: var(--c-ink-2); }
.acc__panel a:hover { color: var(--c-accent); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; background: var(--c-bg-inverse); color: #fff;
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; opacity: 0.34; }
.hero__media svg { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,20,20,0.94) 0%, rgba(20,20,20,0.72) 48%, rgba(20,20,20,0.42) 100%);
}
.hero__inner { padding-block: clamp(var(--s-8), 9vw, 160px); position: relative; }
.hero__body { max-width: 62ch; }
.hero__kicker { margin-bottom: var(--s-3); color: var(--c-on-inverse-2); }
.hero h1 { margin-bottom: var(--s-3); }
.hero h1 em { font-style: normal; color: var(--c-accent); }
.hero__sub { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.04em; color: var(--c-on-inverse-2); margin-bottom: var(--s-2); }
.hero__lead { font-size: var(--t-body-lg); color: #E8E8E8; max-width: 54ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Registration crosshair — drafting motif at grid intersections */
.crosshair { position: absolute; width: 22px; height: 22px; opacity: 0.5; pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--c-accent); }
.crosshair::before { left: 0; top: 10.5px; width: 22px; height: 1px; }
.crosshair::after  { top: 0; left: 10.5px; width: 1px; height: 22px; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: #fff; border: 1px solid var(--c-border);
  display: flex; flex-direction: column; text-decoration: none;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.card:hover { border-color: var(--c-ink); transform: translateY(-3px); }
.card__media { position: relative; height: 0; padding-bottom: 75%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-warm); border-bottom: 1px solid var(--c-border); }
.card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.card__roles { margin-top: auto; padding-top: var(--s-2); }

/* SIGNATURE — wireframe to rendered (Doc 1, 6.7) */
.wf { position: absolute; inset: 0; }
.wf__line, .wf__solid { position: absolute; inset: 0; transition: opacity var(--d-slow) var(--e-out); }
.wf__solid { opacity: 0; }
.card:hover .wf__line, .card:focus-within .wf__line { opacity: 0; }
.card:hover .wf__solid, .card:focus-within .wf__solid { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wf__line { opacity: 0; } .wf__solid { opacity: 1; }
  .wf__line, .wf__solid { transition: none; }
}
.wf__badge {
  position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 2;
  background: rgba(255,255,255,0.9); padding: 3px 8px;
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.card:hover .wf__badge::after { content: " → rendered"; color: var(--c-accent); }

/* Audience selector */
.aud {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3); border: 1px solid var(--c-border); background: #fff;
  text-decoration: none; min-height: 172px;
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.aud:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.aud:hover .t-muted, .aud:hover .label { color: var(--c-on-inverse-2); }
.aud__n { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-accent); }
.aud strong { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.aud__go { margin-top: auto; font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; }

/* Process / narrative spine */
.spine { display: grid; gap: 0; }
.spine__item { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid #333; }
.spine__item:last-child { border-bottom: 1px solid #333; }
.spine__n { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-accent); letter-spacing: 0.1em; padding-top: 5px; }
@media (max-width: 767px) { .spine__item { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Outcome / story card */
.story { border: 1px solid var(--c-border); padding: var(--s-3); background: #fff; }
.story__row { display: flex; justify-content: space-between; gap: var(--s-2); padding: 9px 0; border-bottom: 1px dotted var(--c-border); font-size: var(--t-small); }
.story__row:last-of-type { border-bottom: 0; }
.story__row dt { color: var(--c-ink-muted); font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; }
.story__row dd { margin: 0; font-weight: 700; text-align: right; }

/* Trainer */
.trainer { border: 1px solid var(--c-border); background: #fff; }
.trainer__img { height: 0; padding-bottom: 100%; aspect-ratio: 1; background: var(--c-bg-warm); border-bottom: 1px solid var(--c-border); }
.trainer__body { padding: var(--s-3); }

/* Review */
.review { border: 1px solid var(--c-border); padding: var(--s-3); background: #fff; display: flex; flex-direction: column; gap: var(--s-2); }
.stars { color: var(--c-accent); letter-spacing: 3px; font-size: 0.9375rem; }

/* Pillars */
.pillar { padding: var(--s-3); border-top: 2px solid var(--c-accent); background: var(--c-bg-warm); }

/* Photo-wall placeholder tiles */
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
@media (max-width: 1023px) { .wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .wall { grid-template-columns: repeat(2, 1fr); } }
.wall__tile { height: 0; padding-bottom: 100%; aspect-ratio: 1; background: var(--c-bg-warm); border: 1px solid var(--c-border); position: relative; overflow: hidden; }
.wall__tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font-family: var(--f-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(255,255,255,0.92); color: var(--c-ink-2);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.field label { font-size: var(--t-small); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: 13px var(--s-2);
  border: 1px solid var(--c-border); background: #fff; color: var(--c-ink);
  border-radius: 0; min-height: 48px; width: 100%;
  transition: border-color var(--d-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-ink); }
.field__help { font-size: var(--t-small); color: var(--c-ink-muted); }
.field__err { font-size: var(--t-small); color: var(--c-error); font-weight: 700; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: var(--c-error); }
.field[data-invalid="true"] .field__err { display: block; }

/* Choice chips — the multi-step question UI */
.choices { display: grid; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: var(--s-2); min-height: 60px;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); background: #fff;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.choice span::before {
  content: ""; width: 18px; height: 18px; border: 1.5px solid var(--c-border);
  border-radius: 50%; flex-shrink: 0; transition: border-width var(--d-fast), border-color var(--d-fast);
}
.choice input:checked + span { border-color: var(--c-ink); background: var(--c-bg-warm); }
.choice input:checked + span::before { border-color: var(--c-accent); border-width: 6px; }
.choice input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.choice span:hover { border-color: var(--c-ink); }

/* Step indicator */
.steps { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.steps__bar { flex: 1; height: 2px; background: var(--c-border); position: relative; overflow: hidden; }
.steps__fill { position: absolute; inset: 0 auto 0 0; background: var(--c-accent); transition: width var(--d-base) var(--e-out); }

.panel { display: none; }
.panel[data-active="true"] { display: block; animation: fade var(--d-base) var(--e-out); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel[data-active="true"] { animation: none; } }

.formcard { border: 1px solid var(--c-border); background: #fff; padding: var(--s-4); max-width: 620px; }
@media (max-width: 767px) { .formcard { padding: var(--s-3); } }

/* Result / reward screen */
.result { border: 1px solid var(--c-ink); background: #fff; }
.result__head { background: var(--c-ink); color: #fff; padding: var(--s-3) var(--s-4); }
.result__body { padding: var(--s-4); }
@media (max-width: 767px) { .result__body, .result__head { padding: var(--s-3); } }

.roadmap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.roadmap__step {
  font-family: var(--f-mono); font-size: var(--t-label); padding: 7px 11px;
  border: 1px solid var(--c-border); background: var(--c-bg-warm); white-space: nowrap;
}
.roadmap__arrow { color: var(--c-accent); font-size: 0.9375rem; }

/* Scheduler */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }

/* ==========================================================================
   Filters, tags, accordions, tables
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.chip {
  padding: 9px 15px; border: 1px solid var(--c-border); background: #fff;
  font-size: var(--t-small); font-weight: 700; cursor: pointer; min-height: 42px;
  transition: all var(--d-fast);
}
.chip:hover { border-color: var(--c-ink); }
.chip[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.tag {
  display: inline-block; font-family: var(--f-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; background: var(--c-bg-warm); border: 1px solid var(--c-border); color: var(--c-ink-2);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.acc2 { border-top: 1px solid var(--c-border); }
.acc2__t {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: var(--s-3) 0; background: none; border: 0; border-bottom: 1px solid var(--c-border);
  text-align: left; cursor: pointer; font-weight: 700; font-size: 1.0625rem; min-height: 60px;
}
.acc2__t:hover { color: var(--c-accent); }
.acc2__p { display: none; padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--c-border); }
.acc2__p[data-open="true"] { display: block; }
.acc2__p ul { margin: 0; padding-left: 1.1rem; color: var(--c-ink-2); }
.acc2__p li { margin-bottom: 6px; }

.factbar { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c-border); background: #fff; }
.factbar > div { padding: var(--s-3); border-right: 1px solid var(--c-border); }
.factbar > div:last-child { border-right: 0; }
@media (max-width: 767px) {
  .factbar { grid-template-columns: repeat(2, 1fr); }
  .factbar > div:nth-child(2n) { border-right: 0; }
  .factbar > div:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
}

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tbl th, .tbl td { text-align: left; padding: 13px var(--s-2); border-bottom: 1px solid var(--c-border); }
.tbl th { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); font-weight: 400; }
@media (max-width: 767px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border: 1px solid var(--c-border); margin-bottom: var(--s-2); padding: var(--s-1); }
  .tbl td { border: 0; padding: 7px var(--s-1); display: flex; justify-content: space-between; gap: var(--s-2); }
  .tbl td::before { content: attr(data-l); font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--c-ink-muted); }
}

.note {
  border-left: 3px solid var(--c-accent); background: var(--c-bg-warm);
  padding: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--c-ink-2);
}

/* ==========================================================================
   Floating advisor + mobile action bar
   ========================================================================== */

.advisor { position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 90; }
@media (max-width: 767px) { .advisor { display: none; } }
.advisor__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-ink); color: #fff; border: 0; cursor: pointer;
  padding: 13px var(--s-3); font-size: var(--t-small); font-weight: 700;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.45);
}
.advisor__btn:hover { background: var(--c-accent); }
.advisor__dot { width: 7px; height: 7px; border-radius: 50%; background: #35C46A; }
.advisor__panel {
  display: none; position: absolute; right: 0; bottom: calc(100% + 10px); width: 288px;
  background: #fff; border: 1px solid var(--c-ink); padding: var(--s-3);
  box-shadow: 0 20px 48px -20px rgba(0,0,0,0.3);
}
.advisor__panel[data-open="true"] { display: block; }

.bottombar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  border-top: 1px solid var(--c-border); background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
}
@media (max-width: 767px) { .bottombar { display: grid; grid-template-columns: 1fr 1fr; } body { padding-bottom: 62px; } }
.bottombar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; text-decoration: none; font-size: var(--t-small); font-weight: 700;
}
.bottombar a + a { border-left: 1px solid var(--c-border); }
.bottombar .is-accent { color: #fff; background: var(--c-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--c-bg-inverse); color: var(--c-on-inverse-2); padding-block: var(--s-8) var(--s-4); }
.footer a { color: var(--c-on-inverse-2); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer h4 { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: var(--s-2); font-weight: 400; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; font-size: var(--t-small); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--s-6); }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
@media (max-width: 600px)  { .footer__grid { grid-template-columns: 1fr; } }
/* The footer's second row: "Visit the centre" (address, hours, CTA) falls in
   column 1, and "Contact" (phones, email) is pinned to the last column, so the
   row reads address on the left, contact on the right.
   Scoped to the four-column range — at narrower widths the grid is two or one
   column and an explicit column 4 would invent columns that do not exist. */
@media (min-width: 1024px) {
  .footer__grid > :nth-child(6) { grid-column: 4; }
}
.footer__base { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid #2E2E2E; font-size: var(--t-small); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: space-between; }
/* Build credit — only the name is highlighted; "Built by" stays quiet. */
.footer .footer__by span { color: #fff; border-bottom: 1px solid var(--c-accent); padding-bottom: 1px; transition: border-color var(--d-fast) ease-out; }
.footer .footer__by:hover span { border-bottom-color: #fff; }

/* ==========================================================================
   Scroll reveal (Doc 1, 6.7)
   ========================================================================== */

.rv { opacity: 0; transform: translateY(12px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* Utilities */
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)}
.flex{display:flex} .wrapf{flex-wrap:wrap} .gap-1{gap:var(--s-1)} .gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)}
.aic{align-items:center} .jcb{justify-content:space-between} .fcol{flex-direction:column}
.tc{text-align:center} .is-hidden{display:none!important}

/* Modern engines: aspect-ratio wins, so remove the padding-bottom fallback. */
@supports (aspect-ratio: 1 / 1) {
  .card__media, .trainer__img, .wall__tile { height: auto; padding-bottom: 0; }
}

/* ==========================================================================
   Enquiry modal (migrated from the existing site's popup)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--s-3); }
.modal__scrim { position: absolute; inset: 0; background: rgba(20,20,20,0.6); }
.modal__box {
  position: relative; background: #fff; border: 1px solid var(--c-ink);
  padding: var(--s-4); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
}
@media (max-width: 767px) { .modal__box { padding: var(--s-3); } }
.modal__x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.modal__x:hover { color: var(--c-accent); }


/* ==========================================================================
   UI/UX UPGRADE — visibility, hierarchy, interaction
   Grounded in ui-ux-pro-max: Swiss Modernism 2.0, Subtle motion tier.
   Rules applied: reveal offset 8-16px, stagger 20-40ms, hover 150-300ms,
   contrast >=4.5:1 verified on every pair, cursor-pointer on all clickables,
   no motion on layout-affecting properties.
   ========================================================================== */

/* --- Every clickable communicates that it is clickable ------------------- */
a, button, label.choice span, .chip, summary, [role="button"] { cursor: pointer; }
a[href], button:not([disabled]) { -webkit-tap-highlight-color: rgba(212,32,39,0.12); }

/* --- Reading progress: orientation on long pages ------------------------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150;
  background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0%; background: var(--c-accent);
  transform-origin: left center; transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) { .progress__bar { transition: none; } }

/* --- Life @ CADD gallery ------------------------------------------------
   Twelve activity cards, six across. The icon badge straddles the join
   between the photograph and the card body, which is what gives the row its
   rhythm. Accent colour is the site's red, not the reference's blue. */
.gallhead { text-align: center; margin-bottom: var(--s-6); }
.gallhead__rule {
  display: block; width: 54px; height: 3px; border-radius: 2px;
  background: var(--c-accent); margin: var(--s-2) auto 0;
}
.gallhead .t-lead { color: var(--c-ink-2); }

.gallgrid {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1200px) { .gallgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .gallgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .gallgrid { grid-template-columns: repeat(2, 1fr); } }

.gcard {
  position: relative; background: #fff;
  border: 1px solid #EEEFF2; border-radius: 16px; overflow: hidden;
  padding-bottom: var(--s-3); text-align: center;
  box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 22px -14px rgba(20,20,20,.18);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.gcard__img { position: relative; overflow: hidden; }
.gcard__img img, .gcard__img picture { display: block; width: 100%; }
/* height:auto is required — the img carries a height attribute, and
   aspect-ratio is ignored while height is anything but auto. */
.gcard__img img { height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--d-slow) var(--e-out); }
.gcard:hover .gcard__img img { transform: scale(1.05); }

.gcard__ico {
  position: relative; z-index: 1; display: flex; margin: -22px auto var(--s-1);
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px -4px rgba(212,32,39,0.55);
}
.gcard__ico svg { width: 19px; height: 19px; }
.gcard__t {
  font-size: var(--t-small); font-weight: 900; letter-spacing: -0.01em;
  padding-inline: 12px; line-height: 1.3;
}
.gcard__d {
  font-size: var(--t-label); color: var(--c-ink-muted);
  padding-inline: 12px; margin-top: 5px; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .gcard:hover { transform: none; }
  .gcard:hover .gcard__img img { transform: none; }
}

/* --- About page ---------------------------------------------------------
   Hero with a real photograph, a dark trust band, story and network in two
   columns, and the four commitments as cards. */
.section.abhero { padding-block: var(--s-3) var(--s-4); position: relative; overflow: hidden; }
.section.abhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 120% at 90% 25%, rgba(212,32,39,0.10) 0%, rgba(212,32,39,0) 60%),
              linear-gradient(180deg, #FFF7F8 0%, #FFFFFF 80%);
}
.abhero__inner { display: grid; grid-template-columns: 1fr 0.95fr; gap: var(--s-6); align-items: center; }
.abhero h1 { line-height: 1.05; letter-spacing: -0.03em; }
.abhero h1 em { font-style: normal; color: var(--c-accent); }
.abhero__art picture, .abhero__art img { display: block; width: 100%; border-radius: var(--r); }
.abhero__art img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--c-border); }
@media (max-width: 900px) { .abhero__inner { grid-template-columns: 1fr; } }

.abstats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(100deg, #1A2142 0%, #232C55 100%); color: #fff;
}
.abstat { padding: var(--s-3); text-align: center; border-right: 1px solid rgba(255,255,255,0.10); }
.abstat:last-child { border-right: 0; }
.abstat__ico { display: block; margin: 0 auto var(--s-1); width: 26px; height: 26px; color: var(--c-accent); }
.abstat__ico svg { width: 26px; height: 26px; }
.abstat strong { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.abstat span { display: block; font-size: var(--t-label); color: #C7CBDA; margin-top: 3px; line-height: 1.4; }
@media (max-width: 780px) { .abstats { grid-template-columns: repeat(2, 1fr); }
  .abstat:nth-child(2) { border-right: 0; } }

.abstory { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center; }
.abnet { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .abstory, .abnet { grid-template-columns: 1fr; gap: var(--s-4); } }

.abgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: var(--s-2); }
.abcard {
  padding: 22px 20px; background: #fff; border: 1px solid #EEEFF2; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 22px -14px rgba(20,20,20,.18);
  border-top: 3px solid var(--c-accent);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.abcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.abcard__ico { display: inline-flex; width: 42px; height: 42px; border-radius: 12px;
  background: #FDE8EB; align-items: center; justify-content: center; }
.abcard__ico svg { width: 20px; height: 20px; color: var(--c-accent); }
.abcard__t { font-size: 1rem; font-weight: 900; letter-spacing: -0.01em; margin-top: var(--s-2); line-height: 1.3; }
.abcard__d { font-size: var(--t-small); color: var(--c-ink-muted); margin-top: 6px; line-height: 1.5; }

.miles { list-style: none; margin: 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--c-border); }
.mile { position: relative; padding-bottom: var(--s-3); }
.mile:last-child { padding-bottom: 0; }
.mile__dot {
  position: absolute; left: calc(-1 * var(--s-3) - 7px); top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-accent);
}
.mile strong { display: block; font-size: 1.0625rem; font-weight: 900; letter-spacing: -0.02em; }
.mile span { display: block; font-size: var(--t-small); color: var(--c-ink-muted); margin-top: 2px; }

/* --- Photographs of the centre (About) ----------------------------------
   Real rooms, so they get room to breathe: the reception shot runs wide and
   the rest sit in a three-up grid beneath it. */
/* Intro video sitting beside a short invitation, above the photographs */
.centrelead {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--s-3);
  align-items: center; margin-bottom: var(--s-4);
}
.centrelead__copy { min-width: 0; }
@media (max-width: 700px) {
  .centrelead { grid-template-columns: 1fr; }
  .centrelead .tcard { max-width: 260px; }
}

/* --- Industry collaboration reel (home, Industry band) -------------------
   One reel on its own. 370px is exactly the track a learner tile gets inside
   .testi__grid at full container width ((1160 - 2*24) / 3), so the two are
   the same object at the same size rather than two sizes of one idea.
   .artreel is the same tile inside a news article, where the text column is
   760px wide and an unconstrained 9:16 tile would run over 900px tall. */
.collabreel,
.artreel { max-width: min(370px, 100%); }
/* The link tile has no video to start, so the badge that normally appears once
   a clip is running says where the tap goes instead. It stays out of the way
   until the tile is pointed at — these posters carry their own artwork to the
   bottom edge, and a permanent badge just sits on top of it. */
.tcard__media--link { text-decoration: none; }
.tcard__media--link:hover .tcard__sound,
.tcard__media--link:focus-visible .tcard__sound { opacity: 1; }

/* ==========================================================================
   HOME: ONE SCREEN
   The top of the home page used to be four stacked bands — promo, utility,
   a white header, a dark ribbon — and only then the hero. The white header
   cut a bright stripe through the middle of it and the hero never read as a
   full screen. So on the home page the header and the ribbon stop being bands
   and sit ON the hero instead: the photograph runs from directly under the
   utility bar to the bottom of the hero, as one image.
   ========================================================================== */
.header--hero {
  background: transparent; backdrop-filter: none; border-bottom: 0;
  color: var(--c-on-inverse);
}
/* The mark is red-on-transparent artwork; the same brightness/invert the
   partner band uses turns it white here without shipping a second file. */
.header--hero .logo__cadd,
.header--hero .logo__india { filter: brightness(0) invert(1); }
.header--hero .nav__link { color: #F2F2F2; }
.header--hero .nav__link:hover,
.header--hero .nav__link[aria-expanded="true"] { color: #fff; }
/* Accent red on near-black is too low-contrast to carry "you are here" on its
   own, so the current page is marked with a rule under it as well. */
.header--hero .nav__link[aria-current="page"] {
  color: #fff; box-shadow: inset 0 -2px 0 var(--c-accent);
}
.header--hero .burger { border-color: rgba(255,255,255,0.35); }
.header--hero .burger span,
.header--hero .burger span::before,
.header--hero .burger span::after { background: #fff; }

/* Pull the hero up under the header and the ribbon, and pad the same amount
   back in so the headline still centres in the part you can actually see. */
.newsbar + .hero {
  margin-top: calc(-1 * (var(--header-h) + var(--newsbar-h)));
  padding-top: calc(var(--header-h) + var(--newsbar-h));
  min-height: min(96svh, 940px);
}
@supports not (height: 1svh) { .newsbar + .hero { min-height: min(96vh, 940px); } }
@media (min-width: 1024px) and (max-height: 820px) {
  .newsbar + .hero { min-height: 0; height: auto; }
}
/* The photograph is bright on the right-hand side, where the nav and the CTA
   sit. This keeps the chrome legible whatever the slide underneath is doing. */
.newsbar + .hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 0;
  height: calc(var(--header-h) + var(--newsbar-h) + 90px);
  background: linear-gradient(180deg, rgba(10,10,10,0.85) 0%,
                                      rgba(10,10,10,0.55) 45%,
                                      rgba(10,10,10,0) 100%);
  pointer-events: none;
}

/* Once the hero has gone by, the header has to become a real surface again. */
.header--hero.is-solid {
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
  color: inherit;
}
.header--hero.is-solid .logo__cadd,
.header--hero.is-solid .logo__india { filter: none; }
.header--hero.is-solid .nav__link { color: var(--c-ink); }
.header--hero.is-solid .nav__link[aria-current="page"] { color: var(--c-accent); box-shadow: none; }
.header--hero.is-solid .burger { border-color: var(--c-border); }
.header--hero.is-solid .burger span,
.header--hero.is-solid .burger span::before,
.header--hero.is-solid .burger span::after { background: var(--c-ink); }
.header--hero { transition: background var(--d-base) var(--e-out),
                            border-color var(--d-base) var(--e-out); }

.centregrid {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.centretile { margin: 0; }
.centretile--wide { grid-column: 1 / -1; }
.centretile picture {
  display: block; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--c-border); background: var(--c-bg-warm);
}
.centretile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; transition: transform var(--d-slow) var(--e-out);
}
.centretile--wide img { aspect-ratio: 21 / 9; }
.centretile:hover img { transform: scale(1.03); }
.centretile figcaption { margin-top: 10px; }
.centretile strong { display: block; font-size: var(--t-small); font-weight: 700; }
.centretile span {
  display: block; font-size: var(--t-label); color: var(--c-ink-muted);
  line-height: 1.45; margin-top: 2px;
}
@media (max-width: 600px) { .centretile--wide img { aspect-ratio: 4 / 3; } }

/* --- Programmes index: department overview ------------------------------
   The page opens as a set of colour-coded department cards with a sidebar,
   then carries the full course list below. Colours come from the markup so a
   department reads the same here as it does in its section heading. */
/* Two class selectors, because a later `.section` rule further down the file
   re-declares padding-block and would otherwise win on source order. */
.section.proghero {
  padding-block: var(--s-3) var(--s-2);
  position: relative; overflow: hidden;
}
.section.proghero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 120% at 88% 30%, rgba(212,32,39,0.13) 0%, rgba(212,32,39,0) 62%),
    linear-gradient(180deg, #FFF7F8 0%, #FFFFFF 78%);
}
.proghero__inner {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6); align-items: center;
}
.proghero__copy { padding-block: 0; }
/* the heading and lead carry their own rhythm; trim the stock margins so
   the hero reads as one block rather than four spaced-out pieces */
.proghero h1 { margin-bottom: var(--s-2); }
.proghero .t-lead { margin-bottom: 0; }
.proghero .label.mb-3 { margin-bottom: var(--s-1); }
.proghero__kicker { margin-top: 0; }
.proghero__kicker { display: inline-flex; align-items: center; gap: 8px; }
.proghero__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
}
.proghero h1 em { font-style: normal; color: var(--c-accent); }
.proghero h1 { line-height: 1.05; letter-spacing: -0.03em; }
.proghero__art { justify-self: end; }
.proghero__art svg { display: block; width: 100%; max-width: 430px; height: auto; }
@media (max-width: 900px) {
  .proghero__inner { grid-template-columns: 1fr; gap: var(--s-3); }
  .proghero__art { display: none; }
}

.proglayout { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-3); align-items: start; }
@media (max-width: 1100px) { .proglayout { grid-template-columns: 1fr; } }

.deptgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); gap: var(--s-2); }

.deptc {
  display: flex; flex-direction: column;
  padding: 22px 20px; border: 1px solid #EEEFF2; border-radius: 16px;
  background: #fff; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 22px -14px rgba(20,20,20,.18);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out),
              border-color var(--d-fast);
}
.deptc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #E4E5E9; }
.deptc__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.deptc__ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(20,20,20,0.35);
}
.deptc__ico svg { width: 22px; height: 22px; }
.deptc__name { font-size: 1.0625rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.3; }
.deptc__list {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
  font-size: var(--t-small); color: var(--c-ink-2); flex: 1 1 auto;
  line-height: 1.5;
}
.deptc__list li { position: relative; padding-left: 14px; margin-bottom: 7px; }
.deptc__list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4;
}
.deptc__more { font-style: italic; opacity: 0.75; }
.deptc__go {
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  margin-top: var(--s-3);
  font-size: var(--t-label); font-weight: 700; white-space: nowrap;
}
.deptc__go svg { width: 13px; height: 13px; }
.deptc__blurb { font-size: var(--t-small); color: var(--c-ink-muted); margin-top: var(--s-1); flex: 1 1 auto; }
.deptc--all {
  background: linear-gradient(180deg, #FFF1F3 0%, #FFF8F9 100%);
  border-color: #FADDE2;
}
.deptc--all .deptc__ico { width: 56px; height: 56px; box-shadow: none; }
.deptc--all .deptc__ico svg { width: 26px; height: 26px; }
.deptc--all .deptc__top { margin-bottom: var(--s-3); }
.deptc--all .btn { justify-content: center; gap: 8px; }

.progside__card {
  padding: var(--s-3); border: 1px solid #EDEEF1; border-radius: 16px;
  background: #fff; box-shadow: var(--sh-1); position: sticky; top: calc(var(--header-h) + var(--pagebar-h) + var(--s-2));
}
.progside__ico {
  width: 46px; height: 46px; border-radius: 14px; background: #FDE8EB;
  display: flex; align-items: center; justify-content: center;
}
.progside__ico svg { width: 21px; height: 21px; }
/* Prospectus download in the programmes sidebar */
.progside__pdf {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s-2); padding: 11px 12px;
  border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg-warm); text-decoration: none; color: inherit;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.progside__pdf:hover { border-color: var(--c-ink); background: #fff; }
.progside__pdf svg { width: 18px; height: 18px; color: var(--c-accent); flex: 0 0 auto; }
.progside__pdf strong { display: block; font-size: var(--t-small); font-weight: 700; }
.progside__pdf em {
  display: block; font-style: normal; font-family: var(--f-mono);
  font-size: var(--t-label); color: var(--c-ink-muted); margin-top: 1px;
}
.progside__facts { display: grid; gap: 14px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.progfact { display: flex; gap: var(--s-2); align-items: center; }
.progfact__ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.progfact__ico svg { width: 17px; height: 17px; }
.progfact strong { display: block; font-size: 1rem; font-weight: 700; align-self: center; }
.progfact span { display: block; font-size: var(--t-label); color: var(--c-ink-muted); line-height: 1.45; margin-top: 2px; }
@media (max-width: 1100px) { .progside__card { position: static; } }

.progcta {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-radius: 18px;
  background: linear-gradient(100deg, #1A2142 0%, #232C55 100%); color: #fff;
}
.progcta__ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center;
}
.progcta__ico svg { width: 21px; height: 21px; color: var(--c-accent); }
.progcta__copy { flex: 1 1 320px; }
.progcta__copy strong { display: block; font-size: 1.0625rem; font-weight: 700; }
.progcta__copy span { display: block; font-size: var(--t-small); color: #C7CBDA; margin-top: 3px; }
@media (max-width: 600px) { .progcta { padding: var(--s-3); } .progcta .btn { width: 100%; } }

/* --- Programmes index, grouped by department ----------------------------
   The page is a list of departments, not a flat wall of cards, so each group
   needs to read as its own titled section. The heading block is separated
   from the cards by a rule and the cards are indented under it, so the
   hierarchy is visible before you read a word. */
.deptjump {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.deptjump__i {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--c-border); border-radius: var(--r-pill);
  font-size: var(--t-label); font-weight: 700; color: var(--c-ink-2);
  text-decoration: none; transition: all var(--d-fast);
}
.deptjump__i:hover { border-color: var(--c-ink); color: var(--c-ink); }
.deptjump__n {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--c-accent);
}

.progroup { padding-top: var(--s-8); }
.progroup:first-child { padding-top: 0; }
/* The home ribbon links straight at a discipline (#sw-mech), and so can any
   in-page link. Without this the heading lands underneath the sticky header
   and page bar instead of just below them. */
.progroup { scroll-margin-top: calc(var(--header-h) + var(--pagebar-h) + var(--s-3)); }
.progroup.is-hidden { display: none; }

.progroup__head {
  display: grid; gap: var(--s-1);
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 2px solid var(--c-ink);
}
.progroup__title { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.progroup__count { color: var(--c-accent); white-space: nowrap; }
.progroup__outcome { max-width: 60ch; margin: 0; }
/* grid children stretch by default; keep the link only as wide as its text */
.progroup__path { justify-self: start; }

/* Cards sit indented under their department heading, so a course is visibly
   subordinate to the department it belongs to. */
.progroup__grid { padding-left: var(--s-3); border-left: 1px solid var(--c-border); }
@media (max-width: 767px) {
  .progroup { padding-top: var(--s-6); }
  .progroup__grid { padding-left: var(--s-2); }
}

/* Master Certificates carry their whole story on the card, because they have
   no page of their own to link to yet. */
.mastercard { cursor: default; }
.mastercard__lbl { margin-top: var(--s-3); color: var(--c-ink); }
.mastercard__list {
  margin: var(--s-1) 0 0; padding-left: 1.1rem; color: var(--c-ink-2);
}
.mastercard__list li { margin-bottom: 4px; }

/* --- Learner video testimonials ------------------------------------------
   Portrait 9:16 tiles, the shape the footage was actually shot in. Tiles play
   silently as they scroll into view — movement is what stops the section
   being scrolled past — and open full size with sound when tapped. */
.testi { background: var(--c-bg-warm); }
.testi__grid {
  display: grid; gap: var(--s-3);
  /* Three across rather than four or five. The tiles carry branded artwork
     with type on it, and at a quarter of the container that type was too
     small to read — a third gives each card about a third more width. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.testi__grid--page { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* On a phone, two columns rather than one: four full-width portrait videos
   stacked would be most of a screen each and turn the section into a scroll. */
@media (max-width: 600px) {
  .testi__grid, .testi__grid--page { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .tcard__quote { display: none; }   /* the name and course carry it at this size */
}

.tcard { margin: 0; }
.tcard__media {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  padding: 0; border: 1px solid var(--c-border); border-radius: var(--r);
  overflow: hidden; background: var(--c-bg-inverse); cursor: pointer;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.tcard__media:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
/* Poster and video are stacked; the video fades up over the poster when it
   starts, so the swap reads as one object waking up rather than a hard cut. */
.tcard__poster,
.tcard__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tcard__vid { opacity: 0; transition: opacity 320ms var(--e-out); }
.tcard__media[data-playing="true"] .tcard__vid { opacity: 1; }
.tcard__poster { transition: transform 600ms var(--e-out); }
.tcard__media:hover .tcard__poster { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .tcard__vid { transition: none; }
  .tcard__poster { transition: none; }
  .tcard__media:hover .tcard__poster { transform: none; }
}

.tcard__play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--c-ink);
  transition: opacity var(--d-fast);
}
.tcard__play svg { width: 24px; height: 24px; margin-left: 2px; }
/* Once the silent preview is running the play badge would only be noise. */
.tcard__media[data-playing="true"] .tcard__play { opacity: 0; }

.tcard__sound {
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(20,20,20,0.72); color: #fff; opacity: 0;
  transition: opacity var(--d-fast);
}
.tcard__media[data-playing="true"] .tcard__sound { opacity: 1; }

/* Student-work footage sits in a landscape card rather than a 9:16 tile: the
   button fills the card's existing media box and the poster underneath stays
   the card's own <picture>, so the hover zoom and lazy loading are unchanged. */
.tcard__media--wide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border: 0; border-radius: 0; background: transparent;
}
.tcard__media--wide:hover { transform: none; box-shadow: none; }
.tcard__media--wide .tcard__vid { object-fit: contain; background: transparent; }


.tcard__cap { margin-top: var(--s-2); }
.tcard__quote { font-size: var(--t-small); color: var(--c-ink); margin: 0 0 6px; }
.tcard__name { font-weight: 700; font-size: var(--t-small); margin: 0; }
.tcard__line {
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-ink-muted); margin: 2px 0 0;
}
.tcard__src {
  display: inline-block; margin-top: 6px;
  font-size: var(--t-label); color: var(--c-ink-muted);
}

/* Full-size player, reusing the certificate lightbox backdrop. */
.lightbox__video {
  max-width: min(460px, 100%); max-height: calc(100vh - var(--s-8));
  width: auto; height: auto; background: #000;
  border-radius: var(--r); box-shadow: var(--sh-3);
}

@media (prefers-reduced-motion: reduce) {
  /* No silent autoplay; the poster and the play badge stay, and the video
     only runs when someone actually asks for it. */
  .tcard__media:hover { transform: none; }
}

/* --- Accreditation band (home) ------------------------------------------
   The centre's strongest credential, so it gets real size rather than a row
   of thumbnails. Two cards side by side on desktop, stacked on mobile. */
.creds__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.creds__grid--single { grid-template-columns: minmax(0, 620px); }
@media (max-width: 767px) { .creds__grid { grid-template-columns: 1fr; } }

.cred {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--c-border); border-radius: var(--r);
  background: var(--c-bg); box-shadow: var(--sh-1);
}
@media (max-width: 620px) { .cred { flex-direction: column; gap: var(--s-2); }
  .cred__mark { flex: 0 0 auto; width: 100%; } }

/* Fixed mark area so two logos of different proportions still line up. */
.cred__mark {
  /* Sized for a horizontal partner lockup rather than a square badge, and on
     white because that is how these marks are supplied. */
  flex: 0 0 196px; min-height: 92px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-2);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: #fff;
}
.cred__logoimg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Stand-in until official artwork is supplied — deliberately our own type,
   never an approximation of someone else's mark. */
.cred__wordmark {
  font-weight: 900; font-size: 1.0625rem; letter-spacing: -0.02em;
  color: var(--c-ink-2); text-align: center;
}

.cred__body { min-width: 0; }
.cred__detail {
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.06em; color: var(--c-ink-muted); margin-top: var(--s-2);
}
.cred__valid { font-size: var(--t-label); color: var(--c-ink-muted); margin-top: 2px; }
.cred__name { font-size: 1.125rem; font-weight: 900; letter-spacing: -0.02em; }
.cred__title {
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--c-accent); margin-top: 2px;
}
.cred__note { font-size: var(--t-small); color: var(--c-ink-muted); margin-top: var(--s-1); }
.cred__view {
  margin-top: var(--s-2);
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--c-ink); background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--c-accent); padding: 0 0 2px;
  transition: color var(--d-fast);
}
.cred__view:hover { color: var(--c-accent); }

/* --- Certificate lightbox ------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3); background: rgba(20,20,20,0.82);
}
.lightbox__img {
  max-width: min(1000px, 100%); max-height: calc(100vh - var(--s-8));
  width: auto; height: auto; object-fit: contain;
  background: #fff; box-shadow: var(--sh-3);
}
.lightbox__x {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 44px; height: 44px; font-size: 1.5rem; line-height: 1;
  color: #fff; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r-pill);
  cursor: pointer;
}
.lightbox__x:hover { background: rgba(0,0,0,0.7); }

/* --- Sticky section nav with scrollspy (programme pages) ----------------- */
.subnav {
  position: sticky; top: calc(var(--header-h) + var(--pagebar-h)); z-index: 80;
  background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__inner { display: flex; gap: var(--s-3); align-items: center; min-height: 54px; white-space: nowrap; }
.subnav a {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: var(--c-ink-muted);
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color var(--d-fast) ease-out, border-color var(--d-fast) ease-out;
}
.subnav a:hover { color: var(--c-ink); }
.subnav a[aria-current="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
@media (max-width: 767px) { .subnav { top: 0; } }

/* --- Sticky conversion bar: appears once the hero CTA scrolls away ------- */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 92;
  background: var(--c-bg-inverse); color: #fff;
  transform: translateY(100%); transition: transform var(--d-base) var(--e-out);
  border-top: 2px solid var(--c-accent);
}
.stickycta[data-show="true"] { transform: translateY(0); }
.stickycta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 68px; }
.stickycta__t { font-weight: 700; font-size: 1rem; }
.stickycta__s { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-on-inverse-2); }
@media (max-width: 767px) {
  .stickycta { bottom: 62px; }
  .stickycta__inner { min-height: 60px; }
  .stickycta__meta { display: none; }
  .stickycta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .stickycta { transition: none; } }

/* --- Back to top --------------------------------------------------------- */
.totop {
  position: fixed; right: var(--s-3); bottom: 88px; z-index: 88;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--c-border); color: var(--c-ink);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) ease-out, visibility var(--d-base), border-color var(--d-fast);
}
.totop[data-show="true"] { opacity: 1; visibility: visible; }
.totop:hover { border-color: var(--c-ink); }
@media (max-width: 767px) { .totop { display: none; } }

/* --- Card interaction: clearer affordance, still restrained -------------- */
.card {
  position: relative;
  transition: border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.card:hover { box-shadow: 0 18px 40px -28px rgba(20,20,20,0.4); }
.card:focus-within { border-color: var(--c-ink); }
.card__body h3 { transition: color var(--d-fast) ease-out; }
.card:hover .card__body h3 { color: var(--c-accent); }
/* Directional cue that appears on hover */
.card__body::after {
  content: "→";
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  font-size: 1rem; color: var(--c-accent);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.card:hover .card__body::after, .card:focus-within .card__body::after {
  opacity: 1; transform: translateX(0);
}
article.card:hover .card__body::after { content: ""; }

/* --- Accordion: clearer open state --------------------------------------- */
.acc2__t { transition: color var(--d-fast) ease-out, padding-left var(--d-fast) ease-out; }
.acc2__t:hover { padding-left: 6px; }
.acc2__t[aria-expanded="true"] { color: var(--c-accent); }
.acc2__p[data-open="true"] { animation: accIn 260ms var(--e-out); }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc2__p[data-open="true"] { animation: none; } }

.acc2__tools { display: flex; justify-content: flex-end; gap: var(--s-2); margin-bottom: var(--s-2); }
.acc2__tools button {
  background: none; border: 0; font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-muted);
  padding: 6px 0; cursor: pointer;
}
.acc2__tools button:hover { color: var(--c-accent); }

/* --- Roadmap: progressive draw on scroll --------------------------------- */
.roadmap__step {
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--e-out), transform 320ms var(--e-out),
              background var(--d-fast), border-color var(--d-fast);
}
.roadmap.is-in .roadmap__step { opacity: 1; transform: none; }
.roadmap__arrow { opacity: 0; transition: opacity 320ms var(--e-out); }
.roadmap.is-in .roadmap__arrow { opacity: 1; }
.roadmap__step:hover { border-color: var(--c-ink); background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .roadmap__step, .roadmap__arrow { opacity: 1; transform: none; transition: none; }
}

/* --- Statistics: stronger presence --------------------------------------- */
.stat { transition: border-color var(--d-base) ease-out; }
.stat:hover { border-color: var(--c-accent); }
.stat__n { font-feature-settings: "tnum" 1; }

/* --- Section markers: consistent visual anchor --------------------------- */
.marker .label { position: relative; padding-left: 14px; }
.marker .label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: var(--c-accent);
}

/* --- Audience cards: clearer target -------------------------------------- */
.aud { transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out); }
.aud:hover { transform: translateY(-3px); }

/* --- Buttons: crisper feedback ------------------------------------------- */
.btn--primary:hover { box-shadow: 0 10px 24px -14px rgba(212,32,39,0.8); }
.btn { will-change: auto; }

/* --- Tables: readable at a glance ---------------------------------------- */
.tbl tbody tr { transition: background var(--d-fast) ease-out; }
@media (min-width: 768px) { .tbl tbody tr:hover { background: var(--c-bg-warm); } }

/* --- Pillars: hierarchy on hover ----------------------------------------- */
.pillar { transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
.pillar:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -26px rgba(20,20,20,0.45); }

/* --- Typography refinements ---------------------------------------------- */
.t-hero, .t-display { text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.t-lead { max-width: 62ch; }
.measure { max-width: 66ch; }
.note { border-radius: 0; line-height: 1.55; }

/* Links inside body copy are visibly links */
main p a:not(.btn):not(.alink) {
  color: var(--c-ink); text-decoration: underline;
  text-decoration-color: var(--c-accent); text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--d-fast) ease-out;
}
main p a:not(.btn):not(.alink):hover { color: var(--c-accent); }

/* --- Print --------------------------------------------------------------- */
@media print {
  .header, .utility, .advisor, .bottombar, .stickycta, .subnav, .totop, .progress { display: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* --- Prevent the sticky CTA from colliding with the advisor / back-to-top - */
@supports selector(:has(*)) {
  body:has(.stickycta[data-show="true"]) .advisor { bottom: calc(var(--s-3) + 78px); }
  body:has(.stickycta[data-show="true"]) .totop   { bottom: calc(88px + 78px); }
}
.advisor, .totop { transition: bottom var(--d-base) var(--e-out), opacity var(--d-base) ease-out, visibility var(--d-base); }
@media (prefers-reduced-motion: reduce) { .advisor, .totop { transition: none; } }
/* Out of the way at the top of the page and once the footer is in view. */
.advisor[data-hide="true"] { opacity: 0; visibility: hidden; pointer-events: none; }

/* ==========================================================================
   Photography
   ========================================================================== */
.card__media--photo { background: var(--c-bg-warm); }
.card__media picture, .card__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__media--photo img { object-fit: cover; transition: transform 600ms var(--e-out); }
.card:hover .card__media--photo img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .card__media--photo img { transition: none; }
  .card:hover .card__media--photo img { transform: none; }
}

.figure { position: relative; border: 1px solid var(--c-border); background: var(--c-bg-warm); }
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption {
  position: absolute; left: 0; bottom: 0; padding: 6px 10px;
  background: rgba(255,255,255,0.94); color: var(--c-ink-2);
  font-family: var(--f-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.section--inverse .figure figcaption { background: rgba(20,20,20,0.88); color: var(--c-on-inverse-2); }

/* Hero photographic background */
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
@media (max-width: 900px) { .hero__photo img { object-position: 58% center; } }

/* Wall tiles backed by real images */
.wall__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall__tile { transition: transform var(--d-base) var(--e-out); overflow: hidden; }
.wall__tile:hover { transform: scale(1.02); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .wall__tile:hover { transform: none; } }


/* ==========================================================================
   RESPONSIVE HARDENING
   Mega menu, accordions, tables and forms. All sizing goes through the
   existing --margin / --gutter / --s-* tokens; no new breakpoints invented.
   ========================================================================== */

/* --- Mega menu: three-tier grouping, scrollable if it exceeds the viewport */
.mega { max-height: calc(100vh - 114px); overflow-y: auto; overscroll-behavior: contain; }
.mega__inner { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: var(--s-6); }
@media (max-width: 1439px) { .mega__inner { gap: var(--s-4); } }
.mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.mega__link { min-width: 0; }
.mega__link strong, .mega__link span { overflow-wrap: anywhere; }

/* Department grouping inside the mega menu */
.mega__dept { min-width: 0; }
.mega__dept > .label { display: block; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--c-border); }
.mega__course {
  display: block; padding: 6px 0; text-decoration: none; font-size: 0.875rem;
  color: var(--c-ink-2); transition: color var(--d-fast), padding-left var(--d-fast);
}
.mega__course:hover { color: var(--c-accent); padding-left: 5px; }

/* --- Drawer: three-tier nesting --------------------------------------- */
.acc__panel .drawer__dept { margin-bottom: var(--s-2); }
.acc__panel .drawer__dept > span {
  display: block; font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent);
  padding: 8px 0 4px;
}
.acc__panel .drawer__dept a { padding: 8px 0 8px 12px; border-left: 1px solid var(--c-border); }

/* --- Curriculum accordion at narrow widths ----------------------------- */
@media (max-width: 767px) {
  .acc2__t { font-size: 1rem; padding: var(--s-2) 0; gap: var(--s-1); align-items: flex-start; }
  .acc2__t > span:first-child { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
  .acc2__p ul { padding-left: 1rem; }
  .acc2__p li { font-size: 1rem; }
}
.acc2__t > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* --- Tables: never overflow, never horizontally scroll ----------------- */
.tbl { table-layout: auto; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1023px) {
  .tbl th, .tbl td { padding: 11px var(--s-1); font-size: 0.875rem; }
}

/* --- Forms ------------------------------------------------------------- */
.formcard { max-width: min(620px, 100%); }
.field input, .field select, .field textarea { max-width: 100%; }
.choices { grid-template-columns: 1fr; }
@media (min-width: 768px) { .choices--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.choice span { overflow-wrap: anywhere; }
.slots { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); }
@media (max-width: 374px) { .slots { grid-template-columns: 1fr; } }

/* --- Factbar / roadmap / filters at small widths ----------------------- */
@media (max-width: 374px) { .factbar { grid-template-columns: 1fr; }
  .factbar > div { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .factbar > div:last-child { border-bottom: 0; } }
.roadmap__step { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.filters { row-gap: var(--s-1); }
@media (max-width: 767px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

/* --- Global overflow guards ------------------------------------------- */
.wrap { min-width: 0; }
.grid > * { min-width: 0; }
pre, code { overflow-wrap: anywhere; }

/* ==========================================================================
   HERO ANIMATION
   The H1 stays real static text in the DOM. Only presentation animates, and
   every element reserves its final space, so there is no layout shift.
   ========================================================================== */

.hero__line { display: block; }

/* Each line is clipped by a wrapper of fixed height; the inner span moves.
   Because the wrapper never changes size, CLS stays at zero. */
.hero__mask { display: block; overflow: hidden; }
.hero__mask > span { display: block; }
html[data-js] .hero__mask > span {
  opacity: 0;
  transform: translateY(0.42em);
  animation: heroRise 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

html[data-js] .hero__kicker, html[data-js] .hero__sub,
html[data-js] .hero__lead, html[data-js] .hero__actions {
  opacity: 0;
  animation: heroFade 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroFade { to { opacity: 1; } }

/* Accent line: a specular sweep that travels back and forth.
   background-position only — no repaint of layout, stays on the compositor. */
.hero h1 em {
  font-style: normal;
  color: var(--c-accent);
  background-image: linear-gradient(100deg,
      var(--c-accent) 0%, var(--c-accent) 38%,
      #FF6B6F 47%, #FFD9DA 50%, #FF6B6F 53%,
      var(--c-accent) 62%, var(--c-accent) 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroSweep 5.5s ease-in-out 1.5s infinite alternate;
}
@keyframes heroSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__mask > span, .hero__kicker, .hero__sub, .hero__lead, .hero__actions {
    opacity: 1; transform: none; animation: none;
  }
  .hero h1 em {
    animation: none; background-image: none;
    -webkit-text-fill-color: var(--c-accent); color: var(--c-accent);
  }
}
/* No JS: never leave the hero invisible */
/* Belt and braces: if animations are disabled at OS or browser level, the
   final state is what renders. */
@media (prefers-reduced-motion: reduce) {
  html[data-js] .hero__mask > span, html[data-js] .hero__kicker,
  html[data-js] .hero__sub, html[data-js] .hero__lead,
  html[data-js] .hero__actions, html[data-js] .trustpts {
    opacity: 1; transform: none; animation: none;
  }
}

/* ==========================================================================
   ANNOUNCEMENT RIBBON — sits above the utility bar, dismissible per session
   ========================================================================== */
.ribbon {
  background: var(--c-accent); color: #fff;
  font-size: var(--t-small); position: relative; z-index: 101;
}
.ribbon__inner {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding-right: 44px; text-align: center;
}
.ribbon a {
  color: #fff; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.55); padding-bottom: 1px;
}
.ribbon a:hover { border-bottom-color: #fff; }
.ribbon__tag {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.12em; background: rgba(0,0,0,0.22); padding: 3px 8px;
  flex-shrink: 0;
}
.ribbon__badge { display: block; height: 26px; width: auto; flex-shrink: 0; }
.ribbon a.ribbon__badgelink { display: flex; border-bottom: 0; padding-bottom: 0; flex-shrink: 0; }
.ribbon a.ribbon__badgelink:hover { border-bottom: 0; opacity: 0.92; }
.ribbon a.ribbon__badgelink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ribbon__x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
  opacity: 0.85;
}
.ribbon__x:hover { opacity: 1; }
.ribbon__x:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 767px) {
  .ribbon__inner { min-height: 52px; font-size: 0.875rem; gap: var(--s-1); }
  .ribbon__tag { display: none; }
  .ribbon__badge { height: 22px; }
}

/* ==========================================================================
   HOMEPAGE — reference-layout components
   ========================================================================== */

.ico { width: 22px; height: 22px; flex-shrink: 0; }
.ico--lg { width: 28px; height: 28px; }

/* --- Hero trust points ---------------------------------------------------- */
.trustpts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3); margin-top: var(--s-6);
}
html[data-js] .trustpts {
  opacity: 0; animation: heroFade 520ms cubic-bezier(0.16,1,0.3,1) 980ms forwards;
}
.trustpt { display: flex; align-items: center; gap: 12px; color: #fff; }
.trustpt svg { color: var(--c-accent); }
.trustpt span { font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
@media (max-width: 900px) { .trustpts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-2); } }
@media (prefers-reduced-motion: reduce) { .trustpts { opacity: 1; animation: none; } }
html:not([data-js]) .trustpts { opacity: 1; animation: none; }

/* --- Elevated statistics card, overlapping the hero ----------------------- */
.statbar-wrap { position: relative; margin-top: calc(var(--s-8) * -1); z-index: 5; }
.statbar {
  background: var(--c-bg-inverse); color: #fff;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #2A2A2A;
}
.statbar__cell { padding: var(--s-4) var(--s-3); border-right: 1px solid #2A2A2A; }
.statbar__cell:last-child { border-right: 0; }
.statbar__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.statbar__top svg { color: var(--c-accent); }
.statbar__n { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; }
.statbar__l { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
              letter-spacing: 0.1em; color: var(--c-on-inverse-2); line-height: 1.5; }
@media (max-width: 900px) {
  .statbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .statbar__cell:nth-child(2n) { border-right: 0; }
  .statbar__cell:nth-child(-n+2) { border-bottom: 1px solid #2A2A2A; }
}
@media (max-width: 767px) { .statbar-wrap { margin-top: calc(var(--s-6) * -1); } }

/* --- Audience cards with icons -------------------------------------------- */
.aud__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.aud__head svg { color: var(--c-ink); opacity: 0.85; }
.aud:hover .aud__head svg { color: #fff; }

/* --- Department cards (Industry-ready programs) --------------------------- */
.deptrow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gutter); }
@media (max-width: 1200px) { .deptrow { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px)  { .deptrow { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .deptrow { grid-template-columns: 1fr; } }
.deptcard .card__media { aspect-ratio: 16 / 10; height: auto; padding-bottom: 0; }
.deptcard .card__body { padding: var(--s-2) var(--s-3) var(--s-3); }
.deptcard h3 { font-size: 1rem; }
.deptcard p { font-size: 0.875rem; }

/* --- Dark student-work strip ---------------------------------------------- */
.workstrip { background: var(--c-bg-inverse); color: #fff; padding: var(--s-6); }
@media (max-width: 767px) { .workstrip { padding: var(--s-4) var(--s-3); } }
.workstrip__head { display: flex; justify-content: space-between; align-items: flex-end;
                   gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.workscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
              gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
              scrollbar-width: none; padding-bottom: 4px; }
.workscroll::-webkit-scrollbar { display: none; }
.workitem { position: relative; aspect-ratio: 4/3; overflow: hidden; scroll-snap-align: start;
            border: 1px solid #2A2A2A; display: block; }
.workitem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                transition: transform 600ms var(--e-out); }
.workitem:hover img { transform: scale(1.05); }
.workitem figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(to top, rgba(20,20,20,0.9), transparent);
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: #fff; }
@media (prefers-reduced-motion: reduce) { .workitem:hover img { transform: none; } }

/* --- Feature grid + side panel -------------------------------------------- */
.whygrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 1023px) { .whygrid { grid-template-columns: 1fr; gap: var(--s-4); } }
.featgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3) var(--s-2); }
@media (max-width: 600px) { .featgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.feat { display: flex; flex-direction: column; gap: 8px; }
.feat svg { color: var(--c-accent); }
.feat strong { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }

.expbox { border: 1px solid var(--c-border); background: var(--c-bg-warm); padding: var(--s-4); }
@media (max-width: 767px) { .expbox { padding: var(--s-3); } }
.expbox ul { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.expbox li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 0.9375rem; }
.expbox li svg { color: var(--c-success); width: 18px; height: 18px; margin-top: 1px; }

/* --- Employer / partner logo band ----------------------------------------- */
.logoband { border-top: 1px solid var(--c-border); }
.logoband__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.logoband__track { display: flex; align-items: center; width: max-content;
                   animation: logoScroll 36s linear infinite; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logoband__marquee:hover .logoband__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .logoband__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .logoband__track .logomark[aria-hidden="true"] { display: none; }
}
.logoslot {
  height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c-border); color: var(--c-ink-muted);
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; text-align: center; padding: 0 8px;
}


/* --- "New content here" dot on the News nav item --------------------------
   A blinking word in a nav bar reads as a banner ad, so the attention cue is
   the notification dot instead: a small accent mark with a ring that expands
   and fades. Nothing moves and nothing reflows — it is box-shadow only. */
.nav__link--news { position: relative; padding-right: 14px; }
.nav__link--news::after,
.acc__trigger--news::after {
  content: ""; position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
  animation: navDot 2.2s ease-out infinite;
}
.nav__link--news::after { top: 7px; right: 2px; }
.acc__trigger--news { position: relative; }
.acc__trigger--news::after { top: 50%; margin-top: -12px; left: 52px; }

@keyframes navDot {
  0%   { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 32, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link--news::after, .acc__trigger--news::after { animation: none; }
}

/* --- News bar (home, above the hero) -----------------------------------
   A slim ticker of the newest posts. Same marquee mechanism as the partner
   logo band: the run is duplicated so the loop never shows a seam, hover
   pauses it, and reduced-motion drops the animation and wraps instead. */
:root { --newsbar-h: 46px; }

/* No background of its own: on the home page the news bar sits ON the hero, so
   a band here is exactly the seam we are trying to remove. */
.newsbar {
  position: relative; z-index: 90;
  color: var(--c-on-inverse-2);
}
.newsbar__wrap {
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--newsbar-h);
}
.newsbar__label {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-accent);
}
.newsbar__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
}

.newsbar__marquee {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  /* A generous right-hand fade: items have to dissolve well before they reach
     the All-news link, or the last headline just gets guillotined by it. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent);
}
.newsbar__track {
  display: flex; align-items: center; width: max-content;
  animation: newsbarScroll 45s linear infinite;
}
@keyframes newsbarScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.newsbar__marquee:hover .newsbar__track,
.newsbar__marquee:focus-within .newsbar__track { animation-play-state: paused; }

.newsbar__item {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding-inline: var(--s-3); height: var(--newsbar-h);
  color: #D7D7D7; text-decoration: none; font-size: var(--t-small);
  transition: color var(--d-fast) ease-out;
}
.newsbar__item:hover { color: #fff; }
.newsbar__item svg { width: 12px; height: 12px; flex: none; opacity: .55; }
.newsbar__item:hover svg { opacity: 1; }
.newsbar__tag {
  flex: none; font-family: var(--f-mono); font-size: var(--t-label);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-accent);
}
.newsbar__t { white-space: nowrap; }

/* The way into the News section, and the one thing on this bar that is meant
   to be clicked — so it is a pill rather than a link, and it breathes. The
   ring expands out of the pill and fades, which reads at the edge of vision
   without moving anything or shifting the layout. */
.newsbar__all {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: var(--t-label); font-weight: 700; color: #fff;
  background: var(--c-accent); text-decoration: none; border: 0;
  animation: newsPulse 3s ease-out infinite;
  transition: background var(--d-fast) ease-out;
}
.newsbar__all:hover,
.newsbar__all:focus-visible { background: var(--c-accent-hover); animation-play-state: paused; }
.newsbar__all svg { width: 12px; height: 12px; animation: newsNudge 3s ease-in-out infinite; }

@keyframes newsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0.55); }
  60%  { box-shadow: 0 0 0 11px rgba(212, 32, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0); }
}
@keyframes newsNudge {
  0%, 55%, 100% { transform: translateX(0); }
  70%           { transform: translateX(3px); }
}


@media (max-width: 700px) {
  .newsbar__all { display: none; }          /* the items already lead to News */
}
@media (prefers-reduced-motion: reduce) {
  .newsbar__all, .newsbar__all svg { animation: none; }
  .newsbar__marquee { -webkit-mask-image: none; mask-image: none; }
  .newsbar__track { animation: none; width: auto; flex-wrap: wrap; }
  .newsbar__wrap { height: auto; padding-block: var(--s-1); flex-wrap: wrap; }
  .newsbar__item { height: auto; padding-block: 4px; padding-inline: 0; margin-right: var(--s-3); }
  .newsbar__track .newsbar__item[aria-hidden="true"] { display: none; }
  .newsbar + .hero { min-height: min(92svh, 900px); }
}

/* The address sits in the utility bar on every page, so "where are you?" is
   answerable from the top of any screen rather than only the home page. */
.utility__pin { display: inline-flex; align-items: center; gap: 6px; }
.utility__pin svg { width: 13px; height: 13px; color: var(--c-accent); flex: none; }
@media (max-width: 620px) { .utility__pin { display: none; } }

/* --- Find us (home) --------------------------------------------------------
   The map carries the answer to "where are you?"; the panel beside it carries
   everything you would need once you decide to come. */
.visit {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--s-3);
  align-items: stretch;
}
.visit__map {
  position: relative; min-height: 340px;
  border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden;
  background: var(--c-bg-warm);
}
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.visit__panel {
  padding: var(--s-4); background: var(--c-bg-inverse); color: var(--c-on-inverse);
  border-radius: var(--r); display: flex; flex-direction: column;
}
.visit__panel .label--accent { color: var(--c-accent); }
.visit__addr {
  font-style: normal; font-size: 1.0625rem; line-height: 1.5;
  margin-top: var(--s-2); color: #fff;
}
.visit__meta { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid rgba(255,255,255,0.14); }
.visit__meta > div { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: 6px; }
.visit__meta dt {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em; color: #9A9A9A;
}
.visit__meta dt .ico { width: 15px; height: 15px; color: var(--c-accent); }
.visit__meta dd { margin: 0; font-size: var(--t-small); color: #EDEDED; text-align: right; }
.visit__panel .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.visit__panel .btn--ghost:hover { border-color: #fff; }
/* The panel is the narrow column, so the two actions stack full width rather
   than wrapping into a ragged second row. */
.visit__actions { display: grid; gap: var(--s-2); margin-top: auto; padding-top: var(--s-4); }
.visit__actions .btn { width: 100%; }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; }
  .visit__map { min-height: 300px; }
}

/* ==========================================================================
   REFERENCE-LAYOUT SKIN
   Applies the rounded, elevated, lighter visual system from the approved
   mockup. Structure, tokens and spacing are unchanged — this is presentation
   only, so it lands across all 57 pages without touching page templates.
   ========================================================================== */

/* --- Surfaces ------------------------------------------------------------ */
.card, .story, .trainer, .review, .pillar, .formcard, .expbox, .figure,
.modal__box, .mega, .advisor__panel, .note, .logoslot, .workitem {
  border-radius: var(--r);
}
.card, .story, .trainer, .review, .formcard, .expbox {
  box-shadow: var(--sh-1);
  border-color: #ECECEA;
  transition: box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
.card:hover, .pillar:hover { box-shadow: var(--sh-2); border-color: #E2E2DF; }
.card { overflow: hidden; }
.card__media, .card__media--photo { border-radius: 0; }
.card__media { border-bottom: 0; }

.pillar {
  border-radius: var(--r); border: 1px solid #ECECEA; border-top: 2px solid var(--c-accent);
  background: #fff; box-shadow: var(--sh-1);
}

/* --- Controls ------------------------------------------------------------ */
.btn { border-radius: var(--r-sm); font-weight: 700; }
.btn--primary { box-shadow: 0 1px 2px rgba(212,32,39,.18), 0 8px 20px -10px rgba(212,32,39,.55); }
.btn--primary:hover { box-shadow: 0 2px 4px rgba(212,32,39,.2), 0 12px 26px -10px rgba(212,32,39,.7); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); border-color: #E2E2DF; }
.chip { border-radius: var(--r-pill); border-color: #E4E4E1; }
.choice span { border-radius: var(--r-sm); }
.tag { border-radius: var(--r-sm); }

/* --- Section rhythm: lighter, airier ------------------------------------ */
.section--warm { background: #FAFAF9; }
.section--rule { border-top: 0; }
.section { padding-block: clamp(var(--s-8), 7vw, var(--s-16)); }

/* --- Elevated statistics card ------------------------------------------- */
.statbar { border-radius: var(--r-lg); box-shadow: var(--sh-3); border-color: #262626; overflow: hidden; }

/* --- Dark work strip ----------------------------------------------------- */
.workstrip { border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.workitem { border-radius: var(--r-sm); }

/* --- Section markers: red dot, matching the reference -------------------- */
.marker .label::before { border-radius: 50%; width: 7px; height: 7px; }
.marker::after { display: none; }
.marker { margin-bottom: var(--s-2); }

/* --- Hero: text left, imagery visible right ------------------------------ */
.hero__scrim {
  background:
    linear-gradient(94deg,
      rgba(16,16,18,0.88) 0%, rgba(16,16,18,0.82) 34%,
      rgba(16,16,18,0.58) 52%, rgba(16,16,18,0.20) 78%, rgba(16,16,18,0.06) 100%),
    /* a short bottom lift keeps the trust points legible over the drawings */
    linear-gradient(to top, rgba(16,16,18,0.34) 0%, rgba(16,16,18,0) 32%);
}
.hero__inner { padding-block: clamp(var(--s-8), 7.5vw, 132px); }
.hero__body { max-width: min(46rem, 100%); }
.hero h1 { letter-spacing: -0.025em; }
.t-hero { font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.25rem); line-height: 1.02; }
.hero__lead { color: #DCDCDC; }
@media (max-width: 900px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(16,16,18,.94), rgba(16,16,18,.86)); }
}

/* --- Header ------------------------------------------------------------- */
.header { border-bottom-color: #EDEDEB; box-shadow: 0 1px 0 rgba(20,20,20,.03); }
.mega { box-shadow: var(--sh-3); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --- Employer logo band -------------------------------------------------- */
.logoband { background: var(--c-bg-inverse); color: var(--c-on-inverse-2); border-top: 0; }
.logoband .label { color: #8E8E8E; }
.logomark {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 var(--s-2); color: #C9C9C9; text-align: center;
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  filter: grayscale(1); opacity: .78;
  transition: opacity var(--d-fast) ease-out, color var(--d-fast) ease-out;
}
.logomark:hover { opacity: 1; color: #fff; }
.logomark img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain;
                filter: brightness(0) invert(1); }
/* Carousel items keep the band's old column rhythm: s-2 padding + s-4 between. */
.logoband__track .logomark { flex: 0 0 auto; padding-inline: var(--s-4); }

/* --- Accordions / tables soften ----------------------------------------- */
.acc2 { border-radius: var(--r); overflow: hidden; border: 1px solid #ECECEA; }
.acc2__t { padding-inline: var(--s-3); }
.acc2__p { padding-inline: var(--s-3); }
.acc2__t:hover { background: #FAFAF9; padding-left: calc(var(--s-3) + 4px); }
.tbl { border: 1px solid #ECECEA; border-radius: var(--r); overflow: hidden; }
.tbl th { background: #FAFAF9; }
.factbar { border-radius: var(--r); border-color: #ECECEA; box-shadow: var(--sh-1); overflow: hidden; }
.subnav { border-bottom-color: #EDEDEB; }
.ribbon__tag { border-radius: var(--r-pill); }
.totop, .advisor__btn { border-radius: var(--r-pill); }
.stickycta { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* --- Video embeds (Life @ CADD, managed from the admin) ------------------- */
.vidgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(420px,100%), 1fr)); }
.vidbox { margin: 0; }
.vidbox__frame {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border: 1px solid #333; border-radius: var(--r); background: #000;
}
.vidbox__frame iframe, .vidbox__frame video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.vidbox figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--c-on-inverse-2); }


/* ==========================================================================
   HERO — responsive geometry
   The image is art-directed (three crops), so this only has to manage the box
   and the content. Height is viewport-aware and content-safe: the hero is
   never taller than the screen, and never shorter than its content needs.
   ========================================================================== */

.hero {
  display: flex;
  align-items: center;
  /* Sized against the space actually left under the sticky chrome. */
  min-height: min(92svh, 900px);
}
@supports not (height: 1svh) { .hero { min-height: min(92vh, 900px); } }

.hero__inner {
  width: 100%;
  /* Padding scales with the viewport but never squeezes the content out. */
  padding-block: clamp(var(--s-6), 6vh, var(--s-12));
}

.hero__body { max-width: min(46rem, 100%); }

/* Headline: sized so each mask line stays on ONE line at every width. */
.t-hero {
  font-size: clamp(2rem, 0.9rem + 3.9vw, 4rem);
  line-height: 1.02;
}
.hero__mask > span { white-space: nowrap; }
@media (max-width: 420px) {
  /* Below this the longest line cannot hold on one line at a readable size,
     so allow it to wrap rather than shrink the type into illegibility. */
  .hero__mask > span { white-space: normal; }
  .t-hero { font-size: clamp(1.75rem, 1.1rem + 5.2vw, 2.5rem); }
}

/* Short laptops: reclaim vertical space so the trust points stay in view. */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--s-6); }
  .t-hero { font-size: clamp(2rem, 0.6rem + 3.2vw, 3.25rem); }
  .hero__lead { margin-bottom: var(--s-3); }
  .trustpts { margin-top: var(--s-4); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .hero__sub { display: none; }
  .trustpts { margin-top: var(--s-3); }
}

/* Media layer fills whatever box the content produces. */
.hero__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__photo picture { display: block; width: 100%; height: 100%; }

/* Cross-fading slides. All stacked in the same box; only the active one is
   opaque. Slides after the first are inert until initHeroSlides() promotes
   them, so with JavaScript off the first slide is a plain static hero. */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1200ms var(--e-out);
}
.hero__slide[data-active="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* No cross-fade, and initHeroSlides() does not advance at all — the first
     slide simply stays put. */
  .hero__slide { transition: none; }
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 58% center;
}
@media (max-width: 1023px) { .hero__photo img { object-position: 60% center; } }
@media (max-width: 599px)  { .hero__photo img { object-position: 56% 40%; } }

/* Scrim: horizontal on wide screens where the text sits left; vertical on
   narrow screens where the text sits over the whole image. */
.hero__scrim {
  background:
    linear-gradient(94deg,
      rgba(16,16,18,0.88) 0%, rgba(16,16,18,0.82) 34%,
      rgba(16,16,18,0.58) 52%, rgba(16,16,18,0.20) 78%, rgba(16,16,18,0.06) 100%),
    linear-gradient(to top, rgba(16,16,18,0.34) 0%, rgba(16,16,18,0) 32%);
}
@media (max-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(16,16,18,0.62) 0%, rgba(16,16,18,0.78) 45%,
                              rgba(16,16,18,0.92) 100%);
  }
}

/* Trust points: never a cramped 4-up on a phone. */
.trustpts { margin-top: clamp(var(--s-3), 4vh, var(--s-6)); }
@media (max-width: 900px) { .trustpts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-2); } }
@media (max-width: 380px) { .trustpts { gap: 10px; }
  .trustpt { gap: 8px; }
  .trustpt svg { width: 18px; height: 18px; } }
.trustpt span { font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); }

/* CTAs stack cleanly rather than overflowing. */
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hero__actions .btn { flex: 0 0 auto; } }

/* The drafting crosshair reads as a stray artefact over a photograph. */
.hero .crosshair { display: none; }

/* The overlapping stat card must not collide on small screens. */
@media (max-width: 767px) { .statbar-wrap { margin-top: calc(var(--s-4) * -1); } }


/* Short phones: the hero must not exceed the screen. Trim the vertical
   rhythm rather than shrinking type below a readable size. */
@media (max-width: 767px) and (max-height: 740px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--s-4); }
  .hero__sub { display: none; }
  .hero__lead { margin-bottom: var(--s-3); font-size: var(--t-body); }
  .hero__kicker { margin-bottom: var(--s-2); }
  .trustpts { margin-top: var(--s-3); }
  .t-hero { font-size: clamp(1.625rem, 1rem + 4.6vw, 2.125rem); }
}
/* Very short phones in landscape-ish ratios */
@media (max-width: 767px) and (max-height: 640px) {
  .trustpts { display: none; }   /* the stat bar below carries the same proof */
}

/* In the single-file preview images are painted as CSS backgrounds, which
   ignore object-position. Mirror the hero focal point so the preview frames
   the shot the same way the deployed site does. */
.hero__photo .ph { background-position: 58% center; }
@media (max-width: 1023px) { .hero__photo .ph { background-position: 60% center; } }
@media (max-width: 599px)  { .hero__photo .ph { background-position: 56% 40%; } }

/* ==========================================================================
   Buttons on photographic / dark backgrounds
   The hero is not .section--inverse, so it never picked up the white-on-dark
   button treatment and the secondary button rendered near-black on a dark
   photograph. Handle any dark context explicitly.
   ========================================================================== */
.hero .btn--secondary,
.stickycta .btn--secondary,
.workstrip .btn--secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.72);
  /* A slight tint plus blur so the outline holds over any part of the image,
     including the bright sky on the right of the frame. */
  background: rgba(16,16,18,0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn--secondary:hover,
.stickycta .btn--secondary:hover,
.workstrip .btn--secondary:hover {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
.hero .btn--secondary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Ghost buttons in the same contexts */
.hero .btn--ghost, .workstrip .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,0.45);
}
.hero .btn--ghost:hover, .workstrip .btn--ghost:hover { border-color: #fff; }


/* ==========================================================================
   FIX — statistics card colliding with the hero on short viewports
   The card is pulled up by a negative margin. Previously the hero's bottom
   padding was independent of that pull, so on any viewport short enough to
   trigger the compact hero rules the card landed on top of the trust points.
   The hero now reserves the overlap explicitly.
   ========================================================================== */

.statbar-wrap { margin-top: calc(var(--statbar-overlap) * -1); }

.hero__inner {
  padding-bottom: calc(clamp(var(--s-6), 6vh, var(--s-12)) + var(--statbar-overlap));
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__inner { padding-bottom: calc(var(--s-6) + var(--statbar-overlap)); }
}
@media (max-width: 767px) {
  :root { --statbar-overlap: 32px; }
  .hero__inner { padding-bottom: calc(clamp(var(--s-4), 4vh, var(--s-8)) + var(--statbar-overlap)); }
}
@media (max-width: 767px) and (max-height: 740px) {
  .hero__inner { padding-bottom: calc(var(--s-4) + var(--statbar-overlap)); }
}

/* ==========================================================================
   FIX — layout shifting after scrolling
   When a scrollbar appears or disappears the CSS viewport width changes, and
   every vw-based clamp (hero type, padding, grid) recalculates. That is why
   the page looked different after scrolling down and back up. Reserving the
   gutter keeps the viewport width constant for the whole session.
   ========================================================================== */
html { scrollbar-gutter: stable; }

/* Opening the drawer or modal locks body scroll. Without compensation the
   scrollbar vanishes and everything reflows sideways. */
body.is-locked { overflow: hidden; }

/* Belt and braces: the hero must never be shorter than its own content. */
.hero { min-height: min(92svh, 900px); }
@supports not (height: 1svh) { .hero { min-height: min(92vh, 900px); } }
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { min-height: 0; height: auto; }
}

/* ==========================================================================
   AUDIENCE SECTION — "Where are you right now?"
   Architectural backdrop bleeding in from the right, veiled to near-white
   behind the copy so the type never fights the image.
   ========================================================================== */

.audience { position: relative; isolation: isolate; overflow: hidden; background: #FBFBFA; }
.audience__bg { position: absolute; inset: 0; z-index: -2; }
.audience__bg img,
.audience__bg .ph { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.audience__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, #FBFBFA 0%, #FBFBFA 30%, rgba(251,251,250,0.88) 46%,
                    rgba(251,251,250,0.45) 62%, rgba(251,251,250,0.12) 82%, rgba(251,251,250,0) 100%),
    linear-gradient(to bottom, rgba(251,251,250,0.55) 0%, rgba(251,251,250,0) 26%);
}
@media (max-width: 900px) {
  .audience__bg img, .audience__bg .ph { object-position: 72% center; }
  .audience__veil {
    background: linear-gradient(to bottom, rgba(251,251,250,0.94) 0%,
                rgba(251,251,250,0.90) 55%, rgba(251,251,250,0.95) 100%);
  }
}

.audience__inner { position: relative; }
.audience__eyebrow { margin-bottom: var(--s-2); }
.audience__h { letter-spacing: -0.03em; margin-bottom: var(--s-2); }
.audience__h em { font-style: normal; color: var(--c-accent); }
.audience__rule {
  display: block; width: 56px; height: 3px; background: var(--c-accent);
  margin: 0 0 var(--s-3);
}
.audience__sub { max-width: 46ch; margin-bottom: var(--s-6); }
@media (max-width: 767px) { .dtop { display: none; } }

/* --- cards --------------------------------------------------------------- */
.audgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gutter); }
@media (max-width: 1100px) { .audgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .audgrid { grid-template-columns: 1fr; } }

.audcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #EDEDEB; border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3) var(--s-4);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 14px 34px -18px rgba(20,20,20,.18);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
.audcard:hover {
  transform: translateY(-4px); border-color: #E0E0DD;
  box-shadow: 0 4px 10px rgba(20,20,20,.06), 0 26px 54px -22px rgba(20,20,20,.28);
}
/* The badge is the card's only mark before the photograph, so it carries the
   accent rather than whispering in grey. 52px is the smallest size at which a
   filled disc still reads as deliberate against a 240px-wide picture. */
.audcard__top { display: flex; align-items: center; }
.audcard__top svg { width: 26px; height: 26px; color: #fff; }
.audcard__top::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
}
.audcard__top {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  justify-content: center; flex: 0 0 auto;
  background: var(--c-accent); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(212,32,39,.55);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.audcard:hover .audcard__top {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 22px -8px rgba(212,32,39,.7);
}
@media (prefers-reduced-motion: reduce) {
  .audcard:hover .audcard__top { transform: none; }
}

.audcard__art { margin: var(--s-3) 0 var(--s-4); }
.cardart { display: block; width: 100%; height: auto; }

.audcard__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.audcard__d { font-size: 1rem; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 var(--s-3); }

.audcard__cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding-bottom: 6px; border-bottom: 2px solid var(--c-accent);
  transition: gap var(--d-fast) ease-out, color var(--d-fast) ease-out;
}
.audcard__cta svg { width: 20px; height: 12px; color: var(--c-accent); }
.audcard:hover .audcard__cta { gap: 15px; color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  .audcard, .audcard__cta { transition: none; }
  .audcard:hover { transform: none; }
}

/* Cap the illustration so it cannot balloon if the grid falls back to a
   single full-width column (old engines, or a very narrow container). */
.audcard__art { width: 100%; max-width: 300px; margin-inline: auto; }
.cardart { max-height: 190px; }

/* A card whose art is a photograph rather than a drawing. The asset is padded
   to the drawings' 260:150 box on white, so it occupies the identical space and
   the row keeps its rhythm — no crop, no height jump. */
.cardart--photo { display: block; width: 100%; }
.cardart--photo img {
  display: block; width: 100%; height: auto;
  max-height: 190px; object-fit: contain;
}

/* No-grid fallback: keep the cards in a readable row/stack rather than
   letting each one span the full page width. */
@supports not (display: grid) {
  .audgrid { display: flex; flex-wrap: wrap; gap: var(--gutter); }
  .audgrid > * { flex: 1 1 260px; }
}

/* ==========================================================================
   Google reviews — summary, blue "All reviews" button, card carousel
   Cards carry the attribution a Google review needs (reviewer, when, rating,
   the Google mark) and use Google's gold and blue, so the rating reads as
   theirs rather than ours. The track scrolls natively; arrows are an
   enhancement and hide themselves when everything already fits.
   ========================================================================== */
.grr, .grsum { --grr-star: #FBBC04; --grr-blue: #1A73E8; }

/* --- Summary line: score, stars, count, and the way out to Google -------- */
.grsum {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.grsum__g { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.grsum__g svg { display: block; width: 100%; height: 100%; }
.grsum__score { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.grsum__meta { display: flex; flex-direction: column; gap: 2px; }
.grsum__count { font-size: 0.9375rem; color: var(--c-ink-muted); }
.grsum .btn--google { margin-left: auto; }
@media (max-width: 640px) { .grsum .btn--google { margin-left: 0; width: 100%; justify-content: center; } }

/* Google blue, because a link out to Google should look like one. */
.btn--google {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--grr-blue); color: #fff; border: 1px solid var(--grr-blue);
}
.btn--google:hover { background: #1667D3; border-color: #1667D3; color: #fff; }
.btn__gicon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff;
}
.btn__gicon svg { display: block; width: 100%; height: 100%; }

/* --- Carousel ------------------------------------------------------------ */
.grr { position: relative; }
.grr__track {
  display: flex; gap: var(--s-3);
  padding-top: 30px;                 /* room for the avatar on the card edge */
  padding-bottom: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.grr__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .grr__track { scroll-behavior: auto; } }

.grr__card {
  position: relative; flex: 0 0 calc((100% - 2 * var(--s-3)) / 3 - 1px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 4px;
  padding: 40px var(--s-3) var(--s-3);
  background: var(--c-bg-warm); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,.05);
}
@media (max-width: 1024px) { .grr__card { flex-basis: calc((100% - var(--s-3)) / 2 - 1px); } }
@media (max-width: 640px)  { .grr__card { flex-basis: 88%; } }

/* Avatar: the reviewer's Google photo when there is one, else their initial on
   a colour derived from the name, with the Google mark on the corner. */
.grr__avatar {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grr-av, #DDD); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.375rem; line-height: 1;
  box-shadow: 0 0 0 3px var(--c-bg);
}
.grr__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.grr__g {
  position: absolute; right: -3px; bottom: -3px;
  width: 24px; height: 24px; padding: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.08);
}
.grr__g svg { display: block; width: 100%; height: 100%; }

.grr__name { font-weight: 700; font-size: 1rem; }
.grr__when { font-size: 0.875rem; color: var(--c-ink-muted); }

.grr__rating { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.grr__stars { color: var(--grr-star); letter-spacing: 2px; font-size: 1.125rem; line-height: 1; }
.grr__check { display: block; width: 16px; height: 16px; color: var(--grr-blue); }
.grr__check svg { display: block; width: 100%; height: 100%; }

/* Header rows stay top-aligned so names and dates line up across the row;
   the quote takes the leftover space and centres itself in it. */
.grr__text {
  margin-block: auto;
  font-size: 1rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.grr__text.is-open { -webkit-line-clamp: unset; overflow: visible; }
.grr__more {
  margin-top: 6px; font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  color: var(--grr-blue); background: none; border: 0; padding: 0; cursor: pointer;
}
.grr__more:hover { text-decoration: underline; }

.grr__nav {
  position: absolute; top: calc(50% + 15px); transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-border); box-shadow: 0 2px 12px rgba(20,20,20,.10);
  cursor: pointer;
  transition: opacity var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.grr__nav svg { width: 16px; height: 16px; }
.grr__nav:hover { background: var(--c-bg-warm); }
.grr__nav[disabled] { opacity: 0.3; cursor: default; }
.grr__nav--prev { left: -18px; }
.grr__nav--next { right: -18px; }
@media (max-width: 1240px) {
  .grr__nav--prev { left: -8px; }
  .grr__nav--next { right: -8px; }
}
@media (max-width: 640px) {
  .grr__nav { width: 34px; height: 34px; }
}