/* Curato Advisory — shared responsive layer.
   Added by the mobile optimization pass. Desktop composition is unchanged: every rule
   here is scoped to a max-width media query, or (for .r-cta) to sub-desktop widths only.
   The production pages carry inline styles, so layout overrides that must beat an inline
   declaration use !important. They are deliberately kept to a small, shared set of
   structural rules rather than per-element patches. */

/* ---------- global safety ---------- */
body { overflow-wrap: break-word; }
img { max-width: 100%; }

/* ---------- responsive grids (classes injected on the exported markup) ---------- */
@media (max-width: 1023px) {
  .r-g4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 899px) {
  .r-g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-split { grid-template-columns: 1fr !important; }
  .r-footer { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .r-g2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 639px) {
  .r-g3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
  .r-footer { grid-template-columns: 1fr !important; }
}
@media (max-width: 539px) {
  .r-g4 { grid-template-columns: 1fr !important; }
}

/* Image mosaics with fixed desktop row heights breathe better as a single stack. */
@media (max-width: 767px) {
  .r-mosaic { grid-template-rows: auto !important; }
  .r-mosaic > img { grid-row: auto !important; height: 220px !important; }
}

/* ---------- touch targets ---------- */
@media (max-width: 1023px) {
  .r-cta {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  input, textarea, select, button[type="submit"] { min-height: 44px; }
  textarea { min-height: 96px; }
  /* Carousel dots stay 9px visually; the hit area is expanded invisibly. */
  [data-shot-go] { position: relative; }
  [data-shot-go]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* Footer navigation, phone and email links are the smallest tap targets on the site. */
@media (max-width: 767px) {
  footer a,
  address a[href^="tel:"],
  address a[href^="mailto:"],
  a[href*="maps.app.goo.gl"],
  a[style*="border-bottom:2px solid #1B3A52"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
}

/* ---------- header ---------- */
@media (max-width: 1023px) {
  #headerBar {
    height: 72px !important;
    padding: 0 clamp(16px, 4.5vw, 24px) !important;
    gap: 12px !important;
  }
  #headerLogo { height: 44px !important; }
  .r-nav { display: none !important; }
  .r-burger { display: inline-flex !important; }
}

.r-burger {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.r-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #E8E9E4;
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1), opacity 140ms;
}
.r-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.r-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.r-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mobile navigation drawer ---------- */
.r-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(34, 43, 66, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px clamp(16px, 4.5vw, 24px) calc(20px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
  .r-drawer[data-open="true"] { display: block; }
}
.r-drawer a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.r-drawer a[aria-current="page"] { color: #FFFFFF; }
.r-drawer a[aria-current="page"]::before {
  content: "";
  width: 3px;
  height: 16px;
  margin-right: 10px;
  background: #E8E9E4;
  border-radius: 2px;
}
.r-drawer-group { padding: 4px 0 0; }
.r-drawer-label {
  display: block;
  padding: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.r-drawer-group a { padding-left: 14px; font-size: 15px; }
.r-drawer-cta {
  justify-content: center;
  margin-top: 18px;
  border: 1.5px solid #E8E9E4 !important;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E8E9E4 !important;
}
body[data-nav-open="true"] { overflow: hidden; }

/* ---------- eMoney screenshot carousel ---------- */
@media (max-width: 1023px) {
  .r-shotstage { height: 480px !important; }
  .r-shotstage [data-shot-slide] { width: 200px !important; margin: -225px 0 0 -100px !important; }
}
@media (max-width: 767px) {
  .r-shotstage { height: 420px !important; }
  .r-shotstage [data-shot-slide] { width: 176px !important; margin: -199px 0 0 -88px !important; }
}
@media (max-width: 479px) {
  .r-shotstage { height: 380px !important; }
  .r-shotstage [data-shot-slide] { width: 156px !important; margin: -177px 0 0 -78px !important; }
}

/* ---------- long strings ---------- */
.r-wrap { overflow-wrap: anywhere; word-break: normal; }

/* ---------- sticky contact bar ---------- */
body { padding-bottom: 68px; }
@media (max-width: 1100px) { #scbTagline { display: none !important; } }
@media (max-width: 760px) { #scbEmail { display: none !important; } }
@media (max-width: 560px) {
  #scbBar { gap: 14px !important; }
  #scbBar a[href^="tel:"] { font-size: 13px !important; }
}