/* mobile.css — measurements for < 768px (tweakable independently of desktop.css) */

@media (max-width: 767.98px) {

  /* ─── Header lockup ────────────────────────────────────────────────────
     Per §6 / mockup 1: header is a 13svh band that takes the section's
     dominant tone at 0.9 opacity (set by header.js via --pp-header-bg).
     Logo and drop sit right- and left-aligned against 3svw paddings. */

  .pp-header {
    height: 13svh;
    background: var(--pp-header-bg);
  }
  .pp-header__logo {
    top: 3svh;
    left: 3svw;
    height: 7svh;
    /* width auto — natural aspect; the wordmark stays edge-to-edge from 3svw inward */
  }
  .pp-header__drop {
    top: 3svh;
    right: 3svw;
    height: 7svh;
  }

  /* ─── Hero ─────────────────────────────────────────────────────────────
     Per mockup 3 mobile: copy 86svw, pills 55svw. Pill width is explicitly
     different from desktop, not a scale-down. */

  .pp-hero__title { max-width: 86svw; font-size: 8svh; }
  .pp-hero__copy { max-width: 86svw; font-size: clamp(15px, 3.2svh, 28px); }
  .pp-hero__pill { width: 55svw; }


  /* ─── Menu overlay ─────────────────────────────────────────────────────
     Tighter L/R margins on mobile per mockup 2; same 19svh padding-block,
     same 7svh item font height. Header band mirrors the page header. */

  .pp-menu__logo {
    top: 3svh;
    left: 3svw;
    height: 7svh;
  }
  .pp-menu__close,
  .pp-menu__splash {
    top: 3svh;
    right: 3svw;
    height: 7svh;
  }
  .pp-menu__items {
    padding-inline: 7svw;
  }

  /* ─── Introduction (Section 02) ────────────────────────────────────────
     Single column flex; DOM order matches mockup flow (eyebrow → title →
     square → copy → button). 13svh top padding clears the fixed header. */

  .pp-intro {
    padding: 13svh 7svw 7svh;
  }
  .pp-intro__title  { font-size: 7svh; }                 /* no spacer above — title sits directly below the eyebrow container */
  .pp-intro__square {
    position: relative;        /* containing block for the carousel's absolutely-positioned slides + nav/fullscreen buttons */
    margin-top: 3svh;
    width: 86svw;
    height: 86svw;             /* fills width between 7svw outer paddings, stays square */
    align-self: center;
  }
  .pp-intro__copy   { margin-top: 5svh; }
  .pp-intro__cta    {
    margin-top: 5svh;
    width: 55svw;
    align-self: center;          /* center the watch-video button horizontally */
  }

  /* ─── Services (Section 03) ────────────────────────────────────────────
       7svw outer │ 86svw content (2 equal cols, 2svw gap) │ 7svw outer = 100svw
     Mobile order: water-heaters (full) → softeners | reverse-osmosis →
                   general-plumbing (full) → leaks-and-repairs | new-lines */

  .pp-services {
    padding: 13svh 7svw;
  }
  .pp-services__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 18svh;
    column-gap: 2svh;
    row-gap: 2svh;
    grid-template-areas:
      "wh wh"
      "lr ro"
      "nl sf"
      "gp gp";
  }
  .pp-services__card--water-heaters     { grid-area: wh; }
  .pp-services__card--softeners         { grid-area: sf; }
  .pp-services__card--reverse-osmosis   { grid-area: ro; }
  .pp-services__card--general-plumbing  { grid-area: gp; }
  .pp-services__card--leaks-and-repairs { grid-area: lr; }
  .pp-services__card--new-lines         { grid-area: nl; }
  .pp-services__card-label              { font-size: 2.1svh; }

  /* ─── Detail overlay (mobile) ─────────────────────────────────────────
     86svw wide, 19svh from viewport top. Sheet auto-grows with content
     up to 76svh, then scrolls internally. Image height auto (proportional). */

  .pp-detail__sheet {
    top: 13dvh;             /* dvh on mobile — body scroll-lock means toolbar stays put */
    left: 7svw;
    right: 7svw;
    max-height: 83dvh;       /* −1dvh per chat */
    overflow-y: auto;
  }
  /* Zoomed mobile view: pin the sheet height so the inner stack has a
     definite parent to size against (otherwise its `height: 100%` and
     `overflow-y: auto` collapse and you can't scroll). Inner stack
     owns the scroll, so sheet itself goes overflow-hidden. */
  .pp-detail.pp-detail--zoomed .pp-detail__sheet {
    height: 83dvh;
    overflow-y: hidden;
  }
  /* Bottom feather: 2dvh-tall fade from sheet bg (opaque at bottom) to transparent
     2dvh up. Tip / project variant only — service detail has no feather. */
  .pp-detail--tip .pp-detail__sheet::after {
    content: "";
    display: block;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    height: 2dvh;
    margin-top: -2dvh;
    background: linear-gradient(to top, var(--pp-blue), transparent);
    pointer-events: none;
  }
  /* Hide the bottom feather when the open card has multiple images
     OR is in the full-image zoomed viewer — in either case the
     gradient just adds noise. Applies to mobile only (where the
     feather lives). */
  .pp-detail--tip.pp-detail--multi-image .pp-detail__sheet::after,
  .pp-detail--tip.pp-detail--zoomed .pp-detail__sheet::after {
    display: none;
  }
  .pp-detail__hero-wrap {
    flex: 0 0 auto;
    height: auto;
    /* Pre-load placeholder ratio (matches PLACEHOLDER_IMAGE_HORIZONTAL).
       `auto` keeps the natural ratio once the image data arrives. */
    aspect-ratio: auto 2048 / 1133;
  }
  .pp-detail__content {
    /* 5svw inset for copy on mobile; the hero image stays edge-to-edge
       (sheet itself has no inline padding). */
    padding: 0 5svw 5svh;
  }
  .pp-detail--tip .pp-detail__title { font-size: 5svh; min-height: 5svh; }
  .pp-detail__buttons {
    flex-direction: column;
    gap: 3svh;
    align-items: stretch;
  }

  /* ─── Service Area (Section 04) ────────────────────────────────────────
     7svw outer L/R; content max 72svw centered. Body copy bumps to 1.8svh. */
  .pp-area {
    padding-inline: 7svw;
  }
  .pp-area__eyebrow,
  .pp-area__title,
  .pp-area__copy {
    max-width: 86svw;
  }
  .pp-area__copy { font-size: clamp(15px, 1.9svh, 18px); }
  .pp-area__image { width: 55dvw; height: 55dvw; }

  /* ─── Process (Section 05) ─────────────────────────────────────────────
     7svw outer L/R; steps stack as a single column. Each step's number +
     name sit inline with a 5svw horizontal gap; paragraph below. */
  .pp-process { padding-inline: 7svw; }
  .pp-process__steps {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3svh;
  }
  .pp-process__step-head {
    flex-direction: row;
    align-items: baseline;
  }
  .pp-process__step-head-gap {
    height: auto;
    width: 5svw;
  }
  .pp-process__step-copy { font-size: clamp(15px, 1.9svh, 18px); }

  /* ─── Contact (Section 06) ────────────────────────────────────────────
     7svw outer L/R; row stacks vertically (left content above form). */
  .pp-contact { padding-inline: 7svw; }
  /* Trim 5svh off the bottom spacer on mobile (inline 21svh → 16svh). */
  .pp-contact > .pp-spacer:last-child { height: 16svh !important; }
  .pp-contact__row {
    flex-direction: column;
    gap: 0;            /* the 5svh spacer at end of .pp-contact__left provides the only vertical break before the form */
  }
  .pp-contact__left { width: 100%; }
  .pp-contact__form {
    width: 100%;
    padding-inline: 7svw;          /* inner card horizontal padding per chat */
  }
  .pp-contact__copy { font-size: clamp(15px, 1.9svh, 18px); }
  /* iOS Safari zooms when an input has font-size < 16px. Use pt sizes so the
     field titles stay legible while inputs stay above the zoom threshold. */
  .pp-contact__field-label {
    font-size: 12pt;
    min-height: auto;              /* let label size by content at this scale */
    padding-bottom: 2svh;
  }
  .pp-contact__field input,
  .pp-contact__field textarea {
    font-size: 12pt;
    padding-inline: 2svw;
  }

  /* ─── FAQ (Section 07) ────────────────────────────────────────────────
     7svw outer L/R. */
  .pp-faq { padding-inline: 7svw; }
  .pp-faq__answer,
  .pp-faq__readmore,
  .pp-faq__list { font-size: clamp(15px, 1.9svh, 18px); }
  /* Top-align the X icon with the first line of a wrapped question. */
  .pp-faq__question { align-items: flex-start; }

  /* ─── Call/text + message-choice dialogs (mobile sizing) ──────────────
     Wider box on mobile so the buttons + title fit comfortably; 7svw of
     viewport edge padding on each side (≈ 86svw box). */
  .pp-message-choice {
    width: 86svw;
    max-width: 86svw;
    padding: 4svh 5svw;
  }
  .pp-message-choice__title { font-size: 3svh; }
  .pp-message-choice__buttons { gap: 3svw; margin-top: 3svh; }
  .pp-message-choice__buttons .pp-btn {
    height: 6svh;
    font-size: clamp(14px, 1.8svh, 18px);
  }
  .pp-message-choice__close {
    top: 1.5svh;
    right: 3svw;
    width: 4svh;
    height: 4svh;
  }

  /* ─── About (Section 08) ──────────────────────────────────────────────
     Stack vertically: eyebrow → title → image (55svw × 55svw) → paragraphs → checks. */
  .pp-about { padding-inline: 7svw; }
  .pp-about__layout { flex-direction: column; }
  .pp-about__title { padding-bottom: 2svh; }
  .pp-about__image-col--desktop { display: none; }
  .pp-about__image-col--mobile {
    display: block;
    width: 86svw;
    height: 86svw;
    align-self: center;
  }
  .pp-about__paragraph { font-size: clamp(15px, 1.9svh, 18px); }
  .pp-about__check { font-size: clamp(15px, 1.9svh, 18px); }
  /* 5svh of breathing room below the last check ("Fast turnaround…"). */
  .pp-about__checks { padding-bottom: 5svh; }

  /* ─── Reviews (Section 09) ────────────────────────────────────────────
     7svw outer L/R. Cards stack vertically full width. */
  .pp-reviews { padding-inline: 7svw; }
  .pp-reviews__title { font-size: 6svh; }   /* −1svh on mobile per chat */
  .pp-reviews__top-spacer { height: 10svh !important; }   /* override inline 21svh on mobile */
  /* Trim 3svh off the bottom spacer on mobile (inline 21svh → 18svh). */
  .pp-reviews > .pp-spacer:last-child { height: 18svh !important; }
  .pp-reviews__cards {
    flex-direction: column;
    gap: 3svh;
  }
  .pp-reviews__card { width: 100%; }
  .pp-reviews__card-copy { font-size: 3svh; }

  /* ─── CTA (Section 12) ────────────────────────────────────────────────
     32svh top/bottom edge spacers, 3svh paragraph→button spacer (vs 5svh on desktop). */
  .pp-cta { padding-inline: 7svw; }
  .pp-cta__copy { max-width: 86svw; }
  .pp-cta__btn  { width: 55svw; font-size: clamp(14px, 1.8svh, 18px); }
  .pp-cta__spacer-edge { height: 32svh; }
  .pp-cta__spacer-paragraph { height: 3svh; }

  /* ─── Projects (Section 10) ────────────────────────────────────────────
     7svw outer L/R; cards stack vertically full width. */
  .pp-projects { padding-inline: 7svw; }
  /* +1svh on the bottom spacer (inline 5svh → 6svh) on mobile. */
  .pp-projects > .pp-spacer:last-child { height: 6svh !important; }
  .pp-projects__cards {
    display: flex;
    flex-direction: column;
    gap: 3svh;
  }
  .pp-projects__card { width: 100%; }
  .pp-projects__card-image { height: 20svh; }

  /* ─── Tips (Section 11) ────────────────────────────────────────────────
     7svw outer L/R; main card + small cards stack vertically. */
  .pp-tips { padding-inline: 7svw; }
  .pp-tips__cards {
    display: flex;
    flex-direction: column;
    gap: 3svh;
  }
  .pp-tips__card--main, .pp-tips__column { width: 100%; }
  .pp-tips__card--main .pp-tips__card-image { height: 27svh; }
  .pp-tips__column {
    display: flex;
    flex-direction: column;
    gap: 3svh;
  }

  /* ─── Footer (Section 13) ──────────────────────────────────────────────
     Stack footer columns vertically on mobile, centered. Logo is hidden on
     mobile per chat; each col gets a 3svh top padding above its title. */
  .pp-footer { padding-inline: 2svw; }
  .pp-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 3svh;
  }
  .pp-footer__logo { display: none; }
  .pp-footer__col {
    align-items: center;
    padding-top: 3svh;
  }
  .pp-footer__col-title { text-align: center; }
  /* Trim padding above the first column ("VISIT") and above the bottom
     divider so they sit closer than their inline 5–7svh defaults. */
  .pp-footer > .pp-spacer:first-child { height: 3svh !important; }
  .pp-footer__divider { margin-top: 0; }
  .pp-footer__bottom {
    flex-direction: column;
    gap: 1svh;
    align-items: center;
    text-align: center;
  }

  /* ─── Mobile menu open: header bg = full opaque navy. Tied to .pp-menu-active
     (added on open, removed at close start) so the header bg fades back to the
     section tone in sync with the menu's own bg fade-out, instead of snapping
     after close finishes. .pp-menu-locked still owns scroll-lock duration. */
  body.pp-menu-active .pp-header {
    background: var(--pp-navy);
  }

  /* When a tip / project expanded card is open, drop the mobile header's
     0.9-opacity tone bg so the cream sheet reads cleanly under the lockup.
     On close (.is-closing on the detail), bump the header's bg transition to
     460ms — the same duration as the card slide — so the tone fades back in
     by the time the sheet clears the bottom of the screen. */
  body.pp-detail-locked:has(.pp-detail--tip:not(.is-closing)) .pp-header {
    background: transparent;
  }
  body.pp-detail-locked:has(.pp-detail--tip.is-closing) .pp-header {
    transition: background-color 460ms var(--ease);
  }
}