/* ============================================================
   INDITECH — static multi-page site · design system v4
   ------------------------------------------------------------
   Brand: navy #002060 · yellow #f0dc01 · gray #a6a6a6
   Academy green (academy.html only): #267A48 / #467C45
   Type: Plus Jakarta Sans (display) + system stack (body)

   This file is the LAYOUT. You normally never edit it —
   all text lives in /content/*.js, colors live below in :root.
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* v9.25 — the LOGO wordmark is Roboto (the director's brand choice).
   One variable file covers every weight the lockup uses (word 800,
   sub-line 600); it is self-hosted next to the site font, so the
   logo renders identically on every host and offline. Only the
   .brand lockup switches — the rest of the site keeps its font. */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand ---- */
  --navy: #002060;
  --navy-2: #001740;
  --navy-3: #00102c;
  --royal: #1b3fae;
  --sky: #5d7fe8;
  --yellow: #f0dc01;
  --yellow-2: #ffe95c;
  --gold-deep: #b8a600;
  --gray: #a6a6a6;

  /* ---- academy green ---- */
  --green: #267A48;
  --green-2: #467C45;
  --green-mid: #1e5c38;
  --green-deep: #123f26;
  --green-tint: #eef5f0;
  --green-tint-2: #dfeee3;

  /* ---- neutrals ---- */
  --paper: #ffffff;
  --cloud: #f4f6fb;
  --mist: #eaeef7;
  --line: #e3e7f1;
  --line-soft: #edeff6;
  --ink: #171a2e;
  --muted: #565d72;
  --muted-2: #565d72;

  /* ---- effects ---- */
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 60, .05), 0 3px 10px rgba(20, 24, 60, .06);
  --shadow-md: 0 2px 6px rgba(20, 24, 60, .06), 0 14px 34px rgba(20, 24, 60, .10);
  --shadow-lg: 0 8px 22px rgba(0, 12, 46, .16), 0 28px 60px rgba(0, 12, 46, .22);
  --shadow-yellow: 0 10px 26px rgba(200, 182, 0, .35);
  --shadow-green: 0 10px 26px rgba(23, 74, 45, .30);

  /* ---- gradients (the "no plain backgrounds" system) ---- */
  --grad-navy-deep: linear-gradient(168deg, #00215f 0%, #001642 52%, #000f30 100%);
  --grad-navy-band: linear-gradient(180deg, #00133a 0%, #001d54 55%, #001237 100%);
  --grad-royal-tile: linear-gradient(145deg, #12327f, #002060 70%);
  --grad-yellow-btn: linear-gradient(180deg, #fff070 0%, #f0dc01 100%);
  --grad-yellow-band: linear-gradient(122deg, #fff3a6 0%, #f5e208 45%, #e3cf02 100%);
  --grad-green-hero: linear-gradient(165deg, #2c8352 0%, #1f6440 55%, #144a2d 100%);
  --grad-green-band: linear-gradient(180deg, #1e5c38 0%, #267A48 60%, #1a4f31 100%);
  --grad-green-tile: linear-gradient(145deg, #2a7a4b, #1e5c38 75%);
  --grad-footer: linear-gradient(180deg, #001238 0%, #00091f 100%);
  --grad-text-navy: linear-gradient(92deg, #002060 10%, #244bb3 90%);
  --grad-border-card: linear-gradient(140deg, rgba(0, 32, 96, .22), rgba(93, 127, 232, .16) 55%, rgba(240, 220, 1, .34));

  /* v9.11 — theme tokens. The values below ARE the shipped Inditech
     look; the Theme tab (admin) overrides them through the CSSOM before
     the page renders, recolouring every surface that reads them. */
  --hl-band: rgba(240, 220, 1, .55);        /* the H marker band on light bands */
  --hl-band-dark: rgba(255, 228, 92, .40);  /* the H marker band on dark bands */
  --sweep: rgba(240, 220, 1, .55);          /* the gold sweep under heading accents */
  --accent-ink: #8a7400;                    /* the A accent as TEXT in paragraphs */
  --band-light: #f6f8fd;                    /* light (cream) section band stops */
  --band-light-2: #edf1fa;
  --band-grey-hi: #f2f6fd;                  /* grey section band stops */
  --band-grey: #e8edf9;
  --band-grey-lo: #dfe7f5;
  --nav-bg-rgb: 255, 255, 255;              /* navigation bar (scrolled) colour */

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* fluid container: keeps 1160px on normal laptops, then GROWS with the
     viewport (80vw) up to 1760px — on a 2240px-wide screen the old fixed
     1160px column left ~540px of dead space on each side and everything
     (hero text, photos, cards) looked tiny and crammed in the middle */
  --wrap: clamp(1160px, 80vw, 1760px);
  --nav-h: 72px;
  --topbar-h: 36px;
}

/* ============ reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem; /* rem, so accessibility A+/A− scales all text */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.16; letter-spacing: -.01em; color: var(--navy-2); margin: 0 0 .5em; }
/* headlines keep growing past the old 53.6px ceiling — a 2240px-wide
   screen gets a ~75px h1 instead of the old capped one */
h1 { font-size: clamp(2.15rem, 2.5vw + 1rem, 3.85rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.9vw + .8rem, 3.05rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(240, 220, 1, .6); color: var(--navy-3); }

.wrap { width: min(var(--wrap), calc(100% - clamp(56px, 9vw, 220px))); margin-inline: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* ---- yellow highlight for <em> inside headings ---- */
h1 em, h2 em, h3 em { font-style: normal; }
h1 em, h2 em {
  background: linear-gradient(180deg, transparent 60%, var(--sweep) 60%);
  color: var(--navy);
  padding: 0 .06em;
}
/* dark contexts: plain yellow text instead of the sweep */
.hero h1 em, .page-hero h1 em, .academy-hero h1 em, .article-hero h1 em,
.band-navy h2 em, .band-green h2 em, .acad-teaser h2 em,
.cert-detail h3 em, .on-dark h1 em, .on-dark h2 em, .on-dark h3 em {
  background: none;
  color: var(--yellow);
}
.academy-hero h1 em, .on-green h1 em, .on-green h2 em { color: var(--yellow-2); }

/* ---- v9.39 (academy parity): the A (accent) treatment works in ALL
   text inside <main>, not only headings and paragraphs — sub-lines,
   quotes, stat labels and table cells render it as the brand's gold
   emphasis instead of plain italic. <i> (the I button) stays the true
   italic, so nothing is lost. Gold text on light bands, yellow on
   dark ones (v9.11/v9.16: colour, never weight — a weighted accent
   read as "this text became bold"). ---- */
main em {
  font-style: normal;
  color: var(--accent-ink);
  padding: 0 .06em;
}
/* v9.40 fix — HEADINGS keep the classic gold sweep. This rule was
   lost when the two sites' CSS were unified in v9.39, so every
   heading <em> ("Independent GRC advice, since 2011") turned gold
   text overnight. The A accent colour belongs to body words only;
   h1/h2 accents are the navy-on-gold-sweep look again, exactly as
   the shipped sites rendered them before v9.39. */
h1 em, h2 em {
  font-style: normal;
  font-weight: inherit;
  background: linear-gradient(180deg, transparent 60%, var(--sweep) 60%);
  color: var(--navy);
  padding: 0 .06em;
}
.band-navy em, .band-green em, .on-dark em, .on-green em,
.hero em, .page-hero em, .academy-hero em, .article-hero em {
  background: none;
  color: var(--yellow);
}


/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none !important; line-height: 1.2;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(240, 220, 1, .8); outline-offset: 2px; }

.btn-yellow {
  background: var(--grad-yellow-btn);
  color: var(--navy-3);
  box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-yellow:hover { box-shadow: 0 14px 32px rgba(200, 182, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55); }

.btn-navy {
  background: linear-gradient(180deg, #0a2a78, var(--navy) 70%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 22, 70, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-navy:hover { box-shadow: 0 14px 30px rgba(0, 22, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .14); }

.btn-green {
  background: var(--grad-green-tile);
  color: #fff;
  box-shadow: var(--shadow-green), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255, 255, 255, .08); }

.btn-ghost-navy { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(0, 32, 96, .38); }
.btn-ghost-navy:hover { box-shadow: inset 0 0 0 1.5px var(--navy); background: rgba(0, 32, 96, .05); }

.btn-sm { padding: 10px 20px; font-size: .93rem; }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* ============ logo (colors are NEVER changed) ============ */
/* v9.31 — the wordmark is bigger (Roboto 800 renders smaller than the
   old display face, the words looked lost next to the 40px badge) and
   the whole lockup is themeable from the admin's Theme tab → "Logo &
   wordmark": --brand-mark (badge size), --brand-word-size (wordmark
   size), --brand-word-color (word colour; empty = follow the heading
   colour). The admin writes them through content/theme.js; these
   fallbacks ARE the shipped look, so a site without a saved theme
   renders identically. Dark surfaces keep their white-word overrides
   below — they win by specificity.
   v9.50 — THE LOCKUP IS EVEN (the request: "see the logo and the text
   not even"). Roboto's tall letters (d, t, h) reach 0.75em, so the old
   40px words beside the 40px badge drew a 30px-tall "inditech" under
   a 40px card — the badge always read bigger than the words. The
   shipped pair is now a 34px badge with 46px words: the letters'
   visual height (34.5px) matches the card (34px), so logo and text
   read as ONE even line. A custom theme still wins, as before. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Roboto", var(--font-display); font-weight: 800;
  font-size: var(--brand-word-size, 2.875rem);
  line-height: 1;
  color: var(--brand-word-color, var(--navy));
  text-decoration: none !important; letter-spacing: -.02em;
}
.brand .mark {
  width: var(--brand-mark, 34px); height: var(--brand-mark, 34px);
  border-radius: 11px; flex: 0 0 auto;
  background: #ffffff; border: 1px solid rgba(0, 32, 96, .10);
  box-shadow: 0 3px 10px rgba(0, 20, 66, .14);
  display: block; padding: 5px;
}
.brand .mark line { stroke-width: 5.6; stroke-linecap: round; }
.brand .b1 { stroke: #a6a6a6; }
.brand .b2 { stroke: #f0dc01; }
.brand .b3 { stroke: #002060; }
/* the official R badge (R.webp) used as the header/footer logo mark —
   the squircle IS the card, so no inner padding */
.brand img.mark { padding: 0; border-radius: 12px; object-fit: contain; }
/* v9.32 — a CUSTOM logo image (Theme tab → Logo & wordmark): it rides
   at the badge height and keeps its own shape — a wide mark grows to
   the right instead of squashing into a square. The white card keeps
   it visible on both light and dark headers; if the file ever goes
   missing the renderer swaps the shipped R badge back in. */
.brand img.mark.custom {
  width: auto; min-width: var(--brand-mark, 34px); max-width: 220px;
  height: var(--brand-mark, 34px); object-fit: contain;
}
.brand .word { transition: color .25s; }
.brand .sub {
  display: block; font-size: .60rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: -3px;
}
/* logo on dark surfaces: white card keeps stripes, word goes white */
.on-dark .brand, .brand.on-dark { color: #fff; }
.on-dark .brand .mark { border-color: rgba(255, 255, 255, .22); box-shadow: 0 4px 16px rgba(0, 8, 30, .5); }

/* ============ top bar + header ============ */
.topbar {
  background: linear-gradient(90deg, var(--navy-3), var(--navy-2) 50%, var(--navy-3));
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  height: var(--topbar-h);
  display: flex; align-items: center;
  position: relative; z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar a { color: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--yellow); text-decoration: none; }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px rgba(240, 220, 1, .9); }
.topbar .tb-right { display: flex; gap: 18px; align-items: center; }
.topbar .tb-tag { color: rgba(255, 255, 255, .55); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0);
  transition: background .28s ease, box-shadow .28s ease;
}
.site-header.scrolled {
  background: rgba(var(--nav-bg-rgb), .97);
  box-shadow: 0 6px 24px rgba(10, 20, 60, .10);
}
.site-header .nav-row {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
/* transparent-header pages (hero behind) start with white text */
.page-has-hero .site-header:not(.scrolled) .nav-row { color: #fff; }
.page-has-hero .site-header:not(.scrolled) .brand { color: #fff; }
.page-has-hero .site-header:not(.scrolled) .nav-links a { color: rgba(255, 255, 255, .88); }
.page-has-hero .site-header:not(.scrolled) .nav-links a::after { background: var(--yellow); }
.page-has-hero .site-header:not(.scrolled) .nav-links a.active { color: #fff; }
.page-has-hero .site-header:not(.scrolled) .nav-links a.active::after { left: 0; right: 0; width: auto; }

.nav-links { display: flex; gap: 4px; align-items: center; min-width: 0; }
.nav-links a {
  position: relative; padding: 9px 13px; border-radius: 10px;
  /* v9.52 — the v9.50 themeable menu type (--nav-fs / --nav-ink) is
     RETIRED: the menu words carry their own formatting from the Header
     tab's rich editors, and the shipped size / colour returns. The
     transparent hero header keeps its white text (the rules below
     out-rank this one there). */
  color: var(--navy-2); font-weight: 600; font-size: .93rem;
  text-decoration: none !important;
  white-space: nowrap; /* v9.39: a label never wraps mid-word when the menu is full */
}
.nav-links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2.5px;
  border-radius: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--navy); }
.nav-links a.academy-link { color: var(--green); font-weight: 700; }
.page-has-hero .site-header:not(.scrolled) .nav-links a.academy-link { color: #7fe0a5; }

/* ============================================================
   v9.52 — MENU WORDS STAY READABLE THROUGH THE HEADER TRANSITION.
   The header switches surface as you scroll: transparent over the
   navy hero at the top, white once it sticks. A colour picked on a
   menu word (the Header tab's rich toolbar) now flips to its twin
   for the surface it sits on, exactly like the topbar and footer
   words already do — so nothing a menu word can wear ever turns
   unreadable on either side of the transition.
   ============================================================ */
/* on the WHITE bar (scrolled, or a page without a hero): the white
   words flip to navy, the pale colours take their light-surface
   look — the dark palette colours already read well on white */
.site-header .nav-links a span.c-white { color: var(--navy-2, #123594); }
/* back to white over the navy hero at the top of a hero page */
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-white { color: #fff; }
/* and over that same navy hero, the DARK palette words flip to their
   light twins (the topbar's own mapping) */
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-navy { color: #9fc0ff; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-green { color: #7ede5a; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-blue { color: #93c5fd; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-teal { color: #5eead4; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-red { color: #ff9d94; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-orange { color: #fdba74; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-purple { color: #c4b5fd; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-slate { color: #cbd5e1; }
.page-has-hero .site-header:not(.scrolled) .nav-links a span.c-gold { color: var(--yellow-2); }

/* ============================================================
   v9.39 — MENU AUTO-FIT. The menu is an editable list (the admin's
   Header tab: add / remove / relabel items), so no fixed breakpoint
   can know when it stops fitting. app.min.js MEASURES the real row
   and walks these steps until everything fits:
     .nav-compact   — the links tighten (gap + padding only)
     .nav-tight     — the yellow / green button slims
     .nav-collapsed — the links fold into the burger menu and the
                      MENU pill centres itself in the header (v9.42),
                      so the fold is unmistakable while the call to
                      action keeps its place on the right.
   v9.47 — THE FONT SIZE NEVER SHRINKS (the request: “if the header
   navigation not fit, auto to = Menu, not minimize the font size”):
   every font-size override that used to shrink the links or the
   button on narrower screens is gone. The menu keeps its full-size
   type at every width; when even the tightened padding cannot host
   it, it folds into the MENU pill — never into smaller text.
   The classes are removed again when the window grows. The CSS
   burger at max-width: 980px keeps owning narrow screens as before.
   ============================================================ */
.site-header.nav-compact .nav-links { gap: 0; }
.site-header.nav-compact .nav-links a { padding: 8px 7px; }
.site-header.nav-compact .nav-links a::after { left: 7px; right: 7px; }
/* the whole right cluster tightens with the links, so the yellow
   button survives on every common laptop width (1366–1536) and only
   slims when the menu is genuinely too full — it never leaves the
   header above phone width (v9.42: “get a quote” stays visible) */
.site-header.nav-compact .nav-actions { gap: 8px; }
.site-header.nav-compact .lang button { padding: 7px 9px; }
.site-header.nav-compact .nav-actions .btn { padding: 9px 15px; }
.site-header.nav-tight .nav-actions .btn { padding: 8px 12px; }
/* v9.47 — nav-tight tightens the LINKS and the switcher one notch
   further (padding only — the font size stays the full .93rem), so
   keeping the quote button costs as little room as possible */
.site-header.nav-tight .nav-links { gap: 0; }
.site-header.nav-tight .nav-links a { padding: 7px 5px; }
.site-header.nav-tight .nav-links a::after { left: 5px; right: 5px; }
.site-header.nav-tight .lang button { padding: 6px 7px; }
.site-header.nav-tight .nav-actions { gap: 6px; }
.site-header.nav-tight .nav-actions .btn { padding: 7px 10px; }
.site-header.nav-collapsed .nav-links { display: none; }
.site-header.nav-collapsed .nav-burger { display: inline-flex; }
/* v9.42 — whenever the links are folded on a NON-PHONE screen, the MENU
   pill moves to the MIDDLE of the header row (the request: “if it
   overflow, the menu should be at the middle if not at phone layout”):
   logo on the left, the gold-accented pill dead centre — impossible to
   miss — and the language switch + quote button keep the right corner.
   Two ranges need it: the desktop auto-fit fold (nav-collapsed, >980px)
   and the tablet CSS-burger row (641–980px, where the links hide by
   width). The pill is lifted out of the flow so the right cluster keeps
   its alignment; on phones (≤640px) the compact icon returns to the
   right corner, like a normal phone header. */
@media (min-width: 981px) {
  .site-header.nav-collapsed .nav-row { position: relative; }
  .site-header.nav-collapsed .nav-burger {
    position: absolute; left: 50%; top: 50%; margin-left: 0;
    transform: translate(-50%, -50%);
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .site-header .nav-row { position: relative; }
  .site-header .nav-burger {
    position: absolute; left: 50%; top: 50%; margin-left: 0;
    transform: translate(-50%, -50%);
  }
  /* v9.43 — the tablet fold gets the same loud gold pill as the desktop
     auto-fit fold: the menu is the one thing that moved, so it is the
     one thing that glows. This media block sits ABOVE the base hero
     rules in the file, so a specificity TIE would lose — the hero-page
     selector here carries .nav-row too (0,5,0), which out-ranks the
     transparent hero style (0,4,0) wherever it applies. */
  .site-header .nav-row .nav-burger,
  .page-has-hero .site-header:not(.scrolled) .nav-row .nav-burger {
    border-color: var(--yellow); background: var(--yellow); color: var(--navy-3);
    box-shadow: 0 10px 26px rgba(240, 220, 1, .38);
  }
  .site-header .nav-row .nav-burger:hover,
  .site-header .nav-row .nav-burger:focus-visible,
  .page-has-hero .site-header:not(.scrolled) .nav-row .nav-burger:hover,
  .page-has-hero .site-header:not(.scrolled) .nav-row .nav-burger:focus-visible {
    background: #ffd400; border-color: #ffd400; color: var(--navy-3);
    box-shadow: 0 12px 30px rgba(240, 220, 1, .5);
  }
}
/* the sticky header never becomes the source of a horizontal scroll */
.site-header { overflow-x: clip; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang {
  display: inline-flex; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(0, 32, 96, .22);
}
.page-has-hero .site-header:not(.scrolled) .lang { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.lang button {
  border: 0; background: transparent; cursor: pointer;
  font: 700 .74rem/1 var(--font-display); letter-spacing: .06em;
  padding: 7px 12px; color: var(--navy);
}
.page-has-hero .site-header:not(.scrolled) .lang button { color: rgba(255, 255, 255, .95); }
.lang button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.page-has-hero .site-header:not(.scrolled) .lang button[aria-pressed="true"] { background: var(--yellow); color: var(--navy-3); }

/* v9.41 — the burger is a LABELED pill, not a bare icon: when the menu
   folds (the desktop auto-fit or a narrow screen), visitors see a clear
   “Menu” button in the brand style. v9.43 — the pill is LONGER and
   louder (the request: “make the menu button longer when it shrinks
   and put at the middle, it is not eye-catching”): 48px tall, bigger
   type, wider pads — and in the folded state it fills with the brand
   gold (see the folded rules below, which out-rank the hero rule), so
   the place the menu moved to is the first thing the eye finds. The
   icon keeps its two bars → X animation. */
.nav-burger {
  display: none; height: 48px; border-radius: 999px;
  border: 1.5px solid rgba(0, 32, 96, .28); cursor: pointer;
  background: rgba(0, 32, 96, .05);
  position: relative; align-items: center; padding: 0 48px 0 0; margin-left: 4px;
  font: 800 .95rem/1 var(--font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-burger .nav-burger-label { margin-left: 56px; font: inherit; }
/* v9.42 — the two bars are centred off 50% (not fixed top:18/24px),
   so the “=” sits exactly in the middle of the button at every size —
   on phones the icon also centres horizontally (the label is gone
   there, so the button is a pure 44px round icon). */
.nav-burger span {
  position: absolute; left: 17px; width: 19px; height: 2.6px; border-radius: 2px;
  background: currentColor; transition: transform .25s, top .25s;
}
.nav-burger span:nth-child(1) { top: calc(50% - 4.2px); }
.nav-burger span:nth-child(2) { top: calc(50% + 1.8px); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: calc(50% - 1.2px); transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { top: calc(50% - 1.2px); transform: rotate(-45deg); }
.nav-burger:hover, .nav-burger:focus-visible {
  background: var(--yellow); border-color: var(--yellow); color: var(--navy-3);
  box-shadow: 0 6px 18px rgba(240, 220, 1, .35);
}
.page-has-hero .site-header:not(.scrolled) .nav-burger {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); color: #fff;
}
.page-has-hero .site-header:not(.scrolled) .nav-burger:hover,
.page-has-hero .site-header:not(.scrolled) .nav-burger:focus-visible {
  background: var(--yellow); border-color: var(--yellow); color: var(--navy-3); box-shadow: 0 6px 18px rgba(240, 220, 1, .3);
}
/* the desktop auto-fit fold: v9.43 — the pill FILLS with the brand
   gold. “The menu lives here now” is the first thing the eye finds —
   a longer, solid-gold button dead centre. The hero-page variant is
   spelled out too (same specificity as the unscrolled-hero rule above,
   declared later so it wins) — without it the transparent hero style
   kept overriding the gold on every page with a hero band. */
.site-header.nav-collapsed .nav-burger,
.page-has-hero .site-header.nav-collapsed .nav-burger {
  border-color: var(--yellow); background: var(--yellow); color: var(--navy-3);
  box-shadow: 0 10px 26px rgba(240, 220, 1, .38);
}
.site-header.nav-collapsed .nav-burger:hover,
.site-header.nav-collapsed .nav-burger:focus-visible,
.page-has-hero .site-header.nav-collapsed .nav-burger:hover,
.page-has-hero .site-header.nav-collapsed .nav-burger:focus-visible {
  background: #ffd400; border-color: #ffd400; color: var(--navy-3);
  box-shadow: 0 12px 30px rgba(240, 220, 1, .5);
}

/* v9.41 — phones: the labeled pill folds back to the compact 44px
   icon — the label would not fit a phone row. It returns on every
   wider screen.
   v9.48 — the burger circle is YELLOW from the start (“not yellow
   until it being click or tap at the phone”).
   v9.50 — THE LOGO AND THE WORDS DO NOT SHRINK ON PHONES (the
   request: “if we hide the get a quote, I think the logo and the
   written text no need to be shrink”): the Get-a-Quote button is off
   the phone row (it waits inside the menu), so the whole lockup —
   badge, gap and wordmark — keeps its full theme size at phone
   widths. The row still cannot overflow: the lockup is the flex item
   that may shrink (min-width: 0) and the wordmark trims with an
   ellipsis only on the very narrowest screens. Below 370px the whole
   lockup (badge AND words together, keeping the even v9.50 ratio)
   rides one gentle vw ramp so even a 320px phone shows the full name. */
@media (max-width: 640px) {
  .nav-burger {
    width: clamp(38px, 10.5vw, 44px); height: clamp(38px, 10.5vw, 44px);
    padding: 0; margin-left: 2px;
  }
  .nav-burger .nav-burger-label { display: none; }
  .nav-burger span { width: clamp(15px, 4.4vw, 19px); left: calc(50% - clamp(7.5px, 2.2vw, 9.5px)); }
  /* 1 — the quote / register button is not on the phone row; the burger
     menu holds it at the end */
  .nav-actions .btn { display: none; }
  /* 2 — the burger is yellow BEFORE any tap, on hero bands and plain
     headers alike (the hero selector pair is spelled out so the
     unscrolled-hero rule cannot out-rank it) */
  .site-header .nav-row .nav-burger,
  .page-has-hero .site-header:not(.scrolled) .nav-row .nav-burger {
    background: var(--yellow); border-color: var(--yellow); color: var(--navy-3);
    box-shadow: 0 8px 22px rgba(240, 220, 1, .38);
  }
  .site-header .nav-row .nav-burger:active { box-shadow: 0 4px 12px rgba(240, 220, 1, .45); }
  /* 3 — v9.50: the LOCKUP KEEPS ITS FULL SIZE — no vw ramp on the
     badge or the words any more. The row that remains (lockup +
     language switch + burger) fits every common phone at the theme
     size; the ellipsis rules at the bottom of this block are the only
     safety net, for a very long custom wordmark. */
  /* the phone rows use more of the screen: 12px side margins, topbar
     and header aligned to the same edges */
  .site-header .nav-row { width: calc(100% - 24px); gap: 8px; }
  .topbar .wrap { width: calc(100% - 24px); }
  /* the right cluster keeps its shape at every width: the switcher’s
     type and pads ride the ramp too, and the cluster never shrinks —
     the brand absorbs the squeeze (min-width: 0 + ellipsis below) */
  .nav-actions { gap: clamp(6px, 2vw, 8px); flex-shrink: 0; }
  .lang button {
    padding: clamp(5px, 1.5vw, 6px) clamp(7px, 2vw, 8px);
    font-size: clamp(10.5px, 2.8vw, 11.8px);
  }
  /* the lockup's ANCHOR is the flex item of the row — it must be
     allowed to shrink (min-width: 0) or the wordmark pushes the
     language switcher and the button off the screen; the words then
     ellipsis instead */
  .site-header .nav-row > a { min-width: 0; display: flex; }
  .site-header .nav-row > a .brand { min-width: 0; }
  .site-header .brand .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* v9.52 — the phone lockup gives up A LITTLE of its size (the
     request: “the logo and text word seems too large”): the badge
     caps at 26px and the words at 34px on phones. A smaller custom
     lockup is never enlarged; a larger one only shrinks to the cap. */
  .site-header .brand { gap: 8px; }
  .site-header .brand .mark { width: min(var(--brand-mark, 34px), 26px); height: min(var(--brand-mark, 34px), 26px); }
  .site-header .brand .word { font-size: min(var(--brand-word-size, 2.875rem), 34px); }
}
/* v9.50 — the LAST-RESORT ramp for the narrowest phones (below 370px):
   the badge and the words give up the SAME share together, so the even
   lockup stays even while it shrinks. At 370px and above nothing
   scales at all — the full theme size shows. */
@media (max-width: 369px) {
  .site-header .brand { gap: 2.6vw; }
  .site-header .brand .mark {
    width: min(var(--brand-mark, 34px), 9.5vw); height: min(var(--brand-mark, 34px), 9.5vw);
  }
  .site-header .brand .word { font-size: min(var(--brand-word-size, 2.875rem), 12.9vw); }
}
/* v9.48 — the last-resort on the narrowest rows (the CSS-burger
   widths): when fitHeader() measures that even the compacted phone
   row cannot host everything, the yellow button leaves the ROW — the
   same call to action still waits at the end of the menu — so the
   brand, the language switch and the burger can never overlap or
   fall off the screen. The class leaves again the moment it fits. */
.site-header.nav-phone-min .nav-actions .btn { display: none; }

.mobile-menu {
  position: fixed; inset: calc(var(--nav-h)) 0 auto 0; z-index: 85;
  background: var(--grad-navy-deep);
  padding: 26px 24px 34px;
  box-shadow: 0 30px 60px rgba(0, 8, 30, .35);
  /* v9.48 — the menu may never run past the bottom of the screen: on a
     short phone, a landscape phone or with the visitor's larger text
     size, a long list used to leave its last items (Contact Us, a newly
     added menu item, the quote button) stranded below the fold with no
     way to reach them. The menu now scrolls INSIDE the space it has. */
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  display: block; padding: 13px 6px; color: rgba(255, 255, 255, .92);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.mobile-menu a.active { color: var(--yellow); }
.mobile-menu a.academy-link { color: #7fe0a5; }
.mobile-menu .btn { margin-top: 18px; }
/* the CTA button inside the burger menu must keep its BUTTON look:
   the generic ".mobile-menu a" rule above (white text, block display,
   border-bottom, 6px side padding) used to override .btn-yellow and
   made "Get a Quote" render as white text on a yellow pill */
.mobile-menu a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; font-size: .95rem;
  border-bottom: 0; border-radius: 999px; color: var(--navy-3);
}
body.academy .mobile-menu a.btn { color: #fff; }

/* ============ footer ============ */
.footer {
  background: var(--grad-footer);
  color: rgba(255, 255, 255, .78);
  position: relative;
  margin-top: 0;
}
/* glowing hairline on top of the footer */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 220, 1, .65) 30%, rgba(93, 127, 232, .5) 70%, transparent);
}
.footer-inner {
  display: grid; gap: clamp(30px, 3vw, 54px);
  /* exactly THREE columns for the three footer blocks (brand / links / contact).
     The old 4-column template left the last column empty — CONTACT was
     squeezed left of a ~300px dead zone and the address looked "pushed to
     the left". Now the contact column reaches the container's right edge. */
  grid-template-columns: 1.35fr .8fr 1.05fr;
  padding: 64px 0 46px;
}
.footer h4 {
  color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 16px; opacity: .92;
}
.footer .brand { color: #fff; }
/* v9.52 — the v9.50 themeable footer type (--foot-fs / --foot-ink) is
   RETIRED: the footer words carry their own formatting from the Footer
   tab's rich editors, and the shipped sizes / colours return. */
.footer p { font-size: .92rem; color: rgba(255, 255, 255, .66); }
.footer-links { display: grid; gap: 9px; }
.footer-links a {
  color: rgba(255, 255, 255, .74); font-size: .92rem; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-links a::before {
  content: ""; width: 5px; height: 5px; border-radius: 2px;
  background: var(--yellow); opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { opacity: 1; transform: translateX(0); }
.footer-contact { min-width: 0; }
.footer-contact p { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; line-height: 1.55; font-size: .92rem; color: rgba(255, 255, 255, .66); }
.footer-contact a { color: rgba(255, 255, 255, .85); }
.footer-contact a:hover { color: var(--yellow); }
/* the address block is a live Google Maps link — styled so it READS as a
   link: brighter text, dotted underline, and an explicit "Open in Google
   Maps" hint with an arrow. Nobody should have to copy-paste the address. */
.footer-contact a.addr-link { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; }
.footer-contact a.addr-link > span:not(.ic) { color: #fff; text-decoration: underline dotted rgba(255, 228, 92, .5); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.footer-contact a.addr-link .map-hint {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 5px;
  color: var(--yellow); font-weight: 700; font-size: .84rem; letter-spacing: .02em;
  text-decoration: none; transition: gap .18s ease;
}
.footer-contact a.addr-link .map-hint .arr { flex: 0 0 auto; }
.footer-contact a.addr-link:hover > span:not(.ic) { text-decoration-color: var(--yellow); }
.footer-contact a.addr-link:hover .map-hint { gap: 11px; }
.footer-contact a.addr-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
.footer-contact a.addr-link .ic { flex: 0 0 auto; }
.footer-contact .ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.footer .socials { display: flex; gap: 10px; margin-top: 16px; }
.footer .socials a {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8);
  transition: background .18s ease, color .18s ease;
}
.footer .socials a:hover { background: var(--yellow); color: var(--navy-3); }

/* socials on the contact page info card */
.socials.big { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.socials.big a {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; text-decoration: none;
  background: #eef1f8; color: var(--navy-2); border: 1px solid var(--line);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.socials.big a:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.socials.big a svg { width: 18px; height: 18px; }
/* v9.36 — CUSTOM social links: an uploaded logo renders exactly like the
   built-in platform icons, whatever its natural size (contain, centered) */
.socials a img {
  width: 16px; height: 16px; object-fit: contain; display: block;
  border-radius: 2px;
}
.socials.big a img { width: 18px; height: 18px; }

.affiliated {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 22px 0 8px;
}
.affiliated p { font-size: .8rem; color: rgba(255, 255, 255, .5); margin-bottom: 12px; }
.aff-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.aff-chips span {
  font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .75);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.aff-chips span small { color: rgba(255, 255, 255, .68); font-weight: 400; margin-left: 6px; }

.footer-bar {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; align-items: center;
  font-size: .8rem; color: rgba(255, 255, 255, .48);
}
.footer-bar p { margin: 0; }
.footer-bar .foot-sec { display: inline-flex; align-items: center; gap: 8px; }
.footer-bar .foot-sec::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #35c26e; box-shadow: 0 0 8px rgba(53, 194, 110, .8);
}

/* ============ section scaffolding ============ */
.section { padding: clamp(66px, 8.5vw, 108px) 0; position: relative; }
.section-head { max-width: 730px; margin-bottom: clamp(34px, 5vw, 54px); position: relative; }
/* inside the page container the head spans the full container width so
   the big outlined number ALWAYS anchors to the same right edge —
   this is the fix for numbers drifting to mid-page (v7 bug) */
.wrap .section-head { max-width: none; }
.wrap .section-head h2 { max-width: 730px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* editorial section number — big, outlined, anchored to the RIGHT
   of the section heading (matches the classic INDITECH look) */
.section-head .idx,
.split > .idx,
.acad-teaser .idx {
  position: absolute; top: -.32em; right: 0; z-index: 0;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.7rem, 6vw, 4.4rem); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.6px rgba(0, 32, 96, .38);
  user-select: none; pointer-events: none; margin: 0; display: block;
}
.split-copy { position: relative; }
.acad-teaser { position: relative; }
.section-head .idx.idx-green, .acad-teaser .idx.idx-green { -webkit-text-stroke-color: rgba(38, 122, 72, .5); }
.section-head .idx.idx-invert { -webkit-text-stroke-color: rgba(255, 255, 255, .5); }
.on-dark .section-head .idx, .on-green .section-head .idx { -webkit-text-stroke-color: rgba(255, 255, 255, .38); }
/* split number: anchored to the SPLIT container (never inside the
   reveal-transformed copy column — a transformed ancestor hijacks the
   absolute positioning and the number jumps columns on reveal), level
   with the grid's top edge and above the photo so it stays visible */
.split > .idx { top: 0; z-index: 2; }
/* v9.10 — the teaser number sits INSIDE the card: the card clips
   (overflow: hidden for its rounded corners), and the shared
   top: -.32em used to cut the top ~24px of the digits off — the
   "05 looks cut in half" bug. Anchored to the card's top edge now.
   v9.49 — STILL cut on real phones ("the 05 for the academy still cut
   a little bit"): a phone's fallback font draws digits whose ascent
   pokes ABOVE the 1em line box, so top: 0 keeps the card's edge
   shaving the tips off. The number now sits .09em INSIDE the card and
   gets a 1.2 line-height — every font metric keeps the digits whole,
   on every device, and the inset is imperceptible on the desktop. */
.acad-teaser .idx { top: .09em; right: .09em; line-height: 1.2; }
/* keep the heading text clear of the number */
.section-head h2 { position: relative; z-index: 1; max-width: calc(100% - clamp(64px, 15vw, 128px)); }
.section-head.center h2 { max-width: none; }
/* v9.14 — the kicker line (micro) gets the SAME clearance from the big
   number as the heading below it. The number floats at the section
   head's top-right — exactly where the kicker sits — so a long kicker
   (or any kicker on a narrow phone) used to run underneath the
   outlined digits: "some text overwrites the other". The dash keeps
   its place; only the line's right edge stops early. */
.section-head .micro { position: relative; z-index: 1; max-width: calc(100% - clamp(64px, 15vw, 128px)); }
/* v9.7: same clearance for the SPLIT heading — its number sits at the
   top-right of the split container, right where a long heading used to
   run underneath it ("01 covered by the text"). Reversed splits keep
   the full width: their number floats over the photo, not the text. */
.split:not(.rev) .split-copy h2 { position: relative; z-index: 1; max-width: calc(100% - clamp(64px, 12vw, 118px)); }
/* v9.14 — the split kicker gets the same clearance: the split's number
   sits at the container's top-right, level with the kicker line */
.split:not(.rev) .split-copy .micro { position: relative; z-index: 1; max-width: calc(100% - clamp(64px, 12vw, 118px)); }
@media (max-width: 720px) {
  .section-head .idx, .split > .idx, .acad-teaser .idx { font-size: 2rem; top: -.38em; }
  .split > .idx { top: 0; }
  .acad-teaser .idx { top: .09em; }  /* v9.10: never clipped by the card; v9.49: .09em inset for phone font metrics */
  .section-head h2 { max-width: calc(100% - 54px); }
  /* v9.14 — the kicker keeps its distance from the number on phones
     too (same 54px the heading uses — the 2rem digits are ~42px wide) */
  .section-head .micro { max-width: calc(100% - 54px); }
  .split:not(.rev) .split-copy .micro { max-width: calc(100% - 54px); }
}
/* v9.34 — the kicker is NORMAL INLINE FLOW, not a flex row. It was
   display:flex + gap, which made the dash ::before, the text and
   EVERY formatting element its own flex item: one formatted word
   (B I U S, H marker, A accent, a colour or a size) stopped sitting
   inside the sentence and was pushed out of the line — vertically
   centred against the wrapped words, far to the right ("the edit text
   runs far away from the original text"). Plain text still rendered
   fine because a lone text run forms ONE anonymous flex item, which
   is why the bug only appeared after using the toolbar. Inline flow
   keeps every span exactly between its words; the dash is an
   inline-block anchored to the first line. line-height 1.5 so a
   wrapped kicker (now possible) stays readable. */
.micro {
  font: 700 .85rem/1.5 var(--font-display); letter-spacing: .17em; text-transform: uppercase;
  color: var(--royal); margin-bottom: 14px;
}
.micro::before {
  content: ""; display: inline-block; width: 26px; height: 3px; border-radius: 3px;
  background: var(--grad-yellow-band); vertical-align: .22em; margin-right: 10px;
}
.micro.micro-green { color: #1e5c38; }
.micro.micro-green::before { background: var(--green); }
.micro.micro-invert { color: rgba(255, 255, 255, .85); }
.micro.micro-invert::before { background: var(--yellow); }
.section-sub { color: var(--muted); font-size: 1.03rem; max-width: 640px; }
.section-head.center .section-sub { margin-inline: auto; }
.on-dark .section-sub, .on-green .section-sub { color: rgba(255, 255, 255, .72); }

/* background variants — the anti-plain rhythm */
.bg-paper { background: var(--paper); }
.bg-paper-deco {
  position: relative; overflow: clip;
  background:
    radial-gradient(rgba(0, 32, 96, .045) 1.4px, transparent 1.4px) 26px 26px / 26px 26px,
    radial-gradient(760px 460px at 108% -6%, rgba(93, 127, 232, .17), transparent 62%),
    radial-gradient(600px 400px at -10% 112%, rgba(240, 220, 1, .20), transparent 58%),
    linear-gradient(181deg, #ffffff 0%, var(--band-light) 50%, var(--band-light-2) 100%);
}
/* ambient corner glows on light sections */
.bg-paper-deco::before, .bg-cloud::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  right: -150px; top: -170px;
  background: radial-gradient(circle, rgba(93, 127, 232, .16), transparent 68%);
  filter: blur(28px);
}
.bg-paper-deco::after, .bg-cloud::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 400px; height: 400px; border-radius: 50%;
  left: -150px; bottom: -190px;
  background: radial-gradient(circle, rgba(240, 220, 1, .20), transparent 68%);
  filter: blur(26px);
}
.bg-paper-deco > .wrap, .bg-cloud > .wrap, .bg-paper-deco .split, .bg-cloud .grid { position: relative; z-index: 1; }
.bg-cloud {
  position: relative; overflow: clip;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .17) 0 2px, transparent 2px 34px),
    radial-gradient(940px 500px at 50% -24%, rgba(255, 255, 255, .92), transparent 64%),
    radial-gradient(700px 440px at 106% 114%, rgba(27, 63, 174, .10), transparent 60%),
    linear-gradient(183deg, var(--band-grey-hi) 0%, var(--band-grey) 58%, var(--band-grey-lo) 100%);
}
.bg-mist {
  background:
    radial-gradient(rgba(0, 32, 96, .05) 1.4px, transparent 1.4px) 22px 22px / 22px 22px,
    linear-gradient(180deg, var(--mist), var(--cloud));
}
/* dark navy band with subtle diagonal stripes + glow */
.band-navy {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 26px),
    radial-gradient(1000px 500px at 82% -30%, rgba(93, 127, 232, .26), transparent 62%),
    radial-gradient(800px 420px at 6% 120%, rgba(240, 220, 1, .07), transparent 55%),
    var(--grad-navy-band);
  color: rgba(255, 255, 255, .82);
}
.band-green {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 26px),
    radial-gradient(1000px 500px at 85% -30%, rgba(126, 222, 165, .18), transparent 62%),
    var(--grad-green-band);
  color: rgba(255, 255, 255, .84);
}
/* quote / cta band — yellow gradient */
.band-quote {
  background:
    radial-gradient(720px 340px at 12% -40%, rgba(255, 255, 255, .65), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 24px),
    var(--grad-yellow-band);
  color: var(--navy-3);
}
.band-green-soft { background: linear-gradient(180deg, var(--green-tint), var(--green-tint-2)); }
/* v9.7 presets — "Card" and "Grid" (requested alongside soft cream and
   the light grey band). Self-contained like every other preset. */
.sec-card {
  position: relative;
  background:
    radial-gradient(640px 300px at 110% -10%, rgba(93, 127, 232, .10), transparent 60%),
    linear-gradient(183deg, var(--band-grey-hi) 0%, var(--band-grey) 70%, var(--band-grey-lo) 100%);
}
.sec-card > .wrap {
  position: relative; z-index: 1;
  background: #fff;
  border: 1px solid rgba(0, 32, 96, .10);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(10, 24, 70, .08);
  padding: clamp(26px, 4vw, 54px);
}
.sec-grid {
  position: relative;
  background:
    linear-gradient(rgba(0, 32, 96, .035) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(0, 32, 96, .035) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(180deg, #fcfdff, #f6f8fc);
}

/* decorative orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(58px); pointer-events: none; z-index: 0; }
.orb-yellow { background: rgba(240, 220, 1, .16); }
.orb-blue { background: rgba(93, 127, 232, .20); }
.orb-green { background: rgba(96, 205, 142, .18); }
@keyframes floaty { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -22px, 0); } }
.orb { animation: floaty 9s ease-in-out infinite; }
.orb:nth-of-type(2) { animation-duration: 12s; animation-delay: -4s; }

/* cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0, 32, 96, .16); }
.card-grad {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-border-card) border-box;
}
.card-grad::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px 180px at 100% 0%, rgba(93, 127, 232, .05), transparent 70%);
}
.card-grad { position: relative; }
.on-dark .card, .on-green .card { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.on-dark .card:hover, .on-green .card:hover { background: rgba(255, 255, 255, .07); transform: translateY(-3px); }

/* gradient icon tile */
.tile {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: var(--grad-royal-tile); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 1.05rem/1 var(--font-display);
  box-shadow: 0 8px 18px rgba(0, 24, 76, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tile-green { background: var(--grad-green-tile); box-shadow: var(--shadow-green), inset 0 1px 0 rgba(255, 255, 255, .22); }
.tile-yellow { background: var(--grad-yellow-btn); color: var(--navy-3); box-shadow: var(--shadow-yellow); }

/* chip
   v9.34 — inline-block, not inline-flex: a chip whose text carries
   toolbar formatting (a bold word, the H marker…) must keep it INSIDE
   the pill. Flex + gap split every formatted span into its own item,
   tearing the words apart with gaps (same class of bug the .micro
   kicker had). Chips hold plain inline content only. */
.chip {
  display: inline-block;
  font: 600 .78rem/1 var(--font-body); color: var(--navy);
  background: rgba(0, 32, 96, .06); border: 1px solid rgba(0, 32, 96, .10);
  padding: 7px 13px; border-radius: 999px;
}

/* ============ reveal on scroll (progressive enhancement) ============ */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2, .65, .3, 1), transform .55s cubic-bezier(.2, .65, .3, 1); }
html.js .reveal-l { transform: translateX(-18px); }
html.js .reveal-r { transform: translateX(18px); }
html.js .reveal.in { opacity: 1; transform: none; }
/* full-page captures (save-page, print, PDF, crawlers) must show
   everything even though the page was never scrolled */
@media print {
  html.js .reveal, html.js .reveal-l, html.js .reveal-r { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-l, html.js .reveal-r { opacity: 1; transform: none; transition: none; }
  .orb { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ noscript ============ */
.noscript-note {
  background: #fff4c2; color: var(--navy-3); padding: 14px 20px;
  text-align: center; font-weight: 600; margin: 0;
}
/* ============ HOME HERO (slider) ============ */
.hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(1050px 560px at 88% -12%, rgba(93, 127, 232, .30), transparent 62%),
    radial-gradient(880px 500px at -12% 112%, rgba(240, 220, 1, .11), transparent 56%),
    var(--grad-navy-deep);
  color: #fff;
  padding: clamp(54px, 7vw, 96px) 0 clamp(66px, 8vw, 104px);
}
/* v9.11 — only the hero that is the FIRST visible section slides under
   the transparent header (JS stamps .hero-top on it). A hero moved to
   the middle of the page used to keep the -72px margin and cover the
   section above it ("the marquee lost its content"). */
.hero.hero-top {
  padding-top: calc(clamp(54px, 7vw, 96px) + var(--nav-h));
  margin-top: calc(-1 * var(--nav-h));
}
/* fine grid lines, faded towards the middle */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1200px 700px at 70% 20%, #000 0%, transparent 78%);
  mask-image: radial-gradient(1200px 700px at 70% 20%, #000 0%, transparent 78%);
}
/* bottom fade into the next section */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(240, 246, 251, .22));
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner {
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(30px, 5vw, 62px); align-items: center;
}
.hero-copy .micro { color: var(--yellow-2); }
.hero-copy .micro::before { background: var(--yellow); }
.hero h1 { color: #fff; margin-bottom: .55em; text-wrap: balance; }
.hero-sub { color: rgba(255, 255, 255, .78); font-size: clamp(1.06rem, .3vw + .9rem, 1.3rem); max-width: 34em; margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 8px clamp(14px, 2.2vw, 34px);
  margin: 0; padding: 18px 22px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(4px);
  width: fit-content; max-width: 100%;
}
/* v9.42 — the labels may wrap inside their column instead of pushing
   the box over the photo (the ID labels made the old auto columns
   poke 38px into the stage); a lone long word breaks rather than
   overlaps */
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt {
  order: 2; font-size: clamp(.92rem, .12vw + .84rem, 1.06rem); letter-spacing: .04em; color: rgba(255, 255, 255, .65);
  text-transform: uppercase; overflow-wrap: anywhere;
}
.hero-stats dd {
  order: 1; margin: 0; font: 800 clamp(1.72rem, .3vw + 1.54rem, 2.1rem)/1.1 var(--font-display); color: var(--yellow);
  display: flex; align-items: baseline; gap: 2px;
}

/* hero stage (image carousel) */
.hero-stage { position: relative; }
.stage-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px rgba(0, 6, 26, .5), 0 0 0 1px rgba(255, 255, 255, .14);
  transform: rotate(.6deg);
  background: var(--navy-3);
}
.stage-frame::after { /* subtle inner vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 10%, transparent 55%, rgba(0, 8, 32, .34));
}
.stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease, transform 6.5s linear;
  transform: scale(1.02);
}
.stage-img.active { opacity: 1; transform: scale(1); }
.stage-progress {
  position: absolute; left: 14px; right: 14px; bottom: 14px; height: 4px;
  border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden;
}
.stage-progress i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 4px; }
/* v9.49 — the slide counter ("01 / 04") and the ← → arrow buttons
   are REMOVED from the markup; their rules are gone with them. */
.stage-ctrl {
  display: flex; justify-content: flex-start; align-items: center; gap: 14px;
  margin-top: 16px;
}
.stage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chips button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 8px 15px;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .75);
  font: 600 .82rem/1 var(--font-body);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: background .2s, color .2s;
}
.stage-chips button.active { background: var(--yellow); color: var(--navy-3); box-shadow: none; font-weight: 700; }

/* ============ PAGE HERO (subpages) ============ */
.page-hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(900px 460px at 86% -18%, rgba(93, 127, 232, .30), transparent 60%),
    radial-gradient(660px 380px at -10% 130%, rgba(240, 220, 1, .10), transparent 55%),
    var(--grad-navy-deep);
  color: #fff;
  padding: clamp(52px, 6.5vw, 84px) 0;
}
/* v9.11 — slide-under only for the first section on the page */
.page-hero.hero-top {
  padding-top: calc(clamp(52px, 6.5vw, 84px) + var(--nav-h));
  margin-top: calc(-1 * var(--nav-h));
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(900px 480px at 78% 0%, #000, transparent 80%);
  mask-image: radial-gradient(900px 480px at 78% 0%, #000, transparent 80%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero.green {
  background:
    radial-gradient(900px 460px at 86% -18%, rgba(126, 222, 165, .15), transparent 60%),
    radial-gradient(660px 380px at -10% 130%, rgba(240, 220, 1, .10), transparent 55%),
    var(--grad-green-hero);
}
/* micro labels inside any dark page hero (navy or green) must be light —
   the base .micro colour is royal blue, invisible on dark gradients */
.page-hero .micro { color: var(--yellow-2); font-size: .84rem; letter-spacing: .19em; }
.page-hero.green .micro { color: #fff; }
.page-hero .micro::before { background: var(--yellow); }
.crumbs {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: .8rem; color: rgba(255, 255, 255, .92); margin-bottom: 18px;
}
/* the current-page crumb (often a long course title) truncates with an
   ellipsis instead of squeezing every topbar/hero item into wrapped lines */
.crumbs > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a, .crumbs .sep { white-space: nowrap; flex: 0 0 auto; }
.crumbs a { color: rgba(255, 255, 255, .92); }
.crumbs a:hover { color: var(--yellow); text-decoration: none; }
.crumbs .sep { opacity: .5; }
.page-hero h1 { color: #fff; margin-bottom: .4em; max-width: 15em; }
.page-hero .lead { color: rgba(255, 255, 255, .8); font-size: clamp(1.05rem, .32vw + .88rem, 1.3rem); max-width: 40em; margin: 0; }
.page-hero .hero-cta { margin: 26px 0 0; }

/* ============ STATS BAND (counters) ============ */
.stats-band { padding: clamp(48px, 6vw, 72px) 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat {
  position: relative; padding: 30px 28px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
}
.stat::after { /* yellow corner glow */
  content: ""; position: absolute; right: -34px; top: -34px; width: 96px; height: 96px;
  border-radius: 50%; background: radial-gradient(circle, rgba(240, 220, 1, .22), transparent 70%);
}
.stat b {
  display: flex; align-items: baseline; font: 800 clamp(2.4rem, 3.4vw, 3.3rem)/1 var(--font-display);
  color: #fff;
}
.stat b .sfx { color: var(--yellow); font-size: .46em; margin-left: 3px;
  display: inline-block; transform: translateY(-.02em); }
.stat > span { display: block; margin-top: 12px; color: rgba(255, 255, 255, .75); font-size: clamp(1.18rem, .32vw + 1.02rem, 1.55rem); overflow-wrap: anywhere; }
.band-green .stat::after { background: radial-gradient(circle, rgba(255, 228, 92, .25), transparent 70%); }

/* ============ SPLIT (media + copy) ============ */
.split { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 5vw, 64px); align-items: center; position: relative; }
.split.rev .split-media { order: 2; }
.split-media { position: relative; }
.split-copy { position: static; }
.split-media .frame {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg);
  transform: rotate(-.8deg);
}
.split-media .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(0, 20, 66, .16), transparent 45%);
}
.split-media .badge {
  position: absolute; left: -14px; bottom: 22px; z-index: 2;
  background: #fff; border-radius: 14px; padding: 13px 18px;
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: .98rem; color: var(--navy);
  max-width: 74%;
}
.split-media .badge small { display: block; font-weight: 600; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.split-media .dots {
  position: absolute; right: -18px; top: -18px; width: 110px; height: 110px; z-index: 0;
  background-image: radial-gradient(rgba(0, 32, 96, .25) 1.6px, transparent 1.6px);
  background-size: 16px 16px; border-radius: 20px;
}
.split-copy .points { display: grid; gap: 11px; margin: 20px 0 26px; }
.split-copy .points li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.split-copy .points li::before {
  content: ""; flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px; border-radius: 7px;
  /* two layers: the white check SVG on TOP of the navy tile gradient.
     (A plain `background-image` after the `background` shorthand used to
     wipe the tile, leaving a white check on a light page — invisible.) */
  background-color: #12327f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"), var(--grad-royal-tile);
  background-size: 13px, 100% 100%; background-position: center; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 24, 76, .22);
}
.green-context .split-copy .points li::before {
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"), var(--grad-green-tile);
}
.split-copy .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

/* ============ CARD GRIDS & VARIANTS ============ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* practice groups (A/B/C) */
.practice {
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.practice::before {
  content: ""; position: absolute; right: -46px; bottom: -46px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(93, 127, 232, .10), transparent 70%);
}
.practice header { display: flex; gap: 15px; align-items: flex-start; }
.practice .svc-no {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: var(--grad-royal-tile); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 1.05rem/1 var(--font-display);
  box-shadow: 0 8px 18px rgba(0, 24, 76, .26), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.practice .svc-lead { color: var(--muted); font-size: .95rem; margin: 6px 0 0; }
.practice .svc-list { display: grid; gap: 9px; }
.practice .svc-list li {
  padding: 9px 0 9px 4px; border-bottom: 1px dashed var(--line);
  display: flex; gap: 10px; align-items: baseline; font-weight: 500; font-size: .95rem;
}
.practice .svc-list li:last-child { border-bottom: 0; }
.practice .svc-list li::before {
  content: ""; flex: 0 0 auto; width: 13px; height: 2.5px; border-radius: 3px;
  background: var(--gold-deep); align-self: baseline; transform: translateY(-.26em);
}

/* practice DETAIL (services page, items with desc) */
.practice-detail { padding: 30px 28px 24px; }
.practice-detail header { display: flex; gap: 15px; align-items: center; margin-bottom: 18px; }
.practice-detail .svc-items { display: grid; gap: 0; }
.practice-detail .svc-items li {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 13px 2px; border-top: 1px solid var(--line-soft);
}
.practice-detail .svc-items li strong { font-size: .97rem; color: var(--navy-2); font-weight: 700; }
.practice-detail .svc-items li span { color: var(--muted); font-size: .89rem; }

/* value / why cards */
.value-card { padding: 28px 26px; }
.value-card .tile { margin-bottom: 16px; }
.value-card h3 { margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* project cards */
.proj { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.proj header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.proj-tag {
  font: 700 .74rem/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); background: rgba(0, 32, 96, .07);
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(0, 32, 96, .12);
}
.proj-year { font: 700 .82rem/1 var(--font-display); color: var(--muted-2); }
.proj h3 { font-size: 1.12rem; margin: 0; }
.proj p { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.proj-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.proj-chips li {
  font: 600 .74rem/1 var(--font-body); color: var(--royal);
  background: rgba(27, 63, 174, .07); border: 1px solid rgba(27, 63, 174, .14);
  padding: 6px 11px; border-radius: 999px;
}

/* course cards (academy) */
.course { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 13px; position: relative; overflow: hidden; }
.course::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-green-band);
}
.course .course-no {
  position: absolute; right: 18px; top: 12px;
  font: 800 2.1rem/1 var(--font-display);
  color: transparent; -webkit-text-stroke: 1.3px rgba(38, 122, 72, .25);
}
.course h3 { font-size: 1.06rem; margin: 0; padding-right: 52px; }
.course .course-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.course .course-meta span {
  font: 600 .76rem/1 var(--font-body); color: var(--green-mid);
  background: var(--green-tint); border: 1px solid var(--green-tint-2);
  padding: 6px 11px; border-radius: 999px;
}
.course p { color: var(--muted); font-size: 1.02rem; margin: 0; }
.course .topics { display: flex; flex-wrap: wrap; gap: 6px; }
.course .topics li {
  font-size: .8rem; color: var(--muted-2);
  padding: 4px 9px; border-radius: 7px; background: var(--cloud);
  border: 1px solid var(--line-soft);
}
.course .price-row {
  margin-top: auto; padding-top: 13px; border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.course .price {
  font: 800 1.18rem/1 var(--font-display); color: var(--green-mid);
}
.course .price-note { font-size: .78rem; color: var(--muted-2); }

/* news cards */
.news-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.news-card header { display: flex; align-items: center; gap: 12px; }
.news-date { font: 600 .88rem/1.3 var(--font-body); color: var(--muted-2); }
.news-card h3 { margin: 0; font-size: 1.18rem; }
.news-card p { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.news-card .more { font-weight: 700; font-size: .9rem; display: inline-flex; gap: 7px; align-items: center; }

/* news article (full, on news page) */
.article { padding: clamp(26px, 4vw, 40px); margin-bottom: 26px; }
.article .news-body p { color: var(--ink); font-size: 1rem; }
.article .news-body p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 800; font-size: 3.1em; float: left;
  line-height: .82; padding: 6px 12px 0 0; color: var(--navy);
  background: linear-gradient(180deg, transparent 68%, rgba(240, 220, 1, .6) 68%);
}

/* testimonial cards */
.quote-card { padding: 28px 26px; position: relative; }
.quote-card::before {
  content: "\201C"; position: absolute; top: 6px; right: 20px;
  font: 800 4.6rem/1 var(--font-display); color: rgba(38, 122, 72, .14);
}
.quote-card blockquote { margin: 0 0 18px; font-size: .99rem; color: var(--ink); font-style: italic; }
.quote-card footer { display: flex; gap: 13px; align-items: center; }
.quote-card .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--grad-green-tile); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 .95rem/1 var(--font-display); letter-spacing: .02em;
}
.quote-card cite { font-style: normal; }
.quote-card cite b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--navy-2); }
.quote-card cite span { font-size: .8rem; color: var(--muted-2); }

/* client profile chips */
.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.client-item {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.client-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.client-item .tile { width: 42px; height: 42px; border-radius: 12px; font-size: .95rem; }
.client-item b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--navy-2); }
.client-item small { color: var(--muted-2); font-size: .8rem; }

/* catalogue chips (services full list) */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-grid li {
  display: flex; gap: 10px; align-items: center; padding: 13px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-weight: 600; font-size: .9rem; color: var(--navy-2);
  box-shadow: var(--shadow-sm);
}
.cat-grid li::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto;
  background: var(--grad-yellow-band); box-shadow: 0 0 0 3px rgba(240, 220, 1, .18);
}

/* steps (process) */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 23px; left: 9%; right: 9%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0, 32, 96, .25) 0 8px, transparent 8px 16px);
}
.step { position: relative; padding: 0 14px; text-align: left; }
.step .step-no {
  counter-increment: step;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-royal-tile); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 1rem/1 var(--font-display);
  box-shadow: 0 8px 20px rgba(0, 24, 76, .30), inset 0 1px 0 rgba(255, 255, 255, .25);
  border: 4px solid #fff; position: relative; z-index: 1; margin-bottom: 14px;
}
.step .step-no::before { content: "0" counter(step); }
.step h3 { font-size: .99rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .86rem; margin: 0; }

/* ============ MARQUEE (running text) ============ */
.trust { padding: 26px 0; background: linear-gradient(180deg, var(--cloud), var(--paper)); }
.trust-label {
  text-align: center; font: 700 .78rem/1 var(--font-display);
  letter-spacing: .16em; text-transform: uppercase; color: #565d72;
  margin: 0 0 18px;
}
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* NOTE: no flex gap — the gap lives as margin on each chip so the
   track is EXACTLY two identical halves and the -50% loop is seamless */
.marquee-track { display: flex; width: max-content; }
.marquee-track li {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font: 600 .92rem/1 var(--font-body); color: var(--navy-2);
  background: #fff; border: 1px solid var(--line);
  padding: 11px 20px; border-radius: 999px; box-shadow: var(--shadow-sm);
  margin-right: 12px;
}
.marquee-track li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad-yellow-band); box-shadow: 0 0 0 3px rgba(240, 220, 1, .16);
}
@keyframes marquee { to { transform: translateX(-50%); } }
html.js .marquee-track { animation: marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}
/* ============ CERTIFICATION SLIDER ============ */
.cert-layout {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(22px, 3.5vw, 44px);
  align-items: stretch;
}
.cert-viewport { min-width: 0; }
/* solo carousel (no detail panel — e.g. re-enabled on the Certification
   page): ONE column, so no empty second track is left beside it */
.cert-layout.cert-solo { grid-template-columns: 1fr; }
.cert-layout.cert-solo .cert-slide { flex-basis: clamp(260px, 30%, 360px); }
.cert-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 6px 4px 18px;
  scroll-behavior: smooth;
}
.cert-track::-webkit-scrollbar { display: none; }
.cert-slide {
  flex: 0 0 clamp(230px, 34%, 300px);
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 18px; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 560 / 340;
}
.cert-slide img { width: 100%; height: 100%; object-fit: contain; }
.cert-slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cert-slide.active {
  border-color: rgba(240, 220, 1, .9);
  box-shadow: 0 0 0 3px rgba(240, 220, 1, .35), var(--shadow-md);
  transform: translateY(-4px);
}
.cert-arrows { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 4px; }
.cert-arrows button {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--navy); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm);
  transition: background .2s, color .2s;
}
.cert-arrows button:hover { background: var(--navy); color: #fff; }
.cert-dots { display: flex; gap: 7px; }
.cert-dots button {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(0, 32, 96, .18); transition: width .25s ease, background .25s;
}
.cert-dots button.active { width: 26px; background: var(--navy); }

.cert-detail {
  border-radius: var(--radius-lg);
  background: var(--grad-navy-deep);
  color: rgba(255, 255, 255, .82);
  padding: 30px 28px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.cert-detail::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 220, 1, .18), transparent 70%);
}
.cert-detail .cert-idx {
  font: 800 3rem/1 var(--font-display);
  color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .28);
  display: block; margin-bottom: 6px;
}
.cert-detail h3 { color: #fff; font-size: 1.7rem; margin-bottom: 4px; }
.cert-detail .cert-full { color: var(--yellow); font-weight: 600; font-size: .92rem; margin: 0 0 12px; }
.cert-detail .cert-desc { font-size: .94rem; margin: 0 0 16px; }
.cert-detail .cert-issuer { margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .55); }
.cert-detail .cert-issuer strong { color: #fff; }

/* cert DETAIL cards (certification page) */
.cert-card { padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.cert-card .cert-logo {
  border-radius: 14px; border: 1px solid var(--line);
  background: #fff; padding: 14px; width: 132px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.cert-card .cert-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cert-card h3 { margin: 0; font-size: 1.35rem; }
.cert-card .cert-full { color: var(--royal); font-weight: 600; font-size: .88rem; margin: -8px 0 0; }
.cert-card .cert-desc { color: var(--muted); font-size: .93rem; margin: 0; }
.cert-card ul { display: grid; gap: 8px; }
.cert-card ul li {
  display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink);
}
.cert-card ul li::before { content: "→"; color: var(--gold-deep); font-weight: 700; flex: 0 0 auto; }
.cert-card .cert-issuer-line { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .82rem; color: var(--muted-2); }

/* ============ ACADEMY HERO (green) ============ */
.academy-hero {
  position: relative; overflow: clip; color: #fff;
  background:
    radial-gradient(1000px 520px at 86% -14%, rgba(126, 222, 165, .26), transparent 60%),
    radial-gradient(760px 440px at -8% 118%, rgba(240, 220, 1, .12), transparent 55%),
    var(--grad-green-hero);
  padding: clamp(54px, 7vw, 96px) 0;
}
.academy-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1000px 620px at 72% 16%, #000, transparent 80%);
  mask-image: radial-gradient(1000px 620px at 72% 16%, #000, transparent 80%);
}
.academy-hero .wrap { position: relative; z-index: 1; }
.academy-hero .micro { color: #d8f5e3; }
.academy-hero .micro::before { background: var(--yellow-2); }
.academy-hero h1 { color: #fff; }
.academy-hero .hero-sub { color: rgba(255, 255, 255, .82); }
.academy-hero .stage-frame { background: var(--green-deep); }

/* academy teaser on home */
.acad-teaser {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 360px at 90% -20%, rgba(126, 222, 165, .22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 26px),
    var(--grad-green-band);
  color: rgba(255, 255, 255, .88);
  padding: clamp(30px, 4.5vw, 48px);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center;
  position: relative; overflow: hidden;
}
.acad-teaser h2 { color: #fff; }
.acad-teaser .hl { display: grid; gap: 10px; margin: 0; }
.acad-teaser .hl li {
  display: flex; gap: 11px; align-items: center; font-weight: 600; font-size: .96rem;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  padding: 12px 16px; border-radius: 13px;
}
.acad-teaser .hl li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--yellow-2); box-shadow: 0 0 10px rgba(255, 228, 92, .5);
}
.acad-teaser .cta-side { display: grid; gap: 14px; justify-items: start; }
.acad-teaser .micro { color: #d8f5e3; }
.acad-teaser .micro::before { background: var(--yellow-2); }
.acad-teaser .section-sub { color: rgba(255, 255, 255, .75); }

/* cross-promo band (academy → services) */
.cross-band {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 8% -30%, rgba(255, 255, 255, .5), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 24px),
    var(--grad-yellow-band);
  color: var(--navy-3);
  padding: clamp(26px, 4vw, 42px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cross-band h3 { font-size: 1.35rem; margin-bottom: 6px; color: var(--navy-3); }
.cross-band p { margin: 0; max-width: 46em; color: rgba(0, 16, 48, .78); }

/* ============ FORMS ============ */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3.6vw, 38px);
  position: relative; overflow: hidden;
}
.form-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--grad-navy-band);
}
.green-context .form-card::before { background: var(--grad-green-band); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-full { display: block; margin-top: 16px; }
label > span {
  display: block; font: 700 .8rem/1.3 var(--font-display);
  letter-spacing: .04em; color: var(--navy-2); margin-bottom: 7px;
}
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: 500 .95rem/1.45 var(--font-body); color: var(--ink);
  background: var(--cloud); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; transition: border-color .2s, background .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  outline: none; background: #fff; border-color: var(--navy);
  box-shadow: 0 0 0 3.5px rgba(240, 220, 1, .35);
}
input.bad, textarea.bad { border-color: #e05656; background: #fff6f6; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23002060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
textarea { resize: vertical; min-height: 110px; }
.f-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 20px; }
.f-note { font-size: .8rem; color: var(--muted-2); margin: 14px 0 0; }

/* contact info cards */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.info-card { padding: 24px; }
.info-card .tile { margin-bottom: 14px; }
.info-card h3 { font-size: 1rem; margin-bottom: 8px; }
.info-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.info-card a { color: var(--navy); font-weight: 600; }
.info-card a:hover { color: var(--royal); }
.info-card .maps-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font: 700 .84rem/1 var(--font-display); color: var(--royal);
}
.info-card .maps-link:hover { text-decoration: underline; }

/* ============ SCHEDULE TABLE ============ */
.table-wrap {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--green-tint-2);
  background: #fff; box-shadow: var(--shadow-md);
}
.sched { width: 100%; border-collapse: collapse; }
.sched th {
  background: var(--grad-green-band); color: #fff;
  font: 700 .8rem/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: 15px 20px;
}
.sched td { padding: 15px 20px; border-top: 1px solid var(--line-soft); font-size: 1.02rem; }
.sched tr:nth-child(even) td { background: var(--green-tint); }
.sched td:first-child { font-weight: 600; color: var(--navy-2); }
.sched td.sched-date { font-weight: 700; color: var(--green-mid); white-space: nowrap; }
.sched td.sched-dur { color: var(--muted); white-space: nowrap; }
.table-note { font-size: .84rem; color: var(--muted-2); margin: 14px 0 0; }

/* ============ CTA / QUOTE BANDS ============ */
.quote-band-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px 34px;
}
.quote-band-inner h2 { color: var(--navy-3); margin: 0 0 8px; text-wrap: balance; }
.quote-band-inner p { margin: 0; color: rgba(0, 16, 48, .75); max-width: 44em; font-size: 1.02rem; }
.quote-band-inner .btn { flex: 0 0 auto; }
.band-navy .quote-band-inner h2, .band-green .quote-band-inner h2 { color: #fff; }
.band-navy .quote-band-inner p, .band-green .quote-band-inner p { color: rgba(255, 255, 255, .78); }

/* ============ COOKIE NOTICE (slim bottom bar) ============ */
.cookie {
  /* v9.48 — under the open mobile menu (85) but above every content
     layer: the cookie bar used to cover the menu is last items on a
     phone, reading as a broken menu */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 34px rgba(10, 20, 60, .16);
  animation: cookie-in .45s cubic-bezier(.2, .9, .3, 1.1);
}
.cookie::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-yellow-band);
}
.cookie .cookie-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 20px;
}
.cookie p { font-size: .84rem; color: var(--muted); margin: 0; }
.cookie button.ok {
  border: 0; cursor: pointer; border-radius: 999px; padding: 9px 20px;
  font: 700 .84rem/1 var(--font-display); background: var(--navy); color: #fff;
  white-space: nowrap;
}
.cookie button.ok:hover { background: var(--royal); }
.cookie .x {
  width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted-2); font-size: 1rem; padding: 0; flex: 0 0 auto;
}
.cookie .x:hover { background: var(--cloud); color: var(--ink); }
@keyframes cookie-in { from { opacity: 0; transform: translateY(30px); } }
@media (max-width: 640px) {
  .cookie .cookie-row { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .cookie p { font-size: .78rem; }
}

/* ============ utilities ============ */
.center { text-align: center; }
.mt-xl { margin-top: clamp(36px, 5vw, 54px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ RESPONSIVE ============ */
/* ---- mid-size header tuning: the full navigation must fit every
   device without horizontal scrolling. The links tighten first, and
   the measured auto-fit (nav-compact → nav-tight → nav-collapsed)
   takes over from there; since v9.42 the CTA never leaves the header
   above phone width. Indonesian labels (Layanan, Portofolio,
   Sertifikasi…) run longer than English, so the budget is computed
   for the ID locale. ---- */
@media (max-width: 1280px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 9px 10px; }
  .nav-links a::after { left: 10px; right: 10px; }
}
@media (max-width: 1120px) {
  .nav-row { gap: 10px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 9px 8px; }
  .nav-links a::after { left: 8px; right: 8px; }
}
@media (max-width: 1060px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > .footer-brand { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 26px 14px; }
  .steps::before { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stats { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr !important; }
  .split.rev .split-media { order: 0; }
  .cert-layout { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .acad-teaser { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar .tb-tag { display: none; }
}
@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  .topbar { font-size: .72rem; }
  .topbar .tb-right .tb-tag { display: none; }
  /* one clean row on phones: the cross-site link already lives in the
     burger menu, the location truncates, the phone number never wraps */
  .topbar .tb-cross, body.academy .topbar .tb-cross { display: none; }
  .topbar .wrap { gap: 10px; }
  .topbar .wrap > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .tb-right { flex: 0 0 auto; gap: 12px; }
  .topbar .tb-right a { white-space: nowrap; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  /* v9.42 — Indonesian stat words (“diselesaikan”, “didampingi”) are
     longer than the cards: slimmer padding + a slightly smaller label
     keeps each word on its line on small phones (overflow-wrap above
     is the safety net, never the plan) */
  .stat { padding: 24px 20px; }
  .stat > span { font-size: 1.02rem; }
  /* long course names stay within two balanced lines on phones */
  .course-hero h1 { font-size: clamp(1.85rem, 5.8vw, 2.15rem); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding-top: 48px; }
  .quote-band-inner { flex-direction: column; align-items: flex-start; }
  .split-media .badge { left: 8px; max-width: 88%; }
  .client-grid { grid-template-columns: 1fr; }
  .sched th, .sched td { padding: 12px 13px; font-size: .92rem; }
  .table-wrap { overflow-x: auto; }
  .sched { min-width: 560px; }
}
/* ============================================================
   ENGINE HELPERS (classes used by app.js renderers — CSP-safe
   replacements for inline styles)
   ============================================================ */
/* orb presets */
.orb-a { width: 340px; height: 340px; right: -90px; top: -120px; }
.orb-b { width: 260px; height: 260px; left: -80px; bottom: -60px; }
.orb-c { width: 300px; height: 300px; right: -70px; top: -100px; }
.orb-d { width: 220px; height: 220px; left: -60px; bottom: -80px; }

/* page-hero grid */
.ph-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
/* text columns must be allowed to shrink below their min-content —
   otherwise one long no-wrap line (a course title in the crumbs)
   stretches the whole grid past the viewport */
/* course / subpage titles wrap evenly — a long admin-entered title
   balances across lines instead of stacking orphaned words */
.page-hero h1 { text-wrap: balance; }
.ph-grid > div, .hero-inner > .hero-copy { min-width: 0; }
.ph-grid.ph-grid-media { grid-template-columns: 1.18fr .82fr; }
.ph-media { max-width: 560px; justify-self: end; width: 100%; }
/* yellow dot-cluster decorating the photo corner (craft detail) */
.ph-media::before {
  content: ""; position: absolute; right: -22px; top: -24px; width: 116px; height: 116px; z-index: 2;
  background-image: radial-gradient(rgba(255, 228, 92, .5) 1.7px, transparent 1.7px);
  background-size: 17px 17px; border-radius: 22px; pointer-events: none;
}
@media (max-width: 980px) { .ph-media::before { right: -10px; top: -14px; width: 84px; height: 84px; } }

/* hero stat suffix */
.hero-stats dd small { font-size: .56em; font-weight: 800; }

/* typography helpers */
.h-tight { margin: 0; }
.h-lg { font-size: 1.45rem; }
.svc-lead-tight { margin: -6px 0 12px; }
.article-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.acad-teaser .hl { margin-top: 22px; }
.teaser-idx { -webkit-text-stroke-color: rgba(38, 122, 72, .5); }

/* lead body (text-only intro) */
.lead-body { max-width: 760px; margin: -14px auto 0; text-align: center; }
.lead-body p { color: var(--muted); font-size: 1.03rem; }

/* form grid */
.form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.form-grid.solo { grid-template-columns: 1fr; }

/* reveal stagger (CSS-only, no inline delays) */
.grid > .reveal:nth-child(2),
.stats-grid > .reveal:nth-child(2),
.client-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.grid > .reveal:nth-child(3),
.stats-grid > .reveal:nth-child(3),
.client-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
.grid > .reveal:nth-child(4),
.stats-grid > .reveal:nth-child(4),
.client-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
.grid > .reveal:nth-child(5) { transition-delay: 340ms; }
.grid > .reveal:nth-child(6) { transition-delay: 410ms; }

@media (max-width: 980px) {
  .ph-grid.ph-grid-media { grid-template-columns: 1fr; }
  .ph-media { max-width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============ WIDE-SCREEN SCALING (1440 → 4K) ============
   Stepped root font-size + taller section rhythm so the whole site
   scales UP on wide laptops (e.g. 2240×1400) instead of showing a
   small fixed-size island in the middle of the screen.
   Text is set in rem everywhere, so one html font-size step scales
   every paragraph, card and button proportionally. */
@media (min-width: 1200px) { html { font-size: 16.25px; } }
@media (min-width: 1440px) { html { font-size: 17px; } }
@media (min-width: 1680px) {
  html { font-size: 18px; }
  .section { padding-top: clamp(108px, 6vw, 148px); padding-bottom: clamp(108px, 6vw, 148px); }
  .ph-media { max-width: 700px; }
}
@media (min-width: 2000px) {
  html { font-size: 19px; }
  .ph-media { max-width: none; }
  .hero { padding-bottom: clamp(104px, 6vw, 140px); }
  .page-hero { padding-top: clamp(84px, 5vw, 112px); padding-bottom: clamp(84px, 5vw, 112px); }
  .page-hero.hero-top { padding-top: calc(clamp(84px, 5vw, 112px) + var(--nav-h)); }
}

/* ==== v8.4 additions ==== */
/* trainer cards need explicit breathing room */
.trainer { padding: 28px; }
.trainer .t-roles li { font-size: .96rem; }
/* schedule card: keep the details row readable on any card width */
.event .price-row .btn-sm { flex: none; }
@media (max-width: 640px) {
  .event .price-row .btn { width: 100%; justify-content: center; margin-left: 0; }
}
/* course-body side facts text */
.cb-facts li { font-size: .98rem; }
.cb-card .cb-facts b { font-size: 1.02rem; }

/* ==== END OF STYLESHEET ==== */




/* text-only split (no image provided) */
.split.split-text { grid-template-columns: 1fr; }
.split.split-text .split-copy { max-width: 860px; }

/* ============================================================
   v5 ADDITIONS — academy subsite, course pages, articles,
   trainers, schedule tabs, matrix, legal, newsletter
   ============================================================ */

/* ---------- academy brand wordmark ---------- */
.brand-academy .word { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; }
.brand-academy .word small {
  display: block;
  font-size: .34em; /* v9.31 (academy parity): scales WITH the wordmark, so a custom size keeps the stack proportional */
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fffbe0;
  margin-top: 3px;
}
/* green once the header turns white (scrolled) or on light surfaces */
.site-header.scrolled .brand-academy .word small { color: var(--green); }
.brand-academy .word small { transition: color .25s; }

/* ---------- academy site theming (body.academy) ---------- */
body.academy .topbar { background: var(--grad-green-band); }
body.academy .tb-cross {
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  font-size: .74rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
body.academy .tb-cross .arr { width: 12px; height: 12px; }
body.academy .tb-cross:hover { color: var(--yellow-2); }
body.academy .site-header { border-bottom-color: rgba(38, 122, 72, .16); }
body.academy .nav-links a.active { color: var(--green); }
body.academy .nav-links a.active::after { background: var(--green); }
body.academy .nav-links a.academy-link { color: var(--green); }
body.academy .site-header.scrolled { box-shadow: 0 8px 30px rgba(18, 63, 38, .12); }
body.academy .mobile-menu { border-top: 3px solid var(--green); }
body.academy .mobile-menu a.active { color: var(--green); }
body.academy .mm-cross {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--muted);
  padding: 10px 4px; text-decoration: none;
}
body.academy .mm-cross:hover { color: var(--navy); }

/* ---------- green chip ---------- */
.chip-green {
  display: inline-flex; align-items: center;
  background: var(--green-tint-2); color: var(--green-mid);
  border: 1px solid rgba(38, 122, 72, .25);
  font-weight: 700; font-size: .78rem;
  padding: 5px 12px; border-radius: 999px;
}

/* ---------- trainers ---------- */
.trainer .t-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.trainer .avatar {
  width: 62px; height: 62px; border-radius: 18px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-green-tile); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  box-shadow: var(--shadow-green);
}
.trainer h3 { margin: 0; font-size: 1.18rem; }
.trainer .t-focus { margin: 2px 0 0; color: var(--green-mid); font-weight: 600; font-size: .92rem; }
.trainer .t-bio { color: var(--muted); font-size: 1.04rem; }
.trainer .t-roles { margin: 0 0 12px; }
.trainer .t-roles li {
  position: relative; padding: 3px 0 3px 20px;
  color: var(--ink); font-size: .88rem;
}
.trainer .t-roles li::before {
  content: "◆"; position: absolute; left: 0; top: 4px;
  color: var(--green); font-size: .6rem;
}
.trainer .t-certs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.trainer .t-cert {
  background: var(--green-tint); border: 1px solid rgba(38, 122, 72, .22);
  color: var(--green-mid); font-weight: 700; font-size: .78rem;
  padding: 5px 10px; border-radius: 8px; letter-spacing: .03em;
}

/* ---------- training matrix (3 lines) ---------- */
.matrix-card { padding: 26px 26px 22px; }
.matrix-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.matrix-card .m-no {
  font-family: var(--font-display); font-weight: 800;
  color: var(--green); font-size: 1.3rem;
}
.matrix-card h3 { margin: 0; font-size: 1.1rem; }
.matrix-card .m-sub { color: var(--muted); font-size: .94rem; margin: 0 0 14px; }
.matrix-card .m-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.matrix-card .m-chips li {
  background: var(--cloud); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px;
  font-size: .85rem; font-weight: 600; color: var(--ink);
}

/* ---------- events ---------- */
.event { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.event h3 { margin: 0; font-size: 1.12rem; }
.event .e-loc { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .94rem; margin: 0; flex: 1; }
.event .e-loc .ic { color: var(--green); flex: none; padding-top: 2px; }
.event .e-dur { color: var(--muted-2); font-size: .93rem; font-weight: 600; }
.event .price-row {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.event .price-row .btn { margin-left: auto; }
.event .price { font: 800 1.06rem/1 var(--font-display); color: var(--green-mid); }

/* ---------- facilities grid ---------- */
.fac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fac-grid li { display: flex; gap: 10px; align-items: center; font-size: 1rem; color: var(--ink); }
.fac-grid .f-check {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--green-tint-2); color: var(--green-mid);
}
.fac-grid.fac-2 { grid-template-columns: 1fr; }

/* ---------- legal info ---------- */
.legal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.legal-item { padding: 20px; }
.legal-item h3 { font-size: .84rem; margin: 0 0 8px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }
.legal-item p { margin: 0; font-weight: 700; color: var(--navy-2); font-size: 1.02rem; word-break: break-word; }
.legal-item small { display: block; margin-top: 6px; color: var(--muted-2); font-size: .82rem; }

/* ---------- schedule month tabs ---------- */
.month-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.month-tabs button {
  font: inherit; font-size: .88rem; font-weight: 800;
  letter-spacing: .06em; cursor: pointer;
  background: var(--paper); color: var(--muted);
  border: 1.5px solid var(--line); border-radius: 10px;
  min-height: 40px; min-width: 52px; padding: 6px 12px;
}
.month-tabs button:hover { border-color: var(--green); color: var(--green-mid); }
.month-tabs button[aria-selected="true"] {
  background: var(--grad-green-tile); color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-green);
}
.sched-empty {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 40px 24px; text-align: center;
  background: var(--cloud);
}
.sched-empty p { margin: 0; color: var(--muted-2); font-size: .92rem; }

/* ---------- course hero ---------- */
.course-hero .ch-meta { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0 6px; padding: 0; }
.course-hero .ch-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: .82rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
}
.course-hero .ch-meta .ic { color: var(--yellow); }
.ch-pricing { display: grid; align-items: center; }
.price-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  backdrop-filter: blur(8px);
}
.price-card .pc-label { margin: 0 0 6px; color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.price-card .pc-value { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: #fff; }
.price-card .pc-value small { font-size: .5em; color: rgba(255, 255, 255, .75); font-weight: 600; }
.price-card .pc-exam { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px dashed rgba(255, 255, 255, .2); padding-top: 12px; }
.price-card .pc-exam span { color: rgba(255, 255, 255, .88); font-size: .84rem; }
.price-card .pc-exam b { color: #fff; font-size: 1.12rem; font-family: var(--font-display); }
.price-card .pc-note { margin: 0; color: rgba(255, 255, 255, .8); font-size: .78rem; }

/* ---------- course body ---------- */
.course-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.cb-block { margin-bottom: 40px; }
.cb-block h2 { font-size: 1.45rem; margin-bottom: 14px; }
.cb-block > p { color: var(--muted); font-size: .98rem; }
.cb-block .ic { color: var(--green); }
.mods { display: grid; gap: 10px; }
.mod { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.mod summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  font-family: var(--font-display); font-weight: 700; color: var(--navy-2);
  font-size: 1.04rem;
}
.mod summary::-webkit-details-marker { display: none; }
.mod .mod-no { color: var(--green); font-weight: 800; font-size: .92rem; }
.mod .mod-title { flex: 1; }
.mod .mod-x {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--navy-2); background: var(--cloud);
  transition: transform .32s cubic-bezier(.2, .65, .3, 1), background .25s;
}
.mod .mod-x svg { display: block; }
.mod summary:hover .mod-x { background: var(--green-tint-2); }
.mod[open] .mod-x { transform: rotate(180deg); background: var(--green-tint-2); }
.mod .mod-topics { margin: 0; padding: 4px 18px 16px 52px; }
.mod .mod-topics li { position: relative; padding: 5px 0 5px 18px; color: var(--muted); font-size: .98rem; }
.mod .mod-topics li::before { content: "—"; position: absolute; left: 0; color: var(--green); }
.cb-side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 22px; }
.cb-card { padding: 24px; display: grid; gap: 14px; }
.cb-card h3 { margin: 0; font-size: 1.02rem; }
.cb-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cb-facts li { display: flex; gap: 12px; align-items: flex-start; }
.cb-facts .ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-mid);
}
.cb-facts b { display: block; font-size: .92rem; color: var(--navy-2); }
.cb-facts small { color: var(--muted-2); font-size: .76rem; }
.wide-btn { justify-content: center; width: 100%; }
.cb-note { margin: 0; font-size: .78rem; color: var(--muted-2); text-align: center; }
.cb-related { display: grid; gap: 10px; }
.cb-related h3 { margin: 0 0 2px; font-size: .95rem; }
.rel-card {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 14px 16px; text-decoration: none;
  align-items: center;
}
.rel-card b { font-size: .86rem; color: var(--navy-2); }
.rel-card span { font-size: .74rem; color: var(--muted-2); }
.rel-card .arr { color: var(--green); }
.rel-card:hover { border-color: rgba(38, 122, 72, .4); }

/* ---------- article hero + body ---------- */
.article-hero {
  position: relative; overflow: hidden;
  background: var(--grad-navy-deep); color: #fff;
  padding: 84px 0 74px;
}
/* v9.11 — slide-under only for the first section on the page */
.article-hero.hero-top {
  padding-top: calc(var(--nav-h) + 84px);
  margin-top: calc(-1 * var(--nav-h));
}
.article-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(27, 63, 174, .32), transparent 70%),
    radial-gradient(420px 260px at 6% 90%, rgba(240, 220, 1, .08), transparent 70%);
}
.article-hero .wrap { position: relative; }
.article-hero h1 { color: #fff; max-width: 21em; }
.article-hero .micro { color: var(--yellow); }
.art-meta { display: flex; gap: 16px; align-items: center; margin: 10px 0 0; color: rgba(255, 255, 255, .7); font-size: .88rem; }
.art-meta .news-date { color: rgba(255, 255, 255, .7); }
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
/* v9.50 — the BACK link under an article / course ("← Back to all
   articles") is a real control, not a bare blue link: a bordered pill
   that reads as a button, with a comfortable 46px tap target. On
   phones it stretches to the full column and centres its arrow + words
   (the request: "back to all article at phone seems need a little fix
   due to the UI"). */
.art-back {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; min-height: 46px;
  border: 1.5px solid rgba(0, 32, 96, .24); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-weight: 700; color: var(--navy); text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.art-back:hover,
.art-back:focus-visible {
  background: var(--yellow); border-color: var(--yellow); color: var(--navy-3);
  outline: none;
}
@media (max-width: 640px) {
  .art-back { display: flex; width: 100%; justify-content: center; }
}
.art-body { max-width: 46em; }
.art-body p { color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
.art-body h2 { font-size: 1.4rem; margin: 1.6em 0 .6em; }
.art-body .pull {
  margin: 1.8em 0; padding: 18px 24px;
  border-left: 4px solid var(--yellow);
  background: var(--cloud); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: var(--navy-2);
}
.art-aside { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.art-aside .cb-card { padding: 22px; }
.cb-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cb-list li { position: relative; padding-left: 24px; color: var(--ink); font-size: .9rem; }
.cb-list li::before { content: "◆"; position: absolute; left: 2px; top: 5px; color: var(--green); font-size: .55rem; }

/* ---------- newsletter ---------- */
.newslet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 18px 40px; align-items: center;
  background: var(--grad-green-band); color: #fff;
  border-radius: var(--radius-lg); padding: 34px 36px;
  box-shadow: var(--shadow-green);
}
.newslet h2 { color: #fff; margin: 0 0 6px; font-size: 1.4rem; }
.newslet p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.newslet-form { display: flex; gap: 10px; }
.newslet-form input {
  flex: 1; min-width: 0; font: inherit;
  border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 12px;
  background: rgba(255, 255, 255, .12); color: #fff;
  padding: 12px 16px;
}
.newslet-form input::placeholder { color: rgba(255, 255, 255, .55); }
.newslet-form input.bad { border-color: #ff8a8a; background: rgba(255, 100, 100, .15); }
.newslet .f-note { color: rgba(255, 255, 255, .82); font-size: .74rem; margin: 0; }

/* ---------- responsive for v5 blocks ---------- */
@media (max-width: 1020px) {
  .course-body, .article-wrap { grid-template-columns: 1fr; }
  .cb-side, .art-aside { position: static; }
  .legal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .newslet { grid-template-columns: 1fr; padding: 26px 22px; }
  .newslet-form { flex-direction: column; }
  .legal-grid { grid-template-columns: 1fr; }
  .fac-grid { grid-template-columns: 1fr; }
  .ch-pricing { margin-top: 6px; }
  .price-card .pc-value { font-size: 1.6rem; }
  .month-tabs button { min-width: 46px; padding: 6px 9px; }
  .course-hero .ch-meta li { font-size: .74rem; padding: 6px 11px; }
}

/* ============ 404 PAGE ============ */
.nf { min-height: 78vh; display: flex; align-items: center;
  background:
    radial-gradient(900px 480px at 82% 8%, rgba(240, 220, 1, .10), transparent 60%),
    radial-gradient(760px 520px at 8% 88%, rgba(0, 32, 96, .10), transparent 62%),
    linear-gradient(180deg, #f6f8fc, var(--paper));
}
.nf .wrap { max-width: 760px; }
.nf-code {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(5.4rem, 14vw, 9rem); color: transparent;
  -webkit-text-stroke: 2px rgba(0, 32, 96, .30); display: block; margin-bottom: 10px;
}
.nf h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 12px; color: var(--navy-3); }
.nf .cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* 404 — academy flavour */
.nf-green { background:
    radial-gradient(900px 480px at 82% 8%, rgba(240, 220, 1, .12), transparent 60%),
    radial-gradient(760px 520px at 8% 88%, rgba(38, 122, 72, .14), transparent 62%),
    linear-gradient(180deg, #f4f9f5, var(--paper)); }
.nf-green .nf-code { -webkit-text-stroke-color: rgba(38, 122, 72, .38); }

/* ============================================================
   v8 — PRACTICE PHOTO CARDS (home), IMAGE CARDS, OVERLAY
   ACCORDION DROPDOWN, TTS CONTROLS, TEASER MEDIA
   ============================================================ */

/* ---- any card that is a link ---- */
a.card { color: inherit; text-decoration: none; }
a.card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-lg); }
a.card .more { color: var(--royal); }

/* ---- practice photo cards (home, Governance/Risk/Audit/Training) ---- */
.practice-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pc-media { position: relative; margin: 0; overflow: hidden; }
.pc-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .65s cubic-bezier(.2, .65, .3, 1); }
.practice-card:hover .pc-media img,
.practice-card:focus-visible .pc-media img { transform: scale(1.05); }
.pc-chip {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font: 700 .72rem/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase;
  color: var(--navy-2); background: rgba(255, 255, 255, .92);
  padding: 8px 13px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 6, 26, .16);
}
.pc-copy { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-copy h3 { margin: 0; font-size: 1.22rem; }
.pc-copy p { color: var(--muted); font-size: .95rem; margin: 0; flex: 1; }

/* ---- photos on portfolio / news / course / event cards ---- */
.proj, .news-card { overflow: hidden; }
.proj-media, .news-media, .course-media, .event-media { margin: 0; overflow: hidden; }
.proj-media img, .news-media img, .course-media img, .event-media img {
  width: 100%; object-fit: cover; display: block;
  transition: transform .65s cubic-bezier(.2, .65, .3, 1);
}
.proj-media img, .news-media img { aspect-ratio: 16 / 9.5; }
.course-media img { aspect-ratio: 16 / 8.5; }
.event-media img { aspect-ratio: 16 / 8.5; }
.proj-media { margin: -26px -26px 4px; }
.news-media { margin: -26px -26px 4px; }
.course-media { margin: -26px -26px 4px; }
.event-media { margin: -22px -22px 4px; }
.proj:hover .proj-media img, .news-card:hover .news-media img,
.course:hover .course-media img, .event:hover .event-media img { transform: scale(1.05); }

/* ---- press-to-open overlay accordion (services page) ---- */
.p-acc { position: relative; padding: 0; }
.p-acc-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
  padding: 22px 24px; font-family: inherit; color: inherit;
}
.p-acc-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.p-acc-no {
  font: 800 1.05rem/1 var(--font-display); color: transparent;
  -webkit-text-stroke: 1.3px rgba(0, 32, 96, .5);
}
.p-acc-title b { display: block; font-family: var(--font-display); font-size: 1.24rem; color: var(--navy-2); }
.p-acc-title small { display: block; color: var(--muted); font-size: .96rem; margin-top: 4px; }
.p-acc-x {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--royal); background: rgba(0, 32, 96, .07);
  transition: transform .38s cubic-bezier(.2, .65, .3, 1), background .3s, color .3s;
}
.p-acc-x svg { display: block; }
.p-acc-head:hover .p-acc-x { background: rgba(0, 32, 96, .14); }
.p-acc.open .p-acc-x { transform: rotate(180deg); background: var(--yellow); color: var(--navy); }
.p-acc-panel {
  position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 80;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgba(0, 6, 26, .20); padding: 8px 22px 18px;
  opacity: 0; transform: translateY(-10px) scale(.985); visibility: hidden; pointer-events: none;
  transition: opacity .3s cubic-bezier(.2, .65, .3, 1), transform .3s cubic-bezier(.2, .65, .3, 1), visibility .3s;
}
/* while open the panel is re-parented to <body> (see app.js) so section
   overflow clipping can never cut it off — the .open class travels with it */
.p-acc.open .p-acc-panel, .p-acc-panel.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.p-acc-panel .svc-items { display: grid; gap: 0; }
.p-acc-panel .svc-items li {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 12px 2px; border-top: 1px solid var(--line-soft); list-style: none;
}
.p-acc-panel .svc-items li:first-child { border-top: 0; }
.p-acc-panel .svc-items li strong { font-size: 1.04rem; color: var(--navy-2); }
.p-acc-panel .svc-items li span { color: var(--muted); font-size: .96rem; }
.p-acc-panel .more { display: inline-flex; margin-top: 12px; }

/* ---- academy teaser photo ---- */
.teaser-media { margin: 0 0 18px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 46, 22, .35); transform: rotate(.7deg); }
.teaser-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* ---- text-to-speech controls on articles ---- */
.tts-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 26px;
  background: rgba(0, 32, 96, .05); border: 1px solid rgba(0, 32, 96, .12);
  border-radius: 14px;
}
.tts-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 .85rem/1 var(--font-body); color: var(--navy-2);
  background: #fff; border: 1px solid rgba(0, 32, 96, .18); border-radius: 999px;
  padding: 9px 15px; transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.tts-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.tts-btn.play.on { background: var(--green); color: #fff; border-color: var(--green); }
.tts-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tts-speed { font: 600 .8rem/1 var(--font-body); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.tts-rate {
  font: 600 .82rem/1 var(--font-body); color: var(--navy-2);
  border: 1px solid rgba(0, 32, 96, .18); border-radius: 8px; padding: 7px 8px; background: #fff;
}
.art-list { margin: 0 0 1.2em; padding-left: 1.2em; color: var(--ink); }
.art-list li { margin-bottom: .45em; }

@media (max-width: 860px) {
  .p-acc-panel { left: -6px; right: -6px; }
}

/* the big outlined number on the green academy-teaser band must be
   light-on-dark to stay readable (v7 shipped it dark green on green) */
.acad-teaser .idx { -webkit-text-stroke-color: rgba(255, 255, 255, .55); }

/* ============ BOOT FALLBACK (JS off / content blocked) ============ */
.boot-fallback {
  margin: 0; padding: 16px 22px; background: #fff8e1; color: #4a3b00;
  font-size: 1rem; line-height: 1.65; border-bottom: 3px solid #f0dc01;
  font-family: var(--font-body, system-ui, sans-serif);
}
.boot-fallback code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: rgba(0, 32, 96, .08); padding: 1px 5px; border-radius: 4px;
}

/* ============================================================
   v9.4 — article reading (TTS v2): visible position + state
   ============================================================ */
.tts-btn.play.on {
  animation: tts-btn-pulse 1.6s ease-in-out infinite;
}
.tts-btn.play.paused { background: #b8860b; border-color: #b8860b; color: #fff; }
.tts-btn.play.paused svg { opacity: 1; }
@keyframes tts-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(38, 122, 72, .45); }
  55%      { box-shadow: 0 0 0 7px rgba(38, 122, 72, 0); }
}
@media (prefers-reduced-motion: reduce) { .tts-btn.play.on { animation: none; } }

/* progress bar + "Reading 3 / 24" chip */
.tts-progress {
  flex: none; width: 96px; height: 6px; border-radius: 4px;
  background: rgba(0, 32, 96, .12); overflow: hidden;
}
.tts-progress-bar {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), #3ea06a);
  transition: width .35s ease;
}
.tts-status {
  font: 700 .78rem/1.15 var(--font-body); color: var(--green);
  letter-spacing: .02em; min-width: 0;
}
.tts-status.done { color: var(--navy); }

/* the block being read: gold wash + solid side bars + navy text.
   Bars are box-shadows so nothing shifts layout while reading. */
.art-body .tts-reading,
.art-list .tts-reading {
  background: #fff2a8;
  box-shadow: -7px 0 0 0 var(--gold), 7px 0 0 0 var(--gold);
  border-radius: 6px;
  color: #171a2e;
  transition: background .18s, box-shadow .18s;
}
.art-body .tts-reading a { color: var(--navy); }
/* keep the block reachable by the centre-on-scroll without sticky
   headers covering it */
.art-body p, .art-body h2, .art-body h3, .art-body blockquote, .art-body li,
.art-list li { scroll-margin-top: 96px; }

/* ============================================================
   v9.4 — per-section accent colour + heading size (admin-set).
   The attribute is only present when an admin actually chose an
   accent, so the site-wide look is untouched otherwise.
   ============================================================ */
/* v9.14 — the per-section accent takes the kicker's DASH and the number
   badge, NOT the kicker text. Dash + text + badge all in the accent
   read as one doubly-formatted line ("the accent colour and micro look
   double formatted"); the text now keeps its normal colour for the band
   it sits on (royal on light bands, the light tint on dark bands, green
   where micro-green is used). */
section[data-sec-accent] .micro::before { background: var(--sec-accent); }
section[data-sec-accent] .micro.micro-green::before { background: var(--sec-accent); }
/* the outlined number badge strokes in the accent colour */
section[data-sec-accent] .section-head .idx { -webkit-text-stroke-color: var(--sec-accent); }
/* section headings scale with the admin choice (default = m).
   v9.5: attribute selectors on the <section> itself, so headings scale
   inside every layout (section-head, split copy, lead body), not only
   sections whose class list happens to contain "section"
   v9.50 — EIGHT heading steps (the request: “maybe about 8 size
   variations instead of 4” — and “the another font size seems not
   change”). The four v9.5 values are kept EXACTLY as they were, so
   sections already sized keep their look; XXS, XS, 2XL and 3XL fill
   the gaps below and above — every step a distinct, visible jump. */
section[data-hs="2xs"] .section-head h2,
section[data-hs="2xs"] .split-copy h2,
section[data-hs="2xs"] .lead-body h2 { font-size: clamp(1.12rem, 1.9vw, 1.38rem); }
section[data-hs="xs"] .section-head h2,
section[data-hs="xs"] .split-copy h2,
section[data-hs="xs"] .lead-body h2 { font-size: clamp(1.28rem, 2.25vw, 1.62rem); }
section[data-hs="s"] .section-head h2,
section[data-hs="s"] .split-copy h2,
section[data-hs="s"] .lead-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
section[data-hs="l"] .section-head h2,
section[data-hs="l"] .split-copy h2,
section[data-hs="l"] .lead-body h2 { font-size: clamp(2.15rem, 4.6vw, 3.35rem); }
section[data-hs="xl"] .section-head h2,
section[data-hs="xl"] .split-copy h2,
section[data-hs="xl"] .lead-body h2 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); }
section[data-hs="2xl"] .section-head h2,
section[data-hs="2xl"] .split-copy h2,
section[data-hs="2xl"] .lead-body h2 { font-size: clamp(2.85rem, 6.3vw, 4.7rem); }
section[data-hs="3xl"] .section-head h2,
section[data-hs="3xl"] .split-copy h2,
section[data-hs="3xl"] .lead-body h2 { font-size: clamp(3.2rem, 7vw, 5.3rem); }
section[data-hs="2xs"] .section-head .section-sub { font-size: .95rem; }
section[data-hs="s"] .section-head .section-sub { font-size: 1rem; }
section[data-hs="xl"] .section-head .section-sub { font-size: 1.13rem; }
section[data-hs="2xl"] .section-head .section-sub { font-size: 1.18rem; }
section[data-hs="3xl"] .section-head .section-sub { font-size: 1.24rem; }

