/* Re-point Zenith's own generic design tokens (zenith/assets/css/main.css)
     at Project Superhero's brand palette. Every top-level page section is
     bespoke and never touches these (see the file-level note in
     header.php), but the native blog loop (.zenith-entry*, used by
     index.php for the /blog/ posts page) and generic page/post content
     (.zenith-page*, single.php + Nova-disabled pages) DO use Zenith's own
     components/tokens as-is -- without this, Zenith's un-customized
     defaults are a completely different gold/near-black dark theme
     (--zenith-color-surface-alt: #1c1811 etc.), which made blog cards
     render as unreadable dark-text-on-dark-background boxes the first time
     this was tested. Redefining the tokens once here (rather than
     overriding each .zenith-* selector's color individually) means any
     other generic Zenith component this site starts using later inherits
     the right palette automatically.

     `html:root`, not plain `:root` -- Zenith's Theme Options panel injects
     its OWN `:root { --zenith-color-*: ... }` block as an inline <style>
     in wp_head, which lands in the DOM after every enqueued stylesheet
     (including this file) and would otherwise win the cascade on source
     order alone despite identical (0,1,0) specificity. `html:root`
     targets the same root element with strictly higher specificity
     (0,1,1), so this wins regardless of where in <head> that inline block
     ends up -- confirmed necessary by testing: a plain `:root` block here
     had zero visible effect, `getComputedStyle` still showed Zenith's
     original dark values, until switched to this selector. */
  html:root {
    --zenith-color-primary: #EB283F;
    --zenith-color-primary-contrast: #fff;
    --zenith-color-text: ##2a2e42;
    --zenith-color-text-muted: #656878;
    --zenith-color-surface: #FAF8F6;
    --zenith-color-surface-alt: #fff;
    --zenith-color-border: rgba(24,26,37,.12);
  }

  /* Nova Builder core's own scroll-reveal CSS (assets/css/frontend.css,
     .nova-animate) reads --nova-anim-duration/--nova-anim-distance via
     var(--x, fallback) and never defines them itself, relying entirely on
     each var()'s own fallback. Isolated by testing a bare div with the
     exact same `transition: opacity var(--nova-anim-duration, 0.6s) ease`
     declaration outside of any Nova markup entirely: with the custom
     property left undefined (fallback-only), setting opacity via
     JS/inline style afterward never took visible effect no matter what
     (not even an inline `!important`) -- but the *identical* transition
     with the property explicitly defined here (to the very same 0.6s
     value the fallback already specified) worked correctly every time.
     Defining them for real, not just leaning on the fallback, is what
     actually fixes every .nova-animate section on this site failing to
     reveal on scroll. */
  :root {
    --nova-anim-duration: 0.6s;
    --nova-anim-distance: 28px;
  }

  :root {
    --red: #EB283F;
    --red-deep: #a3162a;
    --ink: #2a2e42;
    --ink-soft: #2b2e3d;
    --paper: #FAF8F6;
    --line: rgba(24,26,37,.12);
    --grey-text: #656878;
    --grad-red: linear-gradient(135deg, #ff6b7d 0%, var(--red) 55%, var(--red-deep) 100%);
    --grad-ink: linear-gradient(135deg, #2b2e3d 0%, #0a0b11 80%);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  /* --------------------------------------------------------------------
     Nova Builder structural-wrapper reset.
     --------------------------------------------------------------------
     Every section on this page is rendered as:
       <section class="nova-section ... hero">      <-- real box, our class
         <div class="nova-section__inner">          <-- Nova wrapper
           <div class="nova-column">                <-- Nova wrapper
             <div class="nova-element">             <-- Nova wrapper
               ...actual .hero / .prow / etc markup, exactly ported
               from the static design...
     These three Nova wrapper divs don't exist in the original static file.
     Bug this caused everywhere: nova-builder's own frontend.css puts a
     default `padding-block: 0.75rem` on every .nova-column -- a ~12px
     sliver of the wrong background color at the top/bottom of every
     section, breaking the seamless full-bleed look between differently
     colored sections (e.g. paper showing through at the edges of the dark
     .statement/.team/.newsletter bands). Fixed by simply zeroing it out --
     deliberately NOT display:contents here (see below for why). */
  .nova-section--full-width .nova-column {
    padding-block: 0;
  }
  /* A consistent minimum gap before the footer on every Nova-built page --
     some pages' last section (e.g. the homepage's full-bleed .newsletter,
     whose own padding lives on .newsletter-copy/.newsletter-media rather
     than the section itself, so a taller photo could win the grid row and
     leave near-zero visible gap) ended flush against the footer. Renderer
     always wraps a page's whole content tree in this one div, so a single
     rule here covers every page uniformly rather than patching each
     page's own last section's padding individually. */
  .nova-content {
    padding-bottom: 80px;
  }

  /* .newsletter is the one section whose own CSS (`display:grid` set on
     the section-classed element itself) requires .newsletter-copy/
     .newsletter-media to be its DIRECT children to become grid items --
     nested inside the 3 wrapper divs above, the grid had only one child
     (.nova-section__inner) to lay out, so the two-column split silently
     never applied and the two halves stacked instead. `display: contents`
     removes each wrapper's own box while keeping its children as direct
     children of the real <section> for grid purposes, fixing exactly that.
     Scoped to ONLY the newsletter section (not applied broadly to every
     section) because display:contents has a real, observed side effect:
     it changed how a negative margin (.hero-badge's mobile
     `margin-top:-34px`) collapses against the surrounding flow, making
     .hero render taller on mobile than the static design -- so it's used
     here only where something genuinely needs direct-child promotion for
     grid/flex layout (every other section either has no such dependency,
     or nests its own real grid/flex container inside its own render()
     output already, e.g. `.prow`, `.vid-row`). */
  .nova-section.newsletter > .nova-section__inner,
  .nova-section.newsletter .nova-section__inner > .nova-column,
  .nova-section.newsletter .nova-column > .nova-element {
    display: contents;
  }
  body {
    font-family: 'Montserrat', sans-serif;
    color: var(--ink);
    line-height: 1.65;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: 'Lora', serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -.01em;
  }
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  .ctn { max-width: 1320px; margin: 0 auto; padding: 0 40px; position: relative; }
  .ctn-narrow { max-width: 820px; }

  .kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 22px;
  }
  /* Numbered prefix (01, 02, ...) removed sitewide per request -- hidden
     rather than stripped from each element's markup/settings, so the
     underlying kicker_num data (and every element's own default) stays
     intact if this ever needs reverting. */
  .kicker .num {
    display: none;
  }
  .kicker .rule { flex: 1; height: 1px; background: var(--line); }
  .kicker.on-dark { color: #ff8a97; }
  .kicker.on-dark .rule { background: rgba(255,255,255,.18); }
  .kicker.on-dark .num { color: rgba(255,255,255,.5); }
  .kicker.center { justify-content: center; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 16px 30px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
  }
  .btn-solid { background: var(--red); color: #fff; }
  .btn-solid:hover { background: var(--red-deep); transform: translateY(-2px); }
  .btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-line:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
  .btn-line.on-dark { color: #fff; border-color: rgba(255,255,255,.4); }
  .btn-line.on-dark:hover { background: #fff; color: var(--ink); }
  .btn-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--red); }
  .btn-arrow span { transition: transform .25s ease; }
  .btn-arrow:hover span { transform: translateX(5px); }

  /* Announcement */
  .announce {
    background: var(--ink);
    color: rgba(255,255,255,.75);
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 9px 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  /* Header. Scoped to `body > header` (not bare `header`) -- the site's
     own <header> in header.php is a direct child of <body>, but Zenith's
     native blog-card template also uses a semantic <header class="zenith-
     entry__header"> for each card's title+meta, nested deep inside
     <main>. A bare `header{}` rule matched both, painting every blog card
     title with the dark sticky-nav background (found when the /blog/
     archive was first styled -- same underlying mistake as the .post-
     header/<div> fix in single.php, just the CSS-selector-side version). */
  body > header {
    position: sticky;
    top: 0;
    /* Must out-rank .nav-backdrop (z-index 85, a *sibling* of header --
       see #navBackdrop below) at the body level. This being sticky + a
       z-index makes header its own stacking context, which traps nav's
       own z-index:90 (and .burger's 95) entirely *inside* it -- those
       numbers only ever compete against header's own descendants, never
       against header's siblings. With header itself at the old value of
       80 (below the backdrop's 85), the *entire* header -- nav panel,
       burger button, all of it -- silently painted/hit-tested underneath
       the full-viewport backdrop the instant the mobile menu opened,
       regardless of nav/.burger's own much higher internal z-index
       values. That made every tap on the open panel's links (the
       "Services" dropdown included) actually land on .nav-backdrop
       instead, instantly closing the whole menu via its own click
       handler -- exactly the "submenu can't be opened" / "closes the
       entire menu" behavior reported, and something no click() dispatched
       directly on the link (bypassing real hit-testing) could ever have
       caught. */
    z-index: 96;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  /* The frosted-glass tint+blur lives on a ::before layer instead of on
     <header> itself now -- backdrop-filter (like transform/filter) makes
     the element carrying it the *containing block* for any position:fixed
     descendant, not just position:absolute ones. #siteNav (the mobile
     off-canvas panel) is position:fixed nested inside <header>, so as
     long as backdrop-filter sat directly on <header>, "fixed" only ever
     meant "fixed to header's own box", not the real viewport -- confirmed
     by shifting header's box and watching the "fixed" nav panel move by
     the exact same amount. That's harmless while scrolled to the very
     top (header's box and the viewport coincide there), which is exactly
     why the mobile menu only ever worked "on the top part of the page"
     and broke the moment header engaged its sticky/scrolled position.
     A ::before pseudo-element has no descendants of its own, so it can
     carry backdrop-filter without turning <header> itself into anyone's
     containing block -- same visual result (it paints behind header's
     real content, at header's own box, via position:absolute + a
     positioned ancestor), but #siteNav's position:fixed now genuinely
     means the viewport again. */
  body > header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(24,26,37,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  /* WP's admin toolbar is itself `position:fixed; top:0` while logged in
     (adds a real `admin-bar` class to <body>, not just visual height) --
     our own sticky header also pins to `top:0`, so the two stack exactly
     on top of each other once the page scrolls, hiding the site nav
     behind the toolbar. Push the sticky offset down by the toolbar's own
     height instead (32px desktop, 46px below WP's 782px admin-bar
     breakpoint -- matches wp-admin's own breakpoint exactly, not our
     980px site breakpoint). Only ever applies while logged in; a visitor
     never has body.admin-bar. */
  body.admin-bar > header { top: 32px; }
  @media screen and (max-width: 782px) {
    body.admin-bar > header { top: 46px; }
  }
  .header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .logo { display: flex; align-items: center; gap: 14px; }
  .logo img { height: 46px; filter: brightness(0) invert(1); }
  .logo .site-name {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 19px;
    color: #fff;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  nav { display: flex; }
  nav .primary-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav .primary-menu .menu-item { position: relative; }
  nav a.navlink {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    transition: color .2s ease;
  }
  nav a.navlink:hover { color: var(--red); }

  /* Dropdown caret for Services / Resources */
  .menu-item-has-children > a.navlink::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 7px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .menu-item-has-children:hover > a.navlink::after,
  .menu-item-has-children.sub-menu-open > a.navlink::after {
    transform: rotate(-135deg);
    margin-bottom: -3px;
  }

  /* Dropdown panel (desktop: absolute flyout; mobile: inline accordion — see the 980px block) */
  .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 230px;
    background: #21232f;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 100;
  }
  /* Scoped to desktop only (matches the 980px breakpoint psh-nav.js's
     accordion-vs-flyout check and the mobile media query below both use).
     An unscoped :hover rule on this link was also matching at mobile
     widths -- harmless for the CSS itself (the mobile media query below
     already forces display:none/block based on .sub-menu-open instead),
     but real touch browsers treat a link with any matching :hover rule
     specially: the first tap only simulates :hover, and a second tap is
     needed before `click` actually fires. That silently broke opening the
     submenu on real phones (never reproducible with this tool's
     mouse-emulated clicks, which don't have that quirk) since
     psh-nav.js's accordion toggle only runs on `click`. */
  @media (min-width: 981px) {
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:focus-within > .sub-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }
  .sub-menu .menu-item a {
    display: block;
    padding: 10px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: none;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
  }
  .sub-menu .menu-item a:hover { color: #fff; background: rgba(255,255,255,.06); }
  .sub-menu .menu-item a small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255,255,255,.85);
    margin-top: 2px;
  }

  /* Contact item styled as the red CTA button (see includes/nav.php) */
  nav li.nav-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--red);
    padding: 11px 24px;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }
  nav li.nav-cta > a:hover { background: var(--red-deep); color: #fff; transform: translateY(-2px); }

  /* Burger toggle (mobile only) */
  .burger {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 95;
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  }
  .burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger.active span:nth-child(2) { opacity: 0; }
  .burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,11,17,.55);
    z-index: 85;
    opacity: 0;
    transition: opacity .3s ease;
  }
  body.menu-open .nav-backdrop { display: block; opacity: 1; }
  /* Background-scroll lock while the mobile panel is open -- NOT
     `overflow: hidden`, which was the actual cause of the sticky header
     (and the burger/X icon inside it) jumping to the wrong spot, or off
     screen entirely, the instant the menu opened while already scrolled
     down. Setting `overflow` to anything but `visible` on an ancestor of
     a `position: sticky` element turns that ancestor into a *scrolling
     container* sticky recalculates against -- <body> has no meaningful
     scroll offset of its own separate from the document's, so the moment
     that container appeared, header's stuck position was recalculated
     against it and reset, independently of where the page had actually
     been scrolled to (the exact same class of bug documented in zenith's
     own main.css comment on `html, body { overflow-x: hidden/clip }`,
     just triggered here by the .menu-open toggle instead of being
     permanent). Fixed with the standard scroll-lock pattern instead:
     `position: fixed` freezes the whole page exactly where it visually
     was (header included) without turning anything into a scroll
     container; assets/js/psh-nav.js sets/restores `top` to the negative
     of the real scroll offset so nothing visually jumps on open OR close. */
  body.menu-open {
    position: fixed;
    width: 100%;
  }

  /* HERO — traditional split banner */
  .hero {
    background: var(--paper);
    padding: 76px 0 110px;
    overflow: hidden;
    position: relative;
  }
  .hero::before {
    content: '';
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,40,63,.16), rgba(235,40,63,0) 70%);
    filter: blur(55px);
    top: -170px; left: -110px;
  }
  .hero .ctn { position: relative; z-index: 2; min-height: 480px; display: flex; align-items: center; }
  .hero-copy { max-width: 500px; }
  .hero h1 {
    font-size: 52px;
    color: var(--ink);
    margin-bottom: 22px;
  }
  .hero h1 .magic { color: var(--red); }
  .hero p.lead {
    font-size: 16px;
    color: var(--grey-text);
    margin-bottom: 22px;
    max-width: 440px;
  }
  .hero ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 13px;
    color: var(--ink);
  }
  .hero ul li .check {
    width: 22px; height: 22px;
    background: var(--red);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(235,40,63,.3);
  }
  .hero-media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 54%;
    z-index: 1;
  }
  .hero-media::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 140px;
    background: linear-gradient(90deg, var(--paper) 0%, rgba(250,248,246,0) 100%);
    z-index: 2;
  }
  .hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 65% 20%;
    filter: saturate(1.12) brightness(1.04);
  }
  .hero-badge {
    position: absolute;
    /* --hero-badge-x/-y are set inline per-instance by HeroElement::render()
       from the "Badge Horizontal/Vertical Position" settings -- the
       fallback values here only matter if those settings are ever blank. */
    left: var(--hero-badge-x, -26px); bottom: var(--hero-badge-y, 62px);
    background: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 16px 36px rgba(24,26,37,.16);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 240px;
    z-index: 3;
  }
  .hero-badge .dot-ring {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--grad-red);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 15px;
  }
  .hero-badge span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
  }

  /* Statement / difference banner */
  .statement { padding: 130px 0; background: var(--ink); position: relative; overflow: hidden; }
  .statement::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,40,63,.16), rgba(235,40,63,0) 70%);
    filter: blur(60px);
    bottom: -220px; right: -120px;
  }
  .statement .ctn { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; position: relative; z-index: 1; }
  .statement blockquote {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.4;
    color: #fff;
  }
  .statement blockquote .accent { color: var(--red); }

  /* PSH: Video Showcase (dark) -- psh_video_showcase, same dark-band
     design language as .statement above (reusable on any inner page, not
     just Buds/Academy). */
  .video-showcase { padding: 110px 0; background: var(--ink); position: relative; overflow: hidden; }
  .video-showcase::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,40,63,.18), rgba(235,40,63,0) 70%);
    filter: blur(60px);
    top: -240px; left: -140px;
  }
  .video-showcase__inner { position: relative; z-index: 1; text-align: center; }
  .video-showcase__inner .kicker.on-dark.center { justify-content: center; margin: 0 auto 20px; max-width: fit-content; }
  .video-showcase__inner h2 { color: #fff; font-size: 38px; margin-bottom: 16px; }
  .video-showcase__subtitle { color: rgba(255,255,255,.82); font-size: 15.5px; max-width: 560px; margin: 0 auto 44px; }
  .video-showcase__frame {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  }
  .video-showcase__frame iframe,
  .video-showcase__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }

  @media (max-width: 980px) {
    .video-showcase { padding: 70px 0; }
    .video-showcase__inner h2 { font-size: 28px; }
  }

  /* Video row — matches the Programs editorial row style */
  .video-banner { background: #fff;  padding: 100px 0;}
  .vid-row {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 520px;
    
  
  }
  .vid-media { position: relative; overflow: hidden; }
  .vid-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .vid-row:hover .vid-media img { transform: scale(1.045); }
  /* Click-to-play embed (assets/js/psh-nav.js swaps this in for the photo
     on .vid-play click) -- fills the exact same box the photo occupied. */
  .vid-media .vid-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* Mute/unmute toggle -- shared by .vid-media (video banner) and
     .video-showcase__frame (dark showcase), both of which now render a
     muted-autoplay iframe via psh_youtube_autoplay_embed(). One icon is
     shown/hidden per data-muted state, toggled by assets/js/psh-nav.js. */
  .vid-mute-toggle {
    position: absolute;
    right: 18px; bottom: 18px;
    z-index: 2;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(24,26,37,.62);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
  }
  .vid-mute-toggle:hover { background: var(--red); transform: scale(1.06); }
  .vid-mute-toggle[data-muted="true"] .icon-unmuted { display: none; }
  .vid-mute-toggle[data-muted="false"] .icon-muted { display: none; }
  .vid-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 82px; height: 82px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 40px rgba(24,26,37,.28);
    transition: transform .3s ease;
  }
  .vid-play:hover { transform: translate(-50%, -50%) scale(1.08); }
  .vid-play .tri {
    width: 0; height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--red);
    margin-left: 4px;
  }
  .vid-body { display: flex; align-items: center; padding: 70px 70px; }
  .vid-body-inner { max-width: 440px; }
  .vid-body h2 { font-size: 36px; color: var(--ink); margin-bottom: 16px; }
  .vid-body p { color: var(--grey-text); font-size: 15px; margin-bottom: 26px; }

  /* PROGRAMS — editorial alternating rows */
  .programs { padding: 60px 0; }
  .programs-head { padding: 70px 0 100px; }
  .programs-head h2 { font-size: 40px; max-width: 700px; }
  .prow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
    
  }
  .prow:last-child { border-bottom: 1px solid var(--line); }
  .prow-media { position: relative; overflow: hidden; }
  .prow-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
  .prow:hover .prow-media img { transform: scale(1.045); }
  .prow-body { display: flex; align-items: center; padding: 70px 70px; }
  .prow.reverse { direction: rtl; }
  .prow.reverse .prow-body { direction: ltr; }
  .prow.reverse .prow-media { direction: ltr; }
  .prow-body-inner { max-width: 560px; }
  .prow-num {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--grey-text);
    margin-bottom: 18px;
    display: block;
  }
  .prow-title { font-size: 46px; margin-bottom: 6px; }
  .prow.buds .prow-title { color: var(--red); }
  .prow.academy .prow-title { color: var(--ink); }
  /* Generic equivalents used by the reusable PSH: Program Row Nova element
     (includes/elements/ProgramRowElement.php) -- same rules, not tied to a
     specific program's name. */
  .prow-title.title-red { color: var(--red); }
  .prow-title.title-ink { color: var(--ink); }
  .prow-sub { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
  .prow-age {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--grey-text);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .prow-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 30px; }
  .prow-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: var(--grey-text);
    padding: 9px 0;
    line-height: 1.4;
  }
  /* Same red check badge as the hero's checklist (.hero ul li .check). */
  .prow-list li .check {
    width: 22px; height: 22px;
    background: var(--red);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(235,40,63,.3);
  }
  .prow.buds .prow-list li { }

  /* FAQ — two column editorial */
  .faq-section { padding: 130px 0; border-top: 1px solid var(--line); }
  .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
  .faq-intro h2 { font-size: 38px; margin-bottom: 18px; }
  .faq-intro p { color: var(--grey-text); font-size: 14.5px; margin-bottom: 28px; max-width: 340px; }
  .faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
  .faq-item:first-child { border-top: 1px solid var(--line); }
  .faq-item summary {
    cursor: pointer;
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 19px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color .2s ease;
  }
  .faq-item summary:hover { color: var(--red); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .icon {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--red);
    flex-shrink: 0;
    transition: transform .3s ease;
  }
  .faq-item summary .icon::before { content: '+'; }
  .faq-item[open] summary .icon { transform: rotate(135deg); }
  .faq-item p {
    margin-top: 16px;
    font-size: 14px;
    color: var(--grey-text);
    max-width: 640px;
  }
  .faq-cta { margin-top: 8px; }

  .loc-panel {
    margin-top: 22px;
    padding: 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .loc-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
  }
  .loc-panel-head h3 { font-family: 'Lora', serif; font-size: 15px; }
  .loc-count {
    font-size: 11px; font-weight: 700; color: var(--red);
    border: 1px solid rgba(235,40,63,.35);
    padding: 4px 12px; border-radius: 999px; letter-spacing: .3px;
  }
  .loc-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .loc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ink);
    background: #fff; border: 1px solid var(--line);
    padding: 7px 13px; border-radius: 999px;
    transition: border-color .2s ease, transform .2s ease;
  }
  .loc-chip:hover { border-color: var(--red); transform: translateY(-1px); }
  .loc-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; }

  /* Dark variant of the PSH: FAQ Section element (custom_class
     "faq-section faq-section--dark" on the Nova section, e.g. Buds
     Program/Academy Group Program) -- same component, same markup,
     colors inverted for a dark band instead of adding a second FAQ
     element just for this. */
  .faq-section--dark { background: var(--ink); border-top: none; }
  .faq-section--dark .kicker { color: #ff8a97; }
  .faq-section--dark .kicker .num { color: rgba(255,255,255,.7); }
  .faq-section--dark .kicker .rule { background: rgba(255,255,255,.18); }
  .faq-section--dark .faq-intro h2 { color: #fff; }
  .faq-section--dark .faq-intro p { color: rgba(255,255,255,.78); }
  .faq-section--dark .btn-arrow { color: var(--red); }
  .faq-section--dark .faq-item { border-bottom-color: rgba(255,255,255,.12); }
  .faq-section--dark .faq-item:first-child { border-top-color: rgba(255,255,255,.12); }
  .faq-section--dark .faq-item summary { color: #fff; }
  .faq-section--dark .faq-item summary:hover { color: var(--red); }
  .faq-section--dark .faq-item p { color: rgba(255,255,255,.78); }
  .faq-section--dark .loc-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .faq-section--dark .loc-panel-head h3 { color: #fff; }
  .faq-section--dark .loc-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }

  /* TEAM — roster */
  .team { padding: 130px 0; background: var(--ink); color: #fff; }
  .team-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; flex-wrap: wrap; gap: 24px; }
  .team-head h2 { font-size: 40px; color: #fff; max-width: 560px; }
  .roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  .roster-card { }
  .roster-offset { margin-top: 56px; }
  .roster-photo { aspect-ratio: 4/5; overflow: hidden; background: #2b2e3d; margin-bottom: 18px; position: relative; }
  .roster-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: filter .4s ease, transform .6s ease, opacity .5s ease;
  }
  /* Front photo: grayscale-to-color reveal, same as before. Back
     ("alternate") photo: crossfades in underneath as the front fades out
     -- same pattern as the About page's team rows (.team-photo-flip);
     see TeamElement.php's own note on the shared placeholder image. */
  .roster-photo img.front { filter: grayscale(45%); opacity: 1; z-index: 2; }
  .roster-photo img.back { opacity: 0; z-index: 1; transform: scale(1.06); }
  .roster-card:hover .roster-photo img.front { filter: grayscale(0%); opacity: 0; }
  .roster-card:hover .roster-photo img.back { opacity: 1; transform: scale(1.04); }
  .roster-photo::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s ease;
  }
  .roster-card:hover .roster-photo::after { transform: scaleX(1); }
  .roster-meta { display: flex; align-items: baseline; gap: 12px; }
  /* Numbered index (01, 02, ...) removed per request, same as the kicker
     numbers above -- hidden, not stripped from TeamElement's markup, so
     it's a one-line revert if ever wanted back. */
  .roster-index { display: none; }
  .roster-name { font-family: 'Lora', serif; font-size: 20px; color: #fff; }
  .team-cta { margin-top: 60px; text-align: center; }

  /* ENROL — statement banner */
  .enrol { padding: 140px 0; text-align: center; background: var(--paper); border-top: 1px solid var(--line); }
  .enrol h2 { font-size: 44px; max-width: 720px; margin: 0 auto 22px; }
  .enrol p { color: var(--grey-text); font-size: 15px; max-width: 480px; margin: 0 auto 34px; }

  /* NEWSLETTER — split */
  .newsletter { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
  .newsletter-copy { padding: 90px 70px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
  /* Was an <h3> in the original static file, but as the last of eight
     top-level section headings on the page it belongs in the same H2 tier
     as the others for a correct, linear document outline (SEO/accessibility)
     -- kept as its own selector so the identical 34px visual size carries
     over unchanged regardless of the tag change. */
  .newsletter-copy h2 { font-size: 34px; color: #fff; margin-bottom: 18px; }
  .newsletter-copy h2 span { color: var(--red); }
  .newsletter-copy p { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 30px; }
  /* Signup embed slot -- holds whatever raw HTML the site owner pastes in
     (Mailchimp/ConvertKit/etc. embed code), so this only sets the
     surrounding text color so unstyled inputs/labels in a bare embed
     still read on the dark background; the embed's own markup owns
     everything else. */
  .newsletter-embed { color: #fff; }
  .newsletter-media { position: relative; min-height: 420px; }
  .newsletter-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* Footer */
  footer { background: var(--ink); color: rgba(255,255,255,.9); padding: 70px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
  .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
  footer .footer-logo { height: 32px; filter: brightness(0) invert(1); margin-bottom: 20px; }
  footer h3 { color: #fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; font-family: 'Montserrat',sans-serif; font-weight: 700; }
  footer p { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.85); max-width: 300px; }
  footer ul li { margin-bottom: 12px; font-size: 13px; color: rgba(255,255,255,.9); }
  footer ul li a { transition: color .2s ease; }
  footer ul li a:hover { color: var(--red); }
  .footer-contact li { display: flex; align-items: center; gap: 8px; }
  .social-row { display: flex; gap: 14px; margin-top: 8px; }
  .social-row a.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }
  .social-row a.social-icon:hover { color: #fff; background: var(--red); transform: translateY(-2px); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 22px 0;
    font-size: 11.5px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.7);
    flex-wrap: wrap;
    gap: 10px;
  }

  /* --------------------------------------------------------------------
     Inner pages (Our Services, Buds Program, Academy Group Program, ...)
     -- built from a mix of PSH: Page Header / PSH: Program Row (both
     already styled above) and CORE Nova Builder elements (heading,
     text_block, columns, button, faq, icon_list). Rather than hand-roll a
     bespoke element for every one-off section the way the homepage did,
     these pages lean on the core element library and this block gives
     each core element's generic class names the same look as the rest of
     the site (Lora headings, red/ink brand colors, .btn-solid buttons)
     instead of Nova's own default frontend.css appearance. */

  .prow-desc { font-size: 15px; color: var(--grey-text); margin-bottom: 18px; max-width: 480px; }
  .prow-desc:last-of-type { margin-bottom: 30px; }

  .page-header { padding: 96px 0 60px; text-align: center; }
  .page-header h1 { font-size: 44px; margin-bottom: 16px; }
  .page-header .lead { color: var(--grey-text); font-size: 16px; max-width: 640px; margin: 0 auto; }
  .page-header .kicker.center { margin: 0 auto 20px; max-width: fit-content; }

  /* Numbered "step" cards -- Buds Program phases / Academy modules, each
     authored as a text_block element with this markup, laid out via core
     Nova "Row" (columns) elements. */
  /* The "Row" (columns) element's own equal_height_desktop setting
     stretches each .nova-column's outer box to the tallest one via CSS
     Grid (frontend.css's default align-items:stretch) plus
     `display:flex;flex-direction:column` on the column -- but that alone
     doesn't make a *column-height* flex item's child actually fill the
     extra space, so without this, cards with different amounts of body
     text still ended up different heights despite each having a visible
     border/shadow (the bug reported: "make it all same height"). Chain
     flex:1 down through the wrapper Nova always renders
     (.nova-element) so .step-card's own `height:100%` has something
     real to be 100% of. */
  /* min-width, not applied unconditionally: below Nova core's own 48rem
     (768px) column-stacking breakpoint, .nova-column keeps its
     display:flex;flex-direction:column from equal_height_desktop but is
     now alone in its grid row with an auto (content-based) height --
     flex:1's flex-basis:0% has no real surplus space to grow into there,
     which collapsed every equal-height column (including the About page's
     30-70 photo|bio team rows, not just these step-card grids) to 0
     height at mobile widths until this was scoped to desktop only. */
  @media (min-width: 769px) {
    .nova-columns-layout--equal-height > .nova-column > .nova-element { flex: 1; display: flex; }
    .nova-columns-layout--equal-height > .nova-column > .nova-element > .nova-text-block { flex: 1; display: flex; }
    .nova-columns-layout--equal-height > .nova-column .step-card { flex: 1; }
  }
  .step-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px 26px; height: 100%; display: flex; flex-direction: column; }
  .step-card p { flex: 1; }
  .step-card .step-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
  }
  .step-card h3 { font-size: 18px; margin-bottom: 10px; }
  .step-card p { font-size: 14px; color: var(--grey-text); margin: 0; }

  /* Core "Text Block" element: give its plain <ul> bullets the same red
     circle-checkmark treatment as the homepage hero's checklist
     (.hero ul li .check), so a plain <ul> pasted into rich text content
     looks native to the design rather than a default browser bullet. */
  .nova-text-block ul { margin: 18px 0; }
  .nova-text-block ul li {
    position: relative;
    list-style: none;
    padding-left: 34px;
    margin-bottom: 13px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
  }
  .nova-text-block ul li::before {
    content: '\2713';
    position: absolute;
    left: 0; top: 0;
    width: 22px; height: 22px;
    background: var(--red);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(235,40,63,.3);
  }
  .nova-text-block p { margin-bottom: 16px; color: var(--grey-text); font-size: 15px; }
  .nova-text-block p:last-child { margin-bottom: 0; }
  .nova-text-block a { color: var(--red); text-decoration: underline; }

  /* Core "Icon List" element (used instead of a plain <ul> where a
     dashicon repeater is more convenient than hand-authored HTML) -- same
     red-circle-checkmark look. */
  .nova-icon-list { display: grid; gap: 20px 32px; margin: 26px 0; }
  .nova-icon-list--cols-2 { grid-template-columns: 1fr 1fr; }
  .nova-icon-list__item { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
  .nova-icon-list__item .dashicons {
    width: 24px; height: 24px;
    margin-top: 1px;
    background: var(--red);
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(235,40,63,.3);
  }

  /* Core "Icon Box" element -- its own frontend.css never centers the
     icon (`.nova-icon-box__icon` is `display:block; width:2rem` with no
     `margin:auto`, so it sits pinned to the left edge regardless of the
     element's own text_align:center setting -- only block-level text
     like the title/text below it responds to that) and sets a font-size
     (34px) larger than the icon's own box (32px), which let the glyph
     overflow/sit off-center within it. inline-flex + centering fixes
     both; the rest matches the red-circle icon treatment already used
     elsewhere (.nova-icon-list__item, the hero checklist). */
  .nova-icon-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    font-size: 22px;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(235,40,63,.25);
  }
  .nova-icon-box__title { font-size: 18px; margin-bottom: 8px; }
  .nova-icon-box__text { color: var(--grey-text); font-size: 14px; line-height: 1.6; }

  /* Generic dark full-bleed band for a plain content section (intro text
     + a Row of core elements below it, e.g. For Educators' opening
     paragraph + its 3 Icon Boxes) -- same --ink/red-glow language as
     .statement/.story-dark/.video-showcase, but with no layout opinion
     of its own (no grid split): just inverts text color for whatever
     core elements happen to be inside. Section needs width_mode:'full'
     and the column needs custom_class "ctn section-dark-inner" for this
     to render full-bleed with normal-width content, same pattern as
     .story-dark-cols. */
  .section-dark { background: var(--ink); position: relative; overflow: hidden; }
  .section-dark::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,40,63,.16), rgba(235,40,63,0) 70%);
    filter: blur(60px);
    top: -200px; left: 50%; margin-left: -240px;
  }
  .section-dark-inner { position: relative; z-index: 1; }
  .section-dark-inner .nova-heading { color: #fff; }
  .section-dark-inner .nova-subheading { color: rgba(255,255,255,.7); }
  .section-dark-inner .nova-text-block p { color: rgba(255,255,255,.82); }
  .section-dark-inner .nova-text-block a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
  .section-dark-inner .nova-icon-box__title { color: #fff; }
  .section-dark-inner .nova-icon-box__text { color: rgba(255,255,255,.68); }
  .section-dark-inner .nova-testimonial__quote { color: #fff; }
  .section-dark-inner .nova-testimonial__name { color: #fff; }
  .section-dark-inner .nova-testimonial__role { color: rgba(255,255,255,.6); }
  .section-dark-inner .nova-testimonial__avatar--initials { background: var(--red); color: #fff; }

  /* Core "Heading" element's built-in kicker-style subheading option */
  .nova-subheading { color: var(--grey-text); font-size: 14.5px; margin: 10px 0; max-width: 560px; }
  .nova-heading + .nova-subheading--below { margin-left: auto; margin-right: auto; }

  /* Core "Video" element (wp_oembed_get-backed, used for the plain
     with-controls YouTube embeds on Buds Program/Academy Group Program --
     the homepage's own autoplaying hero video uses the bespoke PSH: Video
     Banner element instead, styled separately above). Core CSS only
     handles the responsive aspect-ratio box; this adds the same
     rounded-corners-plus-shadow treatment used elsewhere on the site
     (.step-card, team photos) so it doesn't look like a bare, undecorated
     iframe dropped onto the page. */
  .nova-video { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(24,26,37,.16); }

  /* Core "Button" element -> identical to .btn.btn-solid */
  .nova-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 16px 30px;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
  }
  .nova-button--solid { background: var(--red); color: #fff; }
  .nova-button--solid:hover { background: var(--red-deep); color: #fff; transform: translateY(-2px); }
  .nova-button--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .nova-button--outline:hover { background: var(--ink); color: #fff; }
  .nova-button--text { color: var(--red); text-transform: none; letter-spacing: 0; padding: 0; }

  /* Core "FAQ"/"Accordion" elements, for any page that doesn't use the
     bespoke two-column PSH: FAQ Section element -- same visual language
     (Lora question text, plus-icon toggle) as .faq-item. */
  .nova-faq__item, .nova-accordion__item { border-bottom: 1px solid var(--line); padding: 22px 0; }
  .nova-faq__item:first-child, .nova-accordion__item:first-child { border-top: 1px solid var(--line); }
  .nova-faq__question, .nova-accordion__title {
    cursor: pointer;
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 18px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color .2s ease;
  }
  .nova-faq__question:hover, .nova-accordion__title:hover { color: var(--red); }
  .nova-faq__question::-webkit-details-marker, .nova-accordion__title::-webkit-details-marker { display: none; }
  .nova-faq__question::after, .nova-accordion__title::after {
    content: '+';
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--red);
    flex-shrink: 0;
    transition: transform .3s ease;
  }
  .nova-faq__item[open] .nova-faq__question::after,
  .nova-accordion__item[open] .nova-accordion__title::after { transform: rotate(135deg); }
  .nova-faq__answer, .nova-accordion__content { margin-top: 14px; font-size: 14px; color: var(--grey-text); max-width: 720px; }
  .nova-faq__answer p, .nova-accordion__content p { margin-bottom: 10px; }
  .nova-faq__answer p:last-child, .nova-accordion__content p:last-child { margin-bottom: 0; }

  /* Contact page: two-column layout (contact details | form) on a
     tinted section background, with the form elevated in its own white
     card for contrast -- was a single narrow centered column before. */
  .contact-section { background: #F5F3EF; }
  .contact-info-col .nova-heading { font-size: 36px; margin-bottom: 14px; text-align: left; }
  .contact-info-col .nova-subheading { color: var(--grey-text); font-size: 15px; max-width: 380px; line-height: 1.6; text-align: left; margin-left: 0; margin-right: 0; }
  .contact-detail-list { display: flex; flex-direction: column; gap: 20px; }
  .contact-detail { display: flex; align-items: center; gap: 16px; }
  .contact-detail__icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 50%;
    color: var(--red);
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(24,26,37,.08);
    flex-shrink: 0;
  }
  .contact-detail__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey-text); margin-bottom: 2px; }
  .contact-detail__value { display: block; font-size: 15px; font-weight: 600; color: var(--ink); transition: color .2s ease; }
  a.contact-detail:hover .contact-detail__value { color: var(--red); }
  /* .nova-section--full-width .nova-column above zeroes out padding-block
     sitewide (needed so full-bleed bands like the homepage newsletter
     don't get stray vertical gaps) -- but this card genuinely needs its
     own vertical padding, so it's restored here at higher specificity
     (3 classes vs. the zeroing rule's 2) rather than reaching for
     !important. */
  .contact-form-col {
    background: #fff;
    border-radius: 16px;
    padding: 56px 44px;
    box-shadow: 0 30px 70px rgba(24,26,37,.1);
  }
  .nova-section--full-width .nova-column.contact-form-col {
    padding-block: 56px;
  }
  @media (max-width: 980px) {
    .contact-form-col { padding: 40px 24px; }
    .nova-section--full-width .nova-column.contact-form-col { padding-block: 40px; }
  }

  /* --------------------------------------------------------------------
     Blog (native WP loop + a bespoke single.php -- see the file-level
     note there for why this isn't Nova Builder content like every other
     page: articles are plain WordPress posts, using Zenith's own generic
     index.php loop + our own single.php, restyled to match the brand via
     the Zenith design-token overrides above plus these rules). */

  .zenith-entry { box-shadow: 0 10px 30px rgba(24,26,37,.06); }
  .zenith-entry__title { font-size: 23px; line-height: 1.25; margin-bottom: 6px; }
  .zenith-entry__title a:hover { color: var(--red); }
  .zenith-entry__meta { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
  .zenith-entry__excerpt { color: var(--grey-text); font-size: 14.5px; margin-top: 10px; }
  .zenith-entry__read-more { font-weight: 700; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; }

  .post-hero { max-height: 460px; overflow: hidden; }
  .post-hero img { width: 100%; height: 460px; object-fit: cover; }
  .post-header { padding: 56px 0 30px; text-align: center; }
  .post-header .kicker.center { margin: 0 auto 18px; max-width: fit-content; }
  .post-header h1 { font-size: 36px; max-width: 760px; margin: 0 auto; }
  .post-content { max-width: 720px; margin: 0 auto; padding-bottom: 20px; font-size: 16px; line-height: 1.8; }
  .post-content p { margin-bottom: 20px; }
  .post-content a { color: var(--red); text-decoration: underline; }
  .post-content img { border-radius: 8px; margin: 10px 0 30px; }
  .post-content h2, .post-content h3 { margin: 40px 0 16px; }
  .post-content ul, .post-content ol { margin: 0 0 20px 22px; }
  .post-content blockquote { border-left: 3px solid var(--red); padding-left: 20px; margin: 30px 0; font-style: italic; color: var(--grey-text); }
  .post-back { max-width: 720px; margin: 10px auto 90px; border-top: 1px solid var(--line); padding-top: 26px; }
  .post-back a { font-weight: 700; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
  .post-back a:hover { color: var(--red); }
  .post-back a span { display: inline-block; transition: transform .2s ease; }
  .post-back a:hover span { transform: translateX(-4px); }

  /* WP core's own the_posts_pagination() markup (.navigation.pagination >
     .nav-links > .page-numbers, with .current on today's page and
     .prev/.next on the arrow links) -- unstyled by Zenith beyond plain
     text links by default. */
  .navigation.pagination { max-width: 1320px; margin: 20px auto 90px; padding: 0 40px; }
  .navigation.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    border: 1px solid var(--line);
    transition: all .2s ease;
  }
  .navigation.pagination .page-numbers:hover { border-color: var(--red); color: var(--red); }
  .navigation.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
  .navigation.pagination .page-numbers.dots { border-color: transparent; }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next { padding: 0 20px; letter-spacing: .5px; text-transform: uppercase; font-size: 11.5px; }

  @media (max-width: 980px) {
    .navigation.pagination { padding: 0 22px; }
    .navigation.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 12px; }
  }

  /* About page team roster (10 alternating photo/bio rows, one per
     Nova "Row" element -- see the psh_el('...team...') loop in the build
     script). */
  .team-row + .team-row { border-top: 1px solid var(--line); }
  .team-row { padding: 60px 0; }
  /* Alternate members get a very subtle tinted background (not the same
     as the page's own --paper, just a touch darker) so the 10-row list
     reads as a sequence of distinct cards instead of one continuous
     block -- set via a "team-row--alt" class on every even member,
     rather than nth-of-type, since each row lives inside its own
     separate <section> (not siblings of each other) so nth-of-type can't
     count across them correctly. */
  /* Full-bleed to the viewport edge, not just this column's own (already
     container-boxed) width -- the standard "break out of a centered
     parent" trick: width:100vw + negative margins pull the box out to
     the viewport edges, then equal padding pushes the actual content
     back to where it would have sat anyway, so only the *background*
     visibly extends further, not the photo/text inside it. */
  .team-row--alt {
    background: #F0EEE9;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }
  /* Same grayscale-reveal + zoom treatment as the homepage's own
     .roster-photo (see .roster-card:hover above) -- kept in the photo's
     own near-original ~3:4 portrait ratio (the source photos are all
     1080x1444) instead of the square crop this used at first, which cut
     off a very visible amount of every photo's top/bottom. */
  /* flex-shrink:0 is defensive: if an editor ever re-enables this Row's
     "Equal Height Columns" setting in the visual builder, a short bio
     paragraph can otherwise compress this frame below its 3:4 ratio (a
     flex item's default flex-shrink:1 winning against aspect-ratio when
     the row's own height comes out shorter than the photo's preferred
     size) -- see the studywell_wordpress_gotchas memory for the full
     mechanism. The team rows themselves don't use that setting. */
  .team-photo-flip { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--ink-soft); position: relative; flex-shrink: 0; }
  /* Crossfade to a second ("alternate") photo on hover -- each member's
     .front/.back pair is authored as plain markup (a text_block, not the
     single-image `image` element every other photo on the site uses),
     since this needs two images per person. The .back photos are all a
     shared placeholder SVG for now (assets/img/team-photo-alt-
     placeholder.svg) -- swap each member's `back` image URL for their
     real alternate photo whenever those are available; nothing else
     needs to change. */
  .team-photo-flip img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .5s ease, transform .6s ease;
  }
  .team-photo-flip img.front { opacity: 1; z-index: 2; }
  .team-photo-flip img.back { opacity: 0; z-index: 1; transform: scale(1.06); }
  .team-photo-col:hover .team-photo-flip img.front { opacity: 0; }
  .team-photo-col:hover .team-photo-flip img.back { opacity: 1; transform: scale(1); }
  .team-photo-flip::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s ease;
    z-index: 3;
  }
  .team-photo-col:hover .team-photo-flip::after { transform: scaleX(1); }
  .team-bio-col .nova-heading { font-size: 24px; margin-bottom: 12px; }
  .team-role { font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
  /* Badge-style pills for Background/Area of interest, replacing a plain
     "Background: X" text line -- more scannable across 10 members and
     matches the .loc-chip pill pattern already used elsewhere. */
  .team-meta-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
  .team-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 999px;
  }
  .team-meta-badge .label { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 10px; }
  .team-funfact {
    margin-top: 16px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--red);
    font-style: italic;
    color: var(--grey-text);
    font-size: 13.5px;
  }

  /* About page: "by the numbers" strip (Founded / Team size / Disciplines
     / Area served -- all facts already stated elsewhere on the page,
     just surfaced as a compact visual anchor near the top). */
  .stats-bar { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; text-align: center; }
  .stats-bar .stat-num { font-family: 'Lora', serif; font-weight: 700; font-size: 42px; color: var(--red); line-height: 1; margin-bottom: 8px; }
  .stats-bar .stat-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--grey-text); }

  /* About page: "Our Story" as a dark editorial split (same design
     language as the homepage's .statement band) -- a short lead
     paragraph set large on the left, the rest of the narrative smaller
     on the right, instead of one long wall of same-size paragraphs. */
  .story-dark { padding: 110px 0; background: var(--ink); position: relative; overflow: hidden; }
  .story-dark::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,40,63,.16), rgba(235,40,63,0) 70%);
    filter: blur(60px);
    top: -200px; right: -120px;
  }
  .story-dark .story-dark-cols { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; position: relative; z-index: 1; }
  .story-dark__intro .kicker { margin-bottom: 20px; }
  .story-dark__intro h2 { color: #fff; font-size: 36px; margin-bottom: 20px; }
  .story-dark__intro p { color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.7; font-family: 'Lora', serif; }
  .story-dark__body p { color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
  .story-dark__body p:last-child { margin-bottom: 0; }

  @media (max-width: 980px) {
    .stats-bar { gap: 34px 44px; }
    .stats-bar .stat-num { font-size: 32px; }
    .story-dark { padding: 70px 0; }
    .story-dark .story-dark-cols { grid-template-columns: 1fr; gap: 36px; }
  }

  @media (max-width: 980px) {
    .step-card { padding: 24px 22px; }
    .page-header { padding: 64px 0 44px; }
    .page-header h1 { font-size: 32px; }
    .nova-icon-list--cols-2 { grid-template-columns: 1fr; }
    .post-hero, .post-hero img { height: 260px; max-height: 260px; }
    .post-header h1 { font-size: 28px; }
  }

  @media (max-width: 1180px) {
    .hero-media { width: 46%; }
    .hero-copy { max-width: 420px; }
    .hero h1 { font-size: 44px; }
  }

  @media (max-width: 980px) {
    .statement .ctn,
    .prow, .vid-row, .faq-grid, .roster-grid, .newsletter, .footer-top { grid-template-columns: 1fr !important; }
    .prow, .vid-row { min-height: auto; }
    .prow-body, .vid-body { padding: 48px 28px; }
    .prow-media, .vid-media { min-height: 320px; }
    .prow.reverse { direction: ltr; }
    .roster-offset { margin-top: 0; }
    .hero { padding: 48px 0 0; overflow: visible; }
    .hero .ctn { min-height: auto; display: block; }
    .hero-copy { max-width: 100%; }
    .hero h1 { font-size: 36px; }
    .hero-media {
      position: static;
      width: 100%;
      height: 340px;
      margin-top: 36px;
    }
    .hero-media::before { display: none; }
    .hero-badge { position: relative; z-index: 5; margin-top: -34px; margin-left: 22px; margin-right: 22px; }
    .ctn { padding: 0 22px; }
    .header-inner { padding: 10px 22px; }
    .logo { gap: 10px; }
    .logo .site-name { font-size: 15px; }
    .burger { display: flex; }
    nav {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: min(320px, 84vw);
      background: var(--ink);
      padding: 96px 32px 32px;
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
      z-index: 90;
      overflow-y: auto;
    }
    /* Shadow only while open -- on the closed (translateX(100%)) panel it
       bled ~60px into the right edge of every page as a grey strip. */
    body.menu-open nav { transform: translateX(0); box-shadow: -24px 0 60px rgba(0,0,0,.35); }
    nav .primary-menu {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      width: 100%;
      padding: 0;
    }
    nav .primary-menu .menu-item { width: 100%; }
    nav a.navlink {
      width: 100%;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
      font-size: 14px;
    }
    .menu-item-has-children > a.navlink::after { margin-left: auto; }

    /* Submenus become an inline accordion (toggled by psh-nav.js), not a flyout */
    .sub-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      min-width: 0;
      background: rgba(255,255,255,.04);
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }
    .menu-item-has-children.sub-menu-open > .sub-menu { display: block; }
    .sub-menu .menu-item a {
      padding: 14px 0 14px 18px;
      color: rgba(255,255,255,.65);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    nav li.nav-cta { margin-top: 22px; }
    nav li.nav-cta > a { width: 100%; justify-content: center; }
  }

  /* --------------------------------------------------------------------
     CAREERS page (includes/careers-page.php) -- photo + intro split, a dark
     statement band, then the shared .enrol CTA. All class-driven so the page
     doesn't depend on Nova Builder's compiled per-post CSS.
     -------------------------------------------------------------------- */
  .careers-intro .ctn { padding-top: 30px; padding-bottom: 110px; }
  .careers-intro .nova-text-block .careers-lead { font-size: 18px; line-height: 1.8; color: var(--ink); margin-bottom: 34px; }
  .careers-intro .nova-text-block .careers-roles-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--red); margin-bottom: 14px;
  }
  .careers-chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .careers-chip {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    padding: 9px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(24,26,37,.05);
  }
  .careers-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--red);
    margin-right: 10px;
    flex-shrink: 0;
  }
  .careers-apply { margin-top: 38px; padding-top: 32px; border-top: 1px solid var(--line); }
  .careers-intro .nova-text-block .careers-apply p { font-size: 15px; line-height: 1.7; color: var(--grey-text); margin-bottom: 22px; }
  .careers-intro .nova-text-block .careers-apply p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
  .careers-photo-col .nova-image { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(24,26,37,.14); }
  .careers-photo-col .nova-image__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

  .careers-statement { padding: 110px 0; text-align: center; }
  .careers-statement .nova-text-block .careers-statement-text {
    font-family: 'Lora', serif;
    font-size: 32px;
    line-height: 1.45;
    font-weight: 500;
    color: #fff;
    margin: 0;
  }
  .careers-statement .nova-text-block .careers-statement-text::before {
    content: '\201C';
    display: block;
    font-size: 72px;
    line-height: .8;
    color: var(--red);
    margin-bottom: 18px;
  }
  .enrol .btn { margin-top: 0; }

  @media (max-width: 980px) {
    .careers-intro .ctn { padding-bottom: 70px; }
    .careers-intro .nova-text-block .careers-lead { font-size: 16.5px; line-height: 1.75; }
    .careers-statement { padding: 72px 0; }
    .careers-statement .nova-text-block .careers-statement-text { font-size: 23px; }
    .careers-statement .nova-text-block .careers-statement-text::before { font-size: 56px; }
  }

  /* --------------------------------------------------------------------
     THRIVING KIDS page -- About / integrated-team dark band / clinical
     approach / services / LGAs / partner CTA. Class-driven (custom_class
     on sections/columns + HTML in text blocks), same card language as the
     rest of the site (.step-card, .section-dark, .loc-chip).
     -------------------------------------------------------------------- */
  .tk-section { padding: 90px 0; }
  .tk-about { padding-top: 36px; }
  .tk-approach, .tk-lga { background: #fff; }
  .tk-services { background: #F5F3EF; }
  .tk-section .nova-heading, .tk-team .nova-heading, .tk-partner .nova-heading { color: var(--ink); }
  .tk-section h2.nova-heading { font-size: 38px; margin-bottom: 22px; }
  .tk-section h3.nova-heading { font-size: 26px; line-height: 1.3; margin: 48px 0 14px; }
  .tk-section .nova-columns-layout h3.nova-heading { margin-top: 0; }
  .tk-section .nova-columns-layout { margin-top: 28px; }
  .tk-section .nova-text-block p { font-size: 16px; line-height: 1.85; color: var(--grey-text); margin-bottom: 18px; }
  .tk-section .nova-text-block p:last-child { margin-bottom: 0; }

  .tk-photo .nova-image { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(24,26,37,.14); }
  .tk-photo .nova-image__img { display: block; width: 100%; object-fit: cover; }
  .tk-photo--portrait .nova-image__img { aspect-ratio: 1 / 1; object-position: center 12%; }
  .tk-photo--wide .nova-image__img { aspect-ratio: 4 / 3; }
  .tk-photo--square .nova-image__img { aspect-ratio: 1 / 1; }

  .tk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; height: 100%; box-shadow: 0 14px 40px rgba(24,26,37,.06); }
  .tk-card-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--red); margin-bottom: 20px; }
  /* .nova-text-block ul li gives every text-block list the site's red check
     badge (absolute-positioned, 34px left padding) -- these two lists are
     deliberately laid out their own way, so they reset it at higher
     specificity rather than fighting it. */
  .nova-text-block .tk-values { display: grid; gap: 16px; margin: 0; }
  .nova-text-block .tk-values li { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; font-family: 'Lora', serif; font-size: 24px; font-weight: 500; color: var(--ink); }
  .nova-text-block .tk-values li::before { position: static; flex-shrink: 0; width: 28px; height: 28px; font-size: 13px; }
  .tk-card--dark { background: var(--ink); border-color: var(--ink); box-shadow: 0 30px 70px rgba(24,26,37,.22); }
  .tk-card--dark .tk-card-label { color: #ff8a97; }
  .tk-section .nova-text-block .tk-card--dark p { color: rgba(255,255,255,.86); }
  @media (min-width: 769px) {
    .nova-columns-layout--equal-height > .nova-column .tk-card { flex: 1; }
  }

  /* Integrated-team dark band */
  .tk-team { padding: 100px 0; }
  .tk-team h3.nova-heading { color: #fff; font-size: 34px; line-height: 1.3; text-align: center; max-width: 780px; margin: 0 auto 54px; }
  .tk-team .nova-columns-layout { margin-top: 0; }
  .tk-team .nova-text-block p { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.82); margin-bottom: 18px; }
  .tk-team .nova-text-block p:last-child { margin-bottom: 0; }
  .tk-team .nova-text-block strong { color: #fff; }
  .tk-glass { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: 28px 30px; }
  .tk-team .nova-column > .nova-element + .nova-element { margin-top: 20px; }

  /* ESDM principles / services cards */
  .tk-principle { position: relative; padding-top: 82px; }
  .tk-principle::before {
    content: '\2713';
    position: absolute; top: 30px; left: 32px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--red); color: #fff; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(235,40,63,.3);
  }
  .tk-principle strong { color: var(--ink); }
  .tk-service { border-top: 3px solid var(--red); }
  .tk-service strong { display: block; font-family: 'Lora', serif; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
  .tk-callout { background: #fff; border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; padding: 26px 30px; box-shadow: 0 10px 30px rgba(24,26,37,.06); }
  .tk-section .nova-text-block .tk-callout p { font-family: 'Lora', serif; font-size: 19px; line-height: 1.6; color: var(--ink); }
  .tk-services .nova-text-block + .nova-text-block, .tk-services .nova-element + .nova-element:last-child { margin-top: 28px; }

  /* Sydney LGAs */
  .nova-text-block .tk-lga-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin: 34px 0 0; }
  .nova-text-block .tk-lga-list li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 15px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
  .nova-text-block .tk-lga-list li::before { content: ''; position: static; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: none; }

  /* Partner with us */
  .tk-partner { padding: 110px 0; text-align: center; }
  .tk-partner h2.nova-heading { color: #fff; font-size: 40px; text-align: center; margin-bottom: 22px; }
  .tk-partner .nova-text-block .tk-partner-lead { font-family: 'Lora', serif; font-size: 23px; line-height: 1.55; color: #fff; max-width: 760px; margin: 0 auto 46px; }
  .tk-contact { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; text-align: left; }
  .tk-contact__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 26px 22px; }
  .tk-contact__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #ff8a97; margin-bottom: 10px; }
  .tk-contact__value, .tk-partner .nova-text-block .tk-contact__item a { display: block; font-size: 17px; color: #fff; overflow-wrap: anywhere; }
  @media (max-width: 860px) { .tk-contact { grid-template-columns: 1fr; max-width: 520px; } }

  @media (max-width: 980px) {
    .tk-section { padding: 60px 0; }
    .tk-team, .tk-partner { padding: 72px 0; }
    .tk-section h2.nova-heading, .tk-partner h2.nova-heading { font-size: 30px; }
    .tk-section h3.nova-heading { font-size: 22px; margin-top: 36px; }
    .tk-team h3.nova-heading { font-size: 25px; margin-bottom: 36px; }
    .tk-card { padding: 28px 24px; }
    .tk-principle { padding-top: 76px; }
    .tk-principle::before { left: 24px; }
    .nova-text-block .tk-values li { font-size: 21px; }
    .nova-text-block .tk-lga-list { grid-template-columns: repeat(2, 1fr); }
    .tk-partner .nova-text-block .tk-partner-lead { font-size: 20px; }
  }
  @media (max-width: 600px) {
    .nova-text-block .tk-lga-list, .tk-contact { grid-template-columns: 1fr; }
  }