/* Home page — lime style. Loaded on the front page (and the old preview template). */

/* Palette: lime for shapes and buttons (with dark text — white on lime is too faint), deep green for links. */
body:is(.home, .page-template-page-home-preview) {
	--lime: #78CC25;
	--lime-hover: #6AB91F;
	--lime-deep: #3E7D0E;
	--lime-tint: #F1F9E8;
	--mist: #F6F5FA;
	--ink: #2B2B2B;
	--muted: #5A5A5A;
	--fern: #3E7D0E;
	--fern-dark: #2F610A;
	--marigold: #78CC25;
	--tint: #F1F9E8;
	--cream: #F6F5FA;
	background: #fff;
}
.lm-page .btn-fern, .lm-page .list-cta, .lm-btn { background: var(--lime); color: var(--ink); border: 0; }
.lm-page .btn-fern:hover, .lm-page .list-cta:hover, .lm-btn:hover { background: var(--lime-hover); color: var(--ink); }
/* footer colours live in style.css (Footer v3) */
.lm-page .foot-cta h2 em, .lm-page .foot-btn { color: var(--ink); }
.lm-page .foot-cta h2 em { color: var(--lime); }
.lm-page .foot-btn { background: var(--lime); }
.lm-page main { padding: 0; }
.lm-page .entry-title, .lm-page .page-title { display: none; }

.lm { overflow-x: clip; } /* slide-ins never cause a sideways scroll bar */
.lm h1, .lm h2, .lm h3 { color: var(--ink); }
.lm .lm-eyebrow { margin: 0 0 6px; color: var(--lime-deep); font-weight: 700; font-size: .95rem; }
.lm-sec { position: relative; padding: 84px 0; }
.lm-mist { background: var(--mist); }
.lm-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.lm-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 10px; }
.lm-head p { color: var(--muted); margin: 0; }
.lm-head.row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; max-width: none; gap: 16px; }
.lm-head.light h2, .lm-head.light p { color: #fff; }
.lm-head.light .lm-eyebrow { color: var(--lime); }
.lm-more { color: var(--lime-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Curves between sections */
.lm-curve { position: absolute; left: -10%; width: 120%; height: 70px; background: #fff; pointer-events: none; z-index: 1; }
.lm-hero > .lm-curve { bottom: -1px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.lm-curve.top { top: -1px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.lm-curve.top.mist { background: var(--mist); }

/* Hero */
.lm-hero { position: relative; min-height: 600px; display: flex; align-items: center; padding: 40px 0 120px; overflow: clip; }
.lm-hero-img { position: absolute; inset: 0 0 0 38%; }
.lm-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.lm-hero-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.85) 12%, rgba(255,255,255,0) 45%); }
.lm-hero-copy { position: relative; z-index: 2; width: 100%; }
.lm-hero h1 { font-size: min(clamp(2.3rem, 5.3vw, 4.2rem), calc((100vw - 40px) / 10.6)); line-height: 1.02; margin: 0 0 18px; max-width: 10.4em; } /* two lines max at any width */
.lm-hero h1 span { display: block; color: var(--lime-deep); }
.lm-lede { font-size: 1.15rem; color: var(--muted); max-width: 30em; margin: 0 0 26px; }
.lm-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; padding: 8px; background: #fff; border-radius: 999px; box-shadow: 0 14px 40px rgba(43,43,43,.12); }
.lm-search select, .lm-search input { flex: 1 1 140px; min-height: 48px; border: 0; background: transparent; font: inherit; font-weight: 600; padding: 0 14px; color: var(--ink); }
.lm-search .btn { min-height: 48px; padding: 0 28px; }
.lm-float { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: flex; gap: 28px; padding: 18px 32px; background: #fff; border-radius: 999px; box-shadow: 0 14px 40px rgba(43,43,43,.12); font-weight: 700; white-space: nowrap; }
.lm-float span { display: inline-flex; align-items: center; gap: 8px; }
.lm-float svg { color: var(--lime-deep); }

/* Pet type circles, staggered with connector lines */
.lm-circles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lm-circle { display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--ink); text-decoration: none; text-align: center; }
.lm-line { display: block; width: 2px; height: 44px; background: var(--lime); }
.lm-circle.up .lm-line { order: 2; } /* up: circle first, line below — so every label lines up */
.lm-circle.up .lm-dot { order: 1; }
.lm-circle strong, .lm-circle small { order: 3; }
.lm-dot { width: min(150px, 100%); height: auto; flex: none; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--lime-tint); color: var(--lime-deep); border: 8px solid #fff; box-shadow: 0 10px 30px rgba(43,43,43,.12); transition: transform .3s var(--ease-out), box-shadow .3s; }
.lm-dot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.lm-circle:hover .lm-dot, .lm-circle:focus-visible .lm-dot { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(43,43,43,.16); }
.lm-circle:hover .lm-dot img { transform: scale(1.08); }
.lm-circle strong { font-size: 1.15rem; margin-top: 12px; }
.lm-circle small { color: var(--muted); }

/* Welcome + rehome splits with blob-shaped photos */
.lm-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.lm-split.rev { grid-template-columns: 1fr 1.05fr; }
.lm-split h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 14px; }
.lm-split p { color: var(--muted); font-size: 1.08rem; }
.lm-blob { aspect-ratio: 1.1; border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; overflow: hidden; box-shadow: 0 24px 60px rgba(43,43,43,.14); }
.lm-blob.b2 { border-radius: 44% 56% 58% 42% / 48% 56% 44% 52%; }
.lm-blob img { width: 100%; height: 100%; object-fit: cover; }
.lm-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; padding: 22px; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(43,43,43,.06); }
.lm-mini span { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--lime-deep); }
.lm-mini b { color: var(--ink); font-size: .98rem; }

