/* ==========================================================================
   LYT Pet — Warm Luxury design system (mobile-first)
   ========================================================================== */

:root {
	/* Brand (sampled from logo) */
	--orange: #FE8502;
	--orange-deep: #D96C00;
	--gold: #FCC205;
	--navy: #222C5E;
	--navy-soft: #3A4580;

	/* Warm neutrals */
	--cream: #FBF7F1;
	--sand: #F4ECDF;
	--linen: #E9DFCF;
	--white: #FFFFFF;
	--ink: #2A2521;
	--muted: #6F665C;

	--line: #06C755;
	--line-deep: #05A948;

	/* Loopless Thai + Latin. "Noto Sans" / system-ui cover any other language. */
	--font-display: "Prompt", "Anuphan", "Noto Sans Thai", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Anuphan", "Noto Sans Thai", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-accent: "Prompt", "Anuphan", system-ui, sans-serif; /* numbers & English labels */

	--radius: 28px;
	--radius-sm: 16px;
	--shadow: 0 18px 50px -18px rgba(34, 44, 94, .18);
	--shadow-sm: 0 6px 20px -8px rgba(34, 44, 94, .14);
	--container: 1180px;
	--gutter: 20px;
	--header-h: 68px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* room for sticky CTA */
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, .line-card__id, .info-list__big { font-variant-numeric: lining-nums; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.4; letter-spacing: -.005em; margin: 0; color: var(--navy); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 200; }
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }

/* ---------- Type helpers ---------- */
.eyebrow {
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--orange-deep);
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--gold); }
.section-head { margin-bottom: 40px; max-width: 680px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.01em; text-wrap: balance; }
.section-lead { color: var(--muted); margin: 16px 0 0; font-size: 1.02rem; }
.section-more { text-align: center; margin: 40px 0 0; }

.section { padding: 72px 0; }
.section--tight { padding: 32px 0 56px; }
.section--sand { background: var(--sand); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 10px 26px;
	border-radius: 999px; border: 1.5px solid transparent;
	font-weight: 500; font-size: 1rem; line-height: 1.2; white-space: nowrap;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .92rem; }
.btn--lg { min-height: 56px; padding: 12px 30px; font-size: 1.05rem; }
.btn--line { background: var(--line); color: #fff; box-shadow: 0 10px 24px -10px rgba(6, 199, 85, .7); }
.btn--line:hover { background: var(--line-deep); }
.btn--call { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(34, 44, 94, .7); }
.btn--call:hover { background: var(--navy-soft); }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--linen); padding-bottom: 2px; transition: gap .25s var(--ease), border-color .2s; }
.link-arrow:hover { gap: 14px; border-color: var(--orange); }
.link-arrow .icon { width: 1em; height: 1em; color: var(--orange); }

/* ---------- Top bar & header ---------- */
.topbar { display: none; background: var(--navy); color: rgba(255, 255, 255, .85); font-size: .82rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 38px; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar__right { gap: 24px !important; }
.topbar a:hover { color: var(--gold); }
.topbar .icon { width: 1em; height: 1em; color: var(--gold); }

/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile nav inside it. */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); }
.site-header.is-stuck { border-color: var(--linen); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.site-logo img { height: 44px; width: auto; }
.site-header__cta { display: none; gap: 10px; }

.nav-toggle { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linen); background: var(--cream); color: var(--navy); display: grid; place-items: center; }
.nav-toggle__close, .nav-open .nav-toggle__open { display: none; }
.nav-open .nav-toggle__close { display: block; }

