/* HerDen mobile repair v1 — scoped to tablets and phones. Desktop unchanged. */
@media (max-width: 920px) {
  html { overflow-x: clip; scroll-padding-top: 82px; }
  body { overflow-x: clip; min-width: 0; }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, svg { max-width: 100%; }
  main, main section, main .container, main .section-split,
  main .editorial-grid, main .steps-grid, main .feature-cards,
  main .showcase-layout, main .join-layout, main .form-layout { min-width: 0; }
  .nav-shell { z-index: 500 !important; }
  .nav-inner { position: relative !important; }
  .menu-toggle { display: block !important; flex-shrink: 0; cursor: pointer; min-width: 44px; min-height: 44px; }
  .nav-links { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 510 !important;
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-links:not(.open) { display: none !important; }
  .nav-links.open { display: flex !important; flex-direction: column !important; }
  main .section-split, main .showcase-layout, main .form-layout { grid-template-columns: minmax(0,1fr) !important; gap: 26px !important; }
  main .section-split > *, main .showcase-layout > * { min-width: 0 !important; width: 100%; }
  main .page-hero.photo-page-hero { min-height: 0 !important; padding: 55px 0 65px !important; }
  main .page-hero.photo-page-hero::before { inset: 0 !important; opacity: .19 !important; background-position: center !important; }
  main .page-hero.photo-page-hero::after { display: none !important; }
  main .page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem) !important; overflow-wrap: anywhere; }
  main .page-hero p { max-width: 42rem; }
  main .image-tiles { overflow: visible !important; scroll-snap-type: none !important; }
  main .image-tiles > .image-tile:nth-child(n) { display: block !important; min-width: 0 !important; }
  main .visual img, main .tall-visual img, main .showcase-image img,
  main .vision-feature img, main .editorial-card img { max-width: 100% !important; height: auto !important; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  input, select, textarea { max-width: 100%; font-size: 16px; }
  table { max-width: 100%; }
}
@media (max-width: 650px) {
  .container { width: calc(100% - 32px) !important; max-width: 100% !important; }
  .nav-inner { height: 72px !important; gap: 12px !important; }
  .brand-reference-image { width: min(62vw, 220px) !important; height: auto !important; }
  .nav-links { padding: 15px 20px 24px !important; }
  .section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-head h2, .section h2 { overflow-wrap: break-word; }
  /* Mobile homepage: keep entire banner artwork visible and text clearly separate. */
  body main .hero.hero-approved { display: flex !important; flex-direction: column !important;
    height: auto !important; min-height: 0 !important; overflow: hidden !important;
    background: #f9f5f3 !important; isolation: isolate; }
  body main .hero.hero-approved::before, body main .hero.hero-approved::after { display: none !important; }
  body main .hero.hero-approved > .hero-art { display: block !important; position: relative !important;
    inset: auto !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; aspect-ratio: 3 / 1 !important; z-index: 0 !important;
    background: #f9f5f3 !important; opacity: 1 !important; }
  body main .hero.hero-approved > .hero-art::after { display: none !important; }
  body main .hero.hero-approved > .hero-art img { display: block !important; width: 100% !important;
    height: 100% !important; object-fit: contain !important; object-position: center !important;
    max-width: 100% !important; }
  body main .hero.hero-approved > .container { display: block !important; position: relative !important;
    min-height: 0 !important; height: auto !important; z-index: 2 !important; }
  body main .hero.hero-approved .hero-content { width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 23px 0 35px !important; }
  body main .hero.hero-approved h1 { font-size: clamp(2.1rem,9vw,3.3rem) !important; line-height: 1.09 !important;
    margin: 12px 0 16px !important; color: #080d26 !important; }
  body main .hero.hero-approved p { color: #273047 !important; }
  body main .hero.hero-approved .btn-group { display: flex !important; flex-direction: column !important; gap: 11px !important; }
  body main .hero.hero-approved .btn-group .btn { flex: auto !important; width: 100% !important;
    text-align: center !important; justify-content: center !important; white-space: normal !important; }
  body main .page-hero.photo-page-hero { padding: 36px 0 45px !important; }
  body main .page-hero.photo-page-hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.12 !important; margin: 13px 0 !important; }
  body main .page-hero.photo-page-hero p { font-size: .96rem !important; }
  body main .image-tiles { display: grid !important; grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important; }
  body main .image-tiles > .image-tile:nth-child(n) { grid-column: auto !important; width: 100% !important;
    min-width: 0 !important; min-height: 0 !important; height: auto !important;
    aspect-ratio: 3 / 2 !important; flex: none !important; }
  body main .image-tiles > .image-tile img { display: block !important; width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important; }
  body main .section-split, body main .showcase-layout { display: grid !important;
    grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  body main .feature-cards, body main .editorial-grid, body main .steps-grid,
  body main .pillars .pillar-grid { grid-template-columns: minmax(0,1fr) !important; }
  body main .herden-wellbeing-photo { width: 100% !important; height: auto !important;
    object-fit: contain !important; aspect-ratio: auto !important; }
  body main .join-layout, body main .footer-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  body main .join-layout .btn { width: 100% !important; justify-content: center !important; }
  .footer-grid { gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
  .btn { white-space: normal; max-width: 100%; }
}