/* Petsity theme. Tokens first, then base, layout, components, pages, footer, responsive. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); }
/* Caveat (SIL OFL), the handwritten note in the hero. Variable weight 400 to 700. */
@font-face { font-family: "Caveat"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/Caveat.ttf") format("truetype"); }
/* Fraunces (SIL OFL), the same file the app ships as its display serif. Variable: weight 100 to 900, SOFT and WONK axes. */
@font-face { font-family: "PetsityDisplay"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/PetsityDisplay.ttf") format("truetype"); }

:root {
	--orange: #E75301;
	--orange-bright: #E85D04;
	--orange-dark: #C94B00;
	--orange-tint: #FFF0EB;
	--forest: #1E3A2F;
	--forest-deep: #16302A;
	--ink: #1C1C1C;
	--ink-soft: #555555;
	--ink-muted: #767676;
	--sand: #C4B5A5;
	--cream: #E8E0D6;
	--hero-band: #FBF0E4;
	--paper: #FCF6F0;
	--ink-deep: #07262C;
	--sage: #E8EEE1;
	--sage-deep: #7FA173;
	--green: #1F8A2E;
	--cream-wash: #F6ECDA;
	--font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
	/* One "mock pixel": the home page is drawn from a 1672px design and scales down with the viewport. */
	--u1: clamp(0.66px, 100vw / 1672, 1px);
	--u: var(--u1);
	--white: #FFFFFF;
	--line: #EFE7DE;
	--success: #8BC34A;
	--error: #C52527;

	--font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "PetsityDisplay", "Georgia", serif;

	--radius: 20px;
	--radius-sm: 12px;
	--radius-pill: 999px;
	--shadow: 0 10px 30px rgba(28, 28, 28, 0.08);
	--shadow-lg: 0 24px 60px rgba(28, 28, 28, 0.14);
	--container: 1180px;
	--gutter: 20px;
	--section: clamp(40px, 5.5vw, 72px);
	--header-h: calc(90 * var(--u));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; font-weight: 600; color: var(--forest); letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(23px, 2.9vw, 32px); }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.display { font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -0.01em; line-height: 1.02; color: var(--ink-deep); }
.display em { font-style: italic; font-weight: 700; color: var(--orange); }
.lead { font-size: 16px; color: var(--ink-soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.eyebrow .icon { width: 18px; height: 18px; }
.eyebrow a { color: inherit; text-decoration: none; }
.fine-print { font-size: 13px; color: var(--ink-muted); }
.center { text-align: center; }
.icon { width: 24px; height: 24px; flex: none; vertical-align: middle; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--forest); color: var(--white); border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: 760px; }
.section { padding-block: var(--section); }
.section--tint { background: var(--hero-band); }
.section--forest { background: var(--forest); color: var(--white); }
.section--forest h2, .section--forest h3 { color: var(--white); }
.section--forest .eyebrow { color: #F5C7B0; }
.section--hero-band { background: var(--hero-band); }
.section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section__head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; text-align: left; }
.section__head--row h2 { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 24px; border-radius: var(--radius-pill);
	font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; border: 2px solid transparent;
	cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 8px 20px rgba(231, 83, 1, 0.25); }
.btn-primary:hover { background: var(--orange-dark); color: var(--white); }
.btn-secondary { background: rgba(255, 255, 255, 0.75); color: var(--orange-dark); border-color: #EE9A6E; }
.btn-secondary:hover { border-color: var(--orange); background: var(--white); color: var(--orange-dark); }
.btn__icon { width: 1.1em; height: 1.1em; margin-left: -2px; }
.btn-small { min-height: 0; }
.btn-ghost { background: transparent; color: var(--forest); }
.btn-ghost:hover { background: var(--orange-tint); color: var(--forest); }
.btn-white { background: var(--white); color: var(--orange-dark); }
.btn-white:hover { color: var(--orange-dark); background: var(--orange-tint); }
.btn-ghost-white { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.btn-ghost-white:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.center .btn-row { justify-content: center; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.site-header.is-stuck { background: rgba(252, 246, 240, 0.94); backdrop-filter: blur(12px); border-color: var(--line); box-shadow: 0 6px 24px rgba(28, 28, 28, 0.06); }
body:not(.is-home) .site-header { background: rgba(252, 246, 240, 0.94); backdrop-filter: blur(12px); }
/* Logo | menu | buttons on a three-column grid, so the menu sits in the true centre of the bar. */
.site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(100%, calc(1672 * var(--u))); margin: 0 auto; padding: 0 calc(125 * var(--u)) 0 calc(122 * var(--u)); height: var(--header-h); }
.site-logo { flex: none; display: block; }
.site-logo img { height: calc(46 * var(--u)); width: auto; }
.site-nav { display: contents; }
.nav-list { display: flex; align-items: center; gap: calc(40 * var(--u)); margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; }
.nav-list a { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) 0; color: var(--ink); font-weight: 500; font-size: calc(15 * var(--u)); letter-spacing: -0.012em; text-decoration: none; border-radius: 0; }
.nav-list a:hover, .nav-list .current-menu-item > a { color: var(--orange-dark); background: none; }
.nav-list .menu-item-has-children > a::after { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: calc(2 * var(--u)); }
/* The dropdown fades and settles in, and forgives the pointer: an invisible bridge covers the
   gap between the link and the panel, and the panel waits 150ms before it goes. */
.nav-list .sub-menu { position: absolute; left: calc(-14 * var(--u)); top: calc(100% + 6 * var(--u)); min-width: calc(210 * var(--u)); margin: 0; padding: calc(8 * var(--u)); list-style: none; background: var(--white); border-radius: calc(14 * var(--u)); box-shadow: 0 16px 40px rgba(28, 28, 28, 0.14); z-index: 60; visibility: hidden; opacity: 0; transform: translateY(calc(-6 * var(--u))); transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s, visibility 0s linear 0.33s; }
.nav-list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(14 * var(--u)); }
.nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-list .sub-menu a { display: block; padding: calc(9 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(14 * var(--u)); }
.nav-list .sub-menu a:hover { background: var(--orange-tint); }
.site-nav__auth { display: flex; gap: calc(15 * var(--u)); justify-self: end; }
.site-nav__auth .btn { min-height: calc(42 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(14 * var(--u)); box-shadow: none; }
.site-nav__auth .btn-secondary { background: transparent; border-color: var(--orange); color: var(--orange); }
.site-nav__auth .btn-primary { padding: 0 calc(36 * var(--u)); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--forest); cursor: pointer; margin-left: auto; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------- home hero (the 2026-09-30 mock, 1774 wide, drawn at 1672/1774 so it shares --u with the header) ---------- */
.is-home .site-main { padding-top: 0; }
.hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--header-h)); background: var(--paper); }
.hero__canvas { position: relative; width: min(100%, calc(1672 * var(--u))); height: calc(660 * var(--u)); margin: 0 auto; }
.hero__copy { position: absolute; left: calc(122 * var(--u)); top: calc(196 * var(--u)); width: calc(660 * var(--u)); z-index: 3; }
.hero__pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(30 * var(--u)); margin: 0 0 calc(16 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(11 * var(--u)); border-radius: var(--radius-pill); background: #FDEBDB; font-size: calc(13.5 * var(--u)); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-deep); }
.hero__pill .icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--orange); transform-origin: 50% 80%; }
.hero__title { margin: 0 0 calc(12 * var(--u)); font-size: calc(58 * var(--u)); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; }
.hero__lead { margin: 0 0 calc(20 * var(--u)); max-width: calc(440 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.35; letter-spacing: -0.012em; color: #33403C; }
.hero__actions { display: flex; gap: calc(16 * var(--u)); margin: 0; }
.hero__actions .btn { min-height: calc(48 * var(--u)); padding: 0 calc(26 * var(--u)); font-size: calc(15 * var(--u)); }
.hero__actions .btn .btn__icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.hero__actions .btn-secondary { padding: 0 calc(32 * var(--u)); background: transparent; }

.hero__doodle { position: absolute; color: var(--orange); z-index: 2; pointer-events: none; }
.hero__doodle .icon { width: 100%; height: 100%; }

/* The right-hand composition: one box in stage-relative mock coordinates, so it scales as a unit. */
/* The stage is drawn at 80% of the mock so the hero stays compact; it keeps its own --u for that. */
.hero__stage { --u: calc(var(--u1) * 0.8); position: absolute; left: calc(850 * var(--u1)); top: calc(60 * var(--u1)); width: calc(1012 * var(--u)); height: calc(742 * var(--u)); z-index: 1; pointer-events: none; }
.hero__stage > * { position: absolute; }
.hero__blob { left: calc(146 * var(--u)); top: calc(5 * var(--u)); width: calc(716 * var(--u)); height: calc(655 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FEE9D6 0%, #FBDFC8 55%, #F6DCC7 100%); }
.hero__photo { left: calc(94 * var(--u)); top: 0; width: calc(368 * var(--u)); height: calc(697 * var(--u)); z-index: 2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 92%; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 88%, transparent); mask-composite: intersect; }
.hero__leaf { color: #8A9A76; z-index: 1; transform-origin: 20% 90%; }
.hero__leaf .icon { width: 100%; height: 100%; }
.hero__leaf--1 { left: calc(768 * var(--u)); top: calc(505 * var(--u)); width: calc(86 * var(--u)); height: calc(86 * var(--u)); transform: rotate(-24deg); }
.hero__leaf--2 { left: calc(806 * var(--u)); top: calc(540 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); transform: rotate(18deg) scaleX(-1); }
.hero__heart { left: calc(311 * var(--u)); top: calc(124 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); color: var(--orange); z-index: 3; transform: rotate(-8deg); transform-origin: 50% 60%; }
.hero__heart .icon { width: 100%; height: 100%; }
.hero__lines { left: calc(256 * var(--u)); top: calc(160 * var(--u)); width: calc(28 * var(--u)); height: calc(40 * var(--u)); color: var(--orange); z-index: 3; }
.hero__lines svg, .hero__curve { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.hero__curve { left: calc(768 * var(--u)); top: calc(149 * var(--u)); width: calc(41 * var(--u)); height: calc(60 * var(--u)); color: var(--orange); z-index: 3; }

.hero__phone { left: calc(476 * var(--u)); top: calc(57 * var(--u)); width: calc(283 * var(--u)); height: calc(584 * var(--u)); z-index: 4; --tilt: -4.5deg; transform: rotate(var(--tilt)); }
.phone { position: relative; width: 100%; height: 100%; padding: calc(7 * var(--u)); border-radius: calc(44 * var(--u)); background: #FBF2E8; box-shadow: 0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(70, 40, 15, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.phone__screen { position: relative; width: 100%; height: 100%; padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(38 * var(--u)); background: linear-gradient(180deg, #FEF9F3, #FDF5EC); overflow: hidden; color: var(--ink-deep); font-size: calc(14 * var(--u)); line-height: 1.2; }
.phone__status { display: flex; justify-content: space-between; align-items: center; height: calc(20 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.phone__status svg { width: calc(58 * var(--u)); height: calc(12 * var(--u)); }
.phone__top { display: flex; justify-content: space-between; align-items: center; margin-top: calc(18 * var(--u)); }
.phone__top img { width: calc(84 * var(--u)); height: auto; }
.phone__bell { position: relative; display: inline-flex; width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--ink-deep); }
.phone__bell .icon { width: 100%; height: 100%; }
.phone__bell::after { content: ""; position: absolute; right: 0; top: 0; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--orange); }
.phone__title { margin: calc(20 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink-deep); }
.phone__field, .phone__list li { display: flex; align-items: center; gap: calc(10 * var(--u)); background: var(--white); border-radius: calc(18 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(70, 40, 15, 0.06); }
.phone__field { height: calc(50 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
.phone__field .icon, .phone__list .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.phone__field .icon-pin { color: var(--orange); }
.phone__chevron { margin-left: auto; color: var(--ink-deep); }
.phone__list { display: grid; gap: calc(12 * var(--u)); margin: calc(14 * var(--u)) 0 0; padding: 0; list-style: none; }
.phone__list li { height: calc(62 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.phone__list img { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(13 * var(--u)); object-fit: cover; background: #FDEBDB; }
.phone__list img.is-cat { object-position: 28% 40%; }
.phone__list img.is-bird { object-position: 62% 40%; }
.phone__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(64 * var(--u)); padding: calc(9 * var(--u)) calc(6 * var(--u)) 0; border-top: 1px solid #F3E8DC; background: #FEFAF5; text-align: center; font-size: calc(9.5 * var(--u)); font-weight: 500; color: #6B6B6B; }
.phone__tabs span { display: grid; justify-items: center; gap: calc(4 * var(--u)); }
.phone__tabs .icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.phone__tabs .is-active { color: var(--orange); font-weight: 600; }

.hero__card { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); background: var(--white); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(70, 40, 15, 0.12); font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-deep); z-index: 5; --tilt: 0deg; transform: rotate(var(--tilt)); }
.hero__card > span:last-child { display: block; }
.hero__card .icon-pin { display: inline-block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(4 * var(--u)); vertical-align: -2px; color: var(--orange); }
.hero__card--sitters { left: calc(734 * var(--u)); top: calc(68 * var(--u)); width: calc(236 * var(--u)); height: calc(94 * var(--u)); --tilt: 5deg; }
.hero__card--sitters img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; object-fit: cover; flex: none; }
.hero__card--bookings { left: calc(775 * var(--u)); top: calc(245 * var(--u)); width: calc(182 * var(--u)); height: calc(94 * var(--u)); --tilt: 4deg; }
.hero__card--safe { left: calc(803 * var(--u)); top: calc(405 * var(--u)); width: calc(164 * var(--u)); height: calc(99 * var(--u)); --tilt: -5deg; }
.hero__card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; background: #FDEBDB; color: var(--orange); }
.hero__card-icon .icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.hero__card-icon--plain { width: calc(46 * var(--u)); height: calc(46 * var(--u)); background: none; }
.hero__card-icon--plain .icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }

/* The bubbles: a sitter's message that types then lands, and what the dog is thinking. */
.hero__typing, .hero__chat, .hero__thought, .hero__thought-dot { z-index: 6; background: var(--white); box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(70, 40, 15, 0.12); }
.hero__typing { left: calc(57 * var(--u)); top: calc(62 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(17 * var(--u)) calc(17 * var(--u)) calc(4 * var(--u)) calc(17 * var(--u)); }
.hero__typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--sand); }
html:not(.js) .hero__typing { display: none; }
.hero__chat { left: calc(57 * var(--u)); top: calc(47 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(26 * var(--u)) calc(26 * var(--u)) calc(6 * var(--u)) calc(26 * var(--u)); white-space: nowrap; transform-origin: 90% 100%; }
.hero__chat img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; object-fit: cover; }
.hero__chat span { display: grid; font-size: calc(13.5 * var(--u)); line-height: 1.3; color: var(--ink); }
.hero__chat strong { font-size: calc(10.5 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dark); }
.hero__thought { left: calc(325 * var(--u)); top: calc(44 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(23 * var(--u)); font-family: var(--font-hand); font-size: calc(23 * var(--u)); font-weight: 600; line-height: 1; color: #D2531B; transform-origin: 10% 100%; }
.hero__thought .icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--orange); }
.hero__thought-dot { border-radius: 50%; }
.hero__thought-dot--1 { left: calc(337 * var(--u)); top: calc(98 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.hero__thought-dot--2 { left: calc(327 * var(--u)); top: calc(112 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }

/* ---------- trust bar ---------- */
.trust-bar-wrap { position: relative; z-index: 3; margin-top: calc(-32 * var(--u)); }
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100% - 32px, calc(1100 * var(--u))); height: calc(64 * var(--u)); margin: 0 auto; padding: 0; list-style: none; background: #FEFAF6; border-radius: calc(32 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(60, 40, 20, 0.09); }
.trust-bar li { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.trust-bar li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: calc(28 * var(--u)); background: #E3DCD3; transform: translateY(-50%); }
.trust-bar .icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--orange); }

/* ---------- services (home) ---------- */
.container--wide { width: min(100% - 32px, calc(1378 * var(--u))); margin-inline: auto; }
.container--wider { width: min(100% - 32px, calc(1490 * var(--u))); margin-inline: auto; }
.services { padding: calc(64 * var(--u)) 0 0; }
.services__grid { display: grid; grid-template-columns: 1fr; gap: calc(40 * var(--u)); }
.services__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--u)); }
.services__intro h2 { margin: 0; max-width: calc(540 * var(--u)); font-size: calc(36 * var(--u)); line-height: 1.05; }
.services__intro p { margin: 0 0 calc(6 * var(--u)); max-width: calc(440 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); }
.service-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(22 * var(--u)); }
.service-card { display: flex; flex-direction: column; overflow: hidden; background: #FFFDFB; border-radius: calc(18 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(60, 40, 20, 0.09); text-decoration: none; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(60, 40, 20, 0.14); color: var(--ink); }
.service-card__photo { display: block; height: calc(150 * var(--u)); flex: none; }
.service-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); min-width: 0; }
.service-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #FDF1E6; box-shadow: 0 0 0 calc(3 * var(--u)) #FFFDFB, 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(60, 40, 20, 0.12); color: var(--orange); }
.service-card__icon .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.service-card__icon--green { background: #EAF4E6; color: #2F7D46; }
.service-card__text { display: grid; gap: calc(2 * var(--u)); min-width: 0; line-height: 1.3; letter-spacing: -0.01em; }
.service-card__text strong { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--ink); }
.service-card__text small { font-size: calc(12 * var(--u)); letter-spacing: -0.015em; color: var(--ink-soft); }

/* ---------- how it works (home) ---------- */
.how { padding: calc(64 * var(--u)) 0 0; }
.how__grid { display: grid; grid-template-columns: 1fr; gap: calc(44 * var(--u)); }
.how__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--u)); }
.how__intro h2 { margin: 0; font-size: calc(36 * var(--u)); line-height: 1.05; }
.how__intro p { margin: 0 0 calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: var(--ink-soft); }
.how__steps { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.how__step { display: flex; align-items: center; flex: 1; gap: calc(18 * var(--u)); }
.how__step + .how__step::before { content: ""; flex: none; width: calc(36 * var(--u)); height: calc(20 * var(--u)); margin: 0 calc(32 * var(--u)) 0 calc(12 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18' fill='none' stroke='%23F2B58F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h26'/%3E%3Cpath d='m21 3 7 6-7 6'/%3E%3C/svg%3E") no-repeat center / contain; }
.how__number { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--orange); color: var(--white); font-size: calc(16 * var(--u)); font-weight: 700; }
.how__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(68 * var(--u)); height: calc(68 * var(--u)); border-radius: 50%; background: #FBEDDF; color: var(--orange); }
.how__icon .icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.how__text { display: grid; gap: calc(4 * var(--u)); line-height: 1.45; letter-spacing: -0.012em; }
.how__text strong { font-size: calc(15 * var(--u)); font-weight: 700; line-height: 1.25; white-space: nowrap; color: var(--ink); }
.how__text small { font-size: calc(13.5 * var(--u)); color: var(--ink-soft); }

/* ---------- three cards (home) ---------- */
.home-cards { padding: calc(64 * var(--u)) 0 0; }
.home-cards__grid { display: grid; grid-template-columns: calc(518 * var(--u)) calc(503 * var(--u)) calc(440 * var(--u)); gap: calc(24 * var(--u)); justify-content: space-between; }
.home-card { position: relative; height: calc(270 * var(--u)); }
.home-card h3 { margin: 0; }
.post-card__more, .offer-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--orange-dark); text-decoration: none; }
.post-card__more .icon, .offer-card__more .icon { width: 18px; height: 18px; transition: transform 0.15s; }
.post-card__more:hover .icon, .offer-card__more:hover .icon { transform: translateX(3px); }

.home-card--safety { height: calc(290 * var(--u)); margin-top: calc(-10 * var(--u)); padding: calc(36 * var(--u)) calc(32 * var(--u)) 0 calc(104 * var(--u)); overflow: hidden; background: var(--sage); border-radius: calc(40 * var(--u)) calc(90 * var(--u)) calc(70 * var(--u)) calc(60 * var(--u)) / calc(60 * var(--u)) calc(50 * var(--u)) calc(90 * var(--u)) calc(70 * var(--u)); }
.home-card__badge { position: absolute; left: calc(36 * var(--u)); top: calc(32 * var(--u)); display: inline-flex; align-items: center; justify-content: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: var(--green); color: var(--white); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(20, 60, 20, 0.25); }
.home-card__badge .icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.home-card__eyebrow { margin: 0 0 calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2E6B3A; }
.home-card--safety h3 { margin: calc(4 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.1; max-width: calc(380 * var(--u)); }
.home-card--safety p:not(.home-card__eyebrow) { margin: 0 0 calc(20 * var(--u)); max-width: calc(360 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); }
.home-card--safety .btn { min-height: calc(38 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: calc(14 * var(--u)); }
.home-card__leaf { position: absolute; color: var(--sage-deep); pointer-events: none; }
.home-card__leaf .icon { width: 100%; height: 100%; }
.home-card__leaf--1 { left: calc(-6 * var(--u)); bottom: calc(-4 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); transform: rotate(-30deg); }
.home-card__leaf--2 { left: calc(26 * var(--u)); bottom: calc(-20 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); transform: rotate(20deg); }
.home-card__doodle { left: calc(452 * var(--u)); top: calc(226 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); transform: rotate(-10deg); }
.home-card--review { display: grid; grid-template-columns: 1fr calc(240 * var(--u)); margin: 0; overflow: hidden; background: var(--white); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(60, 40, 20, 0.08); }
.home-card__quote { position: relative; padding: calc(32 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u)) calc(50 * var(--u)); }
.home-card__quote > .icon-quote { position: absolute; left: calc(18 * var(--u)); top: calc(30 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: #E9A27A; }
.home-card__quote blockquote { margin: 0 0 calc(14 * var(--u)); }
.home-card__quote blockquote p { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 0, "WONK" 0; font-size: calc(16 * var(--u)); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.home-card__quote .stars .icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.home-card__quote figcaption { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.home-card__quote figcaption img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; object-fit: cover; }
.home-card__quote figcaption span { display: grid; line-height: 1.3; }
.home-card__quote figcaption strong { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--ink); }
.home-card__quote figcaption small { font-size: calc(12.5 * var(--u)); color: var(--ink-soft); }
.home-card__photo img { width: 100%; height: calc(270 * var(--u)); object-fit: cover; object-position: 50% 35%; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%); }
.home-card--community { overflow: hidden; border-radius: calc(20 * var(--u)); background: #FDF4E8; }
.home-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask-image: linear-gradient(to right, transparent 28%, rgba(0, 0, 0, 0.55) 55%, #000 100%); mask-image: linear-gradient(to right, transparent 28%, rgba(0, 0, 0, 0.55) 55%, #000 100%); }
.home-card--community .home-card__body { position: relative; padding: calc(36 * var(--u)) 0 0 calc(44 * var(--u)); }
.home-card__pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(28 * var(--u)); margin: 0; padding: 0 calc(14 * var(--u)); background: var(--white); border-radius: calc(14 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, 0.1); }
.home-card__pill .icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #2F7D46; }
.home-card--community h3 { margin: calc(22 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.08; }
.home-card--community p:not(.home-card__pill) { margin: 0; max-width: calc(230 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); }
.home-card__maple { position: absolute; right: calc(64 * var(--u)); top: calc(28 * var(--u)); display: flex; align-items: flex-start; color: var(--orange); }
.home-card__maple .icon-maple { width: calc(56 * var(--u)); height: calc(56 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.home-card__maple .icon-sparkle { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(22 * var(--u)) 0 0 calc(-4 * var(--u)); transform: scaleX(-1); }

.value-card__icon, .offer-card__icon, .feature-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--orange-tint); color: var(--orange); }
.value-card__icon .icon, .offer-card__icon .icon, .feature-list__icon .icon { width: 26px; height: 26px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 36px; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 32px 28px 28px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.step__number { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--orange); font-variation-settings: "SOFT" 100; }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- split sections ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); }
.service--flip .split__media { order: 2; }
.service + .service { padding-top: 0; }
.feature-list { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 18px; }
.feature-list li { display: flex; gap: 16px; }
.feature-list h3 { font-size: 17px; margin-bottom: 4px; }
.feature-list p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- testimonials ---------- */
.stars { display: inline-flex; gap: 2px; color: #F5A623; }
.stars .icon { width: 18px; height: 18px; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card { margin: 0; padding: 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); }
.quote-card blockquote { margin: 14px 0 18px; }
.quote-card blockquote p { margin: 0; font-size: 17px; line-height: 1.55; }
.quote-card figcaption { display: grid; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.quote-card figcaption strong { color: var(--white); font-size: 15px; }

/* ---------- blog: listing ---------- */
.page-hero--blog { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 56px); }
.page-hero__grid--blog { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); align-items: end; }
.page-hero--blog .page-hero__title { font-size: clamp(30px, 4vw, 46px); }
.page-hero--blog .page-hero__lead { margin-bottom: 0; }
.page-hero__search { justify-self: end; width: min(100%, 420px); }
.search-form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s; }
.search-form:focus-within { border-color: #EE9A6E; box-shadow: 0 0 0 4px rgba(231, 83, 1, 0.12); }
.search-form__icon { width: 20px; height: 20px; color: var(--ink-muted); flex: none; }
.search-form input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.search-form input::placeholder { color: var(--ink-muted); }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form .btn { min-height: 40px; padding: 0 18px; font-size: 14px; box-shadow: none; }

.section--blog { padding-top: clamp(32px, 4vw, 48px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; color: var(--forest); text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.chip:hover { border-color: #EE9A6E; color: var(--orange-dark); }
.chip.is-current { background: var(--forest); border-color: var(--forest); color: var(--white); }
.chip__count { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--orange-tint); color: var(--orange-dark); font-size: 12px; font-weight: 600; }
.chip.is-current .chip__count { background: rgba(255, 255, 255, 0.16); color: var(--white); }

.post-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(40px, 6vw, 64px); padding: clamp(14px, 2vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.post-featured__media { display: block; overflow: hidden; border-radius: 20px; }
.post-featured__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.post-featured:hover .post-featured__media img { transform: scale(1.03); }
.post-featured__body { padding: 8px clamp(0px, 2vw, 24px) 8px 0; }
.post-featured__title { margin: 0 0 14px; font-size: clamp(22px, 2.5vw, 30px); text-wrap: balance; }
.post-featured__title a { color: inherit; text-decoration: none; }
.post-featured__title a:hover { color: var(--orange-dark); }
.post-featured__excerpt { margin: 0 0 18px; font-size: 16px; color: var(--ink-soft); }
.post-featured .post-meta { margin-bottom: 22px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media { display: block; overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.post-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
.post-card__title a { color: var(--forest); text-decoration: none; }
.post-card__title a:hover { color: var(--orange-dark); }
.post-card__excerpt { margin: 0; font-size: 15px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .post-card__more { margin-top: auto; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.post-meta span + span::before, .post-meta a + span::before { content: "·"; margin-right: 14px; }
.post-meta__topic { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--orange-tint); color: var(--orange-dark); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 0.15s, color 0.15s; }
.post-meta__topic:hover { background: var(--orange); color: var(--white); }

.pagination { margin-top: 48px; text-align: center; }
.pagination .nav-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination .page-numbers { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); color: var(--forest); font-weight: 500; text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.pagination a.page-numbers:hover { border-color: #EE9A6E; color: var(--orange-dark); }
.pagination .page-numbers.current { background: var(--forest); border-color: var(--forest); color: var(--white); }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.pagination .icon { width: 18px; height: 18px; }
.pagination .icon-back { transform: scaleX(-1); }
.empty { max-width: 520px; margin: 0 auto; padding: 48px 0 24px; text-align: center; }
.empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--orange-tint); color: var(--orange); }
.empty__icon .icon { width: 30px; height: 30px; }
.empty p { color: var(--ink-soft); }
.empty .btn-row { justify-content: center; }

/* ---------- blog: article ---------- */
.container--article { max-width: 820px; }
.page-hero--post { padding-block: clamp(32px, 5vw, 56px) clamp(64px, 9vw, 104px); text-align: center; }
.page-hero--post .page-hero__title { margin: 14px auto 16px; font-size: clamp(26px, 3.6vw, 40px); text-wrap: balance; }
.page-hero--post .page-hero__lead { max-width: 640px; margin: 0 auto 22px; font-size: 17px; }
.crumbs { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--sand); }
.byline { display: inline-flex; align-items: center; gap: 12px; }
.byline .post-meta { justify-content: center; }
.byline__name { font-weight: 500; color: var(--ink); }
.byline__avatar, .author-card__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: var(--white); font-size: 16px; font-weight: 600; }
.post-single__image { margin-top: clamp(-72px, -7vw, -40px); }
.post-single__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.post-single__layout { width: min(100% - 2 * var(--gutter), 820px); margin: 0 auto; padding-top: clamp(32px, 5vw, 56px); }
.post-single__layout.has-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.post-single__body.prose { padding-bottom: 0; }
.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + 24px); }
.prose > p:first-child { font-size: 16px; }
.toc { padding: 4px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.toc summary { display: flex; align-items: center; gap: 8px; padding: 10px 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .icon { width: 18px; height: 18px; color: var(--orange); }
.toc__chevron { margin-left: auto; transition: transform 0.2s; }
.toc[open] .toc__chevron { transform: rotate(180deg); }
.toc__list { display: grid; gap: 2px; margin: 0; padding: 0 8px 10px; list-style: none; }
.toc__list a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; }
.toc__list a:hover { color: var(--orange-dark); }
.post-single__footer { display: grid; gap: 32px; padding-block: clamp(32px, 5vw, 56px) var(--section); }
.post-tags { margin: 0; }
.post-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--orange-tint); font-size: 13px; text-decoration: none; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 28px; border-top: 1px solid var(--line); }
.share__label { font-size: 14px; font-weight: 600; color: var(--forest); }
.share__list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.share__list a, .share__copy { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--forest); font: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.share__list a:hover, .share__copy:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.share__list .icon { width: 20px; height: 20px; }
.share__copied { position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 4px 10px; border-radius: 8px; background: var(--forest); color: var(--white); font-size: 12px; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.share__copied:not(:empty) { opacity: 1; }
html:not(.js) .share__copy { display: none; }
.author-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.author-card__avatar { width: 56px; height: 56px; font-size: 22px; }
.author-card .eyebrow { margin-bottom: 4px; }
.author-card__name { margin-bottom: 6px; font-size: 20px; }
.author-card p:last-child { margin: 0; font-size: 15px; color: var(--ink-soft); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-navigation a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); text-decoration: none; color: var(--forest); transition: border-color 0.15s; }
.post-navigation a:hover { border-color: #EE9A6E; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.post-navigation .nav-title { font-weight: 600; }
.related .section__head { margin-bottom: 32px; }

/* Wide screens: the table of contents sits beside the text and follows the scroll. */
@media (min-width: 1400px) {
	.post-single__layout.has-toc { width: min(100% - 2 * var(--gutter), 1380px); grid-template-columns: 240px minmax(0, 820px) 240px; column-gap: 40px; justify-content: center; align-items: start; }
	.post-single__layout.has-toc .post-single__body { grid-column: 2; }
	.toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 0; background: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; }
	.toc summary { padding: 6px 16px; pointer-events: none; }
	.toc__chevron { display: none; }
	.toc__list { padding: 4px 16px 0; max-height: calc(100vh - var(--header-h) - 120px); overflow: auto; }
}


/* ---------- faq ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--white); border-radius: var(--radius-sm); border: 1px solid var(--line); padding: 0 22px; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--forest); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--orange); transition: transform 0.2s; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item p { margin: 0; padding: 0 0 20px; color: var(--ink-soft); }

/* ---------- home: reviews, sitter band, latest articles, get the app ---------- */
.reviews .section__head { margin-bottom: 32px; }
.quote-card__pet { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.quote-card__pet .icon { width: 14px; height: 14px; color: #F5C7B0; }

.sitter-band { background: var(--paper); }
.mini-steps { display: grid; gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.mini-steps li { display: flex; gap: 14px; }
.mini-steps__number { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--white); font-size: 15px; font-weight: 700; }
.mini-steps h3 { margin: 7px 0 2px; font-size: 16px; }
.mini-steps p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.sitter-band__media { position: relative; }
.sitter-band__stat { position: absolute; left: 24px; bottom: 24px; display: grid; gap: 2px; max-width: 210px; padding: 14px 18px; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); }
.sitter-band__stat strong { font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--orange); }
.sitter-band__stat span { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }

.home-blog .section__head { margin-bottom: 28px; }

.app-band { overflow: hidden; }
.app-band__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.app-band__blob { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FEE9D6 0%, #FBDFC8 55%, #F6DCC7 100%); }
.app-band__phone { --u: 1px; position: relative; width: calc(283 * var(--u)); height: calc(584 * var(--u)); transform: rotate(-4.5deg); }
.app-band .store-badges { margin: 32px 0 28px; }
.cities__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.cities__label .icon { width: 16px; height: 16px; color: var(--error); }
.chips--small { margin-bottom: 0; }
.chips--small .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }

/* ---------- find care popup ---------- */
.find-care { width: min(100% - 32px, 520px); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; }
.find-care::backdrop { background: rgba(28, 28, 28, 0.45); backdrop-filter: blur(2px); }
.find-care__form { position: relative; display: grid; gap: 22px; padding: 32px; }
.find-care__close { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--forest); cursor: pointer; box-shadow: var(--shadow); }
.find-care__close .icon { width: 20px; height: 20px; }
.find-care h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.find-care .eyebrow { margin-bottom: 6px; }
.find-care__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.find-care legend, .find-care__field > span { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--forest); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; color: var(--forest); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.pill:hover span { border-color: #EE9A6E; color: var(--orange-dark); }
.pill input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--white); }
.pill input:focus-visible + span { box-shadow: 0 0 0 4px rgba(231, 83, 1, 0.2); }
.pill.is-disabled span { opacity: 0.4; }
.pill.is-disabled input { cursor: not-allowed; }
.find-care input[type="text"] { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font: inherit; font-size: 15px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.find-care input[type="text"]:focus { outline: none; border-color: #EE9A6E; box-shadow: 0 0 0 4px rgba(231, 83, 1, 0.12); }

/* The calendar: a field that opens an inline month grid; one tap for a day, two for a range. */
.calendar-field { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.calendar-field:hover, .calendar-field[aria-expanded="true"] { border-color: #EE9A6E; }
.calendar-field:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(231, 83, 1, 0.12); }
.calendar-field.is-empty { font-weight: 400; color: var(--ink-muted); }
.calendar-field > .icon { width: 18px; height: 18px; color: var(--orange); flex: none; }
.calendar-field__label { flex: 1; }
.calendar-field__chevron { color: var(--ink-muted); transition: transform 0.2s; }
.calendar-field[aria-expanded="true"] .calendar-field__chevron { transform: rotate(180deg); }
.calendar { margin-top: 10px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; animation: petsity-rise 0.25s ease both; }
.calendar[hidden] { display: none; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.calendar__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--forest); }
.calendar__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--forest); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.calendar__nav:hover:not(:disabled) { border-color: #EE9A6E; color: var(--orange-dark); }
.calendar__nav:disabled { opacity: 0.35; cursor: default; }
.calendar__nav .icon { width: 16px; height: 16px; }
.calendar__nav--prev .icon { transform: rotate(180deg); }
.calendar__weekdays, .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar__weekdays span { padding: 4px 0 8px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.calendar__grid { row-gap: 4px; }
.calendar__day { position: relative; height: 38px; padding: 0; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background 0.12s, color 0.12s; }
.calendar__day:hover:not(:disabled), .calendar__day.is-preview { background: var(--orange-tint); color: var(--orange-dark); }
.calendar__day:disabled { color: var(--sand); cursor: default; }
.calendar__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--orange); }
.calendar__day.is-in-range { border-radius: 0; background: var(--orange-tint); color: var(--orange-dark); }
.calendar__day.is-start { border-radius: 12px 0 0 12px; }
.calendar__day.is-end { border-radius: 0 12px 12px 0; }
.calendar__day.is-start.is-end { border-radius: 12px; }
.calendar__day.is-selected { background: var(--orange); color: var(--white); font-weight: 600; }
.calendar__day.is-selected::after { background: var(--white); }
.calendar__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.calendar__clear { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--orange-dark); cursor: pointer; }
.calendar__clear:hover { text-decoration: underline; }
.find-care .btn-primary { justify-self: stretch; min-height: 50px; }

/* ---------- cta ---------- */
.cta { position: relative; overflow: hidden; padding: calc(80 * var(--u)) 0 calc(88 * var(--u)); text-align: center; background: var(--paper); }
.cta__inner { position: relative; z-index: 2; }
.cta__inner h2 { margin: 0 0 calc(18 * var(--u)); font-size: calc(36 * var(--u)); line-height: 1.1; }
.cta__inner p:not(.btn-row) { margin: 0 0 calc(32 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: -0.01em; color: var(--ink-soft); }
.cta__inner .btn-row { justify-content: center; gap: calc(16 * var(--u)); }
.cta__inner .btn { min-height: calc(50 * var(--u)); padding: 0 calc(32 * var(--u)); font-size: calc(16 * var(--u)); }
.cta__cat { position: absolute; left: calc(50% - calc(600 * var(--u))); bottom: calc(-10 * var(--u)); width: calc(320 * var(--u)); height: calc(240 * var(--u)); z-index: 1; pointer-events: none; }
.cta__cat img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%); }
.cta__doodle { left: calc(50% - calc(470 * var(--u))); top: calc(56 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); transform: rotate(-12deg); }
.cta__leaf { position: absolute; color: #6E9463; z-index: 1; pointer-events: none; }
.cta__leaf .icon { width: 100%; height: 100%; }
.cta__leaf--1 { left: calc(50% + calc(360 * var(--u))); bottom: calc(16 * var(--u)); width: calc(90 * var(--u)); height: calc(90 * var(--u)); transform: rotate(-20deg); }
.cta__leaf--2 { left: calc(50% + calc(430 * var(--u))); bottom: calc(0 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); transform: rotate(25deg); }
.cta__blob { position: absolute; right: max(-60px, calc(50% - calc(876 * var(--u)))); bottom: calc(-140 * var(--u)); width: calc(400 * var(--u)); height: calc(260 * var(--u)); background: #E4EBDD; border-radius: 50%; }

/* ---------- inner page hero ---------- */
.page-hero { background: var(--hero-band); padding-block: clamp(36px, 5vw, 60px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.page-hero__title { margin-bottom: 14px; }
.page-hero__lead { font-size: 16px; color: var(--ink-soft); max-width: 640px; margin-bottom: 24px; }
.page-hero__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-lg); }
.page-hero--plain { padding-block: 48px; }
.page-hero--plain .page-hero__title { font-size: clamp(26px, 3.2vw, 36px); }

.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--forest); text-decoration: none; white-space: nowrap; }
.subnav a:hover { background: var(--orange-tint); color: var(--orange-dark); }
.subnav .icon { width: 18px; height: 18px; }
.service { scroll-margin-top: calc(var(--header-h) + 56px); }