/* Dark photo band with lime tiles */
.lm-band { position: relative; padding: 130px 0 140px; color: #fff; overflow: clip; }
.lm-band-bg { position: absolute; inset: 0; }
.lm-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.lm-band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(24,30,20,.82); }
.lm-band .wrap { position: relative; z-index: 2; }
.lm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; }
.lm-tile { padding: 36px 26px; background: var(--lime); color: var(--ink); text-align: center; transition: transform .25s var(--ease-out); }
.lm-tile.deep { background: var(--lime-deep); color: #fff; padding-top: 52px; }
.lm-tile.deep h3 { color: #fff; }
.lm-tile h3 { margin: 12px 0 8px; font-size: 1.2rem; }
.lm-tile p { margin: 0; font-size: .95rem; }

/* Contact strip — no phone line, so email + list + where */
.lm-contact { background: var(--mist); padding: 56px 0; }
.lm-contact-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.lm-contact-row > * { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px; color: var(--ink); text-decoration: none; }
.lm-contact-row svg { color: var(--lime-deep); flex: none; }
.lm-contact-row small { display: block; color: var(--muted); }
.lm-contact-row b { font-size: 1.05rem; }
.lm-contact-row .mid { background: var(--lime); border-radius: 4px; }
.lm-contact-row .mid svg, .lm-contact-row .mid small { color: var(--ink); }

/* Reveal variants (base fade-up lives in style.css) */
.js-anim .reveal[data-reveal="left"] { transform: translateX(-40px); }
.js-anim .reveal[data-reveal="right"] { transform: translateX(40px); }
.js-anim .reveal[data-reveal="pop"] { transform: scale(.85); }
.js-anim .reveal.in[data-reveal] { transform: none; }

/* Phones and tablets */
@media (max-width: 960px) {
	.lm-circles { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
	.lm-tiles { grid-template-columns: repeat(2, 1fr); }
	.lm-tile.deep { padding-top: 36px; }
	.lm-split, .lm-split.rev { grid-template-columns: 1fr; gap: 32px; }
	.lm-split.rev .lm-blob { order: 2; }
}
@media (max-width: 700px) {
	.lm-sec { padding: 60px 0; }
	.lm-hero { display: block; min-height: 0; padding: 0 0 64px; }
	.lm-hero-img { position: relative; inset: auto; height: 260px; }
	.lm-hero-img::before { background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 40%); }
	.lm-hero-copy { margin-top: -30px; }
	.lm-search { border-radius: 20px; }
	.lm-search .btn { flex: 1 1 100%; }
	.lm-float { position: relative; left: auto; bottom: auto; transform: none; margin: 24px 16px 0; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 14px 18px; border-radius: 20px; white-space: normal; }
	.lm-line { display: none; }
	.lm-mini { grid-template-columns: 1fr 1fr 1fr; padding: 14px; }
	.lm-tiles { grid-template-columns: 1fr; }
	.lm-contact-row { grid-template-columns: 1fr; }
	.lm-head.row { flex-direction: column; align-items: flex-start; }
	.lm-curve { height: 36px; }
}

/* ===== Expert-review polish ===== */
/* Hero */
.lm-stats { margin: 16px 0 0; color: var(--muted); font-size: .98rem; }
.lm-stats b { color: var(--ink); }
.lm-stats a { color: var(--lime-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lm-stats a:hover { text-decoration: underline; }

/* Pet types: every bubble hangs from one rail at the same height */
.lm-circles { position: relative; padding-top: 0; background: linear-gradient(var(--lime), var(--lime)) top / 100% 2px no-repeat; }
.lm-circle .lm-line { order: 0; height: 36px; }
.lm-circle .lm-dot { order: 1; }
.lm-dot svg { width: 46%; height: 46%; }

/* Bottom curves so dark/grey bands never end on a hard edge */
.lm-curve.bottom { bottom: -1px; top: auto; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.lm-rehome { padding-bottom: 120px; }

/* Section heads: one size, one "see all" style, comfy tap targets */
.lm-page .lm-head h2, .lm-page .lm-split h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; }
.lm-head.row { margin-bottom: 32px; }
.lm-head.light p { color: rgba(255,255,255,.88); max-width: 34em; margin: 0 auto; }
.lm-head.light a { color: #B5EB7F; font-weight: 700; white-space: nowrap; }
.lm-more { display: inline-flex; align-items: center; min-height: 44px; }
.lm-more:hover { text-decoration: underline; }

/* Pet of the Week: same soft card language as the rest */
.lm-potw { padding-top: 24px; }
.lm-page .potw-card { border: 0; background: var(--mist); border-radius: 28px; box-shadow: 0 14px 40px rgba(43,43,43,.08); }
.lm-page .potw-photo { min-height: 400px; } /* taller photo side; the img is centred on the pet (pr_photo_pos) */
.lm-featured { padding-top: 0; }

/* Band tiles: one lime, one deep — rounded and spaced */
.lm-tiles { gap: 16px; }
.lm-tile { border-radius: 22px; }
.lm-tile p { color: rgba(43,43,43,.86); }
.lm-tile.deep p { color: rgba(255,255,255,.9); }

/* Owner steps */
.lm-steps { list-style: none; counter-reset: s; margin: 8px 0 26px; padding: 0; display: grid; gap: 14px; }
.lm-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.lm-steps li::before { content: counter(s); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-weight: 800; font-family: var(--display); }
.lm-steps b { font-size: 1.06rem; }
.lm-steps span { color: var(--muted); }
.lm-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Guides: three equal columns */
.lm-guides .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cities: centred pills */
.lm-cities { padding: 40px 0 72px; }
.lm-cities .lm-head { margin-bottom: 22px; }
.lm-cities .city-links { justify-content: center; }
.lm-cities .city-links a { border-radius: 999px; background: var(--lime-tint); padding: 10px 18px; }

/* The footer CTA band repeats the owner section on the home page */
.lm-page .foot-cta { display: none; }

/* Photo placeholder in the palette, not beige */
.lm-page .pet-photo:not(:has(img)) { background: var(--lime-tint); color: var(--lime-deep); }

@media (max-width: 960px) {
	.lm-circles { background: none; }
	.lm-circle .lm-line { display: none; }
	.lm-guides .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lm-guides .grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.lm-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
	.lm-tile { padding: 22px 12px; border-radius: 18px; }
	.lm-tile.deep { padding-top: 22px; }
	.lm-tile h3 { font-size: 1.02rem; }
	.lm-tile p { font-size: .85rem; }
	.lm-band { padding: 90px 0 100px; }
	.lm-blob { aspect-ratio: 16 / 11; }
	.lm-search select { display: none; } /* the pet-type bubbles right below do this job on phones */
	.lm-stats { font-size: .92rem; }
	.lm-guides .grid { grid-template-columns: 1fr; }
	.lm-rehome { padding-bottom: 80px; }
}

.lm-curve.bottom.mist { background: var(--mist); }
.lm-types { padding-bottom: 32px; }
.lm-just { padding-top: 48px; }
.lm-rehome { padding-top: 60px; }
/* Footer rises out of the page on a curve, like every other band */
.lm-page .site-footer { position: relative; }
.lm-page .site-footer::before { content: ""; position: absolute; top: -1px; left: -10%; width: 120%; height: 70px; background: #fff; border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; }
.lm-page .site-footer > .wrap:first-child { padding-top: 64px; }
@media (max-width: 700px) { .lm-page .site-footer::before { height: 36px; } .lm-just { padding-top: 32px; } }

/* Straight section edges (owner preference): no curves anywhere */
.lm-curve { display: none !important; }
.lm-page .site-footer::before { content: none; }
.lm-page .site-footer > .wrap:first-child { padding-top: 56px; }
.lm-hero { padding-bottom: 96px; }
.lm-band { padding: 96px 0; }
.lm-rehome { padding-top: 84px; padding-bottom: 84px; }
/* Equal-height trust tiles (the staggered "deep" tile read as a mistake). */
.lm-tiles { align-items: stretch; }
.lm-tile.deep { padding-top: 36px; }
@media (max-width:700px){ .lm-tile.deep { padding-top: 22px; } }

/* Pet of the Week: "book this spot" when the week is unsold */
.potw-book { margin: 12px 0 0; text-align: right; font-size: .95rem; }
.potw-book a { color: var(--lime-deep); font-weight: 700; text-decoration: none; }
.potw-book a:hover { text-decoration: underline; }
/* Our promise band */
.lm-mission { text-align: center; background: linear-gradient(135deg, #0B110C, #12210F 55%, #2A5A18); color: #fff; }
.lm-mission .wrap { max-width: 760px; }
.lm-mission h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 6px 0 14px; }
.lm-mission p { color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.6; margin: 0 0 22px; }
.lm-mission .lm-eyebrow { color: #78CC25; }
.lm-tile p a { color: inherit; font-weight: 700; }