/* SUNRISE PHONE UX LAYER
   Applies only at <= 600px.
   Desktop/tablet base styles and legacy responsive rules are protected.
   Do not add additional breakpoints here without regression review.
*/
@media (max-width: 600px) {
  /* HERO FOOTPRINT — target roughly <=55% of a 390x844 viewport. */
  .hero.hero-full {
    min-height: 460px;
  }

  .hero.hero-full .hero-left {
    padding: 38px 18px 30px;
  }

  .hero.hero-full .hero-buttons {
    gap: 10px;
    margin-bottom: 20px;
  }

  .hero.hero-full .hero-stats {
    gap: 12px;
  }

  .service-visual-hero,
  .project-visual-hero {
    min-height: 460px;
  }

  .service-visual-hero__content,
  .project-visual-hero__content {
    padding: 42px 18px 32px;
  }

  .service-visual-hero h1,
  .project-visual-hero__content h1 {
    font-size: clamp(2rem, 9.5vw, 2.65rem);
    line-height: 1.06;
    margin-bottom: 14px;
  }

  .service-visual-hero p,
  .project-visual-hero__content p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .project-visual-hero__content .actions {
    gap: 9px;
    margin-top: 18px;
  }

  /* VERTICAL RHYTHM — preserve content, reduce stacked-desktop dead space. */
  .sp-section,
  .sp-photos-section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sp-benefits,
  .sp-reviews,
  .sp-faq-list,
  .sp-areas {
    margin-top: 28px;
  }

  .sp-benefit,
  .sp-review {
    padding: 22px 18px;
  }

  .sp-faq-item {
    padding: 21px 0;
  }

  .sp-showroom-cta {
    margin-top: 24px;
  }

  .pj-band {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .pj-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .content {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .gallery {
    gap: 14px;
    margin-top: 26px;
  }

  /* CARD GEOMETRY — more photography per thumb-swipe without hiding content. */
  .sp-photo-grid {
    gap: 10px;
    margin-top: 24px;
  }

  .sp-photo-card,
  .sp-photo-card.tall {
    aspect-ratio: 16 / 10;
  }

  .pj-cards {
    gap: 14px;
    margin-top: 24px;
  }

  .pj-card img {
    aspect-ratio: 16 / 10;
  }

  .pj-card-body {
    padding: 16px 17px 18px;
    gap: 6px;
  }

  .pj-card-cta {
    padding-top: 10px;
  }

  .fence-grid,
  .projects-slim-grid,
  .why-grid {
    gap: 14px;
  }

  .fence-card-photo,
  .projects-slim-grid .project-image {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .fence-card-body {
    padding: 17px 18px 19px;
  }

  .projects-teaser-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .premium-trust-item {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* READABILITY — phone-only. Keep headings/eyebrows intact; enlarge small prose. */
  :root { --body-size: 1.3125rem; --body-lh: 1.65; }

  .pj-p,
  .pj-stage-text,
  .pj-list li,
  .faq-answer p,
  .pool-text p,
  .review-text,
  .why-desc,
  .fin-item-text,
  .sp-benefit p,
  .sp-review-text,
  .sp-faq-item p,
  .sp-area p,
  .cg-factor p,
  .cg-faq-item p,
  .faq-list-item p,
  .project-card p,
  .solution-card p,
  .solution-card .tagline,
  .fence-card-desc,
  .intro p,
  .cta-block p,
  .pj-cta p {
    font-size: 1.3125rem;
    line-height: 1.65;
  }

  /* Captions/supporting copy stay subordinate, but remain readable. */
  .photo figcaption,
  .pj-card-note,
  .sp-photo-card figcaption,
  .sp-photo-card .caption,
  .project-card .caption {
    font-size: 1.125rem;
    line-height: 1.55;
  }

  /* CTA repair for project pages whose markup uses .actions rather than .pj-cta-actions. */
  .project-visual-hero__content .actions,
  .pj-cta .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .project-visual-hero__content .actions a,
  .pj-cta .actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.42);
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }

  .project-visual-hero__content .actions a.primary,
  .pj-cta .actions a.primary {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    border-color: transparent;
    color: var(--navy);
  }

  /* MOBILE SUBMENU VISUAL HIERARCHY — approved phone-only refinement.
     Navy remains the main-menu layer; an expanded category becomes a
     white choice panel with dark text and the same gold accent language
     used by the desktop/tablet dropdowns. Behavior is unchanged. */
  .site-header.mobile-open .nav-item.open > .dropdown {
    background: #fff;
    color: var(--ink);
    border-top: 3px solid var(--gold);
    padding: 8px 10px;
    margin: 2px 0 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }

  .site-header.mobile-open .nav-item.open > .nav-toggle {
    color: #f2d98f;
  }

  .site-header.mobile-open .nav-item.open > .dropdown a {
    background: #fff;
    color: var(--ink) !important;
    border-bottom-color: #eee !important;
  }

  .site-header.mobile-open .nav-item.open > .dropdown a:last-child {
    border-bottom: 0 !important;
  }

  .site-header.mobile-open .nav-item.open > .dropdown a:hover,
  .site-header.mobile-open .nav-item.open > .dropdown a:focus-visible {
    background: var(--cream);
    color: #84661f !important;
  }

  /* Bellport Featured Installation — phone-only photo-width normalization.
     Centralized here so all <=600px styling remains in the approved phone layer. */
  .page-bellport-blackline section[aria-labelledby="pj-project-photo"] .pj-wrap,
  .page-bellport-blackline section[aria-labelledby="pj-gallery"] .pj-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .page-bellport-blackline section[aria-labelledby="pj-project-photo"] .pj-feature-photo {
    padding-left: 0;
    padding-right: 0;
  }

  /* Pool comparison cards — let the card grow with its content instead of clipping the top.
     Centralized here so all <=600px styling remains in the approved phone layer. */
  .compare-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .compare-card__content {
    position: relative;
    bottom: auto;
  }

}