.nav {
	position: fixed; inset: var(--header-h) 0 0 0; background: var(--cream);
	padding: 24px var(--gutter) 120px; overflow-y: auto;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
.nav-open { overflow: hidden; }
.nav__list li a { display: block; padding: 16px 4px; font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); border-bottom: 1px solid var(--linen); }
.nav__list .current-menu-item > a, .nav__list .current_page_parent > a { color: var(--orange-deep); }
.nav__cta { margin-top: 28px; }
.nav__cta .btn { flex: 1 1 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.hero__inner { position: relative; display: grid; gap: 40px; padding-block: 40px 56px; }
.hero__title { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem); line-height: 1.4; letter-spacing: -.01em; margin-bottom: 20px; text-wrap: balance; }
.hero__sub { color: var(--muted); font-size: 1.05rem; max-width: 34em; margin-bottom: 28px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .92rem; color: var(--ink); }
.hero__badges li { display: inline-flex; align-items: center; gap: 8px; }
.hero__badges .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gold); color: var(--navy); stroke-width: 2.6; }

.hero__visual { position: relative; max-width: 500px; margin-inline: auto; width: 100%; padding: 0 6px 8px; --mx: 0; --my: 0; }
.hero__outline { position: absolute; inset: -12px 46% 60px -6px; border: 1.5px solid var(--gold); border-radius: 999px 999px var(--radius) var(--radius); translate: calc(var(--mx) * 10px) calc(var(--my) * 10px); transition: translate .6s var(--ease); }
.hero__duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.hero__arch { position: relative; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 3 / 4.7; box-shadow: var(--shadow); border: 6px solid #fff; transition: translate .6s var(--ease); }
.hero__arch--dog { background: var(--gold); translate: calc(var(--mx) * -8px) calc(var(--my) * -8px); }
.hero__arch--cat { background: #9FD3F2; margin-top: 64px; translate: calc(var(--mx) * 12px) calc(var(--my) * 12px); }
.hero__arch img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 62%; }
.hero__arch--cat img { object-position: 50% 45%; }
.hero__stamp { position: absolute; right: 4px; top: -18px; z-index: 2; translate: calc(var(--mx) * 18px) calc(var(--my) * 18px); transition: translate .6s var(--ease); width: 104px; height: 104px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); color: var(--orange); }
.hero__stamp text { font: 500 9.4px var(--font-body); letter-spacing: .19em; fill: var(--navy); transform-origin: 60px 60px; animation: spin 22s linear infinite; }
.hero__stamp .icon { width: 24px; height: 24px; }
.hero__chip { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-radius: 16px; padding: 10px 16px 10px 12px; box-shadow: var(--shadow); font-size: .8rem; color: var(--muted); line-height: 1.4; animation: float 6s ease-in-out infinite; }
.hero__chip strong { display: block; color: var(--navy); font-family: var(--font-display); font-size: .92rem; font-weight: 500; }
.hero__chip .icon { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--sand); color: var(--orange-deep); }
.hero__chip { z-index: 2; }
.hero__chip--a { left: -8px; top: 46%; }
.hero__chip--b { right: -8px; bottom: 6%; animation-delay: -3s; }
.hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__blob--gold { width: 520px; height: 520px; right: -200px; top: -220px; background: radial-gradient(circle, rgba(252, 194, 5, .24), transparent 65%); }
.hero__blob--orange { width: 380px; height: 380px; left: -180px; bottom: -160px; background: radial-gradient(circle, rgba(254, 133, 2, .12), transparent 65%); }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(180deg, #fff, var(--cream)); padding: 56px 0 40px; text-align: center; border-bottom: 1px solid var(--linen); }
.page-hero .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.page-hero__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.page-hero__lead { color: var(--muted); max-width: 40em; margin: 16px auto 0; }
.page-hero--article { border-bottom: 0; }

/* ---------- Services ---------- */
.service-grid { display: grid; gap: 24px; }
.service-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linen); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__placeholder { width: 100%; height: 100%; min-height: 200px; display: grid; place-items: center; }
.service-card__placeholder .icon { width: 84px; height: 84px; padding: 22px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--navy); stroke-width: 1.2; }
.service-card__placeholder--0 { background: linear-gradient(135deg, #FFE9C7, #FFD58A); }
.service-card__placeholder--1 { background: linear-gradient(135deg, #FFDDBD, #FFB76B); }
.service-card__placeholder--2 { background: linear-gradient(135deg, #E4E7F5, #BFC6E6); }
.service-card__body { padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.service-card__en { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 8px; }
.service-card__title { font-size: 1.4rem; margin-bottom: 12px; }
.service-card__text { color: var(--muted); font-size: .96rem; flex: 1; }
.service-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linen); font-size: .92rem; }
.service-card__price { color: var(--navy); font-weight: 500; }

.service-detail { display: grid; gap: 28px; padding-block: 40px; border-bottom: 1px solid var(--linen); }
.service-detail:first-child { padding-top: 0; }
.service-detail:last-child { border-bottom: 0; padding-bottom: 0; }
.service-detail__media { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4 / 4.2; max-width: 460px; width: 100%; margin-inline: auto; border: 8px solid #fff; outline: 1px solid var(--linen); box-shadow: var(--shadow-sm); }
.service-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.service-detail__facts { display: grid; gap: 14px; margin: 24px 0; padding: 20px 22px; background: var(--sand); border-radius: var(--radius-sm); }
.service-detail__facts dt { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-deep); }
.service-detail__facts dd { margin: 2px 0 0; color: var(--navy); font-weight: 500; }
.check-list { display: grid; gap: 10px; margin: 20px 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon { width: 22px; height: 22px; margin-top: 4px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--navy); stroke-width: 2.6; }
.price-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .96rem; }
.price-table caption { text-align: left; font-family: var(--font-display); color: var(--navy); font-size: 1.1rem; margin-bottom: 8px; }
.price-table th, .price-table td { padding: 12px 4px; border-bottom: 1px dashed var(--linen); font-weight: 400; text-align: left; }
.price-table td { text-align: right; color: var(--navy); font-weight: 500; white-space: nowrap; }



/* ---------- Gallery ---------- */
.ba { margin: 0; }
.ba__frame { position: relative; border-radius: 999px 999px var(--radius-sm) var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); border: 1px solid var(--linen); }
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease); }
.ba__before { opacity: 0; }
.ba.is-before .ba__before { opacity: 1; }
.ba__toggle { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); padding: 6px 16px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.ba__label-before, .ba.is-before .ba__label-after { display: none; }
.ba.is-before .ba__label-before { display: inline; }
.ba figcaption { text-align: center; font-size: .86rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.ba figcaption strong { color: var(--navy); font-weight: 500; }
.ba--placeholder .ba__frame { display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--cream)); }
.ba--placeholder span { display: grid; justify-items: center; gap: 8px; color: var(--linen); }
.ba--placeholder .icon { width: 48px; height: 48px; color: #E3D5BE; }
.ba--placeholder small { color: #B8A88E; font-size: .78rem; }

/* ---------- Journal ---------- */
.post-grid { display: grid; gap: 28px; }
.post-card { display: flex; flex-direction: column; }
.post-card__media { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--linen); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--sand), #FFE9C7); }
.post-card__placeholder .icon { width: 56px; height: 56px; color: #fff; }
.post-card__body { padding-top: 18px; }
.post-card__meta { font-size: .78rem; letter-spacing: .08em; color: var(--orange-deep); margin-bottom: 6px; }
.post-card__title { font-size: 1.25rem; margin-bottom: 10px; }
.post-card__title a:hover { color: var(--orange-deep); }
.post-card__text { color: var(--muted); font-size: .95rem; }
.pagination { margin-top: 48px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linen); background: #fff; color: var(--navy); }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }
.empty { text-align: center; color: var(--muted); }

/* ---------- Article ---------- */
.article__meta { color: var(--muted); font-size: .9rem; margin-top: 14px; }
.article__cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 36px; }
.prose { font-size: 1.04rem; }
.prose h2 { font-size: 1.5rem; margin: 1.8em 0 .6em; }
.prose h3 { font-size: 1.2rem; margin: 1.6em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--orange); }
.prose a { color: var(--orange-deep); border-bottom: 1px solid currentColor; }
.prose img { border-radius: var(--radius-sm); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-weight: 300; font-size: 1.2rem; color: var(--navy); }
.prose--article { padding-bottom: 8px; }
.article__cta { margin: 48px 0; padding: 32px 26px; border-radius: var(--radius); background: var(--sand); border: 1px solid var(--linen); text-align: center; }
.article__cta h2 { font-size: 1.4rem; margin-bottom: 8px; }
.article__cta p { color: var(--muted); }
.article__cta .cta-group { justify-content: center; }
.article__nav { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 72px; border-top: 1px solid var(--linen); font-size: .95rem; color: var(--navy); }
.article__nav a:hover { color: var(--orange-deep); }