/* ============================================================
   v9.5 — per-section BODY TEXT size + TEXT COLOUR (admin-set).
   Text size scales paragraphs, list items and table cells; it never
   touches buttons, chips or navigation so layouts keep their rhythm.
   Text colour only applies where the admin explicitly set one.
   ============================================================ */
/* v9.16 — the kicker line (.micro) is EXCLUDED from the admin text
   size: it has its own compact design (small, spaced, uppercase) and
   this rule used to outrank it — "Text size: Large" ballooned the
   label line from .85rem to 1.12rem while it kept its label styling,
   which read as one doubly-formatted line ("duplicate styling
   format"). Paragraphs, list items and table cells still scale. */
section[data-ts="2xs"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: .82rem; }
section[data-ts="xs"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: .88rem; }
section[data-ts="s"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: .92rem; }
section[data-ts="l"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: 1.12rem; }
/* v9.50 — three more steps above Large, completing the eight-step text
   ladder (2xs · xs · s · m · l · xl · 2xl · 3xl) */
section[data-ts="xl"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: 1.24rem; }
section[data-ts="2xl"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: 1.38rem; }
section[data-ts="3xl"] :is(p, li, blockquote, .section-sub):not(.micro) { font-size: 1.55rem; }
section[data-ts="2xs"] .sched td { font-size: .84rem; }
section[data-ts="xs"] .sched td { font-size: .88rem; }
section[data-ts="s"] .sched td { font-size: .9rem; }
section[data-ts="l"] .sched td { font-size: 1.1rem; }
section[data-ts="xl"] .sched td { font-size: 1.2rem; }
section[data-ts="2xl"] .sched td { font-size: 1.32rem; }
section[data-ts="3xl"] .sched td { font-size: 1.46rem; }
/* v9.10: the CTA / cross band wrappers (.quote-band-inner, .cross-band)
   used to outrank the admin's explicit choice, so "Text colour" silently
   did nothing on those bands — the pairs below now win (an explicit
   admin choice beats the preset, as the field hint promises). */
