/* Responsive finishing layer. Wide desktop composition remains untouched from 1200px. */
@media (max-width: 960px) {
  :root { --pad: clamp(22px, 5vw, 40px); }

  html { scroll-padding-top: 88px; }
  body { min-width: 0; }
  main, main > section, .shell { min-width: 0; }
  main > section[id] { scroll-margin-top: 78px; }

  /* Use the compact navigation throughout phone and tablet widths. */
  .site-header {
    min-height: 78px;
    height: auto;
    padding-block: 14px;
    flex-wrap: wrap;
  }

  .site-header nav {
    width: 100%;
    padding: 12px 0 0;
    justify-content: space-between;
    gap: 9px;
    font-size: 13px;
  }

  .js-enabled .site-header {
    height: 78px;
    min-height: 0;
    padding-block: 0;
    flex-wrap: nowrap;
  }

  .js-enabled .site-header.scrolled { height: 72px; }

  .js-enabled .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0 10px 12px;
    border: 0;
    background: transparent;
    font-size: 12px;
  }

  .menu-lines {
    position: relative;
    display: block;
    width: 22px;
    height: 12px;
    border-block: 1px solid currentColor;
    transition: transform .3s;
  }

  .menu-toggle[aria-expanded="true"] .menu-lines {
    height: 1px;
    border-bottom: 0;
    transform: rotate(-45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-lines::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid currentColor;
    transform: rotate(90deg);
  }

  .js-enabled .site-header nav {
    position: absolute;
    inset: 100% 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    padding: 16px var(--pad) 24px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 15px 25px #2f494210;
    font-size: 16px;
  }

  .js-enabled .site-header nav:not(.open) { display: none; }
  .js-enabled .site-header nav.open { animation: hero-enter .4s var(--ease) both; }
  .js-enabled .site-header nav > a:not(.nav-cta) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 9px;
  }

  .js-enabled .site-header nav .nav-cta {
    min-height: 48px;
    margin-top: 10px;
    padding-inline: 18px;
    border-color: var(--green);
    background: transparent;
    color: var(--ink);
    font-size: 14px;
  }

  .site-header.over-hero nav a:focus-visible { outline-color: var(--clay); }

  /* Sequential flow prevents the hero title and intro from colliding at 601–800px. */
  .hero {
    min-height: max(820px, 100svh);
    padding: 130px var(--pad) 100px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(64px, 10vw, 96px);
  }

  .hero-copy {
    width: min(78%, 560px);
    max-width: none;
    align-self: flex-start;
  }

  .hero h1 { font-size: clamp(64px, 10vw, 90px); }

  .hero-intro {
    position: relative;
    inset: auto;
    width: min(72%, 520px);
    max-width: none;
    margin: 0;
    padding-top: 19px;
    align-self: flex-end;
    transform: none;
  }

  .hero-description {
    max-width: none;
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.4;
  }

  .hero-actions { margin-top: 20px; }
  .hero-orbit { top: 108px; }

  .about::before { inset-inline: 0; }
  .about-copy h2 { overflow-wrap: anywhere; }

  .reflection-wash {
    background:
      linear-gradient(180deg, #2f49429e 0%, #2f49424f 32%, transparent 55%, #2f494216 73%, #2f4942a6 100%);
  }

  .plans #plans-title,
  .plans #plans-title .script-word { color: var(--ink); }

  .plan, .garden-card, .private-plan { min-width: 0; }
  .button, .underlink, .offering-link { max-width: 100%; }
  .button, .offering-link { overflow-wrap: anywhere; }
}

/* Mid-size laptops keep the desktop header, but the hero needs a sequential flow. */
@media (min-width: 961px) and (max-width: 1199px) {
  .about::before { inset-inline: 0; }

  .hero {
    min-height: max(840px, 100svh);
    padding: 140px var(--pad) 115px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 54px;
  }

  .hero-copy {
    width: min(62%, 650px);
    max-width: none;
    align-self: flex-start;
  }

  .hero-intro {
    position: relative;
    inset: auto;
    width: min(56%, 580px);
    max-width: none;
    margin: 0;
    padding-top: 19px;
    align-self: flex-end;
    transform: none;
  }

  .hero-description {
    max-width: none;
    font-size: clamp(27px, 3.1vw, 34px);
    line-height: 1.38;
  }

  .hero-actions { margin-top: 20px; }
}

