:root {
      --purple: #4B0082;
      --purple-light: #6A0DAD;
      --purple-tint: #f5f0fb;
      --silver: #888888;
      --silver-dim: #AAAAAA;
      --silver-light: #666666;
      --white: #FFFFFF;
      --off-white: #F8F7FA;
      --off-white-2: #F2F0F6;
      --ink: #1A1A1A;
      --ink-soft: #2E2E2E;
      --border: rgba(0,0,0,0.07);
      --border-strong: rgba(0,0,0,0.12);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--white);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── Scroll reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: 0.1s; }
    .reveal-d2 { transition-delay: 0.22s; }
    .reveal-d3 { transition-delay: 0.34s; }

    /* ── Animations ── */
    @keyframes pulseRing {
      0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(75,0,130,0.4); }
      70%  { transform: scale(1);    box-shadow: 0 0 0 20px rgba(75,0,130,0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(75,0,130,0); }
    }
    .pulse-ring { animation: pulseRing 2.8s infinite; }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.97); }
      to   { opacity: 1; transform: scale(1); }
    }
    .fade-in { animation: fadeIn 0.4s ease forwards; }

    /* ── Hero image — single portrait, right half, full height ──
       Uses a transparent-background PNG, so it sits cleanly on the
       page regardless of what's behind it (online or offline).   ── */
    @keyframes heroImageIn {
      from { opacity: 0; transform: translateY(40px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }

    .hero-img-stack {
      position: absolute;
      right: 0;
      bottom: 0;
      top: 72px;
      width: 48%;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .hero-img-stack img {
      height: 94%;
      width: auto;
      object-fit: contain;
      object-position: bottom center;
      opacity: 0;
      animation: heroImageIn 1s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
    }

    /* ── Shared utilities ── */
    .line-accent {
      display: inline-block; width: 36px; height: 1px;
      background: var(--silver-dim); margin-right: 12px; vertical-align: middle;
    }
    .divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent);
    }
    .nav-link {
      font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--silver); text-decoration: none; transition: color 0.2s ease;
    }
    .nav-link:hover { color: var(--ink); }
    .section-label {
      font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--silver-dim); font-family: 'DM Sans', sans-serif; font-weight: 400;
    }
    .btn-primary {
      background: var(--purple-light); color: #fff; letter-spacing: 0.08em;
      text-transform: uppercase; font-size: 0.72rem; font-family: 'DM Sans', sans-serif;
      font-weight: 500; padding: 14px 36px; border: none; cursor: pointer;
      transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    }
    .btn-primary:hover {
      background: var(--purple); transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(75,0,130,0.25);
    }
    .btn-outline {
      background: transparent; color: var(--ink); letter-spacing: 0.08em;
      text-transform: uppercase; font-size: 0.72rem; font-family: 'DM Sans', sans-serif;
      font-weight: 500; padding: 13px 35px; border: 1px solid var(--border-strong);
      cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    }
    .btn-outline:hover {
      border-color: var(--purple-light); color: var(--purple-light); background: var(--purple-tint);
    }
    .stat-card {
      border: 1px solid var(--border);
      transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    .stat-card:hover {
      border-color: rgba(106,13,173,0.25);
      background: var(--purple-tint) !important;
      box-shadow: 0 4px 24px rgba(75,0,130,0.06);
    }
    .partner-card {
      border: 1px solid var(--border); background: var(--white);
      transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .partner-card:hover {
      border-color: rgba(106,13,173,0.3); transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(75,0,130,0.08), 0 0 0 1px rgba(106,13,173,0.12);
    }
    .input-field {
      background: var(--white); border: 1px solid var(--border-strong);
      color: var(--ink); font-family: 'DM Sans', sans-serif;
      font-size: 0.85rem; padding: 13px 16px; outline: none; width: 100%;
      transition: border-color 0.25s ease;
    }
    .input-field::placeholder { color: rgba(0,0,0,0.25); }
    .input-field:focus { border-color: rgba(106,13,173,0.5); }
    .photo-placeholder {
      background: var(--off-white-2); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
    }
    .hero-bg {
      background:
        radial-gradient(ellipse 70% 60% at 65% 35%, rgba(106,13,173,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 15% 80%, rgba(75,0,130,0.04) 0%, transparent 60%),
        var(--white);
    }
    .purple-bar {
      display: inline-block; width: 2px; height: 40px;
      background: linear-gradient(180deg, var(--purple-light), transparent);
      margin-right: 16px; flex-shrink: 0;
    }
    .team-card {
      border-top: 1px solid var(--border);
      transition: border-top-color 0.3s ease;
    }
    .team-card:hover { border-top-color: rgba(106,13,173,0.35); }
    .text-rule {
      display: flex; align-items: center; gap: 16px;
      color: var(--silver-dim); font-size: 0.65rem;
      letter-spacing: 0.15em; text-transform: uppercase;
    }
    .text-rule::before, .text-rule::after {
      content: ''; flex: 1; height: 1px; background: var(--border-strong);
    }

    /* ── Ethos section ── */
    .ethos-word-block {
      border-left: 2px solid rgba(106,13,173,0.2);
      padding-left: 24px;
      margin-bottom: 32px;
      transition: border-color 0.3s ease;
    }
    .ethos-word-block:hover { border-color: var(--purple-light); }
    .ethos-word-block:last-child { margin-bottom: 0; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--white); }
    ::-webkit-scrollbar-thumb { background: rgba(106,13,173,0.25); border-radius: 2px; }
    input[type="checkbox"] { accent-color: var(--purple-light); }

    /* ──────────────────────────────────────────────────────────
       RESPONSIVE LAYERS
       Inline styles in app.js are overridden with !important where
       needed (specificity can't otherwise beat an inline style).
       Tiers: small laptop ≤1024 · tablet ≤768 · phone ≤480
       ────────────────────────────────────────────────────────── */

    /* ── Small laptops / large tablets ── */
    @media (max-width: 1024px) {
      .px-page {
        padding-left: 32px !important;
        padding-right: 32px !important;
      }
      /* Give the hero copy more room before the image takes over */
      .hero-copy { max-width: 60% !important; }
      .grid-4 { grid-template-columns: 1fr 1fr !important; }
    }

    /* ── Tablets ── */
    @media (max-width: 768px) {
      .hide-mobile { display: none !important; }

      /* Single-column everything */
      .grid-2 { grid-template-columns: 1fr !important; }
      .grid-3 { grid-template-columns: 1fr !important; }
      .grid-4 { grid-template-columns: 1fr 1fr !important; }

      /* Hero: copy goes full width, image steps aside */
      .hero-copy { max-width: 100% !important; }
      .hero-img-stack { display: none !important; }

      /* Tighter horizontal padding site-wide */
      .px-page {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }

      /* Nav: let the brand + links wrap into a compact stack
         instead of disappearing entirely (no JS hamburger needed) */
      .site-nav {
        padding-left: 20px !important;
        padding-right: 20px !important;
        height: auto !important;
        min-height: 64px;
        flex-wrap: wrap;
        gap: 10px 0;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
      }
      .nav-links {
        display: flex !important;
        flex-wrap: wrap;
        gap: 16px 18px !important;
        width: 100%;
        justify-content: flex-start;
      }
    }

    /* ── Phones ── */
    @media (max-width: 480px) {
      .px-page {
        padding-left: 18px !important;
        padding-right: 18px !important;
      }

      /* All multi-column grids fully stack, including stats */
      .grid-4 { grid-template-columns: 1fr !important; }

      /* Buttons: stack full-width so they're tappable */
      .btn-primary,
      .btn-outline {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px 24px;
      }

      /* Nav links: smaller, wrap neatly under the brand */
      .nav-links { gap: 12px 14px !important; }
      .nav-link { font-size: 0.68rem; }

      /* Reduce the big section vertical padding on phones */
      .px-page { padding-bottom: 56px !important; }
    }

    /* ── Prevent any horizontal overflow on small screens ── */
    @media (max-width: 768px) {
      html, body { overflow-x: hidden; }
      img { max-width: 100%; height: auto; }
    }