/* ═══ FOOTER FEATURE CARDS ═══ */
    .footer-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(14px, 1.6vw, 22px);
      margin-bottom: clamp(48px, 6vw, 78px);
    }

    .fcard {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(28px, 3.4vw, 52px);
      border-radius: clamp(22px, 2.2vw, 32px);
      background: #FF8C42;
      color: #14141A;
      overflow: hidden;
      isolation: isolate;
    }

    /* Light sweep across the card, echoing the reference */
    .fcard::before {
      content: '';
      position: absolute;
      inset: -40% -10%;
      z-index: -1;
      background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.26) 46%, rgba(255, 255, 255, 0.05) 60%, transparent 72%);
      pointer-events: none;
    }

    .fcard--help { background: #DDE2EE; }

    .fcard-title {
      margin: 0 0 clamp(14px, 1.6vw, 22px);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 3.5vw, 3.5rem);
      line-height: 0.92;
      letter-spacing: -0.015em;
      text-transform: uppercase;
      color: #14141A;
    }

    .fcard-title em { font-style: italic; }

    .fcard-copy {
      margin: 0 0 clamp(20px, 2.4vw, 30px);
      max-width: 38ch;
      font-family: 'Barlow', sans-serif;
      font-size: clamp(0.92rem, 1.1vw, 1.05rem);
      font-weight: 500;
      line-height: 1.5;
      color: rgba(20, 20, 26, 0.76);
    }

    .fcard-form {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
    }

    .fcard-form input {
      flex: 1 1 200px;
      min-width: 0;
      height: 54px;
      padding: 0 22px;
      border: none;
      border-radius: 100px;
      background: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: 0.95rem;
      color: #14141A;
    }

    .fcard-form input::placeholder { color: rgba(20, 20, 26, 0.42); }
    .fcard-form input:focus-visible { outline: 2px solid #14141A; outline-offset: 2px; }

    .fcard-form button,
    .fbtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 54px;
      padding: 0 28px;
      border: none;
      border-radius: 100px;
      background: #14141A;
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.3, 1),
                  background 0.35s cubic-bezier(0.25, 0.7, 0.25, 1),
                  color 0.35s cubic-bezier(0.25, 0.7, 0.25, 1);
    }

    .fcard-form button:hover,
    .fbtn:hover { background: #2a3350; }
    .fcard-form button:active,
    .fbtn:active { transform: scale(0.96); transition-duration: 0.13s; }
    .fbtn:focus-visible { outline: 2px solid #14141A; outline-offset: 3px; }

    /* The Send button isn't a .fbtn, so it was missing this and its arrow
       rendered at the SVG default size — the big white shape on the card. */
    .fbtn svg,
    .fcard-form button svg { width: 15px; height: 15px; flex: none; }

    .fbtn--ghost {
      background: transparent;
      border: 1.5px solid rgba(20, 20, 26, 0.28);
      color: #14141A;
    }

    .fbtn--ghost:hover { background: rgba(20, 20, 26, 0.08); color: #14141A; }

    .fcard-note {
      margin: 12px 0 0;
      font-family: 'Barlow', sans-serif;
      font-size: 0.76rem;
      color: rgba(20, 20, 26, 0.55);
    }

    .fcard-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
    }

    /* ── Emails dropdown ── */
    .email-menu { position: relative; }

    .fbtn-caret { transition: transform 0.35s cubic-bezier(0.25, 0.7, 0.25, 1); }
    .email-menu.is-open .fbtn-caret { transform: rotate(180deg); }

    .email-list {
      position: absolute;
      left: 0;
      bottom: calc(100% + 10px);
      z-index: 5;
      min-width: 252px;
      padding: 8px;
      border: 1px solid rgba(20, 20, 26, 0.1);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 20px 44px -14px rgba(15, 23, 42, 0.38);
    }

    .email-list[hidden] { display: none; }

    .email-menu.is-open .email-list {
      animation: emailMenuIn 0.36s cubic-bezier(0.16, 1.08, 0.3, 1) both;
    }

    @keyframes emailMenuIn {
      from { opacity: 0; transform: translateY(8px) scale(0.97); }
      to   { opacity: 1; transform: none; }
    }

    .email-list a {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 14px;
      border-radius: 12px;
      text-decoration: none;
      transition: background 0.25s ease;
    }

    .email-list a:hover { background: #DDE2EE; }
    .email-list a:focus-visible { outline: 2px solid #FF8C42; outline-offset: -2px; }

    .email-list strong {
      font-family: 'Barlow', sans-serif;
      font-weight: 800;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #FF8C42;
    }

    .email-list span {
      font-family: 'Barlow', sans-serif;
      font-size: 0.92rem;
      font-weight: 600;
      color: #14141A;
    }

    /* ── Oversized wordmark ──
       Gradient is clipped to the glyphs and slid across, so the highlight
       travels over the letters like light across a coin. */
    .footer-wordmark {
      width: 100%;
      margin: clamp(10px, 2vw, 26px) 0 clamp(20px, 3vw, 38px);
      text-align: center;
      line-height: 0.78;
      user-select: none;
    }

    .footer-wordmark span {
      position: relative;
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-style: italic;
      font-size: clamp(3.4rem, 17.5vw, 15rem);
      letter-spacing: -0.02em;
      text-transform: uppercase;
      white-space: nowrap;

      /* Real colour, not a clipped gradient. iOS Safari drops text out
         entirely when an animated background-position is combined with
         background-clip: text — so the visible mark must never depend on
         that. The shine is a separate layer on top. */
      color: rgba(248, 238, 230, 0.26);
    }

    .footer-wordmark span::after {
      content: attr(data-text);
      position: absolute;
      left: calc(-1 * var(--shine-pad, 0.16em));
      top: 0;
      padding-left: var(--shine-pad, 0.16em);
      padding-right: var(--shine-pad, 0.16em);
      white-space: nowrap;
      pointer-events: none;

      /* One bright band that sweeps the word, like light running across a
         tilted coin. Position is driven per-frame from JS (see the footer
         shine script): animating background-position in CSS is a paint-only
         change, and on a background-clip:text layer Chromium can rasterise
         it once and never repaint — which left it looking frozen. */
      background-image: linear-gradient(
        100deg,
        rgba(255, 122, 26, 0) 0%,
        rgba(255, 122, 26, 0.35) 16%,
        rgba(255, 130, 40, 0.72) 30%,
        #FF8C42 40%,
        #FFB066 46%,
        #FFF6EC 50%,
        #FFB066 54%,
        #FF8C42 60%,
        rgba(255, 130, 40, 0.72) 70%,
        rgba(255, 122, 26, 0.35) 84%,
        rgba(255, 122, 26, 0) 100%
      );
      background-size: 62% 100%;
      background-repeat: no-repeat;
      background-position: var(--shine-x, -70%) 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }


    @media (prefers-reduced-motion: reduce) {
      .footer-wordmark span::after { opacity: 0; }
    }

    /* One clean row: mark, links, socials */
    .footer-main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: clamp(22px, 3vw, 46px);
      padding-bottom: clamp(26px, 3vw, 40px);
    }

    .footer-brand { display: inline-flex; flex: none; }

    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(16px, 2.2vw, 34px);
    }

    .footer-nav a {
      font-family: 'Barlow', sans-serif;
      font-weight: 600;
      font-size: 0.92rem;
      color: rgba(244, 241, 235, 0.68);
      text-decoration: none;
      transition: color 0.3s cubic-bezier(0.25, 0.7, 0.25, 1);
    }

    .footer-nav a:hover { color: #FF8C42; }

    /* Collab card: name + handle share a row, email full width */
    .fcard-form--collab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .fcard-form--collab #fcEmail { grid-column: 1 / -1; }
    .fcard-form--collab button { grid-column: 1 / -1; }

    @media (max-width: 620px) {
      .fcard-form--collab { grid-template-columns: 1fr; }
      .footer-main { justify-content: center; text-align: center; }
      .footer-nav { justify-content: center; }
    }

    .footer-built {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(244, 241, 235, 0.35);
    }

    @media (max-width: 860px) {
      .footer-cards { grid-template-columns: 1fr; }
      .fcard-form button, .fbtn { width: 100%; }
      .fcard-form input { flex: 1 1 100%; }
      .email-menu { width: 100%; }
      .email-list { left: 0; right: 0; min-width: 0; }
    }

    /* ═══ SITE FOOTER ═══ */
    .site-footer {
      background: #0F172A;
      padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 100px) 0;
    }

    .footer-inner {
      max-width: 1400px;
      margin: 0 auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: clamp(32px, 4vw, 64px);
      padding-bottom: clamp(48px, 6vw, 80px);
    }

    @media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    }

    @media (max-width: 540px) {
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* Brand col */
    .footer-col--brand {}

    .footer-logo-img {
      width: clamp(190px, 17vw, 260px);
      height: auto;
      display: block;
      margin-bottom: 0;
      filter: invert(1); mix-blend-mode: screen; background: transparent;
    }
    .footer-made-usa {
      font-family: 'Barlow', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .footer-tagline {
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem;
      color: rgba(255,255,255,0.38);
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 240px;
    }

    .footer-socials {
      display: flex;
      gap: 12px;
    }

    .footer-social {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.5);
      transition: background 0.2s, color 0.2s;
    }

    .footer-social:hover {
      background: #FF8C42;
      color: #fff;
      border-color: #FF8C42;
    }

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

    /* Col headings */
    .footer-col-title {
      font-family: 'Barlow', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-bottom: 20px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-links a {
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem;
      font-weight: 400;
      color: rgba(255,255,255,0.55);
      transition: color 0.2s;
      text-decoration: none;
    }

    .footer-links a:hover { color: #FF8C42; }

    /* Divider */
    .footer-divider {
      height: 1px;
      background: rgba(255,255,255,0.07);
    }

    /* Bottom */
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      padding: 24px 0 28px;
    }

    .footer-copy {
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.22);
    }

    .footer-legal {
      display: flex;
      gap: 24px;
    }

    .footer-legal a {
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.22);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-legal a:hover { color: rgba(255,255,255,0.5); }