@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Roboto:wght@400;500;600;700&display=swap");

      :root {
        /* core ink / paper */
        --ink-950: #0a0e16;
        --ink-800: #212a37;
        --ink-600: #4b5768;
        --slate-500: #6c7889;
        --slate-300: #a3aebb;
        --line: #e5e8ee;
        --line-soft: #eef0f4;
        --paper: #ffffff;
        --paper-alt: #f6f7f9;

        /* dark bands (hero / carousel / footer) */
        --navy-950: #070c16;
        --navy-900: #0c1626;
        --navy-800: #132339;

        /* brand accents */
        --cyan-400: #39d0dd;
        --cyan-300: #7fe6ee;
        --gold-400: #c9a568;
        --gold-300: #ddc38f;

        /* service accents */
        --c-sra: #3b82c4;
        --c-cra: #2e93b0;
        --c-spa: #6b4e9e;
        --c-rpa: #b33f9e;
        --c-csa: #e0607a;
        --c-itdrp: #c99a2c;
        --c-ita: #5a9e3a;
        --c-ir: #96bf3e;
        --c-pp: #e08a2c;
        --c-vciso: #dd9a2e;

        --radius-sm: 6px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --shadow-sm: 0 1px 2px rgba(10, 14, 22, 0.04);
        --shadow-md: 0 12px 28px -14px rgba(10, 14, 22, 0.16);
        --shadow-lg: 0 24px 48px -18px rgba(10, 14, 22, 0.22);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Inter", sans-serif;
        background: var(--paper);
        color: var(--ink-800);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img,
      svg {
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font-family: inherit;
        background: none;
        border: none;
        cursor: pointer;
        color: inherit;
      }
      input {
        font-family: inherit;
      }
      ul {
        list-style: none;
      }

      .eyebrow {
        font-family: "sans-serif";
        font-size: 1.25rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 600;
      }
      h1,
      h2,
      h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: -0.01em;
        color: var(--ink-950);
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.25rem;
      }
      .section-pad {
        padding: 4.4rem 0;
      }
      @media (min-width: 860px) {
        .section-pad {
          padding: 6rem 0;
        }
      }

      .btn {
        font-family: "Inter", sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        padding: 0.85rem 1.5rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease,
          background 0.15s ease,
          border-color 0.15s ease;
        white-space: nowrap;
      }
      .btn-primary {
        background: var(--ink-950);
        color: #fff;
      }
      .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }
      .btn-light {
        background: #fff;
        color: var(--ink-950);
      }
      .btn-light:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }
      .btn-outline {
        border: 1.5px solid var(--line);
        color: var(--ink-950);
        background: transparent;
      }
      .btn-outline:hover {
        border-color: var(--ink-800);
      }
      .btn-ghost-dark {
        border: 1.5px solid rgba(255, 255, 255, 0.24);
        color: #fff;
      }
      .btn-ghost-dark:hover {
        border-color: rgba(255, 255, 255, 0.55);
      }
      /* dark blue by default (reads clearly against the near-black cta-band
     background), flips to solid white on hover — used for the primary
     actions in every closing CTA band ("See pricing", "Contact us",
     "Browse the catalog") */
      .btn-navy {
        background: var(--navy-800);
        color: #fff;
        border: 1.5px solid var(--navy-800);
      }
      .btn-navy:hover {
        background: #fff;
        color: var(--ink-950);
        border-color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }
      .btn-sm {
        padding: 0.6rem 1.1rem;
        font-size: 0.82rem;
      }
      .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
      }

      /* ---------- NAV ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 80;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
      }
      .nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.85rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--ink-950);
      }
      .brand-mark {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        object-fit: contain;
      }
      .brand-text {
        font-family: "Fraunces", serif;
        font-size: 0.98rem;
        font-weight: 600;
      }
      .nav-links {
        display: none;
        align-items: center;
        gap: 1.9rem;
        font-size: 0.87rem;
        color: var(--ink-600);
        font-weight: 500;
      }
      .nav-links a {
        padding: 0.3rem 0;
        position: relative;
      }
      .nav-links a.active {
        color: var(--ink-950);
      }
      .nav-links a.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: var(--ink-950);
        border-radius: 2px;
      }
      .nav-links a:hover {
        color: var(--ink-950);
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }
      .cart-btn {
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-800);
        border: 1.5px solid var(--line);
      }
      .cart-btn:hover {
        border-color: var(--ink-800);
      }
      .cart-btn svg {
        width: 17px;
        height: 17px;
      }
      .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 17px;
        height: 17px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--ink-950);
        color: #fff;
        font-size: 0.63rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "IBM Plex Mono", monospace;
      }
      .cart-count[data-empty="true"] {
        display: none;
      }
      .nav-toggle {
        display: flex;
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        align-items: center;
        justify-content: center;
        color: var(--ink-800);
      }
      .nav-mobile {
        display: none;
        flex-direction: column;
        background: #fff;
        border-top: 1px solid var(--line);
      }
      .nav-mobile.open {
        display: flex;
      }
      .nav-mobile a {
        padding: 0.95rem 1.25rem;
        font-size: 0.93rem;
        color: var(--ink-700);
        border-bottom: 1px solid var(--line-soft);
        font-weight: 500;
      }
      .nav-mobile a.active {
        color: var(--ink-950);
        font-weight: 700;
      }

      @media (min-width: 900px) {
        .nav-links {
          display: flex;
        }
        .nav-toggle {
          display: none;
        }
      }
      @media (max-width: 480px) {
        #navCta {
          display: none;
        }
      }

      /* page visibility */
      .page {
        display: none;
      }
      .page.active {
        display: block;
      }

      /* ---------- ANNOUNCE BAR ---------- */
      .announce {
        background: var(--navy-950);
        color: var(--slate-300);
        font-size: 0.8rem;
        padding: 0.55rem 1.25rem;
        text-align: center;
      }
      .announce a {
        color: var(--cyan-300);
        font-weight: 600;
        margin-left: 0.4rem;
      }
      .announce a:hover {
        text-decoration: underline;
      }

      /* ---------- HERO (dark band) ---------- */
      .hero {
        position: relative;
        background: var(--navy-950);
        color: #fff;
        overflow: hidden;
        padding: 3.6rem 0 3.2rem;
      }
      .hero canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 20% 15%,
            rgba(57, 208, 221, 0.14),
            transparent 55%
          ),
          radial-gradient(
            ellipse at 85% 85%,
            rgba(201, 165, 104, 0.1),
            transparent 50%
          );
        pointer-events: none;
      }
      .hero-stage {
        position: relative;
        z-index: 2;
      }
      .hero-inner {
        min-width: 0;
        max-width: 760px;
      }
      .hero .eyebrow {
        color: var(--gold-300);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .hero .eyebrow svg {
        width: 14px;
        height: 14px;
      }
      .hero h1 {
        font-size: clamp(2rem, 6.4vw, 3.5rem);
        color: #fff;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--cyan-300);
      }
      .hero p.lede {
        margin-top: 1.15rem;
        max-width: 520px;
        color: var(--slate-300);
        font-size: 1.04rem;
      }
      .hero-actions {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
      }

      /* ---------- HERO CONTACT PANEL (glass drawer) ---------- */
      /* The panel is a real grid column, not an overlay, so the row — and with
     it the whole .hero section — auto-grows to whatever height the form
     needs. No fixed height anywhere here, so nothing ever needs its own
     scrollbar. Two width tracks stay defined in both states purely so the
     fr values have something to interpolate between; a single-track swap
     would snap instead of animating (same trick the request-form embed
     above uses to widen itself while it's being filled in).
     A 0-width grid column doesn't reliably collapse its own height — text
     inside it can still wrap tall and inflate the row — so height is
     collapsed explicitly via max-height instead of relying on width alone. */
      .hero-stage {
        display: grid;
        grid-template-columns: minmax(0, 10fr) minmax(0, 0fr);
        align-items: center;
        gap: 0;
        transition:
          grid-template-columns 0.6s cubic-bezier(0.4, 0, 0.2, 1),
          gap 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero-inner {
        transition: opacity 0.3s ease;
      }
      .hero.contact-open .hero-inner {
        opacity: 0;
        pointer-events: none;
      }
      @media (min-width: 860px) {
        .hero.contact-open .hero-stage {
          grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
          gap: 2.5rem;
        }
        .hero.contact-open .hero-inner {
          opacity: 1;
          pointer-events: auto;
        }
      }

      .hero-contact-panel {
        min-width: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero.contact-open .hero-contact-panel {
        max-height: 1600px;
      }

      @media (max-width: 859.98px) {
        /* below 860px there's no room to share the row, so the panel takes over
       full-width beneath the intro instead of beside it. */
        .hero-stage {
          display: block;
        }
        .hero-inner {
          max-height: 640px;
          overflow: hidden;
          transition:
            opacity 0.3s ease,
            max-height 0.5s ease;
        }
        .hero.contact-open .hero-inner {
          max-height: 0;
          transition:
            opacity 0.25s ease,
            max-height 0.5s ease;
        }
      }

      .hero-contact-card {
        width: 100%;
        position: relative;
        color: var(--slate-300);
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 22px;
        box-shadow:
          0 24px 60px -12px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        padding: 1.7rem 1.5rem;
        margin: 1.1rem 0;
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 0.35s ease,
          transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero.contact-open .hero-contact-card {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
      }
      @media (min-width: 860px) {
        .hero-contact-card {
          padding: 2.2rem 2.4rem;
          margin: 0;
        }
      }
      .hero-contact-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
      }
      .hero-contact-close:hover {
        background: rgba(255, 255, 255, 0.14);
      }
      .hero-contact-close svg {
        width: 13px;
        height: 13px;
      }
      .hero-contact-card .eyebrow {
        color: var(--cyan-300);
        margin-bottom: 0.6rem;
        display: block;
        padding-right: 2.2rem;
      }
      .hero-contact-card h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 1.35rem;
        color: #fff;
        max-width: 85%;
      }
      .hero-contact-card > div > p {
        margin-top: 0.5rem;
        margin-bottom: 1.3rem;
        font-size: 0.85rem;
        line-height: 1.5;
      }

      .hcform-row-two {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }
      @media (min-width: 460px) {
        .hcform-row-two {
          grid-template-columns: 1fr 1fr;
          gap: 0 0.9rem;
        }
      }
      .hcform-field {
        margin-bottom: 1rem;
      }
      .hcform-field label {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: #dcdbee;
        margin-bottom: 0.4rem;
      }
      .hcform-field input,
      .hcform-field textarea {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 0.88rem;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 10px;
        padding: 0.7rem 0.85rem;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease,
          background 0.25s ease;
      }
      .hcform-field input::placeholder,
      .hcform-field textarea::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }
      .hcform-field input:focus,
      .hcform-field textarea:focus {
        outline: none;
        border-color: var(--cyan-300);
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 0 0 3px rgba(127, 230, 238, 0.18);
      }
      .hcform-field textarea {
        min-height: 88px;
        resize: vertical;
      }
      .hcform-field.invalid input,
      .hcform-field.invalid textarea {
        border-color: #ff9d9d;
      }
      .hcform-field-err {
        display: none;
        font-size: 0.72rem;
        color: #ffb4b4;
        margin-top: 0.35rem;
      }
      .hcform-field.invalid .hcform-field-err {
        display: block;
      }
      #heroContactFormEl > .btn {
        width: 100%;
        margin-top: 0.3rem;
      }
      .hero-contact-note {
        margin-top: 0.8rem;
        font-size: 0.74rem;
        color: var(--slate-300);
        text-align: center;
        line-height: 1.4;
      }
      .hero-contact-note a {
        color: var(--cyan-300);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .hero-contact-success {
        display: none;
        text-align: center;
        padding: 0.6rem 0;
      }
      .hero-contact-success.show {
        display: block;
      }
      .hero-contact-success .success-icon {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: rgba(127, 230, 238, 0.16);
        color: var(--cyan-300);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
      }
      .hero-contact-success .success-icon svg {
        width: 22px;
        height: 22px;
      }
      .hero-contact-success h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 1.15rem;
        color: #fff;
        max-width: 100%;
        text-align: center;
      }
      .hero-contact-success p {
        margin-top: 0.6rem;
        font-size: 0.85rem;
        line-height: 1.5;
      }
      .hero-contact-success p a {
        color: var(--cyan-300);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .hero-contact-success .btn {
        width: 100%;
        margin-top: 1.2rem;
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-stage,
        .hero-inner,
        .hero-contact-panel,
        .hero-contact-card {
          transition: none;
        }
      }

      /* ---------- STATS BAND ---------- */
      .stats {
        background: var(--navy-900);
        color: #fff;
        padding: 2.6rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem 1rem;
      }
      @media (min-width: 700px) {
        .stats-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .stat-num {
        font-family: "Fraunces", serif;
        font-size: clamp(1.7rem, 4.5vw, 2.4rem);
        color: #fff;
        font-weight: 600;
      }
      .stat-label {
        margin-top: 0.35rem;
        font-size: 0.82rem;
        color: var(--slate-300);
        max-width: 20ch;
      }

      /* ---------- TRUST / CERT BAND ---------- */
      .trust {
        background: var(--paper-alt);
        padding: 4rem 0 3.4rem;
        border-bottom: 1px solid var(--line);
        overflow: hidden;
      }
      .cert-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
      }
      .cert-chip {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--ink-800);
        background: #fff;
        border: 1px solid var(--line);
        padding: 0.8rem 1.7rem;
        border-radius: 999px;
        transition: all 0.25s ease;
        cursor: default;
      }
      .cert-chip:hover {
        background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
        border-color: var(--navy-900);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }
      .partner-marquee {
        margin-top: 2.6rem;
      }
      /* static 2-row grid instead of a scrolling marquee — 2 columns on
     mobile (4 rows), 4 columns from tablet up (exactly 2 rows for the 8
     partner tiles) */
      .partner-track {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      @media (min-width: 640px) {
        .partner-track {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .partner-tile {
        font-family: "IBM Plex Mono", monospace;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        color: var(--slate-500);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 1.15rem 1rem;
        text-align: center;
      }
      .trust .t-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .trust .t-reveal.visible {
        opacity: 1;
        transform: none;
      }

      /* ---------- VALUES GRID (home "who we are" band) ---------- */
      /* palette borrowed from the spotlight carousel: navy band, the same card
     gradient, white/slate copy, and the cyan accent */
      .values {
        background: var(--navy-950);
      }
      /* outranks the shared .section-head .eyebrow gold rule defined further down */
      .values .section-head .eyebrow {
        color: var(--cyan-300);
      }
      .values .section-head h2 {
        color: #fff;
      }
      .values .section-head p {
        color: var(--slate-300);
      }
      .values .value-card {
        background: linear-gradient(180deg, #101d30, #0b1626);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        text-align: center;
        padding: 2.2rem 1.9rem 2rem;
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .values .value-card:hover {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--cyan-400) 45%, transparent);
        box-shadow: 0 18px 48px
          color-mix(in srgb, var(--cyan-400) 22%, transparent);
      }
      .values .value-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: radial-gradient(
          120% 120% at 25% 20%,
          color-mix(in srgb, var(--cyan-400) 30%, white) 0%,
          color-mix(in srgb, var(--cyan-400) 14%, white) 55%,
          color-mix(in srgb, var(--cyan-400) 8%, white) 100%
        );
        border: 1px solid color-mix(in srgb, var(--cyan-400) 35%, transparent);
        box-shadow:
          0 18px 34px -16px color-mix(in srgb, var(--cyan-400) 65%, transparent),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
        color: var(--cyan-400);
        margin: 0 auto 1.5rem;
      }
      .values .value-icon svg {
        width: 26px;
        height: 26px;
        filter: drop-shadow(
          0 2px 6px color-mix(in srgb, var(--cyan-400) 45%, transparent)
        );
      }
      .values .value-card h3 {
        color: #fff;
        font-size: 1.3rem;
      }
      .values .value-card p {
        color: var(--slate-300);
        font-size: 0.95rem;
        line-height: 1.7;
        margin-top: 0.8rem;
      }
      .value-link {
        margin-top: 1.3rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: var(--cyan-300);
        font-weight: 600;
        font-size: 0.95rem;
      }
      .value-link span {
        display: inline-block;
        transition: transform 0.25s ease;
      }
      .value-link:hover span {
        transform: translateX(5px);
      }

      /* ---------- REQUEST SERVICES (services page) ---------- */
      /* palette borrowed from the spotlight carousel: navy band, the same card
     gradient, white/slate copy, cyan accent. The per-service accents stay on
     the card icons, badges, and hover glow. */
      .request-section {
        background: var(--navy-950);
        padding: 4.4rem 0;
      }
      .request-section .section-head .eyebrow {
        color: var(--cyan-300);
      }
      .request-section .section-head h2 {
        color: #fff;
      }
      .request-section .section-head p {
        color: var(--slate-300);
      }
      .request-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        align-items: start;
      }
      @media (min-width: 900px) {
        .request-grid {
          grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
          gap: 3.5rem;
        }
      }
      .request-intro h2 {
        color: #fff;
        font-size: clamp(1.6rem, 2.8vw, 2.2rem);
        margin-bottom: 1rem;
      }
      .request-intro p {
        color: var(--slate-300);
        margin-bottom: 1.6rem;
      }
      .request-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 0.8rem;
        color: var(--slate-300);
      }
      .request-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.35em;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid rgba(127, 230, 238, 0.45);
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%2339D0DD" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M4 8.5l2.8 2.8L12 5.5"/></svg>')
          center / 11px no-repeat;
      }
      .request-form {
        background: linear-gradient(180deg, #101d30, #0b1626);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 2.4rem 2.1rem;
      }
      .request-form .form-row {
        margin-bottom: 1.3rem;
      }
      .request-form .form-row.two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
      }
      @media (max-width: 560px) {
        .request-form .form-row.two {
          grid-template-columns: 1fr;
        }
      }
      .request-form label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #c5c3e0;
        margin-bottom: 0.45rem;
      }
      .request-form input,
      .request-form select,
      .request-form textarea {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 0.92rem;
        color: #fff;
        background: rgba(10, 7, 36, 0.6);
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 12px;
        padding: 0.8rem 1rem;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .request-form textarea {
        min-height: 120px;
        resize: vertical;
      }
      .request-form input::placeholder,
      .request-form textarea::placeholder {
        color: #6d6b94;
      }
      .request-form input:focus,
      .request-form select:focus,
      .request-form textarea:focus {
        outline: none;
        border-color: #ae78ff;
        box-shadow: 0 0 0 3px rgba(174, 120, 255, 0.18);
      }
      .request-form select {
        appearance: none;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path fill="none" stroke="%23AE78FF" stroke-width="2" stroke-linecap="round" d="M1 1.5l5 5 5-5"/></svg>');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 12px;
      }
      .request-btn {
        width: 100%;
        margin-top: 0.4rem;
        background: linear-gradient(135deg, #4231e8, #7f30ef);
        color: #fff;
      }
      .request-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 32px rgba(127, 48, 239, 0.35);
      }
      .form-note {
        margin-top: 1rem;
        font-size: 0.82rem;
        color: var(--slate-500);
        text-align: center;
      }
      /* flush embed: HoneyBook injects the iframe with an inline 5% margin, so the
     overrides below need !important to keep it edge-to-edge inside the card */
      .request-form-embed {
        padding: 0;
        overflow: hidden;
      }
      .request-form-embed [class^="hb-p-"] {
        display: block;
        min-height: 640px;
        background: transparent;
      }
      .request-form-embed iframe {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: block;
      }
      .request-form-embed .form-note {
        margin: 0;
        padding: 1rem 1.2rem 1.1rem;
      }
      .request-form-embed .form-note a {
        color: var(--cyan-300);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      /* While the visitor is filling in the form it takes the full content width
     and the intro copy steps aside. Both states keep TWO tracks so the fr
     values interpolate — dropping to a single track would snap instead of
     animating. The iframe is never re-parented, so typed answers survive. */
      .request-intro {
        min-width: 0;
        overflow: hidden;
      }
      @media (min-width: 900px) {
        .request-grid {
          transition:
            grid-template-columns 0.7s cubic-bezier(0.4, 0, 0.2, 1),
            gap 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* fades back in only once the column has re-opened */
        .request-intro {
          transition: opacity 0.4s ease 0.32s;
        }
        .request-grid.form-expanded {
          grid-template-columns: minmax(0, 0fr) minmax(0, 10fr);
          gap: 0;
        }
        .request-grid.form-expanded .request-intro {
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.22s ease;
        }
      }
      @media (min-width: 1100px) {
        .values .values-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .section-head {
        max-width: 640px;
        margin-bottom: 2.6rem;
      }
      .section-head .eyebrow {
        color: var(--gold-400);
        margin-bottom: 0.7rem;
        display: block;
      }
      .section-head h2 {
        font-size: clamp(1.7rem, 5vw, 2.5rem);
      }
      .section-head p {
        margin-top: 0.9rem;
        color: var(--slate-500);
        font-size: 1.02rem;
      }

      .values-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.2rem;
      }
      @media (min-width: 700px) {
        .values-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .value-card {
        padding: 1.6rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--paper);
      }
      .value-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: var(--paper-alt);
        color: var(--ink-950);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
      }
      .value-icon svg {
        width: 21px;
        height: 21px;
      }
      .value-card h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--ink-950);
      }
      .value-card p {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: var(--slate-500);
        line-height: 1.55;
      }

      /* ---------- SERVICES TEASER ---------- */
      .teaser {
        background: var(--paper-alt);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .teaser-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      @media (min-width: 700px) {
        .teaser-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .teaser-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 1.5rem;
      }
      .teaser-card .tile {
        width: 46px;
        height: 46px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
      }
      .teaser-card .tile svg {
        width: 22px;
        height: 22px;
      }
      .teaser-card h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: var(--ink-950);
      }
      .teaser-card p {
        margin-top: 0.5rem;
        font-size: 0.86rem;
        color: var(--slate-500);
      }
      .teaser-more {
        margin-top: 2rem;
        text-align: center;
      }

      /* ---------- CTA BAND ---------- */
      .cta-band {
        background: var(--navy-950);
        color: #fff;
        padding: 4rem 0;
        text-align: center;
      }
      .cta-band h2 {
        color: #fff;
        font-size: clamp(1.7rem, 5vw, 2.6rem);
        max-width: 640px;
        margin: 0 auto;
      }
      .cta-band p {
        color: var(--slate-300);
        margin-top: 1rem;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }
      .cta-actions {
        margin-top: 1.8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        justify-content: center;
      }

      /* ---------- FOOTER (mega) ---------- */
      footer {
        background: var(--navy-950);
        color: var(--slate-300);
        padding: 3.4rem 0 1.8rem;
      }
      .footer-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.2rem;
        padding-bottom: 2.4rem;
      }
      .footer-cols {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem 1rem;
      }
      @media (min-width: 540px) {
        .footer-cols {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 820px) {
        .footer-cols {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .footer-col h4 {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--slate-300);
        margin-bottom: 0.9rem;
      }
      .footer-col ul {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .footer-col a {
        font-size: 0.85rem;
        color: var(--slate-300);
      }
      .footer-col a:hover {
        color: #fff;
      }
      .footer-bottom {
        padding-top: 1.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        font-size: 0.78rem;
        color: var(--slate-500);
      }
      @media (min-width: 700px) {
        .footer-bottom {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
      }
      .footer-bottom .legal-links {
        display: flex;
        gap: 1.2rem;
      }
      .footer-bottom .legal-links a:hover {
        color: var(--slate-300);
      }

      /* ---------- SERVICES PAGE: hero ---------- */
      .page-hero {
        background: var(--paper-alt);
        padding: 3rem 0 2.6rem;
        border-bottom: 1px solid var(--line);
      }
      .page-hero .eyebrow {
        color: var(--gold-400);
        margin-bottom: 0.8rem;
        display: block;
      }
      .page-hero h1 {
        font-size: clamp(2rem, 6vw, 3rem);
        max-width: 680px;
      }
      .page-hero p {
        margin-top: 1rem;
        max-width: 560px;
        color: var(--slate-500);
        font-size: 1.02rem;
      }

      /* ---------- CAROUSEL (dark band, reused pattern) ---------- */
      .carousel-section {
        background: var(--navy-950);
        padding: 4rem 0 3.6rem;
        overflow: hidden;
      }
      .carousel-section .section-head h2 {
        color: #fff;
      }
      .carousel-section .section-head p {
        color: var(--slate-300);
      }
      .carousel-section .eyebrow {
        color: var(--cyan-300);
      }

      /* ---------- static spotlight grid: 2 cols on mobile, 5 cols x 2 rows
     from 860px up. Replaces the old scroll-snap carousel track entirely —
     every card is visible at once, nothing auto-advances. ---------- */
      .spotlight-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
      }
      @media (min-width: 640px) {
        .spotlight-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (min-width: 860px) {
        .spotlight-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: 1rem;
        }
      }
      .ccard {
        --accent: var(--c-sra);
        width: 100%;
        background: linear-gradient(180deg, #101d30, #0b1626);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 1.25rem 1.1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        cursor: pointer;
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .ccard:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        box-shadow: 0 16px 40px
          color-mix(in srgb, var(--accent) 32%, transparent);
      }
      .ccard:focus-visible {
        outline: 2px solid var(--cyan-300);
        outline-offset: 3px;
      }
      .ccard-tile {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: radial-gradient(
          120% 120% at 25% 20%,
          color-mix(in srgb, var(--accent) 30%, white) 0%,
          color-mix(in srgb, var(--accent) 14%, white) 55%,
          color-mix(in srgb, var(--accent) 8%, white) 100%
        );
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        box-shadow:
          0 12px 24px -12px color-mix(in srgb, var(--accent) 65%, transparent),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      .ccard-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          115deg,
          rgba(255, 255, 255, 0.35) 0%,
          transparent 40%
        );
      }
      .ccard-tile svg {
        width: 24px;
        height: 24px;
        color: var(--accent);
        filter: drop-shadow(
          0 1px 3px color-mix(in srgb, var(--accent) 45%, transparent)
        );
        position: relative;
        z-index: 1;
      }
      .ccard h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.32;
        color: #fff;
        margin-top: 0.65rem;
        margin-bottom: 0;
        letter-spacing: -0.01em;
      }

      /* ---------- ENGAGEMENT PICKER (tab bar, replaces the old spotlight
     carousel) — every option sits in one row, sized to match, always fully
     visible with nothing to auto-advance. Inspired by ActiveCampaign's/
     Jira's pricing-page category tabs. Below 820px the six equal-width
     tabs no longer fit on one line at a readable size, so the row becomes
     a horizontally scrollable strip instead of wrapping — same breakpoint
     and peek/arrow pattern as the tier-card carousel below it. ---------- */
      .pkg-selector {
        margin-top: 1.8rem;
      }
      .pkg-tabs-region {
        position: relative;
        z-index: 1;
      }
      .pkg-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.6rem;
      }
      .pkg-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.9rem 0.8rem;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        background: #fff;
        text-align: center;
        transition:
          border-color 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease,
          transform 0.15s ease,
          padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          border-radius 0.3s ease;
      }
      .pkg-tab-name {
        display: block;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.25;
        color: var(--ink-950);
        transition: color 0.2s ease;
      }
      .pkg-tab:hover {
        border-color: var(--slate-300);
        transform: translateY(-1px);
      }
      .pkg-tab.active {
        /* filled with the same navy as the card band below, so the
       selected tab reads as part of that surface, not a separate control.
       Bottom corners square off so there's nothing for the fill to round
       away from at the edge (a rounded corner here would carve a white
       notch out of the connection below). Extends straight down into the
       band via padding-bottom rather than a separate overlapping shape —
       there's only one box now, so its width, its corners and the band's
       fill are all trivially identical; nothing needs to line up with
       anything else. The matching negative margin-bottom cancels that
       extra padding out of the flex row's own height, so the other (non-
       active) tabs don't grow or shift to match. */
        background: var(--navy-950);
        border-color: var(--navy-950);
        border-radius: 12px 12px 0 0;
        box-shadow: var(--shadow-md);
        transform: none;
        padding-bottom: 1.9rem;
        margin-bottom: -1rem;
      }
      .pkg-tab.active .pkg-tab-name {
        color: #fff;
      }
      @media (max-width: 819.98px) {
        /* leading/trailing spacers + centre-snap. No arrows here — the
       visitor taps a peeking tab or swipes — so the tab is sized to read
       comfortably rather than to line up with an arrow-step distance:
       card = span * 0.6, peek = card / 3 = span / 5, so whichever tab is
       centred shows about a third of its neighbour on each side, including
       the first/last tab (the spacers give them room to centre too,
       instead of sitting flush against the scroll edge). */
        .pkg-tabs {
          --tab-gap: 0.6rem;
          --tab-span: calc(100% - (2 * var(--tab-gap)));
          gap: var(--tab-gap);
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          /* overflow-x:auto forces overflow-y to clip too, which would cut
         off the active tab's extension into the band below — the extra
         bottom padding (offset by the matching negative margin, so the
         strip's own layout height doesn't change) gives it room. */
          padding: 0.3rem 0 1.6rem;
          margin: -0.3rem 0 -1.6rem;
        }
        .pkg-tabs::-webkit-scrollbar {
          display: none;
        }
        .pkg-tabs::before,
        .pkg-tabs::after {
          content: "";
          flex: 0 0 calc(var(--tab-span) / 5);
        }
        .pkg-tab {
          flex: 0 0 auto;
          width: calc(var(--tab-span) * 0.6);
          scroll-snap-align: center;
          scroll-snap-stop: always;
        }
      }

      /* ---------- SERVICE CARD GRID (condensed rows, same form factor as .recap) ---------- */
      .grid-section {
        background: var(--paper);
        padding: 4rem 0;
      }
      .service-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        margin-bottom: 3.5rem;
      }
      @media (min-width: 800px) {
        .service-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      /* each row keeps the request-section card shell — dark gradient, per-service
     accent, and the hover lift + glow — just laid out as a condensed line
     instead of an icon block, matching the .recap row pattern above */
      .scard {
        --accent: var(--c-sra);
        width: 100%;
        text-align: left;
        background: linear-gradient(180deg, #101d30, #0b1626);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .scard:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        box-shadow: 0 16px 40px
          color-mix(in srgb, var(--accent) 32%, transparent);
      }
      /* icon + code stack in one chip, sized so the chip stays shorter than the
     text block beside it — the row's height is set by that text, not this */
      .scard-code {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.22rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        color: color-mix(in srgb, var(--accent) 78%, white);
        background: color-mix(in srgb, var(--accent) 22%, #0b1626);
        border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
        padding: 0.4rem 0.3rem;
        border-radius: 8px;
        flex: 0 0 54px;
        text-align: center;
      }
      .scard-code svg {
        width: 15px;
        height: 15px;
        color: color-mix(in srgb, var(--accent) 85%, white);
      }
      .scard-text {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--slate-300);
      }
      .scard-text strong {
        color: #fff;
        font-weight: 700;
      }
      .scard-arrow {
        margin-left: auto;
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        color: color-mix(in srgb, var(--accent) 75%, white);
        transition: transform 0.25s ease;
      }
      .scard:hover .scard-arrow {
        transform: translateX(4px);
      }
      /* momentary flash so a card jumped to from the homepage spotlight is
     easy to spot among the full catalog list */
      .scard.jump-highlight {
        animation: scardFlash 1.6s ease;
      }
      @keyframes scardFlash {
        0%,
        100% {
          border-color: rgba(255, 255, 255, 0.08);
          box-shadow: none;
        }
        15% {
          border-color: color-mix(in srgb, var(--accent) 75%, transparent);
          box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--accent) 35%, transparent);
        }
      }

      /* ---------- FOCUS AREAS (CISO mindmap) ---------- */
      .focus {
        background: var(--paper-alt);
        padding: 4rem 0 4.4rem;
        border-top: 1px solid var(--line);
      }
      .focus-toggle-all {
        align-self: flex-start;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        color: var(--ink-800);
        background: #fff;
        border: 1px solid var(--line);
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        cursor: pointer;
        margin-top: 0.6rem;
      }
      .focus-toggle-all:hover {
        border-color: var(--slate-500);
      }
      .mcard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      @media (min-width: 700px) {
        .mcard-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (min-width: 1060px) {
        .mcard-grid {
          grid-template-columns: 1fr 1fr 1fr;
        }
      }
      .mcard {
        --accent: var(--c-sra);
        background: #fff;
        border: 1px solid var(--line);
        border-left: 3px solid var(--accent);
        border-radius: var(--radius-sm);
        padding: 1.15rem 1.15rem 1.05rem;
      }
      .mcard-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        cursor: pointer;
      }
      .mcard-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 14%, white);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .mcard-icon svg {
        width: 20px;
        height: 20px;
      }
      .mcard-code {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, white);
        padding: 0.24rem 0.5rem;
        border-radius: 3px;
        align-self: flex-start;
        white-space: nowrap;
      }
      .mcard h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: var(--ink-950);
        margin-top: 0.85rem;
        letter-spacing: -0.01em;
        cursor: pointer;
      }
      .mcard-toggle {
        margin-top: 0.6rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        color: var(--slate-500);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
        width: fit-content;
      }
      .mcard-toggle svg {
        width: 11px;
        height: 11px;
        transition: transform 0.25s ease;
      }
      .mcard.open .mcard-toggle svg {
        transform: rotate(180deg);
      }
      .mcard-desc {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
      }
      .mcard.open .mcard-desc {
        grid-template-rows: 1fr;
      }
      .mcard-desc-inner {
        overflow: hidden;
      }
      .mgroup {
        padding-top: 0.9rem;
      }
      .mgroup-heading {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--accent);
        margin-bottom: 0.5rem;
      }
      .mchecklist {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .mchecklist li {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        font-size: 0.85rem;
        line-height: 1.45;
        color: var(--slate-500);
      }
      .mchecklist li svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-top: 0.18rem;
        color: var(--accent);
      }

      /* ---------- CLIENTS CAROUSEL (home) ---------- */
      .clients {
        background: var(--paper);
        border-bottom: 1px solid var(--line);
      }
      .clients-marquee {
        overflow-x: auto;
        scrollbar-width: none;
        cursor: grab;
        mask-image: linear-gradient(
          to right,
          transparent 0,
          black 56px,
          black calc(100% - 56px),
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0,
          black 56px,
          black calc(100% - 56px),
          transparent 100%
        );
      }
      .clients-marquee::-webkit-scrollbar {
        display: none;
      }
      .clients-marquee.dragging {
        cursor: grabbing;
      }
      .clients-marquee + .clients-marquee {
        margin-top: 1rem;
      }
      .clients-track {
        display: flex;
        align-items: center;
        width: max-content;
      }
      .client-chip {
        flex: 0 0 auto;
        margin-right: 1rem;
        height: 78px;
        min-width: 160px;
        padding: 1rem 1.7rem;
        background: #fff;
        border: none;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .client-chip img {
        max-height: 42px;
        max-width: 150px;
        width: auto;
        height: auto;
        object-fit: contain;
      }

      /* ---------- RESOURCES PAGE ---------- */
      .resource-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      @media (min-width: 680px) {
        .resource-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (min-width: 1020px) {
        .resource-grid {
          grid-template-columns: 1fr 1fr 1fr;
        }
      }
      .rcard {
        --accent: var(--c-sra);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 1.15rem 1.15rem 1.05rem;
        display: flex;
        flex-direction: column;
        transition:
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }
      .rcard:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }
      .rcard-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .rcard-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 14%, white);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .rcard-icon svg {
        width: 20px;
        height: 20px;
      }
      .rcard-tag {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, white);
        padding: 0.24rem 0.5rem;
        border-radius: 3px;
        align-self: flex-start;
        white-space: nowrap;
      }
      .rcard h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 0.98rem;
        color: var(--ink-950);
        margin-top: 0.85rem;
        letter-spacing: -0.01em;
      }
      .rcard p {
        margin-top: 0.5rem;
        font-size: 0.86rem;
        color: var(--slate-500);
        line-height: 1.55;
        flex: 1;
      }
      .rcard-link {
        margin-top: 0.9rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        color: var(--ink-800);
        display: flex;
        align-items: center;
        gap: 0.35rem;
      }
      .rcard:hover .rcard-link {
        color: var(--accent);
      }
      .rcard-link svg {
        width: 12px;
        height: 12px;
      }
      /* no accent line down the left edge — a plain neutral border all round */
      .rcard-plain {
        border-left: 1px solid var(--line);
      }

      /* ---------- CONTACT PAGE ---------- */
      /* hero splits into two columns once there's room; info column stacks
     underneath the intro on narrow screens. Centered so the intro text
     balances against the (taller) card column beside it. */
      .contact-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      @media (min-width: 860px) {
        .contact-hero-grid {
          grid-template-columns: 1.1fr 1fr;
          gap: 3rem;
          align-items: center;
        }
      }

      /* condensed contact cards — same light card shell, left accent border, and
     hover lift as the resources page rows (.rcard), one per contact method */
      .contact-hero-info {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }
      .chero-item {
        --accent: var(--c-sra);
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        background: #fff;
        border: 1px solid var(--line);
        border-left: 3px solid var(--accent);
        border-radius: var(--radius-sm);
        padding: 1rem 1.2rem;
        transition:
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }
      .chero-item:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }
      .chero-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.22rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.56rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, white);
        padding: 0.4rem 0.3rem;
        border-radius: 8px;
        flex: 0 0 50px;
        text-align: center;
      }
      .chero-icon svg {
        width: 16px;
        height: 16px;
        color: var(--accent);
      }
      .chero-text h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--ink-950);
      }
      .chero-text p {
        margin-top: 0.2rem;
        font-size: 0.85rem;
        color: var(--slate-500);
        line-height: 1.45;
      }
      .chero-text .contact-card-note {
        margin-top: 0.5rem;
      }
      .contact-card-label {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--slate-500);
        margin-bottom: 0.3rem;
      }
      .contact-card-note {
        margin-top: 0.7rem;
        font-size: 0.78rem;
        color: var(--slate-500);
        background: var(--paper-alt);
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        padding: 0.5rem 0.7rem;
        width: fit-content;
      }
      .contact-link {
        font-weight: 600;
        color: var(--ink-950);
      }
      .contact-link:hover {
        text-decoration: underline;
      }

      /* ---------- CONTACT PAGE FORM (light card — always visible, no drawer) ---------- */
      /* same fields/layout/behavior as the homepage hero drawer form, restyled
     for the contact page's light page-hero background instead of copying
     the dark glass-panel look verbatim (which needs a dark backdrop to be
     legible) */
      .contact-form-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 1.8rem 1.6rem;
        box-shadow: var(--shadow-md);
      }
      @media (min-width: 860px) {
        .contact-form-card {
          padding: 2.2rem 2rem;
        }
      }
      /* ---------- CATALOG PAGE: reveal panel with the contact form ---------- */
      /* hidden until a service card above is clicked; reuses the homepage's
     translucent glass card (.hero-contact-card) since this panel sits on
     the same dark background as the rest of the catalog page. */
      .catalog-contact-panel {
        display: none;
        margin-top: 3rem;
        /* padding, not margin — a bottom margin here would collapse through
       this section's zero bottom padding and leave a sliver of the page's
       own white background between this dark section and the next. */
        padding-bottom: 1rem;
        /* offset for the sticky header when scrollIntoView lands here */
        scroll-margin-top: 90px;
      }
      .catalog-contact-panel.show {
        display: block;
        animation: catalogPanelIn 0.4s ease;
      }
      @keyframes catalogPanelIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .catalog-contact-panel .hero-contact-card {
        position: relative;
        max-width: 640px;
        margin: 0 auto;
        /* this card is normally revealed by an ancestor's .contact-open
       class (see the homepage hero) — here visibility is already handled
       by .catalog-contact-panel itself, so force it in view */
        opacity: 1;
        transform: none;
      }
      #catalogFormEl > .btn {
        width: 100%;
        margin-top: 0.3rem;
      }
      .contact-form-card .eyebrow {
        color: var(--gold-400);
        margin-bottom: 0.6rem;
        display: block;
      }
      .contact-form-card h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 1.35rem;
        color: var(--ink-950);
      }
      .contact-form-card > div > p {
        margin-top: 0.5rem;
        margin-bottom: 1.3rem;
        font-size: 0.9rem;
        color: var(--slate-500);
        line-height: 1.5;
      }
      .cform-row-two {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }
      @media (min-width: 460px) {
        .cform-row-two {
          grid-template-columns: 1fr 1fr;
          gap: 0 0.9rem;
        }
      }
      .cform-field {
        margin-bottom: 1rem;
      }
      .cform-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink-700);
        margin-bottom: 0.4rem;
      }
      .cform-field input,
      .cform-field textarea {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 0.92rem;
        color: var(--ink-950);
        background: #fff;
        border: 1.5px solid var(--line);
        border-radius: 10px;
        padding: 0.7rem 0.85rem;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .cform-field input::placeholder,
      .cform-field textarea::placeholder {
        color: var(--slate-300);
      }
      .cform-field input:focus,
      .cform-field textarea:focus {
        outline: none;
        border-color: var(--ink-950);
        box-shadow: 0 0 0 3px rgba(10, 14, 22, 0.08);
      }
      .cform-field textarea {
        min-height: 100px;
        resize: vertical;
      }
      .cform-field.invalid input,
      .cform-field.invalid textarea {
        border-color: #c0392b;
      }
      .cform-field-err {
        display: none;
        font-size: 0.75rem;
        color: #c0392b;
        margin-top: 0.35rem;
      }
      .cform-field.invalid .cform-field-err {
        display: block;
      }
      #contactFormEl > .btn {
        width: 100%;
        margin-top: 0.3rem;
      }
      .contact-form-note {
        margin-top: 0.8rem;
        font-size: 0.78rem;
        color: var(--slate-500);
        text-align: center;
        line-height: 1.4;
      }
      .contact-form-note a {
        color: var(--ink-950);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .contact-form-success {
        display: none;
        text-align: center;
        padding: 0.6rem 0;
      }
      .contact-form-success.show {
        display: block;
      }
      .contact-form-success .success-icon {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: #eafaf1;
        color: #1a8f5f;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
      }
      .contact-form-success .success-icon svg {
        width: 22px;
        height: 22px;
      }
      .contact-form-success h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 1.15rem;
        color: var(--ink-950);
        text-align: center;
      }
      .contact-form-success p {
        margin-top: 0.6rem;
        font-size: 0.88rem;
        line-height: 1.5;
        color: var(--slate-500);
      }
      .contact-form-success p a {
        color: var(--ink-950);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .contact-form-success .btn {
        width: 100%;
        margin-top: 1.2rem;
      }
      .contact-media {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 1.2rem;
      }
      @media (min-width: 700px) {
        .contact-media {
          grid-template-columns: 1fr 1fr;
        }
      }
      .contact-media-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 1rem;
      }
      .contact-media-card iframe,
      .contact-media-card img {
        width: 100%;
        height: 320px;
        border: 0;
        border-radius: var(--radius-sm);
        display: block;
        object-fit: cover;
      }
      .contact-media-caption {
        margin-top: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--slate-500);
      }
      .contact-media-caption svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--gold-400);
      }
      .contact-media-link {
        color: #2f8ca3;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .contact-media-link:hover {
        color: #256f82;
      }
      .contact-media-card a img {
        transition: opacity 0.2s ease;
      }
      .contact-media-card a:hover img {
        opacity: 0.88;
      }

      /* ampersands render in the sans font everywhere (no serif swash) */
      .amp {
        font-family: "Inter", sans-serif;
      }

      /* the spotlight carousel shows one package group at a time, so the groups
     need no separators between them — only one is ever on screen */
      .pkg-group[hidden] {
        display: none;
      }
      .pkg-head {
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        margin-bottom: 1.3rem;
      }
      .pkg-head .eyebrow {
        font-family: "Roboto", sans-serif;
        color: var(--gold-400);
        display: block;
      }
      .pkg-head p {
        margin-top: 0.45rem;
        color: var(--slate-500);
        font-size: 0.98rem;
        max-width: 560px;
      }

      /* dark band wrapping the tier cards — the same fixed navy used
     sitewide (hero, hero canvas, etc.) rather than a per-service tint, and
     pulled in tight under the tabs so there's only a minimal gap between
     the white tab area and this band. */
      .pkg-cards-band {
        margin-top: 0.6rem;
        padding: 1.4rem 0 2.8rem;
        background: var(--navy-950);
      }
      .pkg-cards-band .pkg-head .eyebrow {
        color: var(--cyan-300);
      }
      .pkg-cards-band .pkg-head p {
        color: var(--slate-300);
      }

      .tier-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.1rem;
      }
      @media (min-width: 820px) {
        .tier-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .tier {
        background: linear-gradient(180deg, #101d30, #0b1626);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg);
        padding: 1.8rem 1.6rem;
        display: flex;
        flex-direction: column;
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
      }
      .tier:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
      }
      .tier-name {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--slate-300);
      }
      .tier h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        color: #fff;
        margin-top: 0.5rem;
      }
      .tier-price {
        display: flex;
        align-items: baseline;
        gap: 0.35rem;
        margin-top: 1rem;
      }
      .tier-price .amt {
        font-family: "Fraunces", serif;
        font-size: 1.6rem;
        font-weight: 500;
        color: #fff;
      }
      .tier-price .per {
        font-size: 0.85rem;
        color: var(--slate-300);
      }
      .tier-price-prefix {
        font-size: 0.85rem;
        color: var(--slate-300);
      }
      .tier-desc {
        margin-top: 0.8rem;
        font-size: 0.87rem;
        color: var(--slate-300);
        line-height: 1.5;
      }
      .tier-features {
        margin-top: 1.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        flex: 1;
      }
      .tier-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--slate-300);
      }
      .tier-features svg {
        width: 15px;
        height: 15px;
        color: var(--cyan-300);
        flex-shrink: 0;
        margin-top: 0.15rem;
      }
      .tier .btn {
        margin-top: 1.5rem;
        width: 100%;
      }

      /* packages carousel — takes over only once the grid drops to a single column
     (same scroll-snap pattern as the home spotlight, minus autoplay/looping) */
      .pkg-carousel-region {
        position: relative;
      }
      .pkg-carousel-controls {
        display: none;
      }
      .pkg-arrow {
        display: none;
      }

      @media (max-width: 819.98px) {
        /* Card width is derived so the neighbouring tier peeks by exactly 1/5 on
       each side: track = card + 2 gaps + 2 peeks, and peek = card / 5. The
       leading/trailing spacers are that same 1/5, which also lets the first
       and last card snap to centre. */
        .pkg-carousel-region .tier-grid {
          --pkg-gap: 1rem;
          --pkg-span: calc(100% - (2 * var(--pkg-gap)));
          display: flex;
          align-items: stretch;
          gap: var(--pkg-gap);
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          /* extra top/bottom padding (offset by an equal negative margin) gives
         the .tier:hover glow room inside the scroll-clipped box instead of
         being cut off flat */
          padding: 2.6rem 0 3.2rem;
          margin: -1.5rem 0 -2.5rem;
          mask-image: linear-gradient(
            to right,
            transparent 0,
            black 10px,
            black calc(100% - 10px),
            transparent 100%
          );
          -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            black 10px,
            black calc(100% - 10px),
            transparent 100%
          );
        }
        .pkg-carousel-region .tier-grid::-webkit-scrollbar {
          display: none;
        }
        .pkg-carousel-region .tier-grid::before,
        .pkg-carousel-region .tier-grid::after {
          content: "";
          flex: 0 0 calc(var(--pkg-span) / 7); /* = card / 5 */
        }
        .pkg-carousel-region .tier {
          flex: 0 0 auto;
          width: calc(var(--pkg-span) / 1.4);
          scroll-snap-align: center;
          scroll-snap-stop: always;
          cursor: pointer;
        }
        .pkg-carousel-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 1.2rem;
        }
        .pkg-dots {
          display: flex;
          align-items: center;
          gap: 0.4rem;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 999px;
          padding: 0.5rem 0.6rem;
        }
        .pkg-dot {
          width: 8px;
          height: 8px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.28);
          cursor: pointer;
          padding: 0;
          border: none;
          transition:
            width 0.25s ease,
            background 0.25s ease;
          flex-shrink: 0;
        }
        .pkg-dot.active {
          width: 34px;
          background: #fff;
        }
        .pkg-arrow {
          display: flex;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          border-radius: 999px;
          background: #fff;
          border: 1px solid var(--line);
          color: var(--ink-950);
          align-items: center;
          justify-content: center;
          z-index: 3;
          box-shadow: var(--shadow-md);
        }
        .pkg-arrow.prev {
          left: 0.1rem;
        }
        .pkg-arrow.next {
          right: 0.1rem;
        }
        .pkg-arrow svg {
          width: 17px;
          height: 17px;
        }
        .pkg-arrow:disabled {
          opacity: 0.28;
          cursor: not-allowed;
          box-shadow: none;
        }
      }

      /* ---------- CART DRAWER ---------- */
      .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 12, 20, 0.45);
        z-index: 120;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .cart-overlay.open {
        opacity: 1;
        pointer-events: auto;
      }
      .cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 100%);
        background: #fff;
        z-index: 121;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -20px 0 50px -20px rgba(8, 12, 20, 0.35);
      }
      .cart-drawer.open {
        transform: translateX(0);
      }
      .cart-head {
        padding: 1.3rem 1.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
      }
      .cart-head h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--ink-950);
      }
      .cart-close {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
      }
      .cart-close svg {
        width: 14px;
        height: 14px;
      }
      .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 1rem 1.4rem;
      }
      .cart-empty {
        padding: 3rem 1rem;
        text-align: center;
        color: var(--slate-500);
        font-size: 0.9rem;
      }
      .cart-item {
        display: flex;
        gap: 0.8rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line-soft);
      }
      .cart-item-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent, var(--ink-950));
        margin-top: 0.4rem;
        flex-shrink: 0;
      }
      .cart-item-info {
        flex: 1;
      }
      .cart-item-info h5 {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--ink-950);
      }
      .cart-item-info .meta {
        font-size: 0.74rem;
        color: var(--slate-500);
        margin-top: 0.15rem;
      }
      .cart-item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.6rem;
      }
      .qty-stepper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.15rem 0.3rem;
      }
      .qty-stepper button {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-800);
      }
      .qty-stepper span {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.78rem;
        min-width: 14px;
        text-align: center;
      }
      .cart-item-price {
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink-950);
      }
      .cart-item-remove {
        font-size: 0.72rem;
        color: var(--slate-500);
        margin-top: 0.4rem;
        text-decoration: underline;
        width: fit-content;
      }
      .cart-foot {
        border-top: 1px solid var(--line);
        padding: 1.2rem 1.4rem 1.4rem;
      }
      .cart-subtotal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.92rem;
        margin-bottom: 0.3rem;
      }
      .cart-subtotal strong {
        font-family: "IBM Plex Mono", monospace;
        font-size: 1.05rem;
      }
      .cart-note {
        font-size: 0.74rem;
        color: var(--slate-500);
        margin-bottom: 1rem;
      }
      .cart-foot .btn {
        width: 100%;
      }

      /* ---------- CHECKOUT MODAL ---------- */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 12, 20, 0.55);
        z-index: 130;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        padding: 1rem;
      }
      .modal-overlay.open {
        opacity: 1;
        pointer-events: auto;
      }
      .modal {
        background: #fff;
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 480px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.6rem;
        transform: translateY(12px) scale(0.98);
        transition: transform 0.25s ease;
      }
      .modal-overlay.open .modal {
        transform: translateY(0) scale(1);
      }
      .modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.1rem;
      }
      .modal-head h3 {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--ink-950);
      }
      .modal-close {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
      }
      .modal-close svg {
        width: 13px;
        height: 13px;
      }

      .demo-banner {
        display: flex;
        gap: 0.6rem;
        align-items: flex-start;
        background: #fdf6e8;
        border: 1px solid #ecd9a8;
        border-radius: 10px;
        padding: 0.7rem 0.85rem;
        font-size: 0.76rem;
        color: #7a5a12;
        margin-bottom: 1.2rem;
      }
      .demo-banner svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 0.1rem;
      }

      .field {
        margin-bottom: 0.9rem;
      }
      .field label {
        display: block;
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--ink-700);
        margin-bottom: 0.35rem;
      }
      .field input {
        width: 100%;
        padding: 0.68rem 0.8rem;
        border: 1.5px solid var(--line);
        border-radius: 8px;
        font-size: 0.88rem;
        color: var(--ink-950);
      }
      .field input:focus {
        outline: none;
        border-color: var(--ink-950);
      }
      .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
      }
      .field-err {
        font-size: 0.72rem;
        color: #c0392b;
        margin-top: 0.3rem;
        display: none;
      }
      .field.invalid input {
        border-color: #c0392b;
      }
      .field.invalid .field-err {
        display: block;
      }

      .pay-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.1rem;
        background: var(--paper-alt);
        padding: 0.3rem;
        border-radius: 10px;
      }
      .pay-tab {
        flex: 1;
        text-align: center;
        padding: 0.55rem 0.4rem;
        border-radius: 7px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--slate-500);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
      }
      .pay-tab svg {
        width: 15px;
        height: 15px;
      }
      .pay-tab.active {
        background: #fff;
        color: var(--ink-950);
        box-shadow: var(--shadow-sm);
      }
      .pay-panel {
        display: none;
      }
      .pay-panel.active {
        display: block;
      }

      .paypal-btn {
        width: 100%;
        background: #ffc439;
        color: #003087;
        font-weight: 800;
        font-size: 0.95rem;
        padding: 0.85rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
      }
      .paypal-btn:hover {
        filter: brightness(0.97);
      }
      .paypal-status {
        margin-top: 0.8rem;
        font-size: 0.8rem;
        color: var(--slate-500);
        text-align: center;
      }

      .applepay-btn {
        width: 100%;
        background: #000;
        color: #fff;
        font-weight: 600;
        font-size: 0.95rem;
        padding: 0.85rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
      }
      .applepay-btn:hover {
        background: #1a1a1a;
      }
      .applepay-note {
        margin-top: 0.8rem;
        font-size: 0.78rem;
        color: var(--slate-500);
        text-align: center;
      }

      .checkout-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 0;
        margin: 1rem 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        font-size: 0.92rem;
      }
      .checkout-total strong {
        font-family: "IBM Plex Mono", monospace;
        font-size: 1.15rem;
      }

      /* ---------- PAYMENT METHOD PANELS (added) ---------- */
      .pay-tab:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .pay-hint {
        font-size: 0.82rem;
        color: var(--slate-500);
        line-height: 1.45;
        margin-bottom: 1rem;
      }
      #paypalBtnContainer {
        min-height: 48px;
      }
      .later-box {
        background: var(--paper-alt);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.85rem 0.95rem;
        margin-bottom: 0.9rem;
      }
      .later-box ul {
        margin: 0.5rem 0 0;
        display: grid;
        gap: 0.35rem;
      }
      .later-box li {
        font-size: 0.78rem;
        color: var(--ink-700);
        padding-left: 1rem;
        position: relative;
        line-height: 1.4;
      }
      .later-box li::before {
        content: "-";
        position: absolute;
        left: 0;
        color: var(--slate-500);
      }
      .later-confirm {
        display: flex;
        gap: 0.55rem;
        align-items: flex-start;
        font-size: 0.78rem;
        color: var(--ink-700);
        line-height: 1.4;
        margin-bottom: 1rem;
        cursor: pointer;
      }
      .later-confirm input {
        width: 15px;
        height: 15px;
        margin-top: 0.1rem;
        flex-shrink: 0;
        accent-color: var(--ink-950);
      }
      .invoice-link {
        text-decoration: underline;
        font-weight: 600;
        color: var(--ink-950);
      }

      .success-state {
        text-align: center;
        padding: 1rem 0;
      }
      .success-icon {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: #eafaf1;
        color: #1a8f5f;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.1rem;
      }
      .success-icon svg {
        width: 26px;
        height: 26px;
      }
      .success-state h3 {
        font-family: "Fraunces", serif;
        font-size: 1.3rem;
        color: var(--ink-950);
      }
      .success-state p {
        margin-top: 0.6rem;
        font-size: 0.88rem;
        color: var(--slate-500);
        max-width: 32ch;
        margin-left: auto;
        margin-right: auto;
      }
      .success-ref {
        margin-top: 1.1rem;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.8rem;
        color: var(--ink-700);
        background: var(--paper-alt);
        padding: 0.6rem 0.9rem;
        border-radius: 8px;
        display: inline-block;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .request-grid,
        .request-intro {
          transition: none;
        }
        .trust .t-reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }