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

  :root {
    --grey-bar: #555;
    --grey-bar-hover: #444;
    --grey-dark: #111;
    --grey-mid: #666;
    --grey-light: #aaa;
    --grey-lighter: #ccc;
    --grey-panel: #f2f2f2;
    --grey-border: #aaa;
    --white: #fff;
    --font-display: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;
  }

  html, body { height: 100%; }

  body {
    font-family: var(--font-body);
    background: var(--white);
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 48px; /* below fixed nav */
    padding-bottom: 80px; /* above sticky tabs */
    overflow: hidden;
  }

  /* ── LAYOUT ── */
  .site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 20px;
  }

  .content-area {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    gap: 0;
  }

  /* Hero takes all remaining width beside the right panel */
  .hero-block {
    flex: 1;
    background: var(--white);
    border-radius: 8px;
    padding: 16px 32px 24px;
    border: 1.5px solid var(--grey-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    min-height: 200px;
  }

  /* ── TOP NAV ── */
  .topnav {
    height: 48px;
    background: var(--grey-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    flex-shrink: 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
  }
  .topnav .logo {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
  }
  .topnav .links { display: flex; gap: 20px; align-items: center; }
  .topnav .links a {
    color: #eee;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    padding: 4px 0;
  }
  .topnav .links a:hover { color: var(--white); }
  .topnav .links a.active { color: var(--white); border-bottom: 1.5px solid #ccc; }
  .topnav .links a.ext-link {
    color: #ccc;
    font-size: 9px;
    border: 0.5px solid #777;
    padding: 2px 7px;
    border-radius: 2px;
  }
  .topnav .links a.ext-link:hover { color: #fff; border-color: #bbb; }
  .donate-nav-link {
    background: #4caf50;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 2px;
    letter-spacing: 0.08em;
  }
  .donate-nav-link:hover { background: #43a047; color: #fff !important; }
  .eyebrow-vol-link {
    font-size: 11px; color: #444; letter-spacing: 0.06em; font-weight: 600;
    border-bottom: 0.5px solid #aaa; padding-bottom: 1px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
  }
  .eyebrow-vol-link:hover { color: #111; border-color: #111; }



  /* ── MAIN CONTENT ── */
  .main-content {
    flex: 1; padding: 0;
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--white);
  }

  /* Sticky eyebrow — sticks below fixed nav */
  .eyebrow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: var(--white);
    padding: 8px 0 6px;
    border-bottom: 0.5px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #444; font-weight: 600; }
  .eyebrow-divider { color: #999; font-size: 12px; }
  .district-link {
    font-size: 12px; color: #444; letter-spacing: 0.04em; font-weight: 600;
    border-bottom: 0.5px solid #888; padding-bottom: 1px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  }
  .district-link:hover { color: #111; border-color: #111; }
  .district-link svg { width: 11px; height: 11px; flex-shrink: 0; }

  .page-label {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--grey-dark);
    margin-bottom: 4px;
    flex-shrink: 0;
  }
  .page-sublabel {
    font-size: 15px;
    color: var(--grey-mid);
    font-style: italic;
    margin-bottom: 18px;
    flex-shrink: 0;
  }
  .page-body { font-size: 17px; color: #444; line-height: 1.75; font-weight: 300; }
  .page-body p { margin-bottom: 14px; }
  .page-body ul { padding-left: 20px; margin-bottom: 14px; }
  .page-body ul li { margin-bottom: 7px; }
  .page-body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--grey-dark); margin: 18px 0 8px; }

  /* ── HOME PAGE HERO ── */
  .home-h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--grey-dark);
    margin-bottom: 6px;
  }
  .home-subh {
    font-size: 15px;
    color: var(--grey-mid);
    font-style: italic;
    margin-bottom: 14px;
  }
  .home-body { font-size: 17px; color: #444; line-height: 1.75; font-weight: 300; margin-bottom: 16px; flex-shrink: 0; }
  .home-body ul { padding-left: 20px; margin: 8px 0 14px; }
  .home-body ul li { margin-bottom: 6px; }

  .donate-btn {
    display: inline-block;
    background: var(--grey-bar);
    color: var(--white);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 26px;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
  }
  .donate-btn:hover { background: var(--grey-bar-hover); }

  .links-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-shrink: 0; }
  .donate-link {
    font-size: 15px; color: #555; font-weight: 500;
    border-bottom: 0.5px solid #bbb; padding-bottom: 1px; cursor: pointer;
  }
  .donate-link:hover { color: #333; border-color: #333; }
  .dot-sep { color: #ccc; font-size: 15px; }

  .check-note { margin-top: 10px; flex-shrink: 0; }
  .check-note .line1 { font-size: 12px; color: #888; font-weight: 300; font-style: italic; }
  .check-note .line2 { font-size: 14px; color: #555; font-weight: 500; margin-top: 4px; }
  .check-note .line2 span { font-weight: 300; font-style: italic; color: #888; font-size: 13px; }

  /* ── RIGHT VIDEO PANEL ── */
  .right-panel {
    width: 158px;
    flex-shrink: 0;
    background: var(--grey-panel);
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-left: 1px solid #ddd;
  }
  .right-panel .panel-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #aaa; margin-bottom: 2px; }
  .video-thumb {
    width: 100%; aspect-ratio: 16/9; background: #e0e0e0; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 0.5px solid #ccc; position: relative; overflow: hidden; flex-shrink: 0;
    text-decoration: none;
  }
  .video-thumb:hover { background: #d0d0d0; border-color: #555; }
  .play-btn {
    width: 22px; height: 22px; background: var(--grey-bar); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .play-btn::after {
    content: ''; border-left: 7px solid #fff;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px;
  }
  .video-thumb .vid-label {
    position: absolute; bottom: 4px; left: 6px; right: 6px;
    font-size: 8px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .video-thumb .dur {
    position: absolute; top: 4px; right: 5px;
    font-size: 8px; color: #888; background: rgba(255,255,255,0.7); padding: 1px 4px; border-radius: 2px;
  }

  /* ── STICKY BOTTOM BAR ── */
  .sticky-bar {
    height: 80px;
    background: #bbb;
    display: flex;
    border-top: 1px solid #666;
    flex-shrink: 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
  }
  a.sticky-box { text-decoration: none; }
  .sticky-box, a.sticky-box {
    flex: 1; border-right: 0.5px solid #bbb;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; cursor: pointer; padding: 4px;
    transition: background 0.15s;
    background: #d0d0d0;
  }
  .sticky-box:last-child { border-right: none; }
  .sticky-box:hover { background: #e4e4e4; }
  .sticky-box.active-tab { background: #ebebeb; border-top: 3px solid #333; }
  .sticky-box .box-vid {
    width: 52px; height: 30px; background: #aaa; border-radius: 3px;
    display: flex; align-items: center; justify-content: center; border: 0.5px solid #999;
  }
  .sticky-box:hover .box-vid { background: #bbb; }
  .sticky-box .box-vid .mini-play::after {
    content: ''; border-left: 6px solid #222;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 1px;
  }
  .sticky-box .box-title {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #111; text-align: center; font-weight: 700;
  }
  .sticky-box:hover .box-title { color: #000; }
  .sticky-box.active-tab .box-title { color: #000; }

  /* Corrections tab — green highlight */
  .sticky-box.green-tab { background: #2e7d32; border-right-color: #1b5e20; }
  .sticky-box.green-tab:hover, .sticky-box.green-tab.active-tab { background: #1b5e20; }
  .sticky-box.green-tab .box-vid { background: rgba(0,0,0,0.15); border-color: rgba(0,0,0,0.25); }
  .sticky-box.green-tab .box-vid .mini-play::after { border-left-color: #fff; }
  .sticky-box.green-tab .box-title { color: #fff; font-weight: 700; }
  .sticky-box.green-tab:hover .box-title, .sticky-box.green-tab.active-tab .box-title { color: #e8f5e9; }

  /* Accountability tab — yellow highlight */
  .sticky-box.yellow-tab { background: #FFC000; border-right-color: #e6ac00; }
  .sticky-box.yellow-tab:hover, .sticky-box.yellow-tab.active-tab { background: #e6ac00; }
  .sticky-box.yellow-tab .box-vid { background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.2); }
  .sticky-box.yellow-tab .box-vid .mini-play::after { border-left-color: #333; }
  .sticky-box.yellow-tab .box-title { color: #333; font-weight: 700; }
  .sticky-box.yellow-tab:hover .box-title, .sticky-box.yellow-tab.active-tab .box-title { color: #111; }

  /* ── ACCOUNTABILITY CARDS ── */
  .accountability-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 10px;
  }
  .acc-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .acc-card-panels { display: flex; }
  .acc-panel {
    flex: 1;
    padding: 12px 14px;
  }
  .acc-panel.said { background: #2a2a40; }
  .acc-panel.false-claim { background: #8b1a1a; }
  .acc-panel.correction { background: #1b5e20; }
  .acc-panel.did { background: #8b1a1a; }
  .acc-panel.question { background: #e8e8e8; }
  .acc-panel.question .acc-panel-label { color: #555; }
  .acc-panel.question .acc-panel-text { color: #222; }
  .acc-panel.answer { background: #f8f8f8; }
  .acc-panel.answer .acc-panel-label { color: #555; }
  .acc-panel.answer .acc-panel-text { color: #222; }
  .acc-panel-label {
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(255,255,255,0.85); margin-bottom: 7px; font-weight: 600;
  }
  .acc-panel-text { font-size: 13px; color: #fff; line-height: 1.6; font-weight: 300; }
  .acc-panel-text em { font-style: italic; color: rgba(255,255,255,0.85); }
  .acc-footer {
    background: #f8f8f8;
    padding: 10px 14px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .acc-oneliner { font-size: 13px; color: #333; font-weight: 500; line-height: 1.5; flex: 1; }
  .acc-tag {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
    font-weight: 700; border-width: 1.5px; border-style: solid;
  }
  .tag-farmers { background: #d4edda; color: #155724; border-color: #5cb85c; }
  .tag-deficit { background: #fff0cc; color: #7a4400; border-color: #e6a817; }
  .tag-oath { background: #fce4ec; color: #880e4f; border-color: #e91e8c; }
  .tag-constitution { background: #dde4ff; color: #1a237e; border-color: #3f51b5; }
  .tag-overreach { background: #ede7f6; color: #4a148c; border-color: #9c27b0; }
  /* ── HR 1 ACCOUNTABILITY CARD ── */
  .hr1-eyebrow { font-size: 13px; font-weight: 700; color: #f4c060; letter-spacing: 0.04em; margin-bottom: 12px; line-height: 1.3; }
  .acc-panel-text--lg { font-size: 15px !important; line-height: 1.6; margin-bottom: 0; }
  .hr1-spacer { height: 14px; }
  .hr1-list-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 0.5px solid rgba(255,255,255,0.10); }
  .hr1-list-row:last-of-type { border-bottom: none; margin-bottom: 4px; }
  .hr1-list-num { font-size: 22px; font-weight: 700; color: #f4c060; min-width: 68px; line-height: 1; flex-shrink: 0; }
  .hr1-list-lbl { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.4; }
  .hr1-quote { margin-top: 12px; background: rgba(0,0,0,0.20); border-left: 3px solid #f4c060; border-radius: 0 4px 4px 0; padding: 8px 12px; }
  .hr1-quote-text { font-size: 13px; color: rgba(255,255,255,0.90); line-height: 1.5; font-style: italic; }
  .hr1-quote-attr { font-size: 11px; color: rgba(255,255,255,0.50); margin-top: 4px; }
  .hr1-total { margin-top: 10px; background: rgba(0,0,0,0.25); border-radius: 4px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; }
  .hr1-total-lbl { font-size: 12px; color: rgba(255,255,255,0.65); }
  .hr1-total-num { font-size: 22px; font-weight: 700; color: #f4c060; }
  .hr1-footnote { margin-top: 10px; background: rgba(0,0,0,0.18); border-radius: 4px; padding: 8px 12px; }
  .hr1-footnote-head { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
  .hr1-footnote-text { font-size: 12px; color: rgba(255,255,255,0.60); line-height: 1.5; }
  .hr1-source { font-size: 11px; color: rgba(255,255,255,0.40); margin-top: 10px; line-height: 1.4; border-top: 0.5px solid rgba(255,255,255,0.12); padding-top: 8px; }
  .tag-snap { background: #fff3cd; color: #7a4f00; border-color: #e0a800; }


  /* ── VOLUNTEER FORM ── */
  .volunteer-form { display: flex; flex-direction: column; gap: 12px; max-width: 500px; }
  .form-row { display: flex; gap: 12px; }
  .form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .form-group label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
  .form-group input, .form-group select, .form-group textarea {
    border: 1px solid #ccc; border-radius: 3px; padding: 8px 10px;
    font-size: 12px; font-family: var(--font-body); color: #333;
    background: #fff; outline: none;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #888;
  }
  .form-group textarea { resize: vertical; min-height: 60px; }
  .form-checkboxes { display: flex; flex-direction: column; gap: 6px; }
  .form-checkboxes label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #444; cursor: pointer; font-weight: 300; }
  .form-checkboxes input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
  .submit-btn {
    background: var(--grey-bar); color: #fff; border: none;
    padding: 10px 24px; border-radius: 2px; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
    font-family: var(--font-body); font-weight: 500; align-self: flex-start;
  }
  .submit-btn:hover { background: #444; }
  .form-success {
    display: none; background: #f0f7f0; border: 1px solid #9bc49b;
    border-radius: 4px; padding: 14px 16px; font-size: 13px; color: #2a6b2a;
  }

  /* ── PRESS PAGE ── */
  .press-contact { margin-top: 12px; }
  .press-contact p { font-size: 15px; color: #444; line-height: 1.75; font-weight: 300; margin-bottom: 10px; }
  .press-contact a { color: var(--grey-bar); text-decoration: none; border-bottom: 0.5px solid #bbb; }
  .press-contact a:hover { color: #333; }

  /* ── NEWS PAGE ── */
  .news-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
  .news-item {
    padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 6px;
    text-decoration: none; display: block; background: #fafafa;
  }
  .news-item:hover { background: #f0f0f0; border-color: #bbb; }
  .news-item .ni-date { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #aaa; margin-bottom: 4px; }
  .news-item .ni-title { font-size: 13px; color: #333; font-weight: 500; line-height: 1.4; }
  .news-item .ni-source { font-size: 10px; color: #888; margin-top: 4px; font-style: italic; }

  /* News items with real links — show blue title and read more arrow */
  .news-item.has-link .ni-title { color: #1a5276; }
  .news-item.has-link:hover { background: #eef4fb; border-color: #aac4e0; cursor: pointer; }
  .news-item.has-link .ni-title::after {
    content: ' →';
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
  }

  /* News items without links — muted, no pointer */
  .news-item.no-link { cursor: default; opacity: 0.7; }
  .news-item.no-link:hover { background: #fafafa; border-color: #e0e0e0; }
  .news-item.no-link .ni-title { color: #888; font-style: italic; }

  /* ── PRIVACY PAGE ── */
  .privacy-section { margin-bottom: 18px; }
  .privacy-section h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #333; margin-bottom: 6px; }
  .privacy-section p { font-size: 14px; color: #555; line-height: 1.7; font-weight: 300; }

  /* ── SCROLLBAR ── */
  .hero-block::-webkit-scrollbar { width: 4px; }
  .hero-block::-webkit-scrollbar-track { background: transparent; }
  .hero-block::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  .right-panel::-webkit-scrollbar { width: 3px; }
  .right-panel::-webkit-scrollbar-track { background: transparent; }
  .right-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

  /* ── HAMBURGER (hidden on desktop) ── */
  .hamburger { display: none; }

  /* Mobile video bar — hidden on desktop */
  #mob-video-bar {
    display: none;
  }

  /* ── MOBILE NAV DRAWER (hidden on desktop) ── */
  .mob-drawer-overlay {
    display: none;
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.5); z-index: 9000;
    pointer-events: none;
  }
  .mob-drawer-overlay.open { pointer-events: auto; }
  .mob-drawer-overlay.open { display: block; }
  .mob-drawer {
    position: absolute; top:0; right:0; bottom:0; width: 270px;
    background: #333; display: flex; flex-direction: column; overflow-y: auto;
  }
  .mob-drawer-head {
    background: #555; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; flex-shrink:0;
  }
  .mob-drawer-head span { color:#fff; font-family:var(--font-display); font-size:14px; font-weight:700; }
  .mob-drawer-close {
    background:none; border:none; color:#ccc; font-size:26px; cursor:pointer; padding:0 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-drawer-btn {
    display:block; width:100%; background:none; border:none; border-bottom:0.5px solid #444;
    color:#ddd; font-size:15px; letter-spacing:0.06em; text-transform:uppercase;
    padding:15px 20px; text-align:left; cursor:pointer; font-family:var(--font-body);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-drawer-btn:active { background:#444; }
  .mob-drawer-btn.green { color:#a5d6a7; }
  .mob-drawer-btn.yellow { color:#ffd54f; }

  /* ── MOBILE LAYOUT (portrait phones) ── */
  @media (max-width: 500px) {

    /* Nav: fixed at top */
    .topnav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 900;
      height: 48px; padding: 0 14px; flex-wrap: nowrap;
    }
    .topnav .logo { font-size: 13px; flex: 1; }
    .topnav .links { display: none; }
    .hamburger {
      display: flex; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 8px;
      -webkit-tap-highlight-color: transparent;
    }
    .hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; }

    /* Site-wrap: natural flow */
    .site-main { padding: 0 10px; overflow:visible; }
    .content-area { display:block; height:auto; overflow:visible; }



    /* main-content: block */
    .main-content { order:1; padding:0; overflow:visible; height:auto; display:block; }

    /* Eyebrow: NOT sticky on mobile — scrolls with content */
    .eyebrow-row {
      position: static;
      background: #fff; padding: 8px 14px 6px;
      border-bottom: 1px solid #e0e0e0; margin-bottom: 0;
    }
    .eyebrow { font-size: 10px; }
    .eyebrow-divider { font-size: 10px; }
    .district-link { font-size: 10px; }
    .eyebrow-vol-link { font-size: 10px; }

    /* Hide all desktop right-panels */
    .right-panel { display: none !important; }

    /* Mobile video bar: FIXED below nav — always visible */
    #mob-video-bar {
      display: flex !important;
      position: fixed; top: 48px; left: 0; right: 0; z-index: 400;
      height: 90px;
      flex-direction: row; overflow-x: auto; overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      background: #f2f2f2; border-bottom: 1px solid #ddd;
      padding: 8px 10px; gap: 8px;
    }
    .mob-vt {
      min-width: 120px; width: 120px; height: 70px; flex-shrink: 0;
      background: #e0e0e0; border-radius: 4px; border: 0.5px solid #ccc;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; text-decoration: none;
    }
    .mob-play-btn {
      width: 22px; height: 22px; background: #555; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .mob-play-btn::after {
      content: ''; border-left: 7px solid #fff;
      border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px;
    }
    .mob-vl {
      position: absolute; bottom: 4px; left: 5px; right: 5px;
      font-size: 8px; color: #555; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body);
    }
    .mob-dur {
      position: absolute; top: 4px; right: 4px;
      font-size: 8px; color: #888; background: rgba(255,255,255,0.75);
      padding: 1px 4px; border-radius: 2px;
    }

    /* Hero block */
    .hero-block {
      flex: none; overflow: visible; height: auto;
      padding: 14px 14px; border-radius: 0;
      border-left: none; border-right: none; border-top: none;
      margin-bottom: 0; margin-top: 0;
    }

    /* Bottom tabs: fixed, 2 rows of 3, above iPhone Safari toolbar */
    .sticky-bar {
      position: fixed; bottom: 0; left: 0; right: 0;
      height: auto; flex-wrap: wrap; z-index: 8000;
      border-top: 1px solid #aaa;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      display: flex;
    }
    .sticky-bar a.sticky-box, .sticky-bar button.sticky-box {
      flex: 0 0 33.333%; min-width: 33.333%; max-width: 33.333%;
      width: 33.333%;
      padding: 4px 2px; height: 52px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 4px;
      overflow: hidden; box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      cursor: pointer;
      text-decoration: none;
    }
    /* Hide the play icon on mobile */
    .sticky-bar .sticky-box .box-vid { display: none; }
    .sticky-bar .sticky-box .box-title {
      font-size: 8px; letter-spacing: 0.05em;
      line-height: 1.2; white-space: nowrap;
      font-weight: 700;
    }

    /* Body padding accounts for: nav(48) + video(90) + eyebrow(32) top,
       and tabs(104) + safe-area bottom */
    html, body { height: auto; overflow: auto; }
    body {
      display: block;
      padding-top: 170px;
      padding-bottom: calc(104px + env(safe-area-inset-bottom, 20px));
    }

    /* Eyebrow: fixed below video strip */
    .eyebrow-row {
      position: fixed; top: 138px; left: 0; right: 0; z-index: 390;
      background: #fff; padding: 6px 14px 5px;
      border-bottom: 1px solid #e0e0e0; margin-bottom: 0;
    }
    .eyebrow { font-size: 10px; }
    .eyebrow-divider { font-size: 10px; }
    .district-link { font-size: 10px; }
    .eyebrow-vol-link { font-size: 10px; }

    /* Hero block: natural height, scrolls with page */
    .hero-block {
      flex: none; overflow: visible; height: auto;
      padding: 14px 14px; border-radius: 0;
      border-left: none; border-right: none; border-top: none;
      margin-bottom: 80px; /* space for sticky tabs */
    }

    /* Typography */
    .home-h1 { font-size: 20px; }
    .home-subh { font-size: 13px; }
    .home-body { font-size: 14px; }
    .page-label { font-size: 18px; }
    .page-sublabel { font-size: 13px; }
    .page-body { font-size: 14px; }
    .page-body h3 { font-size: 15px; }
    .check-note .line1 { font-size: 12px; }
    .check-note .line2 { font-size: 13px; }
    .donate-link { font-size: 14px; }

    /* Cards: stack vertically */
    .acc-card-panels { flex-direction: column; }
    .acc-panel { padding: 10px 12px; }
    .acc-panel-text { font-size: 13px; }
    .acc-footer { flex-direction: column; gap: 6px; }
    .acc-oneliner { font-size: 12px; }

    /* Forms */
    .volunteer-form { max-width: 100%; }
    .form-row { flex-direction: column; }
    .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
    .form-checkboxes label { font-size: 14px; }

    /* Headshot float: centre on mobile */
    .home-body div[style*="float:right"] {
      float: none !important; margin: 0 auto 12px auto !important;
      width: 80px !important; display: block;
    }

    /* News items */
    .ni-title { font-size: 14px; }

    /* Hide about page extra version */
  }

  /* ── TABLET (501px-768px) light touch ── */
  @media (min-width: 501px) and (max-width: 768px) {
    .topnav .links a { font-size: 9px; letter-spacing: 0.06em; }
    .topnav .links { gap: 12px; }
    .acc-card-panels { flex-direction: column; }
  }