/* ---------- become a sitter ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.offer-stat { display: flex; flex-direction: column; justify-content: center; padding: 32px; background: var(--forest); color: var(--white); border-radius: var(--radius); }
.offer-stat__number { font-family: var(--font-display); font-size: 72px; font-weight: 600; line-height: 1; color: #F5C7B0; font-variation-settings: "SOFT" 100; }
.offer-stat__label { font-size: 20px; font-weight: 600; margin: 6px 0 12px; }
.offer-stat__note { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.offer-card { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; }
.offer-card h3 { margin: 6px 0 0; }
.offer-card__lead { margin: 0; font-weight: 500; color: var(--forest); }
.offer-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- about ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card { padding: 28px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); }
.value-card h3 { margin: 14px 0 6px; font-size: 18px; }
.value-card p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.audience-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.audience-card__body { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; }
.audience-card__body p { color: var(--ink-soft); font-size: 15px; flex: 1; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-details p { display: flex; align-items: center; gap: 10px; }
.contact-details a { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); text-decoration: none; font-weight: 500; }
.contact-details a:hover { color: var(--orange-dark); }
.contact-details .icon { color: var(--orange); }
.contact-details .fine-print { display: block; }
.contact-form { display: grid; gap: 16px; padding: 32px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.contact-form h2 { margin: 0; }
.contact-form__status { margin: 0; font-weight: 500; min-height: 1.5em; }
.contact-form__status.is-error { color: var(--error); }
.contact-form__status.is-success { color: var(--forest); }
.contact-form .btn { justify-self: start; }
.contact-form.is-sending .btn { opacity: 0.6; pointer-events: none; }

/* ---------- prose (posts and policy pages) ---------- */
.prose { font-size: 15px; line-height: 1.7; padding-bottom: var(--section); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 24px; margin: 1.6em 0 0.5em; }
.prose h3 { font-size: 19px; margin: 1.4em 0 0.4em; }
.prose img { border-radius: var(--radius-sm); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--orange); color: var(--ink-soft); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose td { vertical-align: top; }
.prose tr:first-child td { background: var(--orange-tint); }
.prose h4 { font-size: 18px; margin: 1.2em 0 0.3em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose hr + hr { display: none; }
.prose a { color: var(--orange-dark); }
.prose .wp-block-image figcaption { font-size: 14px; color: var(--ink-muted); }
.page-plain .prose { padding-top: 40px; }

/* ---------- footer ---------- */
.site-footer { background: var(--forest-deep); color: rgba(255, 255, 255, 0.82); padding: 64px 0 32px; }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.site-footer__brand img { width: 150px; }
.site-footer__tagline { margin: 16px 0; font-weight: 500; color: var(--white); }
.site-footer__tagline .icon { display: inline-block; vertical-align: -5px; margin-left: 4px; color: var(--error); width: 20px; height: 20px; }
.social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.social a:hover { background: var(--orange); }
.social .icon { width: 20px; height: 20px; }
/* Store badges: black pills in the footer, the app's listings. */
.site-footer__app { margin: 24px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.store-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; background: #000; color: var(--white); text-decoration: none; line-height: 1.1; transition: border-color 0.15s, transform 0.15s; }
.store-badge:hover { border-color: rgba(255, 255, 255, 0.7); color: var(--white); transform: translateY(-1px); }
.store-badge .icon { width: 24px; height: 24px; }
.store-badge span { display: grid; }
.store-badge small { font-size: 10px; letter-spacing: 0.02em; opacity: 0.85; }
.store-badge strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.site-footer__heading { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.site-footer .nav-list { display: grid; gap: 4px; }
.site-footer .nav-list a { padding: 4px 0; color: rgba(255, 255, 255, 0.82); font-weight: 400; border-radius: 0; }
.site-footer .nav-list a:hover, .site-footer .nav-list .current-menu-item > a { background: none; color: var(--white); }
.site-footer__contact p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.site-footer__contact .icon { width: 18px; height: 18px; color: #F5C7B0; }
.site-footer__trust { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; margin-bottom: 24px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius); font-size: 14px; }
.site-footer__trust .icon { width: 32px; height: 32px; color: #F5C7B0; }
.site-footer__trust strong { color: var(--white); }
.site-footer__trust a { display: block; margin-top: 6px; color: #F5C7B0; font-weight: 500; }
.site-footer__legal { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	:root { --u: 0.72px; --header-h: 64px; }
	.site-header__bar { padding: 0 var(--gutter); }
	.hero { margin-top: 0; }
	.hero__canvas { height: auto; padding: 32px var(--gutter) 40px; }
	.hero__copy { position: static; width: auto; max-width: 640px; }
	.hero__pill { height: 34px; font-size: 15px; margin-bottom: 18px; }
	.hero__pill .icon { width: 18px; height: 18px; }
	.hero__title { font-size: clamp(32px, 6vw, 50px); }
	.hero__lead { font-size: clamp(15px, 2vw, 17px); max-width: 500px; }
	.hero__actions { gap: 14px; }
	.hero__actions .btn { min-height: 54px; padding: 0 26px; font-size: 16px; }
	.hero__actions .btn .btn__icon { width: 18px; height: 18px; }
	/* The composition scales as one box to the width it has. */
	.hero__stage { --u: min(0.72px, calc((100vw - 2 * var(--gutter)) / 1012)); position: relative; left: auto; top: auto; width: calc(1012 * var(--u)); height: calc(742 * var(--u)); margin: 28px auto 0; }
	.trust-bar-wrap { margin-top: 24px; }
	.trust-bar { grid-template-columns: repeat(2, 1fr); height: auto; padding: 8px 0; row-gap: 8px; border-radius: 20px; }
	.trust-bar li { font-size: 14px; padding: 6px 0; }
	.trust-bar li:nth-child(3)::before { display: none; }
	.trust-bar .icon { width: 18px; height: 18px; }
	.services, .how, .home-cards { padding-top: 64px; }
	.services__intro, .how__intro { flex-wrap: wrap; align-items: flex-start; gap: 12px 40px; }
	.services__grid, .how__grid { grid-template-columns: 1fr; gap: 32px; }
	.services__intro h2 { font-size: 28px; }
	.services__intro p { max-width: 420px; font-size: 15px; }
	.service-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.service-card { height: auto; }
	.service-card__photo { height: 120px; }
	.service-card__body { padding: 12px 12px 12px; }
	.service-card__icon { width: 44px; height: 44px; }
	.service-card__icon .icon { width: 22px; height: 22px; }
	.service-card__text strong { font-size: 15px; }
	.service-card__text small { font-size: 13px; }
	.how__intro h2 { font-size: 28px; }
	.how__intro p { font-size: 15px; }
	.how__steps { flex-direction: column; align-items: stretch; gap: 28px; }
	.how__step + .how__step::before { display: none; }
	.how__number { width: 32px; height: 32px; font-size: 15px; }
	.how__icon { width: 52px; height: 52px; }
	.how__icon .icon { width: 26px; height: 26px; }
	.how__text { width: auto; }
	.how__text strong { font-size: 16px; }
	.how__text small { font-size: 14px; }
	.home-cards__grid { grid-template-columns: 1fr; gap: 24px; }
	.home-card { height: auto; margin-top: 0; }
	.home-card--safety { padding: 32px 28px 32px 100px; border-radius: 28px; }
	.home-card__badge { left: 32px; top: 32px; width: 48px; height: 48px; }
	.home-card__badge .icon { width: 26px; height: 26px; }
	.home-card__eyebrow { font-size: 12px; }
	.home-card--safety h3 { font-size: 24px; }
	.home-card--safety p:not(.home-card__eyebrow) { font-size: 15px; max-width: none; }
	.home-card--safety .btn { min-height: 36px; font-size: 14px; padding: 0 18px; }
	.home-card__doodle, .home-card__leaf { display: none; }
	.home-card--review { grid-template-columns: 1fr 200px; }
	.home-card__quote { padding: 28px 16px 24px 52px; }
	.home-card__quote > .icon-quote { left: 16px; top: 20px; width: 22px; height: 22px; }
	.home-card__quote blockquote p { font-size: 17px; }
	.home-card__quote .stars .icon { width: 16px; height: 16px; }
	.home-card__quote figcaption img { width: 28px; height: 28px; }
	.home-card__quote figcaption strong { font-size: 14px; }
	.home-card__quote figcaption small { font-size: 12px; }
	.home-card__photo img { height: 100%; min-height: 200px; }
	.home-card--community { min-height: 200px; }
	.home-card--community .home-card__body { padding: 32px 28px; }
	.home-card__pill { height: 24px; font-size: 11px; }
	.home-card__pill .icon { width: 16px; height: 16px; }
	.home-card--community h3 { font-size: 24px; }
	.home-card--community p:not(.home-card__pill) { font-size: 14px; }
	.home-card__maple { right: 24px; top: 20px; }
	.home-card__maple .icon-maple { width: 44px; height: 44px; }
	.home-card__maple .icon-sparkle { width: 22px; height: 22px; }
	.cta { padding: 80px 0 88px; }
	.cta__inner h2 { font-size: clamp(26px, 4vw, 34px); }
	.cta__inner p:not(.btn-row) { font-size: 16px; }
	.cta__inner .btn { min-height: 44px; font-size: 15px; padding: 0 22px; }
	.cta__cat, .cta__doodle, .cta__leaf, .cta__blob { display: none; }
	.steps, .quote-grid, .post-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); }
	.value-grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.page-hero--media .page-hero__grid { grid-template-columns: 1fr; }
	.page-hero__grid--blog { grid-template-columns: 1fr; gap: 28px; }
	.page-hero__search { justify-self: start; }
}

@media (max-width: 860px) {
	.site-header__bar { display: flex; justify-content: space-between; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 12px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
	.site-nav.is-open { display: flex; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list a { display: flex; padding: 12px 14px; font-size: 16px; }
	.nav-list .menu-item-has-children > a::after { margin-left: auto; }
	.nav-list .sub-menu, .nav-list li:hover > .sub-menu { position: static; min-width: 0; margin: 0 0 4px 12px; padding: 0; box-shadow: none; background: none; visibility: visible; opacity: 1; transform: none; transition: none; }
	.nav-list .sub-menu::before { display: none; }
	.nav-list .sub-menu a { padding: 8px 14px; font-size: 15px; color: var(--ink-soft); }
	.site-nav__auth { flex-direction: column; margin-left: 0; }
	.site-nav__auth .btn { width: 100%; min-height: 44px; font-size: 15px; }
	.site-header { background: rgba(252, 246, 240, 0.94); }
	.site-logo img { height: 40px; }
	.split, .service--flip .split { grid-template-columns: 1fr; }
	.service--flip .split__media { order: 0; }
	.app-band .split__media { order: 2; min-height: 0; margin-top: 8px; }
	.app-band__phone { --u: 0.9px; }
	.app-band__blob { width: 440px; height: 440px; }
	.audience-grid, .contact-grid { grid-template-columns: 1fr; }
	.section__head--row { flex-direction: column; align-items: flex-start; }
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }
	.post-featured { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
	.post-featured__body { padding: 8px 12px 16px; }
	.author-card { grid-template-columns: 1fr; }
	.page-hero--post { text-align: left; }
	.page-hero--post .page-hero__title, .page-hero--post .page-hero__lead { margin-inline: 0; }
	.byline .post-meta { justify-content: flex-start; }
	.subnav { position: static; }
	.service-cards { grid-template-columns: repeat(2, 1fr); }
	.home-card--review { grid-template-columns: 1fr; }
	.home-card__photo img { height: 200px; min-height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
}

@media (max-width: 600px) {
	:root { --gutter: 16px; }
	.find-care { width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
	.find-care__form { padding: 24px 20px 28px; }
	.find-care h2 { font-size: 22px; }
	.calendar { padding: 10px; }
	.calendar__day { height: 36px; }
	.steps, .quote-grid, .post-grid, .offer-grid, .value-grid, .site-footer__grid { grid-template-columns: 1fr; }
	.hero__actions { flex-direction: column; }
	.hero__actions .btn { width: 100%; }
	.hero__stage { --u: calc((100vw - 2 * var(--gutter)) / 720); width: calc(720 * var(--u)); height: calc(700 * var(--u)); margin-top: 20px; }
	.hero__stage > * { margin-left: calc(-70 * var(--u)); }
	.hero__card, .hero__chat, .hero__typing, .hero__thought, .hero__thought-dot, .hero__curve, .hero__leaf { display: none; }
	.trust-bar { grid-template-columns: 1fr; }
	.trust-bar li::before { display: none; }
	.service-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
	.service-card__photo { height: 96px; }
	.service-card__body { flex-direction: column; align-items: flex-start; gap: 8px; }
	.home-card--safety { padding: 92px 24px 32px; }
	.sitter-band__stat { left: 14px; bottom: 14px; padding: 10px 14px; }
	.sitter-band__stat strong { font-size: 22px; }
	.app-band__phone { --u: 0.8px; }
	.app-band__blob { width: 360px; height: 360px; }
	.home-card__badge { left: 20px; top: 20px; }
	.btn-row .btn { width: 100%; }
	.site-footer__trust { flex-direction: column; }
	.contact-form { padding: 22px; }
	.search-form .btn { padding: 0 14px; }
	.post-single__image img { border-radius: 16px; }
	.share { flex-direction: column; align-items: flex-start; }
}

/* ---------- motion ----------
   Scroll reveals: petsity.js watches the selectors in REVEAL (same list as below) and adds
   .is-visible once an element scrolls into view; siblings get a stagger through --d. The
   hidden state only applies under html.js, so without JavaScript nothing is hidden. */
.js .reveal,
.js .trust-bar, .js .services__intro, .js .service-card, .js .how__intro, .js .how__step, .js .home-card,
.js .cta__inner, .js .cta__cat, .js .cta__leaf,
.js .section__head, .js .split__media, .js .split__copy, .js .steps > li, .js .value-grid > *, .js .post-grid > *, .js .post-featured, .js .chips, .js .author-card, .js .share,
.js .offer-grid > *, .js .quote-grid > *, .js .audience-grid > *, .js .faq__item, .js .feature-list > li, .js .mini-steps > li, .js .cities,
.js .page-hero__copy, .js .page-hero__media, .js .contact-grid > *, .js .guarantee, .js .trust-statement {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--d, 0) * 1ms);
}
.js .split__media { transform: translateY(20px) scale(0.97); }
.js .service-card { transform: translateY(36px) scale(0.98); }
/* The li form (`.js .steps > li`) outranks `.js .is-visible`, so the reveal names li too. */
.js .is-visible, .js li.is-visible { opacity: 1; transform: none; }
.js .service-card.is-visible:hover { transform: translateY(-3px); }
.js .cta__leaf.is-visible { transform: rotate(var(--leaf-rotate, 0deg)); }
.js .cta__leaf--1 { --leaf-rotate: -20deg; }
.js .cta__leaf--2 { --leaf-rotate: 25deg; }
.js .how__step + .how__step::before { opacity: 0; transform: translateX(-12px); transition: opacity 0.5s ease, transform 0.6s ease; transition-delay: calc(var(--d, 0) * 1ms + 350ms); }
.js .how__step.is-visible::before { opacity: 1; transform: none; }

/* Hero entrance on load (keyframes rather than the observer, so it plays immediately), then the
   life on the stage: cards bob, the sitter's message types and lands, the dog thinks, the heart beats. */
@keyframes petsity-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes petsity-rise-tilt { from { opacity: 0; transform: translateY(32px) rotate(var(--tilt, 0deg)); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)); } }
@keyframes petsity-photo { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes petsity-blob { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes petsity-pop { 0% { opacity: 0; transform: scale(0.6) rotate(var(--pop-rotate, 0deg)); } 70% { transform: scale(1.06) rotate(var(--pop-rotate, 0deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--pop-rotate, 0deg)); } }
@keyframes petsity-pop-tilt { 0% { opacity: 0; transform: scale(0.6) rotate(var(--tilt, 0deg)); } 70% { transform: scale(1.05) rotate(var(--tilt, 0deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); } }
@keyframes petsity-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes petsity-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.012; } }
@keyframes petsity-beat { 0%, 100% { scale: 1; } 14% { scale: 1.18; } 28% { scale: 1; } 42% { scale: 1.12; } 56% { scale: 1; } }
@keyframes petsity-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes petsity-typing { 0%, 55% { opacity: 0; } 62%, 92% { opacity: 1; } 96%, 100% { opacity: 0; visibility: hidden; } }
@keyframes petsity-dots { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -4px; } }
@keyframes petsity-ring { 0% { box-shadow: 0 0 0 0 rgba(231, 83, 1, 0.45); } 100% { box-shadow: 0 0 0 9px rgba(231, 83, 1, 0); } }
@keyframes petsity-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 5deg; } }
@keyframes petsity-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 75% { rotate: 14deg; } }
.js .hero__pill, .js .hero__title, .js .hero__lead, .js .hero__actions { animation: petsity-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero__title { animation-delay: 0.1s; }
.js .hero__lead { animation-delay: 0.22s; }
.js .hero__actions { animation-delay: 0.34s; }
.js .hero__pill .icon { animation: petsity-wiggle 1.1s ease-in-out 1.2s 2; }
.js .hero__blob { animation: petsity-blob 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero__photo img { animation: petsity-photo 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both, petsity-breathe 5s ease-in-out 1.6s infinite; }
.js .hero__phone { animation: petsity-rise-tilt 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.js .phone__title, .js .phone__field, .js .phone__list li { animation: petsity-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .phone__title { animation-delay: 0.8s; }
.js .phone__field { animation-delay: 0.95s; }
.js .phone__list li:nth-child(1) { animation-delay: 1.1s; }
.js .phone__list li:nth-child(2) { animation-delay: 1.25s; }
.js .phone__list li:nth-child(3) { animation-delay: 1.4s; }
.js .phone__bell::after { animation: petsity-ring 1.8s ease-out 2s infinite; }
.js .hero__card { animation: petsity-pop-tilt 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both, petsity-float 5.5s ease-in-out infinite; }
.js .hero__card--sitters { animation-delay: 1.1s, 2.2s; }
.js .hero__card--bookings { animation-delay: 1.3s, 2.9s; }
.js .hero__card--safe { animation-delay: 1.5s, 3.6s; }
.js .hero__curve path { stroke-dasharray: 120; animation: petsity-draw 0.8s ease-out 1.5s both; }
.js .hero__heart { --pop-rotate: -8deg; animation: petsity-pop 0.6s ease-out 1.6s both, petsity-beat 2.4s ease-in-out 2.4s infinite; }
.js .hero__lines { animation: petsity-pop 0.5s ease-out 1.75s both; }
.js .hero__leaf { animation: petsity-sway 6s ease-in-out infinite; }
.js .hero__leaf--2 { animation-delay: 1.5s; }
.js .hero__typing { animation: petsity-typing 3.6s linear both; }
.js .hero__typing i { animation: petsity-dots 1s ease-in-out infinite; }
.js .hero__typing i:nth-child(2) { animation-delay: 0.15s; }
.js .hero__typing i:nth-child(3) { animation-delay: 0.3s; }
.js .hero__chat { animation: petsity-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 3.35s both, petsity-float 5s ease-in-out 4s infinite; }
.js .hero__thought-dot--2 { animation: petsity-pop 0.4s ease-out 2.6s both; }
.js .hero__thought-dot--1 { animation: petsity-pop 0.4s ease-out 2.8s both; }
.js .hero__thought { animation: petsity-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 3s both, petsity-float 4.5s ease-in-out 3.6s infinite; }
.js .home-card__doodle, .js .cta__doodle { animation: petsity-float 4s ease-in-out infinite; }
.js .home-card__maple { animation: petsity-float 5s ease-in-out infinite; }
.hero__blob, .hero__photo { will-change: transform; }

/* Hover polish. */
.btn .btn__icon { transition: transform 0.2s ease; }
.btn:hover .btn__icon { transform: translateX(3px); }
.home-card--review, .home-card--community { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.home-card--review:hover, .home-card--community:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(60, 40, 20, 0.14); }
.trust-bar .icon { transition: transform 0.2s ease; }
.trust-bar li:hover .icon { transform: scale(1.18); }
.how__icon { transition: transform 0.25s ease, background 0.25s ease; }
.how__step:hover .how__icon { transform: translateY(-3px); background: #F8E2CC; }

@media (prefers-reduced-motion: reduce) {
	.nav-list .sub-menu { transition: none; }
	.calendar { animation: none; }
	html { scroll-behavior: auto; }
	.btn, .service-card, .faq__item summary .icon { transition: none; }
	.js .reveal,
	.js .trust-bar, .js .services__intro, .js .service-card, .js .how__intro, .js .how__step, .js .home-card,
	.js .cta__inner, .js .cta__cat, .js .cta__leaf,
	.js .section__head, .js .split__media, .js .split__copy, .js .steps > li, .js .value-grid > *, .js .post-grid > *, .js .post-featured, .js .chips, .js .author-card, .js .share,
	.js .offer-grid > *, .js .quote-grid > *, .js .audience-grid > *, .js .faq__item, .js .feature-list > li, .js .mini-steps > li, .js .cities,
	.js .page-hero__copy, .js .page-hero__media, .js .contact-grid > *, .js .guarantee, .js .trust-statement { opacity: 1; transition: none; }
	.js .is-visible, .js .service-card, .js .split__media { transform: none; }
	.js .cta__leaf--1 { transform: rotate(-20deg); }
	.js .cta__leaf--2 { transform: rotate(25deg); }
	.js .how__step + .how__step::before { opacity: 1; transform: none; transition: none; }
	.js .hero__pill, .js .hero__pill .icon, .js .hero__title, .js .hero__lead, .js .hero__actions, .js .hero__blob, .js .hero__photo img, .js .hero__phone,
	.js .phone__title, .js .phone__field, .js .phone__list li, .js .phone__bell::after, .js .hero__card, .js .hero__curve path, .js .hero__heart, .js .hero__lines,
	.js .hero__leaf, .js .hero__typing, .js .hero__typing i, .js .hero__chat, .js .hero__thought, .js .hero__thought-dot,
	.js .home-card__doodle, .js .cta__doodle, .js .home-card__maple { animation: none; }
	.js .hero__curve path { stroke-dasharray: none; }
	.js .hero__typing { display: none; }
	.hero__blob, .hero__photo { will-change: auto; }
}