/* ══════════════════════════════════════════════════════════════════════
   AOS HOME — verbatim port of mockups/aos-home.html inline styles.
   Three style blocks concatenated: main design system, aos-home-rebuild,
   final tuning. Portal back-link chrome excluded.
   ══════════════════════════════════════════════════════════════════════ */


/* ── WP scaffolding resets (so the mockup's full-bleed design works
      unchanged inside the block theme's post-content wrapper) ───────── */
.aos-home-page .wp-site-blocks, .aos-home-page .wp-block-group.aos-home-page, .aos-home-page .entry-content, .aos-home-page .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.aos-home-page .wp-site-blocks > *, .aos-home-page .aos-home-page > * {
	--wp--style--root--padding-left: 0;
	--wp--style--root--padding-right: 0;
}

/* Kill default block-gap that inserts cream strips between sections */
.aos-home-page .wp-site-blocks, .aos-home-page .wp-block-group.aos-home-page, .aos-home-page .entry-content, .aos-home-page .wp-block-post-content {
	--wp--style--block-gap: 0 !important;
	gap: 0 !important;
}

.aos-home-page .wp-site-blocks > * + *, .aos-home-page .aos-home-page > * + *, .aos-home-page .entry-content > * + *, .aos-home-page .wp-block-post-content > * + * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Ensure body cream background does not leak above the util strip */
body.aos-home-page {
	margin: 0 !important;
	padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════ */

    /* ═════════════════════════════════════════════════════════════════════
       AOS STUDENT EXPERIENCE — Concept 5 (photo-forward, cinematic editorial)
       Typography: Instrument Sans (display) + Instrument Sans (body)
       Shared design system with the rest of the AOS mockup set

       Tokens (--aos-navy, --display, --shadow-md, --panel-ink, etc.) are
       declared once in aos-components.css and inherited here. The bare
       :root block that used to live here was a verbatim port of the
       mockup's inline styles; folded into aos-components.css 2026-05-05.
       ═════════════════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0;
      background: hsl(var(--bg));
      color: hsl(var(--fg));
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.6;
      font-feature-settings: "ss01", "cv11";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; transition: color 200ms var(--ease-out), opacity 200ms var(--ease-out); }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    h1, h2, h3, h4, h5 {
      margin: 0;
      font-family: var(--display);
      font-weight: 400;
      line-height: 1.04;
      letter-spacing: -0.022em;
      color: hsl(var(--fg));
      font-variation-settings: "opsz" 60;
    }
    h1 { font-weight: 350; }
    p { margin: 0; }
    ::selection { background: hsl(var(--aos-yellow) / 0.45); color: hsl(var(--aos-navy)); }

    :where(.aos-home-page, .aos-program-page) .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
    /* .eyebrow now styled by the canonical Style A (on light) rule in
       aos-components.css. Do not redeclare here. */
    :where(.aos-home-page, .aos-program-page) .lead {
      font-size: clamp(17px, 1.15vw, 19px);
      line-height: 1.55;
      color: hsl(var(--fg-muted));
      max-width: 60ch;
    }

    /* ── Utility strip ─────────────────────────────────────────────────── */
    .util {
      background: hsl(var(--aos-navy-deep));
      color: hsl(0 0% 100% / 0.78);
      font-size: 12.5px;
      letter-spacing: 0.01em;
    }
    .util__inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 10px var(--gutter);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .util__contact { display: flex; gap: 28px; }
    .util__contact span { display: inline-flex; align-items: center; gap: 8px; }
    .util__contact svg { width: 13px; height: 13px; opacity: 0.6; }
    .util__links { display: flex; gap: 22px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
    .util__links a { text-decoration: none; color: inherit; }
    .util__links a:hover, .util__links a:focus-visible { color: hsl(var(--aos-yellow)); text-decoration: none; }

    /* ── Main nav ──────────────────────────────────────────────────────── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: hsl(var(--aos-navy));
      color: hsl(var(--paper));
      border-bottom: 1px solid hsl(var(--aos-navy-deep));
    }
    .nav__inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 22px var(--gutter);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 40px;
    }
    .nav__logo { height: 54px; width: auto; display: block; }
    .nav__list {
      display: flex;
      gap: 36px;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
    }
    .nav__list a {
      color: hsl(0 0% 100% / 0.88);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      position: relative;
      padding: 8px 0;
      text-decoration: none;
    }
    .nav__list a:hover, .nav__list a:focus-visible { text-decoration: none; }
    .nav__list a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 2px;
      background: hsl(var(--aos-yellow));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 280ms var(--ease-out);
    }
    .nav__list a:hover { color: hsl(var(--paper)); }
    .nav__list a:hover::after, .nav__list a.is-active::after { transform: scaleX(1); }
    .nav__list a.is-active { color: hsl(var(--paper)); }
    .nav__list svg { width: 10px; height: 10px; opacity: 0.6; }

    .nav__actions { display: flex; gap: 14px; align-items: center; }
    .nav__search {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: hsl(0 0% 100% / 0.08);
      color: hsl(var(--paper));
      transition: background 200ms var(--ease-out);
    }
    .nav__search:hover { background: hsl(0 0% 100% / 0.14); }
    .nav__search svg { width: 15px; height: 15px; }

    .nav__burger { display: none; }

    /* ── Buttons ───────────────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 26px;
      border-radius: 100px;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -0.005em;
      transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out);
      white-space: nowrap;
      text-decoration: none;
    }
    .btn:hover, .btn:focus-visible { text-decoration: none; }
    a.nav__logo-link, a.nav__search { text-decoration: none; }
    .btn svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
    .btn:hover svg { transform: translateX(3px); }
    /* Primary follows the site-wide .aos-btn system: on the dark nav it
       wears the hairline-stroke ghost variant (thin light border, solid
       teal chip) — keep in sync with aos-chrome.css. */
    .btn--primary {
      background: transparent;
      border: 1px solid hsl(var(--bg) / 0.28);
      color: hsl(var(--bg));
      padding: 5px 5px 5px 20px;
      gap: 10px;
      box-shadow: none;
    }
    .btn--primary svg {
      box-sizing: content-box;
      width: 13px;
      height: 13px;
      padding: 7px;
      border-radius: 999px;
      background: hsl(var(--aos-yellow));
      color: hsl(var(--aos-navy-deep));
    }
    .btn--primary:hover { background: hsl(var(--aos-yellow) / 0.08); border-color: hsl(var(--aos-yellow) / 0.65); color: hsl(var(--bg)); transform: translateY(-1px); box-shadow: 0 12px 32px -12px hsl(var(--aos-yellow) / 0.25); }
    .btn--secondary {
      background: hsl(var(--bg-card));
      color: hsl(var(--aos-navy));
      border: 1px solid hsl(var(--border-strong));
    }
    .btn--secondary:hover { background: hsl(var(--aos-navy)); color: hsl(var(--paper)); border-color: hsl(var(--aos-navy)); }
    .btn--ghost {
      background: transparent;
      color: hsl(var(--aos-navy));
      border: 1px solid hsl(var(--aos-navy) / 0.2);
    }
    .btn--ghost:hover { border-color: hsl(var(--aos-navy)); background: hsl(var(--aos-navy) / 0.04); }
    .btn--dark {
      background: hsl(var(--aos-navy));
      color: hsl(var(--paper));
    }
    .btn--dark:hover { background: hsl(var(--aos-navy-deep)); transform: translateY(-1px); }
    .btn--lg { padding: 18px 32px; font-size: 15px; }
    .btn--glass {
      background: hsl(0 0% 100% / 0.12);
      color: hsl(var(--paper));
      border: 1px solid hsl(0 0% 100% / 0.28);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .btn--glass:hover { background: hsl(0 0% 100% / 0.2); border-color: hsl(0 0% 100% / 0.5); transform: translateY(-1px); }

    /* ═════════════════════ CINEMATIC HERO ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .hero {
      position: relative;
      min-height: 85vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      isolation: isolate;
    }
    /* Bg/scrim/grain are siblings inside .hero (a wp-block-group with
       is-layout-flow). The flow layout auto-applies margin-block-start
       to all-but-first children, which would push the absolutely-
       positioned scrim and grain 32px down from the hero top, leaving
       a strip of unscrimmed sky at the top of the image. Zero the
       margin so inset:0 actually pins them to the hero edges. */
     :where(.aos-home-page, .aos-program-page) .hero > .hero__grain { margin: 0 !important; }
    :where(.aos-home-page, .aos-program-page) .hero__grain {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.35;
      mix-blend-mode: overlay;
      background-image: radial-gradient(circle at 1px 1px, hsl(0 0% 100% / 0.08) 1px, transparent 1.6px);
      background-size: 3px 3px;
    }
    :where(.aos-home-page, .aos-program-page) .hero__inner {
      max-width: var(--container);
      margin: 0 auto;
      width: 100%;
      padding: clamp(2rem, 3.5vw, 3rem) var(--gutter) clamp(3.5rem, 5vw, 5rem);
      position: relative;
      color: hsl(var(--paper));
    }
    :where(.aos-home-page, .aos-program-page) .hero__crumbs {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: hsl(0 0% 100% / 0.62);
      margin-bottom: 24px;
      letter-spacing: 0.01em;
    }
    :where(.aos-home-page, .aos-program-page) .hero__crumbs a { color: hsl(0 0% 100% / 0.82); }
    :where(.aos-home-page, .aos-program-page) .hero__crumbs a:hover { color: hsl(var(--aos-yellow)); }
    :where(.aos-home-page, .aos-program-page) .hero__crumbs svg { width: 9px; height: 9px; opacity: 0.6; }
    :where(.aos-home-page, .aos-program-page) .hero__crumbs .is-current { color: hsl(var(--paper)); font-weight: 500; }
    :where(.aos-home-page, .aos-program-page) .hero__eyebrow {
      font-family: var(--body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: hsl(var(--aos-yellow));
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 14px;
    }
    :where(.aos-home-page, .aos-program-page) .hero__eyebrow::before {
      content: "";
      width: 34px;
      height: 1.5px;
      background: hsl(var(--aos-yellow));
    }
    :where(.aos-home-page, .aos-program-page) .hero h1 {
      font-size: clamp(2rem, 4.4vw, 3.75rem);
      line-height: 1.02;
      letter-spacing: -0.024em;
      color: hsl(var(--paper));
      max-width: 20ch;
      font-weight: 500;
      margin: 0 0 26px;
      text-shadow: 0 2px 24px hsl(var(--fg) / 0.35);
    }
    :where(.aos-home-page, .aos-program-page) .hero h1 em {
      font-style: italic;
      font-weight: 300;
      color: hsl(var(--aos-yellow));
      position: relative;
      display: inline-block;
      padding: 0 0.04em;
    }
    :where(.aos-home-page, .aos-program-page) .hero__lead {
      font-size: clamp(16px, 1.2vw, 19px);
      line-height: 1.55;
      color: hsl(0 0% 100% / 0.82);
      max-width: 52ch;
      margin-bottom: 40px;
    }
    :where(.aos-home-page, .aos-program-page) .hero__ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }
    :where(.aos-home-page, .aos-program-page) .hero__scroll {
      position: absolute;
      right: var(--gutter);
      bottom: clamp(3.5rem, 5vw, 5rem);
      display: flex;
      align-items: center;
      gap: 12px;
      color: hsl(0 0% 100% / 0.6);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }
    :where(.aos-home-page, .aos-program-page) .hero__scroll::before {
      content: "";
      width: 1px;
      height: 60px;
      background: linear-gradient(to bottom, transparent, hsl(0 0% 100% / 0.4), transparent);
      animation: scrollLine 2.4s var(--ease-in-out) infinite;
    }
    @keyframes scrollLine {
      0%, 100% { transform: translateY(-10px); opacity: 0.3; }
      50% { transform: translateY(10px); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.aos-home-page, .aos-program-page) .hero__scroll::before {
        animation: none;
        opacity: 0.6;
      }
    }

    /* ═════════════════════ LIFE PILLARS ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .pillars {
      padding: var(--section) 0;
      position: relative;
    }
    :where(.aos-home-page, .aos-program-page) .pillar {
      position: relative;
      background: hsl(var(--bg-card));
      border: 1px solid hsl(var(--border-soft));
      border-radius: var(--r-lg);
      padding: 34px 32px 30px;
      transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
      display: flex;
      flex-direction: column;
      min-height: 280px;
    }
    :where(.aos-home-page, .aos-program-page) .pillar:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: hsl(var(--border-strong));
    }
    :where(.aos-home-page, .aos-program-page) .pillar__icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: hsl(var(--aos-yellow) / 0.16);
      color: hsl(var(--aos-blue));
      display: grid;
      place-items: center;
      margin-bottom: 26px;
      position: relative;
    }
    :where(.aos-home-page, .aos-program-page) .pillar__icon svg { width: 24px; height: 24px; }
    :where(.aos-home-page, .aos-program-page) .pillar__icon::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px dashed hsl(var(--aos-yellow) / 0.5);
      border-radius: 10px;
      opacity: 0;
      transition: opacity 300ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .pillar:hover .pillar__icon::after { opacity: 1; }
    :where(.aos-home-page, .aos-program-page) .pillar h3 {
      font-family: var(--body);
      font-size: 19px;
      font-weight: 600;
      color: hsl(var(--aos-navy));
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    :where(.aos-home-page, .aos-program-page) .pillar p {
      font-size: 14.5px;
      color: hsl(var(--fg-muted));
      line-height: 1.58;
      flex: 1;
      margin-bottom: 22px;
    }

    /* ═════════════════════ DAY IN THE LIFE GALLERY ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .gallery {
      padding: var(--section) 0;
      background: hsl(var(--bg-alt));
      border-top: 1px solid hsl(var(--border-soft));
      border-bottom: 1px solid hsl(var(--border-soft));
      position: relative;
      overflow: hidden;
    }
    :where(.aos-home-page, .aos-program-page) .gallery::before {
      content: "";
      position: absolute;
      top: -20%;
      right: -10%;
      width: 60%;
      height: 60%;
      background: radial-gradient(ellipse at center, hsl(var(--aos-yellow) / 0.08), transparent 60%);
      pointer-events: none;
    }
    :where(.aos-home-page, .aos-program-page) .shot {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-sm);
      transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 900ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .shot:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    :where(.aos-home-page, .aos-program-page) .shot:hover img { transform: scale(1.06); }
    :where(.aos-home-page, .aos-program-page) .shot::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, hsl(var(--aos-navy-deep) / 0.72) 0%, hsl(var(--aos-navy-deep) / 0.08) 40%, transparent 65%);
      pointer-events: none;
    }

    /* Bento tile sizes */
      /* tall primary */
      /* wide top right */
      /* small */
      /* small */
      /* medium */
      /* medium */
      /* medium */
     /* wide panoramic */

    /* ═════════════════════ ATHLETICS DARK SPLIT ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .athletics {
      padding: 0;
      background: hsl(var(--aos-navy-deep));
      color: hsl(var(--paper));
      position: relative;
      overflow: hidden;
    }
    :where(.aos-home-page, .aos-program-page) .athletics::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, hsl(0 0% 100% / 0.05) 1px, transparent 1.5px);
      background-size: 32px 32px;
      opacity: 0.5;
      pointer-events: none;
    }

    /* ═════════════════════ CLUBS GRID ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .clubs {
      padding: var(--section) 0;
      position: relative;
    }
    :where(.aos-home-page, .aos-program-page) .club {
      background: hsl(var(--bg-card));
      border: 1px solid hsl(var(--border-soft));
      border-radius: var(--r-lg);
      padding: 28px 30px 30px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;
      transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
      overflow: hidden;
    }
    :where(.aos-home-page, .aos-program-page) .club::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, hsl(var(--aos-yellow)) 0%, hsl(var(--aos-blue)) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 400ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .club:hover::before { transform: scaleX(1); }
    :where(.aos-home-page, .aos-program-page) .club:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: hsl(var(--border-strong));
    }
    :where(.aos-home-page, .aos-program-page) .club h3 {
      font-family: var(--display);
      font-size: clamp(1.25rem, 1.6vw, 1.5rem);
      line-height: 1.1;
      color: hsl(var(--aos-navy));
      letter-spacing: -0.018em;
      font-variation-settings: "opsz" 60;
    }
    :where(.aos-home-page, .aos-program-page) .club p {
      font-size: 14px;
      color: hsl(var(--fg-muted));
      line-height: 1.55;
      flex: 1;
    }

    /* ═════════════════════ HOUSING & DINING SPLIT ═════════════════════ */
    .aos-home-page .home {
      padding: var(--section) 0;
      background: hsl(var(--bg-alt));
      border-top: 1px solid hsl(var(--border-soft));
      border-bottom: 1px solid hsl(var(--border-soft));
    }

    /* ═════════════════════ VOICES (warm cream) ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .voices {
      padding: var(--section) 0;
      background: hsl(var(--bg));
      position: relative;
    }
    :where(.aos-home-page, .aos-program-page) .voices__grid {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* ═════════════════════ CALENDAR STRIP ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .calendar {
      padding: var(--section) 0;
      background: hsl(var(--bg));
      position: relative;
    }

    /* ═════════════════════ CTA MEGA ═════════════════════ */
    :where(.aos-home-page, .aos-program-page) .cta {
      padding: 0 0 var(--section);
    }
    :where(.aos-home-page, .aos-program-page) .cta__inner {
      position: relative;
      border-radius: var(--r-2xl);
      overflow: hidden;
      padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem);
      background: hsl(var(--aos-navy));
      color: hsl(var(--paper));
    }

    /* ═════════════════════════════════════════════════════════════════════
       Footer (.foot)
       ─ 8-pt spatial grid: 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128
       ─ 1.250 modular type scale: 12 · 14 · 16 · 20 · 26 · 34 · 44
       ─ Three horizontal bands: brand+sitemap · campuses · legal
       ───────────────────────────────────────────────────────────────────── */
    .foot {
      --foot-fg:        hsl(0 0% 100% / 0.74);
      --foot-fg-strong: hsl(0 0% 100% / 0.92);
      --foot-fg-soft:   hsl(0 0% 100% / 0.56);
      --foot-fg-faint:  hsl(0 0% 100% / 0.42);
      --foot-line:      hsl(0 0% 100% / 0.10);
      --foot-line-soft: hsl(0 0% 100% / 0.06);
      --foot-fill:      hsl(0 0% 100% / 0.04);
      --foot-fill-hi:   hsl(0 0% 100% / 0.08);
      --foot-pad-y:     clamp(64px, 7vw, 96px);
      --foot-gap:       clamp(48px, 5vw, 72px);

      position: relative;
      background: hsl(var(--aos-navy-deep));
      color: var(--foot-fg);
      padding: var(--foot-pad-y) 0 0;
      font-family: var(--body);
      font-size: 14px;
      line-height: 1.65;
    }
    .foot::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.32), transparent);
    }

    /* Row 1 — brand + sitemap columns */
    .foot__inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: 1.6fr repeat(4, 1fr);
      gap: var(--foot-gap);
      align-items: start;
    }

    /* Brand block */
    .foot__brand { display: flex; flex-direction: column; gap: 24px; }
    .foot__wordmark {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(24px, 2.2vw, 30px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: hsl(var(--paper));
      margin: 0;
      font-variation-settings: "opsz" 60;
    }
    .foot__wordmark em {
      color: hsl(var(--aos-yellow));
      font-style: italic;
      font-weight: 350;
    }
    .foot__mission {
      font-size: 14px;
      line-height: 1.7;
      color: var(--foot-fg);
      max-width: 36ch;
      margin: 0;
    }

    /* Newsletter */
    .foot__news {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--foot-fill);
      border: 1px solid var(--foot-line);
      border-radius: 100px;
      padding: 6px 6px 6px 20px;
      max-width: 380px;
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
    }
    .foot__news:focus-within {
      border-color: hsl(var(--aos-yellow) / 0.6);
      background: var(--foot-fill-hi);
    }
    .foot__news input {
      flex: 1; min-width: 0;
      background: transparent;
      border: none;
      color: hsl(var(--paper));
      font: inherit;
      font-size: 14px;
      outline: none;
      padding: 8px 0;
    }
    .foot__news input::placeholder { color: var(--foot-fg-soft); }
    /* Follows the site-wide .aos-btn system: stroke ghost + teal chip
       (canonical rules live in aos-footer.css — keep in sync). */
    .foot__news button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: hsl(var(--paper));
      border: 1px solid hsl(var(--paper) / 0.25);
      border-radius: 100px;
      padding: 4px 4px 4px 15px;
      font-family: var(--body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
    }
    .foot__news button:hover { background: hsl(var(--aos-yellow) / 0.08); border-color: hsl(var(--aos-yellow) / 0.65); transform: translateY(-1px); }
    .foot__news button svg {
      box-sizing: content-box;
      width: 12px;
      height: 12px;
      padding: 6px;
      border-radius: 999px;
      background: hsl(var(--aos-yellow));
      color: hsl(var(--aos-navy-deep));
    }

    /* Social */
    .foot__social {
      list-style: none;
      padding: 0; margin: 0;
      display: flex;
      gap: 10px;
    }
    .foot__social a {
      display: grid;
      place-items: center;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid var(--foot-line);
      color: var(--foot-fg);
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
    }
    .foot__social a:hover {
      background: hsl(var(--aos-yellow));
      border-color: hsl(var(--aos-yellow));
      color: hsl(var(--aos-navy-deep));
    }
    .foot__social a svg { width: 17px; height: 17px; display: block; }

    /* Sitemap columns */
    .foot__col h4 {
      font-family: var(--body);
      font-size: 11.5px;
      font-weight: 700;
      color: hsl(var(--paper));
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin: 0 0 24px;
    }
    .foot__col ul, .foot__col .wp-block-list {
      list-style: none;
      padding: 0; margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .foot__col li { margin: 0; }
    .foot__col a {
      font-size: 14px;
      color: hsl(0 0% 100% / 0.66);
      text-decoration: none;
      transition: color 180ms var(--ease-out);
    }
    .foot__col a:hover { color: hsl(var(--paper)); }

    /* Row 2 — campus blocks */
    .foot__campuses {
      max-width: var(--container);
      margin: 72px auto 0;
      padding: 56px var(--gutter) 0;
      border-top: 1px solid var(--foot-line);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--foot-gap);
    }
    .foot__campus { display: flex; flex-direction: column; gap: 12px; }
    .foot__campus-eyebrow {
      font-family: var(--body);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: hsl(var(--aos-yellow));
      margin: 0;
    }
    .foot__campus-addr {
      font-size: 14px;
      line-height: 1.65;
      color: var(--foot-fg);
      margin: 0;
      max-width: 34ch;
    }
    .foot__campus-addr a {
      color: var(--foot-fg-strong);
      text-decoration: none;
      border-bottom: 1px solid hsl(0 0% 100% / 0.18);
      transition: border-color 200ms var(--ease-out);
    }
    .foot__campus-addr a:hover { border-color: hsl(var(--aos-yellow)); }
    .foot__campus-link {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      font-size: 13px;
      font-weight: 500;
      color: var(--foot-fg-strong);
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid hsl(0 0% 100% / 0.18);
      transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), gap 220ms var(--ease-out);
    }
    .foot__campus-link:hover {
      color: hsl(var(--aos-yellow));
      border-color: hsl(var(--aos-yellow));
      gap: 12px;
    }
    .foot__campus-link svg { width: 14px; height: 14px; }

    /* Row 3 — legal bar */
    .foot__bottom {
      max-width: var(--container);
      margin: 64px auto 0;
      padding: 28px var(--gutter);
      border-top: 1px solid var(--foot-line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px 32px;
      flex-wrap: wrap;
    }
    .foot__copy {
      font-size: 12.5px;
      color: var(--foot-fg-faint);
      margin: 0;
    }
    .foot__copy em {
      color: var(--foot-fg-soft);
      font-style: italic;
    }
    .foot__legal {
      list-style: none;
      padding: 0; margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      font-size: 12.5px;
    }
    .foot__legal li { margin: 0; }
    .foot__legal a {
      color: var(--foot-fg-soft);
      text-decoration: none;
      transition: color 180ms var(--ease-out);
    }
    .foot__legal a:hover { color: hsl(var(--paper)); }

    :where(.aos-home-page, .aos-program-page) .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* ═════════════════════ Mobile ═════════════════════ */
    @media (max-width: 1100px) {
      :where(.aos-home-page, .aos-program-page) .hero h1 { font-size: clamp(1.875rem, 4.8vw, 3.25rem); max-width: 20ch; }
      :where(.aos-home-page, .aos-program-page) .hero__scroll { display: none !important; }
      :where(.aos-home-page, .aos-program-page) .voices__grid { grid-template-columns: 1fr !important; gap: 16px !important; }

      /* Footer — tablet: brand row, then 4-col sitemap, then campuses 2x2 */
      .foot__inner { grid-template-columns: 1fr !important; gap: 48px !important; }
      .foot__inner .foot__brand { grid-column: 1 / -1; }
      .foot__inner .foot__col { display: block !important; }
      .foot__campuses { grid-template-columns: 1fr 1fr !important; }
      .foot__campus--accred { grid-column: 1 / -1; }
    }
    @media (min-width: 721px) and (max-width: 1100px) {
      .foot__inner {
        grid-template-columns: repeat(4, 1fr) !important;
        row-gap: 56px !important;
      }
      .foot__inner .foot__brand { grid-column: 1 / -1; max-width: 640px; }
    }

    @media (max-width: 720px) {
      .util__links { display: none !important; }
      .util__contact { gap: 18px !important; font-size: 12px; }
      .util__contact span:last-child { display: none !important; }

      .nav__inner { grid-template-columns: auto 1fr auto !important; padding: 18px var(--gutter); }
      .nav__list { display: none !important; }
      .nav__burger {
        display: grid !important;
        place-items: center;
        width: 40px;
        height: 40px;
        background: hsl(0 0% 100% / 0.08);
        border-radius: 8px;
        color: hsl(var(--paper));
      }
      .nav__search { display: none !important; }
      .nav__actions .btn { padding: 12px 18px; font-size: 13px; }

      :where(.aos-home-page, .aos-program-page) .hero { min-height: 86vh; }
      :where(.aos-home-page, .aos-program-page) .hero__inner { padding-bottom: 3rem; }
      :where(.aos-home-page, .aos-program-page) .hero__crumbs { margin-bottom: 18px; font-size: 12px; flex-wrap: wrap !important; }
      :where(.aos-home-page, .aos-program-page) .hero__eyebrow { margin-bottom: 22px; font-size: 11px; }
      :where(.aos-home-page, .aos-program-page) .hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); max-width: none; margin-bottom: 22px; }
      :where(.aos-home-page, .aos-program-page) .hero__lead { font-size: 15px; margin-bottom: 28px; }
      :where(.aos-home-page, .aos-program-page) .hero__ctas { flex-direction: column !important; align-items: stretch; margin-bottom: 40px; }
      :where(.aos-home-page, .aos-program-page) .hero__ctas .btn { justify-content: center; }
      :where(.aos-home-page, .aos-program-page) .pillar { min-height: auto; padding: 28px 26px; }
      :where(.aos-home-page, .aos-program-page) .shot{
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: 220px;
        grid-column: auto;
        grid-row: auto;
      }
      :where(.aos-home-page, .aos-program-page) .club { padding: 24px 24px 26px; }

      :where(.aos-home-page, .aos-program-page) .cta__inner { padding: 52px 28px; border-radius: var(--r-xl); }

      /* Footer — phone: stacked, full-width newsletter, social row centered */
      .foot { --foot-pad-y: 64px; --foot-gap: 40px !important; }
      .foot__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
      .foot__news { max-width: none; }
      .foot__campuses { grid-template-columns: 1fr !important; padding-top: 40px; margin-top: 48px; }
      .foot__campus--accred { grid-column: auto; }
      .foot__bottom { flex-direction: column !important; align-items: flex-start; gap: 16px !important; margin-top: 40px; padding-top: 24px; }
      .foot__legal { gap: 8px 18px !important; font-size: 12px; }
    }

