/* Morry web studio — responsive (tablet / phone) */

/* ---- any viewport narrower than the 1280px design: never scroll sideways ---- */
@media (max-width: 1279px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  [style*="min-width: 1280px"] { min-width: 0 !important; }
  img, svg { max-width: 100%; }
}

/* ---- tablet landscape: keep the columns, tighten the frame ---- */
@media (max-width: 1279px) and (min-width: 1061px) {
  [style*="max-width: 1280px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1040px"],
  [style*="max-width: 980px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  header > div { gap: 20px !important; }
  header nav[data-desktop-nav] { gap: 18px !important; }
  header nav[data-desktop-nav] a { font-size: 12.5px !important; }
  header a[data-desktop-cta] { padding: 11px 18px !important; font-size: 12.5px !important; }
  #top > img[src*="logo.png"] { width: 340px !important; right: 24px !important; }
  #top > div[style*="border-radius: 999px"] { width: 460px !important; height: 460px !important; }
  h1 { font-size: 36px !important; }
}

/* ---- tablet portrait & phone: single column ---- */
@media (max-width: 1060px) {
  /* stack every multi-column grid */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* content gutters */
  [style*="max-width: 1280px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1040px"],
  [style*="max-width: 980px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* header: logo + hamburger, dropdown menu */
  header > div { padding: 12px 20px !important; gap: 12px !important; }
  header nav[data-desktop-nav],
  header a[data-desktop-cta] { display: none !important; }
  header button[data-menu-toggle] { display: flex !important; }
  header [data-menu-panel] a { min-height: 48px; }

  /* hero: logo flows under the copy instead of floating */
  #top > img[src*="logo.png"] {
    position: static !important;
    transform: none !important;
    width: min(78%, 320px) !important;
    margin: 4px auto 0 !important;
  }
  #top > div[style*="border-radius: 999px"] { display: none !important; }
  #top > div[style*="max-width: 1280px"] { padding-top: 36px !important; padding-bottom: 20px !important; }
  #top { padding-bottom: 44px !important; }

  /* type scale */
  h1 { font-size: 26px !important; line-height: 1.7 !important; }
  h2 { font-size: 20px !important; }
  h2 > img[src*="leaf"] { display: none !important; }
  p, li, span, a, div { text-wrap: pretty; }

  /* hero buttons stack full width, comfortable tap targets */
  [style*="display: flex"][style*="gap: 16px"][style*="margin-top: 36px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display: flex"][style*="gap: 16px"][style*="margin-top: 36px"] > a { justify-content: center !important; }
  a[href*="forms.gle"], a[href^="mailto:"] { min-height: 46px; }

  /* horizontal step strips: wrap, drop the connecting arrows */
  [style*="align-items: flex-start"][style*="gap: 6px"],
  [style*="align-items: flex-start"][style*="gap: 4px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 22px !important;
  }
  img[src*="ic-arrow-right"][style*="margin-top: 44px"],
  img[src*="ic-arrow-right"][style*="margin-top: 50px"] { display: none !important; }

  /* flow detail rows: number + icon sit beside the text, not above it */
  [style*="grid-template-columns: 96px"] { display: flex !important; gap: 16px !important; align-items: flex-start !important; }
  [style*="grid-template-columns: 96px"] > div:first-child { flex: none; width: 64px; }

  /* generous padding trims */
  section [style*="padding: 32px 34px"],
  section [style*="padding: 30px 34px"],
  section [style*="padding: 34px 36px"],
  section [style*="padding: 28px 34px"],
  section [style*="padding: 28px 32px"],
  section [style*="padding: 28px 30px"],
  section [style*="padding: 26px 30px"] { padding: 24px 20px !important; }

  /* price rows: label / amount stack neatly */
  [style*="border-radius: 14px"][style*="padding: 20px 26px"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 20px !important;
  }

  /* footer */
  footer > div { gap: 26px !important; }
  footer > div:last-child > div { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}

@media (max-width: 560px) {
  /* flow detail rows on small phones: keep only the step number beside the text */
  [style*="grid-template-columns: 96px"] { gap: 12px !important; }
  [style*="grid-template-columns: 96px"] > div:first-child { width: 40px !important; }
  [style*="grid-template-columns: 96px"] > div:first-child img { display: none !important; }
  [style*="grid-template-columns: 96px"] h2 { font-size: 18px !important; }
  [style*="grid-template-columns: 96px"] p { font-size: 12.5px !important; }

  h1 { font-size: 23px !important; }
  [style*="font-size: 34px"] { font-size: 28px !important; }
  [style*="font-size: 30px"][style*="Zen Old Mincho"] { font-size: 25px !important; }
  header > div > a:first-child span[style*="font-size: 18px"] { font-size: 15px !important; }
  header > div > a:first-child span[style*="letter-spacing: 0.2em"] { letter-spacing: .12em !important; }
  #top span[style*="white-space: nowrap"] { white-space: normal !important; }
  section [style*="padding: 56px 40px"],
  section [style*="padding: 52px 40px"],
  section [style*="padding: 48px 40px"],
  section [style*="padding: 44px 40px"],
  section [style*="padding: 42px 40px"] { padding-top: 34px !important; padding-bottom: 34px !important; }
}