/* ─────────────────────────────────────────────
       CUSTOM FONTS — Neue Haas Grot Text Round
    ───────────────────────────────────────────── */
    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-55Roman.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-56Italic.otf') format('opentype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-65Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-66MediumItalic.otf') format('opentype');
      font-weight: 500;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-75Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'NeueHaasGrotTextRound';
      src: url('../fonts/NeueHaasGrotTextRound-76BoldItalic.otf') format('opentype');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    /* ─────────────────────────────────────────────
       DESIGN TOKENS
    ───────────────────────────────────────────── */
    :root {
      --color-dark:       #000000;
      --color-dark-80:    rgba(41,41,41,0.8);
      --color-yellow:     #f4e240;
      --color-orange:     #cd4617;
      --color-taupe:      #b5a08d;
      --color-taupe-dark: #9a8876;
      --color-bg:         #fafafa;
      --color-input-bg:   #e5e5e5;
      --color-teal:       #1497c1;
      --color-border:     #dddddd;
      --color-white:      #ffffff;
      --color-error:      #c0392b;
      --color-success:    #27ae60;
      --color-text-muted: #777777;
      --color-footer-sub: #8a8d8f;

      --font-heading: 'NeueHaasGrotTextRound', 'Jost', sans-serif;
      --font-body:    'NeueHaasGrotTextRound-55Roman', sans-serif;
      --font-ui:      'NeueHaasGrotTextRound-55Roman', sans-serif;
      --font-serif:   'Playfair Display', serif;

      --space-xs:  0.375rem;
      --space-sm:  0.75rem;
      --space-md:  1.25rem;
      --space-lg:  2rem;
      --space-xl:  3.5rem;
      --space-xxl: 6rem;

      --max-width:      1980px;
      --widget-top:     1.5rem;
      --header-height:  110px;
      --radius-sm:      4px;
      --radius-md:      8px;
      --radius-lg:      12px;
      --radius-pill:    999px;

      --shadow-widget:  0 4px 40px rgba(0,0,0,0.10), 0 1px 8px rgba(0,0,0,0.06);
      --shadow-card:    0 2px 16px rgba(0,0,0,0.07);
      --shadow-hover:   0 8px 28px rgba(0,0,0,0.12);

      --transition-fast: 0.15s ease;
      --transition-med:  0.25s ease;
      --transition-slow: 0.35s ease;
    }

    /* ─────────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 19px;
      /* use `clip` (not `hidden`) so position:sticky still works inside descendants */
      overflow-x: clip;
      max-width: 100%;
    }

    body {
      font-family: var(--font-ui);
      background: var(--color-bg);
      color: var(--color-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
      max-width: 100%;
      width: 100%;
    }

    p { font-family: var(--font-body); }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

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

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
    input[type="number"] { -moz-appearance: textfield; }

    /* ─────────────────────────────────────────────
       HEADER
    ───────────────────────────────────────────── */
    .site-header {
      display: none;
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--color-white);
      border-bottom: 1px solid var(--color-border);
      height: var(--header-height);
      transition: height 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
    }

    .site-header.is-scrolled {
      height: 70px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .site-header.is-scrolled .logo-link img {
      height: 48px;
    }

    .header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-lg);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-lg);
    }

    .logo-link {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .logo-link img {
      height: 74px;
      width: auto;
      transition: height 0.3s ease;
    }

    /* ── Nav list ── */
    .nav-list {
      list-style: none;
      display: flex;
      gap: 0;
      align-items: center;
    }

    .nav-item { position: relative; }

    /* Nav toggle buttons (items with dropdowns) */
    .nav-toggle {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-dark);
      padding: 0.55rem 0.85rem;
      display: flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
      position: relative;
      transition: color var(--transition-fast);
    }

    .nav-toggle:hover,
    .nav-item.is-open > .nav-toggle { color: #89764B; }

    .nav-label {
      /* underline handled by parent ::after */
    }

    .nav-chevron {
      font-size: 0.75rem;
      color: #89764B;
      transition: transform 0.2s ease;
      display: inline-block;
    }
    .nav-item.is-open .nav-chevron { transform: rotate(180deg); }

    /* Plain nav links (no dropdown) */
    .nav-link {
      display: inline-flex;
      align-items: baseline;
      padding: 0.55rem 0.85rem;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-dark);
      white-space: nowrap;
      position: relative;
      transition: color var(--transition-fast);
    }

    .nav-link:hover { color: #89764B; }

    /* Dropdown panel */
    .nav-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 1px);
      left: 0;
      background: #fff;
      border: 1px solid var(--color-border);
      border-top: 2px solid var(--color-dark);
      border-radius: 0 0 8px 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.12);
      min-width: 230px;
      list-style: none;
      padding: 0.4rem 0;
      z-index: 200;
      overflow: hidden;
    }
    .nav-item.is-open > .nav-dropdown { display: block; }

    .nav-dropdown li a {
      display: block;
      padding: 0.6rem 1.25rem;
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-dark);
      border-bottom: none;
      transition: background 0.15s, color 0.15s;
    }
    .nav-dropdown li a:hover {
      background: var(--color-dark);
      color: #fff;
      border-bottom: none;
    }

    /* ── Header action icon buttons ── */
    .header-actions {
      display: flex;
      gap: 0.45rem;
      align-items: center;
      flex-shrink: 0;
      margin-left: var(--space-md);
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--color-dark);
      color: #fff;
      padding: 0.65rem 1.35rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background var(--transition-fast), color var(--transition-fast);
      white-space: nowrap;
    }
    .action-btn:hover {
      background: var(--color-yellow);
      color: var(--color-dark);
    }

    .action-btn--donate {
      background: #000000;
      color: #ffffff;
      border: 1.5px solid #000000;
    }
    .action-btn--donate svg {
      color: #ffffff;
    }
    .action-btn--donate:hover {
      background: #89764B;
      color: #ffffff;
      border-color: #89764B;
    }
    .action-btn--donate:hover svg {
      color: #ffffff;
    }

    .action-btn--calendar {
      background: #ffffff;
      color: #000000;
      border: 1.5px solid #000000;
    }
    .action-btn--calendar svg {
      color: #89764B;
    }
    .action-btn--calendar:hover {
      background: #ffffff;
      color: #89764B;
      border-color: #89764B;
    }
    .action-btn--calendar:hover svg {
      color: #89764B;
    }
    .action-btn svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }

    /* ─────────────────────────────────────────────
       DONATION PAGE LAYOUT
    ───────────────────────────────────────────── */
    .donation-page {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: var(--space-lg) var(--space-lg) var(--space-xxl);
      display: flex;
      gap: var(--space-xl);
      align-items: flex-start;
    }

    /* Widget column — DOM first for keyboard/tab order, visually right on desktop */
    .widget-column {
      flex: 0 0 520px;
      width: 520px;
      order: 2;
      align-self: stretch;
    }

    /* Content column — DOM second, visually left on desktop */
    .content-column {
      flex: 1;
      min-width: 0;
      order: 1;
    }

    /* ─────────────────────────────────────────────
       STICKY DONATION WIDGET
    ───────────────────────────────────────────── */
    .widget-sticky-wrapper {
      position: sticky;
      top: var(--space-lg);
    }
    /* Desktop only: when the donor form is revealed, the widget locks to the
       full browser height, pins to the top of the viewport, and the form
       fields scroll INSIDE .widget-body. Trust badges stay pinned at the
       bottom of the widget. */
    @media (min-width: 1201px) {
      .widget-sticky-wrapper.is-expanded {
        /* Small breathing room from the top of the viewport when sticky
           and the donor form is open — keeps the widget off the very edge. */
        top: var(--space-md);
      }
      .widget-sticky-wrapper.is-expanded .donation-widget {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 2 * var(--space-md));
        max-height: calc(100vh - 2 * var(--space-md));
      }
      .widget-sticky-wrapper.is-expanded .widget-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-padding-block: 1.25rem;
      }
      .widget-sticky-wrapper.is-expanded .widget-trust {
        flex-shrink: 0;
      }
      /* Breathing room when the next field is auto-scrolled into view via
         tab/focus/validation, so it doesn't land jammed against the edge. */
      .widget-sticky-wrapper.is-expanded .widget-body input,
      .widget-sticky-wrapper.is-expanded .widget-body select,
      .widget-sticky-wrapper.is-expanded .widget-body textarea,
      .widget-sticky-wrapper.is-expanded .widget-body fieldset,
      .widget-sticky-wrapper.is-expanded .widget-body .form-field {
        scroll-margin-top: 1.5rem;
        scroll-margin-bottom: 1.5rem;
      }
    }

    .donation-widget {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-widget);
      overflow: hidden;
      transition: box-shadow var(--transition-med);
    }

    .donation-widget.is-highlighted {
      box-shadow: 0 0 0 3px var(--color-taupe), var(--shadow-widget);
    }

    /* Widget header band */
    .widget-header {
      background: var(--color-dark);
      color: var(--color-white);
      padding: var(--space-md) var(--space-lg);
    }

    .widget-header h2 {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 0.25rem;
    }

    .widget-header p {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.65);
      letter-spacing: 0.04em;
    }

    /* Widget body */
    .widget-body {
      padding: var(--space-md) var(--space-lg) var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    /* Frequency toggle */
    .frequency-group {
      border: none;
      padding: 0;
    }

    .frequency-group legend {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-xs);
    }

    .frequency-pills {
      display: flex;
      background: var(--color-input-bg);
      border-radius: var(--radius-pill);
      padding: 3px;
      gap: 3px;
    }

    .frequency-pills input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .frequency-pills label {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.55rem 1rem;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast);
      user-select: none;
    }

    .frequency-pills input[type="radio"]:checked + label {
      background: #ffffff;
      color: #000000;
      border: 1.5px solid #000000;
    }

    .frequency-pills input[type="radio"]:focus-visible + label {
      outline: 2px solid var(--color-teal);
      outline-offset: 2px;
    }

    /* Donor type toggle */
    .donor-type-group {
      border: none;
      padding: 0;
    }

    .donor-type-group legend {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-xs);
    }

    .donor-type-pills {
      display: flex;
      background: var(--color-input-bg);
      border-radius: var(--radius-pill);
      padding: 3px;
      gap: 3px;
    }

    .donor-type-pills input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .donor-type-pills label {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.55rem 1rem;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast);
      user-select: none;
    }

    .donor-type-pills input[type="radio"]:checked + label {
      background: #ffffff;
      color: #000000;
      border: 1.5px solid #000000;
    }

    .donor-type-pills input[type="radio"]:focus-visible + label {
      outline: 2px solid var(--color-teal);
      outline-offset: 2px;
    }

    /* Amount grid */
    .amount-section legend {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-xs);
    }

    .amount-section {
      border: none;
      padding: 0;
    }

    .amount-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .amount-btn {
      position: relative;
      font-family: var(--font-body);
      background: #faf9f7;
      border: 1.5px solid #e8e3db;
      border-radius: 10px;
      padding: 0.85rem 0.65rem;
      text-align: left;
      cursor: pointer;
      transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .amount-btn:hover {
      border-color: #89764B;
      box-shadow: 0 2px 12px rgba(137,118,75,0.12);
    }

    .amount-btn.is-selected {
      background: #ffffff;
      border-color: #89764B;
      box-shadow: 0 2px 16px rgba(137,118,75,0.15);
    }

    .tier-header {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding-right: 1.75rem; /* reserve space for top-right icon */
    }

    .tier-icon {
      position: absolute;
      top: 0.65rem;
      right: 0.65rem;
      width: 18px;
      height: 18px;
      color: #89764B;
      flex-shrink: 0;
    }

    .amount-btn.is-selected .tier-icon {
      color: #7B1A1A;
    }

    /* Tier names ("Friend", "Supporter", etc.) hidden in the widget at all
       break points — kept in DOM for assistive tech via aria-label on the
       parent button. */
    .amount-btn .tier-name { display: none; }
    .tier-name {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #333333;
    }

    .tier-amount {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 800;
      color: #111111;
      line-height: 1.1;
    }
    .tier-amount sup {
      font-size: 0.5em;
      vertical-align: super;
      font-weight: 700;
    }

    .amount-btn.is-selected .tier-amount {
      color: #56451c;
    }

    .tier-desc {
      display: none;
    }

    .tier-dot {
      display: none !important;
    }

    /* Custom amount */
    .custom-amount-wrap {
      position: relative;
    }

    .custom-amount-wrap .prefix {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--color-taupe);
      pointer-events: none;
      z-index: 1;
    }

    .custom-amount-wrap input {
      width: 100%;
      min-height: 48px;
      padding: 10px 14px 10px 28px;
      background: var(--color-input-bg);
      border: 2px solid transparent;
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--color-dark);
      transition: border-color var(--transition-fast), background var(--transition-fast);
    }

    .custom-amount-wrap input::placeholder { color: #818181; font-weight: 400; }

    .custom-amount-wrap input:focus {
      outline: none;
      border-color: var(--color-taupe);
      background: var(--color-white);
    }

    /* Donor form */
    .donor-form {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    /* ── Reveal animation: hide the donor fields (but NOT the CTA) until an amount/frequency is touched ── */
    .donor-form-collapsible {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .donor-form-collapsible.is-hidden {
      opacity: 0;
      transform: translateY(-8px);
      max-height: 0;
      overflow: hidden;
      margin: 0;
      padding: 0;
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        max-height 0.5s ease,
        visibility 0s linear 0.5s;
    }

    .donor-form-collapsible.is-revealed {
      animation: donorFormReveal 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    @keyframes donorFormReveal {
      0% {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
      }
      60% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 2000px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .donor-form-collapsible.is-hidden,
      .donor-form-collapsible.is-revealed {
        animation: none;
        transition: none;
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .form-field label {
      font-size: 0.67rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .form-field label .required-mark {
      color: var(--color-error);
      margin-left: 0.15em;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      min-height: 48px;
      padding: 10px 14px;
      background: var(--color-input-bg);
      border: 2px solid transparent;
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 0.82rem;
      color: var(--color-dark);
      transition: border-color var(--transition-fast), background var(--transition-fast);
    }

    .form-field textarea {
      min-height: 72px;
      resize: vertical;
    }

    .form-field input:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--color-taupe);
      background: var(--color-white);
    }

    .form-field input.has-error,
    .form-field textarea.has-error {
      border-color: var(--color-error);
    }

    .form-field select {
      width: 100%;
      min-height: 48px;
      padding: 10px 14px;
      background: var(--color-input-bg);
      border: 2px solid transparent;
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 0.82rem;
      color: var(--color-dark);
      transition: border-color var(--transition-fast), background var(--transition-fast);
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }

    .form-field select:focus {
      outline: none;
      border-color: var(--color-taupe);
      background-color: var(--color-white);
    }

    .field-error {
      font-size: 0.65rem;
      color: var(--color-error);
      display: none;
    }

    .field-error.is-visible { display: block; }

    /* Newsletter checkbox */
    .form-field--checkbox {
      margin: 0.2rem 0 0.4rem;
    }

    .checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--color-taupe);
      cursor: pointer;
      line-height: 1.4;
      text-transform: none;
      letter-spacing: normal;
    }

    .checkbox-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-top: -6px;
      flex-shrink: 0;
      accent-color: #1a1a2e;
    }
    /* WCAG-compliant keyboard focus indicator for the anonymous checkbox.
       The page-wide :focus-visible rule didn't paint reliably on the native
       checkbox (some browsers clip the outline against the accent-color
       fill), so this rule pins an explicit teal ring with offset and a
       subtle halo for clear visibility on tab focus. */
    .checkbox-label input[type="checkbox"]:focus-visible {
      outline: 2px solid var(--color-teal);
      outline-offset: 3px;
      box-shadow: 0 0 0 4px rgba(20, 151, 193, 0.18);
      border-radius: 2px;
    }

    /* Stripe Payment Element container */
    #payment-element-container {
      margin: 0.6rem 0 0.2rem;
      padding: 0.75rem;
      background: #fafafa;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
    }

    #payment-element-container label {
      display: block;
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-body);
      margin-bottom: 0.5rem;
    }

    #payment-element {
      min-height: 40px;
    }

    #payment-error {
      margin-top: 0.4rem;
    }

    /* CTA loading state */
    .donate-cta.is-loading {
      opacity: 0.7;
      pointer-events: none;
    }

    .donate-cta:disabled,
    .donate-cta[aria-disabled="true"] {
      cursor: not-allowed;
    }

    /* Locked form fields (after payment intent created) */
    .donor-form input[readonly],
    .donor-form select[disabled] {
      background: #f5f5f5;
      color: var(--color-taupe);
      cursor: default;
      opacity: 1;
    }

    /* Amount error */
    .amount-error {
      font-size: 0.68rem;
      color: var(--color-error);
      display: none;
      padding: 0.4rem 0.6rem;
      background: rgba(192,57,43,0.07);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--color-error);
    }

    .amount-error.is-visible { display: block; }

    /* Donate CTA */
    .donate-cta {
      width: 100%;
      min-height: 54px;
      padding: 0.95rem 1rem;
      background: #000000;
      color: #ffffff;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: 2px solid #000000;
      border-radius: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition:
        background var(--transition-med),
        border-color var(--transition-med),
        color var(--transition-med),
        transform var(--transition-fast);
    }

    .donate-cta:hover,
    .donate-cta:focus-visible {
      background: #89764B;
      border-color: #89764B;
      color: #ffffff;
      transform: translateY(-1px);
    }

    .donate-cta .cta-sub {
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: none;
      opacity: 0.75;
    }

    /* Trust signals */
    .widget-trust {
      padding: var(--space-sm) var(--space-lg);
      border-top: 1px solid var(--color-border);
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .trust-item {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.67rem;
      line-height: 1.5;
      color: var(--color-text-muted);
    }

    .trust-item svg {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      color: var(--color-taupe);
      /* Center the 14px icon on the first line's cap-height so it
         visually aligns with the top line of text, not the block centre. */
      margin-top: calc((1.5em - 14px) / 2 + 1px);
    }

    /* ─────────────────────────────────────────────
       WIDGET SUCCESS STATE
    ───────────────────────────────────────────── */
    .widget-success {
      display: none;
      padding: var(--space-xl) var(--space-lg);
      text-align: center;
      flex-direction: column;
      align-items: center;
      gap: var(--space-md);
    }

    .widget-success.is-visible { display: flex; }

    .success-icon {
      width: 56px;
      height: 56px;
      background: var(--color-taupe);
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .success-icon svg { width: 28px; height: 28px; }

    .widget-success h3 {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      color: var(--color-dark);
    }

    .widget-success p {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    /* ─────────────────────────────────────────────
       CONTENT COLUMN
    ───────────────────────────────────────────── */

    /* ── Hero Carousel ── */
    .hero-block {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: var(--space-xl);
      aspect-ratio: 16 / 9;
      min-height: 320px;
      background: var(--color-dark);
    }

    /* Banner logo button (top-left of hero-block).
       Default: black pill with full SOSA wordmark.
       Scrolled (.is-scrolled): fixed top-left of viewport, black circle with
       just the SOSA mark.
       Hidden at ≤768px since mobile-donate-bar already covers that. */
    .banner-logo-btn {
      position: absolute;
      top: var(--space-md);
      left: var(--space-md);
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 32px 8px 16px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      text-decoration: none;
      transition: background 0.2s ease;
    }
    .banner-logo-btn:hover {
      background: rgba(26, 26, 26, 0.55);
    }
    .banner-logo-btn__full {
      display: block;
      height: 80px;
      width: auto;
    }
    .banner-logo-btn__circle { display: none; }

    /* Slide track. `border-radius: inherit` + `overflow: hidden` makes the
       slides themselves respect the hero-block's rounded corners, working
       around a Chrome/Safari issue where absolutely-positioned children with
       background-image (slides 2 & 3) can paint past the parent's rounded
       overflow mask, making the top corners look square. */
    .hero-slides {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      overflow: hidden;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.9s ease;
      pointer-events: none;
      border-radius: inherit;
      overflow: hidden;
    }
    .hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

    @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

    /* Image slides */
    .hero-image {
      width: 100%; height: 100%;
      background-color: var(--color-dark);
      background-size: cover;
      background-position: center 30%;
    }
    .hero-image--1 {
      background-image: url('../images/make%20more%20opera%20possible.jpg');
      background-position: center 20%;
    }
    .hero-image--2 {
      background-image: url('../images/opera%20belongs%20here.jpg');
      background-position: center 30%;
    }

    /* YouTube cover-fill: iframe is 16:9 inside a 16:7 container — natural height overflow centred */
    .hero-video-wrap { position: absolute; inset: 0; overflow: hidden; }
    .hero-yt-iframe {
      position: absolute;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 100%;
      top: 50%; left: 0;
      transform: translateY(-50%);
      border: none;
      pointer-events: none;
    }

    /* Navigation dots */
    .hero-dots {
      position: absolute;
      bottom: var(--space-md);
      right: var(--space-md);
      display: flex;
      gap: 8px;
      z-index: 10;
    }
    .hero-dot {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: none;
      border: none;
      padding: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-dot svg { width: 20px; height: 20px; overflow: visible; }

    .dot-track {
      fill: none;
      stroke: rgba(255,255,255,0.3);
      stroke-width: 1.5;
    }
    .dot-progress {
      fill: none;
      stroke: #89764B;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 43.98;
      stroke-dashoffset: 43.98;
      transform: rotate(-90deg);
      transform-origin: 10px 10px;
    }
    .dot-fill {
      fill: rgba(255,255,255,0.4);
    }
    .hero-dot.is-active .dot-fill {
      fill: #89764B;
    }

    @keyframes dot-ring {
      from { stroke-dashoffset: 43.98; }
      to   { stroke-dashoffset: 0; }
    }
    .hero-dot.is-active .dot-progress {
      animation: dot-ring 6s linear forwards;
    }
    .hero-dot:focus-visible { outline: 2px solid #89764B; outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) { .hero-dot .dot-progress { animation: none; } }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        to top,
        rgba(10,10,10,0.80) 0%,
        rgba(10,10,10,0.35) 50%,
        rgba(10,10,10,0.10) 100%
      );
    }

    .hero-text {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      padding: var(--space-lg) var(--space-xl) var(--space-sm);
      color: var(--color-white);
    }

    .hero-text .eyebrow {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-style: normal;
      color: #ffffff;
      margin-bottom: 0.5rem;
    }

    .hero-text h1,
    .hero-text h2 {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.1;
      text-shadow: 0 2px 16px rgba(0,0,0,0.5);
      max-width: 820px;
      text-transform: uppercase;
      padding-bottom: var(--space-sm);
      margin: 0;
    }

    .hero-text .hero-blurb {
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 1.55;
      color: #ffffff;
      max-width: 560px;
      text-shadow: 0 1px 10px rgba(0,0,0,0.5);
      margin: 0;
      padding-bottom: var(--space-lg);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Scroll-reveal: elements that the JS marks with .scroll-reveal start
       below their final position with 0 opacity, then fade up + slide into
       place when IntersectionObserver toggles .is-revealed. Desktop only
       (the JS skips on ≤1200px and on reduced-motion). */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
    }
    .scroll-reveal.is-revealed {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-reveal,
      .scroll-reveal.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* Cross-fade stage: both layers occupy the same grid cell so they overlap.
       A min-height keeps the cell stable across slides so the eyebrow above
       the stage does NOT shift as blurbs of different lengths swap in. Layers
       align to the start of the cell so content is top-anchored. */
    .hero-text-stage {
      display: grid;
      grid-template-areas: "stage";
      min-height: 16rem;
    }
    .hero-text-layer {
      grid-area: stage;
      align-self: start;
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
      pointer-events: none;
    }
    .hero-text-layer.is-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Section titles */
    .section-title {
      font-family: var(--font-body);
      font-size: 1.5rem;
      font-weight: 400;
      color: #000000;
      text-transform: uppercase;
      line-height: 1.08;
      margin-bottom: var(--space-md);
    }

    /* Impact intro */
    .impact-intro {
      margin-bottom: var(--space-md);
      padding: 2.5rem 0 0 var(--space-xl);
    }

    .impact-intro-inner {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: calc(var(--space-xl) * 1.5);
      align-items: start;
    }

    .support-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 0.5rem;
    }

    .support-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-family: var(--font-body);
      font-size: 18px;
      color: #000000;
      line-height: 1.5;
    }

    .support-tick {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      color: #89764B;
      margin-top: 1px;
    }

    .support-tick svg {
      width: 22px;
      height: 22px;
    }

    .impact-lede {
      font-family: 'NeueHaasGrotTextRound-56Italic', var(--font-body);
      font-style: italic;
      font-size: 18px;
      line-height: 1.8;
      color: #000000;
      max-width: 720px;
      margin: 0 0 calc(var(--space-xl) * 1.25);
    }
    .impact-lede strong {
      font-weight: 700;
      font-style: italic;
    }

    /* Impact rows — alternating image + content */
    .impact-rows {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-xl) * 1.25);
    }

    .impact-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: center;
    }
    .impact-row--image-right .impact-row-image { order: 2; }
    .impact-row--image-right .impact-row-content { order: 1; }

    .impact-row-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: #000;
      border-radius: 18px;
    }
    .impact-row-image img {
      width: 100%;
      /* Image is 15% taller than the container and pulled up 7.5% so the
         excess sits evenly above and below the visible square. JS then nudges
         it via translate3d on scroll for a subtle parallax effect, staying
         within the overflow without revealing the dark background. */
      height: 115%;
      object-fit: cover;
      display: block;
      margin-top: -7.5%;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce) {
      .impact-row-image img {
        height: 100%;
        margin-top: 0;
        will-change: auto;
        transform: none !important;
      }
    }

    .impact-row-content {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .impact-row-eyebrow {
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #89764B;
    }

    .impact-row-title {
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 700;
      color: #111111;
      line-height: 1.2;
      margin: 0;
    }

    .impact-row-body {
      font-family: var(--font-body);
      font-size: 16px;
      color: #4a4a4a;
      line-height: 1.6;
      margin: 0;
    }

    .impact-row-stat {
      display: flex;
      align-items: baseline;
      gap: 0.85rem;
      padding-top: 1rem;
      border-top: 1px solid #d8d3ca;
      margin-top: 0.5rem;
    }
    .impact-row-num {
      font-family: var(--font-heading);
      font-size: 2.5rem;
      font-weight: 700;
      color: #111111;
      line-height: 1;
    }
    .impact-row-num sup {
      font-size: 0.5em;
      font-weight: 700;
      vertical-align: super;
    }
    .impact-row-label {
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #89764B;
    }

    /* Impact tiers */
    .impact-tiers {
      margin-bottom: var(--space-xl);
      padding: 2.5rem 0 2rem var(--space-xl);
    }

    .tiers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
    }

    .tier-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1.5px solid #e8e3db;
      padding: 1.25rem;
      cursor: pointer;
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .tier-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(137,118,75,0.12);
      border-color: #89764B;
    }

    .tier-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 0.75rem;
    }

    .tier-icon-bubble {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #f5f0e8;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tier-icon-bubble svg {
      width: 20px;
      height: 20px;
      color: #89764B;
    }

    .tier-amount {
      font-family: var(--font-body);
      font-size: 2rem;
      font-weight: 700;
      color: #89764B;
      line-height: 1;
    }

    .tier-amount sup {
      font-size: 0.55em;
      vertical-align: super;
      font-weight: 700;
    }

    /* Tier card headlines (Friend / Supporter / etc.) hidden in "Your gift in
       action" at all break points; aria-label on the card preserves the name
       for assistive tech. */
    .tier-card .tier-headline { display: none; }
    .tier-headline {
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 0.4rem;
      line-height: 1.3;
    }

    .tier-body {
      font-size: 16px;
      color: #4a4a4a;
      line-height: 1.6;
    }

    /* Pull quote carousel */
    .pull-quote {
      margin-bottom: calc(var(--space-xl) * 2);
      margin-left: var(--space-xl);
      display: flex;
      align-items: center;
      gap: var(--space-lg);
    }

    .quote-avatar-wrap {
      position: relative;
      width: 110px;
      height: 110px;
      flex-shrink: 0;
    }

    .quote-avatar {
      position: absolute;
      top: 0;
      left: 0;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      background: #f0ece4;
      transition: opacity 0.4s ease;
    }

    .quote-body {
      flex: 1;
      min-width: 0;
      border-left: 3px solid #89764B;
      padding-left: var(--space-lg);
    }

    /* All slides live in a single grid cell so the track auto-sizes to the
       tallest quote. The visible slide is .is-active (opacity 1); inactive
       ones stay in layout with opacity 0 — this keeps the section height
       fixed across slide changes so content below doesn't jump. */
    .quote-track {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
    }

    .quote-slide {
      grid-area: 1 / 1;
      opacity: 0;
      pointer-events: none;
    }

    .quote-slide.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .quote-slide.is-entering {
      animation: quoteSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .quote-slide.is-entering.dir-down {
      animation: quoteSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .quote-slide.is-exiting {
      animation: quoteSlideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .quote-slide.is-exiting.dir-down {
      animation: quoteSlideOutDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes quoteSlideUp {
      from { opacity: 0; transform: translateY(60px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes quoteSlideOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-60px); }
    }

    @keyframes quoteSlideDown {
      from { opacity: 0; transform: translateY(-60px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes quoteSlideOutDown {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(60px); }
    }

    .pull-quote blockquote {
      font-family: 'NeueHaasGrotTextRound-56Italic', var(--font-body);
      font-style: italic;
      font-size: 1.25rem;
      line-height: 1.7;
      color: #000000;
      margin: 0;
      padding: 0;
    }

    .pull-quote cite {
      display: block;
      font-family: var(--font-body);
      font-style: normal;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #4a4a4a;
      margin-top: var(--space-sm);
    }

    .quote-nav {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      flex-shrink: 0;
      align-self: center;
    }

    .quote-nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1.5px solid #b0b0b0;
      border-radius: 50%;
      background: transparent;
      color: #4a4a4a;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    .quote-nav-btn:hover {
      border-color: #89764B;
      color: #89764B;
      background: #faf7f2;
    }

    /* Tab section */
    .tab-section {
      margin-bottom: var(--space-xl);
      padding-left: var(--space-xl);
    }

    .tab-bar-wrap {
      display: flex;
      align-items: center;
      border-top: 1.5px solid #d0d0d0;
      margin-bottom: 0;
      gap: 0.5rem;
      position: relative;
    }

    .tab-indicator {
      position: absolute;
      top: -1.5px;
      height: 2.5px;
      background: #89764B;
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    .tab-bar {
      display: flex;
      align-items: flex-start;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      flex: 1;
    }
    .tab-bar::-webkit-scrollbar { display: none; }

    .tab-btn {
      background: none;
      border: none;
      padding: 1.75rem 1.25rem 1.25rem;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #707070;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      transition: color 0.2s ease;
    }
    /* Slightly larger tab labels on desktop only; tablet/mobile keep the
       smaller default (and the ≤480px override stays in place). */
    @media (min-width: 1201px) {
      .tab-btn { font-size: 0.95rem; }
    }

    .tab-btn:hover { color: #000000; }

    .tab-btn.is-active {
      color: #000000;
      font-weight: 700;
    }

    .tab-scroll-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border: 1.5px solid rgba(0,0,0,0.15);
      border-radius: 50%;
      background: #ffffff;
      color: #4a4a4a;
      cursor: pointer;
      padding: 0;
      transition: border-color 0.2s, color 0.2s;
    }
    .tab-scroll-btn:hover { border-color: #89764B; color: #89764B; }

    .tab-panels { margin-top: 0; position: relative; }

    .tab-panel {
      display: none;
      border-radius: 12px;
      overflow: hidden;
      background: #000000;
      margin-top: 0.5rem;
    }
    .tab-panel.is-active { display: flex; }

    .tab-panel-img {
      flex: 0 0 48%;
      min-height: 320px;
      background-size: cover;
      background-position: center;
    }

    .tab-panel-body {
      flex: 1;
      padding: 6rem 4.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
    }

    .tab-panel-title {
      font-family: var(--font-body);
      font-size: 1.4rem;
      font-weight: 700;
      color: #89764B;
      margin: 0;
    }

    .tab-panel-body p {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.8;
      color: rgba(255,255,255,0.75);
      margin: 0;
    }

    .tab-panel-cta {
      display: inline-block;
      padding: 0.6rem 1.5rem;
      border: 1.5px solid #89764B;
      border-radius: 50px;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 600;
      color: #89764B;
      text-decoration: none;
      align-self: flex-start;
      transition: background 0.2s, color 0.2s;
    }
    .tab-panel-cta:hover { background: #89764B; color: #fff; }

    .tab-panel-nav {
      position: absolute;
      bottom: 1.5rem;
      right: 1.5rem;
      display: flex;
      gap: 0.5rem;
      z-index: 10;
    }

    .tab-panel-nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      background: transparent;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }

    .tab-panel-nav-btn:hover {
      border-color: #89764B;
      color: #89764B;
    }

    .tab-panel-callout {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 1rem 1.25rem;
      background: #ede9e0;
      border-left: 3px solid #89764B;
      border-radius: 4px;
    }

    .tab-panel-callout strong {
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #000000;
    }

    .tab-panel-callout span {
      font-family: var(--font-body);
      font-size: 0.85rem;
      color: #4a4a4a;
      line-height: 1.6;
    }

    /* Info cards */
    .info-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin: 2rem 0 2rem var(--space-xl);
    }

    .info-card {
      background: #e7e9eb;
      border: none;
      border-radius: 16px;
      padding: 2rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      position: relative;
    }

    .info-card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .info-card-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      background: #89764B;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .info-card-icon svg {
      width: 22px;
      height: 22px;
      color: #ffffff;
    }

    .info-card-title {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 400;
      color: #000000;
      margin: 0;
    }

    .info-card-body {
      font-family: var(--font-body);
      font-size: 16px;
      color: #4a4a4a;
      line-height: 1.65;
      margin: 0;
    }

    .info-card-phone {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      color: #4a4a4a;
      margin: 0;
    }
    .info-card-phone a {
      color: inherit;
      text-decoration: none;
    }

    .info-card-link {
      color: #89764B;
      text-decoration: underline !important;
    }

    .info-card-link:hover { color: #56451c; }

    /* Why matters */
    .why-matters {
      margin-bottom: var(--space-xl);
      padding: 2rem 0 2rem var(--space-xl);
    }

    .reasons-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-lg);
    }

    .reason-item {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .reason-icon {
      width: 64px;
      height: 64px;
      background: #f0ece4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .reason-icon svg {
      width: 26px;
      height: 26px;
      color: #89764B;
    }

    .reason-item h3 {
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 700;
    }

    .reason-item p {
      font-size: 16px;
      color: #4a4a4a;
      line-height: 1.65;
    }

    /* ─────────────────────────────────────────────
       HELPING GROW OPERA — 3 cards under the hero banner
       Arrow-head sits at the top of the cards strip, points UP, and
       overlaps the bottom edge of the banner above (negative top
       reaches above .grow-cards into the gap and into .hero-block).
       JS writes --grow-arrow (0, 1, 2) to slide it horizontally. */
    .grow-cards {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      /* Pull tight against the hero banner above. Left padding aligns the
         first card's vertical line with the section-title left edge. */
      margin: calc(-1 * var(--space-xl) + var(--space-md)) 0 var(--space-xl);
      padding-left: var(--space-xl);
      background: transparent;
    }
    /* Triangle pointing UP into the banner — same colour as the page
       background so it reads as a "notch" cut out of the banner image. */
    .grow-cards::before {
      content: '';
      position: absolute;
      top: calc(-1 * var(--space-lg));
      left: calc(var(--space-xl) + (var(--grow-arrow, 0) + 0.5) * (100% - var(--space-xl)) / 3 - 14px);
      width: 0;
      height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-bottom: 18px solid var(--color-bg);
      z-index: 5;
      transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    .grow-card {
      position: relative;
      padding: 1.5rem 1.25rem;
      display: grid;
      grid-template-columns: 44px 1fr;
      grid-template-areas:
        "icon  text"
        "body  body";
      column-gap: 1rem;
      row-gap: 0.75rem;
      cursor: pointer;
    }
    .grow-card:focus-visible {
      outline: 2px solid #89764B;
      outline-offset: 2px;
    }
    .grow-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14px;
      bottom: 14px;
      width: 3px;
      background: #E8E3DB;
      transition: background 0.35s ease;
    }
    .grow-card.is-active::before {
      background: #89764B;
    }

    .grow-card-icon {
      grid-area: icon;
      width: 44px;
      height: 44px;
      background: #f5f0e8;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #89764B;
      align-self: start;
      transition: background 0.35s ease, color 0.35s ease;
    }
    .grow-card.is-active .grow-card-icon {
      background: #89764B;
      color: #ffffff;
    }
    /* Force every icon SVG into the same drawable square — this keeps the
       three icons (different shapes) visually equivalent in weight. */
    .grow-card-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }
    /* Wrapper so num + title always render as one tight stack in the same
       grid cell as the icon's right neighbour. Vertically centred against
       the icon (which is taller than 1-line titles), so cards 01 and 03
       stop drifting up against the icon's top edge. */
    .grow-card-text {
      grid-area: text;
      align-self: center;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
    }
    .grow-card-num {
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      color: #89764B;
      letter-spacing: 0.06em;
    }
    .grow-card-title {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      color: #111111;
      line-height: 1.25;
      margin: 0;
    }
    .grow-card-body {
      grid-area: body;
      font-size: 16px;
      color: #4a4a4a;
      line-height: 1.6;
      margin: 0.5rem 0 0;
    }

    /* Tax callout */
    .tax-callout {
      margin-left: var(--space-xl);
      background: transparent;
      color: #000000;
      border-radius: 0;
      border-top: 1.5px solid #b0b0b0;
      padding: var(--space-md) 0;
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .tax-callout svg {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      color: #89764B;
    }

    .tax-callout-text strong {
      display: block;
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 700;
      color: #000000;
      margin-bottom: 0.2rem;
    }

    .tax-callout-text span {
      font-size: 15px;
      color: #4a4a4a;
    }

    /* ─────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────── */
    .site-footer {
      background: #000000;
      color: rgba(255,255,255,0.7);
      font-family: var(--font-body);
      padding: var(--space-xl) 0;
    }

    .footer-main {
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.75fr 1fr 0.55fr;
      gap: 0;
      padding: 2rem 0;
    }

    .footer-col {
      padding: 0 var(--space-xl) 0 1.75rem;
      position: relative;
      border-right: 3px solid rgba(255,255,255,0.6);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
    }
    .footer-col:last-child { border-right: none; }

    /* Shorten the divider between the Logo and Newsletter columns so it only
       reaches the Subscribe button's height. The divider between Newsletter
       and Contact Us stays full height. */
    .footer-col--logo {
      border-right: none;
    }
    .footer-col--logo::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 3px;
      height: 95px;
      background: rgba(255,255,255,0.6);
    }

    .footer-logo img {
      height: 80px;
      width: auto;
      /* Local sosa-logo.svg is already white — no filter needed */
    }

    .footer-col-heading {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #ffffff;
      margin-bottom: var(--space-md);
    }

    .footer-newsletter {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      width: 100%;
    }

    .footer-email-input {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      color: #ffffff;
      font-family: var(--font-body);
      font-size: 0.82rem;
      outline: none;
      transition: border-color var(--transition-fast);
    }
    .footer-email-input::placeholder { color: rgba(255,255,255,0.35); }
    .footer-email-input:focus { border-color: #89764B; }

    .footer-subscribe-btn {
      align-self: flex-start;
      background: #89764B;
      color: #000000;
      border: none;
      border-radius: 50px;
      padding: 0.65rem 1.5rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .footer-subscribe-btn:hover { background: #a08a5e; }

    .footer-contact-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .footer-contact-links a {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.7);
      transition: color var(--transition-fast);
    }
    .footer-contact-links a:hover { color: #ffffff; }

    .footer-bottom {
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.75fr 1fr 0.55fr;
      gap: 0;
    }

    .footer-credit {
      font-size: 0.75rem;
      color: var(--color-footer-sub);
      padding: 0 var(--space-xl) 0 1.75rem;
      border-right: 3px solid rgba(138,141,143,0.6);
      text-align: left;
    }

    .footer-bottom-center {
      padding: 0 var(--space-xl) 0 1.75rem;
      border-right: 3px solid rgba(138,141,143,0.6);
      text-align: left;
    }

    .footer-copy {
      font-size: 0.75rem;
      color: var(--color-footer-sub);
    }

    .footer-social {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: flex-start;
      padding: 0 var(--space-xl) 0 1.75rem;
    }

    .footer-social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--color-footer-sub);
      border-radius: 50%;
      color: var(--color-footer-sub);
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .footer-social-link:hover {
      color: #ffffff;
      border-color: #ffffff;
    }
    .footer-social-link svg {
      width: 20px;
      height: 20px;
    }

    /* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
    @media (max-width: 1329px) {
      .header-nav, .header-actions { display: none; }

      /* Hide the site header entirely on mobile — everything shifts up */
      .site-header { display: none; }

      .donation-page {
        display: flex;
        flex-direction: column;
        padding: 0 var(--space-md) var(--space-xl);
        gap: var(--space-md);
      }

      .widget-column,
      .content-column {
        flex: 0 0 100%;
        width: 100%;
        order: unset;
      }

      /* Flatten content-column so hero-block can sit above the widget on mobile */
      .content-column {
        display: contents;
      }

      /* Mobile stack order: hero → why-support → impact-tiers → donation form → rest */
      /* Banner edge-to-edge: rounded top, square bottom */
      .hero-block    {
        order: -3;
        width: calc(100% + 2 * var(--space-md));
        max-width: none;
        margin-left:  calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        margin-bottom: 0;
        box-sizing: border-box;
        border-radius: 20px 20px 0 0;
      }

      /* Move hero slide indicator dots to the top-right corner on mobile */
      .hero-dots {
        top: var(--space-md);
        right: var(--space-md);
        bottom: auto;
      }

      /* Banner text shifted right to align with the indented body content below */
      .hero-text {
        padding-left:  calc(var(--space-xl) + var(--space-md));
        padding-right: calc(var(--space-xl) + var(--space-md));
      }
      /* Hide blurb on tablet/mobile — desktop only */
      .hero-text .hero-blurb { display: none; }
      /* Stage no longer needs a tall min-height once the blurb is hidden */
      .hero-text-stage { min-height: 0; }
      .impact-intro  { order: -2; }
      .impact-tiers  { order: -1; }
      .widget-column { order: 0; }

      /* Same top breathing room as "Your Gift in Action" — spacing only */
      .widget-column,
      .impact-tiers,
      .pull-quote,
      .tab-section,
      .why-matters,
      .tax-callout {
        margin-top: 40px;
      }

      /* Frequency pills on one line from tablet down */
      .frequency-pills,
      .donor-type-pills {
        flex-wrap: nowrap;
      }
      .frequency-pills label,
      .donor-type-pills label {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.5rem;
        font-size: 0.66rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
      }

      /* Unify rounded corners across major cards on mobile
         (hero-block intentionally excluded — banner is edge-to-edge, no radius) */
      .donation-widget,
      .tier-card,
      .reason-card,
      .info-card,
      .tab-section,
      .tax-callout,
      .pull-quote {
        border-radius: var(--radius-lg);
      }

      .widget-sticky-wrapper {
        position: relative;
        top: auto;
        max-height: none;
        overflow: visible;
      }

      /* Tablet: 2-col for tiers/reasons, stacked impact intro */
      .tiers-grid,
      .reasons-grid { grid-template-columns: repeat(2, 1fr); }

      .impact-intro-inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }

      .impact-intro {
        padding: 0.25rem var(--space-xl) 0;
      }
      /* Tighten the lede's tail margin on mobile so the section doesn't
         leave a tall gap before the impact rows below. */
      .impact-lede {
        margin: 0 0 var(--space-md);
      }
      /* Drop the browser's default h2 margin-top inside .impact-intro so
         the gap between the carousel's bottom border and the
         "Where your gift makes possible" title collapses to just the
         donation-page flex gap (the usual section spacing on mobile). */
      .impact-intro .section-title {
        margin-top: 0;
      }

      /* Stack impact rows on mobile: image always on top, content (eyebrow,
         title, body, stat) below — regardless of whether the desktop layout
         had the image on the left or right. For "--image-right" rows the
         DOM order is content → image, so force image to render first via
         a negative order. */
      .impact-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }
      .impact-row--image-right .impact-row-image {
        order: -1;
      }
      .impact-row--image-right .impact-row-content {
        order: 0;
      }
      .impact-row-title { font-size: 1.15rem; }
      .impact-row-num { font-size: 1.6rem; }
      .impact-row-eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; }
      .impact-row-label   { font-size: 0.62rem; letter-spacing: 0.06em; }
      /* Match the mobile card-body type scale used by .grow-card-body /
         .tier-body / .reason-item p (~14.5px, tighter line-height). */
      .impact-row-body {
        font-size: 0.763rem;
        line-height: 1.55;
      }
      .impact-rows { gap: calc(var(--space-xl) * 0.85); }

      /* Divider line: 20px breathing room above and below on mobile */
      /* Zero out per-section bottom margins so the donation-page flex gap
         (var(--space-md)) alone controls inter-section spacing. */
      .impact-intro,
      .impact-tiers,
      .why-matters,
      .tab-section,
      .tax-callout,
      .pull-quote,
      .info-cards {
        margin-bottom: 0;
      }

      .impact-tiers,
      .why-matters,
      .tab-section,
      .tax-callout,
      .pull-quote,
      .info-cards {
        padding-left: 0;
        margin-left: 0;
      }

      /* Align section titles + text content to where the banner text starts */
      .impact-tiers .section-title,
      .why-matters  .section-title {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
      }
      .tax-callout {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
      }

      /* Tab panel: stack image above body on narrower screens (card layout) */
      .tab-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tab-panels {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tab-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tab-panel.is-active { flex-direction: column; }
      .tab-panel-img {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 10;
      }
      .tab-panel-body {
        width: 100%;
        box-sizing: border-box;
        padding: 2.5rem 2rem 4.5rem;
      }

      .form-row { grid-template-columns: 1fr; }
    }

    /* ── Mid-range viewports: scale entire page to 80% — equivalent to browser zoom 80% ── */
    @media (min-width: 1330px) and (max-width: 1750px) {
      html { zoom: 0.8; }
    }

    @media (max-width: 1329px) {
      /* Banner text aligned with indented body content below (2 × var(--space-md)) */
      .hero-text {
        padding: var(--space-md) calc(var(--space-md) * 2) var(--space-sm);
      }
      .hero-block { aspect-ratio: 4 / 3; min-height: 260px; }
      .amount-grid { grid-template-columns: repeat(2, 1fr); }

      /* Helping Grow Opera cards on mobile: a one-at-a-time horizontal
         carousel that follows the hero slide index. JS sets --grow-current
         on .grow-cards (0/1/2); each card translates by -100% * that value,
         so the active card slides in from the right while the previous one
         slides out left. Sits directly under the hero banner via order: -2
         (hero is -3; same value as impact-intro but DOM-earlier so wins). */
      .grow-cards {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        overflow: hidden;
        border-top: none;
        /* Bottom hairline divider visible at carousel widths (mobile +
           iPad Mini portrait) — separates the grow-cards from the
           "What your gift makes possible" block below. iPad Air/Pro 3-up
           grid still overrides this to none in the 820–1329 query. */
        border-bottom: 1px solid #e8e3db;
        padding-left: 0;
        margin-bottom: 0;
        order: -2;
        touch-action: pan-y;
      }
      .grow-cards::before { display: none; }
      .grow-card {
        flex: 0 0 100%;
        box-sizing: border-box;
        padding: 2rem 1.25rem 1.25rem;
        transform: translateX(calc(-100% * var(--grow-current, 0)));
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .grow-card::before { display: none; }
      /* Match mobile card type scale: title ~15px, body ~14.5px. Force
         min-width: 0 on the body cell so long text wraps inside its grid
         column instead of expanding the cell (CSS Grid items default to
         min-width: auto, which lets content push the cell wider than the
         card). The right padding gives the body the same right inset as
         the lede so it doesn't touch the card's right edge. */
      .grow-card-title {
        font-size: 0.95rem;
        min-width: 0;
      }
      .grow-card-body {
        font-size: 0.763rem;
        line-height: 1.55;
        padding-right: 2.25rem;
        min-width: 0;
        overflow-wrap: anywhere;
      }

      /* Tab carousel: let the browser keep handling vertical pans (page
         scroll) while horizontal swipes are captured by the JS swipe handler
         to switch tabs. Without this, native page scrolling can race with
         the swipe-to-change-tab gesture. */
      .tab-panels {
        touch-action: pan-y;
      }

      /* Force frequency pills onto a single line on all mobile widths */
      .frequency-pills,
      .donor-type-pills {
        flex-wrap: nowrap;
      }
      .frequency-pills label,
      .donor-type-pills label {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.4rem;
        font-size: 0.62rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
      }

      /* Hide the banner logo button on phone — mobile-donate-bar already provides this */
      .banner-logo-btn { display: none; }

      /* Tighter widget padding for small screens */
      .widget-body { padding: var(--space-md) var(--space-md) var(--space-md); }
      .widget-trust { padding: var(--space-sm) var(--space-md); }

      /* Collapse tiers + reasons to single column on phone with tighter gap */
      .tiers-grid,
      .reasons-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
      }

      /* Compact tier card on mobile — new layout (headline now hidden):
         row 1 = $amount (left corner) ............ icon (right corner)
         row 2 = description (full width)                              */
      .tier-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .tier-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
        gap: 0.6rem;
      }
      .tier-body {
        font-size: 0.763rem;  /* ~14.5px at 19px root */
        line-height: 1.35;
      }

      /* Reason cards ("Three reasons to give today"): match tier-card mobile type */
      .reason-item h3 {
        font-size: 16px;
      }
      .reason-item p {
        font-size: 0.763rem;  /* ~14.5px at 19px root */
        line-height: 1rem;
      }
      /* Smaller icon bubble + align card content with the section heading */
      .reasons-grid {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        gap: 1.75rem;
      }
      .reason-icon {
        width: 48px;
        height: 48px;
      }
      .reason-icon svg {
        width: 20px;
        height: 20px;
      }

      /* Shrink tier-name (Friend / Supporter / etc.) inside the widget amount buttons */
      .amount-btn .tier-name {
        font-size: 0.5rem;
        letter-spacing: 0.05em;
      }

      /* Info cards ("By Phone" / "Direct Deposit"): match tier-body / reason-item p */
      .info-card-body {
        font-size: 0.763rem;  /* ~14.5px at 19px root */
        line-height: 1.35;
      }
      .info-card-phone {
        font-size: 0.763rem;
      }

      /* Tax callout: title slightly smaller + description matches card body */
      .tax-callout-text strong {
        font-size: 16px;
      }
      .tax-callout-text { line-height: 1rem; }
      .tax-callout-text span {
        font-size: 0.763rem;  /* ~14.5px */
        line-height: 1rem;
      }
      /* Widget amount buttons ($25 / $50 / $100 / $1,000 selector pills) */
      .amount-btn .tier-amount {
        font-size: 1.45rem;   /* ~27.5px at 19px root */
        line-height: 1;
      }
      /* YOUR GIFT IN ACTION cards — larger amount, prominent */
      .tier-card .tier-amount {
        font-size: 1.65rem;   /* ~31.4px at 19px root */
        line-height: 1;
      }
      .tier-amount sup {
        font-size: 0.55em;
      }
      .tier-icon-bubble {
        width: 38px;
        height: 38px;
      }
      .tier-icon-bubble svg {
        width: 18px;
        height: 18px;
      }

      /* Remove left padding/margins on content sections */
      .impact-intro { padding: 0.75rem var(--space-md) 0; }
      .impact-tiers { padding: 0; }
      .why-matters { padding: 0; }


      /* Align section titles + text content to banner text on phone */
      .impact-tiers .section-title,
      .why-matters  .section-title {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }
      .tax-callout {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }

      /* Shrink bullet tick icons on mobile */
      .support-tick,
      .support-tick svg { width: 18px; height: 18px; }

      /* Keep mobile body text at 14.5px (desktop stays at 18px base) */
      .support-list li,
      .impact-lede { font-size: 0.763rem; }
      .pull-quote {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
      }
      /* Avatar centered on mobile */
      .quote-avatar-wrap {
        width: 80px;
        height: 80px;
        align-self: center;
      }
      .quote-avatar { width: 80px; height: 80px; }
      .quote-body { padding-left: var(--space-md); }
      .pull-quote blockquote { font-size: 0.85rem; line-height: 1.55; }
      .pull-quote cite {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
      }
      /* Nav buttons aligned to the right edge on mobile */
      .quote-nav {
        flex-direction: row;
        align-self: flex-end;
      }

      .tab-section {
        padding-left: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }
      .tab-bar-wrap { gap: 0; }
      .tab-bar { gap: 0; }
      .tab-btn { padding: 0.9rem 0.6rem 0.75rem; font-size: 0.68rem; letter-spacing: 0.02em; }
      .tab-panel { width: 100%; max-width: 100%; box-sizing: border-box; }
      .tab-panel-body { width: 100%; box-sizing: border-box; padding: 2rem 1.5rem 4rem; }
      .tab-panel-body p { font-size: 0.763rem; line-height: 1.7; }
      .tab-panel-nav { bottom: 1rem; right: 1rem; }

      .info-cards { margin-left: 0; grid-template-columns: 1fr; gap: 1rem; }
      .info-card { padding: 1.5rem 1.25rem; }

      .why-matters { padding: 0; }
      .tax-callout {
        margin-top: var(--space-md);
        margin-left: 0;
        flex-direction: column;
        text-align: center;
        border-top: 1.5px solid #b0b0b0;
        border-radius: 0;
        padding: var(--space-md) 0 0;
        gap: 0.65rem;
      }
      .tax-callout-text,
      .tax-callout-text span { line-height: 1rem; }
      .tax-callout-text strong { margin-bottom: 0.65rem; }

      /* Section title sizing */
      .section-title { font-size: 1.5rem; }

      /* Footer: collapse to single column */
      .footer-main {
        grid-template-columns: 1fr;
        padding: 0;
      }
      .footer-col {
        padding: var(--space-md);
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
      }
      .footer-col--logo {
        padding-top: 0.6rem;
        padding-bottom: 1.25rem;
      }
      .site-footer { padding-top: var(--space-md); }
      .footer-col:last-child { border-bottom: none; }
      /* Hide the desktop capped-divider pseudo-element on mobile */
      .footer-col:not(:last-child)::after { display: none; }
      .footer-bottom {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }
      .footer-credit,
      .footer-bottom-center,
      .footer-social {
        padding: 0 var(--space-md);
        border-right: none;
      }
    }

    /* Tablet view (769–1200px): banner top corners sharp (was 20px rounded). */
    @media (min-width: 769px) and (max-width: 1200px) {
      .hero-block {
        border-radius: 0;
      }
    }

    /* 820–1329px (iPad Air + narrow desktop): lay the four "Where your gift
       makes possible" impact rows out as a 2 × 2 grid. Each card keeps the
       mobile single-column stack (image on top, content below) inherited
       from the block above. Also collapse the "Your Gift in Action" tiers
       from 1-col (mobile) to 2-col in this range. Donate widget is forced
       fully expanded and not sticky in this range.
       Body horizontal padding scales fluidly from ~5% at 820px (iPad Air)
       up to 15% at 1329px so content has room at smaller widths. */
    @media (min-width: 820px) and (max-width: 1329px) {
      .impact-rows {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: start;
      }
      .tiers-grid {
        grid-template-columns: 1fr 1fr;
      }
      /* Disable sticky in this range — overrides both the desktop sticky
         and the desktop-only is-expanded pin-to-top rule. */
      .widget-sticky-wrapper,
      .widget-sticky-wrapper.is-expanded {
        position: static;
        top: auto;
        max-height: none;
      }
      .widget-sticky-wrapper.is-expanded .donation-widget {
        height: auto;
        max-height: none;
      }
      .widget-sticky-wrapper.is-expanded .widget-body {
        overflow: visible;
      }
      /* Restore the desktop footer (cancels the single-column mobile collapse). */
      .site-footer {
        padding: var(--space-xl) 0;
      }
      .footer-main {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 0.55fr);
        padding: 2rem 0;
      }
      .footer-col {
        padding: 0 var(--space-xl) 0 1.75rem;
        border-right: 3px solid rgba(255,255,255,0.6);
        border-bottom: none;
      }
      .footer-col:last-child { border-right: none; }
      .footer-col--logo {
        padding: 0 var(--space-xl) 0 1.75rem;
        border-right: none;
      }
      .footer-col:not(:last-child)::after { display: block; }
      .footer-col--logo::after { display: block; }
      .footer-bottom {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 0.55fr);
        gap: 0;
      }
      .footer-credit,
      .footer-bottom-center {
        padding: 0 var(--space-xl) 0 1.75rem;
        border-right: 3px solid rgba(138,141,143,0.6);
      }
      .footer-social {
        padding: 0 var(--space-xl) 0 1.75rem;
        border-right: none;
      }

      /* Show the banner logo and the descriptive blurb in the hero, like desktop. */
      .banner-logo-btn {
        display: inline-flex;
      }
      .hero-text .hero-blurb {
        display: -webkit-box;
      }
      .hero-text-stage {
        min-height: revert;
      }
      /* Restore the desktop hero-text padding so the "Support State Opera
         South Australia" eyebrow sits in the same place as desktop. */
      .hero-text {
        padding: var(--space-lg) var(--space-xl) var(--space-sm);
      }

      /* "Helping Grow Opera" 3-up cards under the banner — desktop layout
         (grid with vertical dividers + upward arrow), not the mobile carousel.
         Made full-viewport-width via the breakout trick, with no overlap into
         the banner; the arrow sits flush against the banner's bottom edge. */
      .grow-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        border-top: none;
        border-bottom: none;
        padding-left: var(--space-xl);
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: 0;
        margin-bottom: var(--space-xl);
        touch-action: auto;
      }
      .grow-cards::before {
        display: block;
        top: calc(-1 * var(--space-lg));
      }
      .grow-card {
        flex: initial;
        transform: none;
        transition: none;
        padding: 1.5rem 1.25rem;
      }
      .grow-card::before { display: block; }
      .grow-card-title {
        font-size: 0.9rem;
      }
      .grow-card-body {
        font-size: 14px;
        line-height: 1.55;
        padding-right: 0;
      }
      .grow-card-num {
        font-size: 0.75rem;
      }

      /* Tab panel: image-left + dark-content-right, like desktop. Cancels the
         flex-direction: column / 100%-wide image set by the wider mobile block. */
      .tab-panel.is-active {
        flex-direction: row;
      }
      .tab-panel-img {
        flex: 0 0 48%;
        width: auto;
        min-height: 320px;
        aspect-ratio: auto;
      }
      .tab-panel-body {
        padding: 4rem 3rem;
      }
      .tab-panel-body p {
        font-size: 1rem;
        line-height: 1.8;
      }
      .tab-panel-title {
        font-size: 1.4rem;
      }
      .tab-panel-nav {
        bottom: 1.5rem;
        right: 1.5rem;
      }

      /* Horizontal padding on the main content area only — header and
         footer keep their existing full-width layout. The hero banner breaks
         out of this padded area to remain edge-to-edge of the viewport.
         Padding scales linearly from ~5% (≈41px) at 820px up to 15%
         (≈199px) at 1329px via `calc(31vw - 213px)`, with a 2.5rem floor
         so it never collapses to nothing. */
      .donation-page {
        padding-left: max(2.5rem, calc(31vw - 213px));
        padding-right: max(2.5rem, calc(31vw - 213px));
      }
      .hero-block {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
      }

      /* "Three reasons to give today" — 3-up grid like desktop, sharing the
         same left indent as the other section titles (var(--space-md)). */
      .why-matters {
        padding: 2rem var(--space-md);
      }
      .why-matters .section-title {
        padding-left: 0;
        padding-right: 0;
      }
      .reasons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
        padding-left: 0;
        padding-right: 0;
      }
      .reason-icon { width: 64px; height: 64px; }
      .reason-icon svg { width: 26px; height: 26px; }
      .reason-item h3 { font-size: 0.95rem; }
      .reason-item p {
        font-size: 16px;
        line-height: 1.65;
      }

      /* "By Phone" / "Direct Deposit" info cards — 2-up grid like desktop.
         Width/margins locked so tax-callout below can match exactly. */
      .info-cards {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Tax-deductible callout: stack vertically and centered on the page,
         same outer width as the info-cards above. */
      .tax-callout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tax-callout-text strong,
      .tax-callout-text span {
        text-align: center;
      }
    }

    /* iPad Air + iPad Pro tweaks (820–1200px): even 3-col footer everywhere
       in this range; under-banner grow-cards padding tuned per-device.
       Default to 50px (iPad Pro 12.9" portrait, ~1024–1200px). */
    @media (min-width: 820px) and (max-width: 1200px) {
      .footer-main,
      .footer-bottom {
        grid-template-columns: repeat(3, 1fr);
      }
      .grow-cards {
        padding-left: 50px;
        padding-right: 50px;
      }
    }

    /* iPad Air sub-range (820–1023px): tighter card padding (20px) and a
       smaller card title so "Make more opera possible" doesn't wrap to two
       lines at the narrower three-up grid. */
    @media (min-width: 820px) and (max-width: 1023px) {
      .grow-cards {
        padding-left: 20px;
        padding-right: 20px;
      }
      .grow-card-title {
        font-size: 0.8rem;
      }
    }

    /* iPad Mini portrait (744–768px portrait): grow-cards are already a
       swipeable carousel via the base ≤1329 mobile rule, so we just match
       iPad Mini landscape's body/footer 15% padding and straight banner
       top corners (banner kept edge-to-edge via the 100vw breakout). */
    @media (min-width: 744px) and (max-width: 768px) and (orientation: portrait) {
      .donation-page {
        padding-left: 15%;
        padding-right: 15%;
      }
      .site-footer {
        padding-left: 15%;
        padding-right: 15%;
      }
      .hero-block {
        border-radius: 0;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
      }
    }

    /* iPad Mini landscape (1024–1133px landscape): revert grow-cards to the
       single-card swipeable carousel used at narrow widths, instead of the
       3-up grid. Body + footer get 15% horizontal padding, and the banner
       loses its rounded top corners. Orientation gate keeps iPad Pro 12.9"
       portrait (also 1024px) in the grid layout. */
    @media (min-width: 1024px) and (max-width: 1133px) and (orientation: landscape) {
      .donation-page {
        padding-left: 15%;
        padding-right: 15%;
      }
      .site-footer {
        padding-left: 15%;
        padding-right: 15%;
      }
      .hero-block {
        border-radius: 0;
      }
      .grow-cards {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        /* Bottom hairline divider visible at iPad Mini landscape too. */
        border-bottom: 1px solid #e8e3db;
        touch-action: pan-y;
      }
      .grow-cards::before { display: none; }
      .grow-card {
        flex: 0 0 100%;
        transform: translateX(calc(-100% * var(--grow-current, 0)));
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 2rem 1.25rem 1.25rem;
      }
      .grow-card::before { display: none; }
    }

    /* Mobile + iPad Mini (carousel widths): slightly smaller title, tighter
       num→title spacing so the num/title block sits well against the icon's
       44px height; column-gap bumped so there's clear space between icon
       and text; body padding-right zeroed so the description spans further
       right. Body keeps its original left position (spans both columns). */
    @media (max-width: 819px),
           (min-width: 1024px) and (max-width: 1133px) and (orientation: landscape) {
      .grow-card {
        column-gap: 0.85rem;
      }
      .grow-card-title {
        font-size: 0.95rem;
      }
      .grow-card-text {
        gap: 0;
      }
      .grow-card-body {
        padding-right: 0;
      }
    }

    @media (max-width: 480px) {
      /* Kill the grid row-gap so the gap above .grow-card-body is driven
         only by its own margin-top instead of margin + gap. Column-gap is
         set in the wider mobile + iPad Mini rule above. */
      .grow-card {
        row-gap: 0;
      }
      .grow-card-body {
        margin-top: 0.25rem;
      }
      .hero-block {
        aspect-ratio: 4 / 3;
        min-height: 240px;
        /* Negative margins adjusted to match smaller donation-page padding at ≤480 */
        width: calc(100% + 2 * var(--space-sm));
        margin-left:  calc(-1 * var(--space-sm));
        margin-right: calc(-1 * var(--space-sm));
      }
      .hero-text h1,
      .hero-text h2 { font-size: clamp(1.55rem, 6.2vw, 2.05rem); }
      .hero-text .eyebrow { font-size: 0.62rem; }
      /* Align banner text with body text on small phones:
         body text sits at donation-page(var(--space-sm)) + impact-intro(var(--space-md)) from screen */
      .hero-text {
        padding: var(--space-md) calc(var(--space-sm) + var(--space-md)) var(--space-sm);
      }

      .donation-page {
        padding: 0 var(--space-sm) var(--space-lg);
        gap: var(--space-md);
      }

      .frequency-pills,
      .donor-type-pills {
        flex-wrap: nowrap;
      }
      .frequency-pills label,
      .donor-type-pills label {
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        padding: 0.55rem 0.25rem;
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        white-space: nowrap;
      }

      /* Amount grid stays 2-col but tighter gap and padding */
      .amount-grid { gap: 0.5rem; }
      .amount-btn { padding: 0.5rem 0.55rem; }
      .tier-icon { top: 0.5rem; right: 0.5rem; width: 16px; height: 16px; }
      .tier-header { padding-right: 1.4rem; }

      /* Widget body tighter */
      .widget-body {
        padding: var(--space-sm) var(--space-md) var(--space-md);
        gap: var(--space-sm);
      }
      .widget-trust { padding: var(--space-sm) var(--space-md); }

      /* Tier cards in content area */
      .tier-card { padding: 1rem; }
      .amount-btn .tier-amount { font-size: 1.263rem; }  /* ~24px */
      .tier-card .tier-amount  { font-size: 1.25rem; }   /* ~24px */
      .tier-icon-bubble { width: 38px; height: 38px; }
      .tier-icon-bubble svg { width: 18px; height: 18px; }

      /* Section titles */
      .section-title { font-size: 1.3rem; }

      /* Donate CTA — keep readable at small sizes */
      .donate-cta { font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.5rem 0.5rem; }
      .donate-cta .cta-sub { font-size: 0.58rem; }

      /* Form labels */
      .form-field label { font-size: 0.62rem; }

      /* Tab panel body tighter */
      .tab-panel { width: 100%; max-width: 100%; box-sizing: border-box; }
      .tab-panel-body { width: 100%; box-sizing: border-box; padding: 1.5rem 1.25rem 3.75rem; }
      .tab-panel-title { font-size: 1.15rem; }
      .tab-panel-body p { font-size: 0.763rem; line-height: 1.7; }

      /* Info card tighter */
      .info-card { padding: 1.25rem 1rem; }
      .info-card-title { font-size: 1rem; }

      /* Footer logo smaller */
      .footer-logo img { height: 60px; }
    }

    /* Environment banner (non-production deployments) */
    .env-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #f59e0b;
      color: #000;
      text-align: center;
      padding: 0.4rem 1rem;
      font-family: var(--font-ui);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      z-index: 9999;
    }

    .env-banner--warn {
      background: #dc2626;
      color: #fff;
    }

    /* ─────────────────────────────────────────────
       MOBILE STICKY DONATE BAR
       Full brand + DONATE on page load, morphs to DONATE-only on scroll.
       In compact state the bar's size exactly matches .action-btn
       (padding: 0.65rem 1.35rem, font 0.78rem, gap 0.35rem, heart 13×13).
       Hides when the donation form is in view.
    ───────────────────────────────────────────── */
    .mobile-donate-bar {
      display: none;
      position: fixed;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
      transform: translate(-50%, 0);
      z-index: 200;
      align-items: center;
      gap: 1.25rem;
      padding: 0.75rem 0.75rem 0.75rem 0.9rem;
      background: rgba(0, 0, 0, 0.88);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: #ffffff;
      font-family: var(--font-body);
      text-decoration: none;
      border-radius: 999px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.12);
      transition:
        padding 0.35s ease,
        gap 0.35s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
      will-change: opacity, transform, padding;
    }

    /* Brand — uses the local SOSA logo SVG (already white, no filter needed) */
    .mobile-donate-bar__brand {
      display: flex;
      align-items: center;
      max-width: 420px;
      opacity: 1;
      overflow: hidden;
      transition:
        max-width 0.35s ease,
        opacity 0.25s ease,
        margin 0.35s ease;
    }
    .mobile-donate-bar__logo {
      height: 48px;
      width: auto;
      display: block;
    }

    /* DONATE inner pill — always at desktop .action-btn--donate size.
       Only the gold border animates away when the bar morphs to compact. */
    .mobile-donate-bar__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.65rem 1.35rem;
      border: 1.5px solid #89764B;
      border-radius: 999px;
      background: transparent;
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      flex-shrink: 0;
      transition:
        border-color 0.35s ease,
        background var(--transition-fast),
        color var(--transition-fast);
    }
    .mobile-donate-bar__cta svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }

    /* ─── Compact state — EXACT .action-btn dimensions ───
       Brand collapses away, outer bar and inner CTA merge visually
       into a single pill matching the desktop donate button size. */
    .mobile-donate-bar.is-compact {
      gap: 0;
      padding: 0;
    }
    .mobile-donate-bar.is-compact .mobile-donate-bar__brand {
      max-width: 0;
      opacity: 0;
      margin-right: 0;
    }
    .mobile-donate-bar.is-compact .mobile-donate-bar__cta {
      border-color: transparent;
    }

    /* Hidden state — when donation form enters the viewport */
    .mobile-donate-bar.is-hidden {
      opacity: 0;
      transform: translate(-50%, 24px);
      pointer-events: none;
    }

    @media (max-width: 1329px) {
      .mobile-donate-bar { display: inline-flex; }
    }