/* ── aos-home-rebuild ─────────────────────────────────────────────── */
    /* ═════════════════════════════════════════════════════════════════════
       AOS HOME — REBUILD LAYER
       Premium hero (marquee + split pullquote panel) + 6 distinct
       components from components.html inlined as utility classes.
       All colors reference tokens defined in :root above.
       ═════════════════════════════════════════════════════════════════════ */

    /* ── Hero: marquee strip (monospace "happening now") ─────────────── */
    /* NOTE: overflow is INTENTIONALLY not hidden here. The inner
       `.hero__marquee-track` has its own `overflow: hidden` + mask-image
       to clip the scrolling list at its fading edges. Adding overflow to
       this outer container would clip the leading `.dot` element's
       4px box-shadow halo — the halo extends 4px outside the dot's
       bounding box, and the dot sits at x=0 of the marquee, so an
       overflow:hidden parent would crop the left half of the halo. */
    

    /* ── Hero: split editorial panel (pullquote + stat block) ─────────── */
    

    /* ── Section scaffold ─────────────────────────────────────────────── */
    :where(.aos-home-page, .aos-program-page) .sx {
      padding: var(--section) 0;
      position: relative;
    }

    /* ── Component: aos-card base (from components.html) ─────────────── */
    :where(.aos-home-page, .aos-program-page) .aos-card {
      position: relative;
      background: hsl(var(--bg-card));
      border: 1px solid hsl(var(--border-soft));
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 320ms var(--ease-out),
                  box-shadow 320ms var(--ease-out),
                  border-color 320ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) a.aos-card, :where(.aos-home-page, .aos-program-page) button.aos-card {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      text-align: left;
    }

    :where(.aos-home-page, .aos-program-page) .aos-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--body);
      font-size: 13px;
      font-weight: 600;
      color: hsl(var(--aos-blue));
      letter-spacing: 0.005em;
      transition: color 200ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .aos-link svg {
      width: 12px;
      height: 12px;
      transition: transform 260ms var(--ease-out);
    }
    :where(.aos-home-page, .aos-program-page) .aos-link:hover { color: hsl(var(--aos-blue-deep)); }
    :where(.aos-home-page, .aos-program-page) .aos-link:hover svg { transform: translateX(3px); }

    /* ── Component: aos-chip ─────────────────────────────────────────── */
    :where(.aos-home-page, .aos-program-page) .aos-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 12px;
      border-radius: 100px;
      font-family: var(--body);
      font-size: 11.5px;
      font-weight: 500;
      background: hsl(var(--bg-card));
      border: 1px solid hsl(var(--border));
      color: hsl(var(--aos-navy));
      letter-spacing: 0.01em;
    }

    /* ── Component: c-stat (grid of 4) ───────────────────────────────── */
    
    :where(.aos-home-page, .aos-program-page) .c-stat, :where(.aos-home-page, .aos-program-page) .c-stat.wp-block-group {
      padding: 36px 32px 32px;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px;
      border-right: 1px solid hsl(var(--border));
      position: relative;
      margin: 0 !important;
    }
    :where(.aos-home-page, .aos-program-page) .c-stat > * { margin: 0 !important; }
    :where(.aos-home-page, .aos-program-page) .c-stat:last-child { border-right: none; }

    /* ── Component: c-program ─────────────────────────────────────────── */
    :where(.aos-home-page, .aos-program-page) .c-program { padding: 28px 28px 24px; min-height: 280px; }
    :where(.aos-home-page, .aos-program-page) .c-program h3 {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.014em;
      color: hsl(var(--aos-navy));
      margin-bottom: 12px;
      font-variation-settings: "opsz" 60;
    }
    :where(.aos-home-page, .aos-program-page) .c-program p {
      font-size: 14px;
      color: hsl(var(--fg-muted));
      line-height: 1.58;
      margin-bottom: 18px;
      flex: 1;
    }

    /* ── Component: aos-acc (accordion) ───────────────────────────────── */
    :where(.aos-home-page, .aos-program-page) .aos-acc {
      display: flex;
      flex-direction: column;
      max-width: 880px;
      margin: 0 auto;
    }
    /* .aos-acc base styles owned by aos-components.css. Page-local
       additions: 3-column summary layout (number + title + chevron) and
       indented body copy specific to the home FAQ variant. */
    :where(.aos-home-page, .aos-program-page) .aos-acc summary {
      grid-template-columns: auto 1fr auto;
    }
    :where(.aos-home-page, .aos-program-page) .aos-acc details > p{
      padding-left: 42px;
    }

    /* ── Component: c-news and c-event ────────────────────────────────── */
    

    /* ── Component: aos-pullquote ─────────────────────────────────────── */
    :where(.aos-home-page, .aos-program-page) .aos-pullquote {
      padding: 64px 0 60px;
      text-align: center;
      border-top: 1px solid hsl(var(--aos-yellow-deep));
      border-bottom: 1px solid hsl(var(--aos-yellow-deep));
      position: relative;
      max-width: var(--container);
      margin: 0 auto;
    }
    :where(.aos-home-page, .aos-program-page) .aos-pullquote::before, :where(.aos-home-page, .aos-program-page) .aos-pullquote::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: hsl(var(--aos-yellow));
      transform: rotate(45deg);
      left: 50%;
      margin-left: -4px;
    }
    :where(.aos-home-page, .aos-program-page) .aos-pullquote::before { top: -4px; }
    :where(.aos-home-page, .aos-program-page) .aos-pullquote::after  { bottom: -4px; }
    :where(.aos-home-page, .aos-program-page) .aos-pullquote blockquote {
      margin: 0 auto;
      max-width: 30ch;
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      line-height: 1.18;
      letter-spacing: -0.018em;
      color: hsl(var(--aos-navy));
      font-variation-settings: "opsz" 60;
    }
    :where(.aos-home-page, .aos-program-page) .aos-pullquote__by {
      margin-top: 22px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: hsl(var(--fg-subtle));
    }

    /* ── Component: c-callout (navy variant = navy text on cream) ─────── */
    

    /* ── Mixed grid layout for news (3) + event (2) ───────────────────── */
    :where(.aos-home-page, .aos-program-page) .mix-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(0, auto);
      gap: 22px;
    }

    /* ── Mobile ──────────────────────────────────────────────────────── */
    @media (max-width: 1100px) {
      :where(.aos-home-page, .aos-program-page) .c-stat {
        border-right: 1px solid hsl(var(--border));
        border-bottom: 1px solid hsl(var(--border));
      }
      :where(.aos-home-page, .aos-program-page) .c-stat:nth-child(2n) { border-right: none; }
      :where(.aos-home-page, .aos-program-page) .c-stat:nth-child(n+3) { border-bottom: none; }

      :where(.aos-home-page, .aos-program-page) .mix-grid { grid-template-columns: repeat(6, 1fr) !important; }
    }

    @media (max-width: 720px) {
      :where(.aos-home-page, .aos-program-page) .c-stat {
        border-right: none;
        border-bottom: 1px solid hsl(var(--border));
      }
      :where(.aos-home-page, .aos-program-page) .c-stat:last-child { border-bottom: none; }
      :where(.aos-home-page, .aos-program-page) .mix-grid { grid-template-columns: 1fr !important; }

      :where(.aos-home-page, .aos-program-page) .aos-pullquote { padding: 48px 0; }
    }

