/* ============================================================
   Goose's Groom Room — shared stylesheet
   Edit colors/spacing here and every page updates.
   ============================================================ */

:root {
  --navy-900: #060f24;
  --navy-800: #0a1733;
  --navy-700: #0d1f45;
  --navy-600: #12275a;
  --blue-500: #2b7fff;
  --blue-400: #4da3ff;
  --blue-300: #7cbcff;
  --white: #ffffff;
  --text: #dbe4f5;
  --text-dim: #9fb0cf;
  --radius: 14px;
  --radius-lg: 26px;
  --max: 1180px;
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy-800);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue-400); text-decoration: none; }
a:hover { color: var(--blue-300); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; }

.eyebrow {
  color: var(--blue-400);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}

.lead { font-size: 1.08rem; color: var(--text); max-width: 60ch; }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--blue-400); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: var(--blue-400); color: #fff; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }

/* Pricing CTA — deliberately the loudest button on the site */
.btn-pricing {
  background: linear-gradient(135deg, #2b7fff 0%, #4da3ff 100%);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 700;
  padding: 20px 52px;
  box-shadow: 0 10px 28px rgba(43,127,255,.42);
  letter-spacing: .01em;
}
.btn-pricing:hover {
  color: #fff;
  box-shadow: 0 14px 34px rgba(43,127,255,.55);
}

/* Band the pricing CTA sits in */
.pricing-cta {
  background:
    radial-gradient(circle at 15% 30%, rgba(77,163,255,.14) 0 180px, transparent 181px),
    radial-gradient(circle at 85% 70%, rgba(77,163,255,.10) 0 150px, transparent 151px),
    var(--navy-700);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6,15,36,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 24px; max-width: var(--max); margin: 0 auto;
}
.logo img {
  width: 96px; height: 96px;
  border-radius: 50%;          /* circular badge, as on the original site */
  object-fit: cover;
}
.nav { display: flex; gap: 30px; align-items: center; }
.nav a { color: #fff; font-weight: 500; font-size: 1rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue-400); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: #fff; font-size: 1.9rem; line-height: 1; padding: 4px 8px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 74vh;
  display: flex; align-items: center;
  background: var(--navy-900);
  overflow: hidden;
}
/* Overlay keeps white text readable over bright van-interior photos */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,15,36,.62) 0%, rgba(6,15,36,.72) 45%, rgba(6,15,36,.94) 100%);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* keeps the dog in frame when cropped */
}
.hero-bg-van { object-position: center 52%; }
/* Home hero: the van is the subject, so lift the overlay and lean on
   text shadow instead of a heavy scrim to keep the headline readable. */
.hero-van::after {
  background: linear-gradient(180deg,
    rgba(6,15,36,.42) 0%,
    rgba(6,15,36,.50) 45%,
    rgba(6,15,36,.90) 100%);
}
.hero-van h1,
.hero-van .lead,
.hero-van .eyebrow { text-shadow: 0 2px 18px rgba(6,15,36,.85), 0 1px 3px rgba(6,15,36,.7); }
.hero .wrap { position: relative; z-index: 2; padding-block: 90px; }
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: 1.15rem; }

.hero-center { text-align: center; }
.hero-center h1 { margin-inline: auto; }
.hero-center .lead { margin-inline: auto; }
.hero-center .btn-row { justify-content: center; }

/* Compact hero for inner pages */
.hero-sm { min-height: 46vh; }

/* Solid blue hero — used while there's no background photo.
   To go back to a photo hero: remove class "hero-solid" from the
   <div class="hero"> and put the <img class="hero-bg"> back inside it. */
.hero-solid {
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-600) 55%, #1a3a86 100%);
}
.hero-solid::after { display: none; }

/* Subtle bubble motif so the solid hero isn't a flat slab */
.hero-solid::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(124,188,255,.16) 0 62px, transparent 63px),
    radial-gradient(circle at 22% 72%, rgba(124,188,255,.11) 0 38px, transparent 39px),
    radial-gradient(circle at 84% 26%, rgba(124,188,255,.13) 0 78px, transparent 79px),
    radial-gradient(circle at 92% 70%, rgba(124,188,255,.09) 0 46px, transparent 47px),
    radial-gradient(circle at 68% 88%, rgba(124,188,255,.10) 0 30px, transparent 31px);
  pointer-events: none;
}

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-alt { background: var(--navy-700); }
.section-deep { background: var(--navy-900); }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 40px;
}
.stat { text-align: center; padding: 18px 12px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.13); }
.stat-num {
  font-family: var(--font-display); font-size: 2.5rem;
  color: var(--blue-400); font-weight: 700; line-height: 1;
}
.stat-label { color: var(--text-dim); font-size: .95rem; margin-top: 8px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--navy-600);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--text-dim); margin: 0; font-size: .97rem; }
.card-icon {
  width: 46px; height: 46px; margin-bottom: 18px;
  color: var(--blue-400);   /* inline SVG icons inherit this */
}

/* Package/service list */
.pkg ul { list-style: none; padding: 0; margin: 18px 0 0; }
.pkg li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; color: var(--text); font-size: .97rem;
}
.pkg li::before {
  content: "✓";
  color: var(--blue-400); font-weight: 700; flex: none;
}

