/* =========================================
   Parwan — Responsive (solid phone → desktop)
   ========================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Header logo — keep aspect, never crush (skip wave pages — site-unify handles those) */
.site-header:not(.wave-header) .brand {
  max-width: calc(100% - 3.5rem);
}
.site-header:not(.wave-header) .brand img {
  width: auto !important;
  height: 92px !important;
  max-width: min(340px, 42vw) !important;
  max-height: 92px !important;
  object-fit: contain !important;
}
.site-footer .footer-logo img {
  width: auto !important;
  height: 72px !important;
  max-width: min(260px, 70vw) !important;
  max-height: 72px !important;
  object-fit: contain !important;
}
@media (min-width: 1081px) {
  .site-header .brand {
    max-width: none;
    flex-shrink: 0;
  }
  .site-header .brand img {
    height: 96px !important;
    max-height: 96px !important;
    max-width: 360px !important;
  }
  /* Logo already says Parwan — keep only the school line */
  .brand-text strong { display: none; }
}

.container,
.split,
.grid-2,
.grid-3,
.footer-grid,
.facts-grid,
.contact-grid,
.feature-grid,
.path-steps,
.awareness-strip,
.contact-tiles,
.cause-block,
.service-feature,
.panel,
.quote-banner,
.card,
.story-card,
.visual-card,
.emergency-band,
.leader-card,
.page-hero-inner,
.prose {
  max-width: 100%;
  min-width: 0;
}
.marquee { overflow: hidden; max-width: 100%; }