/* ── final tuning ─────────────────────────────────────────────────── */
      
      /* !important required because the base `.recog-band__grid.wp-block-group`
         rule uses !important to beat Gutenberg's auto block-layout rules; the
         media query overrides have to match that specificity to take effect. */
      

/* ═══════════════════════════════════════════════════════════════════════
   Home premium (2026-10-16): "come off as a larger company presence".
   Same sections and copy as tools/content/home-premium.php; scale does the
   work. Large firms set large things in space (one statement, one photograph,
   one portrait row), where the page had small things floating in it.
   Scoped to body.home. The scale shared with the inner pages (rhythm, titles,
   steps, the standard, voices, the ask) lives in aos-components.css under
   "Premium pages, scale"; this file keeps what only the home has.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Hero: moved to aos-components.css 2026-10-16 ("Inner-page premium
   heroes"), scoped main.aos-sp, so inner pages share the home's finish. */

/* 2 · The manifesto, about 15% above the shared pinman size (Eric 2026-10-16:
   "make text slightly larger"). The pin's inner box shrinks to its longest
   line, so each line still holds one row on desktop. */
body.home .aos-s-pinman__lines li { font-size: clamp(2.4rem, 5.3vw, 4.6rem); }

/* 2 (retired) · The premise over a business at work: true colour, a scrim only where the words sit. */
body.home .aos-s-parallax { height: 150vh; }
/* The band padding every main.aos-sp section gets would show as page-coloured
   strips above and below the photograph; the pinned frame carries its own. */
