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

  :root {
    --grey:  #d8d8d6;
    --white: #ffffff;
    --teal:  #729FA7;
    --mauve: #958BBA;
    --ink:   #323734;
    --rule:  rgba(151,139,142,0.25);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--grey);
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    color: var(--ink);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 500;
    background: var(--ink);
    color: var(--white);
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 4px;
    transition: top 0.2s ease;
  }

  .skip-link:focus {
    top: 1rem;
  }

  :focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
  }

  .nav-links a:focus-visible,
  .nav-drawer a:focus-visible,
  .nav-cta-btn:focus-visible,
  .nav-hamburger:focus-visible,
  .contact-card-value a:focus-visible,
  .footer-nav li a:focus-visible,
  .footer-contact-text a:focus-visible,
  .cmp-pnl:focus-visible {
    outline-color: var(--teal);
    outline-offset: 4px;
  }

  /* ── NAV ── */
  #main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    height: 64px;
    background: var(--grey);
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    animation: fadeIn 0.5s ease 0.05s forwards;
    transition: box-shadow 0.3s, background 0.3s;
  }

  #main-nav.scrolled {
    background: rgba(216,216,214,0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 24px rgba(50,55,52,0.08);
  }

  /* LOGO */
  .nav-logo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-logo-image {
    display: block;
    height: 28px;
    width: auto;
  }

  .nav-logo-image + img,
  .nav-logo-text {
    display: none;
  }

  .nav-logo-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
    padding-bottom: 2px;
  }

  /* DESKTOP LINKS */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
  }

  .nav-links li { position: relative; }

  .nav-links a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 4px;
    position: relative;
    transition: color 0.2s;
  }

  /* animated underline */
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1.5px;
    background: var(--teal);
    transition: width 0.25s ease;
  }

  .nav-links a:hover { color: var(--teal); }
  .nav-links a:hover::after { width: 100%; }
  .nav-links a.active { color: var(--teal); }
  .nav-links a.active::after { width: 100%; }

  /* CTA BUTTON */
  .nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-cta-btn:hover {
    background: var(--teal);
    transform: translateY(-1px);
  }

  .nav-cta-btn svg { flex-shrink: 0; }

  /* HAMBURGER */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 300;
  }

  .nav-hamburger:focus-visible {
    border-radius: 4px;
  }

  .ham-bar {
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
  }

  .nav-hamburger.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* MOBILE DRAWER */
  .nav-drawer {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--grey);
    border-bottom: 1px solid var(--rule);
    z-index: 190;
    flex-direction: column;
    padding: 1.5rem 2rem 2rem;
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
  }

  .nav-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-drawer a {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    transition: color 0.2s;
  }

  .nav-drawer a:last-child { border-bottom: none; }
  .nav-drawer a:hover { color: var(--teal); }
  .nav-drawer a.active { color: var(--teal); }

  .nav-drawer .drawer-cta {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 24px;
    text-decoration: none;
    border-radius: 2px;
    border-bottom: none;
  }

  .nav-drawer .drawer-cta:hover { background: var(--teal); color: var(--white); }

  /* ── HERO STAGE ── */
  .stage {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    overflow: hidden;
  }

  /* ── AMBIENT VIDEO ── */
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(50,55,52,0.72);
    z-index: 1;
    pointer-events: none;
  }

  /* ── HEADLINE AREA ── */
  .headline-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.15vw 4vw 0.1vw;
    line-height: 0.88;
    text-align: left;
    position: relative;
    z-index: 2;
  }

  .hl-row {
    display: flex;
    align-items: center;
    gap: 0;
    
    opacity: 0;
    animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
  }

  /* each row flies in from a different direction */
  .hl-row:nth-child(1) { animation: fromTop    0.9s cubic-bezier(0.16,1,0.3,1) 0.1s  forwards; }
  .hl-row:nth-child(2) { animation: fromRight  0.9s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; }
  .hl-row:nth-child(3) { animation: fromLeft   0.9s cubic-bezier(0.16,1,0.3,1) 0.4s  forwards; }
  .hl-row:nth-child(4) { animation: fromBottom 0.9s cubic-bezier(0.16,1,0.3,1) 0.55s forwards; }

  .hl-word {
    font-size: clamp(24px, 5.5vw, 96px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--white);
    line-height: 0.88;
  }

  main {
    display: block;
  }

  .hl-word.teal   { color: var(--teal); }
  .hl-word.mauve  { color: var(--mauve); }
  .hl-word.italic { font-style: italic; }
  .hl-gap { flex: 1; }

  /* ── ASTERISK SHAPE ── */
  .shape-asterisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(50px, 9vw, 136px);
    height: clamp(50px, 9vw, 136px);
    background: var(--teal);
    flex-shrink: 0;
    margin: 0 1.5vw;
  }

  .shape-asterisk svg { width: 52%; height: 52%; }

  /* ── OCTAGON DOTS ── */
  .shape-dots {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3px, 0.5vw, 8px);
    flex-shrink: 0;
    margin: 0 1.5vw;
  }

  .dot-oct {
    width: clamp(22px, 3.5vw, 52px);
    height: clamp(22px, 3.5vw, 52px);
    background: var(--ink);
    clip-path: polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  }

  /* ── PILL CTA ── */
  .pill-cta {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 14px 24px;
    border-radius: 100px;
    text-decoration: none;
    z-index: 10;
    
    transition: background 0.2s, transform 0.2s;
    opacity: 0;
    animation: fadeIn 0.6s ease 0.8s forwards;
  }

  .pill-cta:hover { background: var(--teal); transform: translateY(-52%); }

  .pill-arrow {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* ── TICKER ── */
  .ticker-band {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--grey);
    opacity: 0;
    animation: fadeIn 0.6s ease 1s forwards;
    position: relative;
    z-index: 2;
  }

  .ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  .ticker-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mauve);
    flex-shrink: 0;
  }

  .ticker-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
  }

  /* ── THREE CAPABILITY BOXES ── */
  .capability-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(114,159,167,0.2);
    opacity: 0;
    animation: fadeIn 0.8s ease 1.1s forwards;
    position: relative;
    z-index: 2;
  }

  .cap-box {
    padding: 2.5rem 2.5rem;
    border-right: 1px solid rgba(114,159,167,0.2);
    background: var(--ink);
    transition: background 0.2s;
  }

  .cap-box:last-child { border-right: none; }
  .cap-box:hover { background: #242829; }

  .cap-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cap-tag::before {
    content: '';
    width: 16px; height: 1.5px;
    background: var(--teal);
    display: block;
    flex-shrink: 0;
  }

  .cap-title {
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .cap-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.75;
  }

  /* ── BOTTOM BAR ── */
  .bottom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2.5rem;
    border-top: none;
    background: var(--mauve);
    opacity: 0;
    animation: fadeIn 0.6s ease 1.3s forwards;
    position: relative;
    z-index: 2;
  }

  .bottom-tagline {
    font-size: clamp(22px, 3.5vw, 52px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
  }

  .bottom-scroll {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mauve);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .scroll-line {
    width: 32px; height: 1px;
    background: var(--mauve);
    display: inline-block;
  }

  /* ── ANIMATIONS ── */
  @keyframes fromTop {
    from { opacity: 0; transform: translateY(-80px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
  }

  @keyframes fromBottom {
    from { opacity: 0; transform: translateY(80px)  scale(0.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
  }

  @keyframes fromLeft {
    from { opacity: 0; transform: translateX(-100px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)      scale(1); }
  }

  @keyframes fromRight {
    from { opacity: 0; transform: translateX(100px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)     scale(1); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    .ticker-track {
      transform: none !important;
    }

    nav,
    .hl-row,
    .cmp-pnl,
    .cmp-pnl::after,
    .prob-reveal,
    .hiw-reveal,
    .proof-reveal,
    .sol-reveal,
    .cmp-reveal,
    .pledge-reveal,
    .contact-reveal {
      animation: none !important;
      transition: none !important;
    }

    .hl-row,
    .prob-reveal,
    .hiw-reveal,
    .proof-reveal,
    .sol-reveal,
    .cmp-reveal,
    .pledge-reveal,
    .contact-reveal {
      opacity: 1 !important;
      transform: none !important;
    }

    .cmp-pnl.playing {
      transform: none;
    }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    #main-nav { padding: 0 1.25rem; }
    .nav-links { display: none; }
    .nav-cta-btn { display: none; }
    .nav-hamburger { display: flex; }
    .nav-drawer { display: flex; }
    .nav-logo-image { height: 24px; }

    .headline-wrap { padding: 5vw 3vw 3vw; }

    .hl-row {
      flex-wrap: wrap;
      row-gap: 0.04em;
    }

    .headline-wrap > .hl-row:first-of-type {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }

    .hl-word { font-size: clamp(38px, 12vw, 80px); }

    .shape-asterisk {
      width: clamp(36px, 10vw, 64px);
      height: clamp(36px, 10vw, 64px);
      margin: 0 2vw;
    }

    .shape-dots { margin: 0 2vw; }

    .dot-oct {
      width: clamp(14px, 5vw, 28px);
      height: clamp(14px, 5vw, 28px);
    }

    .pill-cta {
      position: static;
      transform: none;
      margin: 1.5rem 1.25rem 0;
      align-self: flex-start;
      animation: fadeIn 0.6s ease 0.8s forwards;
    }

    .pill-cta:hover { transform: none; }

    .capability-section {
      grid-template-columns: 1fr;
    }

    .cap-box {
      border-right: none;
      border-bottom: 1px solid rgba(114,159,167,0.2);
      padding: 2rem 1.25rem;
    }

    .cap-box:last-child { border-bottom: none; }

    .bottom-bar { padding: 1rem 1.25rem; }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    .hl-word { font-size: clamp(52px, 9vw, 120px); }

    .pill-cta { font-size: 11px; padding: 12px 20px; }

    .cap-box { padding: 2rem 1.5rem; }
  }

  /* ══════════════════════════════════════
     SECTION 2 — THE PROBLEM
  ══════════════════════════════════════ */

  #problem {
    background: var(--ink);
    padding: 7.5rem 5rem;
    position: relative;
    overflow: hidden;
  }

  /* subtle dot grid texture */
  #problem::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(114,159,167,0.12) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
  }

  .problem-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
  }

  /* eyebrow */
  .problem-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .problem-eyebrow.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .prob-eyebrow-rule {
    width: 32px; height: 1.5px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .prob-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
  }

  /* main statement */
  .problem-statement {
    font-size: clamp(20px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    max-width: 820px;
    margin-bottom: 5rem;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
  }

  .problem-statement.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .problem-statement .highlight {
    color: var(--teal);
    font-style: italic;
  }

  .problem-statement .strike {
    text-decoration: line-through;
    text-decoration-color: var(--mauve);
    color: var(--mauve);
  }

  /* three pain points grid */
  .problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(114,159,167,0.2);
  }

  .prob-card {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-right: 1px solid rgba(114,159,167,0.15);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .prob-card:not(:first-child) { padding-left: 2.5rem; }
  .prob-card:last-child { border-right: none; }

  .prob-card.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .prob-card:nth-child(1) { transition-delay: 0.1s; }
  .prob-card:nth-child(2) { transition-delay: 0.25s; }
  .prob-card:nth-child(3) { transition-delay: 0.4s; }

  .prob-icon {
    margin-bottom: 1.25rem;
    opacity: 0.9;
  }

  .prob-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--teal);
    margin-bottom: 1.25rem;
    padding-top: 0;
  }

  .prob-heading {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
    line-height: 1.25;
  }

  .prob-body {
    font-size: 13px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.8;
  }

  /* divider line between hero and problem */
  .section-divider {
    height: 4px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--mauve) 100%);
  }

  /* responsive */
  @media (max-width: 768px) {
    #problem { padding: 4rem 1.5rem; }
    .problem-grid { grid-template-columns: 1fr; }
    .prob-card { border-right: none; border-bottom: 1px solid rgba(114,159,167,0.15); padding: 2rem 0; }
    .prob-card:not(:first-child) { padding-left: 0; }
    .prob-card:last-child { border-bottom: none; }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    #problem { padding: 5rem 3rem; }
    .prob-card { padding: 2rem 2rem 2rem 0; }
    .prob-card:not(:first-child) { padding-left: 2rem; }
  }


  
    to   { opacity: 0; transform: translateX(180px) scale(0.7) rotate(6deg); }
  


  /* ── STATS STRIP (inside problem section) ── */
  .problem-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(114,159,167,0.2);
    border-bottom: 1px solid rgba(114,159,167,0.2);
    margin-bottom: 5rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
  }

  .problem-stats.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .stat-block {
    padding: 2.5rem 2rem;
    border-right: 1px solid rgba(114,159,167,0.15);
    position: relative;
  }

  .stat-block:last-child { border-right: none; }

  .stat-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px;
    height: 0;
    background: var(--teal);
    transition: height 0.6s ease;
  }

  .problem-stats.visible .stat-block::before {
    height: 100%;
  }

  .stat-block:nth-child(1)::before { transition-delay: 0s; }
  .stat-block:nth-child(2)::before { transition-delay: 0.15s; }
  .stat-block:nth-child(3)::before { transition-delay: 0.3s; }
  .stat-block:nth-child(4)::before { transition-delay: 0.45s; }

  .stat-big {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 2px;
  }

  .stat-big .sym {
    font-size: 55%;
    color: var(--teal);
    margin-top: 6px;
  }

  .stat-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.65;
    margin-bottom: 0.75rem;
  }

  .stat-source {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(114,159,167,0.5);
  }

  @media (max-width: 768px) {
    .problem-stats {
      grid-template-columns: 1fr 1fr;
      margin-bottom: 3rem;
    }

    .stat-block {
      border-bottom: 1px solid rgba(114,159,167,0.15);
      padding: 1.75rem 1.25rem;
    }

    .stat-block:nth-child(2) { border-right: none; }
    .stat-block:nth-child(3) { border-bottom: none; }
    .stat-block:nth-child(4) { border-right: none; border-bottom: none; }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    .problem-stats { grid-template-columns: repeat(2, 1fr); }
    .stat-block:nth-child(2) { border-right: none; }
    .stat-block:nth-child(3) { border-top: 1px solid rgba(114,159,167,0.15); }
    .stat-block:nth-child(4) { border-right: none; border-top: 1px solid rgba(114,159,167,0.15); }
  }


    /* ── PROBLEM MAIN GRID: 2 col x 2 row ── */
  .problem-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    align-items: stretch;
  }

  /* TOP-LEFT: statement */
  .prob-top-left {
    padding: 3.5rem 4rem 3.25rem 0;
    border-right: 1px solid rgba(114,159,167,0.2);
    border-bottom: 1px solid rgba(114,159,167,0.2);
    display: flex;
    align-items: flex-end;
  }

  /* TOP-RIGHT: 2x2 stats */
  .prob-top-right {
    padding: 0;
    border-bottom: 1px solid rgba(114,159,167,0.2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: stretch;
  }

  .stat-block {
    padding: 2.25rem 1.85rem 2rem;
    border-right: 1px solid rgba(114,159,167,0.15);
    border-bottom: 1px solid rgba(114,159,167,0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    position: relative;
  }

  .stat-block.visible { opacity: 1; transform: translateY(0); }
  .stat-block:nth-child(1) { transition-delay: 0.05s; }
  .stat-block:nth-child(2) { border-right: none; transition-delay: 0.15s; }
  .stat-block:nth-child(3) { border-bottom: none; transition-delay: 0.25s; }
  .stat-block:nth-child(4) { border-right: none; border-bottom: none; transition-delay: 0.35s; }

  .stat-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 0;
    background: var(--teal);
    transition: height 0.5s ease;
  }

  .stat-block.visible::before { height: 100%; }
  .stat-block:nth-child(1)::before { transition-delay: 0.1s; }
  .stat-block:nth-child(2)::before { transition-delay: 0.25s; }
  .stat-block:nth-child(3)::before { transition-delay: 0.4s; }
  .stat-block:nth-child(4)::before { transition-delay: 0.55s; }

  .stat-big {
    font-size: clamp(34px, 3.2vw, 50px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 2px;
  }

  .stat-big .sym { font-size: 55%; color: var(--teal); margin-top: 5px; }

  .stat-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.7;
    margin-bottom: 0.85rem;
    max-width: 24ch;
  }

  .stat-source {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(114,159,167,0.45);
    line-height: 1.45;
  }

  /* BOTTOM ROW: spans full width, 3 equal columns */
  .prob-bottom-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .prob-card {
    padding: 2.5rem 2.75rem 2.5rem 0;
    border-right: 1px solid rgba(114,159,167,0.15);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .prob-card:not(:first-child) { padding-left: 2.5rem; }
  .prob-card:last-child { border-right: none; }
  .prob-card.visible { opacity: 1; transform: translateY(0); }
  .prob-card:nth-child(1) { transition-delay: 0.1s; }
  .prob-card:nth-child(2) { transition-delay: 0.25s; }
  .prob-card:nth-child(3) { transition-delay: 0.4s; }

  .prob-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--teal);
    margin-bottom: 0;
    padding-top: 1rem;
  }

  .prob-heading {
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0;
    line-height: 1.35;
    max-width: 22ch;
  }

  .prob-body {
    font-size: 15px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.8;
    max-width: 32ch;
  }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .problem-main-grid { grid-template-columns: 1fr; }
    .prob-top-left { padding: 2.75rem 0 2.25rem; border-right: none; }
    .prob-top-right { border-left: none; grid-template-columns: 1fr 1fr; }
    .prob-bottom-row { grid-column: 1; grid-template-columns: 1fr; }
    .prob-card { border-right: none; border-bottom: 1px solid rgba(114,159,167,0.15); padding: 1.85rem 0; }
    .prob-card:not(:first-child) { padding-left: 0; }
    .prob-card:last-child { border-bottom: none; }
  }

  @media (max-width: 480px) {
    .prob-top-right { grid-template-columns: 1fr; }
    .problem-statement {
      font-size: clamp(24px, 9vw, 34px);
      line-height: 1.12;
    }
    .stat-block {
      border-right: none;
      padding: 1.75rem 1.35rem;
    }
    .stat-block:nth-child(3) { border-bottom: 1px solid rgba(114,159,167,0.15); }
    .prob-number { padding-top: 0.25rem; }
  }
    .problem-right .stat-block:last-child { border-bottom: none; }
  