/* ---------- Location ---------- */
.location { display: grid; gap: 20px; }
.location__info { background: #fff; border: 1px solid var(--linen); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; }
.info-list { margin: 0; display: grid; }
.info-list__row { display: flex; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--linen); }
.info-list__row:first-child { padding-top: 0; }
.info-list__row > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--cream); color: var(--orange-deep); border: 1px solid var(--linen); }
.info-list__row > div { flex: 1; min-width: 0; }
.info-list dt { font-size: .84rem; font-weight: 500; color: var(--orange-deep); margin-bottom: 2px; }
.info-list dd { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.7; }
.info-list__note { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; color: var(--muted) !important; font-size: .9rem !important; }
.info-list__note .icon { width: 18px; height: 18px; color: var(--orange-deep); }
.info-list__big { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--navy); letter-spacing: .01em; }
.info-list__big:hover { color: var(--orange-deep); }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .15); font-size: .94rem; }
.hours--dark li { border-color: var(--linen); color: var(--ink); font-size: 1rem; padding: 7px 0; }
.hours--dark li span:last-child { color: var(--navy); font-weight: 500; font-variant-numeric: tabular-nums; }
.line-card { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 16px; border-radius: var(--radius-sm); background: #F0FBF4; border: 1px solid #CFEFDB; }
.line-card__qr { width: 104px; height: 104px; flex: none; background: #fff; border-radius: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid #CFEFDB; }
.line-card__qr img { width: 100%; height: 100%; object-fit: contain; }
.line-card__qr-fallback .icon { width: 56px; height: 56px; color: var(--line); }
.line-card__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--line-deep); margin: 0; }
.line-card__id { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--navy); margin: 0 0 10px; }

