/* A stable phone viewport: browser chrome is included, keyboard focus stays local. */
@media (max-width: 650px), (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  :root { --phone-screen: 100vh; --phone-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  @supports (height: 100svh) { :root { --phone-screen: 100svh; } }
  html, body { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
  html:has(#booking-form input:focus) { scroll-behavior: auto; }
  .container { width: 90%; }
  .hero, main > .section {
    height: auto; min-height: var(--phone-screen); max-height: none;
    scroll-snap-align: none;
  }
  .hero { overflow: hidden; }
  main > .section {
    padding-top: clamp(18px, calc(var(--phone-screen) * .03), 28px); padding-bottom: var(--phone-bottom);
    overflow: visible;
  }
  h2, .services-section h2, .booking-section h2, .comparison-section h2 {
    font-size: clamp(25px, 6.9vw, 33px); line-height: 1.12; letter-spacing: -1px;
  }
  .section-sub, .comparison-section .section-sub {
    font-size: 14px; line-height: 1.4; margin-top: 7px; letter-spacing: -.2px;
  }
  .header { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
  .header nav { display: none; }
  .hero-photo { top: auto; bottom: 0; height: 49%; object-position: 72% center; }
  .hero-wash { background: linear-gradient(180deg, #d8efff 0%, #d8efff 43%, #d8efffdf 51%, #d8efff00 63%); }
  .hero-content { padding-top: clamp(22px, calc(var(--phone-screen) * .04), 40px); }
  .hero h1 { font-size: clamp(32px, 8.8vw, 48px); line-height: 1.08; letter-spacing: -1.6px; }
  .hero-subtitle { font-size: clamp(19px, 5.4vw, 25px); margin-top: 9px; }
  .benefits { gap: 10px; margin-top: clamp(16px, calc(var(--phone-screen) * .025), 25px); }
  .benefits > div { flex: 1; gap: 6px; font-size: 10px; }
  .benefits svg { width: 25px; height: 25px; }
  .hero-cta { width: 100%; min-width: 0; margin-top: clamp(18px, calc(var(--phone-screen) * .03), 28px); min-height: 48px; font-size: 16px; }
  .hero-note { margin-top: 14px; margin-left: 45%; font-size: 18px; }
  .photo-note { bottom: calc(var(--phone-bottom) + 8px); font-size: 22px; }

  /* The total is kept visible without duplicating its full itemisation on phones. */
  .calc-card { display: block; min-height: 0; margin-top: 14px; padding: 12px; }
  .cleaning-tabs button { padding: 10px 3px; font-size: 11px; min-height: 48px; }
  .cleaning-tabs button small { font-size: 9px; line-height: 1.3; }
  .area-label { margin-top: 16px; font-size: 13px; }
  .area-label strong { font-size: 25px; }
  .range-ends { margin-top: 11px; }
  .bath-row { margin-top: 15px; justify-content: space-between; gap: 12px; }
  .stepper button, .stepper output { height: 42px; }
  .extra-title { margin-top: 16px; font-size: 13px; }
  .extras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
  .extras label { gap: 5px; padding: 10px 6px; min-height: 55px; font-size: 11px; }
  .extras span { display: block; min-width: 0; }
  .extras small { margin-top: 3px; font-size: 10px; white-space: nowrap; }
  .extras input { width: 16px; height: 16px; }
  .estimate { margin-top: 13px; padding: 13px 14px; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
  .estimate > p { font-size: 12px; }
  .estimate .price { font-size: 31px; letter-spacing: -1px; }
  .estimate dl { display: none; }
  .estimate .button { grid-column: 1 / -1; min-height: 46px; margin-top: 3px; font-size: 16px; }
  .estimate > small { grid-column: 1 / -1; font-size: 10px; line-height: 1.35; margin-top: 3px; }
  .estimate > small br { display: none; }

  .zones-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .floor-plan { width: min(100%, calc(var(--phone-screen) * .35)); aspect-ratio: 1.16; margin: auto; }
  .floor-plan > img { width: 100%; height: 100%; }
  .room-label { padding: 6px 12px; font-size: 10px; }
  .zone-details { min-height: 0; }
  .room-tabs { margin-top: 0; }
  .room-tabs button { min-height: 43px; padding: 10px 5px; font-size: 13px; }
  .zone-heading { margin-top: 12px; gap: 12px; }
  .zone-heading h3 { font-size: 23px; }
  .zone-heading svg { width: 31px; height: 31px; }
  .zone-heading p { font-size: 12px; }
  .zone-list { max-width: 100%; margin: 13px 0 0; }
  .zone-list li { gap: 11px; margin-bottom: 10px; font-size: 13px; }
  .zone-list small { font-size: 11px; }
  .zone-item-icon { width: 22px; height: 22px; }
  .vase-decoration, .zone-note { display: none; }

  .comparison-section { display: flex; flex-direction: column; }
  .comparison-tabs { max-width: none; margin-top: 16px; }
  .comparison-tabs button { min-height: 45px; font-size: 13px; padding: 12px 6px; }
  .comparison { flex: 1; width: 90%; height: auto; min-height: max(190px, calc(var(--phone-screen) - 250px)); max-height: none; margin-top: 16px; margin-bottom: 0; }
  .comparison-status { flex: none; }

  /* One service card at a time; the next card is visible and can be swiped into view. */
  .service-grid { display: flex; overflow-x: auto; overflow-y: hidden; gap: 12px; margin-top: 18px; padding: 2px 2px 12px; scroll-snap-type: none; }
  .service { flex: 0 0 93%; padding: 25px 20px 18px; scroll-snap-align: none; min-width: 0; }
  .service-heading { gap: 18px; min-height: 70px; }
  .service-heading h3 { font-size: 19px; white-space: normal; }
  .service-heading p { font-size: 13px; }
  .service-heading svg { width: 43px; height: 43px; }
  .service ul { margin: 26px 0; }
  .service li { font-size: 13px; white-space: normal; margin: 14px 0; gap: 10px; }
  .duration { min-height: 48px; padding-top: 13px; font-size: 16px; }
  .service-swipe-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; }

  .booking-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
  .booking-card { padding: 13px 12px; }
  .booking-card h3 { font-size: 16px; }
  .calendar { margin-top: 8px; gap: 4px; }
  .calendar > button { width: 22px; height: 35px; padding: 0; }
  #calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  #calendar-days button { height: 45px; font-size: 14px; }
  #calendar-days small { font-size: 10px; }
  .booking-card h4 { margin: 12px 0 7px; font-size: 14px; }
  .times { gap: 7px; }
  .times button { flex: 1; width: auto; height: 42px; font-size: 15px; }
  #booking-form { margin-top: 13px; }
  #booking-form label { font-size: 12px; }
  .field-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
  #booking-form input { font-size: 16px; padding: 10px 11px; min-height: 42px; margin-top: 3px; }
  .order-card { padding: 12px 14px; }
  .order-card:after { display: none; }
  .order-content { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
  .order-content h3 { font-size: 15px; }
  .order-content > p { grid-column: 1; font-size: 12px; margin-top: 0; }
  .order-card .price { grid-column: 2; grid-row: 1 / 3; font-size: 29px; letter-spacing: -1px; margin-top: 0; }
  .order-details { display: none; }
  .order-card .button { grid-column: 1 / -1; margin-top: 6px; min-height: 46px; font-size: 16px; }
  .order-card small { grid-column: 1 / -1; font-size: 10px; margin-top: 4px; }
  .sticky-order { bottom: max(6px, env(safe-area-inset-bottom, 0px)); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .button:hover { transform: none; }
  footer { padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }
  dialog { max-height: calc(var(--phone-screen) - 32px); overflow-y: auto; }
}
@media (min-width: 360px) and (max-width: 650px) {
  .field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .phone-compact .header { padding-top: 12px; }
  .phone-compact .header .logo > span { font-size: 23px; }
  .phone-compact .hero-content { padding-top: 18px; }
  .phone-compact .hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .phone-compact .hero-subtitle { font-size: 19px; }
  .phone-compact .benefits { margin-top: 15px; }
  .phone-compact .hero-cta { margin-top: 16px; min-height: 44px; }
  .phone-compact .hero-note { display: none; }
  .phone-compact .hero-photo { height: 46%; }
  .phone-compact .service { padding: 16px 17px 12px; }
  .phone-compact .service ul { margin: 16px 0; }
  .phone-compact .service li { margin: 9px 0; }
}
@media (min-width: 651px) { .service-swipe-hint { display: none; } }
@media (min-width: 651px) and (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .hero-content { padding-bottom: var(--phone-bottom); }
  .hero-note { display: none; }
}