:root {
    --navy: #01304A;
    --navy-deep: #021F31;
    --burgundy: #8C2247;
    --burgundy-deep: #6E1A37;
    --mustard: #E8B84A;
    --sage: #88BFB6;
    --coral: #DB5F5E;
    --indigo: #363870;
    --forest: #3C4441;
    --beige: #CDB7A0;
    --cream: #F8EEE3;
    --cream-soft: #FBF5EC;
    --mint-pale: #DFEEEC;
    --peach-pale: #FAEFD4;
    --gray-pale: #E8E5E1;
    --ink: #0F1A24;
    --ink-soft: #2A3540;
    --paper: #FBF7F1;
    --serif: "ivypresto-headline", "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --eyebrow: "sweet-sans-pro", "Helvetica Neue", Arial, sans-serif;
    --body: "inter-18pt", "Inter", "Helvetica Neue", Arial, sans-serif;
    --body-lg: "inter-24pt", "Inter", "Helvetica Neue", Arial, sans-serif;
    --serif-alt: "freight-text-pro", "Cormorant Garamond", Georgia, serif;
    --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
    --s-5: 3rem; --s-6: 4.5rem; --s-7: 6rem; --s-8: 9rem;
    --container: 1280px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body { font-family: var(--body); font-weight: 400; color: var(--ink); background: var(--paper); line-height: 1.55; font-size: 16px; letter-spacing: 0.005em; overflow-x: hidden; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }

  /* HEADER ================================================================ */
  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--s-2) 0; transition: background 0.4s ease, box-shadow 0.3s ease; }
  .header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .header-logo { display: block; height: 44px; }
  .header-logo svg { height: 100%; width: auto; }
  .header-nav { display: flex; align-items: center; gap: var(--s-4); }
  .header-nav-links { display: flex; gap: var(--s-4); font-family: var(--eyebrow); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; }
  .header-nav-links a { transition: opacity 0.2s, color 0.3s; }
  .header-nav-links a:hover { opacity: 0.7; }