@media (max-width: 700px) {
  .garden-grid { grid-template-columns: minmax(0, 1fr); }
  .garden-card { width: 100%; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 600px) {
  :root { --pad: 22px; }

  .site-header { padding-inline: 20px; }
  .js-enabled .site-header { height: 72px; }
  .js-enabled .site-header.scrolled { height: 68px; }

  .hero {
    min-height: max(780px, 100svh);
    padding: 112px 20px 88px;
    gap: clamp(70px, 18vw, 112px);
  }

  .hero-copy { width: 100%; align-self: stretch; }
  .hero h1 { font-size: clamp(54px, 15vw, 68px); line-height: 1; }

  .hero-intro {
    width: 100%;
    max-width: 390px;
    align-self: center;
  }

  .hero-description {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.4;
    text-wrap: pretty;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  .hero-actions .button {
    width: min(100%, 300px);
    justify-content: center;
  }

  .hero-actions .underlink { align-self: center; }
  .hero-orbit { top: 95px; }

  .welcome { padding-inline: 20px; }
  .welcome h2 { font-size: clamp(38px, 11vw, 46px); }

  .about { padding-inline: 22px; }
  .about-visual { margin-inline: auto; }
  .about-copy h2 { font-size: clamp(36px, 10vw, 42px); }

  .offering-heading h2 { font-size: clamp(36px, 10vw, 44px); }
  .garden-card h3 { font-size: clamp(33px, 10vw, 39px); }

  .reflection-stage {
    min-height: max(820px, 100svh);
    padding: 76px 20px 360px;
  }

  .reflection-inner { transform: translateY(-28px); }
  .reflection h2 { font-size: clamp(29px, 8vw, 37px); }

  .plans { padding-block: 72px; }
  .plans .plan { padding: 27px 22px 23px; }
  .plans .plan h3 { font-size: clamp(29px, 9vw, 32px); }
  .plans .private-plan { padding: 22px; }

  .faq { padding-block: 70px; }
  .faq-layout { gap: 30px; }
  .faq-heading h2 { font-size: clamp(43px, 12vw, 54px); }
  .faq-item summary {
    grid-template-columns: 22px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 19px 0;
    font-size: clamp(18px, 5.7vw, 21px);
  }
  .faq-answer { padding: 0 2px 23px 30px; }

  .contact {
    min-height: max(620px, 80svh);
    border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  }
  .contact-inner { width: 100%; padding: 66px 22px 70px; }
  .contact h2 { font-size: clamp(45px, 13vw, 62px); line-height: 1.07; }
  .contact .button {
    width: min(100%, 310px);
    min-width: 0;
    padding-inline: 16px;
    gap: 12px;
    white-space: nowrap;
    font-size: 13px;
  }

  .contact-links { flex-wrap: wrap; row-gap: 10px; }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-top p { order: 0; width: auto; }
  .footer-bottom { align-items: flex-start; row-gap: 12px; }
}

@media (max-width: 360px) {
  :root { --pad: 18px; }

  .site-header { padding-inline: 16px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 22px; }
  .js-enabled .menu-toggle { padding-left: 8px; }

  .hero { padding-inline: 18px; }
  .hero h1 { font-size: clamp(52px, 17vw, 60px); }
  .hero-description { font-size: 22px; }

  .garden-card { padding: 26px 22px 23px; }
  .plans .plan { padding-inline: 18px; }
  .plans .private-plan { padding-inline: 18px; }

  .faq-item summary { font-size: 18px; }
  .contact-inner { padding-inline: 18px; }
  .contact .button { font-size: 12.5px; }
}

@media (max-width: 960px) and (max-height: 500px) {
  .js-enabled .site-header { height: 68px; }

  .hero {
    min-height: 760px;
    padding-top: 105px;
    padding-bottom: 76px;
    gap: 38px;
  }

  .hero-copy { width: min(72%, 480px); }
  .hero h1 { font-size: clamp(56px, 9vw, 72px); }
  .hero-intro { width: min(76%, 500px); }
  .hero-description { font-size: clamp(20px, 3.5vw, 24px); }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
}

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

/* The three footer rows share one exact central axis on wide layouts. */
@media (min-width: 801px) {
  .footer-top,
  .footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .footer-top > :first-child,
  .footer-bottom > :first-child { justify-self: start; }

  .footer-top > :nth-child(2),
  .footer-bottom > .footer-links {
    grid-column: 2;
    justify-self: center;
  }

  .footer-top > :last-child { justify-self: end; }
}

@media (max-width: 600px) {
  .footer-top > p {
    align-self: center;
    width: 100%;
    text-align: center;
  }

  .footer-bottom > :first-child {
    width: 100%;
    text-align: center;
  }

  .footer-bottom .footer-links { justify-content: center; }
}