/* ---------- Split (image + text) ---------- */
.split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 54px; align-items: center;
}
.split img { border-radius: var(--radius); }

/* ---------- Gallery ----------
   Masonry-style columns so portrait and landscape photos both keep
   their natural shape instead of being cropped to a fixed ratio. */
.gallery-grid { columns: 2; column-gap: 20px; }
.gallery-grid img {
  width: 100%;
  margin: 0 0 20px;
  border-radius: var(--radius);
  break-inside: avoid;
  transition: transform .25s ease;
}
.gallery-grid img:hover { transform: scale(1.015); }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--navy-600);
  border-radius: var(--radius);
  padding: 32px 28px;
  border: 1px solid rgba(255,255,255,.08);
}
.quote-mark { color: var(--blue-400); font-size: 2.4rem; line-height: 1; font-family: var(--font-display); }
.quote p { color: var(--text); font-style: italic; margin: 10px 0 16px; }
.quote cite { color: var(--blue-300); font-style: normal; font-weight: 600; }

/* ---------- Notice (for placeholders needing real content) ---------- */
.notice {
  border: 1px dashed var(--blue-400);
  background: rgba(43,127,255,.08);
  border-radius: var(--radius);
  padding: 22px 24px;
  color: var(--text);
}
.notice strong { color: var(--blue-300); }

