/* ============================================================
   SnoutWalker — Visual Redesign layer (2026-07-22)
   Loads AFTER styles.css. Reskin only: icons, imagery, type
   discipline, founder strip, photo hero. Per DT Claude handoff.
   ============================================================ */

/* ---- 1. Type & spacing discipline ------------------------- */
body { font-size: 17px; line-height: 1.65; }
@media (min-width: 768px) { body { font-size: 18px; } }

/* Eyebrow labels — 12px letterspaced uppercase */
.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* ---- 2. Signature element: the amber "leash underline" ---- */
/* A short, slightly-slack amber stroke under the key word in a
   headline. Applied to the existing <span> inside headlines
   (replaces the amber gradient-fill text treatment). One ownable
   decorative device — nothing else decorates. */
.hero-rover h1 span,
.leash {
  -webkit-text-fill-color: currentColor;   /* undo styles.css gradient clip */
  background: none;
  color: inherit;
  position: relative;
  white-space: nowrap;
  padding-bottom: 0.14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q34 2 60 6 T118 5' fill='none' stroke='%23F4A261' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.34em;
}
/* Hero headline key word draws its underline once on load */
.hero-photo h1 span {
  animation: leashDraw .7s cubic-bezier(.2,.7,.3,1) .35s both;
}
@keyframes leashDraw {
  from { background-size: 0 0.34em; }
  to   { background-size: 100% 0.34em; }
}

/* ---- 3. Icon system — Lucide in amber chips (kills emoji) -- */
.icon-chip {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(244, 162, 97, 0.12);   /* amber @ 12% */
  color: var(--navy);
  margin: 0 auto 14px;
}
.icon-chip svg { width: 24px; height: 24px; stroke-width: 2; }
/* On the navy safety section, lift the chip for contrast */
.icon-chip--dark {
  background: rgba(244, 162, 97, 0.18);
  color: var(--amber);
}
/* Inline chip (pet-owner trust row, app header) */
.icon-chip--sm { width: 40px; height: 40px; border-radius: 10px; margin: 0; }
.icon-chip--sm svg { width: 20px; height: 20px; }

/* Pet-owner trust row: align icon + text cleanly */
.pet-owner-trust-item { display: flex; align-items: center; gap: 12px; }
.pet-owner-trust-item .icon-chip--sm { flex: 0 0 auto; }

/* ---- 4. Card & shadow discipline -------------------------- */
/* One soft shadow token, 16px radius on the reskinned cards */
.icon-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(30, 58, 95, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.icon-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(30,58,95,.12); }
.icon-card--dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.icon-card--dark:hover { transform: translateY(-3px); box-shadow: none; background: rgba(255,255,255,0.09); }

/* ---- 5. Photo hero ---------------------------------------- */
.hero-photo {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  /* Default to the 1400w variant (matches the <link rel=preload>) so mobile
     doesn't download the 2000w image and starve the critical path. */
  background-image: image-set(
    url("/images/redesign/hero-1400.webp") type("image/webp"),
    url("/images/redesign/hero-1400.jpg")  type("image/jpeg"));
  background-image: -webkit-image-set(
    url("/images/redesign/hero-1400.webp") 1x,
    url("/images/redesign/hero-1400.jpg")  1x);
  background-size: cover;
  background-position: 62% center;
}
/* Only large screens fetch the 2000w hero */
@media (min-width: 1200px) {
  .hero-photo::before {
    background-image: image-set(
      url("/images/redesign/hero-2000.webp") type("image/webp"),
      url("/images/redesign/hero-2000.jpg")  type("image/jpeg"));
    background-image: -webkit-image-set(
      url("/images/redesign/hero-2000.webp") 1x,
      url("/images/redesign/hero-2000.jpg")  1x);
  }
}
/* Navy gradient from the left (~55%) so text stays legible */
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(30,58,95,.88) 0%,
    rgba(30,58,95,.72) 38%,
    rgba(30,58,95,.34) 72%,
    rgba(30,58,95,.12) 100%);
}
.hero-photo .container { position: relative; z-index: 2; }
.hero-photo .hero-rover-inner { max-width: 620px; }
.hero-photo .hero-headline,
.hero-photo .hero-sub { color: #fff; }
.hero-photo .hero-sub { color: rgba(255,255,255,.9); }
.hero-photo .hero-disclaimer { color: rgba(255,255,255,.55); }
@media (max-width: 640px) {
  .hero-photo::after {
    background: linear-gradient(180deg, rgba(30,58,95,.78) 0%, rgba(30,58,95,.86) 100%);
  }
  .hero-photo::before { background-position: 65% center; }
}

/* Hero CTAs: 2 primary tiles + a text link (per §4) */
.hero-cta-primary { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r-full);
  font-weight: 600; font-size: 1rem; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.hero-btn img { width: 24px; height: 24px; }
.hero-btn-walker { background: var(--amber); color: var(--navy); }
.hero-btn-sitter { background: #fff; color: var(--navy); }
.hero-btn:hover { transform: translateY(-2px); transition: transform .15s ease; }
.hero-find-link {
  display: inline-block; margin-bottom: 8px;
  color: rgba(255,255,255,.9); font-weight: 500; font-size: .95rem;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px;
}
.hero-find-link:hover { color: #fff; border-color: #fff; }

/* Hide the old decorative paws — the leash underline is the one device */
.hero-paw { display: none !important; }

/* ---- 6. Founder strip (replaces pseudo-testimonials) ------ */
.founder-strip {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  align-items: center;
  max-width: 860px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: 20px; padding: 40px;
  box-shadow: 0 4px 24px rgba(30,58,95,.08);
}
@media (min-width: 720px) { .founder-strip { grid-template-columns: auto 1fr; padding: 44px 48px; } }
.founder-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: var(--r-full);
  background: rgba(244,162,97,.14); color: var(--amber); margin: 0 auto;
}
.founder-badge svg { width: 44px; height: 44px; }
.founder-eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--amber); margin-bottom: 10px;
}
.founder-quote {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5;
  color: var(--text); font-weight: 500; margin-bottom: 16px;
}
.founder-quote .leash { white-space: normal; }
.founder-meta { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; }
.founder-meta strong { color: var(--navy); }