/* v9.16 — same exclusion for the admin text COLOUR: the kicker keeps
   its designed colour for the band it sits on (the v9.14 accent
   decision, applied to the text colour too), so a section text colour
   no longer recolours the label line on top of its own styling. */
section[data-sec-text] :is(p, li, blockquote, .section-sub, .sched td):not(.micro),
section[data-sec-text] .quote-band-inner p,
section[data-sec-text] .cross-band p { color: var(--sec-text); }
section[data-sec-text] :is(h2, h3),
section[data-sec-text] .quote-band-inner h2,
section[data-sec-text] .cross-band h3 { color: var(--sec-text); }
section[data-sec-text] a { color: var(--sec-text); }

/* generic tables: last column of a non-3-column table keeps the
   muted look the old schedule styles gave column 2 */
.sched td.tbl-last { color: var(--muted); }

/* ============================================================
   v9.4 — Academy link in the company footer (and the symmetric
   consulting link in the academy footer)
   ============================================================ */
.footer-links .footer-academy-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; letter-spacing: .02em;
}
.footer-links .footer-academy-link .arr { width: 13px; height: 13px; transition: transform .2s; }
.footer-links .footer-academy-link:hover .arr { transform: translateX(3px); }

/* ============================================================
   v9.6 — background presets are SELF-CONTAINED.
   Switching a section to the navy or green band preset from the
   admin used to leave the outlined number (01, 02 …), the small
   micro label and the heading in dark navy — invisible on the
   dark band, because only the data-green / data-invert layout
   attributes flipped them. The preset classes now flip every
   element themselves, so ANY section on ANY preset stays
   readable. Explicit admin choices still win (the accent and
   text-colour rules above have higher specificity).
   ============================================================ */