body.home main.aos-sp > .aos-s-parallax { padding-block: 0; }
/* No fade-up: the shared reveal starts it transparent and 22px low, which
   showed a page-coloured strip between the film and the photograph. */
body.home .aos-s-parallax.aos-reveal { opacity: 1; transform: none; transition: none; }
body.home .aos-s-parallax__pin img { filter: saturate(0.92) contrast(1.02); }
body.home .aos-s-parallax__pin::after {
	mix-blend-mode: normal;
	background: linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.2) 0%, hsl(var(--aos-navy-deep) / 0) 28%, hsl(var(--aos-navy-deep) / 0.32) 56%, hsl(var(--aos-navy-deep) / 0.8) 100%);
}
body.home .aos-s-parallax__body { padding-bottom: clamp(3.5rem, 11vh, 7rem); }
body.home .aos-s-parallax__body h2 {
	max-width: 16.5em;
	font-size: clamp(2.25rem, 1rem + 3.9vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}
body.home .aos-s-parallax__body h2 em { color: hsl(178 50% 74%); }
body.home .aos-s-parallax__body .aos-s-eyebrow { color: hsl(0 0% 100% / 0.82); }
body.home .aos-s-parallax__body .aos-s-eyebrow__tick { background: hsl(0 0% 100% / 0.5); }
@media (prefers-reduced-motion: reduce) { body.home .aos-s-parallax { height: auto; } }

/* 3 · Case in point (aos/caseinpoint): the block carries its own styles in
   aos-components.css; on the home it follows the photograph with no rule. */
body.home .aos-s-parallax + .aos-s-caseinpoint { border-top: 0; }

/* 3c · Who we work with (aos/split): a busy street from above in a portrait
   frame, true colour, no tint; the business types open one at a time; brand
   sans only (Eric: "no serif fonts here"), no mono numbers. */
body.home .aos-s-split__grid { align-items: start; } /* photo top on the eyebrow line */
body.home .aos-s-split__media { aspect-ratio: 4 / 5; border: 0; }
body.home .aos-s-split__media img { filter: none; }
body.home .aos-s-split__media::after { content: none; }
/* Photo on the right while the grid has two columns (Eric 2026-10-16, "on
   desktop only"); stacked phones keep the photo first. */
@media (min-width: 768px) { body.home .aos-s-split__media { order: 2; } }
/* Type rhythm (Eric: "typography spacing is awful"): a two-line title sized for
   the half column, real air before the list, even rows, the open row's line
   tucked under its heading. */
body.home main.aos-sp .aos-s-split .aos-s-title { max-width: 13em; margin-top: 1rem; font-size: clamp(2rem, 1rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
body.home .aos-s-split .aos-s-title em { font-family: inherit; font-style: normal; color: inherit; }
body.home .aos-s-split__accwrap { margin-top: clamp(2rem, 4.5vh, 2.75rem); }
body.home .aos-s-split__acc summary { align-items: center; padding: 1.05rem 0; font-family: var(--display); font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
body.home .aos-s-split__acc summary b:empty { display: none; }
body.home .aos-s-split__acc summary::after { font-family: var(--display); font-size: 1.25rem; font-weight: 400; line-height: 1; }
body.home .aos-s-split__acc p { margin-top: -0.3rem; padding: 0 2.5rem 1.2rem 0; max-width: 42ch; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }

/* The ask, without faces (Eric 2026-10-16: three faces read as a headcount):
   the empty stack takes no room above the heading. */
body.home .aos-s-avatarcta__stack:empty { display: none; }

/* 3b · What we do (aos/canvas, restyled light): moved to aos-components.css
   2026-10-16 as the premium canvas (main.aos-sp), so /services/ shares it. */

/* 4 · Partners: one portrait row, names and roles always visible beneath.
   Black and white per the brand guide; colour arrives on hover. */
body.home .aos-s-expand__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
	min-height: 0;
}
body.home .aos-s-expand__panel,
body.home .aos-s-expand__panel:hover,
body.home .aos-s-expand__panel:focus-within,
body.home .aos-s-expand__panel.is-open {
	flex: none;
	display: flex;
	flex-direction: column;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	text-decoration: none;
}
body.home .aos-s-expand__panel::after { content: none; }
body.home .aos-s-expand__panel img,
body.home .aos-s-expand__panel:hover img,
body.home .aos-s-expand__panel:focus-within img,
body.home .aos-s-expand__panel.is-open img {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	background: hsl(var(--bg-alt));
	opacity: 1;
	transform: none;
	filter: grayscale(1) contrast(1.04);
}
body.home .aos-s-expand__panel img { transition: filter 0.6s var(--ease-out); }
/* Eye lines level across the row (the tall Eric portrait crops from below). */
body.home .aos-s-expand__panel:nth-child(2) img { object-position: 50% 68%; }
body.home .aos-s-expand__panel:is(:hover, :focus-visible) img { filter: grayscale(0) contrast(1.02); }
body.home .aos-s-expand__panel:focus-visible { outline: none; }
body.home .aos-s-expand__panel:focus-visible img { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 4px; }
body.home .aos-s-expand__body,
body.home .aos-s-expand__panel:is(:hover, :focus-within, .is-open) .aos-s-expand__body {
	position: static;
	display: block;
	padding: 1.25rem 0.1rem 0;
}
body.home .aos-s-expand__num { display: none; }
body.home .aos-s-expand__body h3 {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	white-space: normal;
	color: hsl(var(--fg));
}
body.home .aos-s-expand__body p,
body.home .aos-s-expand__panel:is(:hover, :focus-within, .is-open) p {
	padding-top: 0.35rem;
	max-width: none;
	font-size: 0.9375rem;
	color: hsl(var(--fg-muted));
	opacity: 1;
	transform: none;
}
/* Phones: a compact roster, every face whole and all three on one screen. */
@media (max-width: 640px) {
	body.home .aos-s-expand__row { grid-template-columns: 1fr; gap: 0; border-top: 1px solid hsl(var(--border)); }
	body.home .aos-s-expand__panel,
	body.home .aos-s-expand__panel:is(:hover, :focus-within, .is-open) {
		flex-direction: row;
		align-items: center;
		gap: 1.1rem;
		padding-block: 1rem;
		border-bottom: 1px solid hsl(var(--border));
	}
	body.home .aos-s-expand__panel img,
	body.home .aos-s-expand__panel:is(:hover, :focus-within, .is-open) img { width: 88px; flex: 0 0 88px; border-radius: 14px; }
	body.home .aos-s-expand__body,
	body.home .aos-s-expand__panel:is(:hover, :focus-within, .is-open) .aos-s-expand__body { padding: 0; }
}

/* ── Home, Version C (2026-10-20) ─────────────────────────────────────────── */
/* Version C's copy is sentences, not three-word statements, so the home gets
   one type scale instead of each block's display size (Eric: "why is the copy
   so massive"). At 1440: hero 80, section titles 44, item titles 28, body 18.
   !important: the blocks' own sizes and aos-chrome's hero rule are scoped as
   tightly as these. */
body.home {
	/* On the theme's type tokens (aos-components :root), not local sizes. */
	--vc-h2: var(--t-h2);
	--vc-h3: var(--t-h3);
	--vc-body: var(--wp--preset--font-size--body);
}

/* Hero (Eric: "needs major typography design work. You can simplify. two
   buttons side by side"). Three beats stacked tight and heavy, one quiet
   two-line subhead, then the button row (aos-components: hero actions). */
/* 2026-10-21: Justin's one-sentence headline, a size smaller (Eric: "make the
   h1 slightly smaller"): 76px at 1440 where the three beats were 92px, two
   balanced lines, a little more leading for a sentence. */
body.home .aos-hero-bleed__state .aos-hero-bleed__headline {
	font-size: clamp(2.6rem, 1.3rem + 4vw, 4.75rem) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -0.045em !important;
	text-shadow: 0 2px 40px hsl(220 30% 6% / 0.35);
}
body.home .aos-hero-bleed__state p.aos-hero-bleed__lede {
	max-width: 37rem;
	margin-top: clamp(1.25rem, 2.6vh, 1.75rem) !important;
	font-size: clamp(1.02rem, 0.94rem + 0.3vw, 1.1875rem) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: -0.003em !important;
	color: hsl(0 0% 100% / 0.9) !important;
}

/* One section rhythm (nuclear pass review: 234px between content blocks read
   as dead space): about 88px a side on desktop, 60px on phones. The hero
   and the closing film keep their own frames. */
body.home main.aos-sp > section:not(.aos-hero-bleed):not(.aos-s-filmcta) { padding-block: clamp(3.75rem, 2rem + 4vw, 5.5rem) !important; }
/* Section titles, one size. */
body.home .aos-s-edcols .aos-s-title,
body.home .aos-sc .aos-sc__title,
body.home .aos-s-letter__heading,
body.home .aos-s-photoask .aos-s-title,
body.home main.aos-sp .aos-s-caseinpoint .aos-s-title,
body.home .aos-s-voices .aos-s-title { font-size: var(--vc-h2) !important; line-height: 1.08 !important; }
/* The quote reads as a quote, not a headline. */
body.home main.aos-sp .aos-s-voices__slide blockquote { font-size: clamp(1.5rem, 1rem + 1.1vw, 2rem); line-height: 1.4; }
body.home .aos-s-filmcta__title { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem) !important; }
/* Where to start with AI (Eric: "a typographical disaster"): three sizes
   only, on the theme tokens: heading, body, and a small note under the button. */
body.home .aos-s-photoask__text { font-size: var(--vc-body) !important; line-height: 1.6 !important; }
body.home main.aos-sp .aos-s-photoask .aos-s-photoask__note { font-size: var(--wp--preset--font-size--small) !important; color: hsl(var(--fg-subtle)) !important; } /* beats main.aos-sp :is(...) */

/* What we do (Eric: "a lot of text", then "merge this ... less words ... 10/10"):
   the headline, the promise beside it on a thin teal rule, then the four
   things as a linked row that closes the section. Not the editorial columns. */
body.home .aos-s-edcols__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vh, 2.25rem); }
body.home .aos-s-edcols__aside { position: static; }
body.home .aos-s-edcols .aos-s-title { max-width: 21ch; }
body.home .aos-s-edcols__note:empty { display: none; }
body.home .aos-s-edcols__body { columns: auto; column-rule: none; }
body.home .aos-wwd__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.5vw, 2rem); margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; padding: 0; list-style: none; }
body.home .aos-wwd__list a {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	padding: 1.1rem 0 1.15rem;
	border-top: 1px solid hsl(var(--border-strong));
	font-family: var(--display); font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em;
	color: hsl(var(--fg)); text-decoration: none;
	transition: border-color 0.25s, color 0.25s;
}
body.home .aos-wwd__go { color: hsl(var(--aos-yellow-deep)); transition: transform 0.25s var(--ease-out); }
body.home .aos-wwd__list a:hover { border-top-color: hsl(var(--aos-yellow-deep)); }
body.home .aos-wwd__list a:hover .aos-wwd__go { transform: translateX(4px); }
body.home .aos-wwd__list a:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 4px; }
body.home .aos-s-edcols__body .aos-wwd__promise {
	max-width: 30rem; margin: 0; padding-left: 1.4rem;
	border-left: 2px solid hsl(var(--aos-yellow-deep));
	font-size: var(--vc-body); line-height: 1.6; color: hsl(var(--fg-muted)); text-wrap: pretty;
}
body.home .aos-s-edcols__body .aos-wwd__promise::first-letter { float: none; margin: 0; padding: 0; font: inherit; color: inherit; }
body.home .aos-s-edcols__body .aos-wwd__promise strong { display: block; margin-bottom: 0.55rem; font-family: var(--display); font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.022em; color: hsl(var(--fg)); text-wrap: balance; }
/* Wide screens: the promise sits beside the headline, level with its last
   line; the four things run full width beneath. */
