/* Leave enough room for Home in the full desktop navigation. */
@media (min-width: 1101px) {
  .site-header .nav { gap: 20px; }
  .site-header .nav-links { gap: 24px; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .hero .hero-bg { object-position: center; }
  .hero::after {
    background: linear-gradient(180deg, rgba(17,31,42,.36), rgba(17,31,42,.03) 30%, rgba(17,31,42,.38) 48%, rgba(17,31,42,.93) 76%, rgba(17,31,42,.97));
  }
}

@media (max-width: 620px) {
  section h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.12; }

  /* Use a portrait composition instead of magnifying the desktop photograph. */
  .hero { min-height: 100svh; }
  .hero .hero-bg { object-position: center; }
  .hero::after {
    background: linear-gradient(180deg, rgba(17,31,42,.36), rgba(17,31,42,.03) 30%, rgba(17,31,42,.38) 48%, rgba(17,31,42,.93) 76%, rgba(17,31,42,.97));
  }
  .hero .hero-content { padding: clamp(300px, 42svh, 380px) 0 max(32px, env(safe-area-inset-bottom)); }
  .hero .hero-layout { gap: 18px; }
  .hero h1 { font-size: clamp(2.2rem, 9.5vw, 2.75rem); line-height: 1.04; letter-spacing: -.05em; }
  .hero .hero-lead { font-size: 1rem; line-height: 1.55; }
  .hero .hero-actions { margin-top: 20px; }

  /* Touch visitors can read each service without needing a hover first. */
  .service p, .service:hover p, .service:focus p { max-height: none; margin-top: 12px; opacity: 1; }
  .service .service-copy { transform: none; }
  .service:hover, .service:focus { transform: none; }
  .service:hover::after, .service:focus::after { opacity: 1; }
  .service:hover img, .service:focus img { filter: none; transform: none; }
  .service .service-plus::before { content: "\2197"; width: auto; height: auto; background: none; font-size: 1.5rem; }
  .service .service-plus::after { display: none; }

  /* Keep the coastline visible rather than stretching it behind four tall cards. */
  .getting-started { background-image: none; background-attachment: scroll; }
  .getting-started-heading { margin-bottom: 0; }
  .getting-started-heading::after {
    content: "";
    display: block;
    height: 240px;
    margin: 28px -14px -28px;
    background: linear-gradient(180deg, #fbf9f5, rgba(251,249,245,0) 18%, rgba(251,249,245,0) 70%, #fbf9f5), url("services-cta-coastal-path-anascato.webp") center / cover no-repeat;
  }
  .getting-started-grid { position: relative; }
  .getting-started-card { min-height: 240px; padding: 24px; }
  .getting-started-card h3 { margin-top: 20px; font-size: 1.5rem; }

  /* Every service follows the same image, heading, copy and action sequence. */
  .service-detail, .service-detail.reverse { padding: 20px; gap: 22px; }
  .service-detail .service-photo, .service-detail.reverse .service-photo {
    order: -1;
    height: auto;
    aspect-ratio: 4 / 3;
    flex: none;
  }
  .service-copy h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.12; }
  .service-cta { width: 100%; }
  .page-hero h1 { font-size: clamp(2.2rem, 9.5vw, 2.75rem); line-height: 1.04; }
}

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .service.in-view img { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .services-list .service-detail { position: relative; top: auto; }
}