.header { background: rgba(251, 247, 241, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(1, 48, 74, 0.08); }
.header .afa-lockup .cls-1, .header .afa-lockup .cls-2 { fill: #01304A; }
.header .afa-lockup .cls-3 { fill: #8C2247; }
.header .afa-lockup .cls-1 { fill-rule: evenodd; }
.header .header-nav-links a { color: var(--navy); }

  .header-menu-toggle { display: none; background: transparent; border: 1px solid currentColor; padding: 8px 14px; font-family: var(--eyebrow); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: inherit; cursor: pointer; border-radius: 1px; }
  .header .header-menu-toggle { color: var(--paper); border-color: rgba(251,247,241,0.6); }
  .header.scrolled .header-menu-toggle { color: var(--navy); border-color: rgba(1,48,74,0.4); }

  /* Mobile menu drawer — slides in from the right when toggle is tapped.
     Hidden completely on desktop (display: none) so it never enters the layout. */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 88vw);
    height: 100vh;
    background: var(--navy-deep);
    color: var(--paper);
    z-index: 200;
    padding: 80px var(--s-4) var(--s-4);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out), visibility 0s 0.4s;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0,0,0,0.3);
    visibility: hidden;
  }
  .mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .mobile-menu.open {
    display: block;
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s var(--ease-out), visibility 0s;
  }
  .mobile-menu-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: 1px solid rgba(251,247,241,0.4);
    color: var(--paper);
    padding: 8px 14px;
    font-family: var(--eyebrow);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    border-radius: 1px;
  }
  .mobile-menu-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .mobile-menu-nav li {
    border-bottom: 1px solid rgba(251,247,241,0.12);
  }
  .mobile-menu-nav a {
    display: block;
    padding: 18px 4px;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--paper);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
  }
  .mobile-menu-nav a:hover, .mobile-menu-nav a:active {
    color: var(--mustard);
    padding-left: 12px;
  }
  .mobile-menu-cta {
    margin-top: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mobile-menu-cta .btn {
    justify-content: center;
    width: 100%;
  }
  .mobile-menu-cta .btn-primary {
    background: var(--mustard);
    color: var(--navy);
    border-color: var(--mustard);
  }
  .mobile-menu-cta .btn-secondary {
    color: var(--paper);
    border-color: var(--paper);
  }
  .mobile-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
  }
  body.menu-open { overflow: hidden; }

  /* Inner pages — header takes the "scrolled" appearance by default,
     since there's no dark hero behind it. The .scrolled class on top
     of these only adds the cream background and shadow on scroll. */
  body.inner .header { background: rgba(251, 247, 241, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(1, 48, 74, 0.06); }
  body.inner .header .afa-lockup .cls-1, body.inner .header .afa-lockup .cls-2 { fill: #01304A; }
  body.inner .header .afa-lockup .cls-3 { fill: #8C2247; }
  body.inner .header .header-nav-links a { color: var(--navy); }
  body.inner .header .header-menu-toggle { color: var(--navy); border-color: rgba(1,48,74,0.4); }
  body.inner .header.scrolled { box-shadow: 0 1px 0 rgba(1, 48, 74, 0.12); }

  /* BUTTONS =============================================================== */
  .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--eyebrow); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; padding: 16px 28px; border: 1.5px solid transparent; background: transparent; cursor: pointer; transition: all 0.25s ease; border-radius: 1px; line-height: 1; white-space: nowrap; }
  .btn .arrow { font-family: var(--serif); font-size: 18px; line-height: 1; font-weight: 400; transition: transform 0.3s ease; }
  .btn:hover .arrow { transform: translateX(5px); }
  .btn-primary { background: var(--burgundy); color: var(--paper); border-color: var(--burgundy); }
  .btn-primary:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }
  .btn-secondary { color: var(--navy); border-color: var(--navy); }
  .btn-secondary:hover { background: var(--navy); color: var(--paper); }
  .btn-ghost { padding-left: 0; padding-right: 0; }
  .btn-ghost:hover { color: var(--burgundy); }
  .on-dark .btn-primary { background: var(--mustard); color: var(--navy); border-color: var(--mustard); }
  .on-dark .btn-primary:hover { background: #D4A73A; border-color: #D4A73A; }
  .on-dark .btn-secondary { color: var(--paper); border-color: var(--paper); }
  .on-dark .btn-secondary:hover { background: var(--paper); color: var(--navy); }
  .on-dark .btn-ghost { color: var(--paper); }
  .on-dark .btn-ghost:hover { color: var(--mustard); }
  .header-cta { font-size: 10px; padding: 11px 20px; background: var(--burgundy); color: var(--paper); border-color: var(--burgundy); }
  .header-cta:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }

  /* HERO — choreographed word reveal ===================================== */
  .hero { position: relative; min-height: 100vh; background: var(--navy); color: var(--paper); overflow: hidden; display: flex; align-items: center; }
  .hero-plate { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 35%, rgba(140, 34, 71, 0.30) 0%, transparent 55%), radial-gradient(ellipse at 80% 75%, rgba(232, 184, 74, 0.14) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(1, 48, 74, 0.5) 0%, transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); z-index: 0; }
  .hero-plate::after { content: ""; position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0.5px, transparent 0.5px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.5) 0.5px, transparent 0.5px); background-size: 4px 4px, 6px 6px; pointer-events: none; }
  .hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .hero-video[data-loaded="true"] { opacity: 0.55; }
  .hero-veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(1, 48, 74, 0.55) 0%, rgba(2, 31, 49, 0.85) 100%),
      linear-gradient(90deg, rgba(2, 31, 49, 0.75) 0%, rgba(2, 31, 49, 0.3) 60%, transparent 100%);
    z-index: 1;
    pointer-events: none;
  }
  .hero-content { position: relative; z-index: 2; padding: calc(var(--s-7) + 30px) var(--s-4) var(--s-7); max-width: var(--container); width: 100%; margin: 0 auto; }
  .hero-inner { max-width: 920px; }
  .eyebrow { font-family: var(--eyebrow); font-size: 11px; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 700; margin-bottom: var(--s-3); }
  .hero-eyebrow { color: var(--mustard); opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .hero-eyebrow.in { opacity: 1; transform: translateY(0); }
  .hero-headline { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.022em; margin-bottom: var(--s-3); max-width: 19ch; color: var(--paper); }
  .hero-headline em { font-style: italic; color: var(--mustard); }
  .hero-headline .word { display: inline-block; opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .hero-headline.in .word { opacity: 1; transform: translateY(0); }
  .hero-sub, .hero-tag, .hero-cta { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .hero-sub.in, .hero-tag.in, .hero-cta.in { opacity: 1; transform: translateY(0); }
  .hero-sub { font-family: var(--body); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; max-width: 56ch; opacity: 0; margin-bottom: var(--s-3); }
  .hero-sub.in { opacity: 0.85; }
  .hero-tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; margin-bottom: var(--s-4); }
  .hero-tag.in { opacity: 0.9; }
  .hero-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .hero-cta.in { opacity: 1; }
  .hero-scroll { position: absolute; bottom: var(--s-4); left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--eyebrow); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper); opacity: 0.6; font-weight: 700; text-align: center; }
  .hero-scroll .line { display: block; width: 1px; height: 36px; background: var(--paper); margin: var(--s-2) auto 0; animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: top; }
  @keyframes scrollPulse { 0%, 100% { transform: scaleY(0.4); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } }

  /* GENERIC SECTIONS ====================================================== */
  .section { padding: var(--s-8) 0; position: relative; }
  .section.tinted { background: var(--cream-soft); }
  .section.cream { background: var(--cream); }
  .section.dark { background: var(--navy); color: var(--paper); }
  .section-mark { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-4); max-width: var(--container); }
  .section-num { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--burgundy); font-weight: 700; }
  .section.dark .section-num { color: var(--mustard); }
  .section-rule { flex: 1; height: 1px; background: rgba(1, 48, 74, 0.15); max-width: 200px; }
  .section.dark .section-rule { background: rgba(251, 247, 241, 0.2); }
  .section-label { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); font-weight: 400; }
  .section.dark .section-label { color: var(--paper); opacity: 0.7; }
  .display-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.018em; color: var(--navy); margin-bottom: var(--s-4); max-width: 22ch; }
  .section.dark .display-h { color: var(--paper); }
  .display-h em { font-style: italic; color: var(--burgundy); }
  .section.dark .display-h em { color: var(--mustard); }
  .body-p { font-family: var(--body); font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; }
  .section.dark .body-p { color: var(--paper); opacity: 0.85; }
  .body-p + .body-p { margin-top: var(--s-3); }

  /* CINEMA: PINNED CONVICTION SEQUENCE ==================================== */
  .pinned-conviction {
    position: relative;
    height: 600vh; /* 6x viewport — gives 5 scenes of scroll room */
    background: var(--paper);
  }
  .pinned-conviction .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
  }
  .pc-side {
    padding: var(--s-7) var(--s-5) var(--s-7) var(--s-6);
    border-right: 1px solid rgba(1, 48, 74, 0.1);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .pc-side-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .pc-side-img img,
  .pc-side-img picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.55;
    filter: saturate(0.85);
  }
  .pc-side-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(110deg, rgba(251, 247, 241, 0.82) 0%, rgba(251, 247, 241, 0.62) 60%, rgba(251, 247, 241, 0.42) 100%);
    pointer-events: none;
  }
  .pc-section-mark { display: flex; align-items: baseline; gap: var(--s-2); }
  .pc-section-mark .section-num { color: var(--burgundy); }
  .pc-section-mark .section-rule { height: 1px; width: 60px; background: rgba(1, 48, 74, 0.15); }
  .pc-side-eyebrow {
    font-family: var(--eyebrow);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--burgundy);
    font-weight: 700;
    line-height: 1.6;
  }
  .pc-side-title {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    color: var(--navy);
    letter-spacing: -0.015em;
    max-width: 14ch;
  }
  .pc-progress {
    display: flex;
    gap: 8px;
    margin-top: var(--s-3);
  }
  .pc-dot {
    width: 28px;
    height: 2px;
    background: rgba(1, 48, 74, 0.15);
    transition: background 0.4s;
  }
  .pc-dot.passed { background: var(--burgundy); opacity: 0.4; }
  .pc-dot.active { background: var(--burgundy); }

  .pc-scenes {
    position: relative;
    height: 100vh;
    padding: var(--s-6) var(--s-6) var(--s-6) var(--s-5);
    overflow: hidden;
  }
  .pc-scene {
    position: absolute;
    inset: var(--s-6) var(--s-6) var(--s-6) var(--s-5);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
  }
  .pc-scene.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .pc-scene p {
    font-family: var(--body);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 56ch;
  }
  .pc-scene p + p { margin-top: var(--s-3); }
  .pc-scene.scene-key p {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--burgundy);
    max-width: 16ch;
  }
  .pc-scene.scene-close p:last-child {
    margin-top: var(--s-3);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--burgundy);
    line-height: 1.4;
  }

  /* CINEMA: HORIZONTAL SCROLL PILLARS ===================================== */
  .h-pillars {
    position: relative;
    height: 400vh; /* 4x viewport for horizontal travel */
  }
  .h-pillars .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--cream-soft);
  }
  .h-pillars-mark {
    position: absolute;
    top: var(--s-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: 0 var(--s-4);
    width: 100%;
    max-width: var(--container);
    padding-top: calc(var(--s-3) + 50px);
  }
  .h-pillars-mark .section-rule { background: rgba(1, 48, 74, 0.25); max-width: 200px; }
  .h-pillars-track {
    display: flex;
    height: 100vh;
    width: 300vw;
    will-change: transform;
    transition: transform 0.05s linear;
  }
  .h-pillar {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--s-6);
    position: relative;
  }
  .h-pillar-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: center;
  }
  .h-pillar-bignum {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(7rem, 18vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--navy);
    opacity: 0.08;
    position: absolute;
    bottom: var(--s-6);
    left: var(--s-5);
    z-index: 0;
    pointer-events: none;
  }
  .h-pillar-num {
    font-family: var(--eyebrow);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--burgundy);
    font-weight: 700;
    margin-bottom: var(--s-3);
  }
  .h-pillar-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--navy);
    margin-bottom: var(--s-3);
    position: relative;
    z-index: 1;
  }
  .h-pillar:nth-child(2) .h-pillar-display { color: var(--burgundy); }
  .h-pillar:nth-child(3) .h-pillar-display { color: var(--forest); }
  .h-pillar-tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.3;
    color: var(--burgundy);
    margin-bottom: var(--s-4);
    position: relative;
    z-index: 1;
  }
  .h-pillar:nth-child(2) .h-pillar-tag { color: var(--navy); }
  .h-pillar:nth-child(3) .h-pillar-tag { color: var(--forest); opacity: 0.85; }
  .h-pillar-body {
    font-family: var(--body);
    font-size: clamp(1.05rem, 1.3vw, 1.15rem);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 44ch;
    position: relative;
    z-index: 1;
  }
  .h-pillar-body + .h-pillar-body { margin-top: var(--s-2); }
  .h-pillar-eyebrow {
    position: relative;
    z-index: 1;
  }
  /* Atmospheric backgrounds for each pillar */
  .h-pillar:nth-child(1) { background: linear-gradient(135deg, var(--cream-soft) 0%, var(--mint-pale) 100%); }
  .h-pillar:nth-child(2) { background: linear-gradient(135deg, var(--cream) 0%, var(--peach-pale) 100%); }
  .h-pillar:nth-child(3) { background: linear-gradient(135deg, var(--paper) 0%, var(--gray-pale) 100%); }
  /* Horizontal scroll progress indicator */
  .h-progress {
    position: absolute;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .h-progress-label {
    font-family: var(--eyebrow);
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 700;
    opacity: 0.6;
  }
  .h-progress-bar { width: 80px; height: 2px; background: rgba(1, 48, 74, 0.15); position: relative; overflow: hidden; }
  .h-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--burgundy); width: 0; transition: width 0.05s linear; }

  /* CINEMA: PINNED RHYTHM WITH NUMERAL ==================================== */
  .pinned-rhythm {
    position: relative;
    height: 800vh; /* 7 steps + intro */
    background: var(--paper);
  }
  .pinned-rhythm .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    background: var(--cream-soft);
  }
  .pr-numeral-side {
    height: 100vh;
    position: relative;
    background: var(--paper);
    border-right: 1px solid rgba(1, 48, 74, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
  }
  .pr-numeral-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .pr-numeral-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1.5s ease;
  }
  .pr-numeral-video video[data-loaded="true"] { opacity: 0.55; }
  .pr-numeral-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(251, 247, 241, 0.62) 0%, rgba(251, 247, 241, 0.48) 50%, rgba(251, 247, 241, 0.62) 100%);
    pointer-events: none;
  }
  .pr-numeral-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(140, 34, 71, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .pr-mark {
    position: absolute;
    top: var(--s-7);
    left: var(--s-5);
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
  }
  .pr-numeral {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(10rem, 20vw, 20rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--burgundy);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    padding-right: 0.15em;
    white-space: nowrap;
  }
  .pr-numeral.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pr-numeral.intro { color: var(--navy); font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.04; font-style: normal; letter-spacing: -0.018em; max-width: 14ch; padding: 0 var(--s-5); text-align: center; white-space: normal; }
  .pr-numeral.intro em { font-style: italic; color: var(--burgundy); }

  .pr-content-side {
    height: 100vh;
    padding: var(--s-6) var(--s-6) var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .pr-scene {
    position: absolute;
    inset: var(--s-6) var(--s-6) var(--s-6) var(--s-5);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
    pointer-events: none;
  }
  .pr-scene.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .pr-scene-step {
    font-family: var(--eyebrow);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--burgundy);
    font-weight: 700;
  }
  .pr-scene-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--navy);
    max-width: 18ch;
  }
  .pr-scene-title em { font-style: italic; color: var(--burgundy); }
  .pr-scene-body {
    font-family: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 52ch;
  }
  .pr-scene-coda {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--burgundy);
    line-height: 1.4;
    max-width: 44ch;
    margin-top: var(--s-2);
  }
  .pr-progress {
    position: absolute;
    bottom: var(--s-4);
    right: var(--s-5);
    display: flex;
    gap: 6px;
  }
  .pr-pdot { width: 22px; height: 2px; background: rgba(1, 48, 74, 0.15); transition: background 0.4s; }
  .pr-pdot.passed { background: var(--burgundy); opacity: 0.4; }
  .pr-pdot.active { background: var(--burgundy); }

  /* FAMILIES — grid with cinematic reveal ================================= */
  .family-intro { max-width: 64ch; margin-bottom: var(--s-6); }
  .families-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(1, 48, 74, 0.12); border: 1px solid rgba(1, 48, 74, 0.12); }
  .family-card { background: var(--paper); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); position: relative; text-decoration: none; color: inherit; min-height: 280px; opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), background 0.35s ease; overflow: hidden; isolation: isolate; }
  .family-card.in { opacity: 1; transform: translateY(0); }
  .family-card-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
    pointer-events: none;
  }
  .family-card-img img,
  .family-card-img picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .family-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(1, 48, 74, 0.92) 0%, rgba(1, 48, 74, 0.78) 100%);
    pointer-events: none;
  }
  .family-card:hover .family-card-img { opacity: 1; }
  .family-card > *:not(.family-card-img) {
    position: relative;
    z-index: 1;
    transition: color 0.35s ease;
  }
  .family-card:hover .family-num { color: var(--mustard); }
  .family-card:hover .family-name { color: var(--paper); }
  .family-card:hover .family-body { color: var(--paper); opacity: 0.92; }
  .family-card:hover .arrow { color: var(--mustard); }
  .family-card .arrow { position: absolute; bottom: var(--s-3); right: var(--s-3); font-family: var(--serif); font-size: 1.5rem; color: var(--burgundy); transition: transform 0.3s ease, color 0.35s ease; z-index: 1; }
  .family-card:hover .arrow { transform: translateX(4px); }
  .family-num { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--burgundy); font-weight: 700; }
  .family-name { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.8rem; line-height: 1.1; color: var(--navy); letter-spacing: -0.01em; max-width: 16ch; }
  .family-body { font-family: var(--body); font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; }
  .families-cta { margin-top: var(--s-5); }

  /* §05 — TOOL & ARTIST · long-form essay layout ========================== */
  .tool-artist {
    position: relative;
    background: var(--navy);
    color: var(--paper);
    overflow: hidden;
    padding: var(--s-8) 0;
    isolation: isolate;
  }
  .tool-artist-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }
  .tool-artist-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1.5s ease;
    filter: saturate(0.85);
  }
  .tool-artist-video video[data-loaded="true"] { opacity: 0.55; }
  .tool-artist-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(1, 48, 74, 0.55) 0%, rgba(1, 48, 74, 0.7) 100%);
    pointer-events: none;
  }
  .tool-artist::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse at 75% 15%, rgba(232, 184, 74, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 15% 85%, rgba(140, 34, 71, 0.14) 0%, transparent 55%);
    pointer-events: none;
  }
  .tool-artist .container { position: relative; z-index: 1; max-width: 1080px; }
  .ta-mark { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-5); }
  .ta-mark .section-num { color: var(--mustard); }
  .ta-mark .section-rule { background: rgba(251,247,241,0.25); flex: 1; height: 1px; max-width: 180px; }
  .ta-mark .section-label { color: var(--paper); opacity: 0.7; font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; }
  .ta-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3.4rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--paper);
    margin-bottom: var(--s-6);
  }
  .ta-display .line { display: block; }
  .ta-display .line-2 { font-style: italic; color: var(--mustard); }
  .ta-lede {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.4;
    color: var(--paper);
    opacity: 0.95;
    max-width: 38ch;
    margin-bottom: var(--s-5);
    padding-left: var(--s-3);
    border-left: 2px solid var(--mustard);
  }
  .ta-body {
    font-family: var(--body);
    font-size: clamp(1.05rem, 1.35vw, 1.18rem);
    line-height: 1.7;
    color: var(--paper);
    opacity: 0.88;
    max-width: 62ch;
  }
  .ta-body + .ta-body { margin-top: var(--s-3); }
  .ta-divider {
    width: 60px;
    height: 1px;
    background: var(--mustard);
    opacity: 0.6;
    margin: var(--s-6) 0;
  }
  .ta-multiplier {
    margin: var(--s-5) 0;
    padding: var(--s-4) 0;
    border-top: 1px solid rgba(251,247,241,0.15);
    border-bottom: 1px solid rgba(251,247,241,0.15);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
  }
  .ta-mult-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  .ta-mult-tool {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.1;
    color: var(--mustard);
    font-weight: 400;
  }
  .ta-mult-effect {
    font-family: var(--eyebrow);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--paper);
    opacity: 0.7;
    font-weight: 400;
  }
  .ta-stamp {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.2;
    color: var(--mustard);
    max-width: 22ch;
    margin: var(--s-6) 0 var(--s-5);
    padding-left: var(--s-3);
    border-left: 3px solid var(--mustard);
  }
  .ta-closer {
    font-family: var(--body);
    font-size: clamp(1.1rem, 1.4vw, 1.22rem);
    line-height: 1.7;
    color: var(--paper);
    opacity: 0.92;
    max-width: 60ch;
    margin-bottom: var(--s-5);
  }
  .ta-closer strong {
    font-weight: 700;
    color: var(--paper);
    opacity: 1;
  }
  .ta-cta { margin-top: var(--s-4); }

  /* reveal animations — gentle, not cinematic */
  .ta-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .ta-reveal.in { opacity: 1; transform: translateY(0); }
  .ta-lede.ta-reveal.in, .ta-body.ta-reveal.in, .ta-closer.ta-reveal.in { opacity: 0.95; }
  .ta-body.ta-reveal.in { opacity: 0.88; }
  .ta-closer.ta-reveal.in { opacity: 0.92; }
  .ta-stamp.ta-reveal.in { opacity: 1; }

  /* CINEMA: WILLIAMS TESTIMONIAL — full-bleed cinematic =================== */
  .cine-testimonial {
    min-height: 100vh;
    background: var(--navy-deep);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .cine-testimonial-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .cine-testimonial-bg img,
  .cine-testimonial-bg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.55;
    filter: contrast(0.95);
  }
  .cine-testimonial-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 31, 49, 0.88) 0%, rgba(2, 31, 49, 0.55) 50%, rgba(2, 31, 49, 0.35) 100%);
    pointer-events: none;
  }
  .cine-testimonial::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(232, 184, 74, 0.18) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
  }
  .cine-testimonial::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(140, 34, 71, 0.22) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
  }
  .ct-inner { position: relative; z-index: 1; max-width: 1100px; padding: var(--s-7) var(--s-5); margin: 0 auto; width: 100%; }
  .ct-mark { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-5); }
  .ct-mark .section-num { color: var(--mustard); }
  .ct-mark .section-rule { background: rgba(251,247,241,0.25); max-width: 120px; }
  .ct-mark .section-label { color: var(--paper); opacity: 0.7; }
  .ct-eyebrow {
    font-family: var(--eyebrow);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--mustard);
    margin-bottom: var(--s-4);
    font-weight: 700;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .ct-eyebrow.in { opacity: 1; transform: translateY(0); }
  .ct-quote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 4rem);
    line-height: 1.15;
    color: var(--paper);
    margin-bottom: var(--s-4);
    max-width: 22ch;
  }
  .ct-quote .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .ct-quote.in .word { opacity: 1; transform: translateY(0); }
  .ct-quote .accent { color: var(--mustard); font-style: italic; }
  .ct-attribution {
    font-family: var(--eyebrow);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--paper);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    font-weight: 700;
    margin-bottom: var(--s-4);
  }
  .ct-attribution.in { opacity: 0.7; transform: translateY(0); }
  .ct-cta { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .ct-cta.in { opacity: 1; transform: translateY(0); }

  /* BEGIN ================================================================= */
  .begin { background: var(--cream); padding: var(--s-8) 0; position: relative; overflow: hidden; }
  .begin .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); align-items: center; }
  .begin-inner { max-width: 920px; }
  .begin-img {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 30px 60px -30px rgba(1, 48, 74, 0.25);
  }
  .begin-img img, .begin-img picture { width: 100%; height: 100%; object-fit: cover; display: block; }
  .begin-display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 6.5vw, 5.6rem); line-height: 1; letter-spacing: -0.024em; color: var(--navy); margin-bottom: var(--s-4); }
  .begin-display em { font-style: italic; color: var(--burgundy); }
  .begin-body { font-family: var(--body); font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--ink-soft); max-width: 56ch; margin-bottom: var(--s-3); }
  .begin-tag { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--burgundy); margin-bottom: var(--s-4); }
  .begin-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }

  /* FOOTER ================================================================ */
  .footer { background: var(--navy-deep); color: var(--paper); padding: var(--s-7) 0 var(--s-4); }
  .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
  .footer-brand { display: flex; flex-direction: column; gap: var(--s-3); }
  .footer-mark { height: 70px; }
  .footer-mark svg { height: 100%; width: auto; }
  /* New dark-bg footer mark SVG — class names st0/st1/st2/st3 from the source file */
  .afa-footer-mark .st0 { fill: #FBF7F1; fill-rule: evenodd; }
  .afa-footer-mark .st1 { fill: #FBF7F1; }
  .afa-footer-mark .st2 { fill: var(--navy); }
  .afa-footer-mark .st3 { fill: var(--burgundy); }
  .footer-tag { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; opacity: 0.8; max-width: 24ch; }
  .footer-col h4 { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mustard); font-weight: 700; margin-bottom: var(--s-2); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { font-family: var(--body); font-size: 0.95rem; color: var(--paper); opacity: 0.78; transition: opacity 0.2s; line-height: 1.4; }
  .footer-col a:hover { opacity: 1; }
  .footer-bottom { border-top: 1px solid rgba(251,247,241,0.15); padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-family: var(--eyebrow); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); opacity: 0.55; font-weight: 400; }

  /* RESPONSIVE ============================================================ */
  @media (max-width: 980px) {
    .header { padding: 12px 0; }
    .header-logo { height: 48px; }
    .header-nav-links { display: none; }
    .header-menu-toggle { display: inline-flex; }
    .header-cta { display: none; }
    /* Bring the mobile menu drawer back into the layout — still hidden via transform + visibility until .open */
    .mobile-menu { display: block; }
    .mobile-menu-backdrop { display: block; }
    /* Collapse cinema sections to vertical on mobile — too much for small screens */
    .pinned-conviction { height: auto; }
    .pinned-conviction .stage { position: static; height: auto; display: block; }
    .pc-side { height: auto; border-right: none; border-bottom: 1px solid rgba(1, 48, 74, 0.1); padding: var(--s-5) var(--s-3); }
    .pc-scenes { padding: var(--s-5) var(--s-3); height: auto; }
    .pc-scene { position: static; opacity: 1; transform: none; padding: 0 0 var(--s-5); inset: auto; }
    .pc-scene + .pc-scene { border-top: 1px solid rgba(1, 48, 74, 0.08); padding-top: var(--s-5); }
    .h-pillars { height: auto; }
    .h-pillars .stage { position: static; height: auto; }
    .h-pillars-mark { position: static; transform: none; padding: var(--s-5) var(--s-3) 0; }
    .h-pillars-track { flex-direction: column; width: 100%; height: auto; transform: none !important; }
    .h-pillar { width: 100%; height: auto; min-height: 60vh; padding: var(--s-6) var(--s-3); }
    .h-pillar-inner { grid-template-columns: 1fr; gap: var(--s-3); }
    .h-progress { display: none; }
    .pinned-rhythm { height: auto; }
    .pinned-rhythm .stage { position: static; height: auto; display: block; }
    .pr-numeral-side {
      height: auto;
      padding: var(--s-5) var(--s-4) var(--s-3);
      border-right: none;
      border-bottom: 1px solid rgba(1, 48, 74, 0.08);
      background: var(--cream-soft);
      display: block;
    }
    .pr-numeral-side::before { display: none; }
    .pr-mark { position: static; margin-bottom: var(--s-3); }
    /* Hide all numerals on mobile — they don't work as cross-fading; the intro headline replaces them */
    .pr-numeral { display: none; }
    .pr-numeral.intro {
      display: block;
      position: static;
      opacity: 1;
      transform: none;
      font-size: clamp(1.8rem, 6vw, 2.6rem);
      max-width: none;
      padding: 0;
      text-align: left;
      color: var(--navy);
      line-height: 1.05;
      letter-spacing: -0.015em;
    }
    .pr-content-side {
      height: auto;
      padding: var(--s-4) var(--s-3);
      background: var(--paper);
    }
    /* Each scene becomes a stand-alone step with a numeral badge */
    .pr-scene {
      position: static;
      opacity: 1;
      transform: none;
      padding: var(--s-4) 0;
      inset: auto;
      border-top: 1px solid rgba(1, 48, 74, 0.08);
      gap: var(--s-2);
    }
    .pr-scene:first-of-type { border-top: none; padding-top: var(--s-3); }
    /* Intro scene on mobile reads as the opening pitch, not a step */
    .pr-scene[data-scene="0"] {
      border-top: none;
      padding-top: 0;
    }
    .pr-scene-step {
      display: inline-block;
      padding: 4px 10px;
      background: var(--burgundy);
      color: var(--paper);
      border-radius: 1px;
      letter-spacing: 0.18em;
      font-size: 9px;
    }
    .pr-scene-title { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
    .pr-scene-body { font-size: 1rem; line-height: 1.55; }
    .pr-scene-coda { font-size: 1.05rem; }
    .pr-progress { display: none; }
    .families-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
    .footer-brand { grid-column: 1 / -1; }
    .section { padding: var(--s-7) 0; }
    .hero-content { padding: calc(var(--s-6) + 70px) var(--s-3) var(--s-7); }
    .ct-quote .word { opacity: 1; transform: none; }
    .ct-eyebrow, .ct-attribution, .ct-cta { opacity: 1; transform: none; }
    .ct-attribution { opacity: 0.7; }
    .ta-multiplier { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .tool-artist { padding: var(--s-7) 0; }
    .begin .container { grid-template-columns: 1fr; gap: var(--s-5); }
    .begin-img { max-width: 480px; aspect-ratio: 4 / 5; }
    /* On mobile, family cards show the image more readily since there's no hover */
    .family-card-img { opacity: 0.55; }
    .family-card .family-num { color: var(--mustard); }
    .family-card .family-name, .family-card .family-body { color: var(--paper); }
    .family-card .family-body { opacity: 0.92; }
    .family-card .arrow { color: var(--mustard); }
    /* Below-fold ambient videos: hide on mobile to save bandwidth; show poster only */
    .pr-numeral-video video, .tool-artist-video video { display: none; }
    .pr-numeral-video { background: var(--paper) url('video/rhythm-1-poster.jpg') center/cover no-repeat; opacity: 0.55; }
    .tool-artist-video { background: var(--navy) url('video/tool-artist-poster.jpg') center/cover no-repeat; opacity: 0.55; }

    /* ========== Additional mobile fixes ========== */
    /* Hero: tighten headline, stack CTAs full-width for thumb reach */
    .hero { min-height: auto; padding-bottom: var(--s-5); }
    .hero-headline { font-size: clamp(2.2rem, 8.5vw, 3rem); line-height: 1.05; }
    .hero-sub { font-size: 1rem; line-height: 1.5; }
    .hero-tag { font-size: 1.05rem; }
    .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-cta .btn { justify-content: center; width: 100%; }
    .hero-scroll { display: none; }

    /* Pillars: tighten the vertical stack, less per-panel height */
    .h-pillar { min-height: auto; padding: var(--s-5) var(--s-3); }
    .h-pillar-display { font-size: clamp(2.4rem, 10vw, 4rem); margin-bottom: var(--s-2); }
    .h-pillar-tag { font-size: clamp(1.1rem, 3.5vw, 1.4rem); margin-bottom: var(--s-3); }
    .h-pillar-body { font-size: 1rem; line-height: 1.55; }
    .h-pillar-bignum { font-size: 8rem; }

    /* Conviction scenes: tighten typography for small screens */
    .pc-side-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .pc-scene p { font-size: 1rem; line-height: 1.55; }
    .pc-scene.scene-key p { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; }
    .pc-scene.scene-close p:last-child { font-size: 1.1rem; }
    .pc-progress { display: none; }

    /* Family grid: tighter min-height, scale-down body */
    .family-card { min-height: 220px; padding: var(--s-4) var(--s-3); }
    .family-name { font-size: 1.4rem; }
    .family-body { font-size: 0.92rem; line-height: 1.5; }
    .family-num { font-size: 9px; }
    .family-card .arrow { font-size: 1.3rem; bottom: var(--s-2); right: var(--s-2); }

    /* Tool & Artist: tighten copy + multiplier grid spacing */
    .ta-display { font-size: clamp(2.4rem, 10vw, 3.6rem); margin-bottom: var(--s-4); }
    .ta-lede { font-size: clamp(1.1rem, 4vw, 1.4rem); padding-left: var(--s-2); margin-bottom: var(--s-4); }
    .ta-body { font-size: 0.98rem; line-height: 1.6; }
    .ta-stamp { font-size: clamp(1.4rem, 5.5vw, 2rem); padding-left: var(--s-2); margin: var(--s-4) 0; }
    .ta-closer { font-size: 1.02rem; line-height: 1.6; }
    .ta-mult-tool { font-size: 1.2rem; }
    .ta-mult-effect { font-size: 9px; }
    .ta-multiplier { padding: var(--s-3) 0; margin: var(--s-4) 0; }

    /* Williams testimonial */
    .cine-testimonial { min-height: auto; padding: var(--s-7) 0; }
    .ct-inner { padding: var(--s-5) var(--s-3); }
    .ct-quote { font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.18; max-width: none; }
    .ct-mark { margin-bottom: var(--s-3); }

    /* Begin */
    .begin { padding: var(--s-7) 0; }
    .begin-display { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.05; }
    .begin-body { font-size: 1rem; line-height: 1.55; }
    .begin-tag { font-size: 1rem; }
    .begin-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .begin-cta .btn { justify-content: center; width: 100%; }

    /* Footer */
    .footer { padding: var(--s-6) 0 var(--s-3); }
    .footer-grid { gap: var(--s-3); margin-bottom: var(--s-4); }
    .footer-mark { height: 56px; }
    .footer-tag { font-size: 0.95rem; }
    .footer-col h4 { margin-bottom: 10px; font-size: 9px; }
    .footer-col a { font-size: 0.88rem; }
    .footer-bottom { font-size: 9px; flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Inner pages: page-hero typography tighten */
    .page-hero { padding: calc(var(--s-5) + 80px) 0 var(--s-5); }
    .page-hero-headline { font-size: clamp(2rem, 8.5vw, 3rem); }
    .page-hero-sub { font-size: 1rem; line-height: 1.5; }

    /* Inner pages: prose tightening + CTA strip stacking */
    .prose-section { padding: var(--s-5) 0; }
    .prose h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: var(--s-3); }
    .prose h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); margin: var(--s-4) 0 var(--s-2); }
    .prose p { font-size: 1rem; line-height: 1.65; }
    .prose blockquote { font-size: clamp(1.2rem, 4.5vw, 1.6rem); margin: var(--s-4) 0; }
    .prose li { font-size: 1rem; }
    .cta-strip { padding: var(--s-5) 0; }
    .cta-strip-headline { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .cta-strip-body { font-size: 1rem; line-height: 1.55; }
    .cta-strip-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .cta-strip-actions .btn { justify-content: center; width: 100%; }

    /* Card grids on inner pages stack to one column */
    .card-grid { padding: var(--s-5) 0; }
    .info-card { padding: var(--s-4) var(--s-3); }
    .info-card-name { font-size: 1.4rem; }

    /* Forms */
    .form-section { padding: var(--s-5) 0; }
    .form-field input, .form-field textarea, .form-field select { font-size: 16px; /* prevents iOS zoom on focus */ }

    /* Buttons get full width on very small screens */
    .btn { padding: 14px 22px; font-size: 11px; }
  }
  @media (max-width: 600px) {
    .families-grid { grid-template-columns: 1fr; }
    .ta-multiplier { grid-template-columns: 1fr; }
    .begin-img { aspect-ratio: 1 / 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .pinned-conviction, .h-pillars, .pinned-rhythm { height: auto !important; }
    .pinned-conviction .stage, .h-pillars .stage, .pinned-rhythm .stage { position: static !important; height: auto !important; }
    .pc-scene, .pr-scene { position: static !important; opacity: 1 !important; transform: none !important; }
  }
/* ======================================================================
   INNER PAGE LAYOUTS — pages other than the homepage
   ====================================================================== */

/* Page hero — eyebrow + display headline, sits under the sticky header */
.page-hero {
  padding: calc(var(--s-7) + 40px) 0 var(--s-6);
  background: var(--cream-soft);
  border-bottom: 1px solid rgba(1, 48, 74, 0.08);
  position: relative;
}
.page-hero .container {
  max-width: 1080px;
}
.page-hero-eyebrow {
  font-family: var(--eyebrow);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.page-hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: var(--s-3);
  max-width: 22ch;
}
.page-hero-headline em { font-style: italic; color: var(--burgundy); }
.page-hero-sub {
  font-family: var(--body);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Inner page body — overrides the homepage's no-padding-top default */
.page-body { background: var(--paper); }

/* Generic two-column section: text on left, visual on right */
.two-col {
  padding: var(--s-7) 0;
  border-bottom: 1px solid rgba(1, 48, 74, 0.06);
}
.two-col .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.two-col.flip .container { grid-template-columns: 1fr 1fr; }
.two-col.flip .two-col-text { order: 2; }
.two-col.flip .two-col-img { order: 1; }
.two-col-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(1, 48, 74, 0.2);
}
.two-col-img img, .two-col-img picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.two-col-eyebrow {
  font-family: var(--eyebrow);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.two-col-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin-bottom: var(--s-3);
  max-width: 20ch;
}
.two-col-headline em { font-style: italic; color: var(--burgundy); }
.two-col-body p { font-family: var(--body); font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 56ch; }
.two-col-body p + p { margin-top: var(--s-3); }
.two-col-body em { font-style: italic; color: var(--burgundy); }

/* Prose section — full-width article body */
.prose-section { padding: var(--s-7) 0; border-bottom: 1px solid rgba(1, 48, 74, 0.06); }
.prose-section.tinted { background: var(--cream-soft); }
.prose-section.cream { background: var(--cream); }
.prose-section.dark { background: var(--navy); color: var(--paper); }
.prose {
  max-width: 720px;
  margin: 0 auto;
}
.prose .section-mark { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.prose .section-mark .section-num { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--burgundy); font-weight: 700; }
.prose .section-mark .section-rule { flex: 1; height: 1px; background: rgba(1, 48, 74, 0.15); max-width: 100px; }
.prose .section-mark .section-label { font-family: var(--eyebrow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); font-weight: 400; }
.prose-section.dark .section-mark .section-num { color: var(--mustard); }
.prose-section.dark .section-mark .section-rule { background: rgba(251,247,241,0.25); }
.prose-section.dark .section-mark .section-label { color: var(--paper); opacity: 0.7; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin-bottom: var(--s-4);
}
.prose h2 em { font-style: italic; color: var(--burgundy); }
.prose-section.dark .prose h2 { color: var(--paper); }
.prose-section.dark .prose h2 em { color: var(--mustard); }
.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  color: var(--burgundy);
  margin: var(--s-5) 0 var(--s-2);
}
.prose-section.dark .prose h3 { color: var(--mustard); }
.prose p {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.prose-section.dark .prose p { color: var(--paper); opacity: 0.88; }
.prose p em { font-style: italic; }
.prose p strong { font-weight: 700; color: var(--navy); }
.prose-section.dark .prose p strong { color: var(--paper); opacity: 1; }
.prose blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.4;
  color: var(--burgundy);
  margin: var(--s-5) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--burgundy);
  max-width: 32ch;
}
.prose-section.dark .prose blockquote { color: var(--mustard); border-left-color: var(--mustard); }
.prose ul, .prose ol {
  margin: var(--s-3) 0;
  padding-left: 0;
  list-style: none;
}
.prose li {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  padding-left: 28px;
  position: relative;
}
.prose-section.dark .prose li { color: var(--paper); opacity: 0.88; }
.prose li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--burgundy);
  font-weight: 400;
}
.prose-section.dark .prose li::before { color: var(--mustard); }
.prose ol { counter-reset: ol-counter; }
.prose ol li { counter-increment: ol-counter; }
.prose ol li::before {
  content: counter(ol-counter, decimal-leading-zero);
  font-family: var(--eyebrow);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  top: 4px;
}

