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

@media (min-width: 768px) {



  /* ─── Header lockup ────────────────────────────────────────────────────
     Per §6 / mockup 1: 3svw outer pad → 7svw zone → 3svw inner pad,
                        3svh top → 7svh content → 3svh bottom. */

  .pp-header {
    height: 13svh;            /* visual band reserved at the top of every page */
    background: transparent;  /* desktop: no background plate, just the lockup */
  }
  .pp-header__logo {
    top: 3svh;
    left: 3svw;
    width: 7svw;
    height: 7svh;
  }
  .pp-header__drop {
    top: 3svh;
    right: 3svw;
    width: 7svw;
    height: 7svh;
  }

  /* ─── Hero ─────────────────────────────────────────────────────────────
     Per mockup 3 desktop: copy 44svw, pills 21svw, 100px radius. */

  .pp-hero__copy { max-width: 44svw; }
  .pp-hero__pill { width: 21svw; font-size: 1.8svh; }

  /* ─── Menu overlay ─────────────────────────────────────────────────────
     Per mockup 2: header band mirrors the page header; items list inset
     by 13svw L/R, 19svh top/bottom, 7svh font height. */

  .pp-menu__logo {
    top: 3svh;
    left: 3svw;
    width: 7svw;
    height: 7svh;
  }
  .pp-menu__close,
  .pp-menu__splash {
    top: 3svh;
    right: 3svw;
    width: 7svw;
    height: 7svh;
  }
  .pp-menu__items {
    padding-inline: 13svw;
    padding-top: 10svh;          /* 19svh − 9svh per chat instruction */
  }
  /* Menu items grow 10% on hover and switch to blue on hover/active
     (desktop only). Per-property delays: opacity/transform respect the
     --pp-cascade-delay set by the open cascade; scale/color always
     have 0 delay so hover and unhover fire instantly. */
  .pp-menu__item {
    transition:
      opacity 280ms var(--ease) var(--pp-cascade-delay, 0ms),
      transform 280ms var(--ease) var(--pp-cascade-delay, 0ms),
      scale var(--t-200) var(--ease) 0ms,
      color var(--t-200) var(--ease) 0ms;
  }
  .pp-menu.is-open .pp-menu__item:hover,
  .pp-menu.is-open .pp-menu__item:active {
    color: var(--pp-blue);
  }
  .pp-menu.is-open .pp-menu__item:hover {
    scale: 1.10;
  }

  /* ─── Introduction (Section 02) ────────────────────────────────────────
     Exact column widths from the section's left border edge.
     .pp-intro carries NO padding so the cream background stays full-bleed;
     content is placed via margin-left + width.

       13svw left │ 5svw interior │ 29.5svw text │ 5svw gap │ 34.5svw image │ 13svw right
       0 — 13 ──── 18 ─────────── 47.5 ────── 52.5 ──────────────── 87 ──────────── 100 svw

     Image's right edge sits flush at the 13svw right outer padding boundary.
     Image height is 72svh (not square) — width is svw, height is svh. */

  .pp-intro {
    height: 100svh;
    justify-content: center;
  }
  .pp-intro__eyebrow,
  .pp-intro__title,
  .pp-intro__copy {
    width: 29.5svw;             /* locked column width, not max-width */
    margin-left: 18svw;         /* 13svw outer pad + 5svw interior pad */
  }
  .pp-intro__cta {
    margin-left: 18svw;         /* left-aligned within the 29.5svw text column */
    /* button width is content-driven via spec §9 padding (1.6vh × 4vw) — no width set */
  }

  .pp-intro__title { font-size: 7svh; }                  /* no spacer above — title sits directly below the eyebrow container */
  .pp-intro__copy  { margin-top: 5svh; }
  .pp-intro__cta   { margin-top: 5svh; }

  .pp-intro__square {
    position: absolute;
    top: 50%;
    left: 52.5svw;              /* 13 + 5 + 29.5 + 5 — flush after the gap */
    transform: translateY(-50%);
    width: 34.5svw;             /* ends at 87svw — flush with right outer padding */
    height: 72svh;              /* mockup-specified height; image is not square on desktop */
  }

  /* ─── Services (Section 03) ────────────────────────────────────────────
       13svw outer │ 74svw content (6 equal cols, 2svw gaps) │ 13svw outer = 100svw
     Card spans fit the row math: 36+2+36 / 23.33+2+23.33+2+23.33 / 74. */

  .pp-services {
    padding: 13svh 13svw;
  }
  .pp-services__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 29svh 18svh 23svh;
    column-gap: 2svw;
    row-gap: 3svh;
    grid-template-areas:
      "wh wh wh lr lr lr"
      "ro ro nl nl sf sf"
      "gp gp gp gp 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--leaks-and-repairs { grid-area: lr; }
  .pp-services__card--new-lines         { grid-area: nl; }
  .pp-services__card--general-plumbing  { grid-area: gp; }

  /* ─── Detail overlay (desktop) ────────────────────────────────────────
     74svw × 81svh sheet, inset 13svw L/R, 10svh top, 9svh bottom.
     Hero image fills remaining space above content (flex: 1 on the image). */

  .pp-detail__sheet {
    top: 10svh;
    bottom: 9svh;
    left: 13svw;
    right: 13svw;
    /* Bottom padding keeps the action buttons a fixed 7svh from the
       bottom of the card. Top padding only applies to tips (which
       have no hero image) — services and projects let the image meet
       the top edge directly. */
    padding-bottom: 7svh;
  }
  .pp-detail.pp-detail--type-tip .pp-detail__sheet {
    padding-top: 3svh;
    /* Tip card scrolls the whole sheet (mobile behavior). Buttons flow
       with the copy — when content overflows, the user scrolls past
       title + copy + buttons together. The 7svh padding-bottom (set on
       the base sheet rule above) doubles as the "minimum gap between
       buttons and card bottom" — it sits inside the scrollable area
       so it's still 7svh at the end of the scroll. */
    overflow-y: auto;
  }
  /* Close button stays visually pinned while the rest of the sheet
     scrolls. `position: absolute` doesn't help here — absolute
     descendants of a scroll container scroll with the container's
     content. `position: sticky` is the fix: the close stays in the
     scroll viewport. `top: 2svh` matches content's `margin-top` so
     it sticks at its original visual location (sheet padding 3svh +
     content margin 2svh = 5svh from sheet's outer top). `align-self:
     flex-end` right-aligns it within the flex column.
     `margin-bottom: -6svh` cancels its 6svh height in the flow so
     the eyebrow doesn't get pushed down. */
  .pp-detail--type-tip .pp-detail__close {
    position: sticky;
    top: 2svh;
    margin-left: auto;
    margin-right: -5svw;
    margin-bottom: -6svh;
    z-index: 5;
  }
  /* Zoomed (full-size image viewer) drops all sheet padding so the
     image fills the entire card edge-to-edge. */
  .pp-detail.pp-detail--zoomed .pp-detail__sheet {
    padding-block: 0;
  }
  .pp-detail__hero-wrap {
    flex: 1 1 0;
    min-height: 0;
  }
  .pp-detail__content {
    /* Horizontal padding only — sheet's padding-block owns vertical. */
    padding: 0 5svw;
  }
  .pp-detail__buttons {
    flex-direction: row;
    gap: 3svh;
  }

  /* ─── Service Area (Section 04) ────────────────────────────────────────
     13svw outer L/R; content max 34svw centered. */
  .pp-area {
    padding-inline: 13svw;
  }
  .pp-area__eyebrow,
  .pp-area__title,
  .pp-area__copy {
    max-width: 34svw;
  }
  .pp-area__copy { font-size: 2svh; }

  /* ─── Process (Section 05) ─────────────────────────────────────────────
     13 + 17 + 1.5 + 17 + 1.5 + 17 + 1.5 + 18.5 + 13 = 100svw ✓
     Eyebrow + title span the full 74svw content width; steps grid below
     uses explicit column widths matching the mockup. */
  .pp-process { padding-inline: 13svw; }
  .pp-process__steps {
    display: grid;
    grid-template-columns: 17svw 17svw 17svw 18.5svw;
    column-gap: 1.5svw;
  }
  .pp-process__step-copy { font-size: 1.8svh; }

  /* ─── Contact (Section 06) ─────────────────────────────────────────────
     13 + 33 + 5 + 36 + 13 = 100svw ✓ */
  .pp-contact { padding-inline: 13svw; }
  .pp-contact__row {
    align-items: center;
    gap: 5svw;
  }
  .pp-contact__left { width: 33svw; }
  .pp-contact__form { width: 36svw; }

  /* ─── FAQ (Section 07) ────────────────────────────────────────────────
     13 + 57 + 17 + 13 = 100svw ✓ — content left-aligned at 57svw width. */
  .pp-faq {
    padding-left: 13svw;
    padding-right: 30svw;
  }

  /* ─── About (Section 08) ──────────────────────────────────────────────
     13 + 34.5 + 5 + 34.5 + 13 = 100svw ✓ — column widths match the
     intro section so the about video shares the intro video's
     34.5svw × 72svh box. */
  .pp-about { padding-inline: 13svw; }
  .pp-about__layout {
    align-items: stretch;
    gap: 5svw;
  }
  .pp-about__image-col--desktop {
    width: 34.5svw;
    flex: 0 0 34.5svw;
    align-self: center;
    height: 72svh;
  }
  .pp-about__content {
    width: 34.5svw;
    padding-block: 3svh;
  }
  .pp-about__paragraph { font-size: 1.8svh; }
  .pp-about__check { font-size: 1.6svh; }

  /* ─── Reviews (Section 09) ────────────────────────────────────────────
     13 + 22.66 + 3 + 22.66 + 3 + 22.66 + 13 ≈ 100svw ✓ */
  .pp-reviews { padding-inline: 13svw; }
  .pp-reviews__cards {
    /* 3 cards at 22.66svw distributed across 74svw via space-between */
    width: 74svw;
  }
  .pp-reviews__card { width: 22.66svw; }

  /* ─── CTA (Section 12) ────────────────────────────────────────────────
     13 + 74 + 13 = 100svw ✓ — header 74svw, copy 30svw, buttons 13svw,
     all centered horizontally. */
  .pp-cta { padding-inline: 13svw; }
  .pp-cta__title { max-width: 74svw; }
  .pp-cta__copy  { max-width: 30svw; }
  .pp-cta__btn   { width: 18svw; font-size: clamp(14px, 1.8svh, 18px); }

  /* ─── Projects (Section 10) ────────────────────────────────────────────
     13 + 22.66 + 3 + 22.66 + 3 + 22.66 + 13 ≈ 100svw ✓ */
  .pp-projects { padding-inline: 13svw; }
  .pp-projects__cards {
    display: flex;
    width: 74svw;
    justify-content: space-between;
  }
  .pp-projects__card { width: 22.66svw; }
  .pp-projects__card-image { height: 20svh; }

  /* ─── Tips (Section 11) ────────────────────────────────────────────────
     13 + 49 + 3 + 22 + 13 = 100svw ✓ — main card 49svw, small column 22svw. */
  .pp-tips { padding-inline: 13svw; }
  .pp-tips__cards {
    display: flex;
    gap: 3svw;
  }
  .pp-tips__card--main { width: 49svw; }
  .pp-tips__card--main .pp-tips__card-image { height: 43svh; }
  .pp-tips__column {
    width: 22svw;
    display: flex;
    flex-direction: column;
    gap: 3svh;
  }

  /* ─── Footer (Section 13) ──────────────────────────────────────────────
     3svw outer L/R (footer-specific override). */
  .pp-footer { padding-inline: 2svw; }
  .pp-footer__col { flex: 0 0 13svw; }
  .pp-footer__col:last-child { flex: 1 1 auto; }
  .pp-footer__col:first-of-type { margin-left: 13svw; }
  /* Footer copy 30% smaller on desktop per chat. */
  .pp-footer__col-title { font-size: 1.47svh; }
  .pp-footer__link      { font-size: 1.33svh; }
  .pp-footer__copyright,
  .pp-footer__license   { font-size: 0.98svh; }
  .pp-footer__divider   { margin-top: 5svh; }   /* +5svh above divider on desktop */

  /* Footer links: grow 7% on hover, anchored to the left edge so the
     text doesn't visually shift in its column. */
  .pp-footer__link {
    display: inline-block;
    align-self: flex-start;
    transform-origin: left center;
    transition: scale var(--t-200) var(--ease), opacity var(--t-200) var(--ease);
  }
  .pp-footer__link:hover { scale: 1.07; }
}