/* ══ SOLUTION SECTION ══ */

  #solution {
    background: var(--white);
    padding: 7rem 5rem;
    position: relative;
  }

  .solution-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* eyebrow shared */
  .sol-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
  }

  .sol-eyebrow-rule {
    width: 32px; height: 1.5px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .sol-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
  }

  /* scroll reveal base */
  .sol-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }

  .sol-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* PIVOT */
  .sol-pivot {
    max-width: 860px;
    margin-bottom: 5rem;
  }

  .sol-pivot-heading {
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1.75rem;
  }

  .sol-accent {
    color: var(--teal);
    font-style: italic;
  }

  .sol-pivot-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.8;
    max-width: 700px;
  }

  /* BEFORE / AFTER */
  .sol-contrast {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 0;
    margin-bottom: 6rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
  }

  .sol-contrast-col {
    padding: 2.5rem;
  }

  .sol-before {
    background: #f7f6f4;
  }

  .sol-after {
    background: #AACF88;
  }

  .sol-contrast-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .sol-before .sol-contrast-label {
    color: var(--mauve);
  }

  .sol-after .sol-contrast-label {
    color: var(--ink);
  }

  .sol-contrast-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sol-contrast-list li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .sol-contrast-list li:last-child { border-bottom: none; }

  .sol-before .sol-contrast-list li {
    color: var(--mauve);
  }

  .sol-before .sol-contrast-list li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mauve);
    opacity: 0.4;
    flex-shrink: 0;
    margin-top: 7px;
  }

  .sol-after .sol-contrast-list li {
    color: var(--ink);
    border-bottom-color: rgba(50,55,52,0.15);
  }

  .sol-after .sol-contrast-list li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
    margin-top: 7px;
  }

  .sol-contrast-divider {
    background: var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(151,139,142,0.2);
  }

  .sol-contrast-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(114,159,167,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    #solution { padding: 4rem 1.5rem; }

    .sol-contrast {
      grid-template-columns: 1fr;
    }

    .sol-contrast-divider {
      padding: 1.25rem;
      border-left: none;
      border-top: 1px solid rgba(114,159,167,0.2);
    }

    .sol-contrast-arrow {
      transform: rotate(90deg);
    }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    #solution { padding: 5rem 3rem; }
  }

