:root {
        --paper: #ffffff;
        --ink: #1d1d1f;
        --muted: #6e6e73;
        --line: rgba(29, 29, 31, 0.11);
        --soft: #f5f5f7;
        --sage: #4f6b5b;
        --lavender: #dfe3f1;
        --radius: 28px;
        --max: 1180px;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }

      * {
        box-sizing: border-box;
        font-style: normal;
      }

      html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 14% -4%, rgba(79, 107, 91, 0.045), transparent 34%),
          radial-gradient(circle at 94% 6%, rgba(151, 160, 196, 0.06), transparent 30%),
          var(--paper);
        color: var(--ink);
        font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      body.modal-open {
        overflow: hidden;
      }

      .skip-link {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 100;
        padding: 10px 14px;
        border-radius: 999px;
        background: var(--ink);
        color: white;
        font-size: 13px;
        font-weight: 700;
        transform: translateY(-150%);
        transition: transform 160ms ease;
      }

      .skip-link:focus {
        transform: translateY(0);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button,
      input {
        font: inherit;
      }

      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }

      button:focus-visible,
      a:focus-visible,
      input:focus-visible {
        outline: 3px solid rgba(79, 107, 91, 0.45);
        outline-offset: 4px;
      }

      .site-header {
        position: sticky;
        top: max(12px, env(safe-area-inset-top));
        z-index: 30;
        width: min(calc(100% - 28px), 720px);
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 12px auto 0;
        padding: 7px 7px 7px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 14px 40px rgba(29, 29, 31, 0.08);
        backdrop-filter: blur(24px) saturate(1.25);
        -webkit-backdrop-filter: blur(24px) saturate(1.25);
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.02em;
        white-space: nowrap;
      }

      .brand-logo {
        width: 32px;
        height: 32px;
        display: block;
        object-fit: contain;
        border-radius: 50%;
      }

      .button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border: 1px solid var(--ink);
        border-radius: 999px;
        padding: 0 18px;
        background: var(--ink);
        color: white;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: transform 180ms var(--ease), color 180ms ease, background 180ms ease;
      }

      .button:hover {
        transform: translateY(-2px);
      }

      .header-button {
        min-height: 42px;
        padding-inline: 15px;
      }

      .section {
        width: min(calc(100% - 30px), var(--max));
        margin-inline: auto;
      }

      .hero {
        min-height: calc(100svh - 82px);
        display: grid;
        gap: 44px;
        align-items: center;
        padding: 72px 0 64px;
      }

      .hero-copy {
        position: relative;
        z-index: 2;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 22px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--sage);
        box-shadow: 0 0 0 5px rgba(79, 107, 91, 0.11);
      }

      h1 {
        margin: 0;
        font-size: clamp(34px, 10.5vw, 58px);
        font-weight: 560;
        line-height: 0.93;
        letter-spacing: -0.07em;
        white-space: nowrap;
      }

      .hero-subhead {
        max-width: 650px;
        margin: 24px 0 0;
        color: #49494f;
        font-size: clamp(17px, 4.5vw, 20px);
        line-height: 1.52;
        letter-spacing: -0.025em;
      }

      .proof-line {
        max-width: 620px;
        margin: 15px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.55;
      }

      .hero-actions {
        display: grid;
        gap: 16px;
        margin-top: 30px;
      }

      .hero-actions .button {
        width: 100%;
        min-height: 56px;
        font-size: 14px;
      }

      .expectation-line {
        margin: 0;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.5;
      }

      .portrait-card {
        position: relative;
        min-height: 520px;
        overflow: hidden;
        border-radius: 32px;
        background:
          radial-gradient(circle at 58% 34%, rgba(255, 255, 255, 0.94) 0 9%, rgba(255, 255, 255, 0) 42%),
          linear-gradient(150deg, #dfe4f7 0%, #c9cedd 46%, #aab3ad 100%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52), 0 28px 70px rgba(25, 27, 22, 0.14);
        isolation: isolate;
      }

      .portrait-card::before {
        content: "GOVERN";
        position: absolute;
        top: 10%;
        left: -4%;
        z-index: 0;
        color: rgba(255, 255, 255, 0.48);
        font-size: clamp(82px, 25vw, 180px);
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.085em;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
      }

      .orb {
        position: absolute;
        top: 13%;
        right: 7%;
        z-index: 0;
        width: 220px;
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.52);
        border-radius: 50%;
        box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.06), 0 0 0 84px rgba(255, 255, 255, 0.035);
      }

      .portrait-cutout {
        position: absolute;
        left: 50%;
        bottom: -4px;
        z-index: 2;
        width: min(110%, 670px);
        height: 98%;
        object-fit: contain;
        object-position: center bottom;
        transform: translateX(-49%);
        filter: drop-shadow(0 28px 30px rgba(25, 28, 23, 0.22));
      }

      .signal-card {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 15px 16px;
        border: 1px solid rgba(255, 255, 255, 0.58);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.76);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 16px 30px rgba(20, 23, 18, 0.1);
        opacity: 0;
        transform: translateX(36px);
        animation: signal-slide-in 760ms 520ms var(--ease) forwards;
      }

      .signal-card p,
      .signal-card span {
        margin: 0;
      }

      .signal-card p {
        font-size: 12px;
        font-weight: 750;
        letter-spacing: 0.02em;
        text-transform: none;
      }

      .signal-card span {
        color: var(--muted);
        font-size: 10px;
        white-space: nowrap;
      }

      .site-footer {
        width: min(calc(100% - 30px), var(--max));
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-inline: auto;
        padding: 28px 0;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 11px;
      }

      .footer-logo {
        width: 24px;
        height: 24px;
        display: block;
        object-fit: contain;
      }

      .join-modal {
        width: min(calc(100% - 28px), 720px);
        max-width: 720px;
        max-height: calc(100dvh - 28px);
        margin: auto;
        padding: 0;
        overflow: auto;
        border: 0;
        border-radius: 26px;
        background: transparent;
        color: var(--ink);
        overscroll-behavior: contain;
      }

      .join-modal::backdrop {
        background: rgba(29, 29, 31, 0.42);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .modal-shell {
        overflow: hidden;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 34px 110px rgba(29, 29, 31, 0.24);
      }

      .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding-bottom: 26px;
        border-bottom: 1px solid var(--line);
      }

      .modal-kicker {
        margin: 0 0 10px;
        color: var(--sage);
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .modal-header h2 {
        margin: 0;
        font-size: clamp(36px, 9vw, 54px);
        font-weight: 560;
        line-height: 0.96;
        letter-spacing: -0.055em;
      }

      .modal-close {
        position: sticky;
        top: 0;
        z-index: 3;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: white;
        color: var(--ink);
        cursor: pointer;
        font-size: 22px;
      }

      .modal-copy {
        max-width: 540px;
        margin: 24px 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
      }

      .form-embed {
        position: relative;
        min-height: 792px;
        margin: 0 -10px -10px;
        overflow: hidden;
        border-radius: 22px;
        background: var(--soft);
      }

      .form-embed iframe {
        display: block;
        width: 100%;
        min-height: 792px;
        border: 0;
      }

      .reveal {
        opacity: 0;
        transform: translateY(22px);
        animation: enter 700ms var(--ease) forwards;
      }

      .portrait-card.reveal {
        animation-delay: 100ms;
      }

      @keyframes enter {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes signal-slide-in {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @media (min-width: 720px) {
        .section,
        .site-footer {
          width: min(calc(100% - 48px), var(--max));
        }

        .hero {
          padding-top: 88px;
        }

        .hero-actions {
          display: flex;
          align-items: center;
        }

        .hero-actions .button {
          width: auto;
          min-width: 190px;
        }

        .portrait-card {
          min-height: 700px;
        }

        .portrait-cutout {
          width: min(88%, 710px);
        }

        .signal-card {
          right: auto;
          bottom: 24px;
          left: 24px;
          min-width: 310px;
        }

        .form-embed {
          margin-inline: 0;
        }
      }

      @media (max-width: 719px) {
        .join-modal {
          width: 100%;
          max-width: none;
          max-height: 100dvh;
          min-height: 100dvh;
          border-radius: 0;
        }

        .modal-shell {
          min-height: 100dvh;
          padding: max(18px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
          border: 0;
          border-radius: 0;
        }

        .modal-header {
          position: sticky;
          top: 0;
          z-index: 2;
          margin: -18px -14px 0;
          padding: max(18px, env(safe-area-inset-top)) 14px 18px;
          background: rgba(255, 255, 255, 0.94);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
        }

        .modal-copy {
          margin-inline: 4px;
        }

        .form-embed {
          margin: 0;
          border-radius: 18px;
        }
      }

      @media (min-width: 980px) {
        .hero {
          grid-template-columns: minmax(0, 0.96fr) minmax(390px, 0.72fr);
          gap: clamp(46px, 6vw, 86px);
          padding: 62px 0 70px;
        }

        h1 {
          font-size: clamp(54px, 5.4vw, 76px);
        }

        .hero-subhead {
          font-size: clamp(18px, 1.45vw, 21px);
        }

        .portrait-card {
          height: min(72vh, 760px);
          min-height: 590px;
        }

        .portrait-card::before {
          font-size: clamp(110px, 10vw, 170px);
        }

        .portrait-cutout {
          width: min(102%, 720px);
          height: 102%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .signal-card {
          animation-delay: 0ms !important;
        }
      }

      /* V14 — Framer interaction with a masculine architectural palette */
      :root {
        --paper: #f2f0ea;
        --ink: #171b1a;
        --muted: #626966;
        --line: rgba(23, 27, 26, 0.14);
        --soft: #e4e7e3;
        --sage: #2f5747;
        --violet: #42586a;
        --coral: #8a5b45;
        --mint: #9fb5a8;
        --butter: #c5ad78;
      }

      body {
        --pointer-x: 72%;
        --pointer-y: 16%;
        background:
          radial-gradient(circle 420px at var(--pointer-x) var(--pointer-y), rgba(66, 88, 106, 0.15), transparent 70%),
          linear-gradient(180deg, #f7f6f2 0%, var(--paper) 64%, #ecebe6 100%);
      }

      button:focus-visible,
      a:focus-visible,
      input:focus-visible {
        outline-color: rgba(47, 87, 71, 0.55);
      }

      .site-header {
        width: min(calc(100% - 28px), 1180px);
        border-color: rgba(255, 255, 255, 0.72);
        background: rgba(247, 246, 242, 0.8);
        box-shadow: 0 18px 50px rgba(25, 39, 35, 0.11);
        backdrop-filter: blur(24px) saturate(1.35);
        -webkit-backdrop-filter: blur(24px) saturate(1.35);
      }

      .brand-logo {
        border-radius: 50%;
      }

      .button {
        border-color: var(--ink);
        background: var(--ink);
        box-shadow: 0 10px 24px rgba(23, 27, 26, 0.13);
      }

      .button:hover {
        transform: translateY(-2px) rotate(-0.6deg);
        background: var(--violet);
        border-color: var(--violet);
      }

      .hero {
        position: relative;
        isolation: isolate;
      }

      .hero::before {
        content: "GOVERN";
        position: absolute;
        top: 21%;
        right: -15%;
        z-index: -1;
        color: rgba(66, 88, 106, 0.055);
        font-size: clamp(130px, 30vw, 440px);
        font-weight: 820;
        line-height: 0.72;
        letter-spacing: -0.09em;
        pointer-events: none;
      }

      .eyebrow {
        color: var(--violet);
      }

      .eyebrow::before {
        border-radius: 3px;
        background: var(--coral);
        box-shadow: 0 0 0 5px rgba(138, 91, 69, 0.14);
        transform: rotate(18deg);
      }

      h1 {
        color: var(--ink);
        font-size: clamp(34px, 10.5vw, 62px);
        font-weight: 680;
        letter-spacing: -0.075em;
      }

      h1 span {
        position: relative;
        color: var(--violet);
      }

      h1 span::after {
        content: "";
        position: absolute;
        right: 0.02em;
        bottom: -0.01em;
        left: 0.02em;
        z-index: -1;
        height: 0.14em;
        border-radius: 999px;
        background: var(--mint);
        transform: rotate(-1.5deg);
        transform-origin: left;
        animation: underline-in 800ms 420ms var(--ease) both;
      }

      @keyframes underline-in {
        from { transform: scaleX(0) rotate(-1.5deg); }
        to { transform: scaleX(1) rotate(-1.5deg); }
      }

      .hero-subhead {
        color: #454d49;
      }

      .proof-line {
        color: var(--muted);
      }

      .hero-actions .button {
        background: linear-gradient(115deg, var(--ink) 0%, #2a3e38 100%);
      }

      .expectation-line {
        max-width: 280px;
      }

      .portrait-wrap {
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        position: relative;
        min-height: 520px;
        z-index: 1;
        isolation: isolate;
      }

      .portrait-wrap::before,
      .portrait-wrap::after {
        content: "";
        position: absolute;
        z-index: -2;
        border-radius: 34px;
        pointer-events: none;
      }

      .portrait-wrap::before {
        inset: 8% -3% -3% 9%;
        background: var(--coral);
        transform: rotate(4.2deg);
        animation: plane-shift-a 7s var(--ease) infinite alternate;
      }

      .portrait-wrap::after {
        inset: -2% 12% 9% -4%;
        background: linear-gradient(145deg, var(--mint), var(--butter));
        transform: rotate(-3.2deg);
        animation: plane-shift-b 8.5s var(--ease) infinite alternate;
      }

      @keyframes plane-shift-a {
        to { transform: rotate(2.2deg) translate(5px, -7px); }
      }

      @keyframes plane-shift-b {
        to { transform: rotate(-1.5deg) translate(-4px, 8px); }
      }

      .portrait-card {
        min-height: 520px;
        transform:
          perspective(1100px)
          rotateX(var(--tilt-x))
          rotateY(var(--tilt-y))
          translateY(0);
        transform-style: preserve-3d;
        will-change: transform;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.52),
          0 42px 94px rgba(25, 39, 35, 0.24);
        animation: card-float 6s var(--ease) infinite alternate;
      }

      @keyframes card-float {
        to {
          transform:
            perspective(1100px)
            rotateX(var(--tilt-x))
            rotateY(var(--tilt-y))
            translateY(-12px);
        }
      }

      .signal-card {
        color: var(--ink);
        transition: transform 220ms var(--ease), background 220ms ease;
      }

      .signal-card:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.92);
      }

      .signal-card p {
        text-transform: none;
      }

      .signal-card span {
        color: var(--violet);
        font-size: 14px;
      }

      .site-footer {
        min-height: 100px;
        flex-wrap: wrap;
      }

      .footer-links {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .footer-links a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        color: var(--muted);
        font-size: 11px;
      }

      .join-modal::backdrop {
        background: rgba(18, 25, 23, 0.52);
      }

      .modal-shell {
        border-color: rgba(66, 88, 106, 0.16);
        background: #f4f3ef;
        box-shadow: 0 36px 120px rgba(25, 39, 35, 0.3);
      }

      .modal-kicker {
        color: var(--violet);
      }

      .form-embed {
        border-radius: 18px;
        background: white;
      }

      .form-legal-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 10px;
      }

      @media (min-width: 720px) {
        .portrait-wrap,
        .portrait-card {
          min-height: 700px;
        }

        .footer-links {
          width: auto;
          margin-left: auto;
        }
      }

      @media (min-width: 980px) {
        .hero {
          grid-template-columns: minmax(0, 0.9fr) minmax(430px, 0.78fr);
          gap: clamp(60px, 8vw, 118px);
        }

        h1 {
          font-size: clamp(58px, 5.8vw, 82px);
        }

        .portrait-wrap {
          height: min(72vh, 760px);
          min-height: 590px;
        }

        .portrait-card {
          height: 100%;
          min-height: 590px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .portrait-card {
          transform: none !important;
        }
      }

      /* V15 — two-photo continuity test behind the primary portrait */
      .portrait-wrap::before,
      .portrait-wrap::after {
        display: none;
      }

      .portrait-card {
        position: relative;
        z-index: 3;
      }

      .photo-layer {
        position: absolute;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.56);
        border-radius: 32px;
        background: #28342f;
        box-shadow: 0 26px 72px rgba(25, 39, 35, 0.22);
        pointer-events: none;
      }

      .photo-layer::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(145deg, rgba(66, 88, 106, 0.13), rgba(47, 87, 71, 0.11));
        mix-blend-mode: color;
      }

      .photo-layer img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: saturate(0.74) contrast(0.98);
      }

      .photo-layer-white {
        inset: 4% -4% 5% 8%;
        z-index: 2;
        transform: rotate(5deg);
        animation: stack-white 7.5s var(--ease) infinite alternate;
      }

      .photo-layer-white img {
        object-position: 50% 43%;
      }

      .photo-layer-navy {
        inset: 7% 9% -2% -4%;
        z-index: 1;
        transform: rotate(-6deg);
        animation: stack-navy 8.6s var(--ease) infinite alternate;
      }

      .photo-layer-navy img {
        object-position: 54% 64%;
      }

      @keyframes stack-white {
        to { transform: rotate(3.7deg) translate(4px, -7px); }
      }

      @keyframes stack-navy {
        to { transform: rotate(-4.5deg) translate(-3px, 7px); }
      }

      @media (min-width: 720px) {
        .photo-layer-white {
          inset: 4% -7% 4% 10%;
          transform: rotate(6deg);
        }

        .photo-layer-navy {
          inset: 7% 12% -3% -7%;
          transform: rotate(-7deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .photo-layer-white,
        .photo-layer-navy {
          animation: none !important;
        }
      }

      /* V16 — a true rotating three-card photo deck */
      .portrait-wrap {
        cursor: pointer;
      }

      .stack-card {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: inherit;
        animation: none !important;
        transform-style: preserve-3d;
        will-change: transform;
        transition:
          transform 720ms var(--ease),
          opacity 520ms ease,
          filter 520ms ease,
          box-shadow 520ms ease;
      }

      .stack-card[data-slot="0"] {
        z-index: 3;
        opacity: 1;
        filter: none;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.52),
          0 42px 94px rgba(25, 39, 35, 0.24);
      }

      .stack-card[data-slot="1"] {
        z-index: 2;
        opacity: 0.96;
        filter: saturate(0.86) brightness(0.97);
        pointer-events: none;
        transform: translate3d(7%, -2%, 0) rotate(5deg) scale(0.96);
        box-shadow: 0 26px 72px rgba(25, 39, 35, 0.2);
      }

      .stack-card[data-slot="2"] {
        z-index: 1;
        opacity: 0.88;
        filter: saturate(0.72) brightness(0.94);
        pointer-events: none;
        transform: translate3d(-7%, 3%, 0) rotate(-6deg) scale(0.92);
        box-shadow: 0 20px 54px rgba(25, 39, 35, 0.16);
      }

      .shuffle-control {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 8;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 999px;
        background: rgba(18, 25, 23, 0.72);
        color: white;
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 12px 34px rgba(18, 25, 23, 0.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        cursor: pointer;
        transition: background 180ms ease, transform 180ms ease;
      }

      .shuffle-control:hover,
      .shuffle-control:focus-visible {
        background: rgba(18, 25, 23, 0.9);
        transform: translateY(-2px);
      }

      .shuffle-control span {
        font-size: 15px;
        line-height: 1;
      }

      @media (min-width: 720px) {
        .stack-card[data-slot="1"] {
          transform: translate3d(9%, -2%, 0) rotate(6deg) scale(0.96);
        }

        .stack-card[data-slot="2"] {
          transform: translate3d(-9%, 3%, 0) rotate(-7deg) scale(0.92);
        }

      }

      @media (prefers-reduced-motion: reduce) {
        .stack-card {
          transition: none !important;
        }
      }

      /* V19 — mobile viewport lock with a clean, non-floating frame */
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        overscroll-behavior-x: none;
      }

      body {
        min-width: 320px;
        touch-action: pan-y pinch-zoom;
      }

      .site-frame {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        overflow-x: clip;
      }

      .portrait-wrap {
        width: 100%;
        max-width: 100%;
        touch-action: pan-y pinch-zoom;
      }

      @media (max-width: 719px) {
        html {
          background: #17201d;
          overscroll-behavior: none;
        }

        body {
          padding: 3px;
          background: #17201d;
          overscroll-behavior-y: none;
        }

        .site-frame {
          --touch-x: 50vw;
          --touch-y: 34vh;
          min-height: calc(100svh - 6px);
          overflow: clip;
          border: 1px solid rgba(255, 255, 255, 0.52);
          border-radius: 27px;
          background:
            radial-gradient(circle 420px at var(--pointer-x) var(--pointer-y), rgba(66, 88, 106, 0.15), transparent 70%),
            linear-gradient(180deg, #f7f6f2 0%, var(--paper) 64%, #ecebe6 100%);
          box-shadow:
            0 0 0 1px rgba(23, 27, 26, 0.16),
            0 18px 60px rgba(8, 14, 12, 0.2);
        }

        .site-frame::after {
          content: "";
          position: fixed;
          inset: 3px;
          z-index: 50;
          border-radius: 27px;
          background: radial-gradient(
            circle 180px at var(--touch-x) var(--touch-y),
            rgba(159, 181, 168, 0.28),
            rgba(66, 88, 106, 0.12) 38%,
            transparent 72%
          );
          opacity: 0;
          pointer-events: none;
          transition: opacity 520ms ease-out;
        }

        .site-frame.is-touch-lit::after {
          opacity: 1;
          transition-duration: 80ms;
        }

        .section,
        .site-header,
        .site-footer {
          max-width: calc(100% - 2px);
        }

        .stack-card[data-slot="1"] {
          transform: translate3d(5%, -1.5%, 0) rotate(4deg) scale(0.96);
        }

        .stack-card[data-slot="2"] {
          transform: translate3d(-5%, 2.5%, 0) rotate(-5deg) scale(0.92);
        }

      }

      /* V21 — consistent external-link arrow across desktop and iOS */
      .signal-card .external-arrow {
        width: 18px;
        height: 18px;
        display: grid;
        flex: 0 0 18px;
        place-items: center;
        color: var(--violet);
      }

      .external-arrow svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* V22 — Reels-proportioned mobile deck and direct social paths */
      .signal-card {
        flex-direction: column;
        gap: 9px;
      }

      .signal-card p {
        width: 100%;
        text-align: center;
      }

      .social-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
      }

      .social-link {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(66, 88, 106, 0.16);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.52);
        color: var(--violet);
        transition: transform 180ms var(--ease), background 180ms ease, color 180ms ease;
      }

      .social-link:hover,
      .social-link:focus-visible {
        color: white;
        background: var(--violet);
        transform: translateY(-2px);
      }

      .social-link svg {
        width: 17px;
        height: 17px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .social-link-facebook svg {
        fill: currentColor;
        stroke: none;
      }

      .social-link-youtube svg .youtube-play {
        fill: currentColor;
        stroke: none;
      }

      @media (max-width: 719px) {
        .portrait-wrap {
          height: auto;
          min-height: 0;
          aspect-ratio: 9 / 16;
        }

        .portrait-card,
        .stack-card {
          min-height: 0;
        }

        .signal-card {
          left: 12px;
          right: 12px;
          bottom: 12px;
          gap: 7px;
          padding: 11px 14px;
          border-radius: 18px;
        }

        .social-link {
          width: 32px;
          height: 32px;
        }

        .social-link svg {
          width: 16px;
          height: 16px;
        }
      }

      /* Keep the background-preloaded GoHighLevel form hidden until it is ready. */
      .form-embed::before {
        content: "Loading form…";
        position: absolute;
        inset: 0;
        z-index: 0;
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.04em;
        transition: opacity 180ms ease;
      }

      .form-embed iframe {
        position: relative;
        z-index: 1;
        visibility: visible !important;
        opacity: 0;
        background: white;
        transition: opacity 220ms ease;
      }

      .form-embed.is-loaded::before {
        opacity: 0;
      }

      .form-embed.is-loaded iframe {
        opacity: 1;
      }