/* Data tables — used on the calendar page */
.prose .table-wrap { overflow-x: auto; margin: var(--s-4) 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 1.05rem;
}
.prose thead th {
  background: var(--navy);
  color: var(--paper);
  font-family: var(--eyebrow);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-align: left;
  padding: var(--s-2) var(--s-3);
}
.prose tbody td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid rgba(1, 48, 74, 0.1);
  color: var(--ink-soft);
  vertical-align: top;
}
.prose tbody tr:nth-child(even) { background: var(--cream-soft); }
.prose tbody td:first-child { font-weight: 600; color: var(--navy); }
.prose tbody td:last-child { white-space: nowrap; }

/* CTA strip — used at bottom of inner pages */
.cta-strip {
  padding: var(--s-7) 0;
  background: var(--cream);
}
.cta-strip.dark { background: var(--navy); color: var(--paper); }
.cta-strip .container { max-width: 800px; text-align: left; }
.cta-strip-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: var(--s-3);
  max-width: 20ch;
}
.cta-strip.dark .cta-strip-headline { color: var(--paper); }
.cta-strip-headline em { font-style: italic; color: var(--burgundy); }
.cta-strip.dark .cta-strip-headline em { color: var(--mustard); }
.cta-strip-body {
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: var(--s-4);
}
.cta-strip.dark .cta-strip-body { color: var(--paper); opacity: 0.85; }
.cta-strip-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Card grid — used for leadership, partners, programs */
.card-grid { padding: var(--s-7) 0; }
.card-grid.tinted { background: var(--cream-soft); }
.card-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.card-grid-inner.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-inner.cols-3 { grid-template-columns: repeat(3, 1fr); }
.info-card {
  padding: var(--s-5) var(--s-4);
  background: var(--paper);
  border-top: 2px solid var(--navy);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.info-card.burgundy-rule { border-top-color: var(--burgundy); }
.info-card.mustard-rule { border-top-color: var(--mustard); }
.info-card-num {
  font-family: var(--eyebrow);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  font-weight: 700;
}
.info-card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.info-card-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--burgundy);
}
.info-card-body {
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Inquiry / contact form */
.form-section { padding: var(--s-7) 0; background: var(--cream-soft); }
.form-wrap { max-width: 640px; margin: 0 auto; }
.form-field { margin-bottom: var(--s-3); }
.form-field label {
  display: block;
  font-family: var(--eyebrow);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: var(--s-1);
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(1, 48, 74, 0.2);
  border-radius: 1px;
  outline: none;
  transition: border-color 0.2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--burgundy);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-submit { margin-top: var(--s-3); }

@media (max-width: 980px) {
  .two-col .container { grid-template-columns: 1fr; gap: var(--s-4); }
  .two-col-img { aspect-ratio: 4 / 3; max-width: 500px; }
  .two-col.flip .two-col-text { order: 1; }
  .two-col.flip .two-col-img { order: 2; }
  .card-grid-inner { grid-template-columns: 1fr; }
  .card-grid-inner.cols-2 { grid-template-columns: 1fr; }
  .card-grid-inner.cols-3 { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--s-6) + 70px) 0 var(--s-5); }
}