.map-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linen); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); }
.map-card__head { display: flex; align-items: center; gap: 14px; padding: 10px 10px 16px; }
.map-card__pin { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 0 0 6px rgba(254, 133, 2, .15); }
.map-card__title { flex: 1; min-width: 0; line-height: 1.45; }
.map-card__title strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: var(--navy); }
.map-card__title span { display: block; font-size: .84rem; color: var(--muted); }
.map-card__frame { position: relative; flex: 1; min-height: 380px; border-radius: 14px; overflow: hidden; background: var(--sand); }
.map-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Contact page ---------- */
.contact-cta { display: grid; gap: 12px; margin-bottom: 20px; }
.contact-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--linen); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.contact-card__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; color: #fff; }
.contact-card__icon .icon { width: 24px; height: 24px; }
.contact-card--line .contact-card__icon { background: var(--line); }
.contact-card--call .contact-card__icon { background: var(--navy); }
.contact-card--map .contact-card__icon { background: var(--orange); }
.contact-card--line { border-color: #BFE8CF; background: linear-gradient(180deg, #F3FCF6, #fff); }
.contact-card__body { flex: 1; min-width: 0; display: grid; line-height: 1.45; }
.contact-card__label { font-size: .82rem; color: var(--muted); }
.contact-card strong { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--navy); font-variant-numeric: lining-nums; }
.contact-card__arrow { width: 20px; height: 20px; color: var(--orange); transition: transform .3s var(--ease); }
.contact-card:hover .contact-card__arrow { transform: translateX(5px); }