@media (min-width: 900px) {
	body.home .aos-s-edcols__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 0; }
	body.home .aos-s-edcols__body { display: contents; }
	body.home .aos-s-edcols__body .aos-wwd__promise { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0.35rem; }
	body.home .aos-wwd__list { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 899px) {
	body.home .aos-wwd__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	body.home .aos-wwd__list { grid-template-columns: minmax(0, 1fr); }
}

/* Our process (nuclear pass): a tinted band, the four steps left to right on
   one teal line, each with its number, name and one line. Phones keep the
   showcase's vertical line. */
/* Page ground: the tinted band moved to the gains cards above (Eric: "that
   section needs to separate better from section above it"). */
body.home .aos-sc--steps { --sc-ground: hsl(var(--bg)); background: hsl(var(--bg)); border-top: 0; }
/* The showcase frame is 1240px on its own gutter; on the home it takes the
   shared .aos-s-inner frame so its left edge lines up with every section. */
body.home .aos-sc--steps .aos-sc__inner { width: auto; max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px)); padding-inline: var(--wp--style--root--padding-left, 24px); }
body.home .aos-sc--steps .aos-sc__lede { max-width: 46ch; font-size: var(--vc-body); line-height: 1.6; }
body.home .aos-sc__steps { counter-reset: aos-step; }
body.home .aos-sc__step { counter-increment: aos-step; padding-block: clamp(1.5rem, 1rem + 1vw, 2rem) !important; }
body.home .aos-sc__step-id::before { content: counter(aos-step, decimal-leading-zero); display: block; margin-bottom: 0.9rem; font-family: var(--display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
body.home .aos-sc__step-name { font-size: var(--vc-h3) !important; }
body.home .aos-sc__step-lede { max-width: 30ch; font-size: 1rem !important; line-height: 1.6 !important; color: var(--sc-muted); }
@media (min-width: 900px) {
	body.home .aos-sc__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.75rem, 7vh, 4rem); }
	body.home .aos-sc__step { display: block; padding: 2.4rem clamp(1.25rem, 2.5vw, 2.5rem) 0 0 !important; border-top: 2px solid color-mix(in srgb, var(--sc-accent) 55%, transparent); border-bottom: 0 !important; }
	body.home .aos-sc__step::before { display: none; }
	body.home .aos-sc__step::after { top: -8px; width: 14px; height: 14px; box-shadow: 0 0 0 5px var(--sc-ground); }
	body.home .aos-sc__step-id { position: static; }
	body.home .aos-sc__step-body { margin-top: 0.75rem; }
}