.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4,
.band-green h1, .band-green h2, .band-green h3, .band-green h4 { color: #fff; }
.band-navy .section-sub, .band-green .section-sub { color: rgba(255, 255, 255, .75); }
/* the micro label: gold on dark bands (mirrors the hero look) */
.band-navy .micro, .band-green .micro { color: var(--yellow-2); }
.band-navy .micro::before, .band-green .micro::before { background: var(--yellow); }
/* the big outlined section number flips to a light stroke on dark
   bands — covers section-head numbers, split numbers and any other
   .idx placement. Must come AFTER the .idx rules above so it also
   overrides the idx-green variant (green stroke on a green band
   was equally invisible). */
.band-navy .section-head .idx, .band-green .section-head .idx,
.band-navy .split > .idx, .band-green .split > .idx,
.band-navy .idx, .band-green .idx { -webkit-text-stroke-color: rgba(255, 255, 255, .42); }
/* the yellow quote band keeps navy text: deepen the number stroke
   slightly so it holds its own against the yellow gradient */
.band-quote .section-head .idx,
.band-quote .split > .idx,
.band-quote .idx { -webkit-text-stroke-color: rgba(0, 32, 96, .5); }

/* ============================================================
   v9.7 — inline text emphasis from the admin toolbar.
   The Highlight button paints a marker-style gold band behind the
   selected words; the Text colour button offers the brand palette
   plus any custom colour (stored as a strictly whitelisted
   style="color:#hex" on the span); the Size button scales words
   up and down in four steps. Scoped to span.hl / span.c-* /
   span.fs-* so the academy teaser's ul.hl list keeps its own look.
   ============================================================ */
span.hl {
  background: linear-gradient(transparent 38%, var(--hl-band) 38%, var(--hl-band) 92%, transparent 92%);
  border-radius: 3px;
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* v9.9: hero / page-hero / article-hero are dark bands too — the
   marker band + most palette colours had no exception there, so
   "text colour does not work" in exactly the fields everyone tests
   (page titles). Lighter variants are substituted per colour. */
.band-navy span.hl, .band-green span.hl, .on-dark span.hl, .on-green span.hl,
.hero span.hl, .page-hero span.hl, .article-hero span.hl, .academy-hero span.hl, .footer span.hl,
.band-navy ul.hl, .band-green ul.hl {
  background: linear-gradient(transparent 38%, var(--hl-band-dark) 38%, var(--hl-band-dark) 92%, transparent 92%);
}
span.c-gold, .band-navy span.c-gold, .band-green span.c-gold { color: #d9a417; }
.on-dark span.c-gold, .on-green span.c-gold, .hero span.c-gold, .page-hero span.c-gold,
.article-hero span.c-gold, .academy-hero span.c-gold, .footer span.c-gold { color: var(--yellow-2); }
span.c-navy { color: var(--navy-2, #123594); }
.on-dark span.c-navy, .band-navy span.c-navy, .band-green span.c-navy, .hero span.c-navy,
.page-hero span.c-navy, .article-hero span.c-navy, .academy-hero span.c-navy, .footer span.c-navy { color: #9fc0ff; }
span.c-green { color: #1e5c38; }
.on-dark span.c-green, .band-navy span.c-green, .band-green span.c-green, .hero span.c-green,
.page-hero span.c-green, .article-hero span.c-green, .academy-hero span.c-green, .footer span.c-green { color: #7ede5a; }
span.c-white { color: #fff; }
/* white text on a LIGHT band would be invisible — use navy there */
.band-quote span.c-white, .bg-paper-deco span.c-white, .bg-cloud span.c-white,
.sec-card span.c-white, .sec-grid span.c-white { color: var(--navy-2, #123594); }
span.c-red { color: #b3261e; }
.on-dark span.c-red, .band-navy span.c-red, .band-green span.c-red, .hero span.c-red,
.page-hero span.c-red, .article-hero span.c-red, .academy-hero span.c-red, .footer span.c-red { color: #ff9d94; }
/* v9.39 (academy parity) — the five extra palette colours, with their
   lightened twins for the dark bands so nothing turns invisible */
span.c-blue { color: #1d4ed8; }
.on-dark span.c-blue, .band-navy span.c-blue, .band-green span.c-blue, .on-green span.c-blue,
.hero span.c-blue, .page-hero span.c-blue, .article-hero span.c-blue, .academy-hero span.c-blue,
.footer span.c-blue { color: #93c5fd; }
span.c-teal { color: #0f766e; }
.on-dark span.c-teal, .band-navy span.c-teal, .band-green span.c-teal, .on-green span.c-teal,
.hero span.c-teal, .page-hero span.c-teal, .article-hero span.c-teal, .academy-hero span.c-teal,
.footer span.c-teal { color: #5eead4; }
span.c-orange { color: #c2410c; }
.on-dark span.c-orange, .band-navy span.c-orange, .band-green span.c-orange, .on-green span.c-orange,
.hero span.c-orange, .page-hero span.c-orange, .article-hero span.c-orange, .academy-hero span.c-orange,
.footer span.c-orange { color: #fdba74; }
span.c-purple { color: #6d28d9; }
.on-dark span.c-purple, .band-navy span.c-purple, .band-green span.c-purple, .on-green span.c-purple,
.hero span.c-purple, .page-hero span.c-purple, .article-hero span.c-purple, .academy-hero span.c-purple,
.footer span.c-purple { color: #c4b5fd; }
span.c-slate { color: #475569; }
.on-dark span.c-slate, .band-navy span.c-slate, .band-green span.c-slate, .on-green span.c-slate,
.hero span.c-slate, .page-hero span.c-slate, .article-hero span.c-slate, .academy-hero span.c-slate,
.footer span.c-slate { color: #cbd5e1; }
/* v9.39 (academy parity) — the five extra palette colours, with their
   lightened twins for the dark bands so nothing turns invisible */
span.c-blue { color: #1d4ed8; }
.on-dark span.c-blue, .band-navy span.c-blue, .band-green span.c-blue, .on-green span.c-blue,
.hero span.c-blue, .page-hero span.c-blue, .article-hero span.c-blue, .academy-hero span.c-blue,
.footer span.c-blue { color: #93c5fd; }
span.c-teal { color: #0f766e; }
.on-dark span.c-teal, .band-navy span.c-teal, .band-green span.c-teal, .on-green span.c-teal,
.hero span.c-teal, .page-hero span.c-teal, .article-hero span.c-teal, .academy-hero span.c-teal,
.footer span.c-teal { color: #5eead4; }
span.c-orange { color: #c2410c; }
.on-dark span.c-orange, .band-navy span.c-orange, .band-green span.c-orange, .on-green span.c-orange,
.hero span.c-orange, .page-hero span.c-orange, .article-hero span.c-orange, .academy-hero span.c-orange,
.footer span.c-orange { color: #fdba74; }
span.c-purple { color: #6d28d9; }
.on-dark span.c-purple, .band-navy span.c-purple, .band-green span.c-purple, .on-green span.c-purple,
.hero span.c-purple, .page-hero span.c-purple, .article-hero span.c-purple, .academy-hero span.c-purple,
.footer span.c-purple { color: #c4b5fd; }
span.c-slate { color: #475569; }
.on-dark span.c-slate, .band-navy span.c-slate, .band-green span.c-slate, .on-green span.c-slate,
.hero span.c-slate, .page-hero span.c-slate, .article-hero span.c-slate, .academy-hero span.c-slate,
.footer span.c-slate { color: #cbd5e1; }

/* v9.9 — font sizes from the Size select. Relative em steps, so the
   accessibility A+ / A- text zoom keeps scaling them for everyone.
   v9.49 — EIGHT steps (the request: “like small large xl 2xl have
   more variance, so if it collision I can shrink the font size
   without using absolute size, maybe about 8 size variations instead
   of 4”): XXS and Medium fill the fine-grained middle, 3XL and 4XL
   extend the top — every step is a distinct, visible jump. The four
   v9.9 values are kept EXACTLY as they were, so words already sized
   keep their look. fs-xxl stays beside fs-2xl — words sized by the
   older academy toolbar (XXL) keep rendering, and both toolbars emit
   the same classes. */
span.fs-2xs { font-size: .70em; }
span.fs-s { font-size: .82em; }
span.fs-m { font-size: .95em; }
span.fs-l { font-size: 1.18em; }
span.fs-xl { font-size: 1.42em; }
span.fs-2xl { font-size: 1.75em; line-height: 1.22; }
span.fs-3xl { font-size: 2.05em; line-height: 1.18; }
span.fs-4xl { font-size: 2.4em; line-height: 1.14; }
span.fs-xxl { font-size: 1.62em; }

/* v9.9 — the A accent in BODY text. The gold sweep used to exist
   only inside h1/h2, so pressing A on a paragraph looked like it
   did nothing ("A only works on the brand"). Now paragraphs, list
   items and stat labels get the same emphasis — yellow text on the
   dark bands, gold sweep everywhere else. */
/* v9.11 — the A accent in BODY text is now gold TEXT, not a copy of the
   H marker band: the two buttons used to look identical in paragraphs
   ("the A became like H"). H = marker band behind the words; A = the
   brand's gold emphasis colour on the words themselves. */
/* v9.16 — the accent is COLOUR, not weight: the 600 weight made
   accented body words read as "this text became bold" ("it shouldn't
   be like that"). The gold tone carries the emphasis on its own. */
p em, li em, dt em, dd em {
  font-style: normal;
  color: var(--accent-ink);
  padding: 0 .06em;
  border-radius: 2px;
}
.hero p em, .page-hero p em, .article-hero p em, .academy-hero p em,
.band-navy p em, .band-green p em, .on-dark p em, .on-green p em, .footer p em,
.hero li em, .page-hero li em, .article-hero li em, .academy-hero li em,
.band-navy li em, .band-green li em, .on-dark li em, .on-green li em, .footer li em,
.hero dt em, .hero dd em {
  background: none;
  color: var(--yellow);
}

/* ============================================================
   v9.7 — per-section "corner glow" switch (style.noorb).
   Hides the decorative blurred circles and ambient corner glows on
   the sections that carry them, so a preset change or a minimal look
   never leaves a stray circle behind.
   ============================================================ */
section[data-noorb] .orb { display: none; }
section[data-noorb]::before,
section[data-noorb]::after { content: none; }
section[data-noorb] .stat::after { display: none; }
section[data-noorb] .cert-detail::before { display: none; }
/* v9.10 — the site-wide switch from Settings: one attribute on <html>
   hides every decorative circle and ambient glow on EVERY page
   (the per-section data-noorb rules above still work on their own) */
html[data-noorb] .orb { display: none; }
html[data-noorb] .bg-paper-deco::before, html[data-noorb] .bg-paper-deco::after,
html[data-noorb] .bg-cloud::before, html[data-noorb] .bg-cloud::after { content: none; }


/* v9.7 — a slider whose slides ALL fit on screen: no dead arrows */
.cert-viewport.cert-done .cert-arrows { display: none; }
.cert-viewport.cert-done .cert-track { scroll-snap-type: none; }
/* the admin accent colour now also strokes the SPLIT and TEASER
   numbers (v9.4 only reached the section-head number, so choosing
   an accent on a split section silently did nothing to the 01) */
section[data-sec-accent] .split > .idx,
section[data-sec-accent] .acad-teaser .idx { -webkit-text-stroke-color: var(--sec-accent); }
/* body copy with explicit light-theme colours, re-flipped for the
   dark presets (lead paragraphs, split bullet points, table notes) */
.band-navy .lead-body p, .band-green .lead-body p { color: rgba(255, 255, 255, .78); }
.band-navy .split-copy .points li, .band-green .split-copy .points li { color: rgba(255, 255, 255, .88); }
.band-navy .table-note, .band-green .table-note { color: rgba(255, 255, 255, .72); }
.band-navy p, .band-green p,
.band-navy li, .band-green li { color: rgba(255, 255, 255, .82); }
/* cards keep their WHITE design — their text must stay dark even
   when the band around them is navy/green (the section colour
   would otherwise inherit into them as white-on-white) */
.band-navy .card, .band-green .card { color: var(--ink); }
.band-navy .card h1, .band-navy .card h2, .band-navy .card h3, .band-navy .card h4,
.band-green .card h1, .band-green .card h2, .band-green .card h3, .band-green .card h4 { color: var(--navy-2); }
.band-navy .card p, .band-navy .card li,
.band-green .card p, .band-green .card li { color: var(--ink); }
.band-navy .card .section-sub, .band-green .card .section-sub { color: var(--muted); }

/* ============================================================
   v9.8 — white chip boxes on the dark bands keep DARK text.
   The generic ".band-navy li { color: white }" above bleached
   the catalogue list and the trust-strip pills white-on-white
   (they render on #fff backgrounds), which read as empty boxes
   with only the yellow marker dot visible.
   ============================================================ */
.band-navy .cat-grid li, .band-green .cat-grid li { color: var(--navy-2); }
.band-navy .marquee-track li, .band-green .marquee-track li { color: var(--navy-2); }
.band-navy .client-item, .band-green .client-item { color: var(--navy-2); }
.band-navy .client-item small, .band-green .client-item small { color: var(--muted-2); }
.band-navy .client-item b, .band-green .client-item b { color: var(--navy-2); }
/* the schedule table keeps its light rows — same protection */
.band-navy .sched td, .band-green .sched td { color: var(--ink); }
.band-navy .sched td.sched-dur, .band-green .sched td.sched-dur { color: var(--muted); }

/* ============================================================
   v9.37 — SEO/GEO STATIC FALLBACK
   .seo-static is the crawlable text version of a page that ships in
   the HTML itself: search engines and AI crawlers that never run
   JavaScript read it, and no-JavaScript visitors see a clean,
   readable page. The moment app.min.js boots it replaces the whole
   block with the designed live page, so these styles only ever
   matter to readers without JavaScript.
   ============================================================ */
.seo-static {
  max-width: 780px;
  margin: 0 auto;
  padding: 72px 22px 96px;
  font-size: 1.02rem;
}

/* ============================================================
   v9.40 — INSTANT BOOT (no plain-HTML flash)
   boot.js (the tiny first script in <head>) marks <html> as .js
   before the first paint, so a JavaScript visitor NEVER sees the
   static text version appear and get replaced — it stays hidden
   from frame one, and the designed site renders as soon as the
   deferred scripts arrive (they now load from <head>, in parallel,
   instead of being discovered at the end of <body>).
   Crawlers and no-JavaScript visitors are unaffected: they never
   run boot.js, so the readable text version stays visible.
   If app.min.js fails to boot within 7s, boot.js removes the mark
   again and the text version comes back — a broken upload degrades
   to a readable page, never a blank one.
   ============================================================ */
html.js .seo-static { display: none; }

/* the loading skeleton shown while the deferred scripts arrive.
   Branded, quiet, ~30 lines of CSS, zero requests. app.min.js adds
   .booted to <html> the moment the designed page is up (and removes
   the node), so it never outstays its welcome; prefers-reduced-
   motion gets a static bar instead of the slide. */
#boot {
  position: fixed; inset: 0; z-index: 2147480000;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  background: #fdfcf8;
}
html.js:not(.booted) #boot { display: flex; }
#boot .boot-word {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--navy);
}
#boot .boot-line {
  width: min(230px, 44vw); height: 3px; border-radius: 99px;
  background: rgba(217, 164, 23, .22); overflow: hidden;
}
#boot .boot-line i {
  display: block; height: 100%; width: 52%; border-radius: 99px;
  background: linear-gradient(90deg, var(--yellow), #d9a417);
  animation: boot-slide .95s ease-in-out infinite;
}
@keyframes boot-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(210%); }
}
@media (prefers-reduced-motion: reduce) {
  #boot .boot-line i { animation: none; transform: none; width: 100%; background: rgba(0, 32, 96, .16); }
}
.seo-static h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.14;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.seo-static h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 36px 0 12px;
}
.seo-static h3 {
  font-size: 1.06rem;
  margin: 26px 0 8px;
}
.seo-static p { line-height: 1.68; margin: 0 0 12px; }
.seo-static ul { padding-left: 22px; margin: 0 0 14px; }
.seo-static li { line-height: 1.6; margin-bottom: 6px; }
.seo-static a { text-decoration: underline; text-underline-offset: 3px; }
.seo-static section { display: block; }
.seo-static section > .wrap { max-width: 780px; margin: 0 auto; padding: 56px 22px 24px; }

/* v9.39 — the static HEADER and FOOTER blocks (stamped from the
   Header / Footer tabs' data; replaced by app.min.js on boot).
   They give a no-JavaScript visitor a real page frame: a navy band
   with the brand, the menu and the phone at the top, and the footer
   facts at the bottom — the same words a crawler reads. */
.seo-static-hd {
  max-width: none; margin: 0; padding: 0 22px;
  background: var(--grad-navy-band, linear-gradient(92deg, #002060, #123594));
  color: #fff;
  font-size: .92rem;
}
.seo-static-hd .seo-tb {
  margin: 0; padding: 10px 0;
  font-size: .78rem; letter-spacing: .05em;
  color: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.seo-static-hd .seo-brand {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
}
.seo-static-hd .seo-brand a { color: #fff; text-decoration: none; }
.seo-static-hd nav {
  margin: 0 0 18px;
  line-height: 2;
  color: rgba(255, 255, 255, .85);
}
.seo-static-hd nav a { color: #fff; }
.seo-static-hd nav a.seo-cta { font-weight: 700; color: var(--yellow-2, #ffe45c); }
.seo-static-ft {
  max-width: none; margin: 0; padding: 34px 22px 30px;
  background: var(--grad-navy-deep, linear-gradient(160deg, #001540, #002060));
  color: rgba(255, 255, 255, .85);
  font-size: .92rem;
}
.seo-static-ft h2 { color: #fff; margin: 22px 0 8px; font-size: 1.15rem; }
.seo-static-ft a { color: var(--yellow-2, #ffe45c); }

/* ============================================================
   v9.51 — FORMATTING ON THE HEADER & FOOTER WORDS
   The topbar words, the menu labels, the header button's words, the
   footer texts and the footer link labels are edited with the rich
   toolbar on the Header and Footer tabs, and they render here with
   the same treatment the body text gets. The dark chrome — topbar,
   mobile menu, footer — receives the same light twins those bands
   already have for the marker and every palette colour; the accent
   <em> reads as the yellow emphasis it is everywhere else; a marker
   or colour picked on a light surface (the scrolled nav bar) keeps
   its light-surface look.
   ============================================================ */
.topbar span.hl, .mobile-menu span.hl {
  background: linear-gradient(transparent 38%, var(--hl-band-dark) 38%, var(--hl-band-dark) 92%, transparent 92%);
}
.topbar span.c-gold, .mobile-menu span.c-gold { color: var(--yellow-2); }
.topbar span.c-navy, .mobile-menu span.c-navy { color: #9fc0ff; }
.topbar span.c-green, .mobile-menu span.c-green { color: #7ede5a; }
.topbar span.c-white, .mobile-menu span.c-white { color: #fff; }
.topbar span.c-red, .mobile-menu span.c-red { color: #ff9d94; }
.topbar span.c-blue, .mobile-menu span.c-blue { color: #93c5fd; }
.topbar span.c-teal, .mobile-menu span.c-teal { color: #5eead4; }
.topbar span.c-orange, .mobile-menu span.c-orange { color: #fdba74; }
.topbar span.c-purple, .mobile-menu span.c-purple { color: #c4b5fd; }
.topbar span.c-slate, .mobile-menu span.c-slate { color: #cbd5e1; }
/* the accent <em> on the dark chrome: the yellow emphasis */
.topbar em, .mobile-menu em, .footer em { font-style: normal; color: var(--yellow); }
/* the accent <em> on a menu link: the gold sweep, readable on the
   white bar and over the hero alike */
.nav-links em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--sweep) 60%);
  padding: 0 .06em;
}
/* a button's words (the yellow Get a Quote / green Register): the
   accent stays upright, never italic */
.btn em { font-style: normal; }