/* =========================================================
       Reset
       ========================================================= */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html, body { height: 100%; }
    body {
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; padding: 0; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; padding: 0; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

    /* =========================================================
       Design tokens
       ========================================================= */
    :root {
      --ink: #1B3A4B;
      --ink-text: #2A2A2A;
      --bone: #FAF8F4;
      --cream-warm: #FFF5F0;
      --driftwood: #5B7682;
      --atlantic: #1F4654;
      --hibiscus: #FF4D7E;
      --hibiscus-hover: #E63C6C;
      --hibiscus-active: #CC2E5C;
      --hibiscus-deep: #D6326A;
      --magenta: #C42A6E;
      --sunset: #FF7B6B;
      --coral: #FF9988;
      --coral-light: #FFB6A2;
      --peach: #FFCBB4;
      --peach-soft: #FFE3D6;
      --golden: #F9B95C;
      --blush: #FFD6E0;
      --blush-soft: #FFE4ED;
      --petal: #FFF0F4;
      --champagne: #D4B574;
      --bone-warm: #F4EDE2;
      --ink-soft: #2C4C5C;
      --ink-deep: #133040;
      --border-light: rgba(27, 58, 75, 0.10);
      --border-dark: rgba(250, 248, 244, 0.14);
      --champagne-hair: rgba(212, 181, 116, 0.30);
      --champagne-hair-soft: rgba(212, 181, 116, 0.12);
      --success: #4A7C5C;
      --danger: #A33D3D;

      --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
      --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

      --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
      --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 192px; --s-11: 256px;

      --t-h1: clamp(52px, 4vw + 28px, 96px);
      --t-h2: clamp(36px, 2vw + 24px, 56px);
      --t-h3: clamp(26px, 1vw + 20px, 36px);
      --t-h4: clamp(20px, 0.4vw + 18px, 24px);
      --t-body-l: clamp(18px, 0.3vw + 17px, 21px);
      --t-body: clamp(16px, 0.1vw + 15.5px, 17px);
      --t-caption: clamp(13px, 0.1vw + 12.5px, 14px);
      --t-eyebrow: clamp(11px, 0.1vw + 10.5px, 12px);

      --r-btn: 4px; --r-input: 6px; --r-card: 8px; --r-badge: 2px;

      --container-max: 1440px;
      --container-pad: var(--s-4);

      --nav-h-desktop: 88px;
      --nav-h-mobile: 64px;
    }
    @media (min-width: 1024px) {
      :root { --container-pad: var(--s-7); }
    }

    /* =========================================================
       Base
       ========================================================= */
    body {
      font-family: var(--font-sans);
      font-size: var(--t-body);
      line-height: 1.7;
      color: var(--ink);
      background: var(--bone);
    }
    h1, h2, h3, h4 {
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
      line-height: 1.2;
    }
    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid var(--champagne);
      outline-offset: 3px;
      border-radius: var(--r-btn);
    }

    /* =========================================================
       Skip link
       ========================================================= */
    .skip-link {
      position: absolute; top: -100px; left: var(--s-4);
      background: var(--ink); color: var(--bone);
      padding: var(--s-3) var(--s-4);
      font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
      z-index: 1000; transition: top 150ms ease-out;
    }
    .skip-link:focus-visible { top: var(--s-4); }

    /* =========================================================
       Buttons
       ========================================================= */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--s-3);
      font-family: var(--font-sans); font-weight: 700;
      font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
      line-height: 1;
      border-radius: 12px;
      padding: 28px 64px;
      transition: background-color 200ms ease-out, color 200ms ease-out, transform 250ms ease-out, border-color 200ms ease-out, box-shadow 250ms ease-out;
      white-space: nowrap; position: relative;
    }
    @media (max-width: 767px) {
      .btn { padding: 22px 40px; font-size: 15px; }
    }
    .btn-primary {
      background: var(--hibiscus); color: #fff;
      box-shadow: 0 10px 32px rgba(255,77,126,0.38), 0 2px 8px rgba(255,77,126,0.20), inset 0 1px 0 rgba(255,255,255,0.30);
    }
    .btn-primary:hover {
      background: var(--hibiscus-hover); transform: translateY(-3px) scale(1.02);
      box-shadow: 0 16px 44px rgba(255,77,126,0.50), 0 4px 12px rgba(255,77,126,0.30), inset 0 1px 0 rgba(255,255,255,0.40);
    }
    .btn-primary:active { background: var(--hibiscus-active); transform: translateY(0) scale(1); transition-duration: 100ms; }

    /* Big phone CTA — appears in hero, AV, footer */
    .phone-cta {
      display: inline-flex; align-items: center; gap: var(--s-3);
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(28px, 2.5vw + 16px, 44px);
      line-height: 1; color: var(--ink);
      transition: transform 250ms ease-out, color 200ms ease-out;
      letter-spacing: -0.01em;
    }
    .phone-cta__icon {
      width: 48px; height: 48px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; background: var(--hibiscus); color: #fff;
      flex-shrink: 0; transition: transform 300ms ease-out, box-shadow 250ms ease-out;
      box-shadow: 0 6px 18px rgba(255,77,126,0.36);
    }
    .phone-cta__icon svg { width: 22px; height: 22px; }
    .phone-cta:hover { color: var(--hibiscus); transform: translateY(-2px); }
    .phone-cta:hover .phone-cta__icon { transform: rotate(-8deg) scale(1.08); box-shadow: 0 10px 28px rgba(255,77,126,0.50); }
    .phone-cta__label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--driftwood); margin-bottom: 4px; }
    .phone-cta__wrap { display: inline-flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
    .phone-cta__wrap > span { white-space: nowrap; }
    .phone-cta > span:not(.phone-cta__icon) { white-space: nowrap; }
    .phone-cta--on-dark { color: var(--ink); }
    .phone-cta--on-dark .phone-cta__label { color: var(--driftwood); }
    .phone-cta--on-dark:hover { color: var(--hibiscus); }
    @media (min-width: 1024px) {
      .phone-cta--on-dark { color: var(--bone); }
      .phone-cta--on-dark .phone-cta__label { color: rgba(250,248,244,0.75); }
      .phone-cta--on-dark:hover { color: #fff; }
    }
    .phone-cta--xl {
      font-size: clamp(40px, 5vw + 16px, 88px);
      gap: var(--s-4); margin: var(--s-5) 0 var(--s-3);
      font-weight: 500;
    }
    .phone-cta--xl .phone-cta__icon { width: 72px; height: 72px; }
    @media (min-width: 1024px) { .phone-cta--xl .phone-cta__icon { width: 96px; height: 96px; } }
    .phone-cta--xl .phone-cta__icon svg { width: 32px; height: 32px; }
    @media (min-width: 1024px) { .phone-cta--xl .phone-cta__icon svg { width: 42px; height: 42px; } }

    .btn-secondary {
      background: transparent; border: 1px solid var(--ink); color: var(--ink);
      padding: 17px 35px;
    }
    .btn-secondary:hover { border-width: 2px; padding: 16px 34px; background: var(--ink); color: var(--bone); }
    .btn-secondary:active { background: var(--ink-deep); }
    .btn-secondary--on-dark { border-color: var(--bone); color: var(--bone); }
    .btn-secondary--on-dark:hover { background: var(--bone); color: var(--ink); }

    .btn-ghost {
      font-family: var(--font-sans); font-weight: 600;
      font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink);
      padding: 14px 0;
      display: inline-flex; align-items: center; gap: var(--s-2);
      position: relative; line-height: 1;
    }
    .btn-ghost--on-dark { color: var(--bone); }
    .btn-ghost--champagne { color: var(--champagne); }
    .btn-ghost .arrow { transition: transform 250ms ease-out; display: inline-block; }
    .btn-ghost:hover .arrow { transform: translateX(6px); }
    .btn-ghost::after {
      content: ""; position: absolute; left: 0; right: 24px; bottom: 6px;
      height: 1px; background: var(--champagne);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 250ms ease-out;
    }
    .btn-ghost:hover::after { transform: scaleX(1); }

    /* =========================================================
       Layout
       ========================================================= */
    .container {
      width: 100%; max-width: var(--container-max);
      margin: 0 auto;
      padding-left: var(--container-pad);
      padding-right: var(--container-pad);
    }

    /* Section header reusable component */
    .section-header { text-align: center; max-width: 720px; margin: 0 auto; }
    .section-header--narrow { max-width: 720px; }
    .section-header__sub {
      font-size: var(--t-body-l);
      color: var(--driftwood);
      max-width: 600px;
      margin: var(--s-5) auto 0;
      line-height: 1.6;
    }
    .section-header--on-dark .section-header__sub { color: rgba(248,244,237,0.85); }

    .eyebrow {
      display: inline-block;
      font-family: var(--font-sans); font-weight: 600;
      font-size: var(--t-eyebrow);
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--champagne);
      line-height: 1.2;
      margin-bottom: var(--s-4);
    }
    @media (min-width: 1024px) {
      .eyebrow { margin-bottom: var(--s-5); }
    }

    .h2 {
      font-family: var(--font-display); font-weight: 500;
      font-size: var(--t-h2); line-height: 1.1;
      color: var(--ink);
    }
    .h2 em { font-style: italic; font-weight: 500; }
    .h2--on-dark { color: var(--bone); }

    /* =========================================================
       SECTION 1 — Nav
       ========================================================= */
    .nav {
      position: fixed; top: 0; left: 0; right: 0;
      height: var(--nav-h-mobile);
      z-index: 100;
      background: transparent;
      transition: background-color 250ms ease-out, border-color 250ms ease-out;
      border-bottom: 1px solid transparent;
    }
    @media (min-width: 1024px) { .nav { height: var(--nav-h-desktop); } }
    .nav--opaque {
      background: linear-gradient(180deg, rgba(255,228,237,0.95) 0%, rgba(255,243,236,0.95) 100%);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
      border-bottom-color: rgba(255,77,126,0.15);
      box-shadow: 0 1px 0 rgba(255,77,126,0.10), 0 4px 20px rgba(255,77,126,0.06);
    }

    /* Top contrast scrim — photographic legibility overlay behind the
       transparent nav. Same functional category as the hero's spec
       gradient; fades out once the nav becomes opaque bone. */
    .nav::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 180px;
      background: linear-gradient(
        180deg,
        rgba(14, 42, 56, 0.80) 0%,
        rgba(14, 42, 56, 0.45) 45%,
        rgba(14, 42, 56, 0) 100%
      );
      pointer-events: none;
      z-index: -1;
      opacity: 1;
      transition: opacity 250ms ease-out;
    }
    .nav--opaque::before { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .nav::before { transition: none; }
    }

    .nav__inner {
      height: 100%; max-width: var(--container-max); margin: 0 auto;
      padding-left: var(--s-4); padding-right: var(--s-4);
      display: grid; grid-template-columns: auto 1fr auto;
      align-items: center; gap: var(--s-4);
    }
    @media (min-width: 1024px) {
      .nav__inner { padding-left: var(--s-7); padding-right: var(--s-7); gap: var(--s-6); }
    }

    .nav__logo {
      display: flex; align-items: center; gap: var(--s-3);
      color: var(--bone);
      transition: color 250ms ease-out;
    }
    .nav--opaque .nav__logo { color: var(--ink); }
    .nav__logo-mark { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
    @media (min-width: 1024px) { .nav__logo-mark { width: 56px; height: 56px; } }
    .nav__logo-word {
      display: block;
      font-family: var(--font-display); font-weight: 500;
      font-size: 15px; line-height: 1.05; letter-spacing: -0.005em;
    }
    @media (min-width: 1024px) { .nav__logo-word { font-size: 20px; line-height: 1.05; } }
    .nav__logo-word span { display: block; }

    .nav__center { display: none; justify-content: center; align-items: center; gap: var(--s-6); }
    @media (min-width: 1024px) { .nav__center { display: flex; } }
    @media (min-width: 1280px) { .nav__center { gap: var(--s-7); } }

    .nav__item { position: relative; }
    .nav__item + .nav__item::before {
      content: '';
      position: absolute; left: calc(-1 * var(--s-6) / 2);
      top: 50%; transform: translateY(-50%);
      width: 1px; height: 16px;
      background: rgba(255,255,255,0.25);
    }
    .nav--opaque .nav__item + .nav__item::before { background: var(--border-light); }
    @media (min-width: 1280px) {
      .nav__item + .nav__item::before { left: calc(-1 * var(--s-7) / 2); }
    }
    .nav__link {
      font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--bone);
      padding: 14px 18px;
      display: inline-flex; align-items: center; gap: 6px;
      transition: color 250ms ease-out, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      position: relative;
      border-radius: 8px;
    }
    .nav__link::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--hibiscus) 0%, var(--sunset) 100%);
      border-radius: inherit;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      z-index: -1;
      box-shadow: 0 8px 20px rgba(255,77,126,0.35);
    }
    .nav__link::after {
      content: '';
      position: absolute; bottom: 6px; left: 18px; right: 18px;
      height: 2px;
      background: linear-gradient(90deg, var(--hibiscus), var(--sunset));
      transform: scaleX(0); transform-origin: left;
      transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: 1px;
    }
    .nav__link:hover { color: #fff; transform: translateY(-2px); }
    .nav__link:hover::before { opacity: 1; transform: scale(1); }
    .nav__link:hover::after { transform: scaleX(0); }
    .nav--opaque .nav__link { color: var(--ink); }
    .nav--opaque .nav__link:hover { color: #fff; }
    .nav__link .chev { transition: transform 200ms ease-out; }
    .nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); }

    .nav__dropdown {
      position: absolute; top: calc(100% + 4px); left: 50%;
      transform: translate(-50%, -8px);
      min-width: 240px;
      background: var(--bone); border: 1px solid var(--border-light);
      border-radius: var(--r-card);
      padding: var(--s-3);
      opacity: 0; pointer-events: none;
      transition: opacity 200ms ease-out, transform 200ms ease-out;
    }
    .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown {
      opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
    }
    .nav__dropdown-link {
      display: block; padding: 10px var(--s-3);
      font-size: 14px; font-weight: 500;
      color: var(--ink);
      border-radius: var(--r-badge);
      transition: background-color 150ms ease-out, color 150ms ease-out;
      white-space: nowrap;
    }
    .nav__dropdown-link:hover { background: var(--bone-warm); color: var(--atlantic); }

    .nav__right { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }
    @media (min-width: 1024px) { .nav__right { gap: var(--s-6); } }

    .nav__phone {
      display: none; font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
      color: var(--bone); padding: 12px 0;
      transition: color 250ms ease-out; white-space: nowrap;
    }
    @media (min-width: 1024px) { .nav__phone { display: inline-flex; align-items: center; gap: var(--s-2); } }
    .nav--opaque .nav__phone { color: var(--ink); }
    .nav__phone:hover { color: var(--champagne); }

    .nav__cta { display: none; }
    @media (min-width: 1024px) {
      .nav__cta {
        display: inline-flex; padding: 20px 40px; font-size: 15px;
        font-weight: 800; letter-spacing: 0.10em; border-radius: 10px;
      }
    }
    .nav__mobile-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; color: var(--bone);
      transition: color 250ms ease-out;
    }
    .nav--opaque .nav__mobile-icon { color: var(--ink); }
    @media (min-width: 1024px) { .nav__mobile-icon { display: none; } }
    .nav__mobile-icon svg { width: 24px; height: 24px; }

    /* Mobile overlay */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 200;
      background: var(--bone);
      display: flex; flex-direction: column;
      padding: var(--s-4);
      opacity: 0; pointer-events: none;
      transition: opacity 250ms ease-out;
    }
    .mobile-menu[data-open="true"] { opacity: 1; pointer-events: auto; }
    .mobile-menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h-mobile); }
    .mobile-menu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
    .mobile-menu__close svg { width: 24px; height: 24px; }
    .mobile-menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: var(--s-6) 0; }
    .mobile-menu__link { display: block; font-weight: 600; font-size: 24px; line-height: 32px; color: var(--ink); letter-spacing: -0.005em; }
    .mobile-menu__link:hover { color: var(--atlantic); }
    .mobile-menu__cta { margin-top: auto; width: 100%; padding: var(--s-4) 0; }
    .mobile-menu__cta .btn { width: 100%; }

    /* Floating mobile CTA */
    .floating-cta {
      position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px;
      background: var(--hibiscus); color: #fff;
      font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
      border-radius: var(--r-btn); border: 1px solid var(--champagne);
      transition: background-color 200ms ease-out, transform 200ms ease-out;
    }
    .floating-cta:hover { background: var(--hibiscus-hover); transform: translateY(-2px); }
    @media (min-width: 1024px) { .floating-cta { display: none; } }

    /* =========================================================
       SECTION 2 — Hero
       ========================================================= */
    .hero {
      position: relative; width: 100%;
      background: var(--blush-soft); isolation: isolate;
      display: block;
    }
    @media (min-width: 1024px) {
      .hero {
        min-height: 720px;
        min-height: max(720px, 100svh);
        overflow: hidden;
        display: flex;
      }
    }
    .hero__bg {
      position: relative; width: 100%;
      height: 58vh; min-height: 380px; max-height: 520px;
      will-change: transform;
    }
    @media (min-width: 1024px) {
      .hero__bg { position: absolute; inset: 0; z-index: -2; height: auto; max-height: none; }
    }
    .hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.92) contrast(1.05); }
    .hero__overlay {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 30%; z-index: 1;
      background: linear-gradient(180deg, transparent 0%, rgba(255,228,237,0.50) 100%);
      pointer-events: none;
    }
    @media (min-width: 1024px) {
      .hero__overlay {
        inset: 0; height: auto; z-index: -1;
        background: linear-gradient(180deg, rgba(27,58,75,0) 40%, rgba(27,58,75,0.40) 70%, rgba(27,58,75,0.70) 100%);
      }
    }
    .hero__container {
      position: relative; width: 100%; max-width: var(--container-max);
      margin: 0 auto;
      padding: var(--s-5) var(--s-4) var(--s-7);
      background: linear-gradient(180deg, var(--blush-soft) 0%, var(--cream-warm) 100%);
      display: block;
    }
    @media (min-width: 1024px) {
      .hero__container {
        padding: calc(var(--nav-h-desktop) + var(--s-8)) var(--s-8) 0;
        background: transparent;
        display: flex; align-items: flex-end;
      }
    }
    .hero__content {
      width: 100%; max-width: 540px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
    }
    @media (min-width: 1024px) {
      .hero__content {
        max-width: 720px; margin: 0;
        padding-bottom: var(--s-9);
        align-items: flex-start; text-align: left;
      }
    }

    .hero__logo {
      width: 180px; height: 180px; object-fit: contain;
      margin: -90px auto var(--s-4);
      position: relative; z-index: 2;
      opacity: 0; animation: hero-fade 700ms ease-out 200ms forwards;
      filter: drop-shadow(0 0 24px rgba(255,255,255,0.55)) drop-shadow(0 10px 30px rgba(255,77,126,0.35)) drop-shadow(0 4px 16px rgba(0,0,0,0.30));
    }
    @media (min-width: 1024px) {
      .hero__logo {
        width: 360px; height: 360px;
        margin: 0 0 var(--s-5); margin-left: -20px;
      }
    }
    .hero__eyebrow {
      display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--hibiscus); line-height: 1.2;
      margin-bottom: var(--s-4);
      opacity: 0; animation: hero-fade 600ms ease-out 600ms forwards;
    }
    @media (min-width: 1024px) {
      .hero__eyebrow { font-size: 12px; margin-bottom: var(--s-5); color: var(--champagne); }
    }
    .hero__h1 {
      font-family: var(--font-display); font-weight: 500;
      font-size: 44px; line-height: 1.0;
      color: var(--ink); letter-spacing: -0.005em;
      margin: 0;
    }
    @media (min-width: 1024px) { .hero__h1 { font-size: 96px; line-height: 0.95; letter-spacing: -0.01em; color: var(--bone); } }
    .hero__h1 .word { display: inline-block; opacity: 0; transform: translateY(20px); animation: hero-word 500ms ease-out var(--d, 0ms) forwards; }
    .hero__h1 em { font-style: italic; font-weight: 500; }
    .hero__sub {
      font-weight: 400; font-size: 17px; line-height: 1.6;
      color: var(--driftwood);
      max-width: 36ch;
      margin: var(--s-4) auto 0;
      opacity: 0; animation: hero-fade 600ms ease-out 600ms forwards;
    }
    @media (min-width: 1024px) { .hero__sub { font-size: 21px; margin: var(--s-6) 0 0; color: rgba(250,248,244,0.92); } }
    .hero__ctas {
      display: flex; flex-direction: column; gap: 12px;
      margin-top: var(--s-5);
      align-items: center;
      opacity: 0; transform: translateY(12px);
      animation: hero-ctas 500ms ease-out 1400ms forwards;
    }
    @media (min-width: 1024px) { .hero__ctas { align-items: flex-start; } }
    .hero__ctas .btn { width: 100%; }
    @media (min-width: 768px) {
      .hero__ctas { flex-direction: row; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; justify-content: center; }
      .hero__ctas .btn { width: auto; }
    }
    @keyframes hero-fade { to { opacity: 1; } }
    @keyframes hero-word { to { opacity: 1; transform: translateY(0); } }
    @keyframes hero-ctas { to { opacity: 1; transform: translateY(0); } }

    /* =========================================================
       Quick-actions strip (added per request — sits between the
       fixed nav and the hero; pads down to clear the fixed nav)
       ========================================================= */
    /* Strip uses bone-warm so the bone nav above reads as a distinct band */
    .quick-actions {
      background: var(--bone-warm);
      padding: calc(var(--nav-h-mobile) + var(--s-4)) 0 var(--s-5);
    }
    @media (min-width: 1024px) {
      .quick-actions { padding: calc(var(--nav-h-desktop) + var(--s-4)) 0 var(--s-6); }
    }
    .quick-actions__grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-3);
    }
    @media (min-width: 640px) {
      .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .quick-actions__grid { grid-template-columns: repeat(4, 1fr); }
    }
    /* Thin, compact cards (Regus-style) */
    .qa-card {
      display: flex; gap: var(--s-3); align-items: flex-start;
      padding: 12px var(--s-4);
      background: var(--bone);
      border: 1px solid var(--border-light);
      border-radius: var(--r-card);
      transition: border-color 200ms ease-out;
    }
    .qa-card:hover { border-color: var(--atlantic); }
    .qa-card__icon { color: var(--hibiscus); flex-shrink: 0; line-height: 1; }
    .qa-card__icon svg { width: 36px; height: 36px; stroke-width: 1.6; }
    .qa-card__text { min-width: 0; }      /* lets the title ellipsis instead of wrapping */
    .qa-card__title {
      display: block;
      font-family: var(--font-sans); font-weight: 600;
      font-size: 15px; line-height: 1.2; color: var(--ink);
      letter-spacing: 0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qa-card__body {
      display: block;
      font-size: 13px; line-height: 1.4; color: var(--driftwood);
      margin-top: 3px;
    }

    /* =========================================================
       SECTION 3 — Trust strip
       ========================================================= */
    .trust-strip {
      background: linear-gradient(180deg, var(--blush) 0%, var(--peach-soft) 50%, var(--cream-warm) 100%);
      color: var(--ink);
      border-top: 1px solid rgba(255, 77, 126, 0.18);
      border-bottom: 1px solid rgba(255, 77, 126, 0.12);
    }
    .trust-strip__icon { color: var(--hibiscus); }
    .trust-strip__inner {
      max-width: var(--container-max); margin: 0 auto;
      padding: var(--s-3) var(--container-pad);
    }
    .trust-strip__item {
      display: flex; align-items: center; justify-content: center; gap: var(--s-3);
      padding: var(--s-4) 0;
      border-bottom: 1px solid var(--champagne-hair-soft);
    }
    @media (min-width: 1024px) {
      .trust-strip__item { justify-content: flex-start; }
    }
    .trust-strip__item:last-child { border-bottom: 0; }
    @media (min-width: 1024px) {
      .trust-strip__inner { display: flex; justify-content: center; gap: var(--s-9); height: 96px; align-items: center; padding-top: 0; padding-bottom: 0; }
      .trust-strip__item { border-bottom: 0; padding: 0; flex-shrink: 0; }
    }
    .trust-strip__icon { color: var(--champagne); flex-shrink: 0; }
    .trust-strip__icon svg { width: 24px; height: 24px; }
    .trust-strip__text { font-weight: 600; font-size: 15px; letter-spacing: 0.04em; }

    /* =========================================================
       SECTION 4 — Law firm differentiator
       ========================================================= */
    .lawfirm { background: var(--bone); padding: var(--s-8) 0; }
    .lawfirm__grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-6);
    }
    @media (min-width: 1024px) {
      .lawfirm__grid { grid-template-columns: 55% 45%; gap: var(--s-7); align-items: stretch; }
    }
    .lawfirm__h2 { margin-top: 0; }
    .lawfirm__lead { font-size: 18px; color: var(--driftwood); line-height: 1.6; max-width: 540px; margin: var(--s-4) 0 0; }
    @media (min-width: 1024px) { .lawfirm__lead { font-size: 19px; } }
    .lawfirm__body { font-size: var(--t-body); color: var(--ink); line-height: 1.7; max-width: 540px; margin: var(--s-4) 0 0; }
    .lawfirm__cta { margin-top: var(--s-5); }
    .lawfirm__photo-wrap { width: 100%; overflow: hidden; min-height: 260px; }
    @media (min-width: 1024px) { .lawfirm__photo-wrap { min-height: 0; } }
    .lawfirm__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

    /* =========================================================
       SECTION 5 — Persona spotlights
       ========================================================= */
    .personas { background: var(--bone-warm); padding: var(--s-8) 0; }
    @media (min-width: 1024px) { .personas { padding: var(--s-9) 0; } }
    /* Wider header so each sentence of the H2 holds on one line (true 2-line headline) */
    .personas .section-header { max-width: 1180px; }
    #personas-h2 br { display: none; }
    @media (min-width: 1024px) { #personas-h2 br { display: inline; } }
    .persona-grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-4);
      margin-top: var(--s-8);
    }
    @media (min-width: 640px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .persona-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

    .persona-card {
      position: relative; aspect-ratio: 4/5;
      overflow: hidden; border-radius: 20px;
      isolation: isolate; display: block;
      background: var(--ink-soft);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.45),
        0 0 0 2.5px rgba(160,200,255,0.18),
        0 0 0 3px rgba(220,170,255,0.10),
        0 12px 40px rgba(27,58,75,0.18),
        inset 0 1px 0 rgba(255,255,255,0.30);
      transition: box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .persona-card:hover {
      box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.80),
        0 0 0 3px rgba(255,77,126,0.35),
        0 0 0 4px rgba(232,168,154,0.25),
        0 28px 64px rgba(27,58,75,0.32),
        inset 0 1px 0 rgba(255,255,255,0.50);
      transform: translateY(-8px) scale(1.015);
    }
    .persona-card__img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .persona-card:hover .persona-card__img { transform: scale(1.10); }
    .persona-card__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        180deg,
        rgba(14, 42, 56, 0) 0%,
        rgba(14, 42, 56, 0.10) 35%,
        rgba(14, 42, 56, 0.60) 55%,
        rgba(14, 42, 56, 0.88) 72%,
        rgba(14, 42, 56, 0.96) 100%
      );
    }
    .persona-card__content {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: var(--s-4); color: var(--bone);
      display: flex; flex-direction: column;
    }
    .persona-card__title {
      font-family: var(--font-sans); font-size: 13px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      line-height: 1.3; color: rgba(255,255,255,0.95);
      min-height: calc(1.3em * 2);
    }
    .persona-card__blurb {
      font-size: 14px; line-height: 1.5; opacity: 0.82; margin-top: var(--s-2);
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .persona-card__cta {
      display: inline-flex; align-items: center; gap: var(--s-2);
      margin-top: var(--s-3); color: var(--champagne);
      font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
      align-self: flex-start;
    }
    .persona-card__cta .arrow { transition: transform 250ms ease-out; }
    .persona-card:hover .persona-card__cta .arrow { transform: translateX(6px); }

    /* =========================================================
       SECTION 6 — Spaces preview
       ========================================================= */
    .spaces { background: var(--bone); padding: var(--s-8) 0; }
    @media (min-width: 1024px) { .spaces { padding: var(--s-9) 0; } }
    .spaces-grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-3);
      margin-top: var(--s-8);
    }
    @media (min-width: 768px) { .spaces-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
    .space-card {
      background: var(--bone);
      border-radius: 20px;
      overflow: hidden;
      display: flex; flex-direction: column;
      position: relative;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.50),
        0 0 0 2.5px rgba(160,200,255,0.15),
        0 0 0 3px rgba(220,170,255,0.08),
        0 8px 28px rgba(14,42,56,0.10),
        inset 0 1px 0 rgba(255,255,255,0.60);
      transition: box-shadow 300ms ease-out, transform 300ms ease-out;
    }
    .space-card { transition: box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1); }
    .space-card:hover {
      box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.80),
        0 0 0 3px rgba(255,77,126,0.30),
        0 0 0 4px rgba(232,168,154,0.20),
        0 24px 56px rgba(27,58,75,0.22),
        inset 0 1px 0 rgba(255,255,255,0.80);
      transform: translateY(-8px) scale(1.015);
    }
    .space-card__photo { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
    .space-card:hover .space-card__photo { transform: scale(1.08); }
    .space-card__photo-wrap { overflow: hidden; }
    .space-card__photo {
      width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
      transition: transform 600ms ease-out;
    }
    .space-card:hover .space-card__photo { transform: scale(1.03); }
    .space-card__content { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
    @media (min-width: 1024px) { .space-card__content { padding: var(--s-6); } }
    .space-card__title { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); line-height: 1.2; position: relative; display: inline-block; }
    .space-card__title::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
      background: var(--champagne);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 250ms ease-out;
    }
    .space-card:hover .space-card__title::after { transform: scaleX(1); }
    .space-card__price { font-weight: 600; font-size: var(--t-body); color: var(--champagne); margin-top: var(--s-3); }
    .space-card__body { font-size: 15px; color: var(--driftwood); line-height: 1.6; margin-top: var(--s-3); }
    .space-card__cta {
      margin-top: auto;            /* pin CTA to the bottom; aligns across all 3 cards */
      padding-top: var(--s-5);     /* guarantee >=32px gap below the body */
      align-self: flex-start;
    }
    /* Whole card is the click target — stretched link via ::before so it
       doesn't collide with the .btn-ghost ::after hover underline. */
    .space-card__cta::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* =========================================================
       SECTION 7 — AV-ready feature
       ========================================================= */
    .av {
      background: linear-gradient(135deg, var(--blush-soft) 0%, var(--peach-soft) 45%, var(--blush) 100%);
      color: var(--ink); padding: var(--s-8) 0;
    }
    .av .eyebrow { color: var(--hibiscus); }
    .av__grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
    }
    @media (min-width: 1024px) { .av__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
    .av__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 20px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.50),
        0 0 0 2.5px rgba(160,200,255,0.15),
        0 12px 36px rgba(27,58,75,0.12),
        inset 0 1px 0 rgba(255,255,255,0.50);
    }
    @media (min-width: 1024px) { .av__photo { aspect-ratio: 4/5; } }
    .av__h2 { color: var(--ink); }
    .av__body { font-size: 18px; color: var(--driftwood); line-height: 1.6; max-width: 480px; margin-top: var(--s-4); }
    @media (min-width: 1024px) { .av__body { font-size: 19px; } }
    .av__details {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: var(--s-3); margin-top: var(--s-6);
    }
    .av__detail { display: flex; gap: var(--s-3); align-items: flex-start; }
    .av__detail-icon { color: var(--champagne); flex-shrink: 0; }
    .av__detail-icon svg { width: 20px; height: 20px; }
    .av__detail-label { font-weight: 600; font-size: 13px; color: var(--champagne); }
    .av__detail-value { font-weight: 400; font-size: 14px; color: var(--bone); margin-top: 2px; line-height: 1.4; }
    .av__pricing { font-weight: 600; font-size: 17px; color: var(--champagne); margin-top: var(--s-6); line-height: 1.5; }
    .av__ctas {
      display: flex; flex-direction: column; gap: var(--s-3);
      margin-top: var(--s-5); align-items: flex-start;
    }
    @media (min-width: 768px) { .av__ctas { flex-direction: row; align-items: center; gap: var(--s-5); } }

    /* =========================================================
       SECTION 8 — Pricing
       ========================================================= */
    .pricing { background: var(--bone-warm); padding: var(--s-8) 0; }
    @media (min-width: 1024px) { .pricing { padding: var(--s-9) 0; } }
    .pricing-grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-3);
      margin-top: var(--s-8); max-width: 1280px; margin-left: auto; margin-right: auto;
    }
    @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; } }
    .pricing-card {
      position: relative;
      background: var(--bone);
      border: 1px solid rgba(31, 70, 84, 0.20);
      border-radius: var(--r-card);
      padding: var(--s-6) var(--s-5);
      display: flex; flex-direction: column;
    }
    @media (min-width: 1024px) { .pricing-card { padding: var(--s-6); } }
    @media (min-width: 1024px) {
      .pricing-card--featured { transform: translateY(-8px); border-color: var(--atlantic); }
    }
    .pricing-card__badge {
      position: absolute; top: var(--s-3); right: var(--s-3);
      background: var(--champagne); color: var(--ink);
      padding: 6px 12px; font-size: 11px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      border-radius: var(--r-badge);
    }
    .pricing-card__category {
      font-weight: 600; font-size: 13px;
      color: var(--champagne); text-transform: uppercase; letter-spacing: 0.08em;
    }
    .pricing-card__price-row { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); }
    .pricing-card__price {
      font-family: var(--font-display); font-weight: 500;
      color: var(--ink); line-height: 1;
      white-space: nowrap;                        /* range price never breaks to 2 lines */
      font-size: clamp(32px, 2.2vw + 16px, 46px); /* same scale on all 3 cards */
    }
    .pricing-card__price-row { flex-wrap: nowrap; }
    .pricing-card__price-unit { font-weight: 400; font-size: 17px; color: var(--driftwood); }
    .pricing-card__tier { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-top: 8px; font-weight: 500; }
    .pricing-card__desc { color: var(--driftwood); font-size: 15px; line-height: 1.6; margin-top: var(--s-3); }
    .pricing-card__included { margin-top: var(--s-5); display: flex; flex-direction: column; gap: 10px; }
    .pricing-card__included li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink); line-height: 1.4; }
    .pricing-card__included svg { color: var(--champagne); flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; }
    .pricing-card__cta { margin-top: var(--s-6); }
    .pricing-card__cta .btn { width: 100%; }
    .pricing__see-all { text-align: center; margin-top: var(--s-7); }

    /* =========================================================
       SECTION 9 — Benefits grid
       ========================================================= */
    .benefits { background: var(--bone); padding: var(--s-8) 0; }
    @media (min-width: 1024px) { .benefits { padding: var(--s-9) 0; } }
    .benefits-grid {
      display: grid; grid-template-columns: 1fr;
      gap: var(--s-7) var(--s-5); margin-top: var(--s-8);
    }
    @media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) {
      .benefits-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .benefit-item__icon { color: var(--champagne); margin-bottom: var(--s-4); }
    .benefit-item__icon svg { width: 40px; height: 40px; stroke-width: 1.25; }
    .benefit-item__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.2; }
    .benefit-item__body { color: var(--driftwood); font-size: 15px; line-height: 1.6; margin-top: var(--s-3); }

    /* =========================================================
       SECTION 10 — Email capture
       ========================================================= */
    .email-capture { background: var(--bone-warm); padding: var(--s-7) 0; }
    @media (min-width: 1024px) { .email-capture { padding: var(--s-8) 0; } }
    .email-capture__inner { max-width: 1280px; margin: 0 auto; }
    .email-capture__grid {
      display: grid; grid-template-columns: 1fr; gap: var(--s-5);
    }
    @media (min-width: 1024px) { .email-capture__grid { grid-template-columns: 60% 40%; gap: var(--s-7); align-items: center; } }
    .email-capture__h2 {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(28px, 2vw + 20px, 40px); line-height: 1.1;
      color: var(--ink); max-width: 540px;
    }
    .email-capture__h2 em { font-style: italic; font-weight: 500; }
    .email-capture__sub { font-size: 17px; color: var(--driftwood); line-height: 1.6; max-width: 480px; margin-top: var(--s-3); }
    .email-capture__form { width: 100%; }
    .email-capture__input {
      width: 100%; height: 56px; padding: 0 20px;
      background: var(--bone);
      border: 1px solid var(--atlantic);
      border-radius: var(--r-input);
      font-size: 17px; color: var(--ink);
      transition: border-width 150ms ease-out, padding 150ms ease-out;
    }
    .email-capture__input::placeholder { color: rgba(91, 118, 130, 0.7); }
    .email-capture__input:focus { outline: none; border-width: 2px; padding: 0 19px; }
    .email-capture__btn { width: 100%; margin-top: var(--s-3); }
    .email-capture__fine { font-size: 13px; color: rgba(91, 118, 130, 0.85); margin-top: 12px; line-height: 1.5; }
    .email-capture__success {
      display: none; align-items: center; gap: var(--s-3);
      padding: var(--s-4) 0;
      font-size: 17px; color: var(--ink); font-weight: 500;
    }
    .email-capture__success svg { color: var(--champagne); flex-shrink: 0; }
    .email-capture[data-submitted="true"] .email-capture__form { display: none; }
    .email-capture[data-submitted="true"] .email-capture__success { display: flex; }

    /* =========================================================
       SECTION 11 — Testimonials carousel
       ========================================================= */
    .testimonials {
      background: linear-gradient(180deg, var(--cream-warm) 0%, var(--petal) 35%, var(--blush) 70%, var(--coral-light) 100%);
      color: var(--ink); padding: var(--s-8) 0;
    }
    .testimonials .eyebrow { color: var(--hibiscus); }
    @media (min-width: 1024px) { .testimonials { padding: var(--s-9) 0; } }
    .testimonial-grid {
      display: grid; grid-template-columns: 1fr;
      gap: var(--s-4); margin-top: var(--s-7);
      max-width: 1100px; margin-left: auto; margin-right: auto;
    }
    @media (min-width: 768px) {
      .testimonial-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
    }
    .testimonial-card {
      background: #fff; color: var(--ink);
      padding: var(--s-5);
      border-radius: 14px;
      display: flex; flex-direction: column;
      box-shadow:
        0 0 0 1px rgba(255,77,126,0.10),
        0 8px 24px rgba(196,42,110,0.08),
        inset 0 1px 0 rgba(255,255,255,0.80);
      transition: box-shadow 250ms ease-out, transform 250ms ease-out;
    }
    .testimonial-card:hover {
      transform: translateY(-3px);
      box-shadow:
        0 0 0 1.5px rgba(255,77,126,0.25),
        0 14px 32px rgba(196,42,110,0.15),
        inset 0 1px 0 rgba(255,255,255,0.90);
    }
    .testimonial-card__stars { display: flex; gap: 3px; margin-bottom: var(--s-3); color: var(--hibiscus); }
    .testimonial-card__stars svg { width: 16px; height: 16px; }
    .testimonial-card__quote {
      flex: 1;
      font-family: var(--font-sans); font-style: normal; font-weight: 400;
      font-size: 15px; line-height: 1.55; color: var(--ink);
    }
    .testimonial-card__attrib { display: block; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,77,126,0.15); }
    .testimonial-card__name { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; letter-spacing: -0.005em; }
    .testimonial-card__role { font-size: 11px; font-weight: 600; color: var(--hibiscus); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }

    /* =========================================================
       SECTION 12 — Location
       ========================================================= */
    .location { background: var(--bone); padding: var(--s-8) 0; }
    @media (min-width: 1024px) { .location { padding: var(--s-9) 0; } }
    .location__grid {
      display: grid; grid-template-columns: 1fr;
      gap: var(--s-6); align-items: center;
    }
    @media (min-width: 1024px) { .location__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
    .location__lead { font-size: 19px; color: var(--ink); line-height: 1.6; max-width: 520px; margin-top: var(--s-5); }
    .location__body { font-size: var(--t-body); color: var(--driftwood); line-height: 1.7; max-width: 520px; margin-top: var(--s-4); }
    .location__address { font-weight: 600; font-size: 17px; color: var(--ink); margin-top: var(--s-5); line-height: 1.5; }
    .location__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: center; }
    .location__map-wrap { width: 100%; }
    .location__map {
      width: 100%; aspect-ratio: 4/5;
      border: 0; display: block;
      background: var(--bone-warm);
    }
    .location__info-strip {
      display: flex; flex-wrap: wrap; gap: var(--s-4);
      margin-top: var(--s-3);
      color: var(--driftwood); font-size: 14px;
    }
    .location__info-item { display: flex; align-items: center; gap: var(--s-2); }
    .location__info-item svg { color: var(--champagne); width: 18px; height: 18px; }

    /* =========================================================
       SECTION 13a — Footer CTA
       ========================================================= */
    .footer-cta {
      background: linear-gradient(135deg, var(--magenta) 0%, var(--hibiscus) 25%, var(--sunset) 55%, var(--coral-light) 80%, var(--peach-soft) 100%);
      color: #fff; padding: var(--s-9) 0; text-align: center;
      position: relative; overflow: hidden;
    }
    .footer-cta::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.20) 0%, transparent 60%);
      pointer-events: none;
    }
    .footer-cta > * { position: relative; }
    .footer-cta__h2 { color: #fff; text-shadow: 0 2px 16px rgba(196,42,110,0.30); }
    .footer-cta__sub { color: rgba(255,255,255,0.92); }
    .footer-cta .eyebrow { color: rgba(255,255,255,0.85); }
    .footer-cta .phone-cta { color: #fff; }
    .footer-cta .phone-cta__icon { background: #fff; color: var(--magenta); box-shadow: 0 12px 36px rgba(196,42,110,0.45), 0 4px 12px rgba(0,0,0,0.15); }
    .footer-cta .phone-cta:hover { color: #fff; transform: translateY(-3px); }
    .footer-cta .phone-cta:hover .phone-cta__icon { background: #fff; color: var(--hibiscus); box-shadow: 0 20px 48px rgba(255,77,126,0.55); }
    .footer-cta .btn-primary { background: #fff; color: var(--magenta); }
    .footer-cta .btn-primary:hover { background: var(--bone); color: var(--hibiscus-active); }
    @media (min-width: 1024px) { .footer-cta { padding: var(--s-10) 0; } }
    .footer-cta__h2 {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(44px, 5vw + 24px, 72px); line-height: 1.0;
      color: var(--bone); max-width: 880px; margin: 0 auto;
    }
    .footer-cta__h2 em { font-style: italic; font-weight: 500; }
    .footer-cta__sub {
      font-size: var(--t-body-l); color: rgba(248,244,237,0.92);
      margin: var(--s-5) auto 0; max-width: 600px; line-height: 1.6;
    }
    .footer-cta__btns {
      display: flex; flex-direction: column; gap: 12px;
      margin-top: var(--s-6); align-items: stretch;
      max-width: 720px; margin-left: auto; margin-right: auto;
    }
    @media (min-width: 1024px) {
      .footer-cta__btns { flex-direction: row; justify-content: center; gap: var(--s-3); align-items: center; max-width: none; flex-wrap: wrap; }
    }

    /* =========================================================
       SECTION 13b — Footer proper
       ========================================================= */
    .footer { background: var(--ink-soft); color: var(--bone); padding: var(--s-7) 0 var(--s-5); }
    @media (min-width: 1024px) { .footer { padding: var(--s-8) 0 var(--s-6); } }
    .footer__grid {
      display: grid; grid-template-columns: 1fr;
      gap: var(--s-6); align-items: center;
    }
    @media (min-width: 768px) { .footer__grid { grid-template-columns: auto 1fr; gap: var(--s-7); } }
    .footer__nav {
      display: flex; flex-direction: column; gap: var(--s-3);
    }
    @media (min-width: 768px) {
      .footer__nav { flex-direction: row; flex-wrap: wrap; gap: var(--s-5) var(--s-6); justify-content: flex-end; }
    }
    .footer__nav .footer__link {
      font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--bone); padding: 8px 0;
    }
    .footer__brand { display: flex; flex-direction: column; gap: var(--s-3); }
    .footer__logo { width: 64px; height: 64px; object-fit: contain; }
    @media (min-width: 1024px) { .footer__logo { width: 80px; height: 80px; } }
    .footer__brandname {
      font-family: var(--font-display); font-weight: 500;
      font-size: 24px; line-height: 1.05; color: var(--bone);
      letter-spacing: -0.005em;
    }
    @media (min-width: 1024px) { .footer__brandname { font-size: 28px; } }
    .footer__brandname span { display: block; }
    .footer__tagline { font-size: 14px; color: rgba(248,244,237,0.7); line-height: 1.5; max-width: 280px; margin-top: var(--s-2); }
    .footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-3); }
    .footer__contact a, .footer__contact span { font-size: 14px; color: rgba(248,244,237,0.85); }
    .footer__contact a:hover { color: var(--bone); }
    .footer__heading {
      font-weight: 600; font-size: 13px;
      color: var(--champagne); text-transform: uppercase; letter-spacing: 0.08em;
      margin-bottom: var(--s-4);
    }
    .footer__link {
      display: block; color: rgba(248,244,237,0.7); font-size: 14px;
      padding: 5px 0; position: relative;
      transition: color 200ms ease-out;
      width: fit-content;
    }
    .footer__link::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
      height: 1px; background: var(--champagne);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 200ms ease-out;
    }
    .footer__link:hover { color: var(--bone); }
    .footer__link:hover::after { transform: scaleX(1); }

    .footer__bottom {
      display: flex; flex-direction: column; gap: var(--s-3);
      justify-content: space-between; align-items: flex-start;
      margin-top: var(--s-7); padding-top: var(--s-5);
      border-top: 1px solid var(--champagne-hair);
      color: rgba(248,244,237,0.7); font-size: 13px;
    }
    @media (min-width: 768px) { .footer__bottom { flex-direction: row; align-items: center; } }
    .footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
    .footer__legal a { color: rgba(248,244,237,0.7); }
    .footer__legal a:hover { color: var(--bone); }
    .footer__legal-sep { color: var(--champagne-hair); }

    /* =========================================================
       Reveal animations (intersection observer toggles .in-view)
       ========================================================= */
    .reveal {
      opacity: 0; transform: translateY(20px);
      transition: opacity 500ms ease-out, transform 500ms ease-out;
    }
    .reveal.in-view { opacity: 1; transform: none; }
    .reveal[data-stagger="1"].in-view { transition-delay: 80ms; }
    .reveal[data-stagger="2"].in-view { transition-delay: 160ms; }
    .reveal[data-stagger="3"].in-view { transition-delay: 240ms; }
    .reveal[data-stagger="4"].in-view { transition-delay: 320ms; }
    .reveal[data-stagger="5"].in-view { transition-delay: 400ms; }
    .reveal[data-stagger="6"].in-view { transition-delay: 480ms; }

    /* =========================================================
       Reduced motion
       ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
      .hero__eyebrow, .hero__sub, .hero__h1 .word, .hero__ctas,
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
      .btn-primary:hover, .btn-ghost:hover .arrow,
      .persona-card:hover .persona-card__img,
      .space-card:hover .space-card__photo { transform: none; }
    }