gw-svelte/src/lib/styles/responsive.css

@media (max-width: 1024px) {
  .hero-text h1 {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  /*
   * Mobile body type bumps to 16px — modern legibility standard, and
   * matches the iOS-Safari zoom-on-focus threshold. Reserve room at
   * the bottom of the page for the sticky MobileBookBar so the footer
   * never sits behind it; the bar adds its own safe-area-inset
   * padding on top of this.
   */
  body {
    font-size: 16px;
    line-height: 1.7;
  }

  body.mobile-cta-enabled {
    padding-bottom: 64px;
  }

  @keyframes mobileMenuSheetIn {
    0% {
      opacity: 0;
      transform: translateY(-16px) scale(0.985);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scaleY(1);
    }
  }

  @keyframes mobileMenuItemIn {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  header {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-muted);
  }

  nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 20px 24px;
    column-gap: 12px;
  }

  .logo {
    margin: 0;
    justify-content: flex-start;
    justify-self: start;
  }

  .logo img {
    height: 25px;
    width: auto;
  }

  .mobile-phone {
    display: inline-flex;
    justify-self: center;
    align-self: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: rgba(var(--brand-rgb), 0.1);
    color: var(--text-brand);
  }

  .mobile-phone .icon {
    font-size: 15px;
  }

  .nav-links {
    display: none;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
  }

  .nav-end {
    display: flex;
    justify-content: flex-end;
    grid-column: 3;
  }

  .nav-right .btn {
    display: none;
  }

  .instagram-icon {
    color: rgb(var(--navy-rgb));
    font-size: 22px;
  }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--text);
    grid-column: 4;
    justify-self: end;
  }

  .mobile-menu {
    display: flex;
    width: 100%;
    max-width: none;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px 14px;
    background: linear-gradient(180deg, rgba(var(--white-rgb), 0.985), rgba(248, 248, 245, 0.98));
    border: 1px solid var(--border-brand-soft);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow:
      var(--shadow-menu),
      var(--shadow-menu-soft);
    opacity: 0;
    transform: translateY(-10px) scale(0.992);
    transition:
      opacity 180ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu-shell {
    display: flex;
    align-items: flex-start;
    position: fixed;
    inset: var(--mobile-menu-top, 0px) 0 0;
    z-index: 120;
    padding: 0 0 max(20px, env(safe-area-inset-bottom));
    background: var(--surface-scrim);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 160ms ease,
      visibility 160ms ease;
  }

  .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu-shell.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-shell.open .mobile-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: mobileMenuSheetIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu-links {
    display: grid;
    gap: 6px;
  }

  .mobile-menu-links a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--brand-rgb), 0.06);
    background: var(--surface-disabled);
    color: var(--text-brand);
    text-decoration: none;
    opacity: 0;
    animation: mobileMenuItemIn 220ms ease-out forwards;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-shell.open .mobile-menu-links a:nth-child(1) { animation-delay: 30ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(2) { animation-delay: 55ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(3) { animation-delay: 80ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(4) { animation-delay: 105ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(5) { animation-delay: 130ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(6) { animation-delay: 155ms; }
  .mobile-menu-shell.open .mobile-menu-links a:nth-child(7) { animation-delay: 180ms; }

  .mobile-menu-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--surface-brand);
    color: var(--text-accent);
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), 0.04);
  }

  .mobile-menu-link-label {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-brand);
    min-width: 0;
    letter-spacing: -0.02em;
  }

  :global(.mobile-menu-link-arrow) {
    font-size: 12px;
    color: var(--text-brand-quiet);
  }

  .mobile-menu-links a.mobile-link-active {
    background: linear-gradient(180deg, var(--surface-accent-selected), var(--surface-accent-muted));
    border-color: var(--border-accent-muted);
    box-shadow: var(--shadow-highlight);
  }

  body.mobile-menu-open {
    overflow: visible;
  }

  .mobile-menu-shell:not(.open) .mobile-menu-links a {
    animation: none;
  }

  .mobile-menu-shell.open .mobile-menu-links a {
    opacity: 1;
  }

  /* ── Full-bleed mobile hero ── */

  #hero {
    min-height: 90svh;
    padding: 0;
    gap: 0;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Full-section gradient: transparent top → Goodwalk green bottom.
     hero-img is now a sibling of hero-inner (direct child of #hero),
     so this ::after correctly overlays the full section. */
  #hero::after {
    inset: 0;
    height: auto;
    background: linear-gradient(
      to bottom,
      transparent 22%,
      rgba(var(--brand-rgb), 0.45) 48%,
      rgba(var(--brand-rgb), 0.88) 65%,
      var(--surface-brand) 78%
    );
  }

  /* Dog photo fills the entire section as a background layer */
  .hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    flex: none;
    display: block;
  }

  .hero-img picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: 37% center;
    transform: none;
  }

  /* Text content sits above the gradient (z-index: 2) */
  .hero-inner {
    position: relative;
    z-index: 2;
    flex: none;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--space-container-x-mobile) 36px;
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-bottom: 0;
  }

  .hero-kicker {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    color: rgba(var(--white-rgb), 0.72);
  }

  .hero-text h1,
  .hero-heading {
    margin-bottom: 14px;
    font-size: 38px;
    line-height: 1.06;
  }

  .hero-heading-desktop {
    display: none;
  }

  .hero-text h1 .hero-heading-mobile {
    display: block;
    color: var(--text-inverse);
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
    white-space: pre-line;
  }

  .hero-subtitle,
  .hero-subtitle-desktop {
    display: block;
    margin: 0 0 16px;
    max-width: 26ch;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-chips {
    gap: 8px;
    margin-bottom: 18px;
  }

  .hero-chip,
  .hero-trust-chip {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 11px;
    background: rgba(var(--white-rgb), 0.09);
    border-color: var(--border-inverse-strong);
  }

  .hero-trust-chip {
    gap: 8px;
    padding: 6px 14px 6px 6px;
  }

  .hero-trust-mark {
    width: 24px;
    height: 24px;
  }

  .hero-trust-logo {
    width: 13px;
    height: auto;
  }

  .hero-trust-stars {
    font-size: 10px;
  }

  .hero-trust-label {
    font-size: 11px;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding-right: 0;
  }

  .hero-buttons .btn-yellow {
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .hero-secondary-link {
    justify-content: center;
    width: 100%;
    font-size: 13px;
  }

  .hero-buttons .btn-yellow:active {
    background: var(--surface-accent-strong);
  }

  #intro {
    padding: 44px var(--space-container-x-mobile) 40px;
  }

  .intro-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .intro-kicker {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .intro-kicker-rule {
    width: 24px;
  }

  .intro-headline {
    font-size: clamp(26px, 7.2vw, 34px);
    max-width: none;
  }

  .intro-trust {
    align-items: flex-start;
    padding-left: 0;
    padding-top: 22px;
    border-left: none;
    border-top: 1px solid rgba(var(--white-rgb), 0.12);
    width: 100%;
  }

  .intro-google {
    padding: 8px 14px 8px 8px;
  }

  .intro-google-mark {
    width: 32px;
    height: 32px;
  }

  .intro-google-logo {
    width: 16px;
  }

  .testimonials-grid,
  .info-inner,
  .field-group,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .booking-header {
    margin-bottom: 26px;
  }

  .booking-eyebrow {
    margin-bottom: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .booking-title {
    font-size: 34px;
    line-height: 1.02;
    margin-bottom: 24px;
  }

  .booking-intro {
    margin-top: -4px;
    font-size: 15px;
    line-height: 1.55;
  }

  .booking-trust-row {
    gap: 10px;
    margin-top: 16px;
  }

  .booking-trust-chip {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .booking-title-highlight::after {
    left: 12px;
    right: 12px;
    bottom: -14px;
    height: 20px;
  }

  .booking-stepper {
    gap: 12px;
    align-items: flex-start;
  }

  .booking-step {
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  .booking-step-number {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .booking-step-label {
    font-size: 15px;
    text-align: center;
  }

  .booking-step-divider {
    margin-top: 22px;
    height: 1px;
    width: 36px;
  }

  .booking-panel-banner {
    padding: 22px 18px 34px;
    border-radius: 24px 24px 0 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .booking-card-grid-owner,
  .booking-card-grid-dog {
    grid-template-columns: 1fr;
  }

  .booking-field-group-owner,
  .booking-field-group-dog {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .booking-field-card {
    padding: 24px 22px;
    border-radius: 24px;
  }

  .booking-card-grid-with-banner .booking-field-card {
    border-radius: 0 0 24px 24px;
  }

  .booking-field-card-group {
    padding: 24px 22px;
  }

  .booking-field-card label,
  .booking-service-label {
    font-size: 16px;
  }

  .booking-field-card input,
  .booking-field-card textarea {
    padding: 14px 18px;
    /*
     * 16px is the iOS-Safari threshold for triggering auto-zoom on
     * focus. Anything smaller and the page jolts every time a field
     * is tapped — kills the form's perceived quality at the most
     * critical conversion step.
     */
    font-size: 16px;
    border-width: 2px;
    border-radius: 18px;
  }

  .booking-service-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
  }

  .booking-service-options {
    gap: 12px 18px;
  }

  .booking-check-option {
    font-size: 15px;
  }

  .booking-check-box {
    width: 24px;
    height: 24px;
    border-width: 2px;
    border-radius: 6px;
  }

  .booking-actions-final {
    gap: 14px;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .booking-actions-final .btn,
  .booking-actions-next .btn {
    justify-content: center;
  }

  .services-inner,
  .values-inner,
  .testimonials-inner,
  .info-inner,
  .form-inner {
    padding: 0 var(--space-container-x-mobile);
  }

  .page-inner {
    padding: 0 var(--space-container-x-mobile);
  }

  footer {
    padding: 32px var(--space-container-x-mobile) var(--space-container-x-mobile);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-nav a {
    padding: 9px 0;
  }

  .footer-logo {
    display: none;
  }

  .footer-brand p {
    margin-bottom: 14px;
    max-width: none;
  }

  .footer-social-cluster {
    gap: 8px;
  }

  .footer-social-invite {
    font-size: 11px;
    padding-left: 2px;
  }

  :global(.footer-social-invite-arrow) {
    font-size: 13px;
  }

  .footer-col-label {
    margin-bottom: 12px;
  }

  .footer-contact {
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #instagram {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-locations .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }

  .mobile-phone {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .hero-text h1,
  .hero-heading {
    font-size: 32px;
    line-height: 1.12;
  }

  .hero-text h1 .hero-heading-mobile {
    font-size: 31px;
    line-height: 1.12;
  }

}

@media (min-width: 769px) {
  .hero-img img {
    transform: translateX(-120px);
  }
}

/* Mid-range laptops (≈13"–15"): the dog mascot otherwise drifts close
   enough to the hero headline that its ears clip the "happy dog" line.
   Shrink the image footprint slightly and pull it further left so there's
   a clear gap before the text column begins. */
@media (min-width: 769px) and (max-width: 1599px) {
  .hero-img img {
    width: 54%;
    transform: translateX(-200px);
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  .hero-img img {
    transform: translateX(-240px);
  }
}

@media (min-width: 1200px) {
  body:has(#hero) .hero-inner {
    padding-bottom: 120px;
  }
}

/* ── Ultrawide (≥1800px) ────────────────────────────────────────────────────
   Only add rules here that are genuinely ultrawide-specific.
   Normal desktop, tablet, and mobile breakpoints are handled above.         ── */
@media (min-width: 1800px) {
  /* ServiceHero: stop content drifting far right on wide screens.
     The component reads this custom property with the normal formula as its
     fallback — so nothing below 1800px is affected. */
  :root {
    --sh-copy-left-pad: clamp(420px, 22vw, 550px);
  }

  .hero-img img {
    width: 54%;
    object-position: center 8%;
  }
}