/* ---- Compact desktop / tablet landscape: hamburger ---- */
@media (max-width: 1080px) {
  .brand-text { display: none; }
  .site-header:not(.wave-header) .brand img {
    height: 78px !important;
    max-height: 78px !important;
    max-width: min(300px, 72vw) !important;
  }
  :root { --nav: 92px; }

  .nav-wrap {
    min-height: var(--nav);
    padding-block: 0.4rem;
  }

  .nav-toggle {
    display: inline-flex;
    z-index: 70;
    flex-shrink: 0;
  }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--nav) + 1rem) 1.25rem 1.4rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(11, 50, 44, 0.18);
    transform: translateY(-105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.25s ease,
      visibility 0.25s ease;
    z-index: 60;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a {
    font-size: 1.05rem;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none !important; }
  .nav-links .nav-cta {
    margin-top: 0.75rem;
    text-align: center;
    border-bottom: 0;
    padding: 0.9rem 1rem;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(26, 33, 20, 0.4);
    z-index: 55;
  }

  .contact-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .container { width: min(100% - 1.5rem, var(--max)); }
  .section { padding: 3.4rem 0; }

  .hero { min-height: 56vh; }
  .hero-content { padding: 3.2rem 0 2.6rem; max-width: 100%; }
  .hero-ornament { display: none; }
  .page-hero { padding: 2.6rem 0 1.7rem; }

  .facts-grid,
  .grid-3,
  .footer-grid,
  .feature-grid,
  .path-steps,
  .clinic-grid,
  .awareness-strip { grid-template-columns: 1fr 1fr; }

  .awareness-strip .awareness-card:last-child { grid-column: 1 / -1; }

  .split,
  .contact-grid,
  .grid-2,
  .cause-block,
  .cause-block.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr;
    gap: 1.2rem;
  }

  /* Photo first on stacked splits */
  .split > .split-media { order: -1; }

  .gallery { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .gallery figure:nth-child(n) {
    grid-column: auto;
    min-height: 0;
  }
  .gallery.flyers { grid-template-columns: 1fr 1fr; }
  .gallery.flyers figure.banner { grid-column: 1 / -1; }

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

  .split-media {
    max-height: none;
    aspect-ratio: 16 / 11;
    width: 100%;
  }
  .split-media.flyer {
    max-width: min(100%, 360px);
    max-height: none;
    aspect-ratio: auto;
  }

  .service-feature { grid-template-columns: 70px 1fr; }
  .service-feature .icon-img { width: 70px; height: 70px; }

  .map-wrap {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }

  .footer-about { max-width: none; }
  .footer-cta-bar { align-items: stretch; }

  .contact-tiles { grid-template-columns: 1fr 1fr; }
  .leader-card { grid-template-columns: 180px 1fr; }
  .leader-card .copy { padding: 1.2rem; }

  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .mosaic figure { min-height: 160px; }
  .mosaic figure:first-child {
    grid-column: span 2;
    grid-row: auto;
    min-height: 220px;
  }

  .visual-card { min-height: 220px; }

  .emergency-band {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stop sideways reveal overflow */
  .reveal-left,
  .reveal-right {
    transform: translateY(24px) !important;
  }
  .reveal-left.visible,
  .reveal-right.visible {
    transform: none !important;
  }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  :root { --nav: 100px; }

  .container { width: min(100% - 1.2rem, 100%); }

  .topbar { font-size: 0.72rem; }
  .topbar-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
    padding: 0.45rem 0;
  }

  .site-header:not(.wave-header) .brand img {
    height: 88px !important;
    max-height: 88px !important;
    max-width: min(300px, 78vw) !important;
  }
  .site-header:not(.wave-header) .brand {
    max-width: calc(100% - 3.25rem);
  }
  .site-header:not(.wave-header).scrolled .brand img {
    transform: none;
  }

  .section { padding: 3rem 0; }
  .section.section-soft { padding: 3rem 0; }
  .section-head { margin-bottom: 1.5rem; max-width: 100%; }
  .section-head h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.75rem);
    line-height: 1.2;
  }
  .section-head p { font-size: 0.93rem; }

  .hero { min-height: unset; }
  .hero-content { padding: 2.3rem 0 2rem; }
  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.05rem);
    line-height: 1.12;
  }
  .hero p {
    font-size: 0.94rem;
    max-width: 100%;
  }
  .experience-badge {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 14px;
    padding: 0.4rem;
  }
  .experience-badge span {
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem 0.2rem 0;
  }
  .hero-actions,
  .page-hero .hero-actions,
  .panel-actions,
  .footer-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    width: 100%;
  }
  .hero-actions .btn,
  .page-hero .hero-actions .btn,
  .panel-actions .btn,
  .footer-cta-actions .btn,
  .emergency-band .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .page-hero { padding: 2rem 0 1.4rem; }
  .page-hero h1 { font-size: clamp(1.45rem, 7vw, 1.7rem); }
  .page-hero p { font-size: 0.9rem; max-width: 100%; }
  .crumb { font-size: 0.78rem; }

  .facts { margin-top: -0.85rem; padding-inline: 0; }
  .facts-grid {
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }
  .fact {
    padding: 1rem 0.55rem;
    border-right: 1px solid var(--line);
  }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }
  .fact strong { font-size: 1.45rem; }
  .fact span {
    font-size: 0.7rem;
    max-width: 12ch;
    margin-inline: auto;
  }

  .grid-3,
  .grid-2,
  .footer-grid,
  .form-row,
  .media-row,
  .contact-grid,
  .feature-grid,
  .path-steps,
  .awareness-strip,
  .clinic-grid,
  .contact-tiles {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .awareness-strip .awareness-card:last-child { grid-column: auto; }

  .visual-card { min-height: 190px; }
  .feature-box,
  .path-steps li,
  .awareness-card {
    padding: 1.2rem 1.1rem;
  }
  .feature-box h3,
  .path-steps h3,
  .awareness-card h3 { font-size: 1.15rem; }
  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0.85rem;
  }
  .mosaic figure,
  .mosaic figure:first-child {
    grid-column: auto;
    grid-row: auto;
    min-height: 200px;
  }
  .floating-cta {
    display: none !important;
  }
  .visual-card .visual-body { padding: 1rem 0.95rem; }
  .visual-card h3 { font-size: 1.25rem; }

  .split { gap: 1rem; }
  .split-media {
    aspect-ratio: 4 / 3;
    max-height: none;
    border-radius: 12px;
  }
  .split-media.flyer {
    max-height: none;
    max-width: 100%;
  }
  .photo-caption {
    font-size: 0.75rem;
    padding: 0.7rem 0.85rem;
  }

  .service-feature {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.85rem;
  }
  .service-feature .icon-img {
    width: 100%;
    height: 150px;
    border-radius: 12px;
  }

  .card { padding: 1.05rem; }
  .card h3 { font-size: 1.15rem; }

  .checklist { gap: 0.5rem; }
  .checklist li { font-size: 0.9rem; }
  .why-list li { padding: 0.8rem 0.85rem; }

  .gallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    grid-auto-rows: 120px;
  }
  .gallery.flyers {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .gallery figcaption {
    font-size: 0.68rem;
    padding: 0.4rem 0.45rem;
  }

  .story-card .thumb {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
  .story-card.flyer-card .thumb { aspect-ratio: auto; }
  .story-card .body { padding: 0.9rem 1rem 1rem; }
  .story-card h3 { font-size: 1.1rem; }

  .milestone {
    grid-template-columns: 52px 1fr;
    padding: 0.9rem;
  }
  .milestone .year {
    width: 52px;
    height: 52px;
    font-size: 0.6rem;
  }

  .cause-block {
    padding: 0.85rem;
    gap: 0.85rem;
  }
  .cause-block .media {
    min-height: 150px;
    max-height: 180px;
  }
  .cause-block .media.flyer {
    min-height: 0;
    max-height: none;
  }
  .cause-block .copy h3 { font-size: 1.2rem; }

  .timeline-step {
    grid-template-columns: 30px 1fr;
    gap: 0.65rem;
  }
  .timeline-step .dot {
    width: 30px;
    height: 30px;
    font-size: 0.65rem;
  }
  .timeline-pro::before { left: 14px; }

  .quote-banner {
    padding: 1.45rem 0.95rem;
    border-radius: 14px;
  }
  .quote-banner p {
    font-size: 1.2rem;
    max-width: 100%;
  }

  .panel {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }
  .panel::before { display: none; }
  .panel h2 { font-size: 1.35rem; }

  .leader-card { grid-template-columns: 1fr; }
  .leader-card .photo { min-height: 210px; }
  .leader-card .copy { padding: 1.1rem; }
  .leader-card h3 { font-size: 1.45rem; }

  .emergency-band {
    padding: 1.3rem 1.05rem;
    border-radius: 16px;
    gap: 0.9rem;
  }
  .emergency-band h2 { font-size: 1.4rem; }

  .map-wrap {
    aspect-ratio: 1 / 1;
    min-height: 240px;
    border-radius: 12px;
  }

  .info-card,
  .form-card {
    padding: 1.05rem;
    border-radius: 14px;
  }

  .footer-inner { padding-top: 2rem; }
  .footer-grid { gap: 1.2rem; }
  .footer-logo img,
  .site-footer .footer-logo img {
    height: 64px !important;
    max-height: 64px !important;
    max-width: min(230px, 78vw) !important;
  }
  .footer-cta-bar {
    padding: 0.95rem;
    gap: 0.75rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.8rem;
  }

  .marquee-track {
    font-size: 0.7rem;
    gap: 1.4rem;
    padding: 0.65rem 0;
  }

  .btn {
    min-height: 46px;
    padding: 0.75rem 1rem;
  }

  .floating-cta {
    right: 0.7rem;
    bottom: 3.9rem;
  }
  .floating-cta a {
    font-size: 0.76rem;
    padding: 0.65rem 0.8rem;
  }
  .back-top {
    width: 42px;
    height: 42px;
    right: 0.7rem;
    bottom: 0.8rem;
  }

  /* Avoid sideways push / hover jump on small screens */
  .btn,
  .card,
  .service-feature,
  .milestone,
  .cause-block,
  .story-card,
  .panel,
  .feature-box,
  .path-steps li,
  .awareness-card,
  .visual-card,
  .contact-tile,
  .emergency-band,
  .leader-card,
  .photo-frame {
    transform: none !important;
  }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  .site-header:not(.wave-header) .brand img {
    height: 78px !important;
    max-height: 78px !important;
    max-width: min(270px, 76vw) !important;
  }
  .site-footer .footer-logo img {
    height: 56px !important;
    max-height: 56px !important;
    max-width: min(200px, 78vw) !important;
  }
  :root { --nav: 92px; }
  .hero h1 { font-size: 1.65rem; }
  .page-hero h1 { font-size: 1.35rem; }
  .fact strong { font-size: 1.3rem; }
  .gallery { gap: 0.4rem; grid-auto-rows: 110px; }
  .service-feature .icon-img { height: 120px; }
  .visual-card { min-height: 180px; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Landscape phones ---- */
@media (max-height: 430px) and (orientation: landscape) {
  .hero-content { padding: 1.5rem 0 1.3rem; }
  .nav-links {
    max-height: 100dvh;
    padding-top: calc(var(--nav) + 0.5rem);
  }
  .page-hero { padding: 1.5rem 0 1.1rem; }
}

/* ---- Touch: no hover lift ---- */
@media (hover: none), (pointer: coarse) {
  .brand:hover img,
  .site-header .brand:hover img { transform: none !important; }
  .card:hover,
  .service-feature:hover,
  .milestone:hover,
  .cause-block:hover,
  .story-card:hover,
  .panel:hover,
  .fact:hover,
  .feature-box:hover,
  .path-steps li:hover,
  .awareness-card:hover,
  .visual-card:hover,
  .contact-tile:hover,
  .emergency-band:hover,
  .leader-card:hover,
  .photo-frame:hover {
    transform: none !important;
  }
  .visual-card:hover img,
  .split-media:hover img,
  .mosaic figure:hover img {
    transform: none;
  }
}

/* ---- Unique layouts responsive ---- */
@media (max-width: 900px) {
  .clinic-hero,
  .home-intro,
  .home-gallery,
  .clinic-programs,
  .svc-feature,
  .svc-duo,
  .svc-hero-grid,
  .svc-split,
  .cause-hero-grid,
  .cause-intro,
  .ach-hero-grid,
  .ach-feature,
  .work-hero-grid,
  .work-feature,
  .home-life,
  .cause-hero-grid,
  .work-hero-grid,
  .contact-hero-grid,
  .work-banner,
  .about-split-hero,
  .about-leader-wide,
  .story-feature,
  .side-split,
  .page-contact .contact-desk {
    grid-template-columns: 1fr;
  }
  .work-gallery,
  .story-grid {
    grid-template-columns: 1fr 1fr;
  }
  .svc-pillars,
  .cause-cards,
  .cause-points,
  .ach-photo-grid,
  .work-steps {
    grid-template-columns: 1fr 1fr;
  }
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .svc-steps,
  .svc-process {
    grid-template-columns: 1fr;
  }
  .svc-process article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .svc-process article:last-child { border-bottom: 0; }
  .svc-feature .media img,
  .svc-split .media img,
  .svc-hero-photo img,
  .cause-hero-media img,
  .ach-hero-media img,
  .ach-feature .media img { min-height: 260px; max-height: 320px; }
  .svc-feature.flip .media { order: -1; }
  .svc-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.8rem 1.4rem;
  }
  .svc-row { grid-template-columns: 56px 1fr; }
  .clinic-hero { min-height: auto; }
  .clinic-hero-copy {
    max-width: none;
    padding: 2.4rem 1.4rem 1.2rem;
  }
  .clinic-hero-visual {
    min-height: 420px;
    padding: 1rem 1rem 2.2rem;
  }
  .hero-orbit {
    width: min(100%, 300px);
    height: 380px;
  }
  .hero-orb.orb-1,
  .hero-orb.orb-3 { width: 120px; height: 120px; }
  .hero-orb.orb-2 { width: 168px; height: 168px; }
  .clinic-hero-media img { min-height: 280px; max-height: 340px; }
  .home-trust {
    margin-top: -1.2rem;
    padding: 0 1.1rem;
  }
  .home-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .home-trust-grid .trust-item:nth-child(2) { border-right: 0; }
  .home-trust-grid .trust-item:nth-child(1),
  .home-trust-grid .trust-item:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .home-cta-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem 1.3rem;
  }
  .svc-rail-item { grid-template-columns: 64px 1fr; }
  .svc-rail-num { font-size: 2.1rem; }
  .about-stats-row,
  .about-mission-cols,
  .outcome-row,
  .ach-matrix {
    grid-template-columns: 1fr;
  }
  .about-stats-row .item,
  .outcome-row article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .about-stats-row .item:last-child,
  .outcome-row article:last-child { border-bottom: 0; }
  .work-banner .copy { border-left: 1px solid var(--line); }
  .edit-photo-bleed img { height: 260px; }
  .page-causes .edit-hero h1 { max-width: 18ch; }
  .page-contact .form-side,
  .page-contact .info-side,
  .page-about .about-split-hero .copy {
    padding: 2rem 1.4rem;
  }
  .page-contact .form-side { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .svc-grid,
  .svc-pillars,
  .cause-cards,
  .cause-points,
  .ach-photo-grid,
  .work-steps,
  .work-gallery,
  .story-grid { grid-template-columns: 1fr; }
  .work-feature.reverse .copy { order: 0; }
  .svc-rail-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .edit-stack article { grid-template-columns: 48px 1fr; }
  .orbit-panel .hero-orbit.orbit-compact {
    width: min(100%, 260px);
    height: 340px;
  }
  .orbit-duo .orb-main { width: 210px; height: 210px; }
  .orbit-duo .orb-accent { width: 120px; height: 120px; }
  .orbit-solo .orb-solo { width: min(86%, 240px); height: min(86%, 240px); }

  .clinic-hero-visual {
    min-height: 340px;
    padding: 0.6rem 0.6rem 1.6rem;
  }
  .hero-orbit {
    width: min(100%, 260px);
    height: 320px;
  }
  .orbit-panel {
    min-height: 280px;
    padding: 0.5rem 0;
  }
  .cause-hero-grid .orbit-panel,
  .work-hero-grid .orbit-panel,
  .home-intro .orbit-panel,
  .contact-hero-grid .orbit-panel {
    min-height: 280px;
  }
  .story-hero {
    padding: 2.2rem 0 1.8rem;
  }
  .story-hero blockquote {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }
  .story-card .media.lang-panel {
    min-height: 0;
    padding: 1.15rem 1.1rem 1.2rem;
  }
  .lang-body { font-size: 0.9rem; line-height: 1.75; }
  .lang-kicker { font-size: 1.05rem; }
  .svc-cta-actions,
  .home-cta-band .actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .svc-cta-actions .btn,
  .home-cta-band .btn {
    width: 100%;
  }
  .work-feature .media.flyer-frame {
    min-height: 240px;
  }
  .contact-quick {
    display: grid;
    gap: 0.55rem;
  }
  .home-trust-grid { grid-template-columns: 1fr 1fr; }
  .floating-cta a { white-space: nowrap; }
}
@supports (padding: max(0px)) {
  .topbar-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .floating-cta {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(3.9rem, calc(3.3rem + env(safe-area-inset-bottom)));
  }
  .back-top {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.8rem, calc(0.55rem + env(safe-area-inset-bottom)));
  }
  .nav-links {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
}