/* ══ SECTION 4: HOW IT WORKS ══ */

  #how-it-works {
    background: #FAFAFA;
  }

  .hiw-header {
    padding: 7rem 5rem 5rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .hiw-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
  }

  .hiw-eyebrow-rule {
    width: 32px; height: 1.5px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .hiw-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .hiw-heading {
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1.25rem;
  }

  .hiw-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.8;
    max-width: 680px;
  }

  /* SCROLL REVEAL */
  .hiw-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .hiw-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* STAGE CARDS WRAPPER */
  .hiw-cards {
    padding: 0 5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* STAGE BANDS */
  .hiw-stage {
    position: relative;
    overflow: hidden;
    padding: 3rem 3rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
    border-radius: 4px;
  }

  .hiw-stage-01 { background: var(--ink); }
  .hiw-stage-02 { background: var(--teal); }
  .hiw-stage-03 { background: #AACF88; }

  /* OVERSIZED BG NUMBER */
  .hiw-bg-num {
    position: absolute;
    right: -0.04em;
    top: -0.18em;
    font-size: clamp(140px, 20vw, 260px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
  }

  .hiw-stage-01 .hiw-bg-num { color: rgba(255,255,255,0.04); }
  .hiw-stage-02 .hiw-bg-num { color: rgba(50,55,52,0.07); }
  .hiw-stage-03 .hiw-bg-num { color: rgba(50,55,52,0.06); }

  /* LEFT COLUMN */
  .hiw-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.25rem;
  }

  .hiw-step-num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .hiw-stage-01 .hiw-step-num { color: var(--teal); }
  .hiw-stage-02 .hiw-step-num { color: rgba(50,55,52,0.45); }
  .hiw-stage-03 .hiw-step-num { color: rgba(50,55,52,0.45); }

  .hiw-stage-label {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .hiw-stage-01 .hiw-stage-label { color: var(--white); }
  .hiw-stage-02 .hiw-stage-label { color: var(--ink); }
  .hiw-stage-03 .hiw-stage-label { color: var(--ink); }

  /* USP PILL */
  .hiw-usp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--mauve);
    padding: 6px 14px;
    border-radius: 2px;
    width: fit-content;
  }

  .hiw-usp-pill span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }

  .hiw-usp-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--white);
    flex-shrink: 0;
  }

  /* RIGHT COLUMN */
  .hiw-right {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hiw-mechanism {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
  }

  .hiw-stage-01 .hiw-mechanism { color: rgba(250,250,250,0.65); }
  .hiw-stage-02 .hiw-mechanism { color: rgba(50,55,52,0.72); }
  .hiw-stage-03 .hiw-mechanism { color: rgba(50,55,52,0.72); }

  /* BENEFIT CALLOUT */
  .hiw-benefit {
    padding: 1.25rem 1.5rem;
    border-radius: 2px;
  }

  .hiw-stage-01 .hiw-benefit {
    background: rgba(114,159,167,0.1);
    border-left: 2px solid var(--teal);
  }

  .hiw-stage-02 .hiw-benefit {
    background: rgba(50,55,52,0.1);
    border-left: 2px solid var(--ink);
  }

  .hiw-stage-03 .hiw-benefit {
    background: rgba(50,55,52,0.07);
    border-left: 2px solid var(--ink);
  }

  .hiw-benefit-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .hiw-stage-01 .hiw-benefit-label { color: var(--teal); }
  .hiw-stage-02 .hiw-benefit-label { color: rgba(50,55,52,0.5); }
  .hiw-stage-03 .hiw-benefit-label { color: rgba(50,55,52,0.5); }

  .hiw-benefit-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .hiw-stage-01 .hiw-benefit-text { color: var(--white); }
  .hiw-stage-02 .hiw-benefit-text { color: var(--ink); }
  .hiw-stage-03 .hiw-benefit-text { color: var(--ink); }

  /* CONNECTOR */
  .hiw-connector {
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    border: none;
  }

  .hiw-connector-line {
    flex: 1;
    height: 1px;
    background: rgba(151,139,142,0.2);
  }

  .hiw-connector-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .hiw-header { padding: 4rem 1.5rem 3rem; }
    .hiw-cards { padding: 0 1.5rem 3rem; gap: 1rem; }

    .hiw-stage {
      grid-template-columns: 1fr;
      padding: 2rem 1.5rem;
      gap: 1.5rem;
    }

    .hiw-bg-num {
      font-size: clamp(100px, 35vw, 160px);
      top: -0.1em;
    }

    .hiw-connector { padding: 0 0.5rem; }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    .hiw-header { padding: 5rem 3rem 4rem; }
    .hiw-cards { padding: 0 3rem 4rem; }
    .hiw-stage { padding: 2.5rem 2.5rem; gap: 2rem; }
  }

