/* =====================================================================
   Sprezzatura — responsive layer (added on top of the original design).
   Desktop is untouched; everything here is gated behind breakpoints and
   keyed on classes that responsive.js assigns at runtime via the CSSOM,
   plus the stable #home-nav id. !important is required to beat the
   framework's inline styles.
   ===================================================================== */

html { scroll-padding-top: 84px; }

/* ---------- Tablet ( <=1024px ) ---------- */
@media (max-width: 1024px) {
  .r-padx      { padding-left: 34px !important; padding-right: 34px !important; }
  .r-grid-3,
  .r-grid-4    { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Phone ( <=760px ) ---------- */
@media (max-width: 760px) {
  html, body            { overflow-x: hidden; }
  .r-padx               { padding-left: 20px !important; padding-right: 20px !important; }
  .r-grid               { grid-template-columns: 1fr !important; }
  .r-grid > *           { border-right: none !important; }   /* drop vertical dividers when stacked */
  .r-biggap             { gap: 34px !important; }            /* tame oversized desktop gaps */
  .r-bighead            { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.06 !important; }
  .r-left48             { left: 20px !important; }
  input, textarea, select { width: 100% !important; }

  /* Nav: keep the logo, swap the desktop links + CTA for a burger menu */
  #home-nav             { padding-left: 20px !important; padding-right: 20px !important; }
  #home-nav > div       { display: none !important; }
  #home-nav > a:last-of-type { display: none !important; }
}

/* ---------- Mobile menu (built by responsive.js) ---------- */
.r-burger { display: none; }
.r-menu   { display: none; }

@media (max-width: 760px) {
  .r-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 12px; right: 16px; z-index: 120;
    width: 44px; height: 44px; padding: 11px;
    background: transparent; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .r-burger span {
    display: block; width: 100%; height: 1.5px; background: #16181C;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  }
  .r-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .r-burger.open span:nth-child(2) { opacity: 0; }
  .r-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .r-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 110;
    background: rgba(244,245,246,0.98);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 104px 26px max(34px, env(safe-area-inset-bottom)) 26px;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
  }
  .r-menu.open { transform: none; }
  .r-menu a {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 30px;
    letter-spacing: -0.02em; color: #16181C !important;
    padding: 16px 0; border-bottom: 1px solid rgba(22,24,28,0.08);
  }
  .r-menu a.r-menu-cta {
    margin-top: 26px; border: none; text-align: center;
    font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.1em;
    text-transform: uppercase; background: #16181C; color: #F4F5F6 !important;
    padding: 18px; border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-menu       { transition: none; }
  .r-burger span { transition: none; }
}