/* ---------- About ---------- */
.about { display: grid; gap: 32px; align-items: center; }
.about__media { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; background: #fff; border: 8px solid #fff; outline: 1px solid var(--linen); box-shadow: var(--shadow-sm); max-width: 440px; width: 100%; margin-inline: auto; aspect-ratio: 4 / 4.4; display: grid; place-items: center; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media img.is-logo { object-fit: contain; padding: 8%; }
.about .section-title { margin-bottom: 20px; }
.values__grid { display: grid; gap: 28px; }
.values__grid h3 { font-size: 1.2rem; margin-bottom: 8px; padding-top: 18px; border-top: 2px solid var(--gold); }
.values__grid p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------- CTA band & footer ---------- */
.cta-band { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; right: -140px; top: -260px; background: radial-gradient(circle, rgba(254, 133, 2, .45), transparent 65%); }
.cta-band__inner { position: relative; display: grid; gap: 28px; padding-block: 64px; }
.cta-band__title { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin-bottom: 10px; }
.cta-band__lead { color: rgba(255, 255, 255, .75); margin: 0; max-width: 36em; }
.cta-band .btn--call { background: #fff; color: var(--navy); }
.cta-band .btn--call:hover { background: var(--gold); }

.site-footer { background: #1A2249; color: rgba(255, 255, 255, .6); font-size: .9rem; }
.site-footer a { color: rgba(255, 255, 255, .85); transition: color .2s; }
.site-footer a:hover { color: var(--gold); }
.site-footer__main { display: grid; justify-items: center; gap: 22px; padding-block: 40px 28px; text-align: center; }
.site-footer__logo { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #fff; transition: transform .5s var(--ease); }
.site-footer__logo:hover { transform: rotate(-6deg) scale(1.05); }
.site-footer__logo img { width: 100%; height: 100%; object-fit: cover; }
.site-footer__menu, .site-footer .nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; max-width: 320px; }
.site-footer__menu a, .site-footer .nav__list li a { display: inline; padding: 0; border: 0; font-family: var(--font-body); font-size: .9rem; }
.site-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; }
.site-footer__contact a { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .76rem; color: rgba(255, 255, 255, .42); text-align: center; }
.social { display: inline-flex; gap: 14px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; }
.hours li span { white-space: nowrap; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--linen); box-shadow: 0 -8px 30px -12px rgba(34, 44, 94, .2); }
.sticky-cta__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; font-weight: 500; color: #fff; }
.sticky-cta__btn--call { background: var(--navy); }
.sticky-cta__btn--line { background: var(--line); }

/* ==========================================================================
   Motion — transform/opacity only, GPU friendly, all disabled by reduced-motion
   ========================================================================== */

/* Scroll progress */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; background: linear-gradient(90deg, var(--orange), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; }

/* Header hides on scroll down, returns on scroll up */
.site-header { transition: border-color .3s, box-shadow .3s, transform .45s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
.nav-open .site-header { transform: none; transition: none; }

/* Reveal on scroll (variants) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal--left { transform: translateX(-32px); }
.js .reveal--right { transform: translateX(32px); }
.js .reveal--zoom { transform: scale(.94); }
.js .reveal--clip { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 999px 999px 20px 20px); }
.js .reveal--clip img { transform: scale(1.18); transition: transform 1.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--clip.is-visible { clip-path: inset(0 0 0 0 round 999px 999px 20px 20px); }
.js .reveal--clip.is-done { clip-path: none; }
.js .reveal--clip.is-visible img { transform: none; }

/* Eyebrow rules draw in with their section heading */
.js .section-head .eyebrow::before, .js .section-head .eyebrow::after { transform: scaleX(0); transition: transform .8s var(--ease) .25s; }
.js .section-head .eyebrow::before { transform-origin: 100% 50%; }
.js .section-head .eyebrow::after { transform-origin: 0 50%; }
.js .section-head.is-visible .eyebrow::before, .js .section-head.is-visible .eyebrow::after { transform: none; }

/* Hero / page-hero entrance on load */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .line > span { display: block; transform: translateY(110%); animation: lineUp 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }
.js .hero-in { opacity: 0; animation: fadeUp .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
.js .hero__arch { animation: archIn 1.3s var(--ease) both .15s; }
.js .hero__arch--cat { animation-delay: .4s; }
.js .hero__outline { animation: fadeIn 1.2s ease both .9s; }
.js .hero__stamp { animation: popIn .8s var(--ease) both 1.15s; }
.js .hero__chip { opacity: 0; animation: chipIn .7s var(--ease) forwards 1.25s, float 6s ease-in-out infinite 2s; }
.js .hero__chip--b { animation-delay: 1.4s, -1s; }
@keyframes lineUp { to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes archIn { from { clip-path: inset(100% 0 0 0 round 999px 999px 20px 20px); } to { clip-path: inset(0 0 0 0 round 999px 999px 20px 20px); } }
@keyframes popIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes chipIn { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }


/* Buttons: light sweep + LINE pulse */
.btn, .sticky-cta__btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after, .sticky-cta__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); }
.btn:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.sticky-cta__btn--line::after { animation: sweep 4.5s var(--ease) infinite 2s; }
@keyframes sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn:hover .icon { animation: wiggle .6s var(--ease); }
@keyframes wiggle { 30% { rotate: -12deg; } 60% { rotate: 10deg; } }

/* Sticky CTA slides up once the hero CTA has scrolled away */
.js .sticky-cta { transform: translateY(110%); transition: transform .5s var(--ease); }
.js .sticky-cta.is-shown { transform: none; }

/* Card tilt (desktop pointer only, driven by --rx/--ry from JS) */
@media (hover: hover) and (pointer: fine) {
	.js .service-card.reveal.is-visible { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
	.js .service-card.reveal.is-tilting { --ty: -6px; transition: transform .12s linear, box-shadow .35s var(--ease); }
}



/* Decorative drifting paws */
.has-deco { position: relative; overflow: hidden; }
.has-deco > .container { position: relative; }
.deco-paw { position: absolute; color: #fff; opacity: .7; pointer-events: none; }
.deco-paw .icon { width: 100%; height: 100%; }
.deco-paw--1 { width: 150px; height: 150px; left: -30px; top: 60px; rotate: -24deg; }
.deco-paw--2 { width: 220px; height: 220px; right: -50px; bottom: 40px; rotate: 18deg; }

/* Gallery hover lift */
.ba__frame { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ba:hover .ba__frame { transform: translateY(-6px); box-shadow: var(--shadow); }
.ba__frame img { transition: opacity .45s var(--ease), transform .8s var(--ease); }
.ba:hover .ba__frame img { transform: scale(1.05); }

/* CTA band photo */
.cta-band__photo { display: none; }

/* ==========================================================================
   Dogs & Cats section + extra motion
   ========================================================================== */
@view-transition { navigation: auto; }

/* Title highlight: gold marker swipes in with the heading */
.section-title em, .cta-band__title em { font-style: normal; white-space: nowrap; background: linear-gradient(transparent 62%, rgba(252, 194, 5, .55) 62%, rgba(252, 194, 5, .55) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding-inline: .08em; }
.js .section-head .section-title em { background-size: 0% 100%; transition: background-size 1s var(--ease) .45s; }
.js .section-head.is-visible .section-title em { background-size: 100% 100%; }



/* Magnetic hero buttons (JS sets --bx/--by) */
.hero .btn { translate: var(--bx, 0) var(--by, 0); transition: transform .25s var(--ease), translate .35s var(--ease), box-shadow .25s var(--ease), background .2s; }


/* CTA band: dog + cat arches */
.cta-band__photo span { display: block; }
@media (min-width: 960px) {
	.cta-band__inner { grid-template-columns: 250px 1fr auto !important; }
	.cta-band__photo { display: flex !important; align-items: flex-end; gap: 10px; width: 250px !important; aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
	.cta-band__photo span { flex: 1; aspect-ratio: 3 / 4.6; border-radius: 999px 999px 0 0; overflow: hidden; border: 5px solid rgba(255, 255, 255, .14); border-bottom: 0; }
	.cta-band__photo span:last-child { aspect-ratio: 3 / 3.8; }
	.cta-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal, .js .hero-in, .js .hero__chip, .js .line > span, .js .sticky-cta, .js .step::after, .js .section-head .eyebrow::before, .js .section-head .eyebrow::after { opacity: 1; transform: none; clip-path: none; }
	.js .reveal--clip img { transform: none; }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 600px) {
	.service-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
	.values__grid { grid-template-columns: repeat(3, 1fr); }
	.article__nav { flex-direction: row; justify-content: space-between; }
	.article__nav span { max-width: 48%; }
}

@media (min-width: 960px) {
	:root { --gutter: 32px; --header-h: 84px; }
	body { padding-bottom: 0; font-size: 17px; }
	.sticky-cta, .nav-toggle, .nav__cta { display: none; }
	.topbar { display: block; }
	.site-logo img { height: 54px; }
	.site-header__cta { display: flex; }
	.nav { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; background: none; overflow: visible; }
	.nav__list { display: flex; gap: 4px; }
	.nav__list li a { font-family: var(--font-body); font-size: .95rem; padding: 8px 12px; border: 0; border-radius: 999px; position: relative; transition: color .2s, background .2s; }
	.nav__list li a:hover { background: var(--cream); color: var(--orange-deep); }

	.section { padding: 112px 0; }
	.section--tight { padding: 48px 0 72px; }
	.section-head { margin-bottom: 56px; }
	.hero__inner { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; padding-block: 72px 96px; }
	.hero__chip--a { left: -48px; }
	.hero__chip--b { right: -36px; }
	.page-hero { padding: 88px 0 64px; }

	.service-grid, .post-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

	.service-detail { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; padding-block: 80px; }
	.service-detail--flip .service-detail__media { order: 2; }
	.service-detail__facts { grid-template-columns: repeat(2, 1fr); }
	.about { grid-template-columns: 5fr 7fr; gap: 72px; }

	.location { grid-template-columns: 5fr 7fr; gap: 24px; align-items: stretch; }
	.location__info { padding: 36px 32px; }
	.line-card { margin-top: auto; }
	.info-list__row:last-child { border-bottom: 0; }
	.map-card__frame { min-height: 480px; }
	.contact-cta { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
	.contact-card { padding: 22px 24px; }

	.cta-band__inner { grid-template-columns: 200px 1fr auto; align-items: center; gap: 48px; padding-block: 0; min-height: 300px; }
	.cta-band__photo { display: block; order: -1; align-self: end; width: 200px; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; border: 6px solid rgba(255, 255, 255, .14); border-bottom: 0; }
	.cta-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
	.cta-band__inner > .reveal:first-child { padding-block: 72px; }
	.hero__visual { max-width: 540px; }
	.hero__duo { gap: 20px; }
	.hero__arch { border-width: 8px; }
	.hero__arch--cat { margin-top: 88px; }
	.hero__stamp { width: 124px; height: 124px; right: 10px; top: -30px; }
	.site-footer__main { grid-template-columns: auto 1fr auto; align-items: center; justify-items: stretch; gap: 40px; padding-block: 36px; text-align: left; }
	.site-footer__logo { width: 56px; height: 56px; }
	.site-footer__menu, .site-footer .nav__list { max-width: none; gap: 6px 28px; }
	.site-footer__contact { justify-content: flex-end; gap: 4px 24px; }
	.site-footer__bottom { justify-content: space-between; }
}

@media (min-width: 960px) and (max-width: 1120px) {
	.site-header__cta .btn--ghost { display: none; }
	.nav__list li a { padding: 8px 9px; font-size: .9rem; }
}

@media (max-width: 599px) {
	.eyebrow { font-size: .68rem; letter-spacing: .16em; gap: 10px; }
	.eyebrow::before, .eyebrow::after { width: 20px !important; flex: none; }
	.hero .cta-group .btn, .cta-band .cta-group .btn, .article__cta .cta-group .btn, .service-detail .cta-group .btn { flex: 1 1 100%; }
	.hero__chip { font-size: .72rem; padding: 8px 12px 8px 8px; }
	.hero__stamp { width: 84px; height: 84px; top: -10px; }
	.hero__chip .icon { width: 32px; height: 32px; padding: 7px; }
}