/* ---------- Policy list ---------- */
.policy { border-bottom: 1px solid rgba(255,255,255,.1); padding: 22px 0; }
.policy:last-child { border-bottom: 0; }
.policy h3 { margin-bottom: .3em; }
.policy p { color: var(--text-dim); margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; }
.contact-list { list-style: none; padding: 0; margin: 26px 0 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-list span { display: block; color: var(--text-dim); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.contact-list a, .contact-list strong { color: #fff; font-size: 1.05rem; font-weight: 500; }

form label { display: block; margin-bottom: 16px; font-size: .93rem; color: var(--text-dim); }
form input, form textarea {
  width: 100%; margin-top: 7px; padding: 13px 15px;
  background: var(--navy-900); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  font-family: inherit; font-size: 1rem;
}
form input:focus, form textarea:focus { outline: 2px solid var(--blue-500); border-color: transparent; }
form textarea { min-height: 130px; resize: vertical; }

#form-status:empty { display: none; }
.form-status-visible {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--blue-400);
  background: rgba(43,127,255,.10);
  border-radius: var(--radius);
  color: var(--text); font-size: .95rem;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); padding: 54px 0 0; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; padding-bottom: 34px;
}
.footer-top .logo img { width: 104px; height: 104px; }
.footer-mail { font-size: 1.05rem; }
.footer-phone { font-size: 1.05rem; color: #fff; font-weight: 600; }
.footer-phone:hover { color: var(--blue-300); }
.social { display: flex; gap: 18px; }
.social a { font-size: 1.35rem; color: var(--blue-400); }
.footer-nav {
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
  padding: 22px 0;
}
.footer-nav a { color: #fff; font-size: .97rem; }
.copyright {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0; color: var(--text-dim); font-size: .88rem;
}

/* ============================================================
   SCROLL ANIMATIONS
   Elements fade up as they enter the viewport, matching the
   motion the old Beaver Builder site had. Driven by site.js,
   which adds .is-visible when an element scrolls into view.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.6,.3,1),
              transform .7s cubic-bezier(.2,.6,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered children — cards appear one after another */
.reveal-group > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s cubic-bezier(.2,.6,.3,1),
              transform .65s cubic-bezier(.2,.6,.3,1);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .36s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .48s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: .60s; }

/* Images scale in gently */
.reveal-img { opacity: 0; transform: scale(.96); transition: opacity .8s ease, transform .8s ease; }
.reveal-img.is-visible { opacity: 1; transform: none; }

/* If the visitor prefers reduced motion, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > *, .reveal-img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   Universal safeguards first, then breakpoints largest → smallest.
   ============================================================ */

/* Never allow sideways scrolling on any device.
   IMPORTANT: use `clip`, not `hidden`. Setting overflow-x:hidden on <html>
   forces overflow-y to `auto`, which turns <html> into a scroll container
   and breaks window scrolling, anchor links and IntersectionObserver.
   `clip` prevents horizontal scroll without creating a scroll container. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

/* Long words and email addresses can't blow out narrow screens */
h1, h2, h3, p, a, li, cite { overflow-wrap: break-word; }

/* Respect notches and rounded corners (iPhone, foldables) */
.wrap, .header-inner {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Every tappable target meets the 44px accessibility minimum.
   NOTE: .nav-toggle is deliberately excluded — it owns its own display,
   and forcing inline-flex here would show the hamburger on desktop. */
.nav a, .btn, .footer-nav a, .social a, form button,
.footer-mail, .footer-phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav a, .footer-nav a { justify-content: flex-start; }
.nav-toggle { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }

/* iOS zooms the whole page if an input's font-size is under 16px */
form input, form textarea, form select { font-size: 16px; }

/* Honour the system "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Very large screens: stop endless stretching ---------- */
@media (min-width: 1600px) {
  :root { --max: 1320px; }
  .hero .wrap { padding-block: 120px; }
}

/* ---------- Tablets / small laptops ---------- */
@media (max-width: 1024px) {
  section { padding: 72px 0; }
  .nav { gap: 22px; }
  .nav a { font-size: .95rem; }
}

@media (max-width: 940px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .stat:nth-child(3) { border-left: 0; }
  .split img { order: -1; }          /* photo above text when stacked */
}

/* ---------- Phones: hamburger nav ---------- */
@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--navy-900);
    padding: 6px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 2px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 1.05rem;
  }
  .nav a:last-child { border-bottom: 0; }

  section { padding: 58px 0; }
  .hero { min-height: 60vh; }
  .hero-sm { min-height: 40vh; }
  .hero .wrap { padding-block: 66px; }
  /* Portrait crop on phones — bias toward the subject */
  .hero-bg { object-position: center 38%; }
  .hero::after {
    background: linear-gradient(180deg, rgba(6,15,36,.68) 0%, rgba(6,15,36,.78) 45%, rgba(6,15,36,.95) 100%);
  }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .logo img { width: 72px; height: 72px; }
  .footer-top { flex-direction: column; text-align: center; }
  .footer-top .logo img { width: 88px; height: 88px; }

  /* Full-width buttons sit better under the thumb */
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; }

  /* Home hero on phones: the photo runs full-bleed, but it is composed so
     the van sits at the top and the driveway below it fades into the navy.
     The copy sits in that lower band, so it never covers the vehicle. */
  .hero-van {
    /* Just tall enough for the photo plus the copy — no dead band between
       the driveway and the headline. */
    min-height: max(73vh, 620px);
    align-items: flex-end;
    background: var(--navy-800);
  }
  .hero-van::after { display: none; }   /* the fade is baked into the image */
  .hero-van .hero-bg { object-position: center top; }
  .hero-van .wrap { padding-block: 0 34px; }
  /* Buttons side by side keep the copy block short enough to stay off
     the vehicle. */
  .hero-van .btn-row { flex-direction: row; gap: 10px; }
  .hero-van .btn-row .btn { flex: 1 1 0; width: auto; padding: 15px 8px; font-size: .94rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .wrap, .header-inner {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  section { padding: 48px 0; }
  .card { padding: 24px 20px; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
  .stat-num { font-size: 2.1rem; }
  .footer-nav { gap: 0; flex-direction: column; text-align: center; }
  .footer-nav a { padding: 11px 0; justify-content: center; }

  /* Small phones: slightly tighter type so the copy still clears the van. */
  .hero-van h1 { font-size: 1.85rem; }
  .hero-van .lead { font-size: 1rem; }
  .hero-van .wrap { padding-block: 0 26px; }
}

/* ---------- Phones held sideways ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .hero-sm { min-height: auto; }
  .hero .wrap { padding-block: 46px; }
  .nav { max-height: calc(100vh - 70px); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle, .btn, .btn-row, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, p, li { color: #000; }
  .hero { min-height: auto; background: none; }
  .hero-solid::before { display: none; }
  .card, .quote, .notice { border: 1px solid #999; }
}

/* ============================================================
   PRICING SECTION
   ============================================================ */
.price-tabs {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 40px 0 30px;
}
.price-tab {
  background: var(--navy-600); color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  padding: 13px 26px; border-radius: var(--radius-lg);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; min-height: 48px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.price-tab:hover { border-color: var(--blue-400); color: #fff; }
.price-tab.is-active {
  background: var(--blue-500); color: #fff; border-color: var(--blue-500);
}

.price-panel { display: none; }
.price-panel.is-active { display: block; }

.price-note {
  text-align: center; color: var(--text-dim);
  max-width: 62ch; margin: 0 auto 30px; font-size: .98rem;
}

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.price-card {
  background: var(--navy-600);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 30px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .2s ease, border-color .2s ease;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--blue-400); }
.price-size {
  color: var(--text-dim); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}
.price-weight {
  color: var(--blue-300); font-size: .8rem;
  font-weight: 500; letter-spacing: .03em;
  margin-top: -3px;
}
.price-amt {
  font-family: var(--font-display); font-size: 2.6rem;
  font-weight: 800; color: var(--white); line-height: 1;
}
.price-from { color: var(--text-dim); font-size: .82rem; }

.addon-list {
  list-style: none; padding: 0; margin: 0 auto; max-width: 640px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px;
}
.addon-list li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 1.02rem;
}
.addon-price { color: var(--blue-400); font-weight: 700; font-size: 1.12rem; }

.price-small {
  color: var(--text-dim); font-size: .9rem;
  margin-top: 20px; max-width: 52ch; margin-inline: auto;
}

@media (max-width: 940px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .addon-list { grid-template-columns: 1fr; }
  .price-tabs { gap: 8px; }
  .price-tab { padding: 12px 18px; font-size: .94rem; flex: 1 1 44%; }
}
@media (max-width: 420px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-amt { font-size: 2.2rem; }
}