/* Warm surfaces and small, responsive details. No animation libraries. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }
::selection { background: #ffe0d8; color: var(--ink); }
.header { position: relative; z-index: 2; }
.header nav a, .footer nav a, .care-links a {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.header nav a:hover, .footer nav a:hover, .care-links a:hover { color: #b25349; }
.nav-contact { background: #ffffff40; }
.nav-contact:hover { background: #fff0e8; border-color: #efc8b9; }
.brand { transition: transform 180ms var(--ease-out); }
.button {
  box-shadow: 0 5px 15px #2d221b0c;
  transition: transform 180ms var(--ease-out), background-color 160ms ease, box-shadow 180ms ease;
}
.button span, .text-link span {
  display: inline-block;
  transition: transform 180ms var(--ease-out);
}
.button:hover span { transform: translate(2px, -2px); }
.button:active { transform: translateY(1px); }
.text-link { transition: color 160ms ease, border-color 160ms ease; }
.text-link:hover { color: #b25349; border-color: #b25349; }
.text-link:hover span { transform: translateY(3px); }

.hero {
  min-height: 680px;
  position: relative;
  isolation: isolate;
  padding-bottom: 56px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -70px 0 -30px;
  background: radial-gradient(ellipse at 77% 44%, #fce5d880, transparent 53%),
              radial-gradient(ellipse at 14% 84%, #e4f1e647, transparent 43%);
}
.hero .eyebrow { display: flex; align-items: center; gap: 10px; }
.hero .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #72c8b51a;
}
.hero h1 span { position: relative; white-space: nowrap; isolation: isolate; }
.hero h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: .09em;
  left: -.03em;
  width: 96%;
  height: .16em;
  background: #ffb7a857;
  border-radius: 45% 55% 40% 60%;
  transform: rotate(-2deg);
}
.hero-circle {
  background: radial-gradient(circle at 32% 28%, #fbe1d4, #f9e9df 64%, #f3eee3);
  border-radius: 48% 52% 56% 44% / 46% 43% 57% 54%;
  transform: rotate(-12deg);
}
.hero-screen { box-shadow: 0 24px 50px -20px #704d3829; }
.hero-tag { background: #fffdf9f5; box-shadow: 0 12px 30px -12px #704d3826; }
.hero-doodle { position: absolute; pointer-events: none; }
.hero-doodle svg { width: 100%; height: 100%; }
.hero-heart { width: 36px; height: 36px; top: 9%; left: 8%; color: #df9483; transform: rotate(-14deg); }
.hero-paw { width: 34px; height: 34px; top: 45%; right: 4%; color: #72b9a4; transform: rotate(18deg); }

.overview { border-top: 0; padding-top: 64px; position: relative; }
.overview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.features { gap: 20px; margin-top: 38px; }
.features article {
  padding: 24px;
  border: 1px solid #eaded0b3;
  border-radius: 22px;
  background: linear-gradient(145deg, #fffdf9, #fff4e940);
  box-shadow: 0 7px 24px -16px #704d3826;
  transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.features article:nth-child(2) { background: linear-gradient(145deg, #fffdf9, #e9f3eb70); }
.features article:nth-child(3) { background: linear-gradient(145deg, #fffdf9, #ffeae250); }
.features h3 { font-size: 19px; }
.feature-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border-radius: 11px;
  background: #fce8df;
  color: #a64e43;
  margin-bottom: 22px;
}
.features article:nth-child(2) .feature-number { background: #e2f1e9; color: #377a68; }
.features article:nth-child(3) .feature-number { background: #f2e9da; color: #87644f; }
.screens-section {
  background: radial-gradient(ellipse at 85% 35%, #e0ede45e, transparent 55%),
              linear-gradient(180deg, var(--cream), #f5eae0 16%, #f2ece2 78%, var(--cream));
}
.screens { gap: 30px; }
.screens figure {
  border: 1px solid #fffaf4;
  border-radius: 22px;
  padding: 12px 12px 22px;
  background: #fffcf7b3;
  box-shadow: 0 20px 40px -25px #704d383d;
}
.screens img { border-radius: 12px; transition: transform 220ms var(--ease-out); }
.screens figcaption { padding: 18px 8px 0; font-size: 13px; }
.care { padding-top: 68px; }
.care-mark {
  background: radial-gradient(circle at 30% 20%, #ecf7ee, #dceee4);
  border: 1px solid #d7e9dc;
  border-radius: 44% 56% 49% 51% / 52% 46% 54% 48%;
  box-shadow: 0 10px 30px -20px #387f704d;
  transform: rotate(-6deg);
}
.contact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #fbe4d9, #f9e9df 58%, #edf1e3);
  border: 1px solid #f1dacb;
  border-radius: 26px;
}
.contact-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 250px;
  height: 250px;
  right: -60px;
  top: -105px;
  border: 1px solid #fff9f1b3;
  border-radius: 50%;
  box-shadow: 0 0 0 30px #fff9f12e, 0 0 0 60px #fff9f11a;
}
.document .eyebrow { color: #a95349; }
.contact-page input:not([type=checkbox]), .contact-page select, .contact-page textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.contact-page input:focus, .contact-page select:focus, .contact-page textarea:focus {
  border-color: #bb7867;
  box-shadow: 0 3px 12px #b253490c;
}

.outings-section {
  padding-block: 56px 64px;
  background: radial-gradient(ellipse at 14% 46%, #f9e0d57a, transparent 52%),
              radial-gradient(ellipse at 89% 55%, #deeee57a, transparent 52%),
              linear-gradient(180deg, var(--cream), #f7f0e6 45%, var(--cream));
}
.outings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.outing-card {
  padding: 28px 28px 22px;
  border: 1px solid #f0dfd2;
  border-radius: 28px;
  background: linear-gradient(160deg, #fffdfa, #fcebe1b3);
  box-shadow: 0 18px 42px -27px #704d3838;
}
.outing-spots { border-color: #dce8dd; background: linear-gradient(160deg, #fffdfa, #e8f2e8b3); }
.outing-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #a95349; margin-bottom: 12px; }
.outing-spots .outing-label { color: #3a7b69; }
.outing-copy h3 { font-size: clamp(21px, 2.15vw, 27px); margin-bottom: 12px; }
.outing-copy p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.outing-details { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 7px; }
.outing-details li { background: #fffaf5b3; border: 1px solid #efddd0; border-radius: 999px; padding: 5px 11px; font-size: 10px; font-weight: 650; color: #875f50; }
.outing-spots .outing-details li { border-color: #d7e5d9; color: #426f5d; }
.outing-card figure { margin: 0; }
.outing-card figure img {
  width: 310px;
  margin-inline: auto;
  border-radius: 16px;
  box-shadow: 0 18px 32px -19px #704d3840;
  transition: transform 220ms var(--ease-out);
}
.outing-card figcaption { text-align: center; font-size: 11px; color: var(--muted); margin-top: 20px; }
.outings-note { text-align: left; margin-top: 22px; }

@media (hover: hover) and (pointer: fine) {
  .outing-card:hover figure img { transform: translateY(-4px); }
  .brand:hover { transform: translateY(-1px); }
  .button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px #2d221b1a; }
  .features article:hover { transform: translateY(-4px); border-color: #e6cbbb; box-shadow: 0 15px 30px -18px #704d3833; }
  .screens figure:hover img { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: arrive 550ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 45ms; }
  .hero-copy > :nth-child(3) { animation-delay: 85ms; }
  .hero-copy > :nth-child(n+4) { animation-delay: 120ms; }
  .hero-screen { animation: screen-float 7s ease-in-out infinite; }
  .hero-tag { animation: tag-float 8s ease-in-out infinite; }
  .reveal-item { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
  .reveal-pending { opacity: 0; transform: translateY(16px); }
  .features .reveal-item:nth-child(2), .screens .reveal-item:nth-child(2), .outing-card.reveal-item:nth-child(2) { transition-delay: 50ms; }
  .features .reveal-item:nth-child(3), .screens .reveal-item:nth-child(3) { transition-delay: 100ms; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes screen-float { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes tag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (max-width: 760px) {
  .hero { min-height: 0; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(32px, 9.9vw, 44px); }
  .hero::before { inset: 0 0 -15px; background: radial-gradient(ellipse at 60% 65%, #fce5d880, transparent 60%); }
  .hero-circle { width: min(330px, 90%); height: auto; aspect-ratio: 1; left: 5%; }
  .hero-heart { left: 2%; top: 8%; width: 29px; height: 29px; }
  .hero-paw { right: 0; width: 28px; height: 28px; }
  .overview { padding-top: 48px; }
  .overview::before { left: 24px; right: 24px; }
  .features { gap: 14px; margin-top: 30px; }
  .features article { padding: 22px; }
  .feature-number { margin-bottom: 16px; }
  .screens { gap: 16px; padding-top: 8px; padding-bottom: 26px; }
  .screens figure { padding: 10px 10px 18px; border-radius: 20px; }
  .screens figcaption { padding-inline: 3px; font-size: 12px; }
  .care { padding-top: 45px; }
  .contact-band { padding: 27px; }
  .outings-section { padding-block: 40px 48px; }
  .outings-grid { grid-template-columns: 1fr; gap: 20px; }
  .outing-card { padding: 24px 22px 20px; border-radius: 24px; }
  .outing-copy h3 { font-size: 22px; }
  .outing-copy p { font-size: 13px; }
  .outing-card figure img { width: 280px; }
  .outing-details { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .button, .button span, .text-link span, .features article, .screens img, .outing-card figure img, .reveal-item { transition: none; }
  .reveal-pending { opacity: 1; transform: none; }
}
@media print {
  .hero-copy > *, .hero-screen, .hero-tag { animation: none; }
  .reveal-pending { opacity: 1; transform: none; }
}