*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      --s-1: 4px;
      --s-2: 8px;
      --s-3: 12px;
      --s-4: 16px;
      --s-5: 24px;
      --s-6: 32px;
      --s-7: 48px;
      --s-8: 64px;
      --s-9: 96px;
      --s-10: 128px;
      --s-11: 160px;
      --s-12: 200px;

      /* Page background matches the main site (--paper on the Astro side):
         a very-tinted near-white rather than a cream-mat. */
      --cream-page: oklch(99.0% 0.003 75);
      --cream-soft: oklch(97.5% 0.008 72);
      --cream-deep: oklch(94.0% 0.014 70);
      --cream-line: oklch(86.0% 0.022 60);
      --cream-hairline: oklch(80.0% 0.025 60);

      --sage: oklch(64.0% 0.060 130);
      --sage-deep: oklch(48.0% 0.055 135);
      --sage-soft: oklch(88.0% 0.030 135);

      --clay: oklch(58.0% 0.110 35);
      --clay-deep: oklch(45.0% 0.105 30);
      --clay-darker: oklch(35.0% 0.090 28);
      --clay-soft: oklch(91.0% 0.035 40);

      --ink: oklch(22.0% 0.020 55);
      --ink-deep: oklch(15.0% 0.018 55);
      --ink-mid: oklch(40.0% 0.020 55);
      --ink-soft: oklch(58.0% 0.018 55);
      --ink-faint: oklch(72.0% 0.015 55);
    }

    html {
      font-size: 16px;
      scroll-behavior: smooth
    }

    body {
      font-family: 'EB Garamond', 'Georgia', serif;
      font-size: 18px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--cream-page);
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "kern", "liga", "onum";
      overflow-x: hidden;
      position: relative;
    }

    /* Subtle grain — never the focus */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
      pointer-events: none;
      z-index: 1;
      opacity: 0.4;
      mix-blend-mode: multiply;
    }

    main {
      position: relative;
      z-index: 2
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Petrona', 'Georgia', serif;
      color: var(--ink);
      font-weight: 500;
      line-height: 1.06;
      letter-spacing: -0.018em
    }

    em {
      font-style: italic
    }

    strong {
      font-weight: 600
    }

    a {
      color: var(--clay-deep)
    }

    .wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .narrow {
      max-width: 780px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .tight {
      max-width: 640px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    /* ════════════════════════════════════════════════
   SCROLL PROGRESS BAR (clay hairline at top)
   ════════════════════════════════════════════════ */
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: var(--clay-deep);
      width: 0;
      z-index: 60;
      transition: width 0.1s linear
    }

    /* ════════════════════════════════════════════════
   MOTION
   ════════════════════════════════════════════════ */
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1)
      }

      .reveal.in {
        opacity: 1;
        transform: none
      }

      .reveal-up-1 {
        transition-delay: 0.08s
      }

      .reveal-up-2 {
        transition-delay: 0.16s
      }

      .reveal-up-3 {
        transition-delay: 0.24s
      }

      .hover-lift {
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1)
      }

      .hover-lift:hover {
        transform: translateY(-4px)
      }
    }

    /* ════════════════════════════════════════════════
   PRESS NAV
   ════════════════════════════════════════════════ */
    .press-nav {
      background: oklch(96.5% 0.012 75 / 0.88);
      border-bottom: 1px solid var(--cream-line);
      padding: 14px 0;
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: saturate(140%) blur(12px);
      -webkit-backdrop-filter: saturate(140%) blur(12px)
    }

    .press-nav .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--s-5);
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    /* Brand mark — matches the main site nav: italic Petrona for the
       business name, tracked tracked-caps for the city tag. */
    .press-nav .brand {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 1.125rem;
      color: var(--ink-deep);
      letter-spacing: 0;
      text-decoration: none;
      line-height: 1;
      display: inline-flex;
      align-items: baseline;
      gap: 0;
    }
    .press-nav .brand em {
      font-style: italic;
      color: var(--ink-deep);
      font-weight: 500;
    }
    .press-nav .brand .city {
      font-family: 'Petrona', serif;
      font-style: normal;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-left: 0.5em;
    }
    .press-nav .brand .dot {
      /* Legacy dot — hidden; the brand now uses the · NYC pattern. */
      display: none;
    }

    .press-nav .press-mini {
      display: flex;
      gap: var(--s-4);
      align-items: center;
      font-family: 'Petrona', serif;
      font-size: 9pt;
      color: var(--ink-soft)
    }

    .press-nav .press-mini::before {
      content: "As Seen On";
      color: var(--ink-faint);
      font-style: italic;
      letter-spacing: 0.04em;
      font-size: 9pt;
      margin-right: var(--s-2)
    }

    .press-nav .press-mini .pmark {
      font-weight: 500;
      color: var(--ink-mid);
      letter-spacing: 0.02em;
      font-size: 11pt
    }

    .press-nav .press-mini .pmark.tamron {
      font-family: 'Petrona', serif;
      font-weight: 600;
      letter-spacing: -0.01em
    }

    .press-nav .press-mini .pmark.brides {
      font-family: 'Petrona', serif;
      font-weight: 700;
      letter-spacing: 0.18em;
      font-size: 10pt;
      text-transform: uppercase
    }

    .press-nav .press-mini .pmark.knot {
      font-family: 'Petrona', serif;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.005em
    }

    .press-nav .press-mini .sep {
      color: var(--cream-hairline);
      font-style: normal
    }

    @media(max-width:880px) {
      .press-nav .press-mini {
        display: none
      }
    }

    /* ════════════════════════════════════════════════
   CHAPTER CUE — graceful hand-off from press band into panic
   ════════════════════════════════════════════════ */
    .chapter-cue {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-9) 0 var(--s-7);
      background: var(--cream-page);
      position: relative
    }

    .chapter-cue::before,
    .chapter-cue::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      background: var(--cream-hairline);
      transform: translateX(-50%)
    }

    .chapter-cue::before {
      top: 0;
      height: var(--s-7)
    }

    .chapter-cue::after {
      bottom: 0;
      height: var(--s-5)
    }

    .chapter-cue .chapter-mark {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 54pt;
      color: var(--clay);
      line-height: 1;
      letter-spacing: -0.04em
    }

    .chapter-cue .chapter-line {
      font-family: 'Petrona', serif;
      font-size: 9.5pt;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 600
    }

    @media(max-width:780px) {
      .chapter-cue {
        padding: var(--s-7) 0 var(--s-5)
      }

      .chapter-cue .chapter-mark {
        font-size: 42pt
      }
    }

    /* ════════════════════════════════════════════════
   PRESS BAND — full editorial strip below hero
   ════════════════════════════════════════════════ */
    .press-band {
      background: var(--cream-page);
      border-top: 1px solid var(--cream-line);
      border-bottom: 1px solid var(--cream-line);
      padding: var(--s-6) 0;
      position: relative
    }

    .press-band .row {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--s-7);
      align-items: center
    }

    .press-band .label {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 10.5pt;
      color: var(--ink-soft);
      letter-spacing: 0.04em;
      line-height: 1.4;
      border-right: 1px solid var(--cream-hairline);
      padding-right: var(--s-7);
      text-align: right;
      max-width: 14em
    }

    .press-band .label strong {
      font-style: normal;
      font-weight: 700;
      color: var(--clay-deep);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 9pt;
      display: block;
      margin-bottom: 4px
    }

    .press-band .marks {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: var(--s-7);
      flex-wrap: wrap
    }

    .press-band .mark {
      font-family: 'Petrona', serif;
      color: var(--ink);
      line-height: 1;
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      opacity: 0.92;
      transition: opacity 0.25s ease, transform 0.25s ease
    }

    .press-band .mark:hover {
      opacity: 1;
      transform: translateY(-1px)
    }

    /* Tamron Hall Show — clean modern wordmark */
    .press-band .mark.tamron {
      font-family: 'Petrona', serif;
      font-weight: 700;
      font-size: 26pt;
      letter-spacing: -0.022em;
      color: var(--ink-deep)
    }

    .press-band .mark.tamron em {
      font-style: italic;
      font-weight: 400;
      color: var(--clay-deep);
      font-size: 14pt;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-left: 8px;
      opacity: 0.85
    }

    /* BRIDES — bold serif uppercase */
    .press-band .mark.brides {
      font-family: 'Petrona', serif;
      font-weight: 800;
      font-size: 28pt;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      text-indent: 0.36em;
      color: var(--ink-deep)
    }

    /* the knot — lowercase italic with bow accent */
    .press-band .mark.knot {
      font-family: 'Petrona', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 28pt;
      letter-spacing: -0.005em;
      text-transform: lowercase;
      color: var(--ink-deep)
    }

    .press-band .mark.knot::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1.5px solid var(--clay-deep);
      border-radius: 50%;
      margin-right: 8px;
      transform: translateY(2px);
      opacity: 0.85;
      background: radial-gradient(circle, var(--clay-soft) 0%, transparent 70%)
    }

    @media(max-width:880px) {
      .press-band {
        padding: var(--s-5) 0
      }

      .press-band .row {
        grid-template-columns: 1fr;
        gap: var(--s-4);
        text-align: center
      }

      .press-band .label {
        border-right: none;
        border-bottom: 1px solid var(--cream-hairline);
        padding: 0 0 var(--s-4);
        text-align: center;
        max-width: none
      }

      .press-band .marks {
        gap: var(--s-5);
        justify-content: center
      }

      .press-band .mark.tamron {
        font-size: 18pt
      }

      .press-band .mark.brides {
        font-size: 18pt
      }

      .press-band .mark.knot {
        font-size: 18pt
      }
    }

    /* ════════════════════════════════════════════════
   STICKY CTA BAR
   ════════════════════════════════════════════════ */
    .sticky-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--cream-page);
      border-top: 1px solid var(--cream-hairline);
      padding: var(--s-3) var(--s-6);
      transform: translateY(110%);
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 40;
      box-shadow: 0 -10px 30px -12px oklch(22% 0.02 55 / 0.18)
    }

    body.past-hero .sticky-cta {
      transform: translateY(0)
    }

    .sticky-cta .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--s-4);
      max-width: 1240px;
      margin: 0 auto
    }

    .sticky-cta .label {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 14pt;
      color: var(--ink);
      line-height: 1.2
    }

    .sticky-cta .label small {
      display: block;
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 10pt;
      color: var(--ink-soft);
      font-weight: 400;
      margin-top: 2px
    }

    .sticky-cta .label strong {
      color: var(--clay-deep);
      font-weight: 700;
      margin-right: 6px;
      font-size: 16pt
    }

    .sticky-cta .label s {
      color: var(--ink-faint);
      font-weight: 400;
      margin-right: 8px
    }

    .sticky-cta .btn {
      padding: 13px 24px;
      font-size: 13pt
    }

    @media(max-width:600px) {
      .sticky-cta .label small {
        display: none
      }

      .sticky-cta .label {
        font-size: 11pt
      }

      .sticky-cta .label strong {
        font-size: 13pt
      }

      .sticky-cta .btn {
        padding: 11px 18px;
        font-size: 11pt
      }
    }

    /* ════════════════════════════════════════════════
   BUTTON
   ════════════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--s-3);
      background: var(--clay-deep);
      color: var(--cream-page);
      padding: 22px 36px;
      border-radius: 2px;
      font-family: 'Petrona', serif;
      font-weight: 600;
      font-size: 15pt;
      letter-spacing: -0.005em;
      text-decoration: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border: none;
      cursor: pointer;
      line-height: 1;
      position: relative;
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--clay-darker);
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.25s ease;
      z-index: -1
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px -12px oklch(45% 0.105 30 / 0.45)
    }

    .btn:hover::after {
      opacity: 1
    }

    .btn .arrow {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-block
    }

    .btn:hover .arrow {
      transform: translateX(6px)
    }

    .btn-meta {
      font-family: 'Petrona', serif;
      font-size: 11pt;
      color: var(--ink-soft);
      font-style: italic
    }

    .btn-meta s {
      color: var(--ink-faint)
    }

    .btn-meta strong {
      color: var(--ink);
      font-weight: 700;
      font-style: normal
    }

    @media(max-width:600px) {
      .btn {
        padding: 18px 28px;
        font-size: 13pt
      }
    }

    /* ════════════════════════════════════════════════
   SHARED EDITORIAL ELEMENTS
   ════════════════════════════════════════════════ */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-3);
      font-family: 'Petrona', serif;
      font-size: 9.5pt;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--clay-deep);
      margin-bottom: var(--s-5)
    }

    .eyebrow::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--clay)
    }

    .eyebrow.sage {
      color: var(--sage-deep)
    }

    .eyebrow.sage::before {
      background: var(--sage-deep)
    }

    .eyebrow.center {
      justify-content: center
    }

    .eyebrow.center::before {
      display: none
    }

    .section-h {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(34px, 4.6vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.022em;
      margin-bottom: var(--s-5)
    }

    .section-h em {
      font-style: italic;
      font-weight: 400;
      color: var(--clay-deep)
    }

    .section-h.sage em {
      color: var(--sage-deep)
    }

    .section-deck {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: clamp(17px, 1.8vw, 21px);
      line-height: 1.5;
      color: var(--ink-mid);
      max-width: 36em;
      margin-bottom: var(--s-7)
    }

    .section-deck strong {
      font-style: normal;
      font-weight: 600;
      color: var(--ink)
    }

    /* Roman numeral marker — recurring thread */
    .numeral {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      color: var(--clay);
      line-height: 1
    }

    /* Caveat marginalia — Robyn's voice between sections */
    .handwriting {
      font-family: 'Caveat', cursive;
      font-weight: 600;
      color: var(--clay-deep);
      line-height: 1.2
    }

    /* Decorative thread (small dot + hairline pair) */
    .thread-mark {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      justify-content: center;
      margin: var(--s-7) 0
    }

    .thread-mark::before,
    .thread-mark::after {
      content: "";
      flex: 0 1 80px;
      height: 1px;
      background: var(--cream-hairline)
    }

    .thread-mark .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--clay)
    }

    section {
      padding: var(--s-11) 0
    }

    /* ════════════════════════════════════════════════
   HERO — editorial split with parallax + watermark
   ════════════════════════════════════════════════ */
    .hero {
      padding: var(--s-9) 0 var(--s-10);
      position: relative;
      overflow: hidden
    }

    .hero-watermark {
      position: absolute;
      top: 120px;
      left: -30px;
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(180px, 22vw, 360px);
      color: var(--ink);
      opacity: 0.04;
      letter-spacing: -0.05em;
      pointer-events: none;
      line-height: 0.85;
      user-select: none;
      z-index: 0
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: var(--s-9);
      align-items: center;
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      position: relative;
      z-index: 1
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-3);
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--clay-deep);
      font-weight: 600;
      margin-bottom: var(--s-7);
      padding: 7px 16px;
      border: 1px solid var(--clay-deep);
      border-radius: 999px
    }

    .hero h1 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(40px, 5.4vw, 72px);
      line-height: 1.0;
      letter-spacing: -0.032em;
      margin-bottom: var(--s-5);
      color: var(--ink);
      max-width: 17ch
    }

    .hero h1 em {
      font-style: italic;
      font-weight: 400;
      color: var(--clay-deep)
    }

    .hero h1 .underline {
      position: relative;
      display: inline-block
    }

    .hero h1 .underline::after {
      content: '';
      position: absolute;
      bottom: 0.06em;
      left: -0.04em;
      right: -0.04em;
      height: 0.18em;
      background: var(--clay);
      opacity: 0.28;
      z-index: -1;
      border-radius: 2px
    }

    .hero .deck {
      font-family: 'EB Garamond', serif;
      font-size: clamp(19px, 1.6vw, 22px);
      line-height: 1.55;
      color: var(--ink-mid);
      max-width: 34em;
      margin-bottom: var(--s-7)
    }

    .hero .deck strong {
      color: var(--ink);
      font-weight: 600
    }

    .hero-cta-row {
      display: flex;
      align-items: center;
      gap: var(--s-5);
      flex-wrap: wrap;
      margin-bottom: var(--s-8)
    }

    .hero-photo-wrap {
      position: relative;
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 2px
    }

    .hero .photo {
      position: absolute;
      inset: -8% 0;
      background-image: url('../../../assets/photos/officiant-kit-v4/cover-officiant.jpg');
      background-size: cover;
      background-position: center 25%;
      will-change: transform
    }

    .hero .photo-tag {
      position: absolute;
      bottom: var(--s-4);
      left: var(--s-4);
      right: var(--s-4);
      background: var(--cream-page);
      padding: var(--s-3) var(--s-4);
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 11pt;
      color: var(--ink-mid);
      max-width: 18em
    }

    .hero .photo-tag::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 1px;
      background: var(--clay);
      vertical-align: middle;
      margin-right: var(--s-2)
    }

    .proof-bar {
      display: flex;
      gap: var(--s-7);
      align-items: center;
      flex-wrap: wrap;
      padding-top: var(--s-5);
      border-top: 1px solid var(--cream-line);
      font-family: 'Petrona', serif;
      font-size: 13pt;
      color: var(--ink-mid)
    }

    .proof-item {
      display: flex;
      align-items: baseline;
      gap: var(--s-2)
    }

    .proof-item .check {
      color: var(--clay-deep);
      font-weight: 700;
      font-size: 14pt;
      line-height: 1
    }

    .proof-item strong {
      color: var(--ink);
      font-weight: 600
    }

    @media(max-width:880px) {
      .hero {
        padding: var(--s-7) 0 var(--s-8)
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--s-7)
      }

      .hero-watermark {
        display: none
      }

      .hero-photo-wrap {
        aspect-ratio: 4/5;
        max-height: 62vh
      }
    }

    /* ════════════════════════════════════════════════
   PHOTO BLEED — full-width editorial transition
   ════════════════════════════════════════════════ */
    .bleed {
      position: relative;
      height: 60vh;
      min-height: 440px;
      max-height: 640px;
      background: var(--ink-deep);
      color: var(--cream-page);
      overflow: hidden;
      padding: 0
    }

    .bleed-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      will-change: transform
    }

    .bleed-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, oklch(15% 0.02 55 / 0.45) 0%, oklch(15% 0.02 55 / 0.15) 50%, oklch(15% 0.02 55 / 0.55) 100%)
    }

    .bleed-content {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: var(--s-7) var(--s-6)
    }

    .bleed-handwriting {
      font-family: 'Caveat', cursive;
      font-weight: 600;
      font-size: clamp(32px, 5vw, 56px);
      color: var(--cream-page);
      text-align: center;
      line-height: 1.15;
      max-width: 18em;
      margin: 0 auto;
      text-shadow: 0 2px 16px oklch(15% 0.02 55 / 0.5)
    }

    .bleed-quote blockquote {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(26px, 3.5vw, 40px);
      line-height: 1.2;
      text-align: center;
      color: var(--cream-page);
      letter-spacing: -0.012em;
      max-width: 24em
    }

    .bleed-cite {
      display: block;
      margin-top: var(--s-6);
      font-family: 'Petrona', serif;
      font-style: normal;
      font-size: 9pt;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: oklch(91% 0.035 40);
      text-align: center
    }

    /* ════════════════════════════════════════════════
   COLLAGE — credibility wall (asymmetric editorial grid)
   ════════════════════════════════════════════════ */
    .collage {
      padding: var(--s-11) 0 0;
      background: var(--cream-page);
      position: relative;
      overflow: hidden
    }

    .collage-head {
      max-width: 920px;
      margin: 0 auto var(--s-9);
      padding: 0 var(--s-6);
      text-align: center
    }

    .collage-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(34px, 4.4vw, 54px);
      line-height: 1.06;
      letter-spacing: -0.022em;
      margin-bottom: var(--s-4)
    }

    .collage-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .collage-head .lede {
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      color: var(--ink-mid);
      line-height: 1.6;
      max-width: 36em;
      margin: 0 auto
    }

    .collage-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(20, 56px);
      gap: var(--s-3);
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      position: relative;
      /* Bottom fade — collage gradually dissolves into cream-page */
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    }

    .cg {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      background: var(--cream-soft);
      margin: 0;
      min-width: 0;
      min-height: 0
    }

    .cg .ph {
      position: absolute;
      inset: -12% 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      filter: saturate(0.92) contrast(1.03);
      will-change: transform
    }

    .cg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, oklch(15% 0.02 55 / 0.16) 100%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease
    }

    .cg:hover .ph {
      transform: scale(1.04) !important
    }

    .cg:hover::after {
      opacity: 1
    }

    /* Explicit asymmetric grid — every cell precisely placed, no dead space.
   Coordinates: grid-area = row-start / col-start / row-end / col-end. 12 cols × 20 rows. */
    .cg-1 {
      grid-area: 1 / 1 / 7 / 6;
    }

    /* big upper-left */
    .cg-2 {
      grid-area: 1 / 6 / 7 / 9;
    }

    /* tall portrait */
    .cg-3 {
      grid-area: 1 / 9 / 5 / 13;
    }

    /* medium upper-right */
    .cg-4 {
      grid-area: 5 / 9 / 9 / 13;
    }

    /* medium right */
    .cg-5 {
      grid-area: 7 / 1 / 11 / 5;
    }

    /* mid-left */
    .cg-6 {
      grid-area: 7 / 5 / 11 / 9;
    }

    /* stat tile (center mid) */
    .cg-7 {
      grid-area: 9 / 9 / 13 / 13;
    }

    /* mid-right */
    .cg-8 {
      grid-area: 11 / 1 / 17 / 5;
    }

    /* tall mid-left */
    .cg-9 {
      grid-area: 11 / 5 / 15 / 9;
    }

    /* medium mid */
    .cg-10 {
      grid-area: 13 / 9 / 17 / 13;
    }

    /* medium right */
    .cg-11 {
      grid-area: 15 / 5 / 19 / 9;
    }

    /* lower-mid */
    .cg-12 {
      grid-area: 17 / 1 / 21 / 5;
    }

    /* lower-left (fades) */
    .cg-13 {
      grid-area: 17 / 9 / 21 / 13;
    }

    /* lower-right (fades) */
    .cg-14 {
      grid-area: 19 / 5 / 21 / 9;
    }

    /* lower-center (fades most) */

    /* Stat tile (replaces one photo cell — keeps the credibility number centered in the wall) */
    .cg-stat {
      background: var(--clay-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--s-5)
    }

    .cg-stat .stat-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s-2)
    }

    .cg-stat .stat-num {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(64px, 8vw, 108px);
      line-height: 0.85;
      color: var(--clay-deep);
      letter-spacing: -0.04em
    }

    .cg-stat .stat-num span {
      font-size: 0.55em;
      font-weight: 300;
      margin-left: 2px
    }

    .cg-stat .stat-l {
      font-family: 'Petrona', serif;
      font-size: 9.5pt;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--clay-darker);
      font-weight: 600;
      line-height: 1.55;
      margin-top: var(--s-3)
    }

    .collage-foot {
      text-align: right;
      max-width: 1240px;
      margin-top: calc(-1 * var(--s-9));
      padding: 0 var(--s-7) var(--s-7);
      position: relative;
      margin-left: auto;
      margin-right: auto;
      z-index: 2
    }

    .collage-foot .hand {
      font-family: 'Caveat', cursive;
      font-weight: 600;
      font-size: clamp(20px, 2.4vw, 28px);
      color: var(--clay-deep);
      line-height: 1.2;
      display: inline-block;
      transform: rotate(-1.5deg)
    }

    @media(max-width:880px) {
      .collage {
        padding: var(--s-9) 0 0
      }

      .collage-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-auto-rows: 64px;
        gap: var(--s-2);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%)
      }

      .cg-1 {
        grid-area: auto / span 6 / auto / auto;
        grid-row: span 4;
      }

      .cg-2 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 5;
      }

      .cg-3 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-4 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-5 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-6 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-7 {
        grid-area: auto / span 6 / auto / auto;
        grid-row: span 4;
      }

      .cg-8 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 5;
      }

      .cg-9 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-10 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-11 {
        grid-area: auto / span 6 / auto / auto;
        grid-row: span 4;
      }

      .cg-12 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-13 {
        grid-area: auto / span 3 / auto / auto;
        grid-row: span 3;
      }

      .cg-14 {
        grid-area: auto / span 6 / auto / auto;
        grid-row: span 4;
      }
    }

    /* ════════════════════════════════════════════════
   PANIC — editorial cream with massive type
   ════════════════════════════════════════════════ */
    .panic {
      padding: var(--s-12) 0 var(--s-10);
      position: relative;
      background: var(--cream-page)
    }

    .panic-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--s-9);
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      align-items: start
    }

    .panic-margin {
      position: sticky;
      top: 140px;
      text-align: left;
      padding-top: var(--s-3)
    }

    .panic-margin .numeral-big {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 140pt;
      color: var(--cream-deep);
      line-height: 0.85;
      letter-spacing: -0.04em;
      margin-bottom: var(--s-4)
    }

    .panic-margin .label {
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--clay-deep);
      font-weight: 600;
      line-height: 1.4;
      max-width: 14em
    }

    .panic-body h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(36px, 5.2vw, 68px);
      margin-bottom: var(--s-7);
      letter-spacing: -0.025em;
      line-height: 1.04;
      color: var(--ink)
    }

    .panic-body h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .panic-body p {
      font-family: 'EB Garamond', serif;
      font-size: 20px;
      margin-bottom: var(--s-5);
      color: var(--ink);
      line-height: 1.65;
      max-width: 32em
    }

    .panic-body p em {
      font-style: italic;
      color: var(--clay-deep)
    }

    .panic-body p strong {
      color: var(--ink);
      font-weight: 600
    }

    /* Massive single pull-quote */
    .pull-massive {
      margin: var(--s-8) 0;
      padding: var(--s-6) 0 var(--s-6) var(--s-6);
      border-left: 1px solid var(--clay);
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(28px, 3.6vw, 44px);
      line-height: 1.2;
      color: var(--ink);
      letter-spacing: -0.018em;
      max-width: 22em
    }

    .scenario-list {
      list-style: none;
      margin: var(--s-7) 0;
      padding: var(--s-5) 0;
      border-top: 1px solid var(--cream-hairline);
      border-bottom: 1px solid var(--cream-hairline)
    }

    .scenario-list li {
      padding: var(--s-3) 0 var(--s-3) var(--s-6);
      position: relative;
      color: var(--ink);
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      line-height: 1.55;
      border-bottom: 1px dashed var(--cream-line)
    }

    .scenario-list li:last-child {
      border-bottom: none
    }

    .scenario-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1.4em;
      width: 18px;
      height: 1px;
      background: var(--clay-deep)
    }

    .scenario-list li em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 500
    }

    .scenario-list li strong {
      color: var(--ink);
      font-weight: 600
    }

    @media(max-width:880px) {
      .panic {
        padding: var(--s-9) 0
      }

      .panic-grid {
        grid-template-columns: 1fr;
        gap: var(--s-5)
      }

      .panic-margin {
        position: static;
        margin-bottom: var(--s-5)
      }

      .panic-margin .numeral-big {
        font-size: 80pt
      }
    }

    /* ════════════════════════════════════════════════
   STORY — sticky LEFT column with persistent sales pressure
   ════════════════════════════════════════════════ */
    .story {
      padding: var(--s-12) 0 var(--s-11);
      position: relative
    }

    .story-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.6fr;
      gap: var(--s-9);
      align-items: start;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .story-aside {
      position: sticky;
      top: 120px;
      display: flex;
      flex-direction: column;
      gap: var(--s-7);
      padding-right: var(--s-5);
      border-right: 1px solid var(--cream-hairline)
    }

    /* Sticky aside — credibility number */
    .story-aside .stat-block {}

    .story-aside .stat-block .num {
      font-family: 'Petrona', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(120px, 15vw, 200px);
      line-height: 0.85;
      color: var(--clay-deep);
      letter-spacing: -0.045em;
      margin-bottom: var(--s-3)
    }

    .story-aside .stat-block .num-label {
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 600;
      line-height: 1.4;
      max-width: 14em
    }

    /* Sticky aside — persistent emotional hook */
    .story-aside .hook {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: 21pt;
      line-height: 1.25;
      color: var(--ink);
      letter-spacing: -0.012em;
      padding: var(--s-5) 0;
      border-top: 1px solid var(--cream-hairline);
      border-bottom: 1px solid var(--cream-hairline)
    }

    .story-aside .hook em {
      color: var(--clay-deep);
      font-style: italic;
      font-weight: 500
    }

    /* Sticky aside — CTA panel */
    .story-aside .cta-panel {}

    .story-aside .cta-panel .label {
      display: block;
      font-family: 'Petrona', serif;
      font-size: 9pt;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--clay-deep);
      font-weight: 600;
      margin-bottom: var(--s-2)
    }

    .story-aside .cta-panel .price-line {
      display: flex;
      align-items: baseline;
      gap: var(--s-3);
      margin-bottom: var(--s-4)
    }

    .story-aside .cta-panel .price-line .price {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 42pt;
      color: var(--clay-deep);
      line-height: 1;
      letter-spacing: -0.025em
    }

    .story-aside .cta-panel .price-line .strike {
      font-family: 'Petrona', serif;
      font-size: 14pt;
      color: var(--ink-faint);
      text-decoration: line-through
    }

    .story-aside .cta-panel .terms {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 11pt;
      color: var(--ink-soft);
      margin-top: var(--s-3);
      line-height: 1.4
    }

    .story-aside .cta-panel .btn-mini {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--clay-deep);
      color: var(--cream-page);
      padding: 14px 22px;
      font-family: 'Petrona', serif;
      font-weight: 600;
      font-size: 13pt;
      border-radius: 2px;
      text-decoration: none;
      transition: all 0.25s ease;
      box-shadow: 0 6px 16px -8px oklch(45% 0.105 30 / 0.5)
    }

    .story-aside .cta-panel .btn-mini:hover {
      background: var(--clay-darker);
      transform: translateY(-1px)
    }

    /* Story content (right column) */
    .story-content .eyebrow {
      color: var(--clay-deep)
    }

    .story-content h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(36px, 4.8vw, 58px);
      margin-bottom: var(--s-6);
      letter-spacing: -0.022em;
      line-height: 1.06
    }

    .story-content h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .story-content p {
      font-family: 'EB Garamond', serif;
      margin-bottom: var(--s-5);
      font-size: 19px;
      color: var(--ink);
      line-height: 1.7;
      max-width: 34em
    }

    .story-content p em {
      font-style: italic;
      color: var(--clay-deep)
    }

    .story-content p strong {
      color: var(--ink);
      font-weight: 600
    }

    /* Drop cap on first paragraph */
    .story-content .drop-cap::first-letter {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: 78pt;
      line-height: 0.85;
      float: left;
      color: var(--clay-deep);
      margin: 6px 12px 0 -4px;
      letter-spacing: -0.04em
    }

    /* Inline portrait — sits in the right column, wraps with text */
    .story-portrait {
      float: right;
      width: 38%;
      max-width: 280px;
      margin: 6px 0 var(--s-5) var(--s-6);
      position: relative;
      shape-outside: margin-box
    }

    .story-portrait img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 2px;
      filter: contrast(1.02) saturate(0.95)
    }

    .story-portrait .caption {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 11pt;
      color: var(--ink-soft);
      line-height: 1.4;
      margin-top: var(--s-2);
      padding-left: var(--s-2);
      border-left: 1px solid var(--clay)
    }

    @media(max-width:780px) {
      .story-portrait {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 var(--s-5)
      }
    }

    .story-signature {
      margin-top: var(--s-8);
      padding-top: var(--s-6);
      border-top: 1px solid var(--cream-hairline);
      display: flex;
      align-items: baseline;
      gap: var(--s-4)
    }

    .story-signature .name {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 42pt;
      color: var(--clay-deep);
      line-height: 1
    }

    .story-signature .role {
      font-family: 'Petrona', serif;
      font-size: 11pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 600;
      line-height: 1.4
    }

    @media(max-width:880px) {
      .story {
        padding: var(--s-9) 0
      }

      .story-grid {
        grid-template-columns: 1fr;
        gap: var(--s-7)
      }

      .story-aside {
        position: static;
        border-right: none;
        padding-right: 0;
        padding-bottom: var(--s-5);
        border-bottom: 1px solid var(--cream-hairline)
      }

      .story-aside .stat-block .num {
        font-size: 88pt
      }

      .story-aside .hook {
        font-size: 18pt
      }

      .story-content .drop-cap::first-letter {
        font-size: 56pt
      }
    }

    /* ════════════════════════════════════════════════
   INTRODUCING — typographic moment
   ════════════════════════════════════════════════ */
    .intro-section {
      padding: var(--s-11) 0;
      background: var(--cream-soft);
      border-top: 1px solid var(--cream-line);
      border-bottom: 1px solid var(--cream-line);
      position: relative;
      overflow: hidden
    }

    .intro-section::before {
      content: "i.";
      position: absolute;
      top: 50%;
      left: 6%;
      transform: translateY(-50%);
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(180px, 22vw, 340px);
      color: var(--cream-deep);
      opacity: 0.7;
      line-height: 1;
      letter-spacing: -0.05em;
      pointer-events: none;
      user-select: none;
      z-index: 0
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-9);
      align-items: center;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      position: relative;
      z-index: 1
    }

    .intro-text .eyebrow {
      color: var(--sage-deep)
    }

    .intro-text .eyebrow::before {
      background: var(--sage-deep)
    }

    .intro-text h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(40px, 6vw, 72px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      margin-bottom: var(--s-5)
    }

    .intro-text h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .intro-text p {
      font-family: 'EB Garamond', serif;
      font-size: 19px;
      color: var(--ink);
      line-height: 1.6;
      max-width: 32em
    }

    .kit-card {
      padding: var(--s-9) var(--s-7);
      background: var(--cream-page);
      border: 1px solid var(--cream-line);
      text-align: center;
      position: relative;
      box-shadow: 0 30px 60px -30px oklch(22% 0.02 55 / 0.18);
      max-width: 480px;
      margin-left: auto
    }

    .kit-card::before,
    .kit-card::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      border: 1px solid var(--clay)
    }

    .kit-card::before {
      top: 14px;
      left: 14px;
      border-right: 0;
      border-bottom: 0
    }

    .kit-card::after {
      bottom: 14px;
      right: 14px;
      border-left: 0;
      border-top: 0
    }

    .kit-card .crest {
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--clay-deep);
      font-weight: 600;
      margin-bottom: var(--s-4);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2)
    }

    .kit-card .crest::before,
    .kit-card .crest::after {
      content: "✦";
      color: var(--clay)
    }

    .kit-card .title {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 36pt;
      line-height: 1.05;
      margin-bottom: var(--s-3);
      letter-spacing: -0.02em
    }

    .kit-card .title em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .kit-card .sub {
      font-family: 'Caveat', cursive;
      font-weight: 600;
      font-size: 22pt;
      color: var(--ink-soft);
      line-height: 1.1
    }

    @media(max-width:880px) {
      .intro-grid {
        grid-template-columns: 1fr;
        gap: var(--s-6)
      }

      .kit-card {
        margin: 0 auto;
        padding: var(--s-7) var(--s-5)
      }

      .intro-section::before {
        display: none
      }
    }

    /* ════════════════════════════════════════════════
   MODULES — asymmetric editorial list (NOT a card grid)
   ════════════════════════════════════════════════ */
    .inside {
      padding: var(--s-11) 0
    }

    .inside-head {
      text-align: center;
      margin-bottom: var(--s-10);
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6)
    }

    .inside-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(40px, 5.2vw, 64px);
      margin-bottom: var(--s-5);
      letter-spacing: -0.025em;
      line-height: 1.04
    }

    .inside-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .inside-head p {
      font-family: 'EB Garamond', serif;
      font-size: 19px;
      color: var(--ink-mid);
      line-height: 1.55
    }

    .modules {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      display: flex;
      flex-direction: column;
      gap: var(--s-9)
    }

    .module {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: var(--s-7);
      align-items: start;
      position: relative;
      padding-bottom: var(--s-9);
      border-bottom: 1px solid var(--cream-hairline)
    }

    .module:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .module:nth-child(even) {
      grid-template-columns: 1fr 120px
    }

    .module:nth-child(even)>.module-num {
      order: 2;
      text-align: left
    }

    .module:nth-child(even)>.module-content {
      text-align: left;
      padding-right: 0;
      padding-left: 0
    }

    .module-num {
      font-family: 'Petrona', serif;
      font-weight: 300;
      font-style: italic;
      font-size: 96pt;
      line-height: 0.85;
      color: var(--clay);
      letter-spacing: -0.04em;
      text-align: right;
      padding-top: var(--s-2)
    }

    .module-num small {
      display: block;
      font-family: 'Petrona', serif;
      font-style: normal;
      font-weight: 600;
      font-size: 9pt;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-top: var(--s-3);
      line-height: 1
    }

    .module-content {
      max-width: 42em
    }

    .module-content h3 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.1;
      letter-spacing: -0.018em;
      margin-bottom: var(--s-4)
    }

    .module-content h3 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .module-content p {
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      color: var(--ink);
      line-height: 1.65;
      margin-bottom: var(--s-5);
      max-width: 34em
    }

    .module-content p em {
      font-style: italic;
      color: var(--clay-deep)
    }

    .module-content ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-3) var(--s-5);
      list-style: none
    }

    .module-content ul li {
      font-family: 'EB Garamond', serif;
      font-size: 15.5px;
      padding-left: var(--s-4);
      position: relative;
      color: var(--ink-mid);
      line-height: 1.5
    }

    .module-content ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.65em;
      width: 8px;
      height: 1px;
      background: var(--clay-deep)
    }

    @media(max-width:780px) {

      .module,
      .module:nth-child(even) {
        grid-template-columns: 1fr;
        gap: var(--s-4)
      }

      .module:nth-child(even)>.module-num {
        order: initial
      }

      .module-num {
        font-size: 64pt;
        text-align: left
      }

      .module-content ul {
        grid-template-columns: 1fr
      }
    }

    /* ════════════════════════════════════════════════
   DELIVERABLES — editorial inventory list on cream
   ════════════════════════════════════════════════ */
    .deliverables {
      padding: var(--s-11) 0;
      background: var(--cream-soft);
      border-top: 1px solid var(--cream-line);
      border-bottom: 1px solid var(--cream-line);
      position: relative;
      overflow: hidden
    }

    .deliverables-head {
      text-align: center;
      margin-bottom: var(--s-9);
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6)
    }

    .deliverables-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(36px, 5vw, 60px);
      margin-bottom: var(--s-4);
      letter-spacing: -0.022em;
      line-height: 1.06
    }

    .deliverables-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .deliverables-head p {
      font-family: 'EB Garamond', serif;
      color: var(--ink-mid);
      font-size: 18px;
      line-height: 1.55
    }

    .deliv-list {
      max-width: 920px;
      margin: 0 auto;
      list-style: none;
      padding: 0 var(--s-6)
    }

    .deliv-list li {
      display: grid;
      grid-template-columns: 60px 1fr auto;
      gap: var(--s-5);
      align-items: baseline;
      padding: var(--s-5) 0;
      border-bottom: 1px solid var(--cream-line)
    }

    .deliv-list li:last-child {
      border-bottom: none
    }

    .deliv-list li .num {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 400;
      font-size: 24pt;
      color: var(--clay-deep);
      line-height: 1;
      font-feature-settings: "lnum"
    }

    .deliv-list li .title {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 21pt;
      letter-spacing: -0.012em;
      color: var(--ink);
      line-height: 1.18
    }

    .deliv-list li .title em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .deliv-list li .desc {
      display: block;
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      color: var(--ink-mid);
      margin-top: 6px;
      line-height: 1.5
    }

    .deliv-list li .value {
      font-family: 'Petrona', serif;
      font-size: 11pt;
      color: var(--clay-deep);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-align: right;
      white-space: nowrap;
      text-transform: uppercase
    }

    .deliv-list li .value em {
      font-style: italic;
      text-transform: none;
      color: var(--ink-soft)
    }

    @media(max-width:680px) {
      .deliv-list li {
        grid-template-columns: 36px 1fr;
        gap: var(--s-3)
      }

      .deliv-list li .value {
        grid-column: 2;
        text-align: left;
        margin-top: 6px
      }
    }

    /* ════════════════════════════════════════════════
   TRANSFORMATION — typographic spread (NOT card compare)
   ════════════════════════════════════════════════ */
    .transform {
      padding: var(--s-12) 0
    }

    .transform-head {
      text-align: center;
      margin-bottom: var(--s-10);
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6)
    }

    .transform-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(38px, 5vw, 60px);
      margin-bottom: var(--s-4);
      letter-spacing: -0.022em;
      line-height: 1.06
    }

    .transform-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .transform-head .deck {
      font-family: 'EB Garamond', serif;
      font-size: 19px;
      color: var(--ink-mid);
      line-height: 1.55
    }

    .transform-spread {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 var(--s-6);
      position: relative
    }

    .tcol {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-7);
      align-items: stretch;
      position: relative
    }

    .tside {
      padding: var(--s-7) var(--s-6);
      position: relative;
      border-radius: 2px
    }

    .tside.before {
      background: var(--cream-soft);
      border: 1px solid var(--cream-line)
    }

    .tside.after {
      background: linear-gradient(180deg, oklch(94% 0.020 130) 0%, oklch(91% 0.028 130) 100%);
      border: 1px solid oklch(80% 0.045 130);
      box-shadow: 0 24px 48px -28px oklch(48% 0.055 135 / 0.32)
    }

    .tside .tlabel {
      font-family: 'Petrona', serif;
      font-size: 9pt;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: var(--s-5);
      display: flex;
      align-items: center;
      gap: var(--s-2)
    }

    .tside.before .tlabel {
      color: var(--ink-soft)
    }

    .tside.before .tlabel::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 1px;
      background: var(--ink-faint)
    }

    .tside.after .tlabel {
      color: var(--sage-deep)
    }

    .tside.after .tlabel::before {
      content: "✦";
      display: inline-block;
      color: var(--sage-deep);
      font-size: 11pt
    }

    .tside h3 {
      font-family: 'Petrona', serif;
      font-weight: 400;
      font-size: 22pt;
      line-height: 1.18;
      letter-spacing: -0.012em;
      margin-bottom: var(--s-6);
      min-height: 5em
    }

    .tside.before h3 {
      color: var(--ink-mid);
      font-style: italic
    }

    .tside.after h3 {
      color: var(--ink);
      font-weight: 500;
      font-style: normal
    }

    .tside.after h3 em {
      color: var(--sage-deep);
      font-style: italic;
      font-weight: 500
    }

    .tside ul {
      list-style: none
    }

    .tside ul li {
      padding: var(--s-3) 0 var(--s-3) var(--s-6);
      font-family: 'EB Garamond', serif;
      font-size: 17px;
      line-height: 1.5;
      border-bottom: 1px dashed var(--cream-line);
      position: relative
    }

    .tside ul li:last-child {
      border-bottom: none
    }

    .tside.before ul li {
      color: var(--ink-mid)
    }

    .tside.before ul li::before {
      content: "⨯";
      position: absolute;
      left: 0;
      top: var(--s-3);
      color: var(--clay);
      font-weight: 500;
      font-size: 15pt;
      line-height: 1.2
    }

    .tside.after ul li {
      color: var(--ink);
      border-bottom-color: oklch(80% 0.040 130)
    }

    .tside.after ul li strong {
      font-weight: 600;
      color: var(--sage-deep);
      font-style: italic
    }

    .tside.after ul li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: var(--s-3);
      color: var(--sage-deep);
      font-weight: 600;
      font-size: 14pt;
      line-height: 1.2
    }

    .transform-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      background: var(--cream-page);
      border: 1.5px solid var(--sage-deep);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 24pt;
      color: var(--sage-deep);
      font-weight: 300;
      z-index: 2;
      box-shadow: 0 8px 20px -8px oklch(22% 0.02 55 / 0.18)
    }

    @media(max-width:780px) {
      .tcol {
        grid-template-columns: 1fr;
        gap: var(--s-6)
      }

      .transform-arrow {
        position: relative;
        top: auto;
        left: auto;
        transform: rotate(90deg);
        margin: 0 auto;
        display: flex
      }

      .tside h3 {
        min-height: auto
      }

      .tside {
        padding: var(--s-6) var(--s-5)
      }
    }

    /* ════════════════════════════════════════════════
   AUTHORITY DEEP — counter card overlay
   ════════════════════════════════════════════════ */
    .authority-deep {
      padding: var(--s-11) 0;
      background: var(--cream-page)
    }

    .authority-deep .row {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--s-9);
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .authority-deep .photo {
      aspect-ratio: 1;
      background-image: url('../../../assets/photos/officiant-kit-v4/robyn-altar.jpg');
      background-size: cover;
      background-position: center 35%;
      border-radius: 2px;
      position: relative
    }

    .authority-deep .photo .counter-card {
      position: absolute;
      bottom: 0;
      right: 0;
      background: var(--cream-page);
      padding: var(--s-5) var(--s-6);
      border-top: 3px solid var(--clay-deep);
      transform: translate(15%, 15%);
      min-width: 200px
    }

    .authority-deep .counter-card .n {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 64pt;
      line-height: 1;
      color: var(--clay-deep);
      letter-spacing: -0.025em;
      font-feature-settings: "lnum", "tnum"
    }

    .authority-deep .counter-card .l {
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-top: var(--s-2);
      font-weight: 600
    }

    .authority-deep .body p {
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      line-height: 1.65;
      margin-bottom: var(--s-4);
      color: var(--ink)
    }

    .authority-deep .body p:last-child {
      margin-bottom: 0
    }

    .authority-deep .body strong {
      font-weight: 600
    }

    .authority-deep .body em {
      font-style: italic;
      color: var(--clay-deep)
    }

    .authority-deep .anti-ai {
      margin-top: var(--s-7);
      padding: var(--s-5) var(--s-6);
      background: var(--cream-soft);
      border-top: 2px solid var(--clay)
    }

    .authority-deep .anti-ai p {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 16px;
      line-height: 1.5;
      color: var(--ink);
      margin: 0
    }

    .authority-deep .anti-ai .label {
      font-family: 'Petrona', serif;
      font-style: normal;
      font-weight: 600;
      color: var(--clay-deep);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 10pt;
      display: block;
      margin-bottom: var(--s-2)
    }

    @media(max-width:880px) {
      .authority-deep .row {
        grid-template-columns: 1fr;
        gap: var(--s-7)
      }

      .authority-deep .photo .counter-card {
        position: relative;
        bottom: auto;
        right: auto;
        transform: none;
        margin-top: -var(--s-7);
        margin-left: auto;
        display: inline-block
      }
    }

    /* ════════════════════════════════════════════════
   TESTIMONIALS — magazine layout
   ════════════════════════════════════════════════ */
    .testimonials {
      padding: var(--s-11) 0;
      background: var(--cream-page)
    }

    .testimonials-head {
      text-align: center;
      margin-bottom: var(--s-10);
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6)
    }

    .testimonials-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(34px, 4.6vw, 52px);
      margin-bottom: var(--s-4);
      letter-spacing: -0.02em;
      line-height: 1.08
    }

    .testimonials-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .testimonials-head p {
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      color: var(--ink-mid);
      line-height: 1.55
    }

    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-7);
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .testi {
      padding: var(--s-7) 0;
      border-top: 1px solid var(--cream-hairline);
      position: relative
    }

    .testi .stars {
      color: var(--clay-deep);
      font-size: 13pt;
      letter-spacing: 0.15em;
      margin-bottom: var(--s-4)
    }

    .testi p {
      font-family: 'Petrona', serif;
      font-size: 19px;
      font-style: italic;
      font-weight: 400;
      line-height: 1.45;
      color: var(--ink);
      margin: 0 0 var(--s-5);
      letter-spacing: -0.005em
    }

    .testi p em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 500
    }

    .testi .who {
      font-family: 'Petrona', serif;
      font-size: 11pt
    }

    .testi .who .name {
      font-weight: 600;
      font-size: 13pt;
      color: var(--ink);
      display: block;
      margin-bottom: 2px
    }

    .testi .who .role {
      font-style: italic;
      color: var(--ink-soft);
      letter-spacing: 0.04em
    }

    @media(max-width:880px) {
      .testi-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3)
      }

      .testi:last-child {
        border-bottom: 1px solid var(--cream-hairline)
      }
    }

    /* ════════════════════════════════════════════════
   OFFER — editorial magazine "subscribe" insert
   ════════════════════════════════════════════════ */
    .offer {
      padding: var(--s-12) 0;
      background: var(--cream-page);
      position: relative;
      overflow: hidden
    }

    .offer::before {
      content: "vi.";
      position: absolute;
      top: 18%;
      right: 6%;
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(180px, 22vw, 340px);
      color: var(--cream-deep);
      opacity: 0.55;
      line-height: 1;
      letter-spacing: -0.05em;
      pointer-events: none;
      user-select: none;
      z-index: 0
    }

    .offer-head {
      text-align: center;
      margin-bottom: var(--s-9);
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6);
      position: relative;
      z-index: 1
    }

    .offer-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(40px, 5.6vw, 68px);
      margin-bottom: var(--s-4);
      letter-spacing: -0.025em;
      line-height: 1.04
    }

    .offer-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .offer-card {
      max-width: 780px;
      margin: 0 auto;
      background: var(--cream-page);
      border: 1px solid var(--cream-hairline);
      border-top: 6px solid var(--clay-deep);
      padding: var(--s-9) var(--s-9) var(--s-8);
      position: relative;
      z-index: 1
    }

    .offer-card .crest {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-3);
      margin-bottom: var(--s-6)
    }

    .offer-card .crest::before,
    .offer-card .crest::after {
      content: "";
      flex: 0 1 50px;
      height: 1px;
      background: var(--cream-hairline)
    }

    .offer-card .crest span {
      font-family: 'Petrona', serif;
      font-size: 10pt;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--clay-deep);
      font-weight: 600
    }

    .offer-card h3 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(36px, 4.8vw, 52px);
      text-align: center;
      margin-bottom: var(--s-2);
      letter-spacing: -0.025em;
      line-height: 1.04
    }

    .offer-card h3 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .offer-card .tagline {
      text-align: center;
      font-family: 'Caveat', cursive;
      font-weight: 600;
      font-size: 24pt;
      color: var(--ink-soft);
      margin-bottom: var(--s-8);
      line-height: 1.1
    }

    .offer-stack {
      list-style: none;
      margin-bottom: var(--s-8);
      max-width: 540px;
      margin-left: auto;
      margin-right: auto
    }

    .offer-stack li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: var(--s-3) 0;
      font-family: 'EB Garamond', serif;
      font-size: 16.5px;
      border-bottom: 1px dashed var(--cream-line)
    }

    .offer-stack li:last-child {
      border-bottom: none
    }

    .offer-stack li .item {
      color: var(--ink);
      flex: 1;
      padding-right: var(--s-4)
    }

    .offer-stack li .val {
      color: var(--ink-mid);
      white-space: nowrap;
      font-feature-settings: "tnum"
    }

    .offer-stack li.total {
      font-family: 'Petrona', serif;
      font-weight: 600;
      font-size: 17pt;
      padding-top: var(--s-5);
      border-top: 1px solid var(--ink);
      border-bottom: none;
      margin-top: var(--s-3)
    }

    .offer-stack li.total .val {
      color: var(--ink)
    }

    .price-block {
      text-align: center;
      margin: var(--s-8) auto var(--s-7);
      max-width: 540px;
      padding: var(--s-7) 0;
      border-top: 1px solid var(--cream-hairline);
      border-bottom: 1px solid var(--cream-hairline)
    }

    .price-block .anchor {
      font-family: 'Petrona', serif;
      font-size: 14pt;
      color: var(--ink-soft);
      text-decoration: line-through;
      font-style: italic
    }

    .price-block .price {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: 96pt;
      color: var(--clay-deep);
      line-height: 1;
      margin: var(--s-2) 0;
      letter-spacing: -0.045em
    }

    .price-block .price sup {
      font-size: 36pt;
      vertical-align: top;
      margin-right: 6px;
      top: 14px;
      position: relative;
      font-weight: 400
    }

    .price-block .terms {
      font-family: 'Petrona', serif;
      font-size: 13pt;
      color: var(--ink-soft);
      font-style: italic;
      letter-spacing: 0.02em
    }

    .offer-card .btn-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s-3)
    }

    .offer-card .btn {
      font-size: 17pt;
      padding: 24px 38px;
      width: 100%;
      max-width: 440px;
      justify-content: center
    }

    .offer-card .trust {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 12pt;
      color: var(--ink-soft);
      text-align: center;
      margin-top: var(--s-3)
    }

    .offer-card .trust span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 var(--s-3)
    }

    .offer-card .trust .dot {
      color: var(--clay-deep);
      font-weight: 600;
      font-style: normal
    }

    @media(max-width:680px) {
      .offer-card {
        padding: var(--s-7) var(--s-5) var(--s-6)
      }

      .price-block .price {
        font-size: 64pt
      }

      .offer-card .btn {
        padding: 20px 28px;
        font-size: 14pt
      }
    }

    /* ════════════════════════════════════════════════
   GUARANTEE
   ════════════════════════════════════════════════ */
    .guarantee {
      padding: var(--s-10) 0;
      text-align: center
    }

    .guarantee-card {
      max-width: 740px;
      margin: 0 auto;
      padding: var(--s-9) var(--s-7);
      background: var(--cream-soft);
      position: relative
    }

    .guarantee-card::before,
    .guarantee-card::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      border: 1px solid var(--clay)
    }

    .guarantee-card::before {
      top: 14px;
      left: 14px;
      border-right: 0;
      border-bottom: 0
    }

    .guarantee-card::after {
      bottom: 14px;
      right: 14px;
      border-left: 0;
      border-top: 0
    }

    .guarantee-seal {
      width: 140px;
      height: 140px;
      border: 2px solid var(--clay-deep);
      border-radius: 50%;
      margin: 0 auto var(--s-6);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--clay-deep);
      font-family: 'Petrona', serif;
      text-align: center;
      position: relative;
      background: var(--cream-page);
      transform: rotate(-6deg)
    }

    .guarantee-seal::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid var(--clay-deep);
      border-radius: 50%
    }

    .guarantee-seal .num {
      font-size: 42pt;
      font-style: italic;
      line-height: 1;
      font-weight: 500
    }

    .guarantee-seal .label {
      font-size: 9pt;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-top: 6px;
      font-family: 'Petrona', serif;
      font-weight: 700
    }

    .guarantee h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(32px, 4vw, 46px);
      margin-bottom: var(--s-5);
      letter-spacing: -0.018em;
      line-height: 1.1
    }

    .guarantee h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .guarantee p {
      font-family: 'EB Garamond', serif;
      font-size: 18px;
      color: var(--ink);
      line-height: 1.65;
      max-width: 540px;
      margin: 0 auto var(--s-4);
      padding: 0 var(--s-3)
    }

    .guarantee p strong {
      color: var(--ink);
      font-weight: 600
    }

    .guarantee p em {
      font-style: italic;
      color: var(--clay-deep)
    }

    /* ════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════ */
    .faq {
      background: var(--cream-soft);
      padding: var(--s-11) 0;
      border-top: 1px solid var(--cream-line)
    }

    .faq-head {
      text-align: center;
      margin-bottom: var(--s-8);
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6)
    }

    .faq-head h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(34px, 4.6vw, 52px);
      margin-bottom: var(--s-3);
      letter-spacing: -0.02em;
      line-height: 1.08
    }

    .faq-head h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .faq-head p {
      font-family: 'EB Garamond', serif;
      font-size: 17px;
      color: var(--ink-mid)
    }

    .faq-list {
      max-width: 820px;
      margin: 0 auto;
      padding: 0 var(--s-6)
    }

    .faq-item {
      border-bottom: 1px solid var(--cream-line)
    }

    .faq-q {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: var(--s-5) 56px var(--s-5) 0;
      font-family: 'Petrona', serif;
      font-size: 21pt;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      position: relative;
      letter-spacing: -0.012em;
      line-height: 1.3;
      display: block;
      transition: color 0.25s ease
    }

    .faq-q:hover {
      color: var(--clay-deep)
    }

    .faq-q::after {
      content: '+';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 32pt;
      color: var(--clay-deep);
      transition: transform 0.35s ease;
      font-weight: 300;
      line-height: 1
    }

    .faq-item.open .faq-q::after {
      transform: translateY(-50%) rotate(45deg)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
      font-family: 'EB Garamond', serif;
      font-size: 17px;
      color: var(--ink-mid);
      line-height: 1.7
    }

    .faq-item.open .faq-a {
      max-height: 600px;
      padding: 0 0 var(--s-6)
    }

    .faq-a p {
      margin-bottom: var(--s-3);
      max-width: 38em
    }

    .faq-a p:last-child {
      margin-bottom: 0
    }

    .faq-a em {
      font-style: italic;
      color: var(--clay-deep)
    }

    .faq-a strong {
      color: var(--ink);
      font-weight: 600
    }

    .faq-a a {
      color: var(--clay-deep);
      font-weight: 600
    }

    /* ════════════════════════════════════════════════
   FINAL CTA — editorial magazine close (NOT dark photo overlay)
   ════════════════════════════════════════════════ */
    .final {
      padding: var(--s-12) 0 var(--s-11);
      text-align: center;
      background: var(--cream-page);
      position: relative;
      overflow: hidden
    }

    .final::before {
      content: "vii.";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Petrona', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(280px, 40vw, 560px);
      color: var(--cream-deep);
      opacity: 0.5;
      line-height: 1;
      letter-spacing: -0.05em;
      pointer-events: none;
      user-select: none;
      z-index: 0
    }

    .final>* {
      position: relative;
      z-index: 1
    }

    .final h2 {
      font-family: 'Petrona', serif;
      font-weight: 500;
      font-size: clamp(42px, 6.4vw, 88px);
      margin-bottom: var(--s-7);
      color: var(--ink);
      max-width: 14em;
      margin-left: auto;
      margin-right: auto;
      padding: 0 var(--s-6);
      letter-spacing: -0.028em;
      line-height: 0.98
    }

    .final h2 em {
      font-style: italic;
      color: var(--clay-deep);
      font-weight: 400
    }

    .final p.urgency {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 21px;
      color: var(--ink-mid);
      max-width: 32em;
      margin: 0 auto var(--s-8);
      line-height: 1.5;
      padding: 0 var(--s-6)
    }

    .final .btn {
      font-size: 17pt;
      padding: 24px 40px
    }

    .final .ps {
      margin: var(--s-10) auto 0;
      padding: var(--s-7) var(--s-6) 0;
      border-top: 1px solid var(--cream-hairline);
      max-width: 680px;
      text-align: left;
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 17px;
      color: var(--ink-mid);
      line-height: 1.7
    }

    .final .ps strong {
      color: var(--clay-deep);
      font-style: normal;
      font-family: 'Petrona', serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 13pt;
      margin-right: 6px
    }

    /* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
    footer {
      padding: var(--s-7) var(--s-6);
      text-align: center;
      background: var(--cream-page);
      border-top: 1px solid var(--cream-line)
    }

    footer .brand-foot {
      font-family: 'Petrona', serif;
      font-weight: 600;
      font-size: 18pt;
      margin-bottom: var(--s-2);
      color: var(--ink)
    }

    footer .brand-foot em {
      color: var(--clay-deep);
      font-style: italic;
      font-weight: 500
    }

    footer .meta {
      font-family: 'Petrona', serif;
      font-style: italic;
      font-size: 11pt;
      color: var(--ink-soft);
      line-height: 1.6
    }

    footer .meta a {
      color: var(--ink-soft);
      text-decoration: none;
      border-bottom: 1px solid var(--cream-line)
    }

    footer .copy {
      font-family: 'Petrona', serif;
      font-size: 9pt;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      margin-top: var(--s-4)
    }