/* ══ SECTION 5: COMPARISON ══ */

  #comparison {
    background: #FAFAFA;
    padding: 7rem 5rem;
  }

  .cmp-inner {
    max-width: 1100px;
    margin: 0 auto;
  }

  .cmp-header {
    margin-bottom: 3rem;
  }

  .cmp-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
  }

  .cmp-eyebrow-rule {
    width: 2.5rem;
    height: 2px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .cmp-eyebrow-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .cmp-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(26px, 3.5vw, 46px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
  }

  .cmp-sub {
    font-size: 1rem;
    color: #555;
    margin: 0;
  }

  .cmp-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .cmp-pnl {
    border-radius: 12px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }

  .cmp-pnl::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,0.22) 50%, transparent 82%);
    transform: translateX(-135%);
    opacity: 0;
    pointer-events: none;
  }

  .cmp-pnl:hover {
    box-shadow: 0 0 0 2px var(--teal);
  }

  .cmp-pnl:focus-visible {
    box-shadow: 0 0 0 2px var(--teal);
  }

  .cmp-pnl.playing {
    transform: translateY(-3px);
  }

  .cmp-pnl.playing::after {
    opacity: 1;
    animation: cmpSweep 1.1s ease;
  }

  .cmp-trad.playing {
    box-shadow: 0 16px 32px rgba(149,139,186,0.16);
  }

  .cmp-adap.playing {
    box-shadow: 0 16px 36px rgba(58,104,40,0.18);
  }

  .cmp-trad {
    background: rgba(149,139,186,0.09);
    border: 0.5px solid rgba(149,139,186,0.28);
    display: flex;
    flex-direction: column;
    min-height: 218px;
  }

  .cmp-adap {
    background: #AACF88;
    border: 0.5px solid #93BA6E;
  }

  .cmp-plbl {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .cmp-trad .cmp-plbl { color: #958BBA; }
  .cmp-adap .cmp-plbl { color: #4A7A35; }

  .cmp-hint {
    position: absolute;
    top: 18px;
    right: 16px;
    font-size: 0.75rem;
    color: rgba(50,55,52,0.62);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.4s;
  }

  .cmp-pnl.playing .cmp-hint { opacity: 0; }

  /* Traditional modules */
  .cmp-trad-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .cmp-trow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 94px;
  }

  .cmp-tbar {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .ctm { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
  .ctz { font-size: 10px; height: 14px; color: #7d729f; opacity: 0; transition: opacity 0.8s; }
  .ctm.dn .ctz { opacity: 1; }
  .ctb-box {
    width: 56px; height: 44px; border-radius: 7px;
    border: 1.5px solid #958BBA;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; opacity: 0;
    transition: opacity 0.28s ease, background 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
    font-family: 'Montserrat', sans-serif;
  }
  .ctm.ac .ctb-box {
    background: #958BBA;
    color: white;
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 10px 18px rgba(149,139,186,0.24);
    animation: cmpBoxPulse 0.7s ease;
  }
  .ctm.dn .ctb-box { background: transparent; color: #7d729f; opacity: 0.55; }
  .cta { font-size: 12px; color: #7d729f; opacity: 0; flex-shrink: 0; transition: opacity 0.25s ease, transform 0.25s ease; transform: translateX(-4px); }
  .cta.v { opacity: 0.5; transform: translateX(0); animation: cmpArrowFlow 0.45s ease; }
  .cts { height: 3px; width: 56px; background: rgba(149,139,186,0.22); border-radius: 2px; transition: background 0.35s ease, transform 0.35s ease; transform-origin: left center; }
  .cts.on { background: #958BBA; transform: scaleX(1.04); }

  /* Adaptive footer */
  .cmp-status {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    min-height: 18px;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .cmp-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #3A6828;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.8s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
  }

  .cmp-footer.on { opacity: 1; }

  .cmp-bar {
    flex: 1;
    height: 4px;
    background: #93BA6E;
    border-radius: 2px;
    overflow: hidden;
  }

  .cmp-bar-fill {
    height: 100%;
    width: 0%;
    background: #323734;
    border-radius: 2px;
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cmp-bar-lbl { color: #323734; white-space: nowrap; }

  @keyframes cmpSweep {
    from { transform: translateX(-135%); }
    to { transform: translateX(135%); }
  }

  @keyframes cmpBoxPulse {
    0% { transform: translateY(0) scale(0.98); }
    55% { transform: translateY(-5px) scale(1.05); }
    100% { transform: translateY(-4px) scale(1.04); }
  }

  @keyframes cmpArrowFlow {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 0.5; transform: translateX(0); }
  }

  /* Reveal */
  .cmp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .cmp-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 860px) {
    #comparison { padding: 5rem 2rem; }
    .cmp-panels { grid-template-columns: 1fr; }
  }

  @media (max-width: 640px) {
    .cmp-pnl { padding: 16px; }

    .cmp-plbl { margin-bottom: 6px; }

    .cmp-hint {
      position: static;
      display: block;
      margin: 0 0 12px;
    }

    .cmp-status {
      min-height: 36px;
      margin-bottom: 10px;
    }

    .cmp-footer {
      flex-wrap: wrap;
      row-gap: 8px;
    }

    .cmp-bar {
      flex: 1 1 100%;
    }

    .cmp-bar-lbl { white-space: normal; }
  }

  @media (max-width: 480px) {
    #comparison { padding: 4rem 1.5rem; }

    .cmp-trow {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 0;
    }

    .cmp-tbar {
      display: grid;
      grid-template-columns: repeat(3, 56px);
      justify-content: center;
      gap: 6px;
    }

    .ctm { flex: 0 1 78px; }

    .ctb-box {
      width: 100%;
      height: 40px;
      font-size: 9px;
    }

    .ctz { font-size: 9px; }

    .cta { display: none; }
  }

/* ══ SECTION 4: SOCIAL PROOF ══ */

  #proof {
    background: var(--ink);
    padding: 7.5rem 5rem;
    position: relative;
    overflow: hidden;
  }

  #proof::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(114,159,167,0.08) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
  }

  .proof-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
  }

  /* scroll reveal */
  .proof-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }

  .proof-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* HEADER */
  .proof-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
  }

  .proof-eyebrow-rule {
    width: 32px; height: 1.5px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .proof-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .proof-heading {
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 1.25rem;
    max-width: 12ch;
  }

  .proof-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.85;
    max-width: 760px;
    margin-bottom: 4.25rem;
  }

  /* PANEL */
  .proof-panel {
    border-top: 1px solid rgba(114,159,167,0.2);
    padding: 4.5rem 0;
  }

  .proof-panel:last-child {
    border-bottom: 1px solid rgba(114,159,167,0.2);
  }

  .proof-panel-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 2.5rem;
  }

  .proof-panel-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--teal);
  }

  .proof-panel-topic {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(216,216,214,0.7);
  }

  /* TWO COLUMNS */
  .proof-cols {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 0;
    border: 1px solid rgba(114,159,167,0.15);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 47%, rgba(114,159,167,0.05) 53%, rgba(114,159,167,0.07) 100%);
  }

  .proof-col {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    position: relative;
  }

  .proof-col-now {
    background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.015) 100%);
    border-top: 4px solid rgba(149,139,186,0.35);
  }

  .proof-col-after {
    background: linear-gradient(180deg, rgba(114,159,167,0.16) 0%, rgba(114,159,167,0.09) 100%);
    border-top: 4px solid #aacf88;
    box-shadow: inset 0 0 0 1px rgba(170,207,136,0.08), inset 0 24px 48px rgba(170,207,136,0.05);
  }

  /* PILL */
  .proof-col-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 2px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: fit-content;
  }

  .proof-pill-now {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(149,139,186,0.28);
    color: rgba(216,216,214,0.78);
  }

  .proof-pill-after {
    background: rgba(170,207,136,0.16);
    border: 1px solid rgba(170,207,136,0.48);
    color: #d8f0c2;
    box-shadow: 0 0 0 1px rgba(170,207,136,0.12);
  }

  .proof-pill-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* HEADINGS + BODY */
  .proof-col-heading {
    font-size: clamp(17px, 1.55vw, 22px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--white);
    max-width: 26ch;
  }

  .proof-col-now .proof-col-heading {
    color: rgba(255,255,255,0.84);
  }

  .proof-col-after .proof-col-heading {
    color: #ffffff;
  }

  .proof-col-body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--mauve);
    max-width: 34ch;
  }

  .proof-col-now .proof-col-body {
    color: rgba(216,216,214,0.68);
  }

  .proof-col-after .proof-col-body {
    color: rgba(255,255,255,0.82);
  }

  /* STATS */
  .proof-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(114,159,167,0.15);
    margin-top: 0.75rem;
  }

  .proof-stat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(114,159,167,0.1);
  }

  .proof-stat:last-child { border-bottom: none; }

  .proof-stat-num {
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    flex-shrink: 0;
    min-width: 86px;
    display: flex;
    align-items: flex-start;
    gap: 1px;
  }

  .proof-sym {
    font-size: 55%;
    margin-top: 4px;
  }

  .proof-num-now { color: rgba(216,216,214,0.72); }
  .proof-num-now .proof-sym { color: rgba(216,216,214,0.72); }

  .proof-num-after { color: #d8f0c2; }
  .proof-num-after .proof-sym { color: #d8f0c2; }

  .proof-stat-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
  }

  .proof-stat-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.75;
    max-width: 33ch;
  }

  .proof-col-now .proof-stat-desc {
    color: rgba(216,216,214,0.72);
  }

  .proof-col-after .proof-stat-desc {
    color: rgba(255,255,255,0.88);
  }

  .proof-stat-src {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(114,159,167,0.4);
  }

  .proof-col-now .proof-stat-src {
    color: rgba(149,139,186,0.7);
  }

  .proof-col-after .proof-stat-src {
    color: rgba(216,240,194,0.84);
  }

  /* FOUNDATION CALLOUT */
  .proof-foundation {
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--teal);
    background: rgba(114,159,167,0.06);
    margin-top: 0.75rem;
  }

  .proof-col-after .proof-foundation {
    border-left-color: #d8f0c2;
    background: rgba(216,240,194,0.08);
  }

  .proof-foundation p {
    font-size: 14px;
    font-weight: 400;
    color: var(--mauve);
    line-height: 1.7;
  }

  .proof-col-after .proof-foundation p {
    color: rgba(255,255,255,0.82);
  }

  .proof-foundation strong {
    color: var(--teal);
    font-weight: 700;
  }

  .proof-col-after .proof-foundation strong {
    color: #d8f0c2;
  }

  /* DIVIDER COLUMN */
  .proof-col-divider {
    background: linear-gradient(180deg, rgba(149,139,186,0.08) 0%, rgba(170,207,136,0.18) 100%);
    border-left: 1px solid rgba(114,159,167,0.12);
    border-right: 1px solid rgba(114,159,167,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .proof-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(170,207,136,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8f0c2;
    background: rgba(50,55,52,0.24);
    box-shadow: 0 8px 24px rgba(50,55,52,0.18);
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    #proof { padding: 4.5rem 1.5rem; }

    .proof-heading {
      max-width: none;
      margin-bottom: 1rem;
    }

    .proof-sub { margin-bottom: 2.75rem; }

    .proof-panel {
      padding: 3rem 0;
    }

    .proof-panel-label {
      margin-bottom: 1.75rem;
    }

    .proof-cols {
      grid-template-columns: 1fr;
      background: none;
    }

    .proof-col {
      padding: 1.75rem;
      gap: 1.1rem;
    }

    .proof-col-now,
    .proof-col-after {
      border-top-width: 3px;
    }

    .proof-col-heading,
    .proof-col-body,
    .proof-stat-desc {
      max-width: none;
    }

    .proof-stat {
      flex-direction: column;
      gap: 0.75rem;
    }

    .proof-stat-num {
      min-width: 0;
    }

    .proof-stat-right {
      padding-top: 0;
    }

    .proof-col-divider {
      padding: 1.25rem;
      border-left: none;
      border-right: none;
      border-top: 1px solid rgba(114,159,167,0.15);
      border-bottom: 1px solid rgba(114,159,167,0.15);
    }

    .proof-arrow {
      transform: rotate(90deg);
    }

    .proof-foundation {
      padding: 1rem 1.1rem;
    }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    #proof { padding: 5rem 3rem; }
  }

/* ══ PLEDGE ══ */

  #pledge {
    background: #729FA7;
    padding: 5rem 5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .pledge-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
  }

  .pledge-content {
    max-width: 720px;
  }

  .pledge-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #323734;
    margin: 0 0 0.9rem;
  }

  .pledge-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 700;
    color: #323734;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
  }

  .pledge-body {
    font-size: 0.95rem;
    color: rgba(50,55,52,0.7);
    line-height: 1.75;
    margin: 0;
    max-width: 680px;
  }

  /* Badge */
  .pledge-badge {
    flex-shrink: 0;
    justify-self: end;
  }

  .pledge-badge-ring {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 1.5px solid rgba(50,55,52,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    box-shadow: 0 18px 34px rgba(50,55,52,0.12);
  }

  .pledge-badge-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(50,55,52,0.12);
  }

  .pledge-badge-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    opacity: 0.45;
  }

  .pledge-badge-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #323734;
    line-height: 1;
    display: flex;
    align-items: flex-start;
  }

  .pledge-badge-pct {
    font-size: 1.35rem;
    margin-top: 7px;
  }

  .pledge-badge-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(50,55,52,0.5);
  }

  /* Reveal */
  .pledge-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .pledge-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .pledge-reveal:nth-child(2) { transition-delay: 0.1s; }
  .pledge-reveal:nth-child(3) { transition-delay: 0.25s; }

  @media (max-width: 860px) {
    #pledge { padding: 4rem 2rem; }
    .pledge-inner {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
    .pledge-badge {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
    }
  }

  @media (max-width: 480px) {
    #pledge { padding: 3.5rem 1.5rem; }
    .pledge-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .pledge-badge { display: flex; justify-content: flex-start; }
    .pledge-badge-ring {
      width: 128px;
      height: 128px;
    }
    .pledge-badge-num { font-size: 2.55rem; }
    .pledge-badge-pct { font-size: 1.15rem; }
  }
/* ---- Contact section ---- */
  #contact {
    position: relative;
    background: #ffffff;
    padding: 6rem 5rem;
    border-top: 1px solid rgba(50,55,52,0.08);
    border-bottom: 1px solid rgba(50,55,52,0.06);
    overflow: hidden;
  }

  #contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(114,159,167,0.12) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
  }

  #contact::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(114,159,167,0.08) 100%);
    pointer-events: none;
  }

  .contact-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 4rem;
    align-items: start;
  }

  .contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.5rem;
  }

  .contact-copy {
    max-width: 470px;
    padding-top: 0.35rem;
  }

  .contact-eyebrow-rule {
    width: 32px;
    height: 1.5px;
    background: var(--teal);
    flex-shrink: 0;
  }

  .contact-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .contact-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 3.1vw, 44px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    max-width: 11ch;
  }

  .contact-subheading {
    font-size: 0.98rem;
    color: rgba(50,55,52,0.68);
    line-height: 1.85;
    margin: 0;
    max-width: 36ch;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .contact-card {
    --contact-accent: var(--teal);
    --contact-accent-soft: rgba(114,159,167,0.16);
    --contact-accent-glow: rgba(114,159,167,0.12);
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,250,0.98) 100%);
    border: 1px solid rgba(50,55,52,0.1);
    border-top: 4px solid var(--contact-accent);
    border-radius: 12px;
    padding: 2rem 1.8rem 1.9rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    min-height: 100%;
    box-shadow: 0 18px 38px rgba(50,55,52,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--contact-accent-glow) 0%, transparent 55%);
    pointer-events: none;
  }

  .contact-card-email {
    --contact-accent: var(--teal);
    --contact-accent-soft: rgba(114,159,167,0.18);
    --contact-accent-glow: rgba(114,159,167,0.16);
  }

  .contact-card-office {
    --contact-accent: #AACF88;
    --contact-accent-soft: rgba(170,207,136,0.18);
    --contact-accent-glow: rgba(170,207,136,0.14);
  }

  .contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(114,159,167,0.28);
    box-shadow: 0 22px 44px rgba(50,55,52,0.12), inset 0 1px 0 rgba(255,255,255,0.82);
  }

  .contact-card-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--contact-accent-soft);
    border: 1px solid rgba(50,55,52,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  }

  .contact-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--contact-accent);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .contact-card-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
  }

  .contact-card-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(50,55,52,0.42);
    margin: 0 0 0.65rem;
  }

  .contact-card-value {
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.75;
    margin: 0;
    max-width: none;
  }

  .contact-card-value a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(50,55,52,0.18);
    padding-bottom: 2px;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .contact-card-email .contact-card-value a:hover {
    color: var(--contact-accent);
    border-color: var(--contact-accent);
  }

  /* Reveal */
  .contact-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }

  .contact-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .contact-copy .contact-heading { transition-delay: 0.08s; }
  .contact-copy .contact-subheading { transition-delay: 0.16s; }
  .contact-grid .contact-card:nth-child(2) { transition-delay: 0.1s; }

  @media (max-width: 960px) {
    #contact { padding: 4.75rem 2rem; }
    .contact-inner {
      grid-template-columns: 1fr;
      gap: 2.75rem;
    }
    .contact-copy {
      max-width: 640px;
      padding-top: 0;
    }
  }

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

  @media (max-width: 480px) {
    #contact { padding: 3.5rem 1.5rem; }
    .contact-inner { gap: 2.2rem; }
    .contact-eyebrow { margin-bottom: 1.1rem; }
    .contact-card {
      padding: 1.5rem 1.25rem;
      gap: 0.95rem;
    }
  }

