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

    :root {
      --foxx-core:       #253439;
      --soft-canvas:     #F7F7F3;
      --aged-ember:      #B08A57;
      --aged-ember-text: #6B4F25;
      --aged-ember-light:#C9975A;
      --slate-accent:    #3F5157;
      --warm-stone:      #CFCAC3;
      --parchment:       #ECE5D6;       /* Mid-tone warm cream-gold */
      --taupe-text:      #5A524A;
      --text-mid:        #5A6B70;
      --white:           #FFFFFF;
      --success:         #2A6B4A;
      --radius:          14px;
      --radius-lg:       22px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--soft-canvas);
      color: var(--foxx-core);
      min-height: 100vh;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* ── Skip nav ── */
    .skip-nav {
      position: absolute; top: -100px; left: 16px; z-index: 9999;
      background: var(--foxx-core); color: white; padding: 10px 18px;
      border-radius: 0 0 10px 10px; font-size: 15px; font-weight: 700;
      text-decoration: none; transition: top 0.2s;
    }
    .skip-nav:focus { top: 0; }

    /* ── Ambient background ── */
    .page-bg {
      position: fixed; inset: 0; z-index: 0; overflow: hidden;
      background: linear-gradient(160deg, #EEEEE9 0%, var(--soft-canvas) 50%, #F0F0EA 100%);
      pointer-events: none;
    }
    .bg-orb {
      position: absolute; border-radius: 50%;
      filter: blur(120px); animation: drift 20s ease-in-out infinite alternate;
    }
    .bg-orb-1 { width: 700px; height: 700px; background: #B08A57; top: -200px; right: -150px; opacity: 0.05; }
    .bg-orb-2 { width: 500px; height: 500px; background: #253439; bottom: 0; left: -150px; opacity: 0.05; animation-delay: -8s; }
    @keyframes drift { from { transform: translate(0,0); } to { transform: translate(30px, 20px); } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }

    /* ── Page wrap ── */
    .page-wrap { position: relative; z-index: 1; }

    /* ── NAV ── */
    nav.site-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 48px;
      background: rgba(247,247,243,0.88); backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(37,52,57,0.09);
      position: sticky; top: 0; z-index: 100;
      gap: 24px;
    }
    .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .nav-logo-box {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--foxx-core);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .nav-wordmark {
      font-family: 'DM Serif Display', serif;
      font-size: 22px; font-weight: 400; color: var(--foxx-core);
    }
    .nav-wordmark em { color: var(--aged-ember-text); font-style: normal; }
    .nav-tagline {
      font-size: 12px; color: var(--taupe-text); letter-spacing: 0.03em;
      display: none; margin-left: auto; text-align: right;
      font-style: italic;
    }
    @media (min-width: 880px) { .nav-tagline { display: block; } }
    .nav-links { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    .nav-link {
      font-size: 14px; font-weight: 500; color: var(--slate-accent);
      text-decoration: none; padding: 8px 14px; border-radius: 8px;
      transition: background 0.15s, color 0.15s;
    }
    .nav-link:hover { background: rgba(37,52,57,0.06); color: var(--foxx-core); }

    /* ── HERO BAND ── */
    .hero-band {
      padding: 64px 48px 56px;
      max-width: 1240px; margin: 0 auto;
    }
    .hero-pre {
      text-align: center; max-width: 820px; margin: 0 auto;
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(37,52,57,0.07); border: 1px solid rgba(37,52,57,0.14);
      border-radius: 100px; padding: 6px 16px; margin-bottom: 22px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
      text-transform: uppercase; color: var(--foxx-core);
    }
    .eyebrow-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--aged-ember);
      animation: pulse-dot 2s ease infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }
    .hero-pre h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(34px, 4.6vw, 60px); font-weight: 400;
      color: var(--foxx-core); line-height: 1.08;
      margin-bottom: 20px; letter-spacing: -0.012em;
    }
    .hero-pre h1 .accent { color: var(--aged-ember-text); font-style: italic; }
    .hero-pre p {
      font-size: clamp(16px, 1.4vw, 19px); color: var(--slate-accent);
      margin: 0 auto; line-height: 1.65; max-width: 640px;
    }

    /* ── TWO-COLUMN AUDIENCE SPLIT ── */
    .audience-split {
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
      max-width: 1240px; margin: 0 auto; padding: 0 48px 96px;
    }
    @media (max-width: 820px) { .audience-split { grid-template-columns: 1fr; padding: 0 24px 72px; } }

    .audience-card {
      border-radius: var(--radius-lg); overflow: hidden;
      position: relative; text-decoration: none;
      display: flex; flex-direction: column;
      min-height: 480px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .audience-card:hover { transform: translateY(-4px); }
    .audience-card:focus-visible {
      outline: 3px solid var(--aged-ember); outline-offset: 4px;
    }

    /* Candidate card - dark slate (recognizable, for people who scroll) */
    .card-candidate {
      background: linear-gradient(165deg, var(--slate-accent) 0%, var(--foxx-core) 100%);
      box-shadow: 0 8px 36px rgba(37,52,57,0.18), 0 2px 10px rgba(37,52,57,0.10);
    }
    .card-candidate:hover {
      box-shadow: 0 18px 56px rgba(37,52,57,0.28), 0 4px 14px rgba(37,52,57,0.14);
    }

    /* SMB card - warm parchment (mirror, distinct, brand) */
    .card-smb {
      background: linear-gradient(165deg, #F4EEDF 0%, var(--parchment) 100%);
      border: 1.5px solid rgba(176,138,87,0.30);
      box-shadow: 0 8px 36px rgba(176,138,87,0.14), 0 2px 10px rgba(37,52,57,0.06);
    }
    .card-smb:hover {
      box-shadow: 0 18px 56px rgba(176,138,87,0.22), 0 4px 14px rgba(37,52,57,0.10);
      border-color: rgba(176,138,87,0.45);
    }

    /* Decorative orbs inside cards */
    .card-orb {
      position: absolute; border-radius: 50%;
      filter: blur(60px); pointer-events: none;
    }
    .card-candidate .card-orb { width: 280px; height: 280px; background: rgba(176,138,87,0.18); top: -60px; right: -60px; }
    .card-smb .card-orb { width: 240px; height: 240px; background: rgba(176,138,87,0.16); bottom: -40px; left: -40px; }

    .card-body {
      position: relative; z-index: 1;
      padding: 32px 32px 26px; flex: 1; display: flex; flex-direction: column;
    }

    .card-tag {
      display: inline-flex; align-items: center; gap: 8px;
      border-radius: 100px; padding: 5px 14px; margin-bottom: 20px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
      width: fit-content;
    }
    .card-candidate .card-tag {
      background: rgba(247,247,243,0.10); border: 1px solid rgba(247,247,243,0.22);
      color: rgba(247,247,243,0.90);
    }
    .card-smb .card-tag {
      background: rgba(107,79,37,0.10); border: 1px solid rgba(107,79,37,0.28);
      color: var(--aged-ember-text);
    }

    .card-headline {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; line-height: 1.16;
      margin-bottom: 14px;
    }
    .card-candidate .card-headline { color: var(--soft-canvas); }
    .card-smb .card-headline { color: var(--foxx-core); }
    .card-candidate .card-headline em { color: var(--aged-ember); font-style: italic; }
    .card-smb .card-headline em { color: var(--aged-ember-text); font-style: italic; }

    .card-body p.card-desc {
      font-size: 15px; line-height: 1.65; margin-bottom: 20px;
    }
    .card-candidate p.card-desc { color: rgba(247,247,243,0.78); }
    .card-smb p.card-desc { color: var(--slate-accent); }

    .card-points {
      list-style: none; margin-bottom: 28px; flex: 1;
      display: flex; flex-direction: column; gap: 10px;
    }
    .card-points li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 14.5px; line-height: 1.5;
    }
    .card-candidate .card-points li { color: rgba(247,247,243,0.85); }
    .card-smb .card-points li { color: var(--taupe-text); }
    .card-check {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
    }
    .card-candidate .card-check { background: rgba(176,138,87,0.28); color: var(--aged-ember-light); }
    .card-smb .card-check { background: rgba(176,138,87,0.20); color: var(--aged-ember-text); }

    /* Card CTA - gold-gradient border + slate inner + glisten (matches audience pages) */
    .card-cta {
      display: inline-block;
      position: relative;
      padding: 3px;
      border-radius: var(--radius);
      align-self: flex-start;
      background: linear-gradient(135deg,
        var(--aged-ember-light) 0%,
        var(--aged-ember) 20%,
        var(--aged-ember-light) 40%,
        var(--aged-ember) 60%,
        var(--aged-ember-light) 80%,
        var(--aged-ember) 100%);
      background-size: 250% 100%;
      box-shadow: 0 8px 24px rgba(176,138,87,0.28), 0 2px 8px rgba(0,0,0,0.16);
      transition: transform 0.2s ease, box-shadow 0.25s ease;
      animation: ctaGoldFlow 3.5s linear infinite;
      overflow: hidden;
    }
    .card-cta-inner {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 13px 24px;
      background: var(--slate-accent);
      color: var(--soft-canvas);
      font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 700;
      letter-spacing: 0.02em;
      border-radius: 11px;
      position: relative; z-index: 1;
    }
    .audience-card:hover .card-cta {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(176,138,87,0.40), 0 4px 12px rgba(0,0,0,0.20);
    }
    .card-cta::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), rgba(247,247,243,0.58), rgba(255,255,255,0.42), transparent);
      transform: skewX(-22deg) translateX(-250%);
      pointer-events: none;
      animation: ctaGlisten 4.2s ease-in-out infinite;
      z-index: 2;
    }
    .card-candidate .card-cta::after { animation-delay: 0s; }
    .card-smb .card-cta::after { animation-delay: 2.1s; }
    @keyframes ctaGoldFlow {
      from { background-position: 0% 50%; }
      to   { background-position: 200% 50%; }
    }
    @keyframes ctaGlisten {
      0%, 30% { transform: skewX(-22deg) translateX(-250%); opacity: 0; }
      40% { transform: skewX(-22deg) translateX(-120%); opacity: 1; }
      65% { transform: skewX(-22deg) translateX(220%); opacity: 1; }
      78%, 100% { transform: skewX(-22deg) translateX(450%); opacity: 0; }
    }
    .cta-arrow { font-size: 17px; transition: transform 0.2s; line-height: 1; }
    .audience-card:hover .cta-arrow { transform: translateX(4px); }

    /* Card footer stat strip - symmetric across both cards */
    .card-foot {
      padding: 16px 32px;
      border-top: 1px solid;
      display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 14px; align-items: center;
      position: relative; z-index: 1;
    }
    .card-candidate .card-foot { border-color: rgba(247,247,243,0.10); }
    .card-smb .card-foot { border-color: rgba(176,138,87,0.20); }
    .card-stat { text-align: center; }
    .card-stat-num {
      font-family: 'DM Serif Display', serif;
      font-size: 22px; font-weight: 400; line-height: 1.1; display: block;
      margin-bottom: 3px;
    }
    .card-candidate .card-stat-num { color: rgba(247,247,243,0.96); }
    .card-smb .card-stat-num { color: var(--aged-ember-text); font-style: italic; }
    .card-stat-label {
      font-size: 11px;
      letter-spacing: 0.04em;
      line-height: 1.3;
      display: block;
    }
    .card-candidate .card-stat-label { color: rgba(247,247,243,0.62); }
    .card-smb .card-stat-label { color: var(--taupe-text); }
    .card-stat-sep {
      width: 1px; height: 30px; align-self: center;
    }
    .card-candidate .card-stat-sep { background: rgba(247,247,243,0.10); }
    .card-smb .card-stat-sep { background: rgba(176,138,87,0.20); }

    /* ── FOOTER ── */
    footer {
      background: var(--white);
      border-top: 1px solid rgba(37,52,57,0.09);
      padding: 64px 48px 36px;
    }
    .footer-inner {
      max-width: 1240px; margin: 0 auto;
    }
    .footer-top {
      display: grid; grid-template-columns: 2fr 1fr;
      gap: 48px; margin-bottom: 40px;
    }
    @media (max-width: 640px) {
      .footer-top { grid-template-columns: 1fr; gap: 28px; }
    }
    .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .footer-logo-box {
      width: 36px; height: 36px; border-radius: 9px;
      background: var(--foxx-core); display: flex; align-items: center; justify-content: center;
    }
    .footer-wordmark {
      font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 400; color: var(--foxx-core);
    }
    .footer-wordmark em { color: var(--aged-ember-text); font-style: normal; }
    .footer-tagline { font-size: 13px; color: var(--taupe-text); line-height: 1.65; max-width: 320px; font-style: italic; }
    .footer-col-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--taupe-text); margin-bottom: 14px; display: block;
    }
    .footer-col a {
      display: inline-block; font-size: 14px; color: var(--slate-accent);
      text-decoration: none; transition: color 0.15s;
    }
    .footer-col a:hover { color: var(--aged-ember-text); }
    .footer-divider {
      height: 1px; background: rgba(37,52,57,0.08); margin-bottom: 28px;
    }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    }
    .footer-copy { font-size: 13px; color: var(--taupe-text); }
    .footer-legal { display: flex; gap: 22px; }
    .footer-legal a {
      font-size: 13px; color: var(--taupe-text); text-decoration: none; transition: color 0.15s;
    }
    .footer-legal a:hover { color: var(--foxx-core); }

    /* ── Animations ── */
    .fade-up {
      opacity: 0; transform: translateY(24px);
      animation: fadeInUp 0.65s ease forwards;
    }
    .fade-up-delay-1 { animation-delay: 0.1s; }
    .fade-up-delay-2 { animation-delay: 0.22s; }
    .fade-up-delay-3 { animation-delay: 0.34s; }
    @keyframes fadeInUp {
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 900px) {
      nav.site-nav { padding: 16px 24px; }
      .hero-band { padding-left: 24px; padding-right: 24px; }
      footer { padding: 48px 24px 28px; }
    }