/* ============================================================
   Humane Society of Atchison — home page styles
   ============================================================ */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(43,139,168,.18), transparent 60%),
    radial-gradient(760px 420px at 95% 110%, rgba(224,145,58,.16), transparent 60%),
    var(--cream);
  padding: clamp(48px, 8vw, 96px) 0;
  overflow: hidden;
}
.hero .wrap { max-width: 1220px; margin: 0 auto; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
.hero__eyebrow { }
.hero h1 { font-size: clamp(38px, 7vw, 68px); line-height: 1.05; margin-bottom: 16px; }
.hero h1 .amber { color: var(--amber-dk); }
.hero p.lede { margin-bottom: 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__art { max-width: 460px; margin-left: auto; width: 100%; text-align: center; }
.hero__art__band { background: #fff; padding: 26px 26px 20px; border-bottom: 1px solid var(--line); display: grid; place-items: center; }
.hero__art__band img { width: 78%; max-width: 300px; margin: 0 auto; }
.hero__art .tagline { font-family: "Chewy", cursive; color: var(--teal); font-size: 24px; padding: 18px 18px 0; margin: 0 0 6px; }
.hero__stat { color: var(--ink-soft); font-size: 14.5px; padding: 0 18px; margin: 0; }
.hero__art .card__foot .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__art { order: -1; margin-left: 0; }
  .hero__cta { justify-content: flex-start; }
}

/* Section heading block */
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.section-head p { color: var(--ink-soft); }

/* Mission / stats band */
.band { background: var(--teal-dk); color: #fff; }
.band .wrap { padding: clamp(44px, 6vw, 72px) var(--gutter); text-align: center; }
.band h2 { color: #fff; max-width: 20ch; margin: 0 auto .5em; }
.band p { color: #cfe0e2; max-width: 60ch; margin: 0 auto 22px; font-size: 17px; }

/* Featured "meet them" CTA under grid */
.more-cta { text-align: center; margin-top: 36px; }

/* ── Paw-print trails in the home page side margins (js/pawtrail.js) ── */
main { position: relative; }
.paw-trail { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.paw {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='13' cy='26' rx='6.5' ry='8.5' transform='rotate(-22 13 26)'/%3E%3Cellipse cx='25' cy='14' rx='6.5' ry='9'/%3E%3Cellipse cx='39' cy='14' rx='6.5' ry='9'/%3E%3Cellipse cx='51' cy='26' rx='6.5' ry='8.5' transform='rotate(22 51 26)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='13' cy='26' rx='6.5' ry='8.5' transform='rotate(-22 13 26)'/%3E%3Cellipse cx='25' cy='14' rx='6.5' ry='9'/%3E%3Cellipse cx='39' cy='14' rx='6.5' ry='9'/%3E%3Cellipse cx='51' cy='26' rx='6.5' ry='8.5' transform='rotate(22 51 26)'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: rotate(var(--r, 0deg)) scale(.5) translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.32,.72,0,1);
}
.paw--teal { background: #1f6f7d; }
.paw--amber { background: #e0913a; }
.paw.in { opacity: .24; transform: rotate(var(--r, 0deg)) scale(1) translateY(0); }
.paw--amber.in { opacity: .32; }
.paw.instant { transition: none; }
@media (max-width: 1179px) { .paw-trail { display: none; } }

/* Home quick-action cards: a bit larger on wide screens to fill toward the paw trails (still smaller than pet cards) */
@media (min-width: 1280px) { .cards--quick { gap: 28px; } .cards--quick > * { flex-basis: 350px; }
  .cards--quick .card .ico { height: 150px; font-size: 50px; }
  .cards--quick .card h3 { font-size: 27px; padding: 24px 24px 0; margin-bottom: 8px; }
  .cards--quick .card p { font-size: 16px; line-height: 1.6; padding: 0 24px; }
  .cards--quick .card__foot { padding: 22px 24px 26px; }
  .cards--quick .card__foot .btn { padding-top: 14px; padding-bottom: 14px; } }
@media (min-width: 1600px) { .cards--quick { gap: 32px; } .cards--quick > * { flex-basis: 390px; } .cards--quick .card .ico { height: 170px; font-size: 56px; } }