@media(max-width:600px){
  .walk-scene #intention .walk-panel{transform:translate(7vw,16vh)!important;transform-style:flat!important}
  /* Reserve an actual place for the garden between the title and the information. */
  .walk-scene #explorer .walk-panel{transform:translate(7vw,15vh)!important;transform-style:flat!important}
  .walk-scene #explorer h2{font-size:clamp(30px,9.5vw,38px)}
  .walk-scene #explorer .explorer-caption{margin-top:calc(var(--mobile-garden-slot,200px) + 34px);max-width:100%}
  .walk-scene #explorer .explorer-caption p{font-size:12px;line-height:1.6}
  .walk-scene #explorer .explorer-caption h3{font-size:17px;line-height:1.15;margin-bottom:7px}
  .walk-scene #explorer .garden-peek{margin-top:8px;min-height:34px}
  .walk-scene #explorer .walk-ambiance{margin-top:8px}
  /* The quote is a scrollable garden notebook, with the live model kept in view. */
  .walk-scene[data-active-stage="5"] .walk-footer{display:block;bottom:max(56px,calc(env(safe-area-inset-bottom,0px) + 24px))}
  .walk-scene[data-active-stage="5"] .walk-footer .walk-scroll,.walk-scene[data-active-stage="5"] .walk-footer .film-button{display:none}
  .whole-quote .quote-leaf{max-height:var(--quote-mobile-height,calc(100svh - 190px));padding:23px 16px 24px;border-radius:40px 7px 40px 7px;scroll-padding-top:calc(var(--composer-sticky-height,230px) + 12px);overscroll-behavior-y:contain}
  .walk-scene .whole-quote .quote-intro h2{font-size:30px;line-height:1.03;margin:10px 0}
  .whole-quote .quote-intro>p{display:none}
  .whole-quote .project-composer{position:sticky;top:0;z-index:5;margin:0 -5px;padding:10px 5px 8px;background:#103728;border:0;border-bottom:1px solid #d6e3b83d;border-radius:14px 3px 14px 3px}
  .whole-quote .project-composer summary{font-size:12px;min-height:25px}
  .whole-quote .project-composer .composer-preview{height:clamp(140px,23svh,195px);aspect-ratio:auto;min-height:0;margin:0 -6px}
  .whole-quote .project-composer .composer-preview>.garden-frame{height:100%;max-height:none;width:100%;margin:0;object-fit:contain}
  .whole-quote .project-composer .model-toolbar{margin:2px 0 4px;gap:6px}
  .whole-quote .project-composer .model-toolbar button{min-height:32px;min-width:32px}
  .whole-quote .project-composer .model-toolbar>span{font-size:8px;max-width:100px}
  .whole-quote .project-composer .model-materials{margin:6px 0 0;gap:7px 14px}
  .whole-quote .project-composer .model-materials legend{font-size:8px;margin-bottom:4px}
  .whole-quote .project-composer .model-materials button{font-size:9px;padding:6px 9px}
  .whole-quote .project-composer .composer-tags,.whole-quote .project-composer .composer-photos{display:none}
  .whole-quote .project-composer .model-feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;min-height:0}
  .whole-quote .project-composer .model-note{display:block;font-size:7px;line-height:1.4;margin:4px 0 0;color:#c3d1ac}
  .whole-quote #quote-form{margin-top:16px}
  .whole-quote .quote-steps{margin-bottom:15px}
  .whole-quote .quote-panel h3{font-size:22px;line-height:1.15}
  .whole-quote .service-choice>span{padding:10px;font-size:10px}
}
/* Two real rows: the preview cannot cover the independently scrolling form. */
@media(max-width:600px){
  .whole-quote .quote-leaf{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;height:var(--quote-mobile-height,calc(100svh - 190px));overflow:hidden;padding:12px 14px;border-radius:34px 7px}
  .whole-quote .quote-intro{display:none}
  .whole-quote .project-composer{position:relative;top:auto;margin:0;padding:0 0 8px;background:transparent;border-radius:0}
  .whole-quote .project-composer .composer-preview{height:clamp(120px,19svh,160px)}
  .whole-quote .project-composer summary{min-height:27px}
  .whole-quote .project-composer .model-toolbar>span{display:none}
  .whole-quote .project-composer .model-toolbar{justify-content:center;margin:0}
  .whole-quote .project-composer .model-toolbar button{min-height:30px}
  .whole-quote .project-composer .model-materials{margin-top:5px;justify-content:center}
  .whole-quote .project-composer .model-materials fieldset{display:flex;align-items:center;gap:4px}
  .whole-quote .project-composer .model-materials fieldset[hidden]{display:none}
  .whole-quote .project-composer .model-materials legend{float:left;margin:0 3px 0 0;line-height:26px}
  .whole-quote #quote-form{min-height:0;height:100%;max-height:100%;align-self:stretch;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0;padding:12px 2px 28px;scroll-padding-top:12px;scrollbar-width:thin;scrollbar-color:#bfd29666 transparent}
  .whole-quote .quote-steps{margin-bottom:12px}
  .whole-quote .quote-panel h3{font-size:20px}
}
@media(max-width:600px) and (max-height:740px){
  .walk-scene #explorer h2{font-size:34px}
  .walk-scene #explorer .explorer-caption h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .whole-quote .quote-leaf{padding:18px 14px 22px}
  .walk-scene .whole-quote .quote-intro h2{font-size:27px}
  .whole-quote .quote-intro>p{font-size:10px;margin-bottom:10px}
  .whole-quote .project-composer .composer-preview{height:140px}
}
@media(max-width:359px) and (max-height:740px){.walk-scene #explorer h2{font-size:30px}}
@media(max-width:600px){
  .whole-quote .project-composer .model-materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .whole-quote .project-composer .model-materials fieldset{display:block;text-align:center}
  .whole-quote .project-composer .model-materials legend{float:none;width:100%;line-height:14px}
  .whole-quote .project-composer .model-materials button{font-size:8px;padding:5px 7px;margin:0 2px}
}
@media(max-width:600px) and (max-height:740px){
  .whole-quote .quote-leaf{padding:12px 14px}
  .whole-quote .project-composer .composer-preview{height:110px}
}