
    #family-hero {
      position: relative;
      padding: 116px 34px 34px;
      background: radial-gradient(ellipse at top, #254737, #0d1511 78%);
      color: var(--cream);
    }
    .family-hero-gallery {
      position: relative;
      width: min(100%, 90svh, 1050px);
      aspect-ratio: 5 / 4;
      margin: 0 auto;
      background: #0d1511;
      box-shadow: 0 24px 64px rgba(0,0,0,0.24);
    }
    .family-hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
      pointer-events: none;
    }
    .family-hero-slide.is-active { opacity: 1; }
    .family-hero-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .family-hero-caption {
      width: min(100%, 1120px);
      margin: 28px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .family-hero-title {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: clamp(40px, 4.6vw, 68px);
      line-height: 1.06;
      color: var(--cream);
    }
    .family-hero-title em { font-style: italic; color: rgba(245,241,235,0.72); }
    .family-hero-controls { display: flex; align-items: center; flex-shrink: 0; gap: 4px; }
    .family-hero-controls[hidden] { display: none; }
    .family-hero-controls button {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--cream);
      cursor: pointer;
    }
    .family-hero-controls button:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
    .family-hero-dot::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(245,241,235,0.35);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .family-hero-dot[aria-pressed="true"]::before { background: var(--brass-lt); transform: scale(1.35); }
    .family-hero-controls .family-hero-toggle { margin-left: 8px; border: 1px solid rgba(245,241,235,0.3); }
    .family-hero-toggle svg { width: 16px; height: 16px; fill: currentColor; }
    .family-hero-toggle .play-icon { display: none; }
    .family-hero-toggle[aria-pressed="true"] .pause-icon { display: none; }
    .family-hero-toggle[aria-pressed="true"] .play-icon { display: block; }
    @media (max-width: 1120px) {
      #family-hero { padding-top: 234px; }
    }
    @media (max-width: 900px) {
      #family-hero { padding-top: 166px; }
    }
    @media (max-width: 760px) {
      #family-hero { padding: 162px 16px 28px; }
      .family-hero-gallery { width: 100%; }
      .family-hero-caption { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
      .family-hero-title { font-size: clamp(36px, 8vw, 48px); }
      .family-hero-controls { align-self: flex-end; }
    }
    @media (prefers-reduced-motion: reduce) {
      .family-hero-slide, .family-hero-dot::before { transition: none; }
    }
    #family-intro {
      background: var(--cream);
      border-bottom: 1px solid var(--border);
    }
    .intro-inner {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      align-items: stretch;
    }
    .intro-copy {
      padding: 112px 64px 104px 52px;
    }
    .section-kicker { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage); margin-bottom: 16px; }
    .intro-headline {
      font-family: var(--font-display);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 300;
      line-height: 1.08;
      color: var(--forest);
      letter-spacing: -0.01em;
      margin-bottom: 24px;
      max-width: 10ch;
    }
    .intro-headline em { font-style: italic; color: rgba(27,67,50,0.58); }
    .intro-body { max-width: 41ch; margin: 0 0 20px; font-size: 15px; line-height: 1.85; color: var(--muted); }
    .intro-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 28px;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(181,137,42,0.4);
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brass);
      transition: border-color 0.2s ease;
    }
    .intro-link:hover, .intro-link:focus-visible { border-color: var(--brass); }
    .intro-link-arrow { transition: transform 0.25s ease; }
    .intro-link:hover .intro-link-arrow, .intro-link:focus-visible .intro-link-arrow { transform: translateX(4px); }
    .intro-media {
      position: relative;
      min-height: 680px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 38px 32px;
      overflow: hidden;
      background:
        radial-gradient(circle at 38% 42%, rgba(28,57,44,0.42) 0%, rgba(12,27,20,0.3) 36%, rgba(5,12,9,0) 66%),
        #07100c;
    }
    .intro-media > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 53%;
      filter: saturate(0.76) contrast(1.04) brightness(0.78);
    }
    .intro-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(4,8,7,0.5) 0%, rgba(4,8,7,0.16) 42%, rgba(4,8,7,0.6) 100%),
        linear-gradient(0deg, rgba(4,8,7,0.62) 0%, rgba(4,8,7,0.12) 44%, rgba(4,8,7,0.28) 100%);
    }
    .intro-points {
      position: relative;
      z-index: 2;
      width: min(640px, 84%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 0 auto;
    }
    .intro-point {
      min-height: 138px;
      padding: 22px 24px;
      border: 1px solid rgba(245,241,235,0.38);
      background: linear-gradient(180deg, rgba(245,241,235,0.72) 0%, rgba(245,241,235,0.58) 100%);
      backdrop-filter: blur(18px) saturate(135%);
      box-shadow: 0 18px 36px rgba(6,12,9,0.18);
      transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    .intro-point:hover {
      transform: translateY(-3px);
      border-color: rgba(212,168,75,0.6);
      background: linear-gradient(180deg, rgba(245,241,235,0.88) 0%, rgba(245,241,235,0.74) 100%);
      box-shadow: 0 22px 42px rgba(6,12,9,0.24);
    }
    .intro-point-label { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; color: rgba(13,21,17,0.92); transition: color 0.3s ease; }
    .intro-point:hover .intro-point-label { color: var(--forest); }
    .intro-media.fade-up:not(.visible) .intro-point { opacity: 0; }
    .intro-media.fade-up.visible .intro-point { animation: intro-point-rise 0.8s cubic-bezier(0.16,1,0.3,1) backwards; }
    .intro-media.fade-up.visible .intro-point:nth-child(2) { animation-delay: 0.12s; }
    .intro-media.fade-up.visible .intro-point:nth-child(3) { animation-delay: 0.24s; }
    .intro-media.fade-up.visible .intro-point:nth-child(4) { animation-delay: 0.36s; }
    @keyframes intro-point-rise {
      from { opacity: 0; transform: translate3d(0, 18px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .intro-point-copy { font-size: 13px; line-height: 1.72; color: rgba(27,67,50,0.82); }
    .intro-caption {
      position: absolute;
      left: 32px;
      bottom: 30px;
      z-index: 2;
      max-width: 34ch;
      font-size: 11px;
      line-height: 1.75;
      color: rgba(245,241,235,0.86);
      text-shadow: 0 2px 18px rgba(0,0,0,0.22);
    }
    @media (max-width: 900px) {
      .intro-inner { grid-template-columns: 1fr; }
      .intro-copy { padding: 64px 44px 60px; }
      .intro-media { min-height: 720px; padding: 30px 28px; }
      .intro-points { width: min(620px, calc(100% - 56px)); gap: 14px; }
    }
    @media (max-width: 760px) {
      .intro-copy { padding: 44px 24px 48px; }
      .intro-media { min-height: 620px; padding: 20px; align-items: flex-end; }
      .intro-points { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 12px; margin-bottom: 50px; }
      .intro-point { min-height: 0; padding: 18px 18px 17px; }
      .intro-point-label { font-size: 11px; }
      .intro-caption { left: 20px; right: 20px; top: 20px; bottom: auto; max-width: 28ch; }
    }
    #roster { background: var(--cream); overflow: hidden; }
    .roster-row {
      position: relative;
      isolation: isolate;
      max-width: 1240px;
      margin: 0 auto;
      padding: 84px 52px;
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 72px;
      border-bottom: 1px solid var(--border);
    }
    .roster-row::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 0 calc(50% - 50vw);
      background: var(--cream);
    }
    .roster-row:nth-child(even)::before { background: #ECE7DE; }
    .roster-row:last-child { border-bottom: none; }
    .roster-row[id] { scroll-margin-top: 110px; }
    #roster .roster-row:target .fade-up { opacity: 1; transform: none; transition: none; }
    .roster-row:focus { outline: none; }
    .roster-row.flip { grid-template-columns: 1fr 340px; }
    .roster-row.flip .roster-photo { order: 2; }
    .roster-row.flip .roster-content { order: 1; }
    .roster-photo {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: var(--cream-warm);
      box-shadow: 0 20px 44px rgba(20,28,22,0.14);
    }
    .roster-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
    .roster-photo:hover img { transform: scale(1.045); }
    .roster-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(181,137,42,0.22);
      transition: border-color 0.35s ease;
      pointer-events: none;
    }
    .roster-photo:hover::after { border-color: rgba(181,137,42,0.55); }
    .roster-content { display: flex; flex-direction: column; justify-content: center; }
    .roster-name {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(28px, 2.6vw, 38px);
      line-height: 1.15;
      color: var(--forest);
      letter-spacing: -0.01em;
    }
    .roster-title {
      margin-top: 8px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brass);
    }
    .roster-title::after {
      content: '';
      display: block;
      width: 42px;
      height: 1px;
      margin-top: 14px;
      background: var(--brass);
      opacity: 0.55;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.35s;
    }
    .roster-content.fade-up.visible .roster-title::after { transform: scaleX(1); }
    .roster-row .roster-photo.fade-up { transform: translate3d(-28px, 24px, 0); }
    .roster-row.flip .roster-photo.fade-up { transform: translate3d(28px, 24px, 0); }
    .roster-row .roster-photo.fade-up.visible,
    .roster-row.flip .roster-photo.fade-up.visible { transform: translate3d(0, 0, 0); }
    .roster-icons { display: flex; align-items: center; gap: 10px; margin: 22px 0 26px; }
    .roster-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(27,67,50,0.2);
      background: var(--cream-warm);
      color: var(--forest);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .roster-icon svg { width: 16px; height: 16px; fill: currentColor; }
    .roster-icon:hover, .roster-icon:focus-visible {
      background: var(--forest);
      border-color: var(--forest);
      color: var(--cream);
      transform: translateY(-2px);
    }
    .roster-bio p { max-width: 62ch; font-size: 14px; line-height: 1.85; color: var(--muted); margin-bottom: 14px; }
    .roster-bio p:last-child { margin-bottom: 0; }
    .roster-bio .roster-disclosure { font-size: 12px; line-height: 1.55; color: rgba(28,28,28,0.62); }
    .roster-bio .roster-disclosure a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }

    @media (max-width: 1024px) {
      .roster-row, .roster-row.flip {
        grid-template-columns: minmax(0, 220px);
        justify-content: center;
        text-align: center;
        padding: 64px 32px;
        gap: 36px;
      }
      .roster-row .roster-photo, .roster-row.flip .roster-photo { order: 1; margin: 0 auto; }
      .roster-row .roster-content, .roster-row.flip .roster-content { order: 2; align-items: center; }
      .roster-icons { justify-content: center; }
      .roster-bio p { margin-left: auto; margin-right: auto; }
      .roster-title::after { margin-left: auto; margin-right: auto; transform-origin: center; }
    }
    @media (max-width: 480px) {
      .roster-row, .roster-row.flip { padding: 52px 22px; grid-template-columns: minmax(0, 180px); }
    }
    #cta { background: #112b20; padding: 110px 52px; text-align: center; position: relative; overflow: hidden; }
    #cta::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(181,137,42,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(181,137,42,0.03) 1px, transparent 1px); background-size: 60px 60px; animation: cta-grid-drift 60s linear infinite; }
    @keyframes cta-grid-drift {
      from { background-position: 0 0; }
      to   { background-position: 60px 60px; }
    }
    .cta-headline { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 300; line-height: 1.1; color: var(--cream); letter-spacing: -0.01em; margin-bottom: 20px; }
    .cta-body { font-size: 15px; line-height: 1.8; color: rgba(245,241,235,0.5); margin-bottom: 40px; }
    #video-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
      background: rgba(8,12,10,0.86);
      backdrop-filter: blur(6px);
    }
    #video-modal.open { display: flex; animation: modal-backdrop-in 0.35s ease both; }
    #video-modal.open .video-modal-frame { animation: modal-frame-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
    @keyframes modal-backdrop-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes modal-frame-in {
      from { opacity: 0; transform: scale(0.96) translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
    .video-modal-frame {
      position: relative;
      width: min(920px, 100%);
      aspect-ratio: 16 / 9;
      background: #000;
      box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    }
    .video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .video-modal-close {
      position: absolute;
      top: -44px;
      right: 0;
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245,241,235,0.8);
      border: 1px solid rgba(245,241,235,0.3);
      padding: 8px 16px;
      cursor: pointer;
      background: transparent;
    }
    .video-modal-close:hover { color: #fff; border-color: rgba(245,241,235,0.6); }
    .fade-up {
      --motion-y: 24px;
      opacity: 0;
      transform: translate3d(0, var(--motion-y), 0);
      transition: opacity 0.84s cubic-bezier(0.16,1,0.3,1), transform 0.84s cubic-bezier(0.16,1,0.3,1);
      will-change: transform, opacity;
    }
    .fade-up.visible { opacity: 1; transform: translate3d(0,0,0); }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .fade-up { transition: none !important; opacity: 1 !important; transform: none !important; }
      .intro-media.fade-up .intro-point { animation: none !important; opacity: 1 !important; }
      .roster-title::after { transition: none !important; transform: scaleX(1) !important; }
      #video-modal.open, #video-modal.open .video-modal-frame { animation: none !important; }
      #cta::before { animation: none !important; }
    }
