/* mobile.css — the PHONE LAYER (docs/DESIGN.md §15). Loaded last, in its own cascade layer, so every rule here wins over the desktop-first files without
   !important and desktop stays byte-for-byte what it was: layout changes live inside max-width media queries; the only rules outside one are touch /
   safe-area / press-feedback properties that are no-ops with a mouse. Delete this file and the site is the 2026-10-04 build.
   Contents: 1 touch + safe areas · 2 rhythm · 3 swipe rows (questions, reviews, proof) · 4 booking in three steps · 5 small-screen fixes · 6 landscape phones. */

@layer mobile {

  /* ---- 1. Touch, feel, safe areas ------------------------------------------------------------------------------------------------------------------ */
  html { touch-action: manipulation; }                         /* no 300 ms double-tap wait; pinch-zoom stays available */
  a, button, summary, label, input, textarea, [role="button"], .chip, .btn, .icon-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .menu-sheet, .cc__list, .toc__box { overscroll-behavior: contain; }
  .menu-sheet { padding-top: env(safe-area-inset-top); }

  /* iPhone notch / Dynamic Island in landscape, home bar in portrait: the page is edge-to-edge (viewport-fit=cover), so the gutters grow to clear them */
  .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-header { padding-top: env(safe-area-inset-top); }
  @media (max-width: 959px) { .site-header { background: color-mix(in srgb, var(--paper) 95%, transparent); } }   /* page text no longer ghosts through the bar while scrolling */
  .announce p { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  html { scroll-padding-top: calc(var(--header-h) + 14px + env(safe-area-inset-top)); }
  .site-footer { padding-bottom: calc(var(--space-5) + 84px + env(safe-area-inset-bottom)); }
  @media (min-width: 900px) { .site-footer { padding-bottom: var(--space-6); } }
  .day__video video { max-height: 70svh; }

  /* press feedback: things you tap answer immediately (no hover on a phone) */
  @media (hover: none) {
    .btn:active { transform: scale(.97); }
    .icon-btn:active, .mctl__b:active:not(:disabled) { transform: scale(.92); background: color-mix(in srgb, currentColor 12%, transparent); }
    .link-more:active, .review__more:active, .faq summary:active, .review__reply summary:active, .more summary:active, .menu-sheet nav a:active, .menu-sheet .menu-sub summary:active { opacity: .6; }
    .teaser__list a:active, .more-svc:active, .mpager__a:active, .contact-card:active, .qcard:active, .post-card:active, .moment:active, .oops__quick a:active, .pill:active { transform: scale(.985); }
    .stepper button:active { transform: scale(.9); background: var(--sun); }
    .wiz-prog__bar button:not(:disabled):active { transform: scale(.96); }
  }

  .mcount { display: none; }

  /* Below-the-fold sections are not laid out or painted until they are near the screen (phones + tablets; desktop is untouched). On the home page this halved the first
     long task and took ~1.3 s off the LCP on a throttled Android (docs/DESIGN.md §15). In-page jumps (#book, #reviews, #services…) first switch it off (site.js adds
     .cv-off) so the target is measured with real heights and lands exactly. contain-intrinsic-size `auto` remembers each section's real height after it was seen. */
  @media (max-width: 899px) {
    html:not(.cv-off) main > :is(.section, .trust) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
    html:not(.cv-off) main > .trust { contain-intrinsic-size: auto 260px; }
    html:not(.cv-off) main > .promise { contain-intrinsic-size: auto 800px; }
    html:not(.cv-off) main > .book { contain-intrinsic-size: auto 2000px; }
    html:not(.cv-off) .site-footer { content-visibility: auto; contain-intrinsic-size: auto 800px; }
  }

  /* Swipe-row controls (dots, count, arrows) get their own reserved strip: rows.js sets rows up lazily (when they near the screen), and a control bar that
     popped in later would push everything below it down — Safari has no scroll anchoring to hide that. */
  @media (max-width: 899px) {
    .mrow, .day__wrap { position: relative; padding-bottom: 50px; }
    .mrow > .mctl, .day__wrap > .mctl { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  }
  @media (max-width: 719px) {
    .swipe { padding-bottom: 50px; }
    .swipe > .mctl { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  }

  /* ---- 5. Small-screen fixes (found by qa_shots at 320 px: two buttons were wider than the screen and got clipped) ------------------------------------ */
  @media (max-width: 380px) {
    .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.2; }
    .btn > span { min-width: 0; }
    .price__label { flex-wrap: wrap; }
  }

  /* ---- 2 + 3 + 4: phones and small tablets ------------------------------------------------------------------------------------------------------------ */
  @media (max-width: 719px) {

    /* 2. Rhythm: the desktop section padding (up to 6 rem top and bottom) made a 22,000 px home page. */
    .section { padding-block: var(--space-7) calc(var(--space-6) + var(--sheet-r)); }
    .sheet.section { padding-top: var(--space-6); }
    .section-head { margin-bottom: var(--space-4); gap: .4rem; }
    .section-head .whisk { width: 62px; height: 16px; }
    .section-head .lead { font-size: 1.04rem; line-height: 1.45; }
    .promise__top { margin-bottom: var(--space-5); gap: var(--space-4); }
    .rating-head { margin-bottom: var(--space-4); }
    .price { margin-top: var(--space-6); }
    /* price compare: the two prices sit side by side (it is a comparison — you read across, not down) */
    .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
    .price__guarantee, .price__ctas { grid-column: 1 / -1; }
    .price__col { padding: var(--space-4) var(--space-3) var(--space-4); gap: var(--space-2); border-radius: var(--r-md); }
    .price__label { display: grid; gap: .35rem; justify-content: start; font-size: .74rem; letter-spacing: .08em; }
    .price__save { font-size: .72rem; padding: .18rem .5rem; white-space: normal; }
    .price__big { font-size: 2.45rem; gap: .1rem .4rem; }
    .price__big s { font-size: .46em; }
    .price__big small { font-size: .85rem; }
    .price__col .fine { font-size: .875rem; line-height: 1.4; }
    .price__col .paws { font-size: .88rem; gap: .35rem; }
    .price__col .paws li { padding-left: 1.45rem; line-height: 1.3; }
    .price__col .paws li::before { width: 1rem; height: 1rem; }
    .price__guarantee { padding: var(--space-3) var(--space-4); }
    body { line-height: 1.52; }
    .lead { line-height: 1.45; }
    .site-footer { padding-top: var(--space-6); }
    .site-footer__grid { gap: var(--space-4) var(--space-4); }
    .site-footer nav[aria-label="Services"] { grid-column: 1 / -1; }
    .site-footer nav[aria-label="Services"] ul { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
    .host-letter { padding: var(--space-4) var(--space-4) var(--space-5); }
    .host-letter p { font-size: 1.2rem; line-height: 1.42; }

    /* the three promise steps: compact rows instead of three tall cards */
    .step { padding: var(--space-3) var(--space-4); gap: 0 var(--space-3); }
    .step::before { width: 44px; height: 44px; font-size: 1.3rem; }
    .step h3 { font-size: 1.12rem; }
    .step p { font-size: .96rem; margin-top: .1rem; }
    .steps { gap: var(--space-3); }
    .step:not(:last-child)::after { left: calc(var(--space-4) + 21px); top: calc(var(--space-3) + 48px); bottom: calc(var(--space-3) * -1 - 6px); }

    /* 3. Swipe rows: one card per screen with the next one peeking, snap, momentum, dots + "N of M" + arrows (rows.js). Same cards, same content as the
          desktop grid — only the shape changes. Scrollers MUST be position:relative (docs/DESIGN.md §11). */
    .swipe { --sw: min(86%, 360px); position: relative; }
    .swipe > [data-mtrack] { position: relative; display: flex; gap: var(--space-4); align-items: stretch; overflow-x: auto; overflow-y: hidden; list-style: none;
      scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 26px var(--gutter) var(--space-4);
      scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .swipe > [data-mtrack]::-webkit-scrollbar { display: none; }
    .swipe > [data-mtrack] > * { flex: 0 0 var(--sw); min-width: 0; margin: 0; scroll-snap-align: start; }
    .swipe > [data-mtrack] .reveal { opacity: 1; transform: none; transition: none; }      /* off-screen cards must never wait for an IntersectionObserver */
    .swipe > [data-mtrack]:focus-visible { outline-offset: -3px; }
    .swipe .mctl { margin-top: 0; }
    .mcount { display: inline-block; min-width: 3.4rem; text-align: center; font-weight: 800; font-size: .92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
    .mdots { padding-inline: .5rem; }
    .surface-deep .mcount { color: var(--on-deep-2); }
    .surface-deep .mdots i { background: color-mix(in srgb, var(--on-deep) 30%, transparent); }
    .surface-deep .mdots i.is-on { background: var(--sun); }
    .surface-deep .mctl__b { background: var(--deep-2); color: var(--on-deep); border-color: var(--deep-line); }

    /* question cards (home): tighter, equal height, button pinned to the bottom */
    .swipe--qa > .qa-grid { padding-top: 22px; }
    .swipe--qa .qa-card { padding: var(--space-4) var(--space-4) var(--space-3); gap: var(--space-3); }
    .swipe--qa .qa-card__main { gap: var(--space-2) var(--space-3); }
    .swipe--qa .qa-card .pebble { width: 46px; height: 46px; }
    .swipe--qa .qa-card .pebble .i { width: 23px; height: 23px; }
    .swipe--qa .qa-card__q { font-size: 1.24rem; }
    .swipe--qa .qa-card__a p { font-size: .97rem; line-height: 1.5; }
    .swipe--qa .qa-card__side { gap: var(--space-3); }
    .swipe--qa .qa-card__review { padding: .8rem .9rem; }
    .swipe--qa .qa-card__review p { -webkit-line-clamp: 3; line-clamp: 3; font-size: .93rem; }
    .swipe--qa .qa-card__actions { padding-top: var(--space-1); flex-wrap: nowrap; justify-content: space-between; gap: .4rem .8rem; }
    .swipe--qa .qa-card__actions .btn .i { display: none; }
    .swipe--qa .qa-card__actions .btn { padding-inline: 1rem; }
    .swipe--qa .qa-card .paws { gap: .35rem; }
    .swipe--qa .qa-card .paws li { padding: .26rem .7rem .26rem 1.75rem; font-size: .85rem; line-height: 1.3; }
    .swipe--qa .qa-card .paws li::before { left: .65rem; top: .38rem; }

    /* reviews wall + proof cards */
    .swipe--wall > .wall { padding-top: 6px; }
    .swipe--wall .review { padding: 1.1rem 1.1rem 1rem; }
    .swipe--proof > .proof { padding-top: 22px; }
    .swipe--proof .tcard, .swipe--proof .record { padding: var(--space-4) var(--space-4) var(--space-5); }
    .swipe--proof { --sw: min(88%, 380px); }

    /* guest-moment cards in the home row: two lines per note row (the whole note is one tap away on /moments/<slug>) */
    .moments .mrow .moment .mnote__t p { -webkit-line-clamp: 2; line-clamp: 2; }
    .moments .mrow .moment .mquote__text p { -webkit-line-clamp: 3; line-clamp: 3; }

    .day__hint { display: none; }                         /* the peeking card + dots + arrows say "swipe" already */

    /* the day + moments rows already swipe; give them the same momentum / containment */
    .day__track, .mrow__track { -webkit-overflow-scrolling: touch; }

    /* FAQ topic tabs (home.js builds them; the groups stay in the page) */
    .faq-tabs { display: flex; gap: .5rem; margin: 0 calc(var(--gutter) * -1) var(--space-4); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
    .faq-tabs::-webkit-scrollbar { display: none; }
    .faq-tab { flex: none; min-height: 46px; padding: .5rem 1.15rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-3); font-weight: 750; font-size: .98rem; color: var(--ink); }
    .faq-tab[aria-selected="true"] { background: var(--sun); border-color: var(--sun-press); color: var(--sun-ink); }
    .faq-tab:active { transform: scale(.97); }
    .faq-group + .faq-group { margin-top: 0; }
    .faq-group[role="tabpanel"] .faq-group__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the tab already says it */

    /* 4b. the simple enquiry folds into a disclosure on phones (forms.js closes it) */
    .enq-disc > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 60px; padding: .6rem 1.1rem; border-radius: var(--r-lg);
      background: var(--paper-2); border: 1.5px dashed var(--line-strong); font-weight: 800; line-height: 1.3; cursor: pointer; list-style: none; }
    .enq-disc > summary::-webkit-details-marker { display: none; }
    .enq-disc > summary > span { display: flex; align-items: center; gap: .7rem; min-width: 0; }
    .enq-disc > summary .i { color: var(--amber); }
    .enq-disc > summary > .i:last-child { transition: transform var(--dur-2) var(--ease); }
    .enq-disc[open] > summary { margin-bottom: var(--space-4); }
    .enq-disc[open] > summary > .i:last-child { transform: rotate(180deg); }
    .book__side { gap: var(--space-4) !important; }
  }
  @media (min-width: 768px) { .enq-disc > summary { display: none; } }

  /* ---- 4. Booking in three steps (≤ 767 px; forms.js adds .is-wiz, desktop and no-JS keep the single page) -------------------------------------------- */
  .wiz-prog, .wiz-bar, .wiz-skip { display: none; }
  @media (max-width: 767px) {
    .book { padding-bottom: calc(var(--space-6) + var(--sheet-r) + 64px); }
    .book .formcard { padding: var(--space-5) var(--space-4); }
    .book .formcard__head h3 { font-size: 1.35rem; }
    html.wiz-on { scroll-padding-bottom: 96px; }
    html.wiz-on .action-bar { display: none; }

    .is-wiz .fgroup { padding: 0; border: 0; background: none; border-radius: 0; }
    .is-wiz .fgroup__title::before { content: attr(data-nm); }
    .is-wiz .fgroup__title { padding-top: var(--space-2); }
    .is-wiz [data-wiz-send] { display: none; }
    .is-wiz .form-actions .btn { width: 100%; }
    .is-wiz .fgrid .span-2 { grid-column: 1 / -1; }
    .is-wiz .more { border-style: solid; border-color: var(--line); }

    .wiz-prog:not([hidden]) { display: grid; gap: .6rem; margin-bottom: var(--space-4); scroll-margin-top: 8px; }
    .wiz-prog__t { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); max-width: none; }
    .wiz-prog__t:focus { outline: none; }
    .wiz-prog__bar { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .wiz-prog__bar button { width: 100%; min-height: 44px; padding: .2rem .3rem; white-space: nowrap; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent);
      color: var(--ink-2); font-weight: 750; font-size: .9rem; line-height: 1.15; transition: background-color var(--dur-2), color var(--dur-2); }
    .wiz-prog__bar button.is-on { background: var(--sun); color: var(--sun-ink); box-shadow: 0 0 0 2px var(--paper-3), 0 0 0 4px var(--sun-press); }
    .wiz-prog__bar button.is-done { background: var(--sage-tint); color: var(--ink); }
    .wiz-prog__bar button.is-done::before { content: "✓"; margin-right: .25rem; color: var(--ok); font-weight: 800; }
    .wiz-prog__bar button:disabled { color: var(--ink-3); background: color-mix(in srgb, var(--ink) 5%, transparent); cursor: default; }
    .wiz-recap { margin: 0; padding: .6rem .85rem; border-radius: var(--r-md); background: var(--sun-soft); font-weight: 700; font-size: .95rem; line-height: 1.35; max-width: none; }
    .wiz-skip:not([hidden]) { display: grid; clear: both; margin: 0 0 var(--space-3); font-size: .9rem; line-height: 1.25; color: var(--ink-2); max-width: none; }
    .wiz-skip a { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 800; font-size: .98rem; color: var(--amber); }

    /* the sticky thumb bar: Back · Next / Send request, ≥ 52 px tall, clears the home bar, blurred so the form visibly slides under it */
    .wiz-bar:not([hidden]) { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-bar) + 20);
      padding: .6rem max(var(--gutter), env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
      background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid var(--line); box-shadow: 0 -14px 28px -22px rgba(58, 42, 34, .55); animation: wiz-in .28s var(--ease-out); }
    .wiz-bar .btn { min-height: 52px; flex: 1; padding-inline: 1rem; }
    .wiz-bar [data-wiz-next] { flex: 2.2; }
    .wiz-bar [data-wiz-back] { flex: 1; }
    .wiz-bar [data-wiz-back] .i { transform: rotate(180deg); }
    .wiz-bar [data-wiz-next] .i { display: block; }
    @keyframes wiz-in { from { transform: translateY(100%); } }
    .toast-stack { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .wiz-bar:not([hidden]) { animation: none; } }

  /* ---- 6. Landscape phones (667×375, 844×390, 932×430): the portrait hero (giant words stacked over a tall arch) was 2.3 screens high there, with both Book buttons
          below the fold. The same hero is re-laid in two columns — words + copy + buttons left, the arched photo right — with the type sized from the HEIGHT of the screen. ---- */
  @media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) and (max-width: 1100px) {
    .hero { padding-block: var(--space-2) var(--space-5); }
    .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: var(--space-4); }
    .hero__kicker { grid-column: 1 / -1; margin-bottom: var(--space-1); }
    .hero__kicker .eyebrow { padding-block: .2rem; }
    .hero__title { grid-column: 1; grid-row: 2; --hero-fs: clamp(4.2rem, 31vh, 7.5rem); min-height: 0; gap: .02em; align-content: start; }
    .hero__word--a { margin-left: .02em; }
    .hero__word--b { margin-left: .42em; }
    .hero__stage { grid-column: 2; grid-row: 2 / 5; align-self: stretch; justify-self: end; width: 100%; max-width: 360px; height: auto; max-height: 480px; margin: 0 0 var(--space-2); }
    .stamp { top: 3%; right: 2%; width: 92px; }
    .hero__copy { grid-column: 1; grid-row: 3; padding-top: var(--space-2); gap: var(--space-2); }
    .hero__sub { font-size: .98rem; line-height: 1.4; max-width: 34ch; }
    .hero__copy .price-chip__now { font-size: 2.1rem; }
    .hero__ctas { grid-column: 1; grid-row: 4; padding-top: var(--space-2); gap: .5rem .6rem; }
    .hero__ctas > .btn { min-height: 48px; padding-inline: 1.2rem; }
    .hero__reassure { font-size: .9rem; }
  }
  @media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    .menu-sheet__inner { max-width: none; padding-bottom: var(--space-4); }
    .menu-sheet nav a, .menu-sheet .menu-sub summary { min-height: 48px; font-size: 1.25rem; }
    .toast-stack { bottom: 1rem; }
  }
}