<!DOCTYPE html>
<!-- mf -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maison Forge · Preview</title>
<meta name="description" content="An autonomous team of eleven luminaries that work while you sleep.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/menu-styles.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>

<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }

  :root {
    --navy: #1C1C3A;
    --gold: #E2C68D;
    --ivory: #F4EFE7;
    --ivory-warm: #EDE4D2;
    --chocolate: #2A1A13;
    --chocolate-warm: #69451D;
    --white: #FFFFFF;
  }

  body.loading { overflow: hidden; height: 100vh; }
  html { overflow-x: hidden; max-width: 100vw; }
  body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Inter', Arial, sans-serif;
    background: var(--navy);
    color: var(--gold);
    overflow-x: hidden;
    max-width: 100vw;
    line-height: 1.6;
    cursor: none;
  }
  ::selection { background: var(--gold); color: var(--navy); }
  a { color: inherit; text-decoration: none; }

  /* Custom cursor */
  .cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .cursor.expanded { width: 56px; height: 56px; opacity: 0.5; }
  @media (max-width: 1024px) {
    body { cursor: auto; }
    .cursor { display: none; }
  }

  /* GSAP initial state — nav hidden until scroll-triggered reveal */
  .nav-mark, .nav-links { opacity: 0; transform: translateY(-16px); }
  .nav-burger { opacity: 0; transform: translateY(-16px); }

  @media (max-width: 768px) {
    /* ── MOBILE FOUNDER ─────────────────────────────── */
    #founder .founder-portrait { display: none !important; }
    #founder .founder-body-row { display: block; }
    #founder .founder-text { width: 100%; flex: none; }

    /* ── MOBILE SPACING ─────────────────────────────── */
    #hero { padding: 120px 24px 0 !important; display: block; overflow: hidden; }
    /* ── HERO ANIMATION FULL-BLEED FIX ─────────────── */
    /* #aries must escape SVG's own clipping box so scatter animation
       reaches the viewport edges. overflow:visible lets it bleed outside
       the SVG viewport; #hero's overflow:hidden is the final clip. */
    #aries {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100% !important;
      overflow: visible !important;
      z-index: 0;
    }
    .hero-pull-quote { padding: 60px 24px 48px; }
    .hero-pull-quote::before { display: none; }
    .hero-pull-quote::after { bottom: 20px; }
    .section { padding: 52px 24px !important; }
    #begin { padding: 52px 24px !important; }
    #ritual { padding: 52px 24px !important; }
    .hpq-flourish { margin-top: 32px; }
    .section-ornament { margin-top: 28px !important; }
    /* Cap all inline margin-tops inside sections */
    .section p[style], .section .body-text[style], .section .subline[style] {
      margin-top: 20px !important;
      margin-bottom: 0 !important;
    }

    /* Constellation wrappers → smooth gradient bands on mobile (SVGs hidden) */
    .constellation-panel,
    .aquila-wrap,
    .bota-wrap,
    .lyra-wrap,
    .corona-wrap { height: 160px !important; min-height: unset !important; overflow: hidden !important; display: block !important; }
    .constellation-panel svg, .aquila-wrap svg, .bota-wrap svg, .lyra-wrap svg, .corona-wrap svg { display: none !important; }

    /* Hide decorative background objects on mobile */
    #ritual-face-svg { display: none; }
    /* Hero video stays on mobile — plays behind the text */
    /* Pull-quote gradient ends at navy (#1C1C3A) — matches luminaries bg flush */
    .hero-pull-quote { background: linear-gradient(180deg, #010521 0%, #1C1C3A 100%) !important; margin-bottom: 0 !important; }
    #luminaries { margin-top: 0 !important; }

    /* Collapse section-to-section fades to smoother gradient */
    .sect-fade { height: 60px; }

    /* Quote band → Luminaries: pull-quote now ends at navy, ::before is redundant and causes a seam */
    #luminaries::before { display: none; }

    /* À la carte: layout and sub-label fixes on mobile */
    .category-item { flex-wrap: nowrap; gap: 12px; }
    .category-item .name { flex: 1 1 auto; min-width: 0; }
    .category-item .name .sub { display: block; margin-left: 0; margin-top: 4px; font-size: 13px; white-space: nowrap; }
    .category-item .price { flex: 0 0 auto; white-space: nowrap; }
    /* À la carte frame: flush to section edge on mobile */
    .alc-frame { padding: 32px 0 24px !important; }
    #begin .subline-group { font-size: 20px !important; }
    #cold-open { height: 960px; }
    .scroll-cue { bottom: 300px; }
    .hero-tagline { font-size: 26px !important; bottom: 8px; width: 88%; white-space: normal; line-height: 1.8; color: rgba(255,255,255,0.75); }
    .hero-tagline .tagline-star { display: none; }
    .hero-tagline .tagline-phrase { display: block; }
    /* Kelly bag: reflow on mobile */
    img[src*="kelly"] {
      position: relative !important;
      transform: none !important;
      top: auto !important; right: auto !important; bottom: auto !important;
      width: 80% !important; max-width: 320px !important;
      display: block !important; margin: 32px auto 0 !important;
    }
  }


  /* ============================================================ */
  /* COLD OPEN                                                     */
  /* ============================================================ */
  #cold-open {
    position: relative;
    width: 100%;
    height: 840px;
    background: #010622;
    overflow: hidden;
  }
  #universe, #supporting {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  #universe .tiny-star { fill: var(--gold); opacity: 0; will-change: opacity; }
  #supporting circle { fill: var(--gold); opacity: 0; will-change: opacity; }
  @keyframes star-fade-in {
    0% { opacity: 0; }
    100% { opacity: var(--star-target, 0.7); }
  }

  /* Loader — Van Gogh quote + hairline bar */
  #loader {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 760px;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 1.0s ease;
  }
  #loader.in { opacity: 1; }
  #loader .quote {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 1.9vw, 28px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--gold);
    margin-bottom: 32px;
  }
  #loader .bar-wrap {
    width: min(400px, 70%);
    margin: 0 auto;
    position: relative;
  }
  #loader .bar-track { width: 100%; height: 1px; background: var(--gold); opacity: 0.25; }
  #loader .bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 1px;
    background: var(--gold);
    width: 0%;
    will-change: width;
    transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  #stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #mark-wrap {
    position: relative;
    width: 320px;
    height: 220px;
    will-change: transform;
  }
  #mark { width: 100%; height: 100%; overflow: visible; }
  #mark .line {
    stroke: var(--white);
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    will-change: stroke-dashoffset, opacity;
  }
  #mark .vertex {
    fill: var(--gold);
    opacity: 0;
    will-change: opacity, transform;
  }
  #wordmark-wrap {
    overflow: hidden;
    margin-top: 8px;
    will-change: transform;
  }
  #wordmark {
    text-align: center;
    transform: translateY(110%);
    will-change: transform;
  }
  #wordmark .word-mark {
    font-size: clamp(36px, 5.4vw, 64px);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold);
    line-height: 1;
  }
  #wordmark .ai-callout { color: var(--white); }
  #wordmark .rule {
    width: clamp(260px, 36vw, 460px);
    height: 1px;
    background: var(--gold);
    margin: 22px auto;
    transform: scaleX(0);
    transform-origin: center;
    will-change: transform;
  }
  #wordmark .city {
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 400;
    letter-spacing: 0.55em;
    color: var(--gold);
    padding-left: 0.55em;
  }

  /* Hero tagline — sits inside #cold-open, right below SCROLL line */
  .hero-tagline {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
    text-align: center;
    white-space: nowrap;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
  }
  .hero-tagline .tagline-star {
    color: var(--gold, #C9A84C);
    font-style: normal;
    margin: 0 10px;
    font-size: 0.75em;
    vertical-align: 0.15em;
  }

  .scroll-cue {
    position: absolute;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    text-align: center;
    will-change: opacity, transform;
    z-index: 5;
    pointer-events: none;
  }
  .scroll-cue::after {
    content: '';
    display: block;
    width: 1px;
    height: 36px;
    background: var(--gold);
    margin: 14px auto 0;
    opacity: 0.5;
  }

  /* ============================================================ */
  /* HERO — navy → ivory gradient, Virgo in background             */
  /* ============================================================ */
  #hero {
    position: relative;
    background: #010521;
    color: var(--ivory);
    display: flex;
    align-items: center;
    padding: 360px 56px 80px;
    overflow: hidden;
  }
  #hero .hero-video-wrap {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    z-index: 0;
    pointer-events: none;
  }
  #hero .hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.18;
    display: block;
  }
  @media (max-width: 768px) {
    #hero .hero-video-wrap {
      width: 100%;
      top: 35%;
      padding: 0 24px;
      box-sizing: border-box;
      overflow: hidden;
    }
    #hero .hero-video-wrap video {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      margin: 0 auto;
    }
  }

  #aries {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 540px;
    pointer-events: none;
    will-change: opacity, transform;
  }
  #aries .a-line {
    stroke: var(--gold);
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    opacity: 0;
    will-change: opacity, stroke-dashoffset;
  }
  #aries .a-star {
    fill: var(--gold);
    opacity: 0.7;
    will-change: opacity;
  }
  #aries .a-star.bright {
    fill: #FFFFFF;
    opacity: 0.9;
  }

  /* CORONA constellation divider (founder→board) */
  .corona-wrap { position: relative; height: 360px; display: block; pointer-events: none; }
  #corona {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  }
  #corona .c-line {
    stroke: var(--gold); stroke-width: 1.6; fill: none; stroke-linecap: round;
    opacity: 0; will-change: opacity, stroke-dashoffset;
  }
  #corona .c-star { fill: var(--gold); opacity: 0.75; will-change: opacity; }
  #corona .c-star.bright { fill: #FFFFFF; opacity: 0.95; }

  /* CONSTELLATION PANEL — luminaries → founder transition */
  .constellation-panel {
    position: relative;
    width: 100%;
    min-height: 400px;
    background: linear-gradient(180deg, #02051f 0%, #02051f 30%, #6b6f6d 100%);
    overflow: visible;
  }
  .constellation-panel .constellation {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%; height: 100%;
    z-index: 2; pointer-events: none;
  }
  #founder { background: #6b6f6d !important; }
  #scorpio {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  }
  #scorpio .s-line {
    stroke: var(--gold); stroke-width: 4; fill: none; stroke-linecap: round;
    opacity: 0; will-change: opacity, stroke-dashoffset;
  }
  #scorpio .s-star { fill: var(--gold); opacity: 0.7; will-change: opacity; }
  #scorpio .s-star.bright { fill: #FFFFFF; opacity: 0.9; }

  /* Section color-blend transitions */
  .sect-fade { height: 150px; display: block; pointer-events: none; }

  /* Aquila constellation divider */
  .aquila-wrap { position: relative; height: 360px; display: block; pointer-events: none; background: linear-gradient(to bottom, #6a6f6d, var(--navy)); overflow: hidden; }
  #aquila .q-line { stroke: #C9A84C; stroke-width: 2.2; fill: none; stroke-linecap: round; opacity: 0; }
  #aquila .q-star { fill: #C9A84C; opacity: 0; }
  #aquila .q-star.bright { fill: #ffffff; }

  /* Bota (boot) constellation divider */
  .bota-wrap { position: relative; height: 360px; display: block; pointer-events: none; background: linear-gradient(to bottom, var(--navy), #6a6f6d); overflow: hidden; }
  #bota .b-line { stroke: #C9A84C; stroke-width: 2.2; fill: none; stroke-linecap: round; opacity: 0; }
  #bota .b-star { fill: #C9A84C; opacity: 0; }
  #bota .b-star.bright { fill: #ffffff; }

  /* Lyra constellation divider */
  .lyra-wrap { position: relative; height: 320px; display: block; pointer-events: none; background: linear-gradient(to bottom, #d74933, #31729e); overflow: hidden; }
  #lyra .l-line { stroke: #C9A84C; stroke-width: 1.8; fill: none; stroke-linecap: round; opacity: 0; }
  #lyra .l-star { fill: #C9A84C; opacity: 0; }
  #lyra .l-star.bright { fill: #ffffff; }
  .founder-body-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  .founder-text { flex: 0 0 40%; }
  #founder .founder-portrait {
    flex: 0 0 60%;
    width: 60%;
    height: auto;
    object-fit: contain;
    object-position: left top;
    opacity: 1;
    pointer-events: none;
    margin-top: -80px;
    align-self: flex-start;
  }
  #founder { padding-bottom: 48px; }
  .sect-fade.n-s { background: linear-gradient(to bottom, #1C1C3A, #656F6C); }
  .sect-fade.s-n { background: linear-gradient(to bottom, #656F6C, #1C1C3A); }
  .sect-fade.n-g { background: linear-gradient(to bottom, #1C1C3A, #E2C68D); }
  .sect-fade.g-n { background: linear-gradient(to bottom, #E2C68D, #1C1C3A); }

  .container {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .label {
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--chocolate-warm);
    margin-bottom: 48px;
    overflow: hidden;
  }
  .label .inner {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
  }
  .display-xl {
    font-size: clamp(44px, 7.2vw, 124px);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 64px;
    max-width: 16ch;
  }
  .display-xl em {
    font-style: normal;
    color: var(--chocolate-warm);
  }
  .word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.0;
  }
  .word-wrap .word {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
    padding-bottom: 0.14em;
  }
  .subline {
    max-width: 720px;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.6;
    color: var(--chocolate);
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
  }

  @media (max-width: 768px) {
    #hero { padding: 200px 28px 180px; }
    #mark-wrap { width: 260px; height: 180px; }
    .display-xl { font-size: clamp(38px, 11vw, 64px); max-width: 14ch; }
    /* #aries mobile overrides live in the earlier block with !important */
    #loader .quote { font-size: 22px; }
    #loader .attribution { font-size: 19px; }
  }

  /* Hero text overrides for dark background */
  #hero .label { color: rgba(226,198,141,0.75); }
  #hero .display-xl { font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif; font-weight: 400; }
  #hero .display-xl em { color: #8efbb9; font-style: italic; }
  #hero .subline { color: rgba(244,239,231,0.88); }

  /* HERO PULL QUOTE — Grand Central pale mint band, sits between hero and luminaries */
  .hero-pull-quote {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    background: linear-gradient(180deg, #010521 0%, #1C1C3A 100%);
    color: #FFFFFF;
    padding: 160px 56px 240px;
    text-align: center;
    overflow: hidden;
  }
  .hero-pull-quote::before,
  .hero-pull-quote::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: rgba(244,239,231,0.55);
  }
  .hero-pull-quote::before { top: 64px; }
  .hero-pull-quote::after { bottom: 64px; }
  .hpq-inner {
    max-width: min(1500px, 90vw);
    margin: 0 auto;
  }
  .hpq-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 56px;
    margin-bottom: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: 500;
  }
  .hpq-attribution .hpq-name { color: #FFFFFF; }
  .hpq-attribution .hpq-role { color: #E8DFC9; }   /* warm beige */
  .hpq-attribution .hpq-divider { color: #E8DFC9; font-size: 9px; opacity: 0.85; }

  .hero-pull-quote .hpq-line {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 42px);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: #FFFFFF;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Middle line gets the warm beige to break up the white */
  .hero-pull-quote .hpq-line:nth-of-type(2) { color: #EFE3C8; }
  .hero-pull-quote .hpq-open { margin-top: 0; }
  .hero-pull-quote .hpq-close { margin-bottom: 0; }

  .hpq-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 72px;
  }
  .hpq-flourish .hpq-rule {
    width: 80px;
    height: 1px;
    background: rgba(244,239,231,0.6);
  }
  .hpq-flourish .hpq-mark {
    color: #EFE3C8;
    font-size: 14px;
    opacity: 0.9;
  }

  /* PULL QUOTE TWINKLING STARS */
  .hpq-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .hpq-inner { position: relative; z-index: 1; }
  @keyframes hpq-twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--pk, 0.7); }
  }
  .hpq-stars circle {
    animation: hpq-twinkle var(--dur, 3s) ease-in-out var(--dly, 0s) infinite;
  }

  @media (max-width: 768px) {
    .hero-pull-quote { padding: 96px 28px 110px; margin-top: 0; margin-bottom: 0; }
    .hero-pull-quote::before { top: 44px; }
    .hero-pull-quote::after { bottom: 44px; }
    .hpq-attribution { gap: 12px; font-size: 10px; margin-bottom: 44px; }
    .hpq-flourish { margin-top: 52px; gap: 14px; }
    .hpq-flourish .hpq-rule { width: 48px; }
  }

  /* SECTION SHELL */
  :root {
    --mint: #B8D4C2;
    --mint-deep: #6B9B85;
    --mint-dark: #2A4438;
    --mint-text: #1F3328;
  }
  .section { position: relative; padding: 110px 56px; }
  .section.navy { background: var(--navy); color: var(--ivory); }
  .section.navy .eyebrow-label { color: #f7ffb7; }
  .section.ivory { background: var(--ivory); color: var(--chocolate); }
  .section.ivory .eyebrow-label { color: #f7ffb7; }
  .section.mint { background: var(--mint); color: #FFFFFF; }
  .section.mint .eyebrow-label { color: #f7ffb7; }
  .section.mint .headline { color: #FFFFFF; }
  .section.mint .headline em { color: #EFE3C8; }

  .section-stars {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-stars.in { opacity: 1; }
  .section.navy .section-stars { display: none; }
  .section.ivory .section-stars line { stroke: var(--chocolate); stroke-width: 1; opacity: 0.16; fill: none; stroke-linecap: round; }
  .section.ivory .section-stars circle { fill: var(--chocolate); opacity: 0.32; }
  .section.mint .section-stars line { stroke: #FFFFFF; stroke-width: 1.1; opacity: 0.32; fill: none; stroke-linecap: round; }
  .section.mint .section-stars circle { fill: #FFFFFF; opacity: 0.55; }

  /* SAGE sections — #656F6C */
  .section.sage { background: #6a6f6d; color: var(--ivory); }
  .diff-spotlight {
    position: absolute; width: 680px; height: 680px; border-radius: 50%;
    background: radial-gradient(circle, #e93924 0%, #e93924 68%, transparent 69%);
    pointer-events: none; z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: spotlight-rove 28s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes spotlight-rove {
    0%   { transform: translate(-50%, -50%) translate(0vw, -38%); }
    12%  { transform: translate(-50%, -50%) translate(38vw, -18%); }
    25%  { transform: translate(-50%, -50%) translate(28vw, 22%); }
    38%  { transform: translate(-50%, -50%) translate(-10vw, 30%); }
    50%  { transform: translate(-50%, -50%) translate(-38vw, 5%); }
    62%  { transform: translate(-50%, -50%) translate(-28vw, -25%); }
    75%  { transform: translate(-50%, -50%) translate(8vw, -30%); }
    88%  { transform: translate(-50%, -50%) translate(32vw, 10%); }
    100% { transform: translate(-50%, -50%) translate(0vw, -38%); }
  }
  #difference { background: #31729e; }
  #pricing { background: #272d27; }
  #for { background: linear-gradient(to bottom, #E2C68D 0%, #7a6030 30%, #2a2440 70%, var(--navy) 100%); }
  #for .headline { font-size: clamp(56px, 8vw, 130px); max-width: none; }
  #for .eyebrow-label { font-size: 14px; letter-spacing: 0.5em; }
  #difference .container { text-align: center; }
  #difference .body-text { max-width: 74ch; margin-left: auto; margin-right: auto; }
  #difference .headline { font-size: clamp(60px, 8.5vw, 140px); max-width: none; }
  #difference > .container > .eyebrow-label {
    font-size: clamp(18px, 2vw, 28px); letter-spacing: 0.28em;
  }
  .diff-title {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(44px, 5.5vw, 90px); font-weight: 400; font-style: normal;
    color: #f7ffb7; letter-spacing: 0.003em; line-height: 1.05;
    margin-bottom: 20px;
  }
  .diff-title em { font-style: italic; }
  .section.sage .eyebrow-label { color: #f7ffb7; }
  .section.sage .headline { color: #FFFFFF; }
  .section.sage .headline em { color: #EFE3C8; }
  #difference .headline em { color: #f6ff00 !important; }
  #difference .diff-title { color: #f6ff00 !important; }
  #difference .eyebrow-label { color: #f6ff00 !important; }
  /* Gradient bridge: board (#1e2445) → difference (#31729e) */
  .section.sage .section-stars line { stroke: #FFFFFF; stroke-width: 1.1; opacity: 0.07; fill: none; stroke-linecap: round; }
  .section.sage .section-stars circle { fill: #FFFFFF; opacity: 0.14; }
  #difference .section-stars circle { fill: #C9A84C; opacity: 0.08; }
  #difference .section-stars circle.twinkle-1 { animation: diff-twinkle 3.8s ease-in-out infinite; }
  #difference .section-stars circle.twinkle-2 { animation: diff-twinkle 4.6s ease-in-out infinite 0.9s; }
  #difference .section-stars circle.twinkle-3 { animation: diff-twinkle 3.2s ease-in-out infinite 1.8s; }
  #difference .section-stars circle.twinkle-4 { animation: diff-twinkle 5.1s ease-in-out infinite 0.4s; }
  #difference .section-stars circle.twinkle-5 { animation: diff-twinkle 4.0s ease-in-out infinite 2.3s; }
  #difference .section-stars circle.twinkle-6 { animation: diff-twinkle 3.5s ease-in-out infinite 1.2s; }
  #difference .section-stars circle.twinkle-7 { animation: diff-twinkle 4.8s ease-in-out infinite 0.6s; }
  #difference .section-stars circle.twinkle-8 { animation: diff-twinkle 3.9s ease-in-out infinite 2.8s; }
  @keyframes diff-twinkle {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.75; }
  }
  .section.sage .read-more { color: #EFE3C8; border-color: rgba(239,227,200,0.55); }
  .section.sage .read-more:hover { color: #FFFFFF; }
  .section.sage .body-text { color: rgba(255,255,255,0.9); }
  .section.sage p { color: rgba(255,255,255,0.9); }
  .section.sage .section-ornament { color: #EFE3C8; }
  .section.sage .cta-button:hover { background: rgba(255,255,255,0.15); color: #FFFFFF; border-color: rgba(255,255,255,0.6); }
  /* Sage — Founder */
  .section.sage .press-marquee { border-color: rgba(255,255,255,0.2); }
  .section.sage .press-marquee-track { color: rgba(255,255,255,0.82); }
  .section.sage .press-marquee-track .diamond { color: #EFE3C8; }
  .section.sage .founder-signature { color: rgba(255,255,255,0.65); }
  /* Sage — Pricing */
  .section.sage .tier-card { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
  .section.sage .tier-card:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
  .section.sage .tier-card.recommended { background: #49514d !important; border-color: var(--gold) !important; }
  .section.sage .tier-number { color: #f7ffb7; }
  .section.sage .tier-name { color: #FFFFFF; }
  .section.sage .tier-desc { color: rgba(255,255,255,0.78); }
  .section.sage .tier-card ul li { color: rgba(255,255,255,0.85); }
  .section.sage .tier-card ul li::before { color: #EFE3C8; }
  .section.sage .a-la-carte-intro { color: rgba(255,255,255,0.82); }
  .section.sage .category-label { color: #f7ffb7; border-bottom-color: rgba(201,168,76,0.3); }
  .section.sage .category-item .name { color: #FFFFFF; }
  .section.sage .category-item .name .sub { color: rgba(255,255,255,0.6); }
  .section.sage .category-item .price { color: #EFE3C8; }
  .section.sage .category-item { border-color: rgba(255,255,255,0.15); }

  /* GOLD sections — var(--gold) */
  .section.gold { background: linear-gradient(to bottom, var(--navy) 0%, #2a2440 30%, #7a6030 70%, var(--gold) 100%); color: var(--ivory); }
  .section.gold .eyebrow-label { color: rgba(244,239,231,0.55); }
  .section.gold .headline { color: var(--ivory); }
  .section.gold .headline em { color: var(--gold); }
  .section.gold .section-stars line { stroke: rgba(255,255,255,0.25); stroke-width: 1; opacity: 1; fill: none; stroke-linecap: round; }
  .section.gold .section-stars circle { fill: rgba(255,255,255,0.5); opacity: 1; }

  .section.gold .section-ornament { color: var(--ivory); opacity: 0.4; }
  .section.gold .ritual-open { color: var(--ivory); }
  .section.gold .ritual-body { color: rgba(244,239,231,0.8); }
  .section.gold .ritual-close { color: var(--ivory); border-top-color: rgba(244,239,231,0.18); }

  /* Navy for-list (Who This Is For) */
  .section.navy .for-list li {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.5;
    padding: 32px 0 32px 52px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    position: relative;
    color: var(--ivory); font-weight: 400;
  }
  .section.navy .for-list li::before {
    content: '\2726';
    position: absolute; left: 0; top: 40px;
    color: var(--gold); font-size: 14px;
  }

  .container { max-width: 1320px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
  .eyebrow-label {
    font-size: 14px; letter-spacing: 0.42em; text-transform: uppercase;
    font-weight: 500; margin-bottom: 56px; display: block;
  }
  .headline {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(40px, 5.6vw, 88px);
    font-weight: 400; line-height: 1.05; letter-spacing: 0.003em;
    margin-bottom: 72px; max-width: 20ch;
  }
  .headline em { font-style: italic; }
  .body-text {
    font-size: clamp(16px, 1.15vw, 19px); line-height: 1.75;
    max-width: 68ch; margin-bottom: 28px; font-weight: 300;
  }
  .intro-text {
    font-size: clamp(20px, 1.6vw, 26px); line-height: 1.7;
    max-width: 72ch; margin-bottom: 80px; font-weight: 300;
  }
  .section-ornament {
    text-align: center; font-size: 18px; letter-spacing: 0.4em;
    margin-top: 140px; opacity: 0.5;
  }

  .cta-button {
    display: inline-block; padding: 22px 56px; border: 1px solid currentColor;
    font-size: 11px; letter-spacing: 0.38em; text-transform: uppercase;
    font-weight: 500;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    animation: btn-pulse 2.8s ease-in-out infinite;
  background: #4c271c;
}
  .cta-button:hover { animation: none; }
  @keyframes btn-pulse {
    0%, 100% { background: #4c271c; }
    50% { background: rgba(201,168,76,0.18); }
  }
  .cta-button .arrow { display: inline-block; margin-left: 14px; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .cta-button:hover .arrow { transform: translateX(8px); }
  .section.navy .cta-button:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
  .section.ivory .cta-button:hover { background: var(--chocolate); color: var(--ivory); border-color: var(--chocolate); }
  .section.mint .cta-button:hover { background: var(--mint-dark); color: var(--mint); border-color: var(--mint-dark); }

  .read-more {
    display: inline-block; font-size: 11px; letter-spacing: 0.32em;
    text-transform: uppercase; font-weight: 500;
    margin-top: 48px; padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: padding 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .read-more:hover { padding-right: 14px; }
  .section.mint .read-more { color: #EFE3C8; border-color: rgba(239,227,200,0.55); }
  .section.mint .read-more:hover { color: #FFFFFF; }
  .section.mint .body-text { color: rgba(255,255,255,0.94); }
  .section.mint p { color: rgba(255,255,255,0.94); }

  /* ── WHAT HAPPENS IN ONE DAY ── */
  .one-day-block { margin-top: 80px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; }
  @media (max-width: 768px) {
    .one-day-title, .one-day-subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  }
  .one-day-block .cta-button { background: #e93924 !important; animation: one-day-btn-pulse 2.8s ease-in-out infinite !important; }
  @keyframes one-day-btn-pulse {
    0%, 100% { background: #e93924; }
    50%       { background: rgba(201,168,76,0.18); }
  }
  .one-day-title { font-size: 26px; letter-spacing: 0.44em; text-transform: uppercase; font-weight: 500; color: #f7ffb7; margin-bottom: 16px; }
  .one-day-subtitle { font-size: clamp(22px, 3vw, 36px); font-weight: 300; color: rgba(244,239,231,0.95); line-height: 1.3; margin-bottom: 48px; }
  .one-day-body { max-width: 740px; margin: 0 auto; text-align: center; }
  .one-day-body p { font-size: 17px; line-height: 1.85; color: rgba(244,239,231,0.72); margin-bottom: 24px; }
  .one-day-body p:last-child { margin-bottom: 0; }

  /* ── THE ROSTER ── */
  .roster-title { font-size: 22px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 500; display: block; color: #f7ffb7; margin-top: 56px; margin-bottom: 0; }
  #roster { padding-top: 80px; padding-bottom: 80px; }
  .roster-table { margin-top: 48px; width: 100%; border-top: 1px solid rgba(201,168,76,0.2); }
  .roster-row {
    display: grid;
    grid-template-columns: 90px 180px 1fr;
    align-items: baseline;
    gap: 0 28px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(201,168,76,0.12);
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .roster-row:hover { background: rgba(201,168,76,0.08); }
  .roster-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
  }
  .roster-discipline {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.55);
  }
  .roster-brief {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.02em;
  }
  @media (max-width: 600px) {
    .roster-row { grid-template-columns: 80px 1fr; }
    .roster-brief { display: none; }
  }

  /* LUMINARIES GRID */
  .lum-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    background: rgba(226,198,141,0.18);
    border: 1px solid rgba(226,198,141,0.18);
  }
  /* Column separator dots */
  .lum-card:not(:nth-child(3n))::after,
  .lum-card:nth-child(12)::after {
    content: '\B7\A\B7\A\B7';
    white-space: pre;
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translate(50%, -50%);
    font-size: 20px;
    line-height: 2.2;
    color: rgba(226,198,141,0.55);
    text-align: center;
    z-index: 5;
    pointer-events: none;
  }
  .lum-card:nth-child(13)::after { content: none; }
  .lum-coming-header {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
    font-weight: 500; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgba(142,251,185,0.7);
    padding: 28px 0;
    background: var(--navy);
    border-top: 1px solid rgba(226,198,141,0.12);
    border-bottom: 1px solid rgba(226,198,141,0.12);
  }
  .lum-card {
    background: var(--navy); padding: 40px 32px; position: relative;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .lum-card:hover { background: #21214A; }
  .lum-number {
    font-size: 11px; letter-spacing: 0.42em;
    color: #f7ffb7; opacity: 0.75; margin-bottom: 20px;
    font-weight: 500; text-transform: uppercase;
  }
  .lum-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(22px, 2vw, 28px); font-weight: 300;
    color: var(--ivory); line-height: 1; margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .lum-role {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: #8efbb9; margin-bottom: 18px; font-weight: 500;
  }
  .lum-tagline {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.5;
    color: rgba(244,239,231,0.88); font-style: italic; font-weight: 300;
    margin-bottom: 24px;
    max-width: 36ch;
  }
  .lum-snippet {
    border-left: 1px solid rgba(226,198,141,0.35);
    padding: 6px 0 6px 24px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 15px; line-height: 1.75;
    color: rgba(244,239,231,0.75);
    margin-bottom: 40px; font-weight: 400;
  }
  .lum-snippet .snippet-label {
    display: block; font-size: 10px; letter-spacing: 0.32em;
    color: var(--gold); margin-bottom: 10px;
    text-transform: uppercase; font-style: normal;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  }
  .lum-bullets { list-style: none; margin-bottom: 24px; }
  .lum-bullets li {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px; line-height: 1.6;
    color: rgba(244,239,231,0.78);
    padding-left: 18px; position: relative;
    margin-bottom: 10px; font-weight: 400;
  }
  .lum-bullets li::before {
    content: '\2726'; position: absolute; left: 0; top: 0;
    color: var(--gold); font-size: 10px;
  }
  .lum-price {
    border-top: 1px solid rgba(226,198,141,0.2);
    padding-top: 28px; margin-top: auto;
  }
  .lum-price .compare {
    font-size: 11px; letter-spacing: 0.14em;
    color: rgba(244,239,231,0.5); display: block;
    margin-bottom: 6px; text-transform: uppercase;
  }
  .lum-price .compare-amount {
    font-size: 15px; color: rgba(244,239,231,0.8);
    margin-bottom: 18px; display: block; font-weight: 300;
  }
  .lum-price .our-price {
    font-size: 13px; letter-spacing: 0.14em;
    color: var(--gold); display: block;
    margin-bottom: 6px; text-transform: uppercase;
  }
  .lum-price .our-amount {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: 26px; color: var(--ivory); display: block;
  }
  .lum-read-more {
    display: inline-block; margin-top: 28px;
    font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(226,198,141,0.4);
    padding-bottom: 3px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lum-read-more:hover { border-color: var(--gold); }
  .lum-dossier-link {
    display: inline-block; margin-top: auto; padding-top: 20px;
    font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(226,198,141,0.4);
    padding-bottom: 3px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lum-dossier-link:hover { border-color: var(--gold); }

  @media (max-width: 900px) {
    .lum-grid { grid-template-columns: repeat(2, 1fr); }
    .lum-card { padding: 32px 24px; }
    .lum-card::after { content: none !important; }
  }

  /* FOUNDER PRESS MARQUEE */
  .press-marquee-label {
    text-align: center; font-size: 13px; letter-spacing: 0.45em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    margin-top: 120px; margin-bottom: 24px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500;
  }
  .press-marquee {
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    overflow: hidden; white-space: nowrap;
  }
  .press-marquee.reverse { border-top: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .press-marquee-track {
    display: inline-block;
    animation: marquee 60s linear infinite;
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 1.8vw, 28px);
    letter-spacing: 0.18em; font-weight: 400;
    color: rgba(255,255,255,0.75);
  }
  .press-marquee.reverse .press-marquee-track {
    animation: marquee-reverse 60s linear infinite;
  }
  .press-marquee-track span { margin: 0 40px; }
  .press-marquee-track .diamond { color: rgba(226,198,141,0.6); }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @keyframes marquee-reverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }
  .founder-signature {
    margin-top: 72px; font-size: 11px; letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--chocolate-warm);
  }

  /* MATH — LARGER NUMBERS */
  #math .container { max-width: 960px; }
  .math-table { max-width: 960px; margin: 60px auto; }
  .math-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 32px 0;
    border-bottom: 1px dashed rgba(244,239,231,0.22);
    gap: 32px;
  }
  .math-row .role {
    font-size: clamp(18px, 1.5vw, 26px);
    color: rgba(244,239,231,0.92); font-weight: 300;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .math-row .price {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 2vw, 34px);
    color: var(--gold); white-space: nowrap; letter-spacing: -0.005em;
  }
  .math-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 56px 0 16px;
    border-top: 2px solid var(--gold);
    margin-top: 24px; gap: 32px;
  }
  .math-total .label {
    font-size: clamp(16px, 1vw, 17px); letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--gold); font-weight: 500;
  }
  .math-total .amount {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(40px, 4.4vw, 68px);
    color: var(--ivory); letter-spacing: -0.01em;
  }
  .math-versus {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(28px, 3vw, 48px);
    text-align: center; margin: 100px 0;
    color: var(--gold); letter-spacing: 0.04em;
  }
  .math-result {
    text-align: center; padding: 80px 56px;
    border: 1px solid rgba(226,198,141,0.4);
    max-width: 720px; margin: 0 auto;
  }
  .math-result .tier-label {
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 16px;
  }
  .math-result .tier {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 4vw, 60px);
    color: var(--ivory); margin-bottom: 16px; line-height: 1.05;
  }
  .math-result .tier-price {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(56px, 7vw, 110px);
    color: var(--gold); display: block;
    margin: 32px 0 12px; line-height: 1;
  }
  .math-result .per-month {
    font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(244,239,231,0.6); display: block; margin-bottom: 40px;
  }
  .math-result .savings {
    font-size: clamp(17px, 1.4vw, 22px);
    color: rgba(244,239,231,0.85); font-style: italic;
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  }

  /* PRICING */
  .pricing-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
    margin-bottom: 96px;
  }
  .tier-card {
    display: flex; flex-direction: column;
    padding: 56px 48px;
    border: 1px solid rgba(28,28,58,0.2);
    background: rgba(28,28,58,0.02);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  .tier-card:hover { border-color: var(--chocolate); background: rgba(28,28,58,0.05); }
  .tier-card .cta-button {
    align-self: center;
    margin-top: auto;
    padding-top: 14px; padding-bottom: 14px;
    padding-left: 40px; padding-right: 40px;
    display: inline-block;
    background: #2a3d2a;
    animation: tier-btn-pulse 3.5s ease-in-out infinite;
  }
  .tier-card .cta-button:hover { animation: none; background: #152015; }
  @keyframes tier-btn-pulse {
    0%, 100% { background: #2a3d2a; }
    50%       { background: #152015; }
  }
  .tier-card.recommended {
    border-color: var(--gold); background: #49514d; color: var(--gold);
  }
  .tier-card.recommended .tier-name,
  .tier-card.recommended .tier-price { color: var(--gold); }
  .tier-card.recommended .tier-desc { color: rgba(201,168,76,0.82); }
  .tier-card.recommended ul li { color: rgba(201,168,76,0.88); }
  .tier-card.recommended ul li::before { color: var(--gold); }
  .tier-card.recommended .recommended-tag {
    position: absolute; top: -11px; left: 48px;
    background: var(--gold); color: var(--navy);
    padding: 5px 16px; font-size: 9px; letter-spacing: 0.3em;
    text-transform: uppercase; font-weight: 600;
  }
  .tier-number {
    font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
    color: #f7ffb7; margin-bottom: 16px; font-weight: 500;
  }
  .tier-card.recommended .tier-number { color: var(--gold); opacity: 0.6; }
  .tier-name {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(32px, 3vw, 44px);
    color: var(--chocolate); line-height: 1; margin-bottom: 24px;
  }
  #pricing .tier-price { color: var(--mint); }
  #pricing .tier-card.recommended .tier-price { color: var(--gold); }
  .tier-price {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 2.6vw, 38px);
    color: var(--chocolate); margin-bottom: 8px;
  }
  .tier-price .per { font-size: 13px; letter-spacing: 0.2em; color: #ffffff; }
  .tier-card.recommended .tier-price .per { color: #ffffff; }
  .tier-desc {
    font-size: 18px; line-height: 1.6;
    color: var(--chocolate-warm); margin-bottom: 32px;
    font-style: italic;
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  }
  .tier-card ul { list-style: none; }
  .tier-card ul li {
    font-size: 16px; line-height: 1.65; color: var(--chocolate);
    padding-left: 24px; position: relative;
    margin-bottom: 16px; font-weight: 300;
  }
  .tier-card ul li::before {
    content: '\2726'; position: absolute; left: 0; top: 2px;
    color: var(--chocolate-warm); font-size: 11px;
  }
  .a-la-carte-intro {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(20px, 2.2vw, 34px); font-style: normal; font-weight: 300;
    text-align: center; margin-left: auto; margin-right: auto;
    margin-bottom: 48px; max-width: 44ch; color: #f7ffb7;
  }
  /* Constellation frame for a-la-carte */
  .alc-frame {
    position: relative; max-width: 860px; margin: 0 auto;
    border: 1px solid rgba(201,168,76,0.45);
    padding: 52px 64px 36px;
  }
  .alc-corner {
    position: absolute; width: 10px; height: 10px;
    background: #C9A84C; border-radius: 50%;
  }
  .alc-corner.tl { top: -5px; left: -5px; }
  .alc-corner.tr { top: -5px; right: -5px; }
  .alc-corner.bl { bottom: -5px; left: -5px; }
  .alc-corner.br { bottom: -5px; right: -5px; }
  .alc-corner.tm { top: -5px; left: calc(50% - 5px); }
  .alc-corner.bm { bottom: -5px; left: calc(50% - 5px); }
  .alc-corner.ml { top: calc(50% - 5px); left: -5px; }
  .alc-corner.mr { top: calc(50% - 5px); right: -5px; }

  .category-group { margin-bottom: 36px; }
  .category-label {
    font-size: 11px; letter-spacing: 0.38em; text-transform: uppercase;
    color: #C9A84C; margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    font-weight: 500;
  }
  .category-item {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0; gap: 24px;
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  }
  .category-item .name { font-size: clamp(22px, 2.2vw, 34px); color: var(--chocolate); }
  .category-item .name .sub { font-size: 15px; color: var(--chocolate-warm); font-style: italic; font-family: 'Helvetica Neue', Arial, sans-serif; margin-left: 12px; }
  .category-item .price { font-size: clamp(18px, 1.6vw, 24px); color: var(--chocolate); white-space: nowrap; }

  @media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .tier-card { padding: 40px 28px; }
  }

  /* WHO THIS IS FOR (mint) */
  .for-list { list-style: none; max-width: 880px; margin-top: 40px; }
  .section.mint .for-list li {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.5;
    padding: 32px 0 32px 52px;
    border-bottom: 1px solid rgba(255,255,255,0.28);
    position: relative;
    color: #FFFFFF; font-weight: 400;
  }
  .section.mint .for-list li::before {
    content: '\2726';
    position: absolute; left: 0; top: 40px;
    color: #EFE3C8; font-size: 14px;
  }

  /* MORNING RITUAL */
  .ritual-open {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(32px, 4vw, 64px);
    line-height: 1.3;
    max-width: 22ch; margin-bottom: 96px;
    letter-spacing: -0.005em; color: var(--chocolate);
  }
  .ritual-body {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: clamp(16px, 1.2vw, 18px); line-height: 1.8;
    max-width: 52ch; margin-bottom: 48px;
    color: var(--navy); font-weight: 700;
  }
  .term-cursor {
    display: inline-block;
    width: 0.55em; height: 1em;
    background: var(--navy);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: term-blink 1s step-start infinite;
  }
  @keyframes term-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  .ritual-close {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 1.7vw, 28px);
    font-style: italic; line-height: 1.55;
    max-width: 60ch; margin-top: 80px; padding-top: 60px;
    border-top: 1px solid rgba(28,28,58,0.2);
    color: var(--chocolate);
  }

  #ritual { padding-bottom: 48px; position: relative; overflow: hidden; }
  #ritual-face-wrap {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
  }
  #ritual-face-svg {
    position: absolute; top: 50%; right: -8%;
    transform: translateY(-50%);
    width: 75%; max-width: 1080px; height: auto; opacity: 0;
    will-change: opacity;
  }
  #ritual-face-svg .rf-vertex { fill: #ffffff; }
  #ritual-face-svg .rf-edge { stroke: #ffffff; stroke-width: 1.4; fill: none; stroke-linecap: round; }
  #ritual-face-svg .rf-ce { stroke: rgba(255,255,255,0.5); stroke-width: 1.0; fill: none; stroke-linecap: round; }

  /* BEGIN — cloud video background */
  #begin {
    text-align: center; padding: 100px 56px 160px;
    position: relative; overflow: hidden;
    background: #1c1d38;
    color: #ffffff;
  }
  .begin-video-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.6s cubic-bezier(0.16,1,0.3,1);
  }
  #begin.video-revealed .begin-video-bg {
    opacity: 0.72;
  }
  .begin-video-overlay {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(to bottom, rgba(10,10,24,0.2) 0%, rgba(10,10,24,0.45) 100%);
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.16,1,0.3,1);
  }
  #begin.video-revealed .begin-video-overlay {
    opacity: 1;
  }
  #begin .headline {
    margin: 0 auto 60px;
    font-size: clamp(64px, 11vw, 200px);
    max-width: none; color: #ffffff;
  }
  #begin .headline em { color: rgba(255,255,255,0.75); font-style: italic; }
  #board { color: rgba(255,255,255,0.85) !important; }
  #board .eyebrow-label { color: rgba(248,253,84,0.7) !important; }
  #board .headline { color: #ffffff !important; }
  #board .headline em { color: #f8fd54 !important; font-style: italic; }
  #board .body-text { color: rgba(255,255,255,0.82) !important; font-weight: 700; }
  #board .read-more { color: #f8fd54 !important; }
  #board .section-ornament { color: rgba(248,253,84,0.45) !important; }
  #board .sus-divider { color: rgba(248,253,84,0.3); margin-top: 100px; margin-bottom: 100px; }
  /* Sustainability Q&A block — plain-english format */
  #board .sus-block { max-width: 820px; padding-bottom: 0; text-align: center; margin-left: auto; margin-right: auto; }
  #board .sus-qa-number { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(248,253,84,0.6); margin-bottom: 18px; display: block; }
  #board .sus-qa-question { font-family: 'Didot','Bodoni 72','Playfair Display',Georgia,serif; font-size: clamp(27px,3.04vw,47px); font-weight: 400; color: #ffffff; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.005em; max-width: none; }
  #board .sus-qa-sub { font-size: clamp(11px,0.85vw,13px); line-height: 1.6; color: #f8fd54; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 28px; }
  @media (max-width: 768px) {
    #board .sus-qa-question { font-size: clamp(32px,3.65vw,56px); }
  }
  #board .sus-qa-answer { font-size: clamp(16px,1.4vw,20px); line-height: 1.85; color: rgba(255,255,255,0.8); font-weight: 300; margin-bottom: 0; max-width: 68ch; }
  #begin .subline-group {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 28px);
    line-height: 1.6; margin-bottom: 60px;
    color: rgba(255,255,255,0.85);
  }
  #begin .subline-group p { margin-bottom: 8px; }
  #begin .cta-button {
    color: #ffffff; border-color: rgba(255,255,255,0.6);
    animation: begin-btn-pulse 2.8s ease-in-out infinite;
  }
  @keyframes begin-btn-pulse {
    0%, 100% { background: #4c271c; }
    50% { background: rgba(255,255,255,0.12); }
  }
  #begin .cta-button:hover { background: rgba(255,255,255,0.2); animation: none; }
  #begin .trust-line {
    margin-top: 60px; font-size: 12px; letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55); text-transform: uppercase; font-weight: 400;
    border-top-color: rgba(255,255,255,0.18);
  }

  /* FOOTER — gold deepens to navy, constellations animate back */
  footer {
    position: relative;
    background: linear-gradient(180deg, var(--navy) 0%, #12122a 50%, #04040e 100%);
    color: var(--ivory);
    padding: 180px 56px 100px;
    text-align: center;
    overflow: hidden;
  }
  .footer-stars {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
  }
  .footer-stars circle { fill: rgba(255,255,255,0.65); opacity: 1; }
  .footer-stars line {
    stroke: rgba(201,168,76,0.35); stroke-width: 1; fill: none;
    opacity: 1; stroke-linecap: round;
  }
  footer > *:not(.footer-stars) { position: relative; z-index: 2; }
  footer .wordmark {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 4.2vw, 64px);
    letter-spacing: 0.06em; color: var(--gold); margin-bottom: 12px;
  }
  footer .descriptor {
    font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
    color: rgba(201,168,76,0.6); margin-bottom: 96px;
  }
  footer .brand-line {
    font-family: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.7; max-width: 56ch;
    margin: 0 auto 96px; color: rgba(244,239,231,0.85);
  }
  footer .meta-lines {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 80px;
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(244,239,231,0.65); font-weight: 500;
  }
  footer .copyright {
    font-size: 10px; letter-spacing: 0.32em;
    color: rgba(244,239,231,0.4); text-transform: uppercase;
    margin-top: 60px; padding-top: 40px;
    border-top: 1px solid rgba(244,239,231,0.12);
  }

  /* SCROLL REVEAL */
  .reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  @media (max-width: 768px) {
    .section { padding: 120px 28px; }
    .headline { font-size: clamp(36px, 9vw, 56px); }
    #begin { padding: 80px 28px 120px; }
    footer { padding: 120px 28px 80px; }
    .math-row { padding: 22px 0; gap: 16px; }

  }

  #loader .attribution {
    font-family: 'Didot','Bodoni 72','Playfair Display',Georgia,serif;
    font-size: clamp(18px, 1.9vw, 29px);
    font-style: italic; font-weight: 400; letter-spacing: 0.06em;
    color: var(--gold); opacity: 0.92; margin-bottom: 60px;
  }
  @media (max-width: 768px) {
    #mark-wrap { width: 260px; height: 180px; }
    #loader .quote { font-size: 22px; }
    #loader .attribution { font-size: 19px; }
  }

  /* ── INTRO VIDEO OVERLAY ───────────────────────────────────── */
  #mf-video-intro {
    position: fixed; inset: 0; z-index: 999999;
    background: #1C1C3A;
    transition: opacity 0.9s ease;
  }
  #mf-video-intro video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #mf-video-intro.out { opacity: 0; pointer-events: none; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
</head>
<body>
<!-- ── INTRO VIDEO (first visit only) ───────────────────────── -->
<script>(function(){
  if (sessionStorage.getItem('mf_video_seen')) return;
  sessionStorage.setItem('mf_video_seen', '1');
  // Signal to the loader system that it must wait for this video
  window.mfVideoPromise = new Promise(function(resolve){ window.mfVideoResolve = resolve; });
  var o = document.createElement('div');
  o.id = 'mf-video-intro';
  var v = document.createElement('video');
  v.src = 'transitionvideo1.mp4';
  v.autoplay = true; v.muted = true; v.playsInline = true;
  v.setAttribute('playsinline', '');
  o.appendChild(v);
  document.body.insertBefore(o, document.body.firstChild);
  function dismiss() {
    if (o._done) return; o._done = true;
    o.classList.add('out');
    // Start the loader as video fades out (0.9s fade)
    if (window.mfVideoResolve) { window.mfVideoResolve(); window.mfVideoResolve = null; }
    setTimeout(function(){ if (o.parentNode) o.parentNode.removeChild(o); }, 1000);
  }
  v.addEventListener('ended', dismiss);
  v.addEventListener('error', dismiss);
  setTimeout(dismiss, 120000);
  v.play().catch(dismiss);
})();</script>
<script>if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; window.scrollTo(0,0);</script>

<div class="cursor" id="cursor"></div>

<div id="menu-mount"></div>

<!-- ============================================================ -->
<!-- COLD OPEN                                                     -->
<!-- ============================================================ -->
<section id="cold-open">
  <svg id="universe" preserveAspectRatio="xMidYMid slice"></svg>
  <svg id="supporting" preserveAspectRatio="xMidYMid slice"></svg>

  <div id="loader">
    <div class="quote">&ldquo;For my part, I know nothing with any certainty, but the sight of the stars makes me dream.&rdquo;</div>
    <div class="attribution">Vincent van Gogh</div>
    <div class="bar-wrap">
      <div class="bar-track"></div>
      <div class="bar-fill" id="bar-fill"></div>
    </div>
  </div>

  <div id="stage">
    <div id="mark-wrap">
      <svg id="mark" viewBox="-110 -75 220 150">
        <line class="line line-1" x1="-65" y1="45" x2="-65" y2="-45" stroke-dasharray="200" stroke-dashoffset="200"/>
        <line class="line line-2" x1="-65" y1="-45" x2="-22" y2="14" stroke-dasharray="200" stroke-dashoffset="200"/>
        <line class="line line-3" x1="-22" y1="14" x2="20" y2="-45" stroke-dasharray="200" stroke-dashoffset="200"/>
        <line class="line line-4" x1="20" y1="-45" x2="20" y2="45" stroke-dasharray="200" stroke-dashoffset="200"/>
        <line class="line line-5" x1="20" y1="-45" x2="68" y2="-45" stroke-dasharray="200" stroke-dashoffset="200"/>
        <line class="line line-6" x1="20" y1="0" x2="58" y2="0" stroke-dasharray="200" stroke-dashoffset="200"/>

        <circle class="vertex" cx="-65" cy="-45" r="3.5"/>
        <circle class="vertex" cx="20"  cy="-45" r="3.5"/>
        <circle class="vertex" cx="68"  cy="-45" r="3.5"/>
        <circle class="vertex" cx="-22" cy="14"  r="3.5"/>
        <circle class="vertex" cx="20"  cy="0"   r="3.5"/>
        <circle class="vertex" cx="58"  cy="0"   r="3.5"/>
        <circle class="vertex" cx="-65" cy="45"  r="3.5"/>
        <circle class="vertex" cx="20"  cy="45"  r="3.5"/>
      </svg>
    </div>

    <div id="wordmark-wrap">
      <div id="wordmark">
        <div class="word-mark">M<span class="ai-callout">AI</span>SON FORGE</div>
        <div class="rule"></div>
        <div class="city">NEW YORK</div>
      </div>
    </div>
  </div>

  <div class="scroll-cue" id="scroll-cue">SCROLL</div>
  <p class="hero-tagline"><span class="tagline-phrase">Your world-class marketing team</span><span class="tagline-star"> ✦ </span><span class="tagline-phrase">Eleven AI specialists</span><span class="tagline-star"> ✦ </span><span class="tagline-phrase">Built from inside luxury fashion.</span><span class="tagline-phrase tagline-phrase--sub">Not generic AI.</span></p>
</section>

<!-- ============================================================ -->
<!-- HERO with Aries constellation — diagonal, edge to edge       -->
<!-- ============================================================ -->
<section id="hero">
  <svg id="aries" viewBox="0 0 1920 540" preserveAspectRatio="xMidYMid meet">
    <line class="a-line" x1="80"   y1="180" x2="280"  y2="130" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="280"  y1="130" x2="480"  y2="220" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="480"  y1="220" x2="680"  y2="155" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="680"  y1="155" x2="860"  y2="285" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="860"  y1="285" x2="1040" y2="355" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="1040" y1="355" x2="1220" y2="455" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="680"  y1="155" x2="900"  y2="110" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="900"  y1="110" x2="1120" y2="200" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="1120" y1="200" x2="1340" y2="130" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="1120" y1="200" x2="1280" y2="360" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="1280" y1="360" x2="1520" y2="410" stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="a-line" x1="1520" y1="410" x2="1760" y2="340" stroke-dasharray="500" stroke-dashoffset="500"/>

    <circle class="a-star"        data-home-x="80"   data-home-y="180" r="5"/>
    <circle class="a-star"        data-home-x="280"  data-home-y="130" r="4.5"/>
    <circle class="a-star"        data-home-x="480"  data-home-y="220" r="5"/>
    <circle class="a-star"        data-home-x="680"  data-home-y="155" r="6"/>
    <circle class="a-star"        data-home-x="860"  data-home-y="285" r="4.5"/>
    <circle class="a-star"        data-home-x="1040" data-home-y="355" r="5"/>
    <circle class="a-star bright" data-home-x="1220" data-home-y="455" r="8"/>
    <circle class="a-star"        data-home-x="900"  data-home-y="110" r="4.5"/>
    <circle class="a-star"        data-home-x="1120" data-home-y="200" r="5"/>
    <circle class="a-star"        data-home-x="1340" data-home-y="130" r="4.5"/>
    <circle class="a-star"        data-home-x="1280" data-home-y="360" r="4.5"/>
    <circle class="a-star"        data-home-x="1520" data-home-y="410" r="5"/>
    <circle class="a-star"        data-home-x="1760" data-home-y="340" r="4.5"/>
  </svg>

  <div class="hero-video-wrap">
    <video id="hero-video" src="assets/video/scroll_tiny_244KB.mp4" autoplay muted loop playsinline></video>
  </div>
  <div class="container" style="position:relative;z-index:1;">
    <div class="label"><span class="inner">Established · MMXXVI · New York</span></div>

    <h1 class="display-xl" data-split>The luxury atelier where brands <em>are forged.</em></h1>

    <p class="subline">Eleven luminaries. One Maison. One mind. A unified system producing your content, orchestrating campaigns, managing media, conducting outreach, and measuring performance, continuously, inside your own accounts, with a fraction of the waste of traditional AI workflows.</p>

    <p class="subline" style="margin-top:36px;">Each luminary is trained on a private curriculum spanning brand strategy, editorial craft, and category specific intelligence, shaped by years of real world operating experience in the luxury industry. The result is work that reads like a senior operator, fluent in your industry, your customer, and the standards that define it, and built to surface across both traditional search and AI engines.</p>

    <p class="subline" style="margin-top:36px;">Maison Forge is not here to replace your team. It exists to support them, extending their capacity, removing the repetitive weight, and allowing your people to operate at the level they were actually hired for.</p>

    <p class="subline" style="margin-top:36px;">Maison Forge is not a chatbot and not a settings panel. It is a fully integrated operational system trained on real product intelligence, real founder examples, and a level of execution that typically takes a full team to achieve, producing finished, quality checked content with dramatically lower energy per piece.</p>

    <p class="subline" style="margin-top:36px;">The capability of a complete marketing department. In one system.</p>
  </div>
</section>

<!-- HERO PULL QUOTE BAND — Grand Central pale mint -->
<aside class="hero-pull-quote" id="hero-quote-band">
  <svg class="hpq-stars" id="hpq-stars-svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice"></svg>
  <div class="hpq-inner">
    <p class="hpq-line hpq-open">&ldquo;I did not build Maison Forge to replace the people around you.</p>
    <p class="hpq-line">I built it to hold the ground beneath you,</p>
    <p class="hpq-line hpq-close">so you can keep your eyes on the stars.&rdquo;</p>
    <div class="hpq-flourish">
      <span class="hpq-rule"></span>
      <span class="hpq-mark">✦</span>
      <span class="hpq-rule"></span>
    </div>
    <div class="hpq-attribution">
      <span class="hpq-name">David Foote</span>
      <span class="hpq-divider">✦</span>
      <span class="hpq-role">Founder</span>
    </div>
  </div>
</aside>

<!-- 03 · LUMINARIES -->
<section class="section navy" id="luminaries">
  <svg class="section-stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><line x1="280" y1="180" x2="440" y2="260"/><line x1="440" y1="260" x2="560" y2="200"/><line x1="440" y1="260" x2="640" y2="360"/><line x1="640" y1="360" x2="520" y2="440"/><line x1="520" y1="440" x2="380" y2="400"/><line x1="380" y1="400" x2="280" y2="180"/><circle cx="280" cy="180" r="3.5"/><circle cx="440" cy="260" r="4"/><circle cx="560" cy="200" r="3.5"/><circle cx="640" cy="360" r="5"/><circle cx="520" cy="440" r="3.5"/><circle cx="380" cy="400" r="3.5"/></svg>
  <img src="assets/images/brai-n_brain.png" alt="" aria-hidden="true" style="position:absolute;top:0;right:-2%;width:55%;max-width:780px;opacity:0.18;pointer-events:none;mix-blend-mode:screen;">

  <div class="container">
    <span class="eyebrow-label reveal">The Eleven Luminaries</span>
    <h2 class="headline reveal">Eleven specialized minds. <em>One synchronized atelier.</em></h2>
    <p class="intro-text reveal">Each luminary is a master of one discipline. Together, they form the operational system of a modern luxury brand. Hire them all, or fill the gaps in your existing team. Every luminary runs against your real product data, in your real accounts, on your schedule. Not as drafts you have to approve, but as work that ships.</p>

    <div class="one-day-block reveal">
      <div class="one-day-title">WHAT HAPPENS IN ONE DAY</div>
      <div class="one-day-subtitle">And how this makes your life immeasurably easier.</div>
      <div class="one-day-body">
        <p>The Maison runs on its own. While you sleep, it goes to work. By the time you wake, this is what is already done:</p>
        <p>Boris is texting you your morning briefing: overnight orders, revenue, low-stock alerts, anything that needs your attention. Orion has scanned your site and composed up to three long-form editorial features on your brand and products, crafted to rank in Google and surface inside the answers of ChatGPT, Claude, and Perplexity. Zenith has delivered her monthly trend report, what is rising across luxury, beauty, and culture. Aurora has taken that report and composed your entire social media calendar for the month. Luna has written every marketing email, anchored to the same trends, seasonal moments, and brand holidays that matter. One month of content. One story, told in one voice, across every channel. No more disjointed daily posts. A smooth narrative arc your customers can actually follow.</p>
        <p>No more Sunday evenings in front of an empty content calendar. No more Monday mornings remembering Earth Day is this week. No more captions written in the Notes app at midnight. No more paying an agency four thousand a month to post three times a week in a voice that is not yours. You wake, and the month is already written. Leaving you the rest of the month to execute your grand vision.</p>
        <div style="margin-top: 48px; text-align: center;">
          <a href="/commission" class="cta-button">Start Your Brand DNA Session <span class="arrow">→</span></a>
        </div>
      </div>
    </div>

    <div class="roster-face-wrap" style="position:relative;overflow:hidden;">
<div id="ritual-face-wrap">
<svg id="ritual-face-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
  <defs>
    <style>
      .rf-edge { stroke: #ffffff; stroke-width: 1.2; fill: none; stroke-linecap: round; }
      .rf-vertex { fill: #ffffff; }
      .rf-ce { stroke: #ffffff; stroke-width: 1.0; fill: none; stroke-linecap: round; opacity: 0.8; }
    </style>
  </defs>

  <!-- Structural connector edges between regions -->
  <g id="connectors" data-label="Structural Connectors" data-description="Edges connecting different facial regions">
    <line class="rf-ce" x1="633.7" y1="116.0" x2="660.8" y2="225.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="633.7" y1="116.0" x2="542.1" y2="240.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="254.5" y1="135.5" x2="195.9" y2="221.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="254.5" y1="135.5" x2="343.8" y2="224.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="760.5" y1="148.6" x2="799.2" y2="200.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="723.7" y1="149.4" x2="799.2" y2="200.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="723.7" y1="149.4" x2="660.8" y2="225.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="383.8" y1="168.7" x2="343.8" y2="224.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="383.8" y1="168.7" x2="503.5" y2="247.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="178.5" y1="279.8" x2="189.3" y2="411.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="275.9" y1="281.7" x2="266.1" y2="378.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="275.9" y1="281.7" x2="189.3" y2="411.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="275.9" y1="281.7" x2="326.1" y2="431.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="724.3" y1="281.7" x2="733.9" y2="378.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="724.3" y1="281.7" x2="810.5" y2="411.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="724.3" y1="281.7" x2="674.0" y2="431.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="822.0" y1="292.0" x2="810.5" y2="411.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="266.1" y1="378.6" x2="189.3" y2="411.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="266.1" y1="378.6" x2="244.4" y2="423.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="733.9" y1="378.6" x2="810.5" y2="411.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="733.9" y1="378.6" x2="755.6" y2="423.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="810.5" y1="411.7" x2="768.7" y2="552.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="189.3" y1="411.8" x2="231.4" y2="552.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="755.6" y1="423.5" x2="726.2" y2="471.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="755.6" y1="423.5" x2="768.7" y2="552.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="244.4" y1="423.6" x2="273.8" y2="471.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="244.4" y1="423.6" x2="231.4" y2="552.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="326.1" y1="431.2" x2="429.0" y2="451.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="674.0" y1="431.3" x2="570.9" y2="451.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="601.7" y1="444.8" x2="570.9" y2="451.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="398.2" y1="444.9" x2="429.0" y2="451.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="334.1" y1="455.8" x2="446.0" y2="479.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="666.0" y1="455.8" x2="553.9" y2="478.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="185.5" y1="463.7" x2="172.3" y2="480.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="814.5" y1="463.7" x2="827.7" y2="480.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="790.8" y1="474.8" x2="768.7" y2="552.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="209.1" y1="475.2" x2="231.4" y2="552.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="397.4" y1="481.6" x2="429.8" y2="503.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="602.6" y1="481.7" x2="570.1" y2="503.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="526.3" y1="514.9" x2="625.6" y2="585.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="526.3" y1="514.9" x2="524.2" y2="622.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="526.3" y1="514.9" x2="558.3" y2="632.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="473.8" y1="515.0" x2="374.3" y2="584.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="473.8" y1="515.0" x2="475.7" y2="622.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="473.8" y1="515.0" x2="441.6" y2="632.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="430.5" y1="520.5" x2="374.8" y2="543.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="569.8" y1="520.5" x2="625.2" y2="543.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="727.5" y1="532.4" x2="768.7" y2="552.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="727.5" y1="532.4" x2="697.4" y2="645.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="272.5" y1="532.6" x2="231.4" y2="552.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="272.5" y1="532.6" x2="302.5" y2="645.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="768.7" y1="552.6" x2="697.4" y2="645.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="768.7" y1="552.6" x2="748.9" y2="673.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="768.7" y1="552.6" x2="672.0" y2="678.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="231.4" y1="552.7" x2="302.5" y2="645.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="231.4" y1="552.7" x2="251.3" y2="673.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="231.4" y1="552.7" x2="328.1" y2="678.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="813.6" y1="591.9" x2="787.4" y2="659.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="186.3" y1="592.0" x2="212.7" y2="659.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="475.7" y1="622.0" x2="464.7" y2="661.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="524.2" y1="622.0" x2="535.4" y2="661.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="524.2" y1="622.0" x2="543.8" y2="685.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="558.3" y1="632.7" x2="660.0" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="251.3" y1="673.3" x2="339.9" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="251.3" y1="673.3" x2="272.6" y2="782.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="748.9" y1="673.5" x2="660.0" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="748.9" y1="673.5" x2="727.3" y2="782.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="486.8" y1="705.0" x2="476.9" y2="755.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="486.8" y1="705.0" x2="472.6" y2="784.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="513.2" y1="705.0" x2="523.0" y2="755.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="513.2" y1="705.0" x2="527.5" y2="785.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="259.4" y1="717.2" x2="339.9" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="259.4" y1="717.2" x2="272.6" y2="782.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="259.4" y1="717.2" x2="398.1" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="740.5" y1="717.3" x2="660.0" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="740.5" y1="717.3" x2="727.3" y2="782.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="740.5" y1="717.3" x2="602.0" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="339.9" y1="756.3" x2="370.8" y2="895.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="660.0" y1="756.3" x2="629.2" y2="895.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="272.6" y1="782.6" x2="327.3" y2="861.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="727.3" y1="782.6" x2="672.8" y2="861.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="398.1" y1="787.1" x2="460.6" y2="825.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="602.0" y1="787.1" x2="539.4" y2="825.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="451.9" y1="855.2" x2="370.8" y2="895.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="451.9" y1="855.2" x2="423.6" y2="898.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="548.1" y1="855.2" x2="629.2" y2="895.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="548.1" y1="855.2" x2="576.3" y2="898.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="327.3" y1="861.3" x2="370.8" y2="895.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="327.3" y1="861.3" x2="440.3" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="672.8" y1="861.4" x2="629.2" y2="895.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    <line class="rf-ce" x1="672.8" y1="861.4" x2="559.7" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
  </g>

  <!-- Cranium: Top of skull wireframe -->
  <g id="cranium" data-label="Cranium" data-description="Top of skull wireframe">
    <g id="cranium_edges" class="region-edges">
      <line class="rf-edge" x1="561.5" y1="50.0" x2="683.8" y2="88.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="561.5" y1="50.0" x2="633.7" y2="116.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="561.5" y1="50.0" x2="492.8" y2="152.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="372.1" y1="63.7" x2="254.5" y2="135.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="372.1" y1="63.7" x2="492.8" y2="152.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="683.8" y1="88.2" x2="633.7" y2="116.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="683.8" y1="88.2" x2="723.7" y2="149.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="254.5" y1="135.5" x2="383.8" y2="168.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="760.5" y1="148.6" x2="723.7" y2="149.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="cranium_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="561.5" cy="50.0" r="4" data-vertex-id="0" data-home-x="561.5" data-home-y="50.0"/>
      <circle class="rf-vertex" cx="372.1" cy="63.7" r="4" data-vertex-id="1" data-home-x="372.1" data-home-y="63.7"/>
      <circle class="rf-vertex" cx="683.8" cy="88.2" r="4" data-vertex-id="2" data-home-x="683.8" data-home-y="88.2"/>
      <circle class="rf-vertex" cx="633.7" cy="116.0" r="4" data-vertex-id="3" data-home-x="633.7" data-home-y="116.0"/>
      <circle class="rf-vertex" cx="254.5" cy="135.5" r="4" data-vertex-id="4" data-home-x="254.5" data-home-y="135.5"/>
      <circle class="rf-vertex" cx="760.5" cy="148.6" r="4" data-vertex-id="5" data-home-x="760.5" data-home-y="148.6"/>
      <circle class="rf-vertex" cx="723.7" cy="149.4" r="4" data-vertex-id="6" data-home-x="723.7" data-home-y="149.4"/>
      <circle class="rf-vertex" cx="492.8" cy="152.8" r="4" data-vertex-id="7" data-home-x="492.8" data-home-y="152.8"/>
      <circle class="rf-vertex" cx="383.8" cy="168.7" r="4" data-vertex-id="8" data-home-x="383.8" data-home-y="168.7"/>
    </g>
  </g>

  <!-- Forehead: Forehead mesh -->
  <g id="forehead" data-label="Forehead" data-description="Forehead mesh">
    <g id="forehead_edges" class="region-edges">
      <line class="rf-edge" x1="799.2" y1="200.0" x2="660.8" y2="225.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="799.2" y1="200.0" x2="822.0" y2="292.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="277.2" y1="208.2" x2="195.9" y2="221.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="277.2" y1="208.2" x2="343.8" y2="224.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="277.2" y1="208.2" x2="178.5" y2="279.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="195.9" y1="221.6" x2="178.5" y2="279.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="343.8" y1="224.9" x2="457.5" y2="240.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="343.8" y1="224.9" x2="503.5" y2="247.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="343.8" y1="224.9" x2="275.9" y2="281.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="660.8" y1="225.2" x2="542.1" y2="240.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="660.8" y1="225.2" x2="503.5" y2="247.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="660.8" y1="225.2" x2="724.3" y2="281.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="542.1" y1="240.3" x2="503.5" y2="247.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="457.5" y1="240.3" x2="503.5" y2="247.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="178.5" y1="279.8" x2="275.9" y2="281.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="724.3" y1="281.7" x2="822.0" y2="292.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="forehead_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="799.2" cy="200.0" r="4" data-vertex-id="9" data-home-x="799.2" data-home-y="200.0"/>
      <circle class="rf-vertex" cx="277.2" cy="208.2" r="4" data-vertex-id="10" data-home-x="277.2" data-home-y="208.2"/>
      <circle class="rf-vertex" cx="195.9" cy="221.6" r="4" data-vertex-id="11" data-home-x="195.9" data-home-y="221.6"/>
      <circle class="rf-vertex" cx="343.8" cy="224.9" r="4" data-vertex-id="12" data-home-x="343.8" data-home-y="224.9"/>
      <circle class="rf-vertex" cx="660.8" cy="225.2" r="4" data-vertex-id="13" data-home-x="660.8" data-home-y="225.2"/>
      <circle class="rf-vertex" cx="542.1" cy="240.3" r="4" data-vertex-id="14" data-home-x="542.1" data-home-y="240.3"/>
      <circle class="rf-vertex" cx="457.5" cy="240.3" r="4" data-vertex-id="15" data-home-x="457.5" data-home-y="240.3"/>
      <circle class="rf-vertex" cx="503.5" cy="247.1" r="4" data-vertex-id="16" data-home-x="503.5" data-home-y="247.1"/>
      <circle class="rf-vertex" cx="178.5" cy="279.8" r="4" data-vertex-id="17" data-home-x="178.5" data-home-y="279.8"/>
      <circle class="rf-vertex" cx="275.9" cy="281.7" r="4" data-vertex-id="18" data-home-x="275.9" data-home-y="281.7"/>
      <circle class="rf-vertex" cx="724.3" cy="281.7" r="4" data-vertex-id="19" data-home-x="724.3" data-home-y="281.7"/>
      <circle class="rf-vertex" cx="822.0" cy="292.0" r="4" data-vertex-id="20" data-home-x="822.0" data-home-y="292.0"/>
    </g>
  </g>

  <!-- Temples: Side temple areas -->
  <g id="temple" data-label="Temples" data-description="Side temple areas">
    <g id="temple_edges" class="region-edges">
      <line class="rf-edge" x1="810.5" y1="411.7" x2="790.8" y2="474.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="189.3" y1="411.8" x2="209.1" y2="475.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="755.6" y1="423.5" x2="790.8" y2="474.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="244.4" y1="423.6" x2="209.1" y2="475.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="185.5" y1="463.7" x2="209.1" y2="475.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="814.5" y1="463.7" x2="790.8" y2="474.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="temple_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="810.5" cy="411.7" r="4" data-vertex-id="23" data-home-x="810.5" data-home-y="411.7"/>
      <circle class="rf-vertex" cx="189.3" cy="411.8" r="4" data-vertex-id="24" data-home-x="189.3" data-home-y="411.8"/>
      <circle class="rf-vertex" cx="755.6" cy="423.5" r="4" data-vertex-id="25" data-home-x="755.6" data-home-y="423.5"/>
      <circle class="rf-vertex" cx="244.4" cy="423.6" r="4" data-vertex-id="26" data-home-x="244.4" data-home-y="423.6"/>
      <circle class="rf-vertex" cx="185.5" cy="463.7" r="4" data-vertex-id="37" data-home-x="185.5" data-home-y="463.7"/>
      <circle class="rf-vertex" cx="814.5" cy="463.7" r="4" data-vertex-id="38" data-home-x="814.5" data-home-y="463.7"/>
      <circle class="rf-vertex" cx="790.8" cy="474.8" r="4" data-vertex-id="41" data-home-x="790.8" data-home-y="474.8"/>
      <circle class="rf-vertex" cx="209.1" cy="475.2" r="4" data-vertex-id="42" data-home-x="209.1" data-home-y="475.2"/>
    </g>
  </g>

  <!-- Brow Ridge: Eyebrow ridge -->
  <g id="brow" data-label="Brow Ridge" data-description="Eyebrow ridge">
    <g id="brow_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="266.1" cy="378.6" r="4" data-vertex-id="21" data-home-x="266.1" data-home-y="378.6"/>
      <circle class="rf-vertex" cx="733.9" cy="378.6" r="4" data-vertex-id="22" data-home-x="733.9" data-home-y="378.6"/>
    </g>
  </g>

  <!-- Left Eye: Left eye wireframe -->
  <g id="eye_left" data-label="Left Eye" data-description="Left eye wireframe">
    <g id="eye_left_edges" class="region-edges">
      <line class="rf-edge" x1="326.1" y1="431.2" x2="398.2" y2="444.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="326.1" y1="431.2" x2="297.1" y2="450.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="297.1" y1="450.4" x2="273.8" y2="471.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="334.1" y1="455.8" x2="273.8" y2="471.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="273.8" y1="471.7" x2="272.5" y2="532.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="273.8" y1="471.7" x2="339.3" y2="541.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="397.4" y1="481.6" x2="340.6" y2="483.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="340.6" y1="483.0" x2="308.8" y2="499.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="390.4" y1="491.6" x2="393.7" y2="508.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="349.6" y1="492.4" x2="347.4" y2="508.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="339.3" y1="541.9" x2="374.8" y2="543.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="eye_left_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="326.1" cy="431.2" r="4" data-vertex-id="27" data-home-x="326.1" data-home-y="431.2"/>
      <circle class="rf-vertex" cx="398.2" cy="444.9" r="4" data-vertex-id="30" data-home-x="398.2" data-home-y="444.9"/>
      <circle class="rf-vertex" cx="297.1" cy="450.4" r="4" data-vertex-id="32" data-home-x="297.1" data-home-y="450.4"/>
      <circle class="rf-vertex" cx="334.1" cy="455.8" r="4" data-vertex-id="35" data-home-x="334.1" data-home-y="455.8"/>
      <circle class="rf-vertex" cx="273.8" cy="471.7" r="4" data-vertex-id="40" data-home-x="273.8" data-home-y="471.7"/>
      <circle class="rf-vertex" cx="397.4" cy="481.6" r="4" data-vertex-id="47" data-home-x="397.4" data-home-y="481.6"/>
      <circle class="rf-vertex" cx="340.6" cy="483.0" r="4" data-vertex-id="50" data-home-x="340.6" data-home-y="483.0"/>
      <circle class="rf-vertex" cx="390.4" cy="491.6" r="4" data-vertex-id="52" data-home-x="390.4" data-home-y="491.6"/>
      <circle class="rf-vertex" cx="349.6" cy="492.4" r="4" data-vertex-id="53" data-home-x="349.6" data-home-y="492.4"/>
      <circle class="rf-vertex" cx="308.8" cy="499.1" r="4" data-vertex-id="60" data-home-x="308.8" data-home-y="499.1"/>
      <circle class="rf-vertex" cx="371.9" cy="505.0" r="4" data-vertex-id="64" data-home-x="371.9" data-home-y="505.0"/>
      <circle class="rf-vertex" cx="347.4" cy="508.0" r="4" data-vertex-id="67" data-home-x="347.4" data-home-y="508.0"/>
      <circle class="rf-vertex" cx="393.7" cy="508.4" r="4" data-vertex-id="68" data-home-x="393.7" data-home-y="508.4"/>
      <circle class="rf-vertex" cx="346.9" cy="526.7" r="4" data-vertex-id="76" data-home-x="346.9" data-home-y="526.7"/>
      <circle class="rf-vertex" cx="272.5" cy="532.6" r="4" data-vertex-id="79" data-home-x="272.5" data-home-y="532.6"/>
      <circle class="rf-vertex" cx="339.3" cy="541.9" r="4" data-vertex-id="81" data-home-x="339.3" data-home-y="541.9"/>
      <circle class="rf-vertex" cx="374.8" cy="543.1" r="4" data-vertex-id="83" data-home-x="374.8" data-home-y="543.1"/>
    </g>
  </g>

  <!-- Right Eye: Right eye wireframe -->
  <g id="eye_right" data-label="Right Eye" data-description="Right eye wireframe">
    <g id="eye_right_edges" class="region-edges">
      <line class="rf-edge" x1="674.0" y1="431.3" x2="601.7" y2="444.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="674.0" y1="431.3" x2="702.8" y2="450.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="702.8" y1="450.3" x2="726.2" y2="471.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="666.0" y1="455.8" x2="726.2" y2="471.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="726.2" y1="471.5" x2="727.5" y2="532.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="726.2" y1="471.5" x2="660.6" y2="541.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="602.6" y1="481.7" x2="659.3" y2="483.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="659.3" y1="483.0" x2="691.3" y2="498.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="609.6" y1="491.6" x2="606.4" y2="508.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="650.4" y1="492.5" x2="652.6" y2="507.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="660.6" y1="541.9" x2="625.2" y2="543.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="eye_right_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="674.0" cy="431.3" r="4" data-vertex-id="28" data-home-x="674.0" data-home-y="431.3"/>
      <circle class="rf-vertex" cx="601.7" cy="444.8" r="4" data-vertex-id="29" data-home-x="601.7" data-home-y="444.8"/>
      <circle class="rf-vertex" cx="702.8" cy="450.3" r="4" data-vertex-id="31" data-home-x="702.8" data-home-y="450.3"/>
      <circle class="rf-vertex" cx="666.0" cy="455.8" r="4" data-vertex-id="36" data-home-x="666.0" data-home-y="455.8"/>
      <circle class="rf-vertex" cx="726.2" cy="471.5" r="4" data-vertex-id="39" data-home-x="726.2" data-home-y="471.5"/>
      <circle class="rf-vertex" cx="602.6" cy="481.7" r="4" data-vertex-id="48" data-home-x="602.6" data-home-y="481.7"/>
      <circle class="rf-vertex" cx="659.3" cy="483.0" r="4" data-vertex-id="49" data-home-x="659.3" data-home-y="483.0"/>
      <circle class="rf-vertex" cx="609.6" cy="491.6" r="4" data-vertex-id="51" data-home-x="609.6" data-home-y="491.6"/>
      <circle class="rf-vertex" cx="650.4" cy="492.5" r="4" data-vertex-id="54" data-home-x="650.4" data-home-y="492.5"/>
      <circle class="rf-vertex" cx="691.3" cy="498.9" r="4" data-vertex-id="59" data-home-x="691.3" data-home-y="498.9"/>
      <circle class="rf-vertex" cx="627.9" cy="505.0" r="4" data-vertex-id="65" data-home-x="627.9" data-home-y="505.0"/>
      <circle class="rf-vertex" cx="652.6" cy="507.9" r="4" data-vertex-id="66" data-home-x="652.6" data-home-y="507.9"/>
      <circle class="rf-vertex" cx="606.4" cy="508.4" r="4" data-vertex-id="69" data-home-x="606.4" data-home-y="508.4"/>
      <circle class="rf-vertex" cx="652.9" cy="526.9" r="4" data-vertex-id="77" data-home-x="652.9" data-home-y="526.9"/>
      <circle class="rf-vertex" cx="727.5" cy="532.4" r="4" data-vertex-id="78" data-home-x="727.5" data-home-y="532.4"/>
      <circle class="rf-vertex" cx="660.6" cy="541.9" r="4" data-vertex-id="80" data-home-x="660.6" data-home-y="541.9"/>
      <circle class="rf-vertex" cx="625.2" cy="543.0" r="4" data-vertex-id="82" data-home-x="625.2" data-home-y="543.0"/>
    </g>
  </g>

  <!-- Nose Bridge: Upper nose structure -->
  <g id="nose_bridge" data-label="Nose Bridge" data-description="Upper nose structure">
    <g id="nose_bridge_edges" class="region-edges">
      <line class="rf-edge" x1="570.9" y1="451.6" x2="553.9" y2="478.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="429.0" y1="451.7" x2="446.0" y2="479.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="553.9" y1="478.9" x2="526.3" y2="514.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="446.0" y1="479.1" x2="473.8" y2="515.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="500.0" y1="500.7" x2="526.3" y2="514.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="500.0" y1="500.7" x2="473.8" y2="515.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="413.2" y1="520.4" x2="430.5" y2="520.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="586.5" y1="520.4" x2="569.8" y2="520.5" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="nose_bridge_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="570.9" cy="451.6" r="4" data-vertex-id="33" data-home-x="570.9" data-home-y="451.6"/>
      <circle class="rf-vertex" cx="429.0" cy="451.7" r="4" data-vertex-id="34" data-home-x="429.0" data-home-y="451.7"/>
      <circle class="rf-vertex" cx="553.9" cy="478.9" r="4" data-vertex-id="43" data-home-x="553.9" data-home-y="478.9"/>
      <circle class="rf-vertex" cx="446.0" cy="479.1" r="4" data-vertex-id="44" data-home-x="446.0" data-home-y="479.1"/>
      <circle class="rf-vertex" cx="500.0" cy="500.7" r="4" data-vertex-id="61" data-home-x="500.0" data-home-y="500.7"/>
      <circle class="rf-vertex" cx="570.1" cy="503.1" r="4" data-vertex-id="62" data-home-x="570.1" data-home-y="503.1"/>
      <circle class="rf-vertex" cx="429.8" cy="503.2" r="4" data-vertex-id="63" data-home-x="429.8" data-home-y="503.2"/>
      <circle class="rf-vertex" cx="526.3" cy="514.9" r="4" data-vertex-id="70" data-home-x="526.3" data-home-y="514.9"/>
      <circle class="rf-vertex" cx="473.8" cy="515.0" r="4" data-vertex-id="71" data-home-x="473.8" data-home-y="515.0"/>
      <circle class="rf-vertex" cx="413.2" cy="520.4" r="4" data-vertex-id="72" data-home-x="413.2" data-home-y="520.4"/>
      <circle class="rf-vertex" cx="586.5" cy="520.4" r="4" data-vertex-id="73" data-home-x="586.5" data-home-y="520.4"/>
      <circle class="rf-vertex" cx="430.5" cy="520.5" r="4" data-vertex-id="74" data-home-x="430.5" data-home-y="520.5"/>
      <circle class="rf-vertex" cx="569.8" cy="520.5" r="4" data-vertex-id="75" data-home-x="569.8" data-home-y="520.5"/>
    </g>
  </g>

  <!-- Nose Lower: Lower nose -->
  <g id="nose_lower" data-label="Nose Lower" data-description="Lower nose">
    <g id="nose_lower_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="475.7" cy="622.0" r="4" data-vertex-id="92" data-home-x="475.7" data-home-y="622.0"/>
      <circle class="rf-vertex" cx="524.2" cy="622.0" r="4" data-vertex-id="93" data-home-x="524.2" data-home-y="622.0"/>
    </g>
  </g>

  <!-- Nose Tip: Nose tip and nostrils area -->
  <g id="nose_tip" data-label="Nose Tip" data-description="Nose tip and nostrils area">
    <g id="nose_tip_edges" class="region-edges">
      <line class="rf-edge" x1="464.7" y1="661.7" x2="499.9" y2="681.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="535.4" y1="661.7" x2="499.9" y2="681.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="432.1" y1="681.5" x2="451.1" y2="696.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="567.8" y1="681.6" x2="548.6" y2="696.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="486.8" y1="705.0" x2="513.2" y2="705.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="nose_tip_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="558.3" cy="632.7" r="4" data-vertex-id="94" data-home-x="558.3" data-home-y="632.7"/>
      <circle class="rf-vertex" cx="441.6" cy="632.8" r="4" data-vertex-id="95" data-home-x="441.6" data-home-y="632.8"/>
      <circle class="rf-vertex" cx="464.7" cy="661.7" r="4" data-vertex-id="100" data-home-x="464.7" data-home-y="661.7"/>
      <circle class="rf-vertex" cx="535.4" cy="661.7" r="4" data-vertex-id="101" data-home-x="535.4" data-home-y="661.7"/>
      <circle class="rf-vertex" cx="499.9" cy="681.0" r="4" data-vertex-id="108" data-home-x="499.9" data-home-y="681.0"/>
      <circle class="rf-vertex" cx="432.1" cy="681.5" r="4" data-vertex-id="109" data-home-x="432.1" data-home-y="681.5"/>
      <circle class="rf-vertex" cx="567.8" cy="681.6" r="4" data-vertex-id="110" data-home-x="567.8" data-home-y="681.6"/>
      <circle class="rf-vertex" cx="456.1" cy="685.5" r="4" data-vertex-id="111" data-home-x="456.1" data-home-y="685.5"/>
      <circle class="rf-vertex" cx="543.8" cy="685.7" r="4" data-vertex-id="112" data-home-x="543.8" data-home-y="685.7"/>
      <circle class="rf-vertex" cx="451.1" cy="696.7" r="4" data-vertex-id="113" data-home-x="451.1" data-home-y="696.7"/>
      <circle class="rf-vertex" cx="548.6" cy="696.9" r="4" data-vertex-id="114" data-home-x="548.6" data-home-y="696.9"/>
      <circle class="rf-vertex" cx="486.8" cy="705.0" r="4" data-vertex-id="115" data-home-x="486.8" data-home-y="705.0"/>
      <circle class="rf-vertex" cx="513.2" cy="705.0" r="4" data-vertex-id="116" data-home-x="513.2" data-home-y="705.0"/>
    </g>
  </g>

  <!-- Cheekbones: Outer cheek/cheekbone area -->
  <g id="cheekbone" data-label="Cheekbones" data-description="Outer cheek/cheekbone area">
    <g id="cheekbone_edges" class="region-edges">
      <line class="rf-edge" x1="172.3" y1="480.3" x2="193.4" y2="494.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="172.3" y1="480.3" x2="169.2" y2="494.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="827.7" y1="480.4" x2="806.7" y2="494.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="827.7" y1="480.4" x2="830.8" y2="494.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="193.4" y1="494.4" x2="231.4" y2="552.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="193.4" y1="494.4" x2="186.3" y2="592.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="806.7" y1="494.6" x2="813.6" y2="591.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="169.2" y1="494.9" x2="186.3" y2="592.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="830.8" y1="494.9" x2="813.6" y2="591.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="813.6" y1="591.9" x2="768.5" y2="616.9" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="186.3" y1="592.0" x2="231.4" y2="616.8" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="cheekbone_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="172.3" cy="480.3" r="4" data-vertex-id="45" data-home-x="172.3" data-home-y="480.3"/>
      <circle class="rf-vertex" cx="827.7" cy="480.4" r="4" data-vertex-id="46" data-home-x="827.7" data-home-y="480.4"/>
      <circle class="rf-vertex" cx="193.4" cy="494.4" r="4" data-vertex-id="55" data-home-x="193.4" data-home-y="494.4"/>
      <circle class="rf-vertex" cx="806.7" cy="494.6" r="4" data-vertex-id="56" data-home-x="806.7" data-home-y="494.6"/>
      <circle class="rf-vertex" cx="169.2" cy="494.9" r="4" data-vertex-id="57" data-home-x="169.2" data-home-y="494.9"/>
      <circle class="rf-vertex" cx="830.8" cy="494.9" r="4" data-vertex-id="58" data-home-x="830.8" data-home-y="494.9"/>
      <circle class="rf-vertex" cx="768.7" cy="552.6" r="4" data-vertex-id="84" data-home-x="768.7" data-home-y="552.6"/>
      <circle class="rf-vertex" cx="231.4" cy="552.7" r="4" data-vertex-id="85" data-home-x="231.4" data-home-y="552.7"/>
      <circle class="rf-vertex" cx="813.6" cy="591.9" r="4" data-vertex-id="88" data-home-x="813.6" data-home-y="591.9"/>
      <circle class="rf-vertex" cx="186.3" cy="592.0" r="4" data-vertex-id="89" data-home-x="186.3" data-home-y="592.0"/>
      <circle class="rf-vertex" cx="231.4" cy="616.8" r="4" data-vertex-id="90" data-home-x="231.4" data-home-y="616.8"/>
      <circle class="rf-vertex" cx="768.5" cy="616.9" r="4" data-vertex-id="91" data-home-x="768.5" data-home-y="616.9"/>
    </g>
  </g>

  <!-- Cheeks: Inner cheek area -->
  <g id="cheek" data-label="Cheeks" data-description="Inner cheek area">
    <g id="cheek_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="374.3" cy="584.9" r="4" data-vertex-id="86" data-home-x="374.3" data-home-y="584.9"/>
      <circle class="rf-vertex" cx="625.6" cy="585.0" r="4" data-vertex-id="87" data-home-x="625.6" data-home-y="585.0"/>
    </g>
  </g>

  <!-- Mouth: Mouth and lips wireframe -->
  <g id="mouth" data-label="Mouth" data-description="Mouth and lips wireframe">
    <g id="mouth_edges" class="region-edges">
      <line class="rf-edge" x1="697.4" y1="645.5" x2="672.0" y2="678.6" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="302.5" y1="645.5" x2="328.1" y2="678.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="672.0" y1="678.6" x2="660.0" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="328.1" y1="678.7" x2="339.9" y2="756.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="476.9" y1="755.9" x2="398.1" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="523.0" y1="755.9" x2="602.0" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="339.9" y1="756.3" x2="398.1" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="660.0" y1="756.3" x2="602.0" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="472.6" y1="784.9" x2="398.1" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="472.6" y1="784.9" x2="602.0" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="472.6" y1="784.9" x2="499.9" y2="791.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="527.5" y1="785.0" x2="602.0" y2="787.1" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="527.5" y1="785.0" x2="499.9" y2="791.4" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="mouth_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="697.4" cy="645.5" r="4" data-vertex-id="96" data-home-x="697.4" data-home-y="645.5"/>
      <circle class="rf-vertex" cx="302.5" cy="645.5" r="4" data-vertex-id="97" data-home-x="302.5" data-home-y="645.5"/>
      <circle class="rf-vertex" cx="672.0" cy="678.6" r="4" data-vertex-id="106" data-home-x="672.0" data-home-y="678.6"/>
      <circle class="rf-vertex" cx="328.1" cy="678.7" r="4" data-vertex-id="107" data-home-x="328.1" data-home-y="678.7"/>
      <circle class="rf-vertex" cx="476.9" cy="755.9" r="4" data-vertex-id="119" data-home-x="476.9" data-home-y="755.9"/>
      <circle class="rf-vertex" cx="523.0" cy="755.9" r="4" data-vertex-id="120" data-home-x="523.0" data-home-y="755.9"/>
      <circle class="rf-vertex" cx="339.9" cy="756.3" r="4" data-vertex-id="121" data-home-x="339.9" data-home-y="756.3"/>
      <circle class="rf-vertex" cx="660.0" cy="756.3" r="4" data-vertex-id="122" data-home-x="660.0" data-home-y="756.3"/>
      <circle class="rf-vertex" cx="472.6" cy="784.9" r="4" data-vertex-id="125" data-home-x="472.6" data-home-y="784.9"/>
      <circle class="rf-vertex" cx="527.5" cy="785.0" r="4" data-vertex-id="126" data-home-x="527.5" data-home-y="785.0"/>
      <circle class="rf-vertex" cx="398.1" cy="787.1" r="4" data-vertex-id="127" data-home-x="398.1" data-home-y="787.1"/>
      <circle class="rf-vertex" cx="602.0" cy="787.1" r="4" data-vertex-id="128" data-home-x="602.0" data-home-y="787.1"/>
      <circle class="rf-vertex" cx="499.9" cy="791.4" r="4" data-vertex-id="129" data-home-x="499.9" data-home-y="791.4"/>
    </g>
  </g>

  <!-- Upper Jaw: Upper jawline -->
  <g id="jaw_upper" data-label="Upper Jaw" data-description="Upper jawline">
    <g id="jaw_upper_edges" class="region-edges">
      <line class="rf-edge" x1="212.7" y1="659.7" x2="231.5" y2="675.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="787.4" y1="659.7" x2="768.9" y2="675.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="251.3" y1="673.3" x2="231.5" y2="675.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="251.3" y1="673.3" x2="259.4" y2="717.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="748.9" y1="673.5" x2="768.9" y2="675.2" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="748.9" y1="673.5" x2="740.5" y2="717.3" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="jaw_upper_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="212.7" cy="659.7" r="4" data-vertex-id="98" data-home-x="212.7" data-home-y="659.7"/>
      <circle class="rf-vertex" cx="787.4" cy="659.7" r="4" data-vertex-id="99" data-home-x="787.4" data-home-y="659.7"/>
      <circle class="rf-vertex" cx="251.3" cy="673.3" r="4" data-vertex-id="102" data-home-x="251.3" data-home-y="673.3"/>
      <circle class="rf-vertex" cx="748.9" cy="673.5" r="4" data-vertex-id="103" data-home-x="748.9" data-home-y="673.5"/>
      <circle class="rf-vertex" cx="231.5" cy="675.2" r="4" data-vertex-id="104" data-home-x="231.5" data-home-y="675.2"/>
      <circle class="rf-vertex" cx="768.9" cy="675.2" r="4" data-vertex-id="105" data-home-x="768.9" data-home-y="675.2"/>
      <circle class="rf-vertex" cx="259.4" cy="717.2" r="4" data-vertex-id="117" data-home-x="259.4" data-home-y="717.2"/>
      <circle class="rf-vertex" cx="740.5" cy="717.3" r="4" data-vertex-id="118" data-home-x="740.5" data-home-y="717.3"/>
    </g>
  </g>

  <!-- Mid Jaw: Middle jawline -->
  <g id="jaw_mid" data-label="Mid Jaw" data-description="Middle jawline">
    <g id="jaw_mid_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="272.6" cy="782.6" r="4" data-vertex-id="123" data-home-x="272.6" data-home-y="782.6"/>
      <circle class="rf-vertex" cx="727.3" cy="782.6" r="4" data-vertex-id="124" data-home-x="727.3" data-home-y="782.6"/>
    </g>
  </g>

  <!-- Upper Chin: Upper chin area -->
  <g id="chin_upper" data-label="Upper Chin" data-description="Upper chin area">
    <g id="chin_upper_edges" class="region-edges">
      <line class="rf-edge" x1="460.6" y1="825.7" x2="539.4" y2="825.7" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="chin_upper_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="460.6" cy="825.7" r="4" data-vertex-id="130" data-home-x="460.6" data-home-y="825.7"/>
      <circle class="rf-vertex" cx="539.4" cy="825.7" r="4" data-vertex-id="131" data-home-x="539.4" data-home-y="825.7"/>
      <circle class="rf-vertex" cx="451.9" cy="855.2" r="4" data-vertex-id="132" data-home-x="451.9" data-home-y="855.2"/>
      <circle class="rf-vertex" cx="548.1" cy="855.2" r="4" data-vertex-id="133" data-home-x="548.1" data-home-y="855.2"/>
      <circle class="rf-vertex" cx="327.3" cy="861.3" r="4" data-vertex-id="134" data-home-x="327.3" data-home-y="861.3"/>
      <circle class="rf-vertex" cx="672.8" cy="861.4" r="4" data-vertex-id="135" data-home-x="672.8" data-home-y="861.4"/>
    </g>
  </g>

  <!-- Chin: Lower chin and jaw bottom -->
  <g id="chin" data-label="Chin" data-description="Lower chin and jaw bottom">
    <g id="chin_edges" class="region-edges">
      <line class="rf-edge" x1="370.8" y1="895.8" x2="440.3" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="629.2" y1="895.9" x2="559.7" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="423.6" y1="898.6" x2="440.3" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="576.3" y1="898.7" x2="559.7" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
      <line class="rf-edge" x1="440.3" y1="950.0" x2="559.7" y2="950.0" stroke-dasharray="1200" stroke-dashoffset="1200"/>
    </g>
    <g id="chin_vertices" class="region-vertices">
      <circle class="rf-vertex" cx="370.8" cy="895.8" r="4" data-vertex-id="136" data-home-x="370.8" data-home-y="895.8"/>
      <circle class="rf-vertex" cx="629.2" cy="895.9" r="4" data-vertex-id="137" data-home-x="629.2" data-home-y="895.9"/>
      <circle class="rf-vertex" cx="423.6" cy="898.6" r="4" data-vertex-id="138" data-home-x="423.6" data-home-y="898.6"/>
      <circle class="rf-vertex" cx="576.3" cy="898.7" r="4" data-vertex-id="139" data-home-x="576.3" data-home-y="898.7"/>
      <circle class="rf-vertex" cx="440.3" cy="950.0" r="4" data-vertex-id="140" data-home-x="440.3" data-home-y="950.0"/>
      <circle class="rf-vertex" cx="559.7" cy="950.0" r="4" data-vertex-id="141" data-home-x="559.7" data-home-y="950.0"/>
    </g>
  </g>

</svg>
  </div>
    <div class="roster-title reveal">The Roster</div>
    <div class="roster-table reveal">
      <a href="luminaries.html#boris" class="roster-row">
        <span class="roster-name">Boris</span>
        <span class="roster-discipline">Executive Assistant</span>
        <span class="roster-brief">Your chief of staff. Daily briefings, calendar, and the next right move.</span>
      </a>
      <a href="luminaries.html#aurora" class="roster-row">
        <span class="roster-name">Aurora</span>
        <span class="roster-discipline">Social Media Manager</span>
        <span class="roster-brief">Writes your captions, stories, and posts across every channel.</span>
      </a>
      <a href="luminaries.html#luna" class="roster-row">
        <span class="roster-name">Luna</span>
        <span class="roster-discipline">Email &amp; SMS Director</span>
        <span class="roster-brief">Writes every marketing email and SMS your brand sends.</span>
      </a>
      <a href="luminaries.html#orion" class="roster-row">
        <span class="roster-name">Orion</span>
        <span class="roster-discipline">Editorial &amp; SEO Lead</span>
        <span class="roster-brief">Publishes long-form editorial directly to your store.</span>
      </a>
      <a href="luminaries.html#zenith" class="roster-row">
        <span class="roster-name">Zenith</span>
        <span class="roster-discipline">Trend Analyst</span>
        <span class="roster-brief">Watches culture and tells you what to ride before it peaks.</span>
      </a>
      <a href="luminaries.html#argus" class="roster-row">
        <span class="roster-name">Argus</span>
        <span class="roster-discipline">Lead Generation Strategist</span>
        <span class="roster-brief">Builds your prospect pipeline and keeps it clean.</span>
      </a>
      <a href="luminaries.html#atlas" class="roster-row">
        <span class="roster-name">Atlas</span>
        <span class="roster-discipline">Campaign Operations Lead</span>
        <span class="roster-brief">Runs your cold outreach end-to-end at scale.</span>
      </a>
      <a href="luminaries.html#flux" class="roster-row">
        <span class="roster-name">Flux</span>
        <span class="roster-discipline">Paid Media Buyer</span>
        <span class="roster-brief">Optimizes your Meta spend in real time.</span>
      </a>
      <a href="luminaries.html#astra" class="roster-row">
        <span class="roster-name">Astra</span>
        <span class="roster-discipline">Creative Director &amp; Prompt Engineer</span>
        <span class="roster-brief">Generates on-brand imagery, moodboards, and visual systems.</span>
      </a>
      <a href="luminaries.html#sol" class="roster-row">
        <span class="roster-name">Sol</span>
        <span class="roster-discipline">Retention &amp; Loyalty Manager</span>
        <span class="roster-brief">Keeps your VIPs close and catches churn before it happens.</span>
      </a>
      <a href="luminaries.html#mint" class="roster-row">
        <span class="roster-name">Mint</span>
        <span class="roster-discipline">Financial Analyst</span>
        <span class="roster-brief">Reads the numbers and tells you the truth.</span>
      </a>
    </div>
    </div><!-- /roster-face-wrap -->

    <div class="lum-grid">

      <div class="lum-card">
        <div class="lum-number">Luminary 01</div>
        <div class="lum-name">Boris</div>
        <div class="lum-role">Executive Luminary</div>
        <div class="lum-tagline">Your chief of staff.</div>
        <ul class="lum-bullets">
          <li>Push notification briefing with live orders, inventory, and priority hierarchy</li>
          <li>Reviews every luminary’s work and flags what requires your attention</li>
          <li>Tracks all campaigns, content, leads, and conversions in one view</li>
        </ul>
        <a href="luminaries.html#boris" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 02</div>
        <div class="lum-name">Aurora</div>
        <div class="lum-role">Social Media Luminary</div>
        <div class="lum-tagline">Your in-house social director.</div>
        <ul class="lum-bullets">
          <li>Creates and publishes content across Instagram, Facebook, TikTok, and X</li>
          <li>Trained on your voice architecture, never reverts to industry clichés</li>
          <li>Produces planned calendars, reactive posts, and product spotlights</li>
        </ul>
        <a href="luminaries.html#aurora" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 03</div>
        <div class="lum-name">Luna</div>
        <div class="lum-role">Email &amp; SMS Luminary</div>
        <div class="lum-tagline">Your direct-to-customer voice.</div>
        <ul class="lum-bullets">
          <li>Connects to Klaviyo or any email platform with API access</li>
          <li>Composes campaigns, flows, sequences, and VIP communications</li>
          <li>Personalizes at the segment level using live customer data</li>
        </ul>
        <a href="luminaries.html#luna" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 04</div>
        <div class="lum-name">Orion</div>
        <div class="lum-role">SEO &amp; Content Engine Luminary</div>
        <div class="lum-tagline">Your editorial powerhouse.</div>
        <ul class="lum-bullets">
          <li>Publishes long-form SEO content to Shopify across six content categories</li>
          <li>Cross-references live product data before publishing</li>
          <li>Optimizes for traditional search and generative engines</li>
        </ul>
        <a href="luminaries.html#orion" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 05</div>
        <div class="lum-name">Zenith</div>
        <div class="lum-role">Trends &amp; Intelligence Luminary</div>
        <div class="lum-tagline">Your eyes on the horizon.</div>
        <ul class="lum-bullets">
          <li>Monitors luxury, wellness, and beauty landscape for emerging trends</li>
          <li>Feeds intelligence directly to Aurora, Luna, and Orion</li>
          <li>Tracks competitor activity, launches, and positioning changes</li>
        </ul>
        <a href="luminaries.html#zenith" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 06</div>
        <div class="lum-name">Argus</div>
        <div class="lum-role">Lead Generation Luminary</div>
        <div class="lum-tagline">The hundred-eyed observer.</div>
        <ul class="lum-bullets">
          <li>Scrapes prospect data from 55 target cities daily</li>
          <li>Scores leads by relevance, fit, and purchase likelihood</li>
          <li>Feeds Atlas a continuous stream of fresh, deduplicated prospects</li>
        </ul>
        <a href="luminaries.html#argus" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 07</div>
        <div class="lum-name">Atlas</div>
        <div class="lum-role">Campaign Operations Luminary</div>
        <div class="lum-tagline">He carries your entire outbound program.</div>
        <ul class="lum-bullets">
          <li>Sends over 1,000 personalized emails daily across four verticals</li>
          <li>Runs three-email follow-up sequences with reply detection</li>
          <li>Manages bounces, opt-outs, and deliverability</li>
        </ul>
        <a href="luminaries.html#atlas" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card">
        <div class="lum-number">Luminary 08</div>
        <div class="lum-name">Flux</div>
        <div class="lum-role">Paid Ads Luminary</div>
        <div class="lum-tagline">The current that flows through the funnel.</div>
        <ul class="lum-bullets">
          <li>Connects directly to your live Meta Ads account</li>
          <li>Composes ad copy in your brand voice and pairs with optimal creative</li>
          <li>Manages budget, audience targeting, and creative rotation in real time</li>
        </ul>
        <a href="luminaries.html#flux" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card" style="display:flex;align-items:center;justify-content:center;text-align:center;min-height:400px;">
        <div>
          <div class="lum-number" style="margin-bottom:24px;">The Complete Maison</div>
          <div style="font-family:'Didot','Bodoni 72','Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1.5;color:rgba(244,239,231,0.82);max-width:26ch;margin:0 auto 40px;">Eleven specialized minds, one synchronized atelier, operating your brand as one.</div>
          <a href="#pricing" class="cta-button">See Pricing <span class="arrow">→</span></a>
        </div>
      </div>

      <div class="lum-coming-header">Coming Soon</div>

      <div class="lum-card" style="background:#010622;">
        <div class="lum-number">Luminary 09 &nbsp;&middot;&nbsp; <span style="color:#8efbb9;letter-spacing:0.3em;">COMING SOON</span></div>
        <div class="lum-name">Astra</div>
        <div class="lum-role">Artist &amp; Prompt Engineer Luminary</div>
        <div class="lum-tagline">Your visual consciousness.</div>
        <ul class="lum-bullets">
          <li>Connects to every major generative image platform</li>
          <li>Generates on-brand product photography, lifestyle imagery, and campaign visuals</li>
          <li>Maintains your visual DNA across color, composition, and mood</li>
        </ul>
        <a href="luminaries.html#astra" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card" style="background:#010622;">
        <div class="lum-number">Luminary 10 &nbsp;&middot;&nbsp; <span style="color:#8efbb9;letter-spacing:0.3em;">COMING SOON</span></div>
        <div class="lum-name">Sol</div>
        <div class="lum-role">Customer Retention &amp; Loyalty Luminary</div>
        <div class="lum-tagline">The one who remembers everyone.</div>
        <ul class="lum-bullets">
          <li>Manages post-purchase journeys, replenishment timing, and lifecycle communications</li>
          <li>Recognizes VIP customers and triggers personalized moments</li>
          <li>Catches at-risk customers before they depart</li>
        </ul>
        <a href="luminaries.html#sol" class="lum-dossier-link">Read dossier →</a>
      </div>

      <div class="lum-card" style="background:#010622;">
        <div class="lum-number">Luminary 11 &nbsp;&middot;&nbsp; <span style="color:#8efbb9;letter-spacing:0.3em;">COMING SOON</span></div>
        <div class="lum-name">Mint</div>
        <div class="lum-role">Financial Analytics Luminary</div>
        <div class="lum-tagline">The one who reads the numbers.</div>
        <ul class="lum-bullets">
          <li>Delivers live financial briefings: margin, CAC, LTV, cash position</li>
          <li>Pulls data from Shopify, payment processors, Klaviyo, and ad platforms</li>
          <li>Tracks contribution margin by SKU and forecasts cash flow</li>
        </ul>
        <a href="luminaries.html#mint" class="lum-dossier-link">Read dossier →</a>
      </div>
    </div>
    <div class="section-ornament">✦</div>
  </div>
</section>

<section class="constellation-panel">
  <div class="constellation">
    <svg id="scorpio" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position:absolute;top:0;left:0;width:100%;height:100%;">
      <!-- Main sweep -->
      <line class="s-line" x1="60"   y1="220" x2="260"  y2="150" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="260"  y1="150" x2="460"  y2="200" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="460"  y1="200" x2="660"  y2="120" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="660"  y1="120" x2="860"  y2="170" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="860"  y1="170" x2="1000" y2="75"  stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="1000" y1="75"  x2="1160" y2="180" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="1160" y1="180" x2="1340" y2="130" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="1340" y1="130" x2="1520" y2="200" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="1520" y1="200" x2="1720" y2="150" stroke-dasharray="600" stroke-dashoffset="600"/>
      <line class="s-line" x1="1720" y1="150" x2="1880" y2="195" stroke-dasharray="600" stroke-dashoffset="600"/>
      <!-- Branches -->
      <line class="s-line" x1="460"  y1="200" x2="380"  y2="310" stroke-dasharray="400" stroke-dashoffset="400"/>
      <line class="s-line" x1="660"  y1="120" x2="680"  y2="50"  stroke-dasharray="400" stroke-dashoffset="400"/>
      <line class="s-line" x1="1340" y1="130" x2="1300" y2="290" stroke-dasharray="400" stroke-dashoffset="400"/>
      <line class="s-line" x1="1720" y1="150" x2="1760" y2="280" stroke-dasharray="400" stroke-dashoffset="400"/>
      <!-- Stars -->
      <circle class="s-star"        data-home-x="60"   data-home-y="220" r="10"/>
      <circle class="s-star"        data-home-x="260"  data-home-y="150" r="9"/>
      <circle class="s-star"        data-home-x="460"  data-home-y="200" r="10"/>
      <circle class="s-star bright" data-home-x="660"  data-home-y="120" r="13"/>
      <circle class="s-star"        data-home-x="860"  data-home-y="170" r="9"/>
      <circle class="s-star bright" data-home-x="1000" data-home-y="75"  r="17"/>
      <circle class="s-star"        data-home-x="1160" data-home-y="180" r="9"/>
      <circle class="s-star bright" data-home-x="1340" data-home-y="130" r="13"/>
      <circle class="s-star"        data-home-x="1520" data-home-y="200" r="10"/>
      <circle class="s-star"        data-home-x="1720" data-home-y="150" r="11"/>
      <circle class="s-star bright" data-home-x="1880" data-home-y="195" r="13"/>
      <circle class="s-star"        data-home-x="380"  data-home-y="310" r="8"/>
      <circle class="s-star"        data-home-x="680"  data-home-y="50"  r="8"/>
      <circle class="s-star"        data-home-x="1300" data-home-y="290" r="8"/>
      <circle class="s-star"        data-home-x="1760" data-home-y="280" r="8"/>
    </svg>
  </div>
</section>

<!-- 04 · FOUNDER -->
<section class="section sage" id="founder">
  <div class="container">
    <span class="eyebrow-label reveal">The Founder</span>
    <h2 class="headline reveal">A fine artist who has spent <em>twenty-five years</em> inside the small details that make the difference.</h2>
    <div class="founder-body-row">
      <div class="founder-text">
        <p class="body-text reveal">Maison Forge was founded by David Foote, a fine artist with twenty-five years of practice and a résumé that moves easily between worlds. Seven sold-out solo exhibitions in New York. Three illustrated books, two with Knopf and one with Atria. A decade as a working fashion illustrator, his own clothing line, motion graphics for the MTV Video Music Awards, and a sixty-five-foot mural commissioned by Hanro of Switzerland for their Meatpacking flagship.</p>
        <p class="body-text reveal">For the last eighteen years, he has been the co-founder and Creative Director of Jaboneria Marianella, the eco-luxury bath and skincare house he runs out of a Brooklyn workshop. The brand is stocked at Bloomingdale's BEAUTYSPACE and in luxury boutiques worldwide, and has been featured in Vogue, Oprah, Forbes, Allure, and WWD.</p>
        <p class="body-text reveal">His visual sensibility was distilled from the worlds of high fashion, fine art, and the cinematic textures of film and motion graphics. He understands what sets apart a luxury brand and has spent his entire creative life obsessing over those details, the thousand small decisions nobody sees, but everyone feels. This is the DNA of every luminary at the Maison, the perspective of a founder who has personally produced thousands of pieces of content over nearly two decades.</p>
<div class="founder-signature reveal">David Foote · Founder · Brooklyn, New York</div>
      </div>
      <img class="founder-portrait" src="assets/images/DFstar.jpg" alt="" aria-hidden="true">
    </div>
    <div class="press-marquee-label reveal">Featured In</div>
    <div class="press-marquee reveal">
      <div class="press-marquee-track">
        <span>VOGUE</span><span class="diamond">★</span><span>HARPER'S BAZAAR</span><span class="diamond">★</span><span>ELLE</span><span class="diamond">★</span><span>ALLURE</span><span class="diamond">★</span><span>W MAGAZINE</span><span class="diamond">★</span><span>VANITY FAIR</span><span class="diamond">★</span><span>WWD</span><span class="diamond">★</span><span>FORBES</span><span class="diamond">★</span><span>THE NEW YORK TIMES</span><span class="diamond">★</span><span>OPRAH</span><span class="diamond">★</span><span>TOWN &amp; COUNTRY</span><span class="diamond">★</span><span>VOGUE</span><span class="diamond">★</span><span>HARPER'S BAZAAR</span><span class="diamond">★</span><span>ELLE</span><span class="diamond">★</span><span>ALLURE</span><span class="diamond">★</span><span>W MAGAZINE</span><span class="diamond">★</span><span>VANITY FAIR</span><span class="diamond">★</span><span>WWD</span><span class="diamond">★</span><span>FORBES</span><span class="diamond">★</span><span>THE NEW YORK TIMES</span><span class="diamond">★</span><span>OPRAH</span><span class="diamond">★</span><span>TOWN &amp; COUNTRY</span><span class="diamond">★</span>
      </div>
    </div>
    <div class="press-marquee reverse reveal">
      <div class="press-marquee-track">
        <span>GLAMOUR</span><span class="diamond">★</span><span>INSTYLE</span><span class="diamond">★</span><span>MARIE CLAIRE</span><span class="diamond">★</span><span>THE WALL STREET JOURNAL</span><span class="diamond">★</span><span>NEW YORK MAGAZINE</span><span class="diamond">★</span><span>THE CUT</span><span class="diamond">★</span><span>REFINERY29</span><span class="diamond">★</span><span>BYRDIE</span><span class="diamond">★</span><span>PEOPLE</span><span class="diamond">★</span><span>CONDÉ NAST TRAVELER</span><span class="diamond">★</span><span>MARTHA STEWART LIVING</span><span class="diamond">★</span><span>BLOOMBERG</span><span class="diamond">★</span><span>GLAMOUR</span><span class="diamond">★</span><span>INSTYLE</span><span class="diamond">★</span><span>MARIE CLAIRE</span><span class="diamond">★</span><span>THE WALL STREET JOURNAL</span><span class="diamond">★</span><span>NEW YORK MAGAZINE</span><span class="diamond">★</span><span>THE CUT</span><span class="diamond">★</span><span>REFINERY29</span><span class="diamond">★</span><span>BYRDIE</span><span class="diamond">★</span><span>PEOPLE</span><span class="diamond">★</span><span>CONDÉ NAST TRAVELER</span><span class="diamond">★</span><span>MARTHA STEWART LIVING</span><span class="diamond">★</span><span>BLOOMBERG</span><span class="diamond">★</span>
      </div>
    </div>
    <p class="body-text reveal" style="margin-top:80px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(16px,1.4vw,22px);line-height:1.7;font-style:normal;max-width:68ch;text-align:center;margin-left:auto;margin-right:auto;">Brand teams in 2026 are contracting. Headcount shrinks but the workload doubles. Every remaining team member is posting on five platforms, writing product copy, managing campaigns, and still shipping orders. The thread is stretching. Maison Forge exists because we lived that exact reality for eighteen years, and we built the house that stops the bleeding. We are not here so you can cut more people. We are here so you can keep your team whole and grow into the next hire instead of eliminating the last one. Eleven specialized luminaries, guided by a council whose careers have defined American taste for decades. Your ethos, protected. Your team, unburdened.</p>
    <div class="section-ornament">✦</div>
  </div>
</section>

<div class="corona-wrap" style="background:linear-gradient(to bottom,#6b6f6d,#d74933);">
  <svg id="corona" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
    <!-- Main arc sweep -->
    <line class="c-line" x1="60"   y1="290" x2="220"  y2="195" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="220"  y1="195" x2="420"  y2="120" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="420"  y1="120" x2="640"  y2="165" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="640"  y1="165" x2="800"  y2="75"  stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="800"  y1="75"  x2="960"  y2="125" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="960"  y1="125" x2="1120" y2="165" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="1120" y1="165" x2="1280" y2="100" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="1280" y1="100" x2="1500" y2="185" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="1500" y1="185" x2="1700" y2="205" stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="c-line" x1="1700" y1="205" x2="1880" y2="285" stroke-dasharray="700" stroke-dashoffset="700"/>
    <!-- Upper spires -->
    <line class="c-line" x1="420"  y1="120" x2="400"  y2="38"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="c-line" x1="800"  y1="75"  x2="800"  y2="18"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="c-line" x1="1280" y1="100" x2="1300" y2="30"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Lower trailing branches -->
    <line class="c-line" x1="220"  y1="195" x2="180"  y2="345" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="c-line" x1="640"  y1="165" x2="600"  y2="340" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="c-line" x1="1500" y1="185" x2="1540" y2="345" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="c-line" x1="1700" y1="205" x2="1740" y2="355" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Cross-connections for depth -->
    <line class="c-line" x1="960"  y1="125" x2="1000" y2="280" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Stars -->
    <circle class="c-star"        data-home-x="60"   data-home-y="290" r="4"/>
    <circle class="c-star"        data-home-x="220"  data-home-y="195" r="5"/>
    <circle class="c-star bright" data-home-x="420"  data-home-y="120" r="7"/>
    <circle class="c-star"        data-home-x="640"  data-home-y="165" r="5"/>
    <circle class="c-star bright" data-home-x="800"  data-home-y="75"  r="9"/>
    <circle class="c-star"        data-home-x="960"  data-home-y="125" r="5.5"/>
    <circle class="c-star"        data-home-x="1120" data-home-y="165" r="5"/>
    <circle class="c-star bright" data-home-x="1280" data-home-y="100" r="7"/>
    <circle class="c-star"        data-home-x="1500" data-home-y="185" r="5"/>
    <circle class="c-star"        data-home-x="1700" data-home-y="205" r="5.5"/>
    <circle class="c-star bright" data-home-x="1880" data-home-y="285" r="6"/>
    <circle class="c-star"        data-home-x="400"  data-home-y="38"  r="4"/>
    <circle class="c-star bright" data-home-x="800"  data-home-y="18"  r="5"/>
    <circle class="c-star"        data-home-x="1300" data-home-y="30"  r="4"/>
    <circle class="c-star"        data-home-x="180"  data-home-y="345" r="3.5"/>
    <circle class="c-star"        data-home-x="600"  data-home-y="340" r="3.5"/>
    <circle class="c-star"        data-home-x="1540" data-home-y="345" r="3.5"/>
    <circle class="c-star"        data-home-x="1740" data-home-y="355" r="3.5"/>
    <circle class="c-star"        data-home-x="1000" data-home-y="280" r="4"/>
  </svg>
</div>

<!-- 05 · BOARD -->
<section class="section navy" id="board" style="background:#d74933;">
  <svg class="section-stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><line x1="360" y1="420" x2="440" y2="340"/><line x1="440" y1="340" x2="560" y2="300"/><line x1="560" y1="300" x2="680" y2="340"/><line x1="680" y1="340" x2="760" y2="420"/><circle cx="360" cy="420" r="3.5"/><circle cx="440" cy="340" r="3.5"/><circle cx="560" cy="300" r="4"/><circle cx="680" cy="340" r="3.5"/><circle cx="760" cy="420" r="3.5"/></svg>
  <div class="container">
    <div class="sus-block reveal">
      <span class="sus-qa-number">30&#xD7; LESS WASTE</span>
      <h2 class="sus-qa-question">We are <span style="color:#f8fd54;">the most sustainable</span> way to run a modern brand.</h2>
      <p class="sus-qa-sub">Thirty times lighter on the planet. Per finished piece. Your data stays yours.</p>
      <p class="sus-qa-answer">Most AI workflows waste the majority of their energy reprocessing the same brand context, revising drafts, and reconciling inconsistent outputs across multiple tools. The result is high compute, fragmented quality, and unnecessary carbon. Maison Forge replaces that entire system with one unified pipeline that produces finished, brand-verified content in a single pass. When measured the only way that matters, energy per completed, quality-checked piece of content, Maison Forge uses up to thirty times less energy than the traditional AI stack. Traditional workflows consume approximately 135 to 225 watt-hours to produce 8 to 15 usable posts, or roughly 9 to 28 watt-hours per finished piece. Maison Forge produces 90 fully verified posts using approximately 45 watt-hours total, or about 0.5 watt-hours per piece. The same output. A fraction of the energy. A structurally lighter footprint by design.</p>
      <a href="sustainability.html" class="read-more" style="margin-top:36px;display:inline-block;">Read the full sustainability and security case &#8594;</a>
    </div>
    <div class="section-ornament sus-divider reveal">✦</div>
    <div style="position:relative;">
      <img src="assets/images/kelly.png" alt="" aria-hidden="true" style="position:absolute;right:-56px;bottom:-110px;width:52%;max-width:680px;opacity:0.5;pointer-events:none;mix-blend-mode:normal;background:transparent;filter:none;">
      <span class="eyebrow-label reveal">The Board</span>
      <h2 class="headline reveal">Our board represents a constellation of the most <em>distinguished names</em> <span style="color:#f8fd54;">in American luxury.</span></h2>
      <p class="body-text reveal">Maison Forge is advised by senior luminaries from the American luxury fashion, prestige beauty, fashion photography, and New York editorial establishment. Individuals who have devoted their careers to defining taste in this country, at houses whose names you recognize immediately. Names and credentials are disclosed privately with commissioned clients.</p>
      <a href="the-board.html" class="read-more reveal">Learn more about our board of stars →</a>
      <div class="section-ornament">✦</div>
    </div>
  </div>
</section>

<div class="lyra-wrap">
  <svg id="lyra" viewBox="0 0 1920 320" preserveAspectRatio="xMidYMid meet" aria-hidden="true" style="position:absolute;top:0;left:0;width:100%;height:100%;">
    <!-- Main sweeping arc -->
    <line class="l-line" x1="60"   y1="270" x2="220"  y2="185" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="220"  y1="185" x2="420"  y2="115" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="420"  y1="115" x2="640"  y2="160" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="640"  y1="160" x2="800"  y2="68"  stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="800"  y1="68"  x2="960"  y2="110" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="960"  y1="110" x2="1120" y2="68"  stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="1120" y1="68"  x2="1280" y2="160" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="1280" y1="160" x2="1500" y2="115" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="1500" y1="115" x2="1700" y2="185" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="l-line" x1="1700" y1="185" x2="1860" y2="270" stroke-dasharray="600" stroke-dashoffset="600"/>
    <!-- Upper spires -->
    <line class="l-line" x1="420"  y1="115" x2="400"  y2="34"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="800"  y1="68"  x2="800"  y2="12"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1120" y1="68"  x2="1120" y2="12"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1500" y1="115" x2="1520" y2="34"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Lower trailing drops -->
    <line class="l-line" x1="220"  y1="185" x2="185"  y2="310" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="640"  y1="160" x2="605"  y2="305" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="960"  y1="110" x2="960"  y2="280" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1280" y1="160" x2="1315" y2="305" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1700" y1="185" x2="1735" y2="310" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Cross connections for depth -->
    <line class="l-line" x1="640"  y1="160" x2="800"  y2="68"  stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1120" y1="68"  x2="1280" y2="160" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="800"  y1="68"  x2="960"  y2="280" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="l-line" x1="1120" y1="68"  x2="960"  y2="280" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Stars -->
    <circle class="l-star"        data-home-x="60"   data-home-y="270" r="4"/>
    <circle class="l-star"        data-home-x="220"  data-home-y="185" r="5"/>
    <circle class="l-star"        data-home-x="420"  data-home-y="115" r="5.5"/>
    <circle class="l-star"        data-home-x="640"  data-home-y="160" r="5"/>
    <circle class="l-star bright" data-home-x="800"  data-home-y="68"  r="8"/>
    <circle class="l-star bright" data-home-x="960"  data-home-y="110" r="7"/>
    <circle class="l-star bright" data-home-x="1120" data-home-y="68"  r="8"/>
    <circle class="l-star"        data-home-x="1280" data-home-y="160" r="5"/>
    <circle class="l-star"        data-home-x="1500" data-home-y="115" r="5.5"/>
    <circle class="l-star"        data-home-x="1700" data-home-y="185" r="5"/>
    <circle class="l-star"        data-home-x="1860" data-home-y="270" r="4"/>
    <circle class="l-star"        data-home-x="400"  data-home-y="34"  r="4"/>
    <circle class="l-star bright" data-home-x="800"  data-home-y="12"  r="5.5"/>
    <circle class="l-star bright" data-home-x="1120" data-home-y="12"  r="5.5"/>
    <circle class="l-star"        data-home-x="1520" data-home-y="34"  r="4"/>
    <circle class="l-star"        data-home-x="185"  data-home-y="310" r="3.5"/>
    <circle class="l-star"        data-home-x="605"  data-home-y="305" r="3.5"/>
    <circle class="l-star bright" data-home-x="960"  data-home-y="280" r="6"/>
    <circle class="l-star"        data-home-x="1315" data-home-y="305" r="3.5"/>
    <circle class="l-star"        data-home-x="1735" data-home-y="310" r="3.5"/>
  </svg>
</div>

<!-- 06 · DIFFERENCE (mint) -->
<section class="section sage" id="difference">
  <div class="diff-spotlight" aria-hidden="true"></div>
  <svg class="section-stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <!-- Left side circles -->
    <circle class="twinkle-1" cx="48"  cy="140" r="5"/>
    <circle class="twinkle-2" cx="110" cy="310" r="4"/>
    <circle class="twinkle-3" cx="60"  cy="480" r="6"/>
    <circle class="twinkle-4" cx="130" cy="620" r="4.5"/>
    <circle class="twinkle-5" cx="40"  cy="760" r="5"/>
    <circle class="twinkle-6" cx="170" cy="200" r="3.5"/>
    <circle class="twinkle-7" cx="90"  cy="860" r="4"/>
    <circle class="twinkle-8" cx="155" cy="700" r="5.5"/>
    <!-- Right side circles -->
    <circle class="twinkle-3" cx="1552" cy="130" r="5"/>
    <circle class="twinkle-1" cx="1490" cy="300" r="4"/>
    <circle class="twinkle-6" cx="1545" cy="470" r="6"/>
    <circle class="twinkle-4" cx="1470" cy="610" r="4.5"/>
    <circle class="twinkle-2" cx="1560" cy="750" r="5"/>
    <circle class="twinkle-7" cx="1430" cy="210" r="3.5"/>
    <circle class="twinkle-5" cx="1510" cy="855" r="4"/>
    <circle class="twinkle-8" cx="1445" cy="690" r="5.5"/>
  </svg>
  <div class="container">
    <span class="eyebrow-label reveal">The Difference</span>
    <h2 class="headline reveal">While everyone sells agents, <em>we ignite stars.</em></h2>
    <div class="reveal" style="margin-bottom:72px;">
      <div class="diff-title">Taste</div>
      <p class="body-text">Generic AI produces generic brands. That much is established. The reason every brand-voice tool on the market generates interchangeable copy is that they configure voice through tone sliders and a settings panel, then ask a base model to fill in the rest. Maison Forge orchestrates the opposite. Aurora and Luna are trained on fifteen-hundred-word voice prompts written by a creative director with twenty-five years of experience: banned words, banned sentence structures, content mix ratios, authentic founder-written examples, hashtag rules, symbol allowances, and the brand's actual narrative DNA. The voice is the foundation, not an afterthought.</p>
    </div>
    <div class="reveal" style="margin-bottom:72px;">
      <div class="diff-title">Execution</div>
      <p class="body-text">The two questions every serious buyer asks are whether the platform fabricates product claims and whether they will be trapped in an approval loop. The answer to both is the same. No. Orion ingests your authentic product data: fabric specifications for fashion, ingredient chemistry and supplier provenance for beauty, material origin for home, nutritional and tasting notes for food and beverage. Every claim is cross-referenced against the verified data before publication. If the data is missing or vague, Orion refuses to write. As for approval, you can require it. Every luminary operates in accordance with strict brand rules and verified product data. You receive a morning briefing from Boris on WhatsApp showing everything that was published, sent, and scheduled overnight. If you see something you do not like, you adjust the rule once, and it propagates across the Maison. This is how brands that actually scale operate. Drafts are not automation. Maison Forge actually executes.</p>
    </div>
    <div class="reveal">
      <div class="diff-title">From a Founder,<br>for Founders</div>
      <p class="body-text">Every other AI marketing platform was built by software founders who studied marketing from the outside. Maison Forge was built by someone who, with his mother, operates an 18-year-old eco-luxury skincare brand handcrafted in Brooklyn. Every feature exists because it served an authentic business and helped it flourish. The luminaries publish to Marianella's Shopify store before they publish to yours. Luna sends Marianella's emails before she sends yours. Atlas orchestrates Marianella's wholesale outreach before he orchestrates yours. If the platform breaks, the founder's own brand stops. You are not the beta test. Marianella is. That is the strongest alignment guarantee in the category, and no competitor can replicate it without first spending eighteen years building a brand.</p>
    </div>
    <a href="#" class="read-more reveal">Read the complete methodology →</a>
    <div class="section-ornament">✦</div>
  </div>
</section>

<div class="sect-fade" style="background: linear-gradient(to bottom, #31729e, #1C1C3A);"></div>

<!-- 07 · MATH -->
<section class="section navy" id="math" style="background:#1C1C3A;">
  <div class="container">
    <p class="body-text reveal" style="font-size:clamp(20px,2vw,30px);text-align:center;max-width:820px;margin:0 auto;line-height:1.65;">Let us be honest. Independent DTC and luxury brands are running on fumes. Three to ten people wearing ten hats each, everyone maxed, no one at their best, the team quietly shrinking. Maison Forge places a fleet of expertly trained specialists beneath yours, covering every function a modern brand requires, for the price of a single junior coordinator. The burnout ends. The growth begins. And your entire team can finally take a summer Friday.</p>
    <div class="section-ornament">✦</div>
  </div>
</section>

<div class="bota-wrap" style="background: linear-gradient(to bottom, #1C1C3A, #272d27);">
  <svg id="bota" viewBox="0 0 1920 340" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position:absolute;top:0;left:0;width:100%;height:100%;">
    <!-- NYC Skyline silhouette — left to right -->
    <!-- Brooklyn Bridge cables -->
    <line class="b-line" x1="60"  y1="300" x2="145" y2="188" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="b-line" x1="145" y1="188" x2="205" y2="158" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="b-line" x1="205" y1="158" x2="265" y2="188" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="b-line" x1="265" y1="188" x2="310" y2="268" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Lower Manhattan buildings -->
    <line class="b-line" x1="310" y1="268" x2="355" y2="228" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="b-line" x1="355" y1="228" x2="390" y2="268" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="b-line" x1="390" y1="268" x2="420" y2="215" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="b-line" x1="420" y1="215" x2="452" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- One World Trade Center — tallest spike -->
    <line class="b-line" x1="452" y1="300" x2="465" y2="32"  stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="b-line" x1="465" y1="32"  x2="478" y2="300" stroke-dasharray="700" stroke-dashoffset="700"/>
    <!-- Financial district continuing -->
    <line class="b-line" x1="478" y1="300" x2="530" y2="210" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="530" y1="210" x2="575" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="575" y1="300" x2="625" y2="198" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="625" y1="198" x2="670" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Midtown rise -->
    <line class="b-line" x1="670" y1="300" x2="730" y2="188" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="730" y1="188" x2="788" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Empire State Building -->
    <line class="b-line" x1="788" y1="300" x2="820" y2="42"  stroke-dasharray="700" stroke-dashoffset="700"/>
    <line class="b-line" x1="820" y1="42"  x2="852" y2="300" stroke-dasharray="700" stroke-dashoffset="700"/>
    <!-- Post-ESB midtown -->
    <line class="b-line" x1="852" y1="300" x2="910" y2="205" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="910" y1="205" x2="965" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- 432 Park Avenue — tall thin tower -->
    <line class="b-line" x1="965" y1="300" x2="990" y2="95"  stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="b-line" x1="990" y1="95"  x2="1015" y2="300" stroke-dasharray="500" stroke-dashoffset="500"/>
    <!-- Upper East / tapering right -->
    <line class="b-line" x1="1015" y1="300" x2="1080" y2="230" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1080" y1="230" x2="1150" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1150" y1="300" x2="1220" y2="248" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1220" y1="248" x2="1310" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1310" y1="300" x2="1380" y2="262" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1380" y1="262" x2="1480" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1480" y1="300" x2="1580" y2="272" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1580" y1="272" x2="1720" y2="300" stroke-dasharray="400" stroke-dashoffset="400"/>
    <line class="b-line" x1="1720" y1="300" x2="1860" y2="288" stroke-dasharray="400" stroke-dashoffset="400"/>
    <!-- Stars -->
    <circle class="b-star"        data-home-x="60"   data-home-y="300" r="5"/>
    <circle class="b-star bright" data-home-x="145"  data-home-y="188" r="9"/>
    <circle class="b-star bright" data-home-x="205"  data-home-y="158" r="10"/>
    <circle class="b-star bright" data-home-x="265"  data-home-y="188" r="9"/>
    <circle class="b-star"        data-home-x="310"  data-home-y="268" r="5.5"/>
    <circle class="b-star"        data-home-x="355"  data-home-y="228" r="6"/>
    <circle class="b-star"        data-home-x="390"  data-home-y="268" r="5"/>
    <circle class="b-star"        data-home-x="420"  data-home-y="215" r="6"/>
    <circle class="b-star"        data-home-x="452"  data-home-y="300" r="5"/>
    <circle class="b-star bright" data-home-x="465"  data-home-y="32"  r="12"/>
    <circle class="b-star"        data-home-x="478"  data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="530"  data-home-y="210" r="6"/>
    <circle class="b-star"        data-home-x="575"  data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="625"  data-home-y="198" r="6.5"/>
    <circle class="b-star"        data-home-x="670"  data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="730"  data-home-y="188" r="7"/>
    <circle class="b-star"        data-home-x="788"  data-home-y="300" r="5"/>
    <circle class="b-star bright" data-home-x="820"  data-home-y="42"  r="11"/>
    <circle class="b-star"        data-home-x="852"  data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="910"  data-home-y="205" r="6.5"/>
    <circle class="b-star"        data-home-x="965"  data-home-y="300" r="5"/>
    <circle class="b-star bright" data-home-x="990"  data-home-y="95"  r="9"/>
    <circle class="b-star"        data-home-x="1015" data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="1080" data-home-y="230" r="6"/>
    <circle class="b-star"        data-home-x="1150" data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="1220" data-home-y="248" r="6"/>
    <circle class="b-star"        data-home-x="1310" data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="1380" data-home-y="262" r="5.5"/>
    <circle class="b-star"        data-home-x="1480" data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="1580" data-home-y="272" r="5.5"/>
    <circle class="b-star"        data-home-x="1720" data-home-y="300" r="5"/>
    <circle class="b-star"        data-home-x="1860" data-home-y="288" r="5"/>
  </svg>
</div>

<!-- 08 · PRICING -->
<section class="section sage" id="pricing">
  <svg class="section-stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><line x1="300" y1="200" x2="500" y2="400"/><line x1="700" y1="180" x2="580" y2="400"/><line x1="500" y1="400" x2="540" y2="400"/><line x1="540" y1="400" x2="580" y2="400"/><line x1="500" y1="400" x2="420" y2="620"/><line x1="580" y1="400" x2="620" y2="640"/><circle cx="300" cy="200" r="5"/><circle cx="700" cy="180" r="5"/><circle cx="500" cy="400" r="4"/><circle cx="540" cy="400" r="4"/><circle cx="580" cy="400" r="4"/><circle cx="420" cy="620" r="4"/><circle cx="620" cy="640" r="4"/></svg>
  <div class="container">
    <span class="eyebrow-label reveal">Pricing</span>
    <h2 class="headline reveal">Build your maison. <em>Or take the complete forge.</em></h2>
    <div class="pricing-grid reveal">
      <div class="tier-card">
        <div class="tier-number">Tier 01</div>
        <div class="tier-name">Atelier</div>
        <div class="tier-price">$497 <span class="per">Monthly Subscription</span></div>
        <div class="tier-desc">Boris plus one luminary of your choice. Your starting constellation.</div>
        <ul>
          <li>Boris (Executive Luminary) included</li>
          <li>Choose any one additional luminary to begin with</li>
          <li>Add more luminaries à la carte as you grow</li>
          <li>Full access to the Maison Forge platform</li>
          <li>Email support</li>
        </ul>
        <a href="/commission?tier=atelier" class="cta-button">Begin with Atelier <span class="arrow">→</span></a>
      </div>
      <div class="tier-card">
        <div class="tier-number">Tier 02</div>
        <div class="tier-name">Constellation</div>
        <div class="tier-price">$1,497 <span class="per">Monthly Subscription</span></div>
        <div class="tier-desc">The eight essential luminaries we hand-pick for your brand. The curated team.</div>
        <ul>
          <li>We analyze your brand and assemble the eight luminaries that fit your business model</li>
          <li>No decision fatigue, no guesswork. The proven team.</li>
          <li>Save approximately $400 per month versus à la carte</li>
          <li>Includes Boris plus seven specialized luminaries chosen for you</li>
          <li>Priority email support</li>
        </ul>
        <a href="/commission?tier=constellation" class="cta-button">Begin with Constellation <span class="arrow">→</span></a>
      </div>
      <div class="tier-card recommended">
        <div class="recommended-tag">Recommended</div>
        <div class="tier-number">Tier 03</div>
        <div class="tier-name">Maison Pro</div>
        <div class="tier-price">$2,997 <span class="per">Monthly Subscription</span></div>
        <div class="tier-desc">All eleven luminaries plus dedicated strategy support. The complete forge.</div>
        <ul>
          <li>Every luminary in the maison: Boris, Aurora, Luna, Orion, Zenith, Argus, Atlas, Flux, Astra, Sol, and Mint</li>
          <li>Every specialty covered. Maximum coverage, maximum autonomy.</li>
          <li>Monthly strategy session with the founder</li>
          <li>Priority support across all luminaries</li>
          <li>First access to new luminaries and platform features</li>
        </ul>
        <a href="/commission?tier=pro" class="cta-button">Begin with Maison Pro <span class="arrow">→</span></a>
      </div>
      <div class="tier-card">
        <div class="tier-number">TIER 04</div>
        <div class="tier-name">Private Commission</div>
        <div class="tier-price">Let's talk.</div>
        <div class="tier-desc" style="font-style:italic;">For corporate brand teams, multi-brand portfolios, and enterprise operations.</div>
        <ul>
          <li>Bespoke deployment across departments, subsidiaries, or brand families</li>
          <li>Dedicated integration with existing martech, ERP, and compliance systems</li>
          <li>Custom luminary configuration with role-specific permissions and workflows</li>
          <li>Ongoing strategic partnership with the founding team</li>
          <li>SLA-backed uptime and priority support</li>
          <li>Scoped to your organization. Pricing shaped by scale.</li>
        </ul>
        <a href="/commission?tier=private" class="read-more" style="margin-top:24px;display:inline-block;">Begin a conversation →</a>
      </div>
    </div>
    <div class="reveal">
      <div class="a-la-carte-intro">Once you have your starting maison, you can add luminaries individually. They are organized by specialty so you can build the team that fits your brand.</div>
      <div class="alc-frame">
        <span class="alc-corner tl"></span>
        <span class="alc-corner tr"></span>
        <span class="alc-corner bl"></span>
        <span class="alc-corner br"></span>
        <span class="alc-corner tm"></span>
        <span class="alc-corner bm"></span>
        <span class="alc-corner ml"></span>
        <span class="alc-corner mr"></span>
        <div class="category-group">
          <div class="category-label">Content &amp; Voice</div>
          <div class="category-item"><span class="name">Aurora <span class="sub">Social Media</span></span><span class="price">$197 / month</span></div>
          <div class="category-item"><span class="name">Luna <span class="sub">Email &amp; SMS</span></span><span class="price">$197 / month</span></div>
          <div class="category-item"><span class="name">Orion <span class="sub">SEO &amp; Content Engine</span></span><span class="price">$297 / month</span></div>
        </div>
        <div class="category-group">
          <div class="category-label">Intelligence &amp; Creative</div>
          <div class="category-item"><span class="name">Zenith <span class="sub">Trends &amp; Intelligence</span></span><span class="price">$197 / month</span></div>
          <div class="category-item"><span class="name">Astra <span class="sub">Artist &amp; Prompt Engineer</span></span><span class="price">$297 / month</span></div>
        </div>
        <div class="category-group">
          <div class="category-label">Growth &amp; Outreach</div>
          <div class="category-item"><span class="name">Argus + Atlas <span class="sub">Lead Generation &amp; Campaign Operations</span></span><span class="price">$597 / month</span></div>
          <div class="category-item"><span class="name">Flux <span class="sub">Paid Ads</span></span><span class="price">$297 / month</span></div>
        </div>
        <div class="category-group">
          <div class="category-label">Retention &amp; Financial</div>
          <div class="category-item"><span class="name">Sol <span class="sub">Customer Retention &amp; Loyalty</span></span><span class="price">$297 / month</span></div>
          <div class="category-item"><span class="name">Mint <span class="sub">Financial Analytics</span></span><span class="price">$297 / month</span></div>
        </div>
      </div>
    </div>
    <a href="#" class="read-more reveal">See the full pricing page →</a>
    <div class="section-ornament">✦</div>
  </div>
</section>

<div class="aquila-wrap" style="background: linear-gradient(to bottom, #272d27 0%, #7a6030 60%, #E2C68D 100%); height: 460px; position: relative; z-index: 2;">
  <svg id="aquila" viewBox="0 0 1920 360" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position:absolute;top:0;left:0;width:100%;height:100%;">
    <!-- Left wing sweep -->
    <line class="q-line" x1="960"  y1="172" x2="760"  y2="140" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="760"  y1="140" x2="560"  y2="110" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="560"  y1="110" x2="360"  y2="152" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="360"  y1="152" x2="160"  y2="224" stroke-dasharray="600" stroke-dashoffset="600"/>
    <!-- Right wing sweep -->
    <line class="q-line" x1="960"  y1="172" x2="1160" y2="140" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="1160" y1="140" x2="1360" y2="110" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="1360" y1="110" x2="1560" y2="152" stroke-dasharray="600" stroke-dashoffset="600"/>
    <line class="q-line" x1="1560" y1="152" x2="1760" y2="224" stroke-dasharray="600" stroke-dashoffset="600"/>
    <!-- Upper spire from center -->
    <line class="q-line" x1="960"  y1="172" x2="960"  y2="56"  stroke-dasharray="300" stroke-dashoffset="300"/>
    <!-- Lower body drop -->
    <line class="q-line" x1="960"  y1="172" x2="900"  y2="268" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="q-line" x1="900"  y1="268" x2="840"  y2="326" stroke-dasharray="200" stroke-dashoffset="200"/>
    <line class="q-line" x1="960"  y1="172" x2="1020" y2="268" stroke-dasharray="300" stroke-dashoffset="300"/>
    <line class="q-line" x1="1020" y1="268" x2="1080" y2="326" stroke-dasharray="200" stroke-dashoffset="200"/>
    <!-- Wing tip spires -->
    <line class="q-line" x1="560"  y1="110" x2="540"  y2="40"  stroke-dasharray="200" stroke-dashoffset="200"/>
    <line class="q-line" x1="360"  y1="152" x2="320"  y2="78"  stroke-dasharray="200" stroke-dashoffset="200"/>
    <line class="q-line" x1="1360" y1="110" x2="1380" y2="40"  stroke-dasharray="200" stroke-dashoffset="200"/>
    <line class="q-line" x1="1560" y1="152" x2="1600" y2="78"  stroke-dasharray="200" stroke-dashoffset="200"/>
    <!-- Wing cross-braces for depth -->
    <line class="q-line" x1="760"  y1="140" x2="540"  y2="40"  stroke-dasharray="500" stroke-dashoffset="500"/>
    <line class="q-line" x1="1160" y1="140" x2="1380" y2="40"  stroke-dasharray="500" stroke-dashoffset="500"/>
    <!-- Stars -->
    <circle class="q-star bright" data-home-x="960"  data-home-y="172" r="12"/>
    <circle class="q-star"        data-home-x="760"  data-home-y="140" r="6.5"/>
    <circle class="q-star"        data-home-x="560"  data-home-y="110" r="7"/>
    <circle class="q-star bright" data-home-x="360"  data-home-y="152" r="8.5"/>
    <circle class="q-star"        data-home-x="160"  data-home-y="224" r="5.5"/>
    <circle class="q-star"        data-home-x="1160" data-home-y="140" r="6.5"/>
    <circle class="q-star"        data-home-x="1360" data-home-y="110" r="7"/>
    <circle class="q-star bright" data-home-x="1560" data-home-y="152" r="8.5"/>
    <circle class="q-star"        data-home-x="1760" data-home-y="224" r="5.5"/>
    <circle class="q-star bright" data-home-x="960"  data-home-y="56"  r="7"/>
    <circle class="q-star"        data-home-x="900"  data-home-y="268" r="5.5"/>
    <circle class="q-star"        data-home-x="840"  data-home-y="326" r="4.5"/>
    <circle class="q-star"        data-home-x="1020" data-home-y="268" r="5.5"/>
    <circle class="q-star"        data-home-x="1080" data-home-y="326" r="4.5"/>
    <circle class="q-star bright" data-home-x="540"  data-home-y="40"  r="6"/>
    <circle class="q-star"        data-home-x="320"  data-home-y="78"  r="5"/>
    <circle class="q-star bright" data-home-x="1380" data-home-y="40"  r="6"/>
    <circle class="q-star"        data-home-x="1600" data-home-y="78"  r="5"/>
  </svg>
</div>

<!-- 09 · WHO THIS IS FOR (mint) -->
<section class="section gold" id="for">
  <svg class="section-stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><circle cx="400" cy="300" r="4"/><circle cx="460" cy="260" r="3.5"/><circle cx="520" cy="320" r="4"/><circle cx="380" cy="360" r="3.5"/><circle cx="480" cy="380" r="3.5"/><circle cx="560" cy="280" r="3.5"/><circle cx="440" cy="420" r="3.5"/></svg>
  <div class="container">
    <span class="eyebrow-label reveal">WHO THIS IS FOR</span>
    <h2 class="headline reveal">Is this <em>for you?</em></h2>
    <p class="intro-text reveal" style="margin-top:32px;">Maison Forge was built inside a luxury house, but the maison was not built only for luxury brands. It was built for anyone who sells a high-end product or service and wants their marketing to read the way their work feels.</p>
    <ul class="for-list reveal">
      <li>Independent luxury and premium brand founders across every category</li>
      <li>Direct-to-consumer brands with strong identity who want to scale without losing voice</li>
      <li>Attorneys, private practices, and boutique firms whose clients expect a certain register</li>
      <li>Day spas, medspas, and wellness centers</li>
      <li>Hospitality, private clubs, and concierge services</li>
      <li>Any business that delivers a high-end experience and needs marketing that matches</li>
      <li>Brand owners doing six to seven figures in annual revenue</li>
      <li>Solo founders and lean teams who need leverage, not more tools</li>
      <li>Brands and practices priced out of agencies but priced into actual operations</li>
    </ul>
    <div class="section-ornament">✦</div>
  </div>
</section>


<!-- 11 · BEGIN -->
<section class="section" id="begin">
  <video class="begin-video-bg" muted loop playsinline id="begin-video" poster="clouds_poster.jpg">
    <source src="assets/video/clouds.mp4" type="video/mp4">
  </video>
  <div class="begin-video-overlay"></div>
  <div class="container" style="position:relative;z-index:1;">
    <h2 class="headline reveal" style="margin-left:auto;margin-right:auto;">Begin your <em>maison.</em></h2>
    <div class="subline-group reveal">
      <p>Your eleven luminaries are waiting.</p>
      <p>Forge your brand into something the maps don't show.</p>
      <p>Your eyes, back on the stars.</p>
    </div>
    <a href="/commission" class="cta-button reveal">Commission Your Maison <span class="arrow">→</span></a>
    <div class="trust-line reveal">Maison Forge welcomes new brands by application. The Founder reads every inquiry personally and responds within a day.</div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <svg class="footer-stars" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <line x1="280" y1="180" x2="440" y2="260"/>
    <line x1="440" y1="260" x2="560" y2="200"/>
    <line x1="440" y1="260" x2="640" y2="360"/>
    <line x1="640" y1="360" x2="520" y2="440"/>
    <line x1="520" y1="440" x2="380" y2="400"/>
    <line x1="380" y1="400" x2="280" y2="180"/>
    <circle cx="280" cy="180" r="3.5"/>
    <circle cx="440" cy="260" r="4"/>
    <circle cx="560" cy="200" r="3.5"/>
    <circle cx="640" cy="360" r="5"/>
    <circle cx="520" cy="440" r="3.5"/>
    <circle cx="380" cy="400" r="3.5"/>
    <line x1="900" y1="700" x2="1000" y2="600"/>
    <line x1="1000" y1="600" x2="1100" y2="720"/>
    <line x1="1100" y1="720" x2="1200" y2="600"/>
    <line x1="1200" y1="600" x2="1300" y2="720"/>
    <circle cx="900" cy="700" r="4"/>
    <circle cx="1000" cy="600" r="4.5"/>
    <circle cx="1100" cy="720" r="4"/>
    <circle cx="1200" cy="600" r="4.5"/>
    <circle cx="1300" cy="720" r="4"/>
    <circle cx="180" cy="780" r="2"/>
    <circle cx="320" cy="850" r="2.5"/>
    <circle cx="720" cy="180" r="2"/>
    <circle cx="820" cy="240" r="2.5"/>
    <circle cx="1380" cy="380" r="2"/>
    <circle cx="1460" cy="480" r="2.5"/>
    <circle cx="60" cy="500" r="2"/>
    <circle cx="1520" cy="820" r="2"/>
  </svg>
  <div class="wordmark">MAISON FORGE</div>
  <div class="descriptor">New York</div>
  <div class="brand-line">The luxury workshop where brands are forged. An autonomous team of eleven luminaries. One Maison.</div>
  <div class="meta-lines">
    <div>Established · MMXXVI</div>
    <div>Brooklyn · New York</div>
    <div><a href="https://calendly.com/david-marianellasoap/30min" style="color:inherit;">Book a Discovery Call →</a></div>
    <div><a href="mailto:info@maisonforge.ai">info@maisonforge.ai</a></div>
  </div>
  <div class="copyright">© MMXXVI · Maison Forge · All Rights Reserved · info@maisonforge.ai</div>
</footer>


<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// ============================================================
// HAMBURGER MENU
// ============================================================
function initMenu() {
  const burger = document.getElementById('nav-burger');
  const overlay = document.getElementById('menu-overlay');
  if (!burger || !overlay) return;
  burger.addEventListener('click', () => {
    const open = overlay.classList.toggle('open');
    burger.classList.toggle('open', open);
    document.body.style.overflow = open ? 'hidden' : '';
  });
  overlay.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', () => {
      overlay.classList.remove('open');
      burger.classList.remove('open');
      document.body.style.overflow = '';
    });
  });
}
initMenu();

// CUSTOM CURSOR
// ============================================================
(function() {
  const cursor = document.getElementById('cursor');
  if (!cursor || window.innerWidth < 1024) return;
  let mx = window.innerWidth / 2, my = window.innerHeight / 2;
  let cx = mx, cy = my;
  window.addEventListener('mousemove', (e) => { mx = e.clientX; my = e.clientY; });
  function tick() {
    cx += (mx - cx) * 0.18;
    cy += (my - cy) * 0.18;
    cursor.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
    requestAnimationFrame(tick);
  }
  tick();
  document.querySelectorAll('a, button').forEach(el => {
    el.addEventListener('mouseenter', () => cursor.classList.add('expanded'));
    el.addEventListener('mouseleave', () => cursor.classList.remove('expanded'));
  });
})();

// ============================================================
// LOADING SYSTEM
// ============================================================
let lenis;
let phaseAComplete = false;
let windowLoaded = false;
let phaseAStartTime = 0;
const MIN_LOADER_DURATION = 5000;

document.addEventListener('DOMContentLoaded', () => {
  document.body.classList.add('loading');
  if (window.mfVideoPromise) {
    window.mfVideoPromise.then(() => {
      phaseAStartTime = Date.now();
      initLoaderPhase();
    });
  } else {
    phaseAStartTime = Date.now();
    initLoaderPhase();
  }
});

window.addEventListener('load', () => {
  windowLoaded = true;
  tryStartReveal();
});

function initLoaderPhase() {
  const universe = document.getElementById('universe');
  const W = window.innerWidth;
  const H = 720;
  universe.setAttribute('viewBox', `0 0 ${W} ${H}`);

  function starPath(cx, cy, r) {
    const points = [];
    for (let i = 0; i < 10; i++) {
      const angle = (Math.PI / 5) * i - Math.PI / 2;
      const radius = i % 2 === 0 ? r : r * 0.4;
      const x = cx + Math.cos(angle) * radius;
      const y = cy + Math.sin(angle) * radius;
      points.push(`${x.toFixed(2)},${y.toFixed(2)}`);
    }
    return points.join(' ');
  }

  // ==========================================================
  // STAR GENERATION — ONE CONTINUOUS FLOW
  // Stars fade in across the ENTIRE 6+ second load duration.
  // Excluded from BOTH the MF mark area AND the quote area
  // so neither logo nor text has stars sitting on top of it.
  // ==========================================================

  const cx = W / 2;
  const cy = H / 2;
  // Elliptical exclusion around where the MF mark will appear
  const EXCL_MF_X = 220;
  const EXCL_MF_Y = 140;
  // Rectangular exclusion around the quote + bar (centered, ~640x220)
  const EXCL_QUOTE_W = 640;
  const EXCL_QUOTE_H = 220;
  const exclQuoteLeft   = cx - EXCL_QUOTE_W / 2;
  const exclQuoteRight  = cx + EXCL_QUOTE_W / 2;
  const exclQuoteTop    = cy - EXCL_QUOTE_H / 2;
  const exclQuoteBottom = cy + EXCL_QUOTE_H / 2;

  function isInsideExclusions(x, y) {
    // MF ellipse check
    const nx = (x - cx) / EXCL_MF_X;
    const ny = (y - cy) / EXCL_MF_Y;
    if (nx * nx + ny * ny < 1) return true;
    // Quote rectangle check
    if (x > exclQuoteLeft && x < exclQuoteRight && y > exclQuoteTop && y < exclQuoteBottom) return true;
    return false;
  }

  const TINY_COUNT = 120;
  window._tinyStars = [];
  const tinyPositions = [];

  let tinyAttempts = 0;
  while (window._tinyStars.length < TINY_COUNT && tinyAttempts < 5000) {
    tinyAttempts++;
    const x = Math.random() * W;
    const y = Math.random() * H;
    if (isInsideExclusions(x, y)) continue;

    const star = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    star.setAttribute('points', starPath(x, y, 1.8));
    star.setAttribute('class', 'tiny-star');
    const target = 0.4 + Math.random() * 0.5;
    const delay = 0.3 + Math.random() * 5.5;
    star.style.setProperty('--star-target', target);
    star.style.animation = `star-fade-in 1.5s ease-out ${delay}s forwards`;
    universe.appendChild(star);
    window._tinyStars.push(star);
    tinyPositions.push({ x, y });
  }

  // Big stars
  const supporting = document.getElementById('supporting');
  supporting.setAttribute('viewBox', `0 0 ${W} ${H}`);

  const MIN_DIST_FROM_TINY = 30;
  const MIN_DIST_FROM_BIG = 90;
  const BIG_TARGET = 28;
  window._supportingDots = [];

  const placedBig = [];
  let bigAttempts = 0;
  const MAX_ATTEMPTS = 2000;
  while (placedBig.length < BIG_TARGET && bigAttempts < MAX_ATTEMPTS) {
    bigAttempts++;
    const sx = 70 + Math.random() * (W - 140);
    const sy = 60 + Math.random() * (H - 120);

    if (isInsideExclusions(sx, sy)) continue;

    let tooCloseToTiny = false;
    for (const t of tinyPositions) {
      const dx = sx - t.x;
      const dy = sy - t.y;
      if (dx * dx + dy * dy < MIN_DIST_FROM_TINY * MIN_DIST_FROM_TINY) {
        tooCloseToTiny = true;
        break;
      }
    }
    if (tooCloseToTiny) continue;

    let tooCloseToBig = false;
    for (const b of placedBig) {
      const dx = sx - b.x;
      const dy = sy - b.y;
      if (dx * dx + dy * dy < MIN_DIST_FROM_BIG * MIN_DIST_FROM_BIG) {
        tooCloseToBig = true;
        break;
      }
    }
    if (tooCloseToBig) continue;

    placedBig.push({ x: sx, y: sy });
  }

  placedBig.forEach(pos => {
    const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    dot.setAttribute('cx', pos.x);
    dot.setAttribute('cy', pos.y);
    dot.setAttribute('r', 3.5 + Math.random() * 1.8);
    const sTarget = 0.75 + Math.random() * 0.25;
    const sDelay = 0.3 + Math.random() * 5.5;
    dot.style.setProperty('--star-target', sTarget);
    dot.style.opacity = '0';
    dot.style.animation = `star-fade-in 1.5s ease-out ${sDelay}s forwards`;
    supporting.appendChild(dot);
    window._supportingDots.push(dot);
  });

  // ==========================================================
  // LOADER TEXT — sits inside the materialization
  // Quote + bar fade in at 1.0s
  // Bar fills from 1.2s to 7.2s (6 seconds)
  // Loader fades out at 6.8s — OVERLAPPING the M reveal so the
  // handoff is fluid, not blocky
  // M reveal phase begins at 7.2s while loader is still finishing fade
  // ==========================================================
  const loader = document.getElementById('loader');
  const barFill = document.getElementById('bar-fill');

  setTimeout(() => { loader.classList.add('in'); }, 1000);

  // ==========================================================
  // HONEST LOADER
  // The bar is wired to real readiness signals. It does NOT use
  // a fake timer. Stars keep animating the entire time. The bar
  // surges to 100% only when fonts, images, and the window load
  // event have all genuinely fired, then hands off to the M reveal.
  // ==========================================================
  let realProgress = 0;
  let progressTarget = 0.05;
  let allImagesReady = false;
  let fontsReady = false;
  let windowReady = false;

  function tickProgress() {
    realProgress += (progressTarget - realProgress) * 0.06;
    barFill.style.width = (realProgress * 100).toFixed(2) + '%';
    if (realProgress < 0.999 || progressTarget < 1) {
      requestAnimationFrame(tickProgress);
    } else {
      handoffToReveal();
    }
  }
  setTimeout(() => {
    barFill.style.transition = 'none';
    barFill.style.width = '0%';
    requestAnimationFrame(tickProgress);
  }, 1200);

  function recomputeTarget() {
    let t = 0.08;
    if (document.readyState === 'interactive') t = Math.max(t, 0.30);
    if (document.readyState === 'complete') t = Math.max(t, 0.55);
    if (fontsReady) t += 0.15;
    if (allImagesReady) t += 0.18;
    if (windowReady) t += 0.12;
    if (fontsReady && allImagesReady && windowReady) t = 1.0;
    progressTarget = Math.max(progressTarget, t);
  }

  if (document.readyState === 'complete') {
    windowReady = true;
    recomputeTarget();
  } else {
    window.addEventListener('load', () => {
      windowReady = true;
      recomputeTarget();
    });
  }

  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(() => {
      fontsReady = true;
      recomputeTarget();
    });
  } else {
    fontsReady = true;
  }

  function checkImages() {
    const imgs = Array.from(document.images || []);
    if (imgs.length === 0) {
      allImagesReady = true;
      recomputeTarget();
      return;
    }
    let pending = imgs.length;
    imgs.forEach(img => {
      const done = () => {
        pending--;
        progressTarget = Math.min(0.92, progressTarget + (0.18 / imgs.length));
        if (pending === 0) {
          allImagesReady = true;
          recomputeTarget();
        }
      };
      if (img.complete) {
        done();
      } else {
        img.addEventListener('load', done, { once: true });
        img.addEventListener('error', done, { once: true });
      }
    });
  }

  document.addEventListener('readystatechange', recomputeTarget);
  if (document.readyState !== 'loading') {
    recomputeTarget();
    checkImages();
  } else {
    document.addEventListener('DOMContentLoaded', () => {
      recomputeTarget();
      checkImages();
    });
  }

  let handoffFired = false;
  function handoffToReveal() {
    if (handoffFired) return;
    handoffFired = true;
    const elapsed = Date.now() - phaseAStartTime;
    const holdMs = Math.max(0, MIN_LOADER_DURATION - 400 - elapsed);
    setTimeout(() => {
      loader.classList.remove('in');
      setTimeout(() => {
        phaseAComplete = true;
        tryStartReveal();
      }, 400);
    }, holdMs);
  }
}

function tryStartReveal() {
  if (!phaseAComplete || !windowLoaded) return;
  const elapsed = Date.now() - phaseAStartTime;
  const remaining = Math.max(0, MIN_LOADER_DURATION - elapsed);
  setTimeout(() => { initRevealPhase(); }, remaining);
}

function initRevealPhase() {
  document.body.classList.remove('loading');
  // Ensure all reveal elements are visible after load completes
  document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
  try {
    if (typeof Lenis !== 'undefined') {
      lenis = new Lenis({
        duration: 1.4,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        smoothWheel: true,
        smoothTouch: false,
        touchMultiplier: 2,
      });
      function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
      requestAnimationFrame(raf);
    }
  } catch (e) {
    console.warn('Lenis failed:', e);
    lenis = null;
  }

  gsap.registerPlugin(ScrollTrigger);
  if (lenis) {
    lenis.on('scroll', ScrollTrigger.update);
    lenis.stop();
  } else {
    document.body.style.overflow = 'hidden';
  }

  initColdOpenReveal();
  initHero();
  initAries();
  initCorona();
  initAquila();
  initBota();
  initLyra();
  initScorpio();
  initRitualFace();
  initOneDayColor();
}

function initOneDayColor() {
  const block = document.querySelector('.one-day-block');
  const section = document.getElementById('luminaries');
  if (!block || !section) return;
  const navy = '#010521';
  const green = '#6B0A3D';
  ScrollTrigger.create({
    trigger: block,
    start: 'top 65%',
    end: 'bottom 35%',
    onEnter:     () => gsap.to(section, { backgroundColor: green, duration: 0.9, ease: 'power2.inOut' }),
    onLeave:     () => gsap.to(section, { backgroundColor: navy,  duration: 0.9, ease: 'power2.inOut' }),
    onEnterBack: () => gsap.to(section, { backgroundColor: green, duration: 0.9, ease: 'power2.inOut' }),
    onLeaveBack: () => gsap.to(section, { backgroundColor: navy,  duration: 0.9, ease: 'power2.inOut' }),
  });
}

function initColdOpenReveal() {
  // Supporting dots were already generated in initLoaderPhase and have been
  // fading in via CSS keyframes during the loader. We just grab them here
  // so GSAP can take over their animation for the fade-out at line-6.
  const supporting = document.getElementById('supporting');
  const supportingDots = supporting.querySelectorAll('circle');
  const tinyStars = window._tinyStars;

  // Freeze tiny stars at their current CSS keyframe opacity so GSAP can take over
  tinyStars.forEach(star => {
    const computedOpacity = parseFloat(getComputedStyle(star).opacity);
    star.style.animation = 'none';
    star.style.opacity = computedOpacity;
  });

  // Freeze supporting dots at their current opacity so GSAP can take over
  supportingDots.forEach(dot => {
    const computedOpacity = parseFloat(getComputedStyle(dot).opacity);
    dot.style.animation = 'none';
    dot.style.opacity = computedOpacity;
  });

  // Classify big stars by distance from viewport center
  // The outer stars (in the corners) will fade out FIRST so the field
  // consolidates inward toward where the M will emerge
  const Wnow = window.innerWidth;
  const Hnow = 720;
  const ccx = Wnow / 2;
  const ccy = Hnow / 2;
  const outerDots = [];
  const innerDots = [];
  // Threshold: anything beyond ~38% of the half-diagonal is "outer"
  const threshold = Math.sqrt(Wnow * Wnow + Hnow * Hnow) * 0.5 * 0.55;
  supportingDots.forEach(dot => {
    const x = parseFloat(dot.getAttribute('cx'));
    const y = parseFloat(dot.getAttribute('cy'));
    const dist = Math.sqrt((x - ccx) ** 2 + (y - ccy) ** 2);
    if (dist > threshold) {
      outerDots.push(dot);
    } else {
      innerDots.push(dot);
    }
  });

  const tl = gsap.timeline({
    defaults: { ease: 'power2.out' },
    onComplete: () => {
      supportingDots.forEach(dot => { dot.style.opacity = '0'; });
      if (lenis) {
        lenis.start();
      } else {
        document.body.style.overflow = '';
      }
    }
  });

  // PHASE 3: Tiny stars dissolve as the loader is still finishing its fade.
  // M vertices emerge while the dissolve is still in progress, so it's all
  // one continuous motion: stars melt away → M lights up → lines connect.
  tl.to(tinyStars, {
    opacity: 0,
    duration: 1.6,
    stagger: { amount: 1.0, from: 'random' },
    ease: 'power2.in',
  }, 0);

  // PHASE 3.5: Outer big stars fade away in parallel with the tiny dissolve
  // so the field consolidates toward the center as the M is about to emerge
  tl.to(outerDots, {
    opacity: 0,
    duration: 1.4,
    stagger: { amount: 0.8, from: 'random' },
    ease: 'power2.in',
  }, 0.1);

  // PHASE 4: MF vertices emerge from the field of inner big stars
  // Starts while tiny stars + outer dots are still fading (overlapping motion)
  tl.to('#mark .vertex', {
    opacity: 1,
    duration: 0.9,
    stagger: { amount: 0.5, from: 'random' },
    ease: 'back.out(2)',
  }, 0.5);

  // PHASE 5: White lines draw the MF
  tl.to('#mark .line-1', { strokeDashoffset: 0, duration: 0.5, ease: 'power2.inOut' }, '-=0.15');
  tl.to('#mark .line-2', { strokeDashoffset: 0, duration: 0.5, ease: 'power2.inOut' }, '-=0.32');
  tl.to('#mark .line-3', { strokeDashoffset: 0, duration: 0.5, ease: 'power2.inOut' }, '-=0.32');
  tl.to('#mark .line-4', { strokeDashoffset: 0, duration: 0.5, ease: 'power2.inOut' }, '-=0.32');
  tl.to('#mark .line-5', { strokeDashoffset: 0, duration: 0.4, ease: 'power2.inOut' }, '-=0.25');
  tl.to('#mark .line-6', { strokeDashoffset: 0, duration: 0.4, ease: 'power2.inOut' }, '-=0.28');

  // PHASE 5.5: Supporting stars fade out the moment line-6 connects
  tl.to(supportingDots, {
    opacity: 0,
    duration: 0.6,
    ease: 'power2.in',
  }, '<');

  tl.to('#mark-wrap', { y: -28, duration: 0.9, ease: 'power3.inOut' }, '+=0.2');
  tl.to('#wordmark', { y: 0, duration: 0.9, ease: 'power3.inOut' }, '<');
  tl.to('#wordmark .rule', { scaleX: 1, duration: 0.8, ease: 'power2.inOut' }, '-=0.5');
  tl.to(['#nav-mark', '#nav-links', '#nav-burger'], {
    opacity: 1, y: 0, duration: 0.8, stagger: 0.12,
  }, '-=0.4');

  // Scroll cue fades in last
  tl.to('#scroll-cue', {
    opacity: 0.7,
    duration: 1.0,
    ease: 'power2.out',
  }, '-=0.3');

  // Tagline fades in after preloader completes
  tl.to('.hero-tagline', {
    opacity: 1,
    duration: 0.8,
    ease: 'power2.out',
  }, '-=0.5');

  // Continuous subtle float on the scroll cue
  gsap.to('#scroll-cue', {
    y: 8,
    duration: 1.6,
    ease: 'sine.inOut',
    yoyo: true,
    repeat: -1,
    delay: 2,
  });
}

function initHero() {
  document.querySelectorAll('[data-split]').forEach(el => {
    const text = el.innerHTML;
    const tokens = text.split(/(\s+|<em>|<\/em>)/).filter(Boolean);
    let inEm = false;
    let html = '';
    tokens.forEach(token => {
      if (token === '<em>') { inEm = true; return; }
      if (token === '</em>') { inEm = false; return; }
      if (/^\s+$/.test(token)) { html += ' '; return; }
      html += `<span class="word-wrap"><span class="word"${inEm ? ' style="font-style:italic;color:#8efbb9;"' : ''}>${token}</span></span>`;
    });
    el.innerHTML = html;
  });

  ScrollTrigger.create({
    trigger: '#hero',
    start: 'top 75%',
    once: true,
    onEnter: () => {
      gsap.to('#hero .label .inner', { y: 0, duration: 1.0, ease: 'power3.out' });
    }
  });

  ScrollTrigger.create({
    trigger: '#hero .display-xl',
    start: 'top 80%',
    once: true,
    onEnter: () => {
      gsap.to('#hero .display-xl .word', {
        y: 0, duration: 1.2, stagger: 0.06, ease: 'power3.out',
      });
    }
  });

  ScrollTrigger.create({
    trigger: '#hero .subline',
    start: 'top 85%',
    once: true,
    onEnter: () => {
      gsap.to('#hero .subline', {
        opacity: 0.85, y: 0, duration: 1.4, ease: 'power3.out', delay: 0.5,
      });
    }
  });
}

function initAries() {
  const aries = document.getElementById('aries');
  if (!aries) return;
  const stars = aries.querySelectorAll('.a-star');
  const lines = aries.querySelectorAll('.a-line');

  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1400;
    const scatterY = homeY + (Math.random() - 0.5) * 500;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });

  ScrollTrigger.create({
    trigger: '#aries',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);

      stars.forEach((star, i) => {
        const d = scatterData[i];
        const cx = d.scatterX + (d.homeX - d.scatterX) * eased;
        const cy = d.scatterY + (d.homeY - d.scatterY) * eased;
        star.setAttribute('cx', cx);
        star.setAttribute('cy', cy);
        star.style.opacity = 0.4 + eased * 0.5;
      });

      lines.forEach((line) => {
        const lineOpacity = Math.max(0, (eased - 0.5) * 2);
        line.style.opacity = lineOpacity * 0.5;
        const dashOffset = 500 * (1 - Math.max(0, (eased - 0.6) * 2.5));
        line.setAttribute('stroke-dashoffset', dashOffset);
      });
    },
  });

  gsap.to('#aries .a-star.bright', {
    scale: 1.25,
    transformOrigin: 'center',
    duration: 2.4,
    ease: 'sine.inOut',
    yoyo: true,
    repeat: -1,
  });
}

function initCorona() {
  const el = document.getElementById('corona');
  if (!el) return;
  const stars = el.querySelectorAll('.c-star');
  const lines = el.querySelectorAll('.c-line');

  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1600;
    const scatterY = homeY + (Math.random() - 0.5) * 500;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });

  ScrollTrigger.create({
    trigger: '#corona',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);

      stars.forEach((star, i) => {
        const d = scatterData[i];
        star.setAttribute('cx', d.scatterX + (d.homeX - d.scatterX) * eased);
        star.setAttribute('cy', d.scatterY + (d.homeY - d.scatterY) * eased);
        star.style.opacity = 0.3 + eased * 0.65;
      });

      lines.forEach((line) => {
        line.style.opacity = Math.max(0, (eased - 0.5) * 2) * 0.6;
        const len = parseFloat(line.getAttribute('stroke-dasharray'));
        line.setAttribute('stroke-dashoffset', len * (1 - Math.max(0, (eased - 0.6) * 2.5)));
      });
    },
  });

  gsap.to('#corona .c-star.bright', {
    scale: 1.3, transformOrigin: 'center',
    duration: 2.8, ease: 'sine.inOut', yoyo: true, repeat: -1,
  });
}

function initAquila() {
  const el = document.getElementById('aquila');
  if (!el) return;
  const stars = el.querySelectorAll('.q-star');
  const lines = el.querySelectorAll('.q-line');
  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1600;
    const scatterY = homeY + (Math.random() - 0.5) * 400;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });
  ScrollTrigger.create({
    trigger: '#aquila',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);
      stars.forEach((star, i) => {
        const d = scatterData[i];
        star.setAttribute('cx', d.scatterX + (d.homeX - d.scatterX) * eased);
        star.setAttribute('cy', d.scatterY + (d.homeY - d.scatterY) * eased);
        star.style.opacity = 0.3 + eased * 0.68;
      });
      lines.forEach((line) => {
        line.style.opacity = Math.max(0, (eased - 0.5) * 2) * 0.55;
        const len = parseFloat(line.getAttribute('stroke-dasharray'));
        line.setAttribute('stroke-dashoffset', len * (1 - Math.max(0, (eased - 0.6) * 2.5)));
      });
    },
  });
  gsap.to('#aquila .q-star.bright', {
    scale: 1.3, transformOrigin: 'center',
    duration: 2.6, ease: 'sine.inOut', yoyo: true, repeat: -1,
  });
}

function initBota() {
  const el = document.getElementById('bota');
  if (!el) return;
  const stars = el.querySelectorAll('.b-star');
  const lines = el.querySelectorAll('.b-line');

  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1600;
    const scatterY = homeY + (Math.random() - 0.5) * 400;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });

  ScrollTrigger.create({
    trigger: '#bota',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);

      stars.forEach((star, i) => {
        const d = scatterData[i];
        star.setAttribute('cx', d.scatterX + (d.homeX - d.scatterX) * eased);
        star.setAttribute('cy', d.scatterY + (d.homeY - d.scatterY) * eased);
        star.style.opacity = 0.3 + eased * 0.68;
      });

      lines.forEach((line) => {
        line.style.opacity = Math.max(0, (eased - 0.5) * 2) * 0.55;
        const len = parseFloat(line.getAttribute('stroke-dasharray'));
        line.setAttribute('stroke-dashoffset', len * (1 - Math.max(0, (eased - 0.6) * 2.5)));
      });
    },
  });

  gsap.to('#bota .b-star.bright', {
    scale: 1.3, transformOrigin: 'center',
    duration: 2.6, ease: 'sine.inOut', yoyo: true, repeat: -1,
  });
}

function initLyra() {
  const el = document.getElementById('lyra');
  if (!el) return;
  const stars = el.querySelectorAll('.l-star');
  const lines = el.querySelectorAll('.l-line');

  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1400;
    const scatterY = homeY + (Math.random() - 0.5) * 400;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });

  ScrollTrigger.create({
    trigger: '#lyra',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);

      stars.forEach((star, i) => {
        const d = scatterData[i];
        star.setAttribute('cx', d.scatterX + (d.homeX - d.scatterX) * eased);
        star.setAttribute('cy', d.scatterY + (d.homeY - d.scatterY) * eased);
        star.style.opacity = 0.3 + eased * 0.68;
      });

      lines.forEach((line) => {
        line.style.opacity = Math.max(0, (eased - 0.5) * 2) * 0.55;
        const len = parseFloat(line.getAttribute('stroke-dasharray'));
        line.setAttribute('stroke-dashoffset', len * (1 - Math.max(0, (eased - 0.6) * 2.5)));
      });
    },
  });

  gsap.to('#lyra .l-star.bright', {
    scale: 1.3, transformOrigin: 'center',
    duration: 2.6, ease: 'sine.inOut', yoyo: true, repeat: -1,
  });
}

function initScorpio() {
  const scorpio = document.getElementById('scorpio');
  if (!scorpio) return;
  const stars = scorpio.querySelectorAll('.s-star');
  const lines = scorpio.querySelectorAll('.s-line');

  const scatterData = [];
  stars.forEach((star) => {
    const homeX = parseFloat(star.dataset.homeX);
    const homeY = parseFloat(star.dataset.homeY);
    const scatterX = homeX + (Math.random() - 0.5) * 1400;
    const scatterY = homeY + (Math.random() - 0.5) * 400;
    scatterData.push({ homeX, homeY, scatterX, scatterY });
    star.setAttribute('cx', scatterX);
    star.setAttribute('cy', scatterY);
  });

  ScrollTrigger.create({
    trigger: '#scorpio',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      const formation = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = formation * formation * (3 - 2 * formation);

      stars.forEach((star, i) => {
        const d = scatterData[i];
        const cx = d.scatterX + (d.homeX - d.scatterX) * eased;
        const cy = d.scatterY + (d.homeY - d.scatterY) * eased;
        star.setAttribute('cx', cx);
        star.setAttribute('cy', cy);
        star.style.opacity = 0.4 + eased * 0.5;
      });

      lines.forEach((line) => {
        const lineOpacity = Math.max(0, (eased - 0.5) * 2);
        line.style.opacity = lineOpacity * 0.5;
        const dashOffset = 800 * (1 - Math.max(0, (eased - 0.6) * 2.5));
        line.setAttribute('stroke-dashoffset', dashOffset);
      });
    },
  });

  gsap.to('#scorpio .s-star.bright', {
    scale: 1.25, transformOrigin: 'center',
    duration: 2.4, ease: 'sine.inOut', yoyo: true, repeat: -1,
  });
}


function initRitualFace() {
  const svg = document.getElementById('ritual-face-svg');
  if (!svg) return;

  const vertices = svg.querySelectorAll('.rf-vertex');
  const edges = svg.querySelectorAll('.rf-edge, .rf-ce');

  // Store home positions and scatter each vertex
  const scatter = [];
  vertices.forEach((v) => {
    const hx = parseFloat(v.dataset.homeX);
    const hy = parseFloat(v.dataset.homeY);
    const sx = hx + (Math.random() - 0.5) * 1800;
    const sy = hy + (Math.random() - 0.5) * 1200;
    scatter.push({ hx, hy, sx, sy });
    v.setAttribute('cx', sx);
    v.setAttribute('cy', sy);
    v.style.opacity = 0;
  });

  // Hide all edges initially
  edges.forEach((e) => {
    e.style.opacity = 0;
    e.setAttribute('stroke-dashoffset', '1200');
  });

  // SVG starts invisible
  gsap.set(svg, { opacity: 1 });

  ScrollTrigger.create({
    trigger: '.roster-face-wrap',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: (self) => {
      const p = self.progress;
      // Bell curve: peaks at p=0.5
      const bell = Math.max(0, 1 - Math.pow(2 * p - 1, 2));
      const eased = bell * bell * (3 - 2 * bell);

      vertices.forEach((v, i) => {
        const d = scatter[i];
        const cx = d.sx + (d.hx - d.sx) * eased;
        const cy = d.sy + (d.hy - d.sy) * eased;
        v.setAttribute('cx', cx);
        v.setAttribute('cy', cy);
        v.style.opacity = eased * 0.2;
      });

      edges.forEach((e) => {
        e.style.opacity = eased * 0.2;
        const offset = 1200 * (1 - eased);
        e.setAttribute('stroke-dashoffset', offset);
      });
    },
  });
}

// SCROLL REVEAL + SECTION STARS
(function() {
  const reveals = document.querySelectorAll('.reveal');
  const starGroups = document.querySelectorAll('.section-stars');
  if (!('IntersectionObserver' in window)) {
    reveals.forEach(el => el.classList.add('in'));
    starGroups.forEach(el => el.classList.add('in'));
    return;
  }
  const io = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in');
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });
  reveals.forEach(el => io.observe(el));

  const starIO = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in');
        starIO.unobserve(entry.target);
      }
    });
  }, { threshold: 0.05 });
  starGroups.forEach(el => starIO.observe(el));
})();

// FOOTER CONSTELLATIONS — animate back in
(function() {
  const footerSvg = document.querySelector('.footer-stars');
  if (!footerSvg) return;
  const circles = footerSvg.querySelectorAll('circle');
  const lines = footerSvg.querySelectorAll('line');

  lines.forEach(line => {
    const x1 = +line.getAttribute('x1'), y1 = +line.getAttribute('y1');
    const x2 = +line.getAttribute('x2'), y2 = +line.getAttribute('y2');
    const len = Math.hypot(x2 - x1, y2 - y1);
    line.style.strokeDasharray = len;
    line.style.strokeDashoffset = len;
    line.style.transition = 'stroke-dashoffset 2.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.6s ease-out';
  });
  circles.forEach(c => {
    c.style.transition = 'opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1)';
  });

  const footer = document.querySelector('footer');
  if (!footer || !('IntersectionObserver' in window)) {
    circles.forEach(c => c.style.opacity = '0.65');
    lines.forEach(l => { l.style.opacity = '0.32'; l.style.strokeDashoffset = '0'; });
    return;
  }

  const fIO = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      circles.forEach((c) => {
        const delay = 200 + Math.random() * 1800;
        setTimeout(() => { c.style.opacity = '0.65'; }, delay);
      });
      lines.forEach((line, i) => {
        const delay = 1400 + i * 220;
        setTimeout(() => {
          line.style.opacity = '0.32';
          line.style.strokeDashoffset = '0';
        }, delay);
      });
      fIO.unobserve(footer);
    });
  }, { threshold: 0.2 });
  fIO.observe(footer);
})();

// CURSOR EXPAND on new section interactives
(function() {
  if (window.innerWidth < 1024) return;
  const cursor = document.getElementById('cursor');
  if (!cursor) return;
  const hoverables = document.querySelectorAll('.lum-card, .tier-card, .cta-button, .read-more, .nav-links a');
  hoverables.forEach(el => {
    el.addEventListener('mouseenter', () => cursor.classList.add('expanded'));
    el.addEventListener('mouseleave', () => cursor.classList.remove('expanded'));
  });
})();

// ============================================================
// HERO VIDEO — scroll play/pause
// ============================================================
(function() {
  const vid = document.getElementById('hero-video');
  if (!vid) return;
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) { vid.play(); } else { vid.pause(); }
    });
  }, { threshold: 0.1 });
  obs.observe(vid);
})();

