/* Reference-inspired presentation. Loaded after the original site styles. */
:root {
    --bg-primary: #fffcf7;
    --color-card-bg: #ffffff;
    --text-primary: #263d32;
    --color-text-secondary: #637168;
    --color-border: #e5e9df;
    --pet-mint: #a6e2c0;
    --pet-coral: #ff755e;
    --pet-coral-text: #b84832;
}
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
.container.section { padding-inline: 24px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; background: #fff; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.site-header { background: var(--bg-primary); border-bottom-color: rgba(38,61,50,.09); }
.page-home .site-header { background: var(--pet-mint); }
.site-header.site-header--scrolled { background: rgba(255,252,247,.96); box-shadow: 0 4px 22px #263d320d; }
.site-header__inner { height: 88px; }
.site-header .site-logo { display: inline-flex; align-items: center; color: var(--text-primary); font-size: 1.45rem; letter-spacing: -.035em; }
.site-header .site-logo span { color: #b84832; }
.brand-paw { color: var(--pet-coral-text); margin-right: 9px; transform: rotate(-12deg); }
.site-nav { gap: 26px; }
.site-nav a { position: relative; color: var(--text-primary); font-weight: 800; font-size: .85rem; padding-block: 8px; }
.site-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--pet-coral-text); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; border-radius: 4px; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--pet-coral-text); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-search { background: #ffffff65; border-color: #263d3226; padding: 5px 6px 5px 16px; }
.site-search input { color: var(--text-primary); width: 180px; }
.site-search input::placeholder { color: #526459; }
.site-search button { background: var(--color-primary); color: #fff; width: 31px; height: 31px; }
.site-search button:hover { background: #355f49; }
.pet-eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .14em; margin: 0 0 18px; color: var(--pet-coral-text); }
.pet-hero { position: relative; isolation: isolate; background: var(--pet-mint); padding: 40px 0 94px; }
.pet-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 75% 42%, #d7f5d9aa 0, transparent 45%), radial-gradient(#fff4 .8px, transparent .8px); background-size: auto, 7px 7px; }
.pet-hero .hero__inner { max-width: var(--max-width); text-align: left; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; }
.pet-hero__copy { padding-bottom: 12px; position: relative; z-index: 2; }
.pet-hero .pet-eyebrow { color: #365b46; display: flex; align-items: center; gap: 8px; }
.pet-hero .hero__title { color: var(--text-primary); font-size: clamp(2.5rem,4.3vw,3.8rem); line-height: 1.09; letter-spacing: -.045em; margin-bottom: 24px; }
.pet-hero .hero__title span { color: #315d44; }
.pet-hero .hero__subtitle { margin: 0 0 30px; max-width: 420px; font-size: 1.05rem; color: #395445; line-height: 1.8; }
.pet-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.btn { border-radius: 999px; padding: 13px 24px; font-weight: 800; }
.btn span { display: inline-block; margin-left: 10px; transition: transform .2s ease; }
.btn:hover span { transform: translate(2px,-2px); }
.pet-text-link { color: var(--text-primary); font-weight: 800; font-size: .88rem; }
.pet-text-link span { margin-left: 5px; }
.pet-hero .hero__stats { justify-content: flex-start; align-items: center; color: #395445; font-size: .78rem; gap: 9px; margin-top: 28px; }
.pet-hero .hero__stats span[aria-hidden] { color: #315d44; margin: 0; }
.pet-hero__stat-mark { display: inline-grid; place-items: center; background: #ffffff75; width: 22px; height: 22px; border-radius: 50%; }
.pet-hero__art { position: relative; height: 465px; }
.pet-hero__halo { position: absolute; width: 94%; height: 86%; top: 6%; left: 4%; background: #caf0ce; border-radius: 46% 54% 35% 65% / 60% 43% 57% 40%; transform: rotate(-9deg); }
.pet-hero__halo::after { content: ''; position: absolute; inset: -14px 13px 7px -12px; border: 1px solid #467d4f40; border-radius: inherit; }
.pet-hero__pets { position: absolute; width: 100%; height: 100%; object-fit: contain; bottom: 5px; filter: drop-shadow(0 16px 12px #244c2d13); }
.pet-hero__note { position: absolute; z-index: 2; right: 6px; top: 10px; font-family: var(--font-heading); font-size: 1.05rem; transform: rotate(9deg); color: #3d6950; }
.pet-bone-wrap { position: absolute; bottom: -3px; left: 20%; width: 67%; z-index: 3; }
.pet-bone { position: relative; display: block; width: 100%; transform: rotate(-9deg); animation: pet-bone-sway 5s ease-in-out infinite; transform-origin: center; }
.pet-bone svg { width: 100%; display: block; overflow: visible; }
.pet-bone > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 8px; font-family: var(--font-heading); font-weight: 500; font-size: clamp(.9rem,1.6vw,1.24rem); color: #263d32; }
.pet-bone:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.pet-bone:focus-visible { outline: 3px solid #263d32; outline-offset: 10px; border-radius: 35px; }
.pet-spark { position: absolute; color: #263d32; animation: pet-sparkle 3.8s ease-in-out infinite; font-size: 28px; pointer-events: none; }
.pet-spark--1 { left: -8%; top: 10%; }
.pet-spark--2 { right: -8%; top: -8%; animation-delay: -1.3s; font-size: 36px; }
.pet-spark--3 { right: -2%; bottom: -3%; animation-delay: -2.5s; font-size: 23px; }
.pet-spark--4 { left: 6%; bottom: -8%; animation-delay: -.7s; }
.pet-hero__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; color: var(--bg-primary); pointer-events: none; }
.pet-motion-control { position: relative; display: flex; justify-content: flex-end; padding-top: 16px; z-index: 4; }
.motion-toggle { border: 1px solid #365b4638; background: #ffffff55; color: #365b46; font: 700 .72rem var(--font-sans); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.motion-toggle:hover { background: #fff; }
.pet-section-intro { text-align: center; max-width: 650px; margin: 0 auto 34px; }
.pet-section-intro .pet-eyebrow { margin-bottom: 12px; }
.pet-section-intro h2 { font-size: clamp(1.85rem,3vw,2.4rem); line-height: 1.2; margin: 0 0 12px; letter-spacing: -.025em; }
.pet-section-intro > p:last-child { color: var(--color-text-secondary); margin: 0; }
.pet-discover { padding-top: 35px; }
.pet-guide-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.pet-guide-card { background: #f0f2eb; border: 1px solid transparent; border-radius: 22px; padding: 28px 22px; display: flex; flex-direction: column; align-items: flex-start; color: var(--text-primary); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pet-guide-card:nth-child(2) { background: #fff0e9; }
.pet-guide-card:nth-child(3) { background: #e9f3ee; }
.pet-guide-card:nth-child(4) { background: #f8f0dd; }
.pet-guide-card__icon { width: 56px; height: 56px; font-size: 2rem; display: grid; place-items: center; border-radius: 18px; background: #ffffffa0; margin-bottom: 20px; transition: transform .3s ease; }
.pet-guide-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 12px; }
.pet-guide-card p { color: #5e6a60; font-size: .88rem; line-height: 1.75; margin: 0 0 25px; }
.pet-guide-card__link { margin-top: auto; font-size: .75rem; font-weight: 900; color: var(--pet-coral-text); }
.pet-guide-card__link span { margin-left: 12px; }
.pet-guide-card:hover { color: var(--text-primary); transform: translateY(-6px); border-color: #c8d4c9; box-shadow: 0 14px 22px #263d320c; }
.pet-guide-card:hover .pet-guide-card__icon { transform: rotate(-8deg); }
.page-home .section { padding-top: 48px; padding-bottom: 48px; }
.page-home .section__header h2 { font-size: 1.9rem; letter-spacing: -.02em; }
.page-home .page-heading__eyebrow { color: var(--pet-coral-text); }
.featured-card { border: 1px solid var(--color-border); border-radius: 28px; box-shadow: 0 8px 28px #263d3207; }
.featured-card__body { padding: 42px; }
.featured-card__title { font-size: 1.9rem; }
.category-tile { background: #f0f2eb; border-color: transparent; }
.categories-strip__grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.category-tile:hover { border-color: #aac9b3; }
.category-tile__icon { transition: transform .25s ease; }
.category-tile:hover .category-tile__icon { transform: rotate(-8deg) scale(1.08); }
.post-card { box-shadow: 0 6px 20px #263d3205; border-radius: 24px; }
.post-card__image-link { overflow: hidden; }
.post-card__image { transition: transform .45s ease; }
.post-card:hover .post-card__image { transform: scale(1.035); }
.post-card:hover { border-color: #b7cbbd; }
.post-card__category { background: #edf4ee; }
.paw-divider { font-size: 1rem; opacity: .28; padding: 0; letter-spacing: .6em; }
.pet-about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.pet-about__intro h2 { font-size: clamp(2rem,3.2vw,2.6rem); line-height: 1.18; margin: 0 0 20px; letter-spacing: -.03em; }
.pet-about__intro > p:not(.pet-eyebrow) { color: var(--color-text-secondary); max-width: 440px; margin-bottom: 25px; }
.pet-faq { position: relative; padding: 28px; background: #eaf4e9; border-radius: 45px 22px 45px 22px; }
.pet-faq details { background: #ffffffb5; border-radius: 14px; margin-bottom: 12px; padding: 18px 20px; }
.pet-faq details:last-child { margin-bottom: 0; }
.pet-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 800; font-size: .9rem; }
.pet-faq summary::-webkit-details-marker { display: none; }
.pet-faq summary > span { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #d8ead7; display: grid; place-items: center; font-size: 1.1rem; transition: transform .2s ease; }
.pet-faq details[open] summary > span { transform: rotate(45deg); }
.pet-faq details p { margin: 15px 0 0; font-size: .87rem; color: #58675c; line-height: 1.8; }
.newsletter__box { position: relative; border-radius: 60px 24px 60px 24px; background: #244b38; }
.newsletter__box h2 { font-size: 2rem; }
.site-footer { border-radius: 50px 50px 0 0; margin-top: 38px; }
[data-reveal] { opacity: 1; }
.motion-ready [data-reveal].is-pending { opacity: 0; transform: translateY(18px); }
.motion-ready [data-reveal] { transition: opacity .65s ease, transform .65s ease; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused [data-reveal] { opacity: 1; transform: none; transition: none; }
html.motion-paused { scroll-behavior: auto; }
@keyframes pet-bone-sway { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes pet-sparkle { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.06); } }
@media (max-width: 1000px) {
    .site-header__right { gap: 18px; }
    .site-nav { gap: 17px; }
    .site-search input { width: 140px; }
    .pet-hero__art { height: 400px; }
    .pet-guide-grid { grid-template-columns: repeat(2,1fr); }
    .pet-about { gap: 36px; }
}
@media (max-width: 760px) {
    .site-header__inner { height: auto; flex-wrap: wrap; padding-block: 15px; gap: 12px; }
    .site-header__right { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .site-header .site-logo { font-size: 1.3rem; }
    .site-nav { gap: 20px; }
    .pet-hero { padding-top: 35px; padding-bottom: 76px; }
    .pet-hero .hero__inner { grid-template-columns: 1fr; gap: 18px; }
    .pet-hero__copy { max-width: 570px; margin: auto; width: 100%; }
    .pet-hero .hero__title { font-size: clamp(2.4rem,7vw,3.5rem); }
    .pet-hero .hero__subtitle { max-width: 500px; }
    .pet-hero__art { width: min(100%,480px); height: 410px; margin: 0 auto; }
    .pet-bone > span { font-size: 1.13rem; }
    .pet-hero__wave { height: 55px; }
    .pet-about { grid-template-columns: 1fr; gap: 30px; }
    .pet-faq { padding: 20px; }
    .section__header { gap: 12px; flex-wrap: wrap; }
    .page-home .section__header h2 { font-size: 1.65rem; }
}
@media (max-width: 480px) {
    .container, .container.section { padding-inline: 20px; }
    .site-header__right { gap: 12px; }
    .site-nav { gap: 22px; width: 100%; justify-content: space-between; }
    .site-nav a { font-size: .8rem; }
    .site-search { width: 100%; }
    .site-search input { width: 100%; }
    .site-header__inner { padding-block: 12px; }
    .pet-hero__actions { gap: 16px; }
    .pet-hero .hero__title { font-size: 2.45rem; }
    .pet-hero .hero__subtitle { font-size: .95rem; }
    .pet-hero__art { height: 330px; }
    .pet-bone-wrap { width: 72%; left: 16%; bottom: 0; }
    .pet-bone > span { font-size: .95rem; }
    .pet-hero__note { font-size: .9rem; right: 9px; }
    .pet-guide-grid { gap: 12px; }
    .pet-guide-card { padding: 21px 16px; border-radius: 18px; }
    .pet-guide-card h3 { font-size: 1rem; }
    .pet-guide-card p { font-size: .8rem; }
    .pet-guide-card__link { font-size: .7rem; }
    .pet-guide-card__link span { margin-left: 3px; }
    .pet-guide-card__icon { margin-bottom: 15px; }
    .featured-card__body { padding: 26px; }
    .featured-card__title { font-size: 1.45rem; }
    .newsletter__box h2 { font-size: 1.6rem; }
    .page-home .section { padding-block: 35px; }
    .pet-faq details { padding: 16px; }
    .categories-strip__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .newsletter__form input { flex: 0 0 auto; width: 100%; min-height: 50px; border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .motion-ready [data-reveal].is-pending { opacity: 1; transform: none; }
    .pet-bone { transform: rotate(-6deg); }
}