/*
 * Shared responsive finish layer.
 *
 * This file is loaded after each page stylesheet so these rules form one
 * predictable mobile system instead of requiring page-by-page overrides.
 * Desktop presentation is deliberately left untouched.
 */

@media (max-width: 992px) {
  :root {
    --mobile-gutter: 1rem;
    --mobile-section-space: 3rem;
    --mobile-card-padding: 1.25rem;
    --mobile-grid-gap: 1rem;
    --mobile-nav-height: 62px;
  }

  html {
    overflow-x: hidden;
    scroll-padding-top: calc(var(--mobile-nav-height) + 1rem);
  }

  body {
    width: 100%;
    padding-top: var(--mobile-nav-height);
    overflow-x: hidden;
  }

  main,
  section,
  .container {
    min-width: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* Compact mobile navigation */
  .navbar,
  .navbar.scrolled {
    min-height: var(--mobile-nav-height);
    padding: 0.45rem var(--mobile-gutter);
    gap: 0.75rem;
    transform: translateY(0);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
  }

  .navbar.navbar-hidden {
    transform: translateY(calc(-100% - 2px));
  }

  .navbar .logo,
  .navbar .logo a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .navbar .logo img {
    width: 44px;
    height: 44px;
  }

  .navbar .company-name {
    display: block;
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    color: var(--primary);
    background: none;
    font-size: 1rem;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar .menu-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 10px;
    color: var(--primary);
    background: rgba(46, 43, 122, 0.08);
    border: 0;
    font-size: 1.15rem;
  }

  .navbar .nav-links {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    left: auto;
    display: flex;
    width: min(86vw, 320px);
    height: 100dvh;
    padding: 0 0 1rem;
    gap: 0;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    transform: translateX(105%);
    transition: transform 0.25s ease;
  }

  .navbar .nav-links.active {
    right: 0;
    transform: translateX(0);
  }

  .navbar .mobile-menu-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: var(--mobile-nav-height);
    margin: 0 0 0.35rem;
    padding: 0.6rem 0.85rem 0.6rem 1rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
  }

  .navbar .mobile-menu-header h2 {
    margin: 0;
    padding: 0;
    color: var(--primary);
    background: none;
    font-size: 0.92rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  .navbar .mobile-close-btn {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: var(--primary);
    background: rgba(46, 43, 122, 0.08);
    font-size: 1rem;
  }

  .navbar .nav-links > a,
  .navbar .dropdown > a {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 1.1rem;
    gap: 0.55rem;
    border-bottom: 1px solid rgba(46, 43, 122, 0.06);
    font-size: 0.86rem;
    line-height: 1.25;
  }

  .navbar .nav-links a::after {
    display: none;
  }

  .navbar .dropdown {
    position: static;
    display: block;
    width: 100%;
  }

  .navbar .dropdown-content {
    position: static;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0 0.4rem 1.25rem;
    border: 0;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: none;
  }

  .navbar .dropdown:focus-within .dropdown-content,
  .navbar .dropdown.open .dropdown-content {
    display: block;
  }

  .navbar .dropdown-content a {
    min-height: 38px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
  }

  .navbar .mobile-apply-btn,
  .navbar .nav-links .compose-btn {
    width: auto;
    min-height: 42px;
    margin: 0.65rem 1rem 0;
    padding: 0.65rem 1rem;
    justify-content: center;
    border: 0;
    font-size: 0.86rem;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-section-space: 2.75rem;
  }

  body {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  /* A consistent, readable scale that also wins over page-specific hero rules. */
  main h1 {
    font-size: clamp(1.85rem, 7.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
  }

  main h2 {
    font-size: clamp(1.45rem, 6vw, 1.75rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em;
  }

  main h3 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  main h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  main h5 {
    font-size: 0.92rem !important;
  }

  main h6 {
    font-size: 0.84rem !important;
  }

  main p,
  main li {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  main .eyebrow,
  main .badge,
  main .status-badge,
  main .program-status {
    font-size: 0.72rem !important;
    line-height: 1.35;
    letter-spacing: 0.08em;
  }

  main label,
  main .form-label,
  main .field-label {
    font-size: 0.86rem;
    line-height: 1.35;
  }

  main button,
  main .btn,
  main input[type="submit"] {
    min-height: 44px;
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .container,
  .programs-wide-container {
    width: calc(100% - var(--mobile-gutter) - var(--mobile-gutter));
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 0;
  }

  .section-header {
    margin-bottom: 1.5rem;
  }

  .section-header p,
  .section-description,
  .section-subtitle,
  .subtitle {
    max-width: 42rem;
    margin-inline: auto;
  }

  /* Shared page sections */
  .impact,
  .path-section,
  .skills-section,
  .home-editorial-section,
  .timeline-section,
  .partners,
  .content-section,
  .values-section,
  .team-section,
  .blog-index-section,
  .blog-section,
  .contact-form-section,
  .faq-section,
  .impact-showcase,
  .programs-listing-section,
  .skills-catalog-section,
  .support-pathways,
  .why-partner-section,
  .support-form-section,
  .donation-impact-section,
  .donation-form-section,
  .hire-process-section {
    padding-block: var(--mobile-section-space) !important;
  }

  /* Heroes are compact without losing their visual identity. */
  .home-hero {
    min-height: min(68svh, 570px) !important;
    padding: 3.25rem 0 2.75rem !important;
  }

  .story-hero,
  .programs-hero-modern,
  .get-involved-hero,
  .donate-hero,
  .facilitate-hero,
  .hire-hero,
  .mentor-hero,
  .volunteer-hero,
  .skill-detail-hero {
    min-height: 0 !important;
    padding: 3rem 0 !important;
  }

  .hero-content,
  .home-hero .hero-content {
    padding: 0 !important;
  }

  .hero-buttons,
  .cta-buttons,
  .form-actions {
    gap: 0.7rem;
  }

  .home-hero .hero-buttons {
    align-items: center;
  }

  .home-hero .hero-buttons .btn {
    width: min(72vw, 230px);
    max-width: 100%;
  }

  .impact .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .impact .impact-item-home {
    padding: 0.9rem 0.65rem !important;
    border-radius: 14px;
  }

  .impact .impact-item-home .icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0.65rem;
    font-size: 1rem;
  }

  .impact .impact-item-home h3 {
    margin-bottom: 0.25rem;
    font-size: 1.55rem !important;
  }

  .impact .impact-item-home p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  /* Compact homepage pathway cards */
  .path-section .path-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .path-section .path-cards .card {
    min-width: 0;
    padding: 0.9rem 0.75rem !important;
    border-radius: 14px;
  }

  .path-section .path-cards .card::before {
    height: 3px;
  }

  .path-section .path-cards h3 {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    font-size: 0.9rem !important;
    line-height: 1.25;
  }

  .path-section .path-cards h3 i {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  .path-section .path-cards p {
    display: -webkit-box;
    margin-bottom: 0.65rem;
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .path-section .chips {
    display: none;
  }

  .path-section .path-cards .btn {
    width: 100%;
    min-height: 38px;
    padding: 0.55rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  /* Skills remain useful while using far less vertical space. */
  .skills-section .home-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .skills-section .home-skill-card {
    min-width: 0;
    min-height: 0 !important;
    border-radius: 14px;
  }

  .skills-section .home-skill-top {
    min-height: 58px;
    padding: 0.65rem 0.75rem !important;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .skills-section .home-skill-top i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.8rem;
  }

  .skills-section .home-skill-content {
    padding: 0.55rem 0.75rem !important;
  }

  .skills-section .home-skill-content p {
    display: none;
  }

  .skills-section .skill-status-heading,
  .skills-section .status {
    margin: 0.2rem 0;
    padding: 0.3rem 0.45rem;
    font-size: 0.62rem !important;
    line-height: 1.2;
  }

  .skills-section .home-skill-footer {
    padding: 0.55rem 0.75rem !important;
    border-top: 1px solid #e5e7eb;
  }

  .skills-section .home-skill-footer > span {
    display: none;
  }

  .skills-section .home-skill-btn {
    font-size: 0.72rem;
  }

  .skills-section .home-skills-more {
    margin-top: 1.25rem;
  }

  /* Homepage blog becomes a compact image-and-copy row. */
  .home-editorial-section .editorial-feature {
    display: grid;
    grid-template-columns: minmax(105px, 38%) 1fr;
    border-width: 2px;
    border-radius: 14px;
  }

  .home-editorial-section .editorial-feature img {
    width: 100%;
    height: 100% !important;
    min-height: 150px;
    object-fit: cover;
  }

  .home-editorial-section .editorial-feature-content {
    min-width: 0;
    padding: 0.8rem !important;
  }

  .home-editorial-section .editorial-feature-content .eyebrow,
  .home-editorial-section .editorial-feature-content > p:not(.eyebrow) {
    display: none;
  }

  .home-editorial-section .editorial-feature-content h2 {
    margin: 0 0 0.65rem;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .home-editorial-section .editorial-feature-content .btn {
    width: auto;
    min-height: 36px;
    padding: 0.5rem 0.65rem;
    font-size: 0.7rem;
  }

  .home-editorial-section .editorial-list {
    gap: 0.65rem;
  }

  .home-editorial-section .editorial-list::before {
    font-size: 1.05rem;
  }

  .home-editorial-section .editorial-post {
    padding: 0.8rem;
    border-radius: 12px;
  }

  .home-editorial-section .editorial-post span {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.62rem;
  }

  .home-editorial-section .editorial-post h3 {
    margin: 0 0 0.3rem;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  .home-editorial-section .editorial-post p {
    display: -webkit-box;
    margin-bottom: 0.35rem;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-editorial-section .editorial-post small {
    font-size: 0.62rem;
  }

  /* Keep the year-by-year carousel moving, but simplify it for phones. */
  .timeline-section .timeline {
    gap: 0.75rem;
    padding: 1.4rem max(1rem, calc(50% - 92px));
    scroll-snap-type: none;
  }

  .timeline-section .timeline::before {
    display: none;
  }

  .timeline-section .timeline-item {
    min-width: 184px;
    padding-inline: 0.35rem;
  }

  .timeline-section .timeline.is-animated .timeline-item {
    opacity: 0.38;
    filter: blur(1.5px);
    transform: scale(0.82);
  }

  .timeline-section .timeline.is-animated .timeline-item.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1.04);
  }

  .timeline-section .timeline.is-animated .timeline-item.is-active h4 {
    font-size: 1.45rem;
  }

  .timeline-section .timeline .content {
    padding: 0.8rem 0.65rem;
  }

  /* Match the final call-to-action buttons to the compact hero buttons. */
  .final-cta .finalcta-container {
    padding: 1.25rem var(--mobile-gutter) !important;
  }

  .final-cta .cta-buttons {
    align-items: center;
  }

  .final-cta .cta-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 44px;
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
  }

  /* Center and compress the shared footer on mobile only. */
  .footer {
    padding: 2rem var(--mobile-gutter) 1.25rem !important;
    text-align: center;
  }

  .footer-container {
    gap: 1.4rem !important;
    justify-items: center;
  }

  .footer-col {
    width: min(100%, 420px);
  }

  .footer img {
    max-width: 96px;
  }

  .footer-col h3 {
    margin-bottom: 0.8rem;
  }

  .footer-col h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-col p,
  .footer-col ul li {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .footer-col ul li {
    margin-bottom: 0.35rem;
  }

  .footer .socials {
    justify-content: center;
    margin-top: 0.8rem;
  }

  .footer .contact p {
    margin-block: 0.2rem;
  }

  .footer .newsletter {
    width: min(100%, 360px);
    padding: 1rem;
  }

  .footer .newsletter input,
  .footer .newsletter button {
    min-height: 42px;
    margin-top: 0.55rem;
    padding: 0.65rem 0.75rem;
  }

  .footer-bottom {
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    gap: 0.45rem;
    text-align: center;
  }

  .footer-bottom p {
    margin: 0;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.9rem;
  }

  .footer-links a {
    margin: 0;
  }

  .stats-grid,
  .path-cards,
  .home-skills-grid,
  .editorial-grid,
  .blog-grid,
  .feature-grid,
  .skills-grid,
  .programs-grid,
  .modern-programs-grid,
  .opportunities-grid,
  .modern-opportunities-grid,
  .testimonials-grid,
  .cohorts-grid,
  .talent-pool-grid,
  .hire-process-grid,
  .donation-impact-grid,
  .form-layout-grid,
  .auto-form-grid {
    gap: var(--mobile-grid-gap) !important;
  }

  .card,
  .stat-card,
  .value-card,
  .approach-detail-card,
  .team-card,
  .path-cards .card,
  .home-skill-card,
  .blog-card,
  .feature-item,
  .skill-card,
  .program-card-modern,
  .opportunity-card,
  .testimonial-card,
  .cohort-card,
  .talent-pool-card,
  .hire-process-card,
  .donation-amount-card,
  .form-card,
  .contact-info-panel,
  .donation-flow-card {
    min-height: 0 !important;
  }

  .stat-card,
  .value-card,
  .approach-detail-card,
  .path-cards .card,
  .home-skill-content,
  .blog-card-content,
  .feature-item,
  .skill-card,
  .program-card-body,
  .opportunity-card,
  .testimonial-card,
  .cohort-card,
  .talent-pool-card,
  .hire-process-card,
  .donation-amount-card,
  .form-card,
  .contact-info-panel,
  .donation-flow-card {
    padding: var(--mobile-card-padding) !important;
  }

  .stat-card h3,
  .impact-item-home h3,
  .stat-number,
  .donation-amount-card strong {
    font-size: 1.9rem !important;
  }

  .story-hero-grid,
  .get-involved-hero-grid,
  .programs-hero-grid,
  .contact-grid,
  .two-column-grid,
  .skill-detail-grid {
    gap: 1.5rem !important;
  }

  .story-hero-image img,
  .programs-hero-media img,
  .rounded-image {
    height: 240px !important;
    border-radius: 16px !important;
  }

  /* Compact, safe-area-aware floating actions. */
  .floating-buttons {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    gap: 0.5rem;
  }

  .floating-btn,
  .chatbot-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
  }

  .chatbot-btn {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 104px);
  }

  .chatbot-box {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 1.5rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: min(460px, calc(100dvh - var(--mobile-nav-height) - 4rem - env(safe-area-inset-bottom)));
    max-height: calc(100dvh - var(--mobile-nav-height) - 4rem - env(safe-area-inset-bottom));
  }

  .floating-buttons.chatbot-is-open > .floating-btn {
    opacity: 0;
    pointer-events: none;
  }

  /* Donation confirmation: intentionally small enough for short phone screens. */
  .donation-modal-overlay {
    padding: 0.65rem !important;
  }

  .donation-confirmation-modal {
    max-width: 480px !important;
    margin-block: auto !important;
    padding: 1.2rem 1rem !important;
    border-radius: 16px !important;
  }

  .donation-confirmation-modal .success-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.65rem !important;
    font-size: 1.2rem !important;
  }

  .donation-confirmation-modal h1 {
    margin-bottom: 0.45rem !important;
    font-size: 1.5rem !important;
  }

  .donation-confirmation-modal > p {
    margin-block: 0.25rem !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
  }

  .donation-confirmation-modal .confirmation-reference,
  .donation-confirmation-modal .next-steps {
    margin-block: 0.75rem !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 11px !important;
  }

  .donation-confirmation-modal .next-steps h3 {
    margin-bottom: 0.45rem !important;
    font-size: 0.92rem !important;
  }

  .donation-confirmation-modal .next-steps li {
    margin-bottom: 0.35rem !important;
    gap: 0.45rem !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .donation-confirmation-modal .form-actions {
    margin-top: 0.75rem !important;
  }

  /* About page: compact, two-up mobile presentation. */
  .about-hero .hero-buttons {
    align-items: center;
  }

  .about-hero .hero-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
  }

  .about-hero .story-hero-grid {
    gap: 1.25rem !important;
  }

  .about-hero .story-hero-image img {
    width: min(100%, 420px);
    height: 210px !important;
  }

  .impact-stats {
    padding: 1.5rem var(--mobile-gutter) !important;
  }

  .impact-stats .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .impact-stats .stat-card {
    padding: 0.85rem 0.55rem !important;
    border-radius: 12px;
  }

  .impact-stats .stat-card h3 {
    margin-bottom: 0.2rem;
    font-size: 1.35rem !important;
  }

  .impact-stats .stat-card p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .split-feature {
    gap: 1rem !important;
  }

  .split-feature-left {
    padding: 0.5rem !important;
  }

  .split-feature h2 {
    margin-bottom: 0.55rem;
    font-size: 1.35rem !important;
    line-height: 1.25;
  }

  .split-feature p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .mission-vision-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .mission-vision-cards article {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
  }

  .mission-vision-cards i {
    margin-bottom: 0.45rem;
    font-size: 1.15rem;
  }

  .mission-vision-cards h3 {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }

  .mission-vision-cards p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .values-section .section-header {
    margin-bottom: 1rem;
  }

  .values-section .we-work {
    font-size: 1.3rem !important;
    line-height: 1.3;
  }

  .values-section .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .values-section .value-card {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
  }

  .values-section .value-card h3 {
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
  }

  .values-section .value-card p {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .approach-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
    padding: 0.5rem !important;
  }

  .approach-detail-card {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
  }

  .approach-detail-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .approach-number {
    width: 38px;
    height: 38px;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
  }

  .approach-detail-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
  }

  .approach-detail-card p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .team-section {
    padding-block: var(--mobile-section-space) !important;
  }

  .team-section .teams {
    margin: 0 0 1rem;
  }

  .team-section .teams h2 {
    margin: 0 0 0.65rem;
    font-size: 1.35rem !important;
  }

  .team-section .teams h2::before {
    display: none;
  }

  .team-section .teams p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .team-section .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .team-section .team-card {
    min-width: 0;
    border-radius: 12px;
  }

  .team-section .team-photo {
    height: 170px !important;
  }

  .team-section .team-info {
    padding: 0.65rem 0.45rem !important;
  }

  .team-section .team-info h3 {
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .team-section .team-role {
    margin: 0;
    font-size: 0.58rem;
    line-height: 1.3;
    letter-spacing: 0.35px;
  }

  .team-section .team-overlay {
    padding: 0.65rem;
  }

  .team-section .overlay-content h4 {
    margin-bottom: 0.35rem;
    font-size: 0.76rem;
  }

  .team-section .overlay-content p {
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .team-section .linkedin-btn {
    width: auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.64rem;
  }

  .timeline-band .section-header {
    margin-bottom: 0.8rem;
  }

  .timeline-band .about-timeline.is-animated {
    max-height: 330px;
    padding: 105px 0.35rem;
  }

  .timeline-band .about-timeline-item,
  .timeline-band .about-timeline.is-animated .about-timeline-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .timeline-band .about-timeline-year {
    min-width: 0;
    font-size: 0.78rem;
    text-align: center;
  }

  .timeline-band .about-timeline-content {
    padding: 0.7rem !important;
    border-radius: 10px;
  }

  .timeline-band .about-timeline-content h3 {
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
  }

  .timeline-band .about-timeline-content p {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .timeline-band .about-timeline.is-animated .about-timeline-item.is-active {
    transform: scale(1.02);
  }

  /* Programs page: smaller phone-sized controls and closing prompt. */
  .programs-hero-modern .hero-buttons {
    align-items: center;
    margin-top: 1.1rem;
  }

  .programs-hero-modern .hero-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
  }

  .programs-listing-section .program-jump-links {
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .programs-listing-section .program-jump-links a {
    min-height: 34px;
    padding: 0.4rem 0.65rem;
    font-size: 0.68rem;
  }

  .programs-listing-section .program-card-actions {
    padding: 0 0.65rem 0.65rem;
    gap: 0.35rem;
  }

  .programs-listing-section .program-card-actions .btn {
    min-height: 34px;
    margin-top: 0.25rem;
    padding: 0.45rem 0.35rem;
    border-radius: 10px;
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .programs-listing-section .empty-blog .btn {
    width: min(72vw, 230px);
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
  }

  .programs-listing-section + .final-cta {
    padding: 1.75rem var(--mobile-gutter) !important;
  }

  .programs-listing-section + .final-cta .finalcta-container {
    padding: 0 !important;
  }

  .programs-listing-section + .final-cta h2 {
    margin-bottom: 0.45rem;
    font-size: 1.35rem !important;
    line-height: 1.25;
  }

  .programs-listing-section + .final-cta .medium-text {
    max-width: 32rem;
    margin: 0 auto 0.9rem;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .programs-listing-section + .final-cta .cta-buttons {
    gap: 0.55rem;
  }

  .programs-listing-section + .final-cta .cta-buttons .btn {
    min-height: 40px;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
  }

  /* Learn a Skill: preserve the catalog flow, compact everything around it. */
  .skills-page-hero .story-hero-grid {
    gap: 1.25rem !important;
  }

  .skills-page-hero .hero-buttons {
    align-items: center;
    margin-top: 1.1rem;
  }

  .skills-page-hero .hero-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
  }

  .skills-page-hero .skills-hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem;
  }

  .skills-page-hero .skills-hero-panel div {
    min-width: 0;
    padding: 0.75rem 0.45rem;
    border-radius: 12px;
    text-align: center;
  }

  .skills-page-hero .skills-hero-panel strong {
    margin-bottom: 0.2rem;
    font-size: 1.15rem;
  }

  .skills-page-hero .skills-hero-panel span {
    display: block;
    font-size: 0.62rem;
    line-height: 1.25;
  }

  .skills-catalog-section .skills-grid {
    grid-template-columns: 1fr !important;
  }

  .skills-catalog-section .skill-card .btn {
    min-height: 40px;
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
  }

  .skills-catalog-section + .content-section .section-header {
    margin-bottom: 1rem;
  }

  .skills-catalog-section + .content-section .section-header h2 {
    font-size: 1.3rem !important;
    line-height: 1.3;
  }

  .skills-catalog-section + .content-section .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .skills-catalog-section + .content-section .feature-item {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
    text-align: center;
  }

  .skills-catalog-section + .content-section .feature-item:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .skills-catalog-section + .content-section .feature-item i {
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
  }

  .skills-catalog-section + .content-section .feature-item h3 {
    margin-bottom: 0.3rem;
    font-size: 0.84rem !important;
    line-height: 1.25;
  }

  .skills-catalog-section + .content-section .feature-item p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  /* Get Involved: use the photographs as a quiet hero backdrop on phones. */
  .get-involved-hero {
    background:
      linear-gradient(135deg, rgba(6, 31, 58, 0.92), rgba(46, 43, 122, 0.88)),
      url("/static/images/training1.7b507b154bf7.jpg") center / cover;
  }

  .get-involved-hero-grid {
    gap: 1rem !important;
  }

  .get-involved-photo-stack {
    display: none !important;
  }

  .get-involved-hero .hero-buttons {
    align-items: center;
    margin: 1.1rem 0 0;
  }

  .get-involved-hero .hero-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
  }

  .support-pathways .modern-opportunities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .support-pathways .opportunity-card {
    min-width: 0;
    padding: 0.8rem 0.6rem !important;
    border-radius: 12px;
  }

  .support-pathways .opportunity-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
  }

  .support-pathways .opportunity-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.84rem !important;
    line-height: 1.25;
  }

  .support-pathways .opportunity-card > p {
    display: -webkit-box;
    margin-bottom: 0.45rem;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .support-pathways .actions-list {
    margin: 0.45rem 0;
  }

  .support-pathways .actions-list li {
    gap: 0.3rem;
    margin-bottom: 0.25rem;
    font-size: 0.61rem;
    line-height: 1.25;
  }

  .support-pathways .actions-list li:nth-child(n + 3) {
    display: none;
  }

  .support-pathways .opportunity-card .btn {
    min-height: 34px;
    padding: 0.45rem 0.35rem;
    font-size: 0.66rem;
  }

  .why-partner-section .two-column-grid {
    gap: 0.75rem !important;
  }

  .why-partner-section .two-column-grid > div:last-child {
    display: none;
  }

  .why-partner-section h2 {
    font-size: 1.3rem !important;
    line-height: 1.3;
    text-align: center;
  }

  .why-partner-section .eyebrow {
    text-align: center;
  }

  .why-partner-section .benefits-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
  }

  .why-partner-section .benefit-item {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0.8rem 0.6rem !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
  }

  .why-partner-section .benefit-item:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .why-partner-section .benefit-check {
    width: 32px;
    height: 32px;
    margin: 0 auto 0.4rem;
    font-size: 0.72rem;
  }

  .why-partner-section .benefit-item h4 {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
  }

  .why-partner-section .benefit-item p {
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.35;
  }

  /* Impact page */
  .impact-hero .hero-buttons {
    align-items: center;
    margin-top: 1.1rem;
  }

  .impact-hero .hero-buttons .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    font-size: 0.8rem;
  }

  .impact-hero .donation-flow-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.9rem !important;
    border-radius: 14px;
  }

  .impact-hero .donation-flow-card h3 {
    grid-column: 1 / -1;
    margin-bottom: 0.2rem;
    font-size: 1rem !important;
  }

  .impact-hero .flow-step {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0.6rem 0.45rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
  }

  .impact-hero .flow-step span {
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0 auto 0.35rem;
    font-size: 0.68rem;
  }

  .impact-hero .flow-step p {
    font-size: 0.64rem;
    line-height: 1.35;
  }

  .impact-showcase .impact-video-card {
    height: 260px;
    margin-bottom: 1.25rem;
  }

  .impact-showcase .video-overlay {
    padding: 1rem;
  }

  .impact-showcase .play-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 0.9rem;
  }

  .impact-showcase .video-content h3 {
    font-size: 1rem !important;
  }

  .impact-showcase .video-content p {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .impact-showcase .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .impact-showcase .impact-item {
    min-width: 0;
    padding: 0.85rem 0.55rem !important;
    border-radius: 12px !important;
  }

  .impact-showcase .impact-item .icon {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  .impact-showcase .impact-item h3 {
    margin: 0.45rem 0 0.2rem;
    font-size: 1.25rem !important;
  }

  .impact-showcase .impact-item p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .impact-showcase .impact-quote {
    margin-top: 1rem !important;
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .impact-showcase .impact-quote blockquote {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .impact-showcase .quote-author {
    margin-top: 0.75rem;
  }

  .impact-showcase .quote-author img {
    width: 44px;
    height: 44px;
  }

  .impact-showcase + .content-section .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .impact-showcase + .content-section .testimonial-card {
    min-width: 0;
    padding: 0.8rem 0.65rem !important;
    border-radius: 12px;
  }

  .impact-showcase + .content-section .testimonial-card p {
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .impact-showcase + .content-section .testimonial-card strong {
    margin-top: 0.55rem;
    font-size: 0.75rem;
  }

  .impact-showcase + .content-section .testimonial-card span {
    font-size: 0.65rem;
  }

  /* Blog: retain the content layout while slimming tabs and type. */
  .blog-hero-modern h1 {
    font-size: 1.55rem !important;
    line-height: 1.25;
  }

  .blog-hero-modern p {
    font-size: 0.78rem;
  }

  .blog-index-section .blog-filters {
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }

  .blog-index-section .blog-filters a {
    min-height: 30px;
    margin-bottom: 0 !important;
    padding: 0.35rem 0.6rem;
    font-size: 0.66rem;
    line-height: 1.1;
  }

  .blog-index-section .featured-blog-modern h2 {
    font-size: 1.05rem !important;
    line-height: 1.3;
  }

  .blog-index-section .featured-blog-modern p {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .blog-index-section .blog-category,
  .blog-index-section .blog-meta,
  .blog-index-section .blog-read-more {
    font-size: 0.68rem;
  }

  .blog-index-section .blog-card-content h3 {
    font-size: 0.95rem !important;
    line-height: 1.3;
  }

  .blog-index-section .featured-blog-modern .btn {
    min-height: 38px;
    padding: 0.55rem 0.75rem;
    font-size: 0.74rem;
  }

  /* Contact: preserve the form, compact only its surrounding content. */
  .contact-hero .story-hero-grid {
    gap: 1.2rem !important;
  }

  .contact-hero .contact-info-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0;
    padding: 0.75rem !important;
    border-radius: 14px;
  }

  .contact-hero .contact-info-panel > div {
    min-width: 0;
    padding: 0.7rem 0.5rem;
    text-align: center;
  }

  .contact-hero .contact-info-panel i {
    margin-bottom: 0.2rem;
    font-size: 1rem;
  }

  .contact-hero .contact-info-panel strong {
    font-size: 0.76rem;
  }

  .contact-hero .contact-info-panel span {
    overflow-wrap: anywhere;
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .contact-form-section .contact-side-copy h2 {
    font-size: 1.3rem !important;
    line-height: 1.3;
  }

  .contact-form-section .contact-side-copy > p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .contact-form-section .contact-mini-cards {
    gap: 0.45rem;
    margin-top: 0.8rem;
  }

  .contact-form-section .contact-mini-cards span {
    padding: 0.45rem 0.65rem;
    font-size: 0.68rem;
  }

  .faq-section .section-header h2 {
    font-size: 1.3rem !important;
  }

  .faq-section .faq-question {
    padding: 0.85rem 0.75rem 0.85rem 0.95rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .faq-section .faq-question i {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .faq-section .faq-answer p {
    padding: 0 0.95rem 0.9rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Facilitation cards use a compact two-up phone layout. */
  .facilitation-process-section .feature-grid,
  .facilitated-cohorts-section .cohorts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .facilitation-process-section .feature-item,
  .facilitated-cohorts-section .cohort-card {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
    text-align: center;
  }

  .facilitation-process-section .feature-item:last-child:nth-child(odd),
  .facilitated-cohorts-section .cohort-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .facilitation-process-section .feature-item i {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
  }

  .facilitation-process-section .feature-item h3,
  .facilitated-cohorts-section .cohort-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.82rem !important;
    line-height: 1.25;
  }

  .facilitation-process-section .feature-item p,
  .facilitated-cohorts-section .cohort-card p {
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.35;
  }

  .facilitated-cohorts-section .cohort-card span {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.6rem;
  }

  /* Volunteer and mentor cards */
  .volunteer-roles-section .modern-roles,
  .volunteer-testimonials-section .testimonials-grid,
  .mentor-impact-section .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .volunteer-roles-section .role-item,
  .volunteer-testimonials-section .testimonial-card,
  .mentor-impact-section .feature-item {
    min-width: 0;
    padding: 0.85rem 0.65rem !important;
    border-radius: 12px;
    text-align: center;
  }

  .volunteer-testimonials-section .testimonial-card:last-child:nth-child(odd),
  .mentor-impact-section .feature-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .volunteer-roles-section .role-item i,
  .mentor-impact-section .feature-item i {
    width: 38px;
    height: 38px;
    margin: 0 auto 0.4rem;
    font-size: 0.95rem;
  }

  .volunteer-roles-section .role-item h3,
  .mentor-impact-section .feature-item h3 {
    margin-bottom: 0.3rem;
    font-size: 0.82rem !important;
    line-height: 1.25;
  }

  .volunteer-roles-section .role-item p,
  .mentor-impact-section .feature-item p,
  .volunteer-testimonials-section .testimonial-card p {
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.35;
  }

  .volunteer-testimonials-section .testimonial-card strong {
    margin-top: 0.45rem;
    font-size: 0.74rem;
  }

  .volunteer-testimonials-section .testimonial-card span {
    font-size: 0.62rem;
  }

  /* Partner page cards */
  .partners-page-hero .hero-buttons {
    align-items: center;
  }

  .partners-page-hero .hero-buttons .btn,
  .partners-cta-section .partners-cta-actions .btn {
    width: min(72vw, 230px) !important;
    max-width: 100% !important;
    min-height: 40px;
    padding: 0.6rem 0.8rem;
    font-size: 0.76rem;
  }

  .partners-intro .partnership-value-grid,
  .partner-collection .partners-page-grid,
  .partner-collection .partners-page-grid-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  .partners-intro .partnership-value-grid article,
  .partner-collection .partners-page-card,
  .partner-collection .partners-page-card-featured {
    min-width: 0;
    padding: 0.8rem 0.6rem !important;
    border-radius: 12px;
  }

  .partners-intro .partnership-value-grid article:last-child:nth-child(odd),
  .partner-collection .partners-page-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 0.35rem);
    justify-self: center;
  }

  .partners-intro .partnership-value-grid i {
    width: 38px;
    height: 38px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
  }

  .partners-intro .partnership-value-grid h3,
  .partner-collection .partners-page-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.82rem !important;
    line-height: 1.25;
  }

  .partners-intro .partnership-value-grid p,
  .partner-collection .partners-page-card > p {
    display: -webkit-box;
    margin-bottom: 0.5rem;
    overflow: hidden;
    font-size: 0.64rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .partner-collection .partner-card-topline,
  .partner-collection .partner-type-pill {
    font-size: 0.58rem;
  }

  .partner-collection .partners-page-logo,
  .partner-collection .partners-page-logo-small {
    height: 64px;
    margin-bottom: 0.5rem;
    border-radius: 10px;
  }

  .partner-collection .partners-page-logo img {
    max-height: 44px;
  }

  .partner-collection .partners-page-card-footer {
    align-items: flex-start;
    margin-top: auto;
    padding-top: 0.5rem;
    gap: 0.25rem;
    font-size: 0.58rem;
  }

  .partners-cta-section .partners-page-cta {
    gap: 0.8rem;
    padding: 1.1rem !important;
    border-radius: 14px;
  }

  .partners-cta-section .partners-page-cta h2 {
    font-size: 1.2rem !important;
  }

  .partners-cta-section .partners-page-cta p:not(.eyebrow) {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .partners-cta-section .partners-cta-actions {
    align-items: center;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-gutter: 0.875rem;
    --mobile-section-space: 2.25rem;
    --mobile-card-padding: 1rem;
  }

  main h1 {
    font-size: clamp(1.7rem, 8vw, 1.95rem) !important;
  }

  main h2 {
    font-size: clamp(1.35rem, 6.5vw, 1.55rem) !important;
  }

  main h3 {
    font-size: 1.08rem !important;
  }

  .home-hero {
    min-height: min(64svh, 520px) !important;
    padding-block: 2.5rem !important;
  }

  .story-hero,
  .programs-hero-modern,
  .get-involved-hero,
  .donate-hero,
  .facilitate-hero,
  .hire-hero,
  .mentor-hero,
  .volunteer-hero,
  .skill-detail-hero {
    padding-block: 2.35rem !important;
  }

  .story-hero-image img,
  .programs-hero-media img,
  .rounded-image {
    height: 210px !important;
  }

  .donation-confirmation-modal {
    padding: 1rem 0.85rem !important;
  }

  .donation-confirmation-modal h1 {
    font-size: 1.35rem !important;
  }

  .donation-confirmation-modal .form-actions {
    gap: 0.5rem;
  }

  .donation-confirmation-modal .form-actions .btn {
    min-height: 40px;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
  }
}

/* Keep paired mobile cards readable on the narrowest phones. */
@media (max-width: 360px) {
    .path-section .path-cards,
    .skills-section .home-skills-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar .nav-links,
  .donation-confirmation-modal {
    transition: none !important;
    animation: none !important;
  }
}