// ============================================================
// BEGIN VIDEO — gold bg → video reveal on scroll
// ============================================================
(function() {
  const vid = document.getElementById('begin-video');
  const section = document.getElementById('begin');
  if (!vid || !section) return;
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        vid.play();
        // Short delay so gold shows first, then video fades in
        setTimeout(() => section.classList.add('video-revealed'), 300);
      } else {
        vid.pause();
        section.classList.remove('video-revealed');
      }
    });
  }, { threshold: 0.2 });
  obs.observe(section);
})();


// ============================================================
// MOBILE: collapse constellation wrappers to thin gradient bands
// ============================================================
if (window.innerWidth < 768) {
  const selectors = ['.constellation-panel','.aquila-wrap','.bota-wrap','.lyra-wrap','.corona-wrap'];
  selectors.forEach(sel => {
    document.querySelectorAll(sel).forEach(el => {
      const inlineBg = el.getAttribute('style') && el.getAttribute('style').match(/background:[^;]+/);
      el.style.cssText = 'height:160px!important;overflow:hidden!important;display:block!important;margin:0!important;padding:0!important;' + (inlineBg ? inlineBg[0] + '!important;' : '');
      el.querySelectorAll('svg').forEach(s => { s.style.cssText = 'display:none!important;'; });
    });
  });
}