/* ---- 7. Motion: single fade-up on entry, reduced-motion safe */
@media (prefers-reduced-motion: reduce) {
  .hero-photo h1 span { animation: none; background-size: 100% 0.34em; }
  /* Show all scroll-reveal content immediately — no fade/slide for reduced-motion users */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-btn:hover, .icon-card:hover, .split-media img { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Step 5 — Photography bands (Images 2-8)
   ============================================================ */

/* -- Full-bleed photo band: image + navy overlay, white text -- */
.photo-band { position: relative; background-color: var(--navy); background-size: cover; background-position: center; }
.photo-band h2, .photo-band p, .photo-band .section-sub, .photo-band a:not(.btn-find):not([class*="btn"]) { color: #fff !important; }
.photo-band .section-sub { color: rgba(255,255,255,.85) !important; }
.pet-owners.photo-band {
  background-image: linear-gradient(90deg, rgba(30,58,95,.9) 0%, rgba(30,58,95,.66) 55%, rgba(30,58,95,.5) 100%),
    image-set(url("/images/redesign/handoff-2000.webp") type("image/webp"), url("/images/redesign/handoff-2000.jpg") type("image/jpeg"));
}
.final-cta.photo-band {
  background-image: linear-gradient(rgba(30,58,95,.84), rgba(30,58,95,.84)),
    image-set(url("/images/redesign/pack-cta-2000.webp") type("image/webp"), url("/images/redesign/pack-cta-2000.jpg") type("image/jpeg"));
}

/* -- Split: photo column + content column -- */
.split-photo { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; max-width: 1000px; margin: 0 auto; }
@media (min-width: 860px) {
  .split-photo { grid-template-columns: 0.85fr 1fr; gap: 48px; }
  .split-photo.split-photo-right { grid-template-columns: 1fr 0.85fr; }
  .split-photo.split-photo-right .split-media { order: 2; }
}
.split-media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; box-shadow: 0 4px 24px rgba(30,58,95,.14); display: block; }

/* -- Section-break photo strip -- */
.photo-strip { max-width: 1120px; margin: 8px auto 0; padding: 0 var(--s-lg); }
.photo-strip img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; box-shadow: 0 4px 24px rgba(30,58,95,.10); display: block; }
@media (max-width: 640px) { .photo-strip img { height: 200px; } }

/* -- Product card photographic headers -- */
.product-card-photo { height: 168px; border-radius: 16px 16px 0 0; background-size: cover; background-position: center; margin: -1px -1px 0; }
.product-card-photo-walker { background-image: image-set(url("/images/redesign/hero-1400.webp") type("image/webp"), url("/images/redesign/hero-1400.jpg") type("image/jpeg")); background-position: 60% 40%; }
.product-card-photo-sitter { background-image: image-set(url("/images/redesign/dropin-visit-1400.webp") type("image/webp"), url("/images/redesign/dropin-visit-1400.jpg") type("image/jpeg")); }
.product-card { overflow: hidden; }

/* Pet-owner trust row on the navy photo band: white text + amber chips */
.pet-owners.photo-band .pet-owner-trust-item { color: #fff; }
.pet-owners.photo-band .icon-chip { background: rgba(244,162,97,.22); color: var(--amber); }
.pet-owners.photo-band .btn-find { background: #fff; color: var(--navy); }

/* ---- Step 6: Lighthouse a11y — footer copyright contrast on navy ---- */
.footer-bottom { color: rgba(255,255,255,0.72); }