/* ---- Footer ---- */
  #site-footer {
    background: #323734;
    color: rgba(255,255,255,0.75);
    padding: 4rem 5rem 2.5rem;
  }

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

  .footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Brand column */
  .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-bottom: 1rem;
  }

  .footer-logo-image {
    display: block;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .footer-tagline {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
    max-width: 260px;
  }

  /* Nav columns */
  .footer-col-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0 0 1rem;
  }

  .footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .footer-nav li a {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
  }

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

  /* Contact column */
  .footer-contact-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .footer-contact-item:last-child { margin-bottom: 0; }

  .footer-contact-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .footer-contact-icon svg {
    width: 14px;
    height: 14px;
    stroke: #729FA7;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .footer-contact-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
  }

  .footer-contact-text a {
    color: #729FA7;
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer-contact-text a:hover { color: #ffffff; }

  /* Bottom bar */
  .footer-bottom {
    padding-top: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .footer-copy {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
  }

  .footer-legal {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
  }

  @media (max-width: 860px) {
    #site-footer { padding: 3.5rem 2.5rem 2rem; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 540px) {
    #site-footer { padding: 3rem 1.5rem 1.8rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2.2rem; }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

/* Inline styles moved from HTML */
.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

#approach {
  background: #AACF88;
  padding: 4rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#approach h2 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(22px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

#ckg {
  width: 100%;
  height: auto;
  display: block;
}

.proof-stat-num-cbta {
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.02em;
  margin-top: 4px;
}