/* ── Justin's pieces (2026-10-21) ─────────────────────────────────────────── */
/* "Does any of this sound familiar?" takes the tinted band after What we do,
   the AI helpers sit on the page ground (aos/gains view.css), and the process
   takes the tint back, so neighbouring sections always differ. Its title joins
   the one section-title size. */
body.home .aos-sc--steps { --sc-ground: hsl(var(--bg-alt)); background: hsl(var(--bg-alt)); }
body.home .aos-gains .aos-gains__title { font-size: var(--vc-h2); line-height: 1.08; }
/* The promise band leads straight into What we do on the same ground: one
   section gap between them, not two. */
body.home main.aos-sp > section.aos-promise.aos-promise { padding-bottom: 0 !important; }
body.home .aos-promise + .aos-s-edcols { border-top: 0 !important; }
/* What we do carries a photograph where the promise used to sit: beside the
   headline on wide screens (the same height as eyebrow and headline), above
   the four links on phones. */
body.home .aos-wwd__photo { position: relative; margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 10; background: hsl(var(--border)); }
body.home .aos-wwd__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
	body.home .aos-s-edcols__body .aos-wwd__photo { grid-column: 2; grid-row: 1; align-self: stretch; aspect-ratio: auto; min-height: 15rem; }
}
@media (max-width: 899px) {
	body.home .aos-wwd__photo { margin-top: 0.5rem; }
}
/* The 1932 bridge photo: crop a little above centre so the hats and the
   block both stay in frame; a taller panel on wide screens. */
body.home .aos-wwd__photo img { object-position: 50% 42%; }
@media (min-width: 900px) {
	body.home .aos-s-edcols__body .aos-wwd__photo { min-height: 18rem; }
}