/* Responsive layer. The page's layout is inline styles written for a desktop canvas; these rules
   (hooked by the r-* classes) adapt it to tablets and phones. !important is needed to win over
   the inline styles. */
:root {
  --edge: clamp(20px, 5vw, 96px);   /* header + hero: content spread to the screen edges */
  /* header + hero share one container (max 1520px), so the logo lines up with the hero text
     and the phone pill with the call-back card at every width */
  --hero-pad: max(var(--edge), calc((100% - 1520px) / 2));
  --gutter: 72px;                    /* other sections: side padding around the 1136px column */
}
.r-hero-media image-slot { display: block; width: 100%; height: 100%; }
.r-header-phone a { white-space: nowrap; }
/* the mobile menu exists only on phones (it closes itself if the screen widens) */
@media (min-width: 761px) { .r-mobile-menu { display: none !important; } }
/* services: photo height scales with the screen */
.r-svc { --svc-photo: clamp(220px, 27vh, 320px); }
@media (max-width: 1024px) { .r-header { gap: 16px !important; } .r-nav { gap: 14px !important; } }

@media (max-width: 1200px) {
  :root { --gutter: 48px; }
  .r-oneline { white-space: normal !important; }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  .r-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .r-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-wrap, .r-oneline { white-space: normal !important; }
  .r-mv { gap: 56px !important; }
  .r-about { min-height: 0 !important; }
  .r-svc { min-height: 0 !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .r-diff { min-height: 0 !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .r-tag { min-height: 0 !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .r-tag-photos { height: 560px !important; }
  .r-mission-photo, .r-collage { height: 440px !important; }
  .r-about-grid { padding-top: 72px !important; padding-bottom: 72px !important; }
  .r-about-photo { height: 460px !important; }

  /* hero: text, then the call-back card, over a softer full-width wash so text stays legible */
  .r-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; padding-top: 48px !important; padding-bottom: 56px !important; }
  .r-hero-grid > :last-child { width: 100%; max-width: 560px; box-sizing: border-box; }
  .r-hero-overlay { background: linear-gradient(180deg, rgba(250,250,247,.94) 0%, rgba(250,250,247,.82) 55%, rgba(250,250,247,.6) 100%) !important; }

  .r-banner-panel { width: 62% !important; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; }

  /* header: logo on the left, a hamburger on the right; links + phone live in the menu */
  .r-header { grid-template-columns: minmax(0, 1fr) auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .r-header > img { height: 46px !important; }
  .r-nav, .r-header-phone { display: none !important; }
  .r-burger { display: inline-flex !important; }

  .r-h2 { font-size: 32px !important; }
  .r-hero-title { font-size: 40px !important; }
  .r-hero { min-height: 0 !important; }

  .r-grid3 { grid-template-columns: minmax(0, 1fr) !important; }
  .r-svc-head { flex-wrap: wrap; align-items: flex-start !important; gap: 20px !important; }
  .r-about-photo { height: 340px !important; }
  .r-badge { left: 12px !important; top: 12px !important; width: 84px !important; height: 84px !important; }
  /* belief card first, then the two photos stacked full width */
  .r-tag-photos { display: flex !important; flex-direction: column; height: auto !important; gap: 16px !important; }
  .r-tag-col { display: contents !important; }
  .r-tag-belief { order: -1; padding: 28px 24px !important; }
  .r-tag-pa, .r-tag-pb { height: 280px; }
  .r-collage { height: 300px !important; }
  .r-mission-photo { height: 280px !important; }

  /* banner: orange panel above the photo instead of beside it */
  .r-banner { height: auto !important; display: flex; flex-direction: column; }
  .r-banner-wrap { padding-top: 48px !important; padding-bottom: 32px !important; }
  .r-banner-panel { position: relative !important; width: 100% !important; clip-path: none !important; padding: 36px 24px !important; box-sizing: border-box; }
  .r-banner-media { position: relative !important; inset: auto !important; height: 240px; }

  .r-footer-top { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
  .r-footer-bar { flex-direction: column; align-items: flex-start !important; gap: 22px !important; }
  .r-footer-links { flex-wrap: wrap; gap: 8px 18px !important; }
}