// ============================================================
// PULL QUOTE TWINKLING STARS
// ============================================================
(function() {
  const section = document.getElementById('hero-quote-band');
  const svg = document.getElementById('hpq-stars-svg');
  if (!section || !svg) return;

  const svgNS = 'http://www.w3.org/2000/svg';

  // Colours to cycle through for a magical look
  const colours = ['#FFE066', '#FFD700', '#FFFFFF', '#FFE8A3', '#FFD700', '#FFE066', '#FFFFFF'];

  function build() {
    while (svg.firstChild) svg.removeChild(svg.firstChild);

    const W = section.offsetWidth;
    const H = section.offsetHeight;
    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);

    // Soft exclusion around the central text block so stars feel like
    // a surrounding constellation rather than sitting on the words
    const exW = Math.min(900, W * 0.62);
    const exH = H * 0.52;
    const exL = (W - exW) / 2;
    const exR = exL + exW;
    const exT = (H - exH) / 2;
    const exB = exT + exH;

    const COUNT = 130;
    let placed = 0, attempts = 0;

    while (placed < COUNT && attempts < 6000) {
      attempts++;
      const x = Math.random() * W;
      const y = Math.random() * H;

      // Weight toward edges: skip center zone most of the time
      const inCenter = x > exL && x < exR && y > exT && y < exB;
      if (inCenter && Math.random() < 0.82) continue;

      const r   = 0.6 + Math.random() * 2.2;
      const pk  = (0.25 + Math.random() * 0.7).toFixed(2);
      const dur = (1.8 + Math.random() * 4.0).toFixed(2);
      // Negative delay starts the animation mid-cycle so stars are
      // already twinkling at different phases when the section appears
      const dly = (-(Math.random() * parseFloat(dur))).toFixed(2);
      const fill = colours[Math.floor(Math.random() * colours.length)];

      const c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', x.toFixed(1));
      c.setAttribute('cy', y.toFixed(1));
      c.setAttribute('r',  r.toFixed(1));
      c.setAttribute('fill', fill);
      c.style.cssText = `--pk:${pk};--dur:${dur}s;--dly:${dly}s`;
      svg.appendChild(c);
      placed++;
    }
  }

  // Build immediately and rebuild on resize
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', build);
  } else {
    build();
  }

  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(build, 200);
  });
})();
</script>
<script>
fetch('/menu.html')
  .then(function(r){return r.text()})
  .then(function(html){
    document.getElementById('menu-mount').innerHTML = html;
    if (typeof initMenu === 'function') initMenu();
  });
</script>
</body>
</html>
