/*
 * Dream Trim — landing page styles.
 *
 * Palette is derived from the Dream Trim logo: lemon yellow, turquoise
 * lettering, purple frames and black ink line-work.
 *
 * The logo's own turquoise (#35c2ba) and purple (#b23be0) are vivid but too
 * light to carry text — 2.19:1 and 4.57:1 on white. So each has a text-safe
 * twin used for anything readable, while the originals stay for decoration
 * (orbs, glows, bubble fills) where contrast is not a requirement:
 *
 *   turquoise  #35c2ba  →  --dtrm-primary    #0b7a74  (5.18:1 on white)
 *   purple     #b23be0  →  --dtrm-secondary  #8b2fbf  (6.45:1 on white)
 *   yellow     #f4e01c  →  --dtrm-yellow, background only, ink on top (12.75:1)
 *
 * The button/heading gradient runs primary → #4a5799 → secondary; every stop
 * is at least 5.18:1 against white, so white button text and .gradtext both
 * clear WCAG AA across the whole ramp.
 *
 * Contents
 *  1. Tokens & reset
 *  2. Keyframes & motion utilities
 *  3. Buttons
 *  4. Header & navigation
 *  5. Hero
 *  6. Trust bar
 *  7. Services
 *  8. Packages & pricing
 *  9. Reviews
 * 10. Final CTA
 * 11. Map & contact
 * 12. Footer
 * 13. Modal & legal documents
 * 14. Cookie banner & floating CTA
 * 15. Responsive
 */

/* ============================================================
   1. Tokens & reset
   ============================================================ */

:root {
	--dtrm-bg: #fdfcf3;
	--dtrm-surface: #fff;
	--dtrm-surface-alt: #fbfaef;

	--dtrm-ink: #1b1a22;
	--dtrm-ink-2: #34313f;
	--dtrm-muted: #55505f;
	--dtrm-muted-2: #635e70;
	--dtrm-muted-3: #6f6a7d;
	/*
	 * Same value as muted-3 on purpose. The previous build used a lighter grey
	 * here for the footer column labels, which measured 2.7:1 — below AA. There
	 * is no text in this theme that sits under 4.5:1 any more.
	 */
	--dtrm-muted-4: #6f6a7d;
	--dtrm-body-text: #5b5668;

	/* Text-safe brand colours. */
	--dtrm-primary: #0b7a74;
	--dtrm-mid: #4a5799;
	--dtrm-secondary: #8b2fbf;

	/* Logo colours, decoration only — never behind text. */
	--dtrm-turquoise: #35c2ba;
	--dtrm-violet: #b23be0;
	--dtrm-yellow: #f4e01c;
	--dtrm-yellow-line: #d9c400;

	--dtrm-live: #17a34a;

	--dtrm-line: rgba(11, 122, 116, .12);
	--dtrm-line-soft: rgba(11, 122, 116, .09);
	--dtrm-line-softer: rgba(11, 122, 116, .07);
	--dtrm-line-strong: rgba(11, 122, 116, .17);

	--dtrm-shadow-badge: 0 6px 20px rgba(11, 122, 116, .12);
	--dtrm-shadow-card: 0 12px 34px rgba(27, 26, 34, .08);
	--dtrm-shadow-pop: 0 20px 40px rgba(27, 26, 34, .16);

	--dtrm-ease: cubic-bezier(.4, 0, .2, 1);
	--dtrm-ease-out: cubic-bezier(.16, .7, .3, 1);

	--dtrm-header-h: 80px;
	/* Raised to the WordPress toolbar height for logged-in admins. */
	--dtrm-top-offset: 0px;
	--dtrm-maxw: 1280px;
	--dtrm-gutter: 32px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	/* Keeps anchor targets clear of the fixed header. */
	scroll-padding-top: calc(var(--dtrm-header-h) + 20px);
}

body {
	background: var(--dtrm-bg);
	color: var(--dtrm-ink);
	font-family: 'Noto Sans', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

a {
	color: var(--dtrm-primary);
	text-decoration: none;
	transition: color .25s var(--dtrm-ease);
}

a:hover {
	color: var(--dtrm-secondary);
}

img {
	display: block;
	max-width: 100%;
}

/*
 * Several components below set an explicit `display`, which would otherwise
 * beat the `hidden` attribute's user-agent rule. JS toggles `hidden` on the
 * modal, the cookie banner and the mobile menu, so this has to win.
 */
[hidden] {
	display: none !important;
}

address {
	font-style: normal;
}

blockquote {
	margin: 0;
}

::selection {
	background: #e2d8f5;
	color: #3a2f5c;
}

:focus-visible {
	outline: 2px solid var(--dtrm-primary);
	outline-offset: 3px;
	border-radius: 6px;
}

.display {
	font-family: 'Fredoka', 'Noto Sans', sans-serif;
}

.container {
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	color: var(--dtrm-ink);
	padding: 14px 20px;
	border-radius: 0 0 12px 0;
	font-weight: 700;
	font-size: 14px;
}

.skip-link:focus {
	left: 0;
}

details summary {
	list-style: none;
	cursor: pointer;
}

details summary::-webkit-details-marker {
	display: none;
}

details summary svg {
	transition: transform .3s var(--dtrm-ease);
}

details[open] > summary svg {
	transform: rotate(180deg);
}

.scrollable::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.scrollable::-webkit-scrollbar-thumb {
	background: rgba(11, 122, 116, .25);
	border-radius: 99px;
}

/* ============================================================
   2. Keyframes & motion utilities
   ============================================================ */

@keyframes gradFlow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes gradShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes pulseDot {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11, 122, 116, .4); }
	50% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(11, 122, 116, 0); }
}

@keyframes pulseLive {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23, 163, 74, .55); }
	50% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(23, 163, 74, 0); }
}

@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@keyframes bubble {
	0% { transform: translateY(30px) scale(.5); opacity: 0; }
	15% { opacity: .7; }
	100% { transform: translateY(-560px) scale(1.15); opacity: 0; }
}

@keyframes revealUp {
	0% { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(8px); }
	55% { filter: blur(0); }
	100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes driftA {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-34px, 28px); }
}

@keyframes driftB {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -26px); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dropIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}

/* The living turquoise → indigo → violet gradient used on every accent surface. */
.grad {
	background: linear-gradient(135deg, #0b7a74 0%, #4a5799 52%, #8b2fbf 100%);
	background-size: 200% 200%;
	animation: gradFlow 10s ease-in-out infinite;
}

.gradtext {
	background: linear-gradient(120deg, #0b7a74 0%, #4a5799 50%, #8b2fbf 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: gradShift 6s ease-in-out infinite;
}

/*
 * Scroll reveals. Hidden only once JS has confirmed it can reveal them again,
 * so the page is fully readable with JavaScript disabled.
 */
html.js [data-reveal] {
	opacity: 0;
}

html.js [data-reveal].is-revealed {
	animation: revealUp .95s var(--dtrm-ease-out) both;
}

html.js [data-reveal-delay="1"].is-revealed { animation-delay: .07s; }
html.js [data-reveal-delay="2"].is-revealed { animation-delay: .14s; }
html.js [data-reveal-delay="3"].is-revealed { animation-delay: .21s; }

.bubbles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bubble {
	position: absolute;
	bottom: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9), rgba(11, 122, 116, .14));
	border: 1px solid rgba(11, 122, 116, .12);
	pointer-events: none;
}

.stars {
	display: flex;
	gap: 2px;
	color: var(--dtrm-yellow);
}

.dot-live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dtrm-live);
	flex-shrink: 0;
}

.dot-live--pulse {
	animation: pulseLive 1.8s var(--dtrm-ease) infinite;
}

.eyebrow {
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #0b7a74;
	font-weight: 700;
	margin-bottom: 16px;
}

.section-head {
	text-align: center;
	margin-bottom: 52px;
}

.section-head h2 {
	font-size: 52px;
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--dtrm-ink);
}

/* ============================================================
   3. Buttons
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	text-align: center;
	transition: transform .3s var(--dtrm-ease), box-shadow .3s var(--dtrm-ease), background-color .3s var(--dtrm-ease);
}

.btn--grad {
	background: linear-gradient(135deg, #0b7a74 0%, #4a5799 52%, #8b2fbf 100%);
	background-size: 200% 200%;
	animation: gradFlow 10s ease-in-out infinite;
	color: #fff;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba(11, 122, 116, .3);
}

.btn--grad:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(11, 122, 116, .45);
}

/* Header CTA: two stacked labels. */
.btn--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	line-height: 1.1;
	padding: 11px 22px;
}

.btn__primary {
	font-size: 14px;
	font-weight: 700;
}

.btn__secondary {
	font-size: 9px;
	opacity: .85;
	font-weight: 400;
}

.btn--lg {
	font-size: 17px;
	gap: 12px;
	padding: 17px 30px;
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(11, 122, 116, .32);
}

.btn--lg:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 46px rgba(11, 122, 116, .45);
}

.btn--white {
	background: #fff;
	color: var(--dtrm-primary);
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 12px;
}

.btn--white:hover {
	color: var(--dtrm-primary);
	transform: translateY(-2px);
}

.btn--dark {
	background: var(--dtrm-ink);
	color: #fff;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 16px;
}

.btn--dark:hover {
	color: #fff;
	transform: translateY(-3px);
}

.btn--xl {
	font-size: 19px;
	padding: 19px 34px;
	border-radius: 16px;
}

.btn--xl:hover {
	transform: translateY(-3px);
}

.btn--ghost {
	background: #fff;
	border: 1px solid rgba(11, 122, 116, .2);
	color: var(--dtrm-muted);
	font-weight: 600;
	font-size: 14px;
	padding: 13px 18px;
	border-radius: 12px;
}

.btn--ghost:hover {
	color: var(--dtrm-primary);
	border-color: rgba(11, 122, 116, .4);
}

.linklike {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 14px;
	color: var(--dtrm-muted);
	cursor: pointer;
	text-align: left;
	transition: color .25s var(--dtrm-ease);
}

.linklike:hover {
	color: var(--dtrm-primary);
}

.linklike--inline {
	display: inline;
	font-weight: 600;
	color: var(--dtrm-primary);
}

.linklike--inline:hover {
	color: var(--dtrm-secondary);
}

/* ============================================================
   4. Header & navigation
   ============================================================ */

.site-header {
	position: fixed;
	top: var(--dtrm-top-offset);
	left: 0;
	right: 0;
	height: var(--dtrm-header-h);
	z-index: 50;
	background: rgba(253, 252, 243, .82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--dtrm-line);
}

/*
 * Logged-in admins get the WordPress toolbar pinned to the top of the viewport,
 * and our own fixed header was sliding underneath it. Everything anchored to
 * the top of the screen reads --dtrm-top-offset instead of hardcoding 0.
 *
 * WordPress renders the bar at 32px on desktop and 46px below 783px, where it
 * also stops being fixed — so the offset goes back to 0 there and the bar simply
 * scrolls away with the page.
 */
body.admin-bar {
	--dtrm-top-offset: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--dtrm-top-offset: 0px;
	}
}

/*
 * scroll-padding lives on <html>, which cannot see a class on <body> — hence
 * :has(). Browsers without it keep the plain value above, which is the pre-
 * toolbar behaviour rather than a broken one.
 */
html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--dtrm-header-h) + 32px + 20px);
}

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--dtrm-header-h) + 20px);
	}
}

.site-header__inner {
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
	height: 100%;
	padding: 0 var(--dtrm-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__logo {
	display: flex;
	align-items: center;
}

.site-header__logo img {
	height: 52px;
	width: auto;
}

.nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.nav a {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* Literal, not a token: keeps the menu legible even if a plugin
	   redefines a same-named custom property on :root. */
	color: #0b7a74;
	font-weight: 600;
}

.nav a:hover {
	color: #8b2fbf;
}

.site-header__utils {
	display: flex;
	align-items: center;
	gap: 18px;
}

/*
 * Header icon button — currently the manager's way into the booking portal.
 * Sized to the CTA next to it so the utility row keeps one optical height.
 */
.iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--dtrm-line-strong);
	background: var(--dtrm-surface);
	color: var(--dtrm-primary);
	transition: border-color .25s var(--dtrm-ease), color .25s var(--dtrm-ease), transform .25s var(--dtrm-ease);
}

.iconbtn:hover {
	border-color: var(--dtrm-primary);
	color: var(--dtrm-secondary);
	transform: translateY(-1px);
}

.iconbtn:focus-visible {
	outline: 2px solid var(--dtrm-primary);
	outline-offset: 2px;
}

.mobile-nav__portal {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dtrm-primary);
}

.header-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--dtrm-ink-2);
}

.header-phone:hover {
	color: var(--dtrm-primary);
}

.header-phone span {
	font-size: 14px;
	font-weight: 600;
}

.burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 12px;
	color: var(--dtrm-ink);
	cursor: pointer;
	transition: border-color .25s var(--dtrm-ease), color .25s var(--dtrm-ease);
}

.burger:hover {
	border-color: rgba(11, 122, 116, .35);
	color: var(--dtrm-primary);
}

.mobile-nav {
	position: absolute;
	top: var(--dtrm-header-h);
	left: 0;
	right: 0;
	/*
	 * Solid, not glass: nested inside the header's own backdrop-filter the
	 * translucent version let hero text read through the menu.
	 */
	background: var(--dtrm-bg);
	border-bottom: 1px solid var(--dtrm-line);
	box-shadow: 0 24px 50px rgba(27, 26, 34, .14);
	padding: 14px var(--dtrm-gutter) 24px;
	display: flex;
	flex-direction: column;
	animation: dropIn .28s var(--dtrm-ease-out) both;
}

.mobile-nav nav {
	display: flex;
	flex-direction: column;
}

/* Scoped to the inner <nav> so the CTA and phone link below keep their own styling. */
.mobile-nav nav a {
	font-size: 13px;
	letter-spacing: .16em;
	color: #0b7a74;
	font-weight: 600;
	padding: 14px 2px;
	border-bottom: 1px solid var(--dtrm-line-soft);
}

.mobile-nav nav a:hover {
	color: #8b2fbf;
}

.mobile-nav__cta {
	margin-top: 18px;
	color: #fff;
	padding: 15px 24px;
}

.mobile-nav__cta:hover {
	color: #fff;
}

.mobile-nav__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dtrm-ink-2);
}

.mobile-nav__phone:hover {
	color: var(--dtrm-primary);
}

/* ============================================================
   5. Hero
   ============================================================ */

.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	padding: 130px var(--dtrm-gutter) 70px;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__orb {
	position: absolute;
	border-radius: 50%;
}

.hero__orb--a {
	top: -180px;
	right: -140px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle at 30% 30%, rgba(53, 194, 186, .3), transparent 70%);
	animation: driftA 17s ease-in-out infinite;
}

.hero__orb--b {
	bottom: -160px;
	left: -120px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle at 60% 40%, rgba(244, 224, 28, .38), transparent 70%);
	animation: driftB 15s ease-in-out infinite;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--dtrm-yellow);
	border: 1px solid var(--dtrm-yellow-line);
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 26px;
	box-shadow: var(--dtrm-shadow-badge);
}

.badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dtrm-primary);
	flex-shrink: 0;
	animation: pulseDot 1.8s var(--dtrm-ease) infinite;
}

.badge__text {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--dtrm-ink);
}

/*
 * Yellow highlighter for a word inside running copy. Ink on the logo yellow
 * is 12.75:1, so it stays readable where a tinted-text highlight would not.
 */
.mark {
	background: linear-gradient(180deg, transparent 58%, var(--dtrm-yellow) 58%);
	padding: 0 2px;
	color: inherit;
}

.hero__title {
	font-size: 74px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.03em;
	margin-bottom: 22px;
	color: var(--dtrm-ink);
}

.hero__lead {
	max-width: 540px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--dtrm-body-text);
	margin-bottom: 34px;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.social-proof {
	display: flex;
	align-items: center;
	gap: 12px;
}

.social-proof span {
	font-size: 13px;
	color: var(--dtrm-muted-3);
	font-weight: 500;
}

.hero__media {
	position: relative;
}

.hero__media-glow {
	position: absolute;
	top: -22px;
	left: -22px;
	right: 22px;
	bottom: 22px;
	border-radius: 36px;
	background: linear-gradient(135deg, #0b7a74, #8b2fbf);
	opacity: .14;
}

.hero__media-frame {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 40px 80px rgba(27, 26, 34, .24);
	animation: floaty 7s ease-in-out infinite;
}

.hero__img {
	width: 100%;
	height: 520px;
	object-fit: cover;
}

.hero__chip {
	position: absolute;
	left: -18px;
	bottom: 34px;
	background: #fff;
	border-radius: 18px;
	padding: 14px 18px;
	box-shadow: 0 18px 40px rgba(27, 26, 34, .18);
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero__chip-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hero__chip-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dtrm-ink);
	line-height: 1.25;
}

.hero__chip-sub {
	font-size: 12px;
	color: var(--dtrm-muted-3);
	line-height: 1.25;
}

/* ============================================================
   6. Trust bar
   ============================================================ */

.trust {
	background: #fff;
	border-top: 1px solid var(--dtrm-line-soft);
	border-bottom: 1px solid var(--dtrm-line-soft);
}

.trust__inner {
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
	padding: 0 var(--dtrm-gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.trust__item {
	position: relative;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	padding: 30px 26px;
	border-left: 1px solid var(--dtrm-line-soft);
	transition: transform .45s var(--dtrm-ease-out);
}

.trust__item:hover {
	transform: translateY(-5px);
}

.trust__icon {
	color: #a7a0bd;
	transition: color .3s var(--dtrm-ease);
}

.trust__item:hover .trust__icon,
.trust__item:focus-visible .trust__icon {
	color: var(--dtrm-primary);
}

.trust__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dtrm-ink);
}

.trust__sub {
	font-size: 13px;
	color: var(--dtrm-muted-3);
}

.tooltip {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: calc(100% - 14px);
	z-index: 20;
	background: #fff;
	border: 1px solid var(--dtrm-line-strong);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: var(--dtrm-shadow-pop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s var(--dtrm-ease), transform .25s var(--dtrm-ease), visibility .25s;
}

.trust__item:hover .tooltip,
.trust__item:focus-visible .tooltip,
.trust__item:focus-within .tooltip {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.tooltip__text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--dtrm-muted);
}

.tooltip__arrow {
	position: absolute;
	top: 100%;
	left: 28px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-right: 1px solid var(--dtrm-line-strong);
	border-bottom: 1px solid var(--dtrm-line-strong);
	transform: translateY(-6px) rotate(45deg);
}

/* ============================================================
   7. Services
   ============================================================ */

.services {
	padding: 110px var(--dtrm-gutter) 90px;
}

.grid-services {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.card-service {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--dtrm-shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.card-service:hover {
	transform: translateY(-9px);
	box-shadow: 0 28px 56px rgba(27, 26, 34, .2);
}

.card-service__media {
	overflow: hidden;
	height: 196px;
}

.card-service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--dtrm-ease);
}

.card-service:hover .card-service__media img {
	transform: scale(1.08);
}

/*
 * Shown while a service photo is missing from assets/img/ — a labelled frame
 * rather than a browser's broken-image icon.
 */
.card-service__empty {
	/* Fills the fixed-height media box without needing it to be positioned. */
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dtrm-surface-alt);
	color: var(--dtrm-muted-3);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

.card-service__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card-service__body h3 {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dtrm-ink);
	margin-bottom: 9px;
}

.card-service__body p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--dtrm-muted-2);
	flex-grow: 1;
}

/* ============================================================
   8. Packages & pricing
   ============================================================ */

.packages {
	padding: 0 var(--dtrm-gutter) 100px;
}

.grid-packages {
	display: grid;
	grid-template-columns: minmax(0, 400px) 1fr;
	gap: 64px;
	align-items: start;
}

.packages__aside {
	position: sticky;
	top: calc(var(--dtrm-header-h) + var(--dtrm-top-offset) + 30px);
}

.packages__aside h2 {
	font-size: 48px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--dtrm-ink);
	margin-bottom: 20px;
}

.packages__lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
	margin-bottom: 30px;
}

.pricecard {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--dtrm-shadow-card);
}

.pricecard__head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	padding: 16px 22px;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dtrm-muted-4);
	border-bottom: 1px solid var(--dtrm-line-soft);
}

.pricecard__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 15px 22px;
	border-bottom: 1px solid var(--dtrm-line-softer);
	font-size: 14px;
	color: var(--dtrm-ink-2);
}

.pricecard__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--dtrm-primary);
}

.pricecard__more > summary {
	padding: 15px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--dtrm-muted);
	font-weight: 600;
}

.pricecard__more > summary:hover {
	color: var(--dtrm-primary);
}

.pricecard__extras {
	padding: 2px 22px 16px;
}

.pricecard__extra {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-size: 13px;
	color: var(--dtrm-muted-2);
	border-top: 1px solid var(--dtrm-line-softer);
}

.pricecard__extra-price {
	color: var(--dtrm-ink-2);
	font-weight: 600;
}

.packages__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.card-package {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 32px;
	padding: 36px;
	box-shadow: var(--dtrm-shadow-card);
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.card-package:hover {
	transform: translateY(-7px);
}

/*
 * Declares the gradient itself rather than leaning on `.grad`: both are single
 * class selectors, and `.card-package`'s white background is defined later, so
 * it would otherwise win.
 */
.card-package--featured {
	background: linear-gradient(135deg, #0b7a74 0%, #4a5799 52%, #8b2fbf 100%);
	background-size: 200% 200%;
	animation: gradFlow 10s ease-in-out infinite;
	border-color: transparent;
	box-shadow: 0 30px 60px rgba(11, 122, 116, .3);
}

.card-package__badge {
	position: absolute;
	top: 24px;
	right: 28px;
	background: rgba(255, 255, 255, .22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	color: #fff;
}

.card-package__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 12px;
}

.card-package__head h3 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--dtrm-ink);
	margin-bottom: 8px;
}

.card-package__head p {
	font-size: 14.5px;
	color: var(--dtrm-muted-2);
	max-width: 440px;
	line-height: 1.55;
}

.card-package__price {
	text-align: right;
	flex-shrink: 0;
}

.card-package__from {
	font-size: 11px;
	color: var(--dtrm-muted-4);
	text-transform: uppercase;
	letter-spacing: .1em;
}

.card-package__amount {
	font-size: 32px;
	font-weight: 800;
	color: var(--dtrm-ink);
}

.card-package__details {
	border-top: 1px solid var(--dtrm-line);
	margin-top: 6px;
}

.card-package__details > summary {
	padding-top: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dtrm-primary);
}

.card-package__includes {
	padding-top: 13px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.card-package__includes span {
	font-size: 13px;
	color: var(--dtrm-muted-2);
	display: flex;
	gap: 8px;
}

.tick {
	color: var(--dtrm-secondary);
}

/* Featured card inverts everything onto the gradient. */
.card-package--featured .card-package__head h3 {
	font-size: 32px;
	font-weight: 800;
	color: #fff;
}

.card-package--featured .card-package__head p {
	color: rgba(255, 255, 255, .9);
}

.card-package--featured .card-package__from {
	color: rgba(255, 255, 255, .8);
}

.card-package--featured .card-package__amount {
	font-size: 38px;
	color: #fff;
}

.card-package--featured .card-package__details {
	border-top-color: rgba(255, 255, 255, .25);
}

.card-package--featured .card-package__details > summary {
	font-weight: 700;
	color: #fff;
}

.card-package--featured .card-package__includes span {
	color: rgba(255, 255, 255, .95);
}

.card-package--featured .tick {
	color: #fff;
}

.card-package .btn--white {
	margin-top: 24px;
}

/* ============================================================
   9. Reviews
   ============================================================ */

.reviews {
	background: #fff;
	padding: 100px var(--dtrm-gutter);
	border-top: 1px solid var(--dtrm-line-soft);
}

/*
 * Google rating panel. Sits above the quote cards because it is the only part
 * of this section backed by figures anyone can go and check.
 */
.gpanel {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	background: var(--dtrm-surface-alt);
	border: 1px solid var(--dtrm-line);
	border-left: 6px solid var(--dtrm-yellow);
	border-radius: 24px;
	padding: 26px 30px;
	margin-bottom: 30px;
}

.gpanel__score {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.gpanel__value {
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var(--dtrm-ink);
}

.gpanel__body {
	flex: 1 1 260px;
}

.gpanel__title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dtrm-ink);
	margin-bottom: 6px;
}

.gpanel__sub {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
}

.gpanel__cta {
	flex-shrink: 0;
}

.grid-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/*
 * Trustindex renders its own markup and styles; this only gives it room and
 * stops it inheriting the centred text of the section head above.
 */
.reviews__widget {
	text-align: left;
}

.reviews__widget > * {
	max-width: 100%;
}

.reviews__note {
	margin-top: 24px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--dtrm-muted-2);
	text-align: center;
}

.card-review {
	background: var(--dtrm-surface-alt);
	border: 1px solid var(--dtrm-line);
	border-radius: 28px;
	padding: 34px;
	display: flex;
	flex-direction: column;
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.card-review:hover {
	transform: translateY(-7px);
	box-shadow: 0 26px 52px rgba(27, 26, 34, .16);
}

.card-review .stars {
	gap: 3px;
	margin-bottom: 18px;
}

.card-review__quote {
	font-size: 19px;
	line-height: 1.45;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -.01em;
	color: var(--dtrm-ink);
	margin-bottom: 26px;
	flex-grow: 1;
}

.card-review__author {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-top: 20px;
	border-top: 1px solid var(--dtrm-line);
}

.card-review__avatar {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	flex-shrink: 0;
}

.card-review__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--dtrm-ink);
}

.card-review__pet {
	display: block;
	font-size: 13px;
	color: var(--dtrm-muted-3);
}

/* Empty quote slot — deliberately unfilled, never an invented testimonial. */
.card-review--empty {
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 210px;
	text-align: center;
	background: transparent;
	border-style: dashed;
	color: var(--dtrm-muted-3);
	font-size: 13px;
	line-height: 1.6;
}

.card-review--empty:hover {
	transform: none;
	box-shadow: none;
}


/* ============================================================
   10. Final CTA
   ============================================================ */

.cta {
	padding: 90px var(--dtrm-gutter) 40px;
}

.cta__panel {
	position: relative;
	overflow: hidden;
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
	border-radius: 40px;
	padding: 92px 40px;
	text-align: center;
}

.cta__orb {
	position: absolute;
	border-radius: 50%;
}

.cta__orb--a {
	top: -90px;
	right: -50px;
	width: 320px;
	height: 320px;
	background: rgba(255, 255, 255, .12);
	animation: floaty 6s ease-in-out infinite;
}

.cta__orb--b {
	bottom: -110px;
	left: -40px;
	width: 280px;
	height: 280px;
	background: rgba(255, 255, 255, .1);
	animation: floaty 8s ease-in-out infinite;
}

.cta__content {
	position: relative;
	z-index: 1;
}

.cta__content h2 {
	font-size: 70px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
	margin-bottom: 22px;
}

.cta__muted {
	color: rgba(255, 255, 255, .55);
}

.cta__content p {
	font-size: 19px;
	color: rgba(255, 255, 255, .92);
	max-width: 560px;
	margin: 0 auto 38px;
	line-height: 1.5;
}

.cta__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================================
   10b. Booking form
   ============================================================ */

.booking {
	padding: 70px var(--dtrm-gutter) 40px;
}

.booking .section-head {
	margin-bottom: 36px;
}

.booking__lead {
	max-width: 560px;
	margin: 18px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
}

.booking__frame {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 32px;
	padding: 36px;
	box-shadow: var(--dtrm-shadow-card);
}

/*
 * Light-touch defaults for the booking plugin's markup: enough that the form
 * reads as part of the page, loose enough that the plugin's own styles win.
 * Deliberately single-class selectors — do not tighten these.
 */
.booking__frame input,
.booking__frame select,
.booking__frame textarea,
.booking__frame button {
	font-family: inherit;
	font-size: 15px;
	max-width: 100%;
}

.booking__frame input,
.booking__frame select,
.booking__frame textarea {
	border: 1px solid var(--dtrm-line-strong);
	border-radius: 12px;
	padding: 12px 14px;
	color: var(--dtrm-ink);
	background: #fff;
}

.booking__frame input:focus,
.booking__frame select:focus,
.booking__frame textarea:focus {
	outline: 2px solid var(--dtrm-primary);
	outline-offset: 1px;
}

.booking__frame label {
	font-size: 13px;
	font-weight: 600;
	color: var(--dtrm-muted);
}

.booking__alt {
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: var(--dtrm-muted-2);
}

.booking__alt a {
	font-weight: 600;
}

/* ============================================================
   11. Map & contact
   ============================================================ */

.map {
	padding: 20px var(--dtrm-gutter) 90px;
}

.map .section-head {
	margin-bottom: 40px;
}

.grid-map {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 28px;
	align-items: stretch;
}

.infocard {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 28px;
	padding: 34px;
	box-shadow: var(--dtrm-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.infocard__row {
	display: flex;
	gap: 14px;
}

.infocard__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.infocard__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--dtrm-ink);
	margin-bottom: 3px;
}

.infocard__text {
	font-size: 14px;
	color: var(--dtrm-muted-2);
	line-height: 1.55;
}

.infocard__link {
	display: block;
	font-size: 14px;
	color: var(--dtrm-muted-2);
}

.infocard__link:hover {
	color: var(--dtrm-primary);
}

.infocard__cta {
	margin-top: auto;
}

.map__embed {
	border-radius: 28px;
	overflow: hidden;
	border: 1px solid var(--dtrm-line);
	box-shadow: var(--dtrm-shadow-card);
	min-height: 420px;
}

.map__embed iframe {
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 420px;
	display: block;
}

/* ============================================================
   12. Footer
   ============================================================ */

.site-footer {
	padding: 56px var(--dtrm-gutter) 44px;
}

.site-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.site-footer__brand {
	max-width: 380px;
}

.site-footer__brand img {
	height: 58px;
	width: auto;
	margin-bottom: 16px;
}

.site-footer__desc {
	font-size: 13.5px;
	color: var(--dtrm-muted-3);
	line-height: 1.65;
	margin-bottom: 18px;
}

.site-footer__desc strong {
	color: var(--dtrm-muted);
}

.site-footer__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--dtrm-muted-2);
}

.site-footer__cols {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__label {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dtrm-muted-4);
	font-weight: 700;
	margin-bottom: 6px;
}

.site-footer__col a,
.site-footer__col .linklike {
	font-size: 14px;
	color: #0b7a74;
}

.site-footer__col span {
	font-size: 14px;
	color: var(--dtrm-muted);
}

.site-footer__col a:hover,
.site-footer__col .linklike:hover {
	color: #8b2fbf;
}

.site-footer__bottom {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--dtrm-line);
	font-size: 12px;
	color: var(--dtrm-muted-4);
}

/* ============================================================
   13. Modal & legal documents
   ============================================================ */

.modal {
	position: fixed;
	inset: var(--dtrm-top-offset) 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 18, 42, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: fadeIn .3s ease both;
	cursor: pointer;
}

.modal__dialog {
	position: relative;
	background: #fff;
	max-width: 720px;
	width: 100%;
	max-height: 86vh;
	border-radius: 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 40px 90px rgba(40, 20, 80, .4);
	animation: revealUp .35s var(--dtrm-ease-out) both;
}

.modal__head {
	padding: 26px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
}

.modal__head h3 {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
}

.modal__close {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: 0;
	background: rgba(255, 255, 255, .2);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s var(--dtrm-ease);
}

.modal__close:hover {
	background: rgba(255, 255, 255, .34);
}

.modal__body {
	padding: 30px 32px 36px;
	overflow-y: auto;
}

.legal-doc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--dtrm-ink-2);
}

.legal-doc p {
	margin-bottom: 14px;
}

.legal-doc .legal-ver {
	font-size: 13px;
	color: var(--dtrm-muted-4);
}

.legal-doc .legal-h {
	font-family: 'Fredoka', 'Noto Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--dtrm-ink);
	margin: 24px 0 8px;
}

.legal-doc .legal-sub {
	font-family: 'Fredoka', 'Noto Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--dtrm-primary);
	margin: 16px 0 6px;
	letter-spacing: .02em;
}

.legal-doc ul {
	padding-left: 20px;
	margin-bottom: 14px;
}

.legal-doc li {
	margin-bottom: 7px;
}

.legal-note {
	margin: 14px 0;
	padding: 14px 16px;
	background: #f4f0fb;
	border-left: 3px solid var(--dtrm-primary);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--dtrm-muted);
}

.legal-note--warn {
	background: #fdf4f4;
	border-left-color: #e0788a;
}

.legal-id {
	margin-bottom: 16px;
	padding: 16px 18px;
	background: #faf8fe;
	border: 1px solid var(--dtrm-line-strong);
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--dtrm-ink-2);
}

.legal-id strong {
	color: var(--dtrm-ink);
}

.legal-id a {
	font-weight: 600;
}

.legal-id__todo {
	color: var(--dtrm-muted-4);
}

.legal-table {
	overflow-x: auto;
	margin-bottom: 16px;
	-webkit-overflow-scrolling: touch;
}

.legal-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 440px;
	font-size: 12.5px;
}

.legal-table th {
	text-align: left;
	padding: 9px 11px;
	background: #f4f0fb;
	color: #3a2f5c;
	font-weight: 700;
	border: 1px solid var(--dtrm-line-strong);
}

.legal-table td {
	padding: 9px 11px;
	border: 1px solid rgba(11, 122, 116, .12);
	color: var(--dtrm-ink-2);
	vertical-align: top;
}

/* ============================================================
   14. Cookie banner & floating CTA
   ============================================================ */

/*
 * Portal login dialog. Reuses the legal modal's shell; only the form inside it
 * is new. The narrow variant keeps a two-field form from stretching to the
 * width of a legal document.
 */
.modal__dialog--narrow {
	max-width: 420px;
}

.loginform__intro {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
	margin-bottom: 18px;
}

.loginform {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.loginform__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.loginform__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dtrm-muted);
}

.loginform input[type="email"],
.loginform input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--dtrm-line-strong);
	background: var(--dtrm-surface);
	color: var(--dtrm-ink);
	font-family: inherit;
	font-size: 15px;
}

.loginform input[type="email"]:focus,
.loginform input[type="password"]:focus {
	outline: 2px solid var(--dtrm-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.loginform__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--dtrm-muted-2);
	cursor: pointer;
}

.loginform__submit {
	justify-content: center;
	margin-top: 4px;
}

.loginform__lost {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	color: var(--dtrm-muted-2);
	text-decoration: underline;
}

.cookie {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 80;
	max-width: 420px;
	background: #fff;
	border: 1px solid var(--dtrm-line-strong);
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 24px 60px rgba(40, 20, 80, .28);
	animation: revealUp .5s var(--dtrm-ease-out) both;
}

.cookie__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.cookie__icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cookie__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dtrm-ink);
}

.cookie__text {
	font-size: 13.5px;
	color: var(--dtrm-muted-2);
	line-height: 1.6;
	margin-bottom: 18px;
}

.cookie__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cookie__btn {
	flex: 1;
	min-width: 130px;
}

.floating-cta {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--dtrm-yellow);
	border: 1px solid var(--dtrm-yellow-line);
	padding: 12px 18px;
	border-radius: 999px;
	box-shadow: 0 16px 40px rgba(27, 26, 34, .2);
	transition: transform .3s var(--dtrm-ease);
}

.floating-cta:hover {
	transform: translateY(-3px);
}

/*
 * Outside opening hours the pill still books appointments, but the "live" dot
 * must stop claiming someone is there — so it greys out and stops pulsing.
 */
.floating-cta.is-closed .dot-live {
	background: var(--dtrm-muted-3);
	animation: none;
	box-shadow: none;
}

.floating-cta span:last-child {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dtrm-ink);
}

/* ============================================================
   15. Responsive
   ============================================================ */

@media (min-width: 921px) {
	.mobile-nav {
		display: none;
	}
}

@media (max-width: 920px) {
	.nav {
		display: none;
	}

	.burger {
		display: flex;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.hero__img {
		height: 360px;
	}

	.hero__title {
		font-size: clamp(38px, 9vw, 62px);
	}

	.section-head h2,
	.packages__aside h2,
	.cta__content h2 {
		font-size: clamp(30px, 6.5vw, 50px);
	}

	.grid-map {
		grid-template-columns: 1fr;
	}

	.grid-packages {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.packages__aside {
		position: static;
	}

	.grid-services {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-reviews {
		grid-template-columns: 1fr;
	}

	.trust__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.cta__panel {
		padding: 72px 32px;
	}
}

@media (max-width: 560px) {
	:root {
		--dtrm-gutter: 18px;
	}

	.grid-services {
		grid-template-columns: 1fr;
	}

	.header-phone {
		display: none;
	}

	.hero {
		padding-top: 118px;
	}

	.card-package,
	.card-review,
	.infocard,
	.booking__frame {
		padding: 26px;
	}

	.card-package__head {
		flex-direction: column;
		gap: 10px;
	}

	.card-package__price {
		text-align: left;
	}

	.card-package__badge {
		position: static;
		display: inline-block;
		margin-bottom: 14px;
	}

	.card-package__includes {
		grid-template-columns: 1fr;
	}

	.cta__panel {
		padding: 56px 22px;
		border-radius: 30px;
	}

	.modal {
		padding: 14px;
	}

	.modal__head {
		padding: 20px 22px;
	}

	.modal__head h3 {
		font-size: 19px;
	}

	.modal__body {
		padding: 22px 22px 28px;
	}

	.cookie {
		left: 14px;
		right: 14px;
		bottom: 14px;
		max-width: none;
		padding: 22px;
	}

	.floating-cta {
		left: 14px;
		right: 14px;
		bottom: 14px;
		justify-content: center;
	}

	/* The pill and the banner share the bottom edge — the banner wins. */
	body.cookie-open .floating-cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	html.js [data-reveal] {
		opacity: 1;
	}

	.bubbles {
		display: none;
	}
}

/* ============================================================
   16. Extended sections
   ------------------------------------------------------------
   Stats strip, pain/why panels, process, pet card, team, before &
   after, booking and FAQ. These rules introduce no new tokens —
   they reuse the radii, shadows and easings defined above.
   ============================================================ */

/* --- Hero stats strip ------------------------------------- */

.statbar {
	position: relative;
	z-index: 1;
	max-width: var(--dtrm-maxw);
	margin: 56px auto 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--dtrm-line);
	border: 1px solid var(--dtrm-line);
	border-radius: 26px;
	overflow: hidden;
}

.statbar__item {
	background: #fff;
	padding: 26px 24px;
}

.statbar__value {
	font-size: 38px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--dtrm-primary);
	margin-bottom: 8px;
}

.statbar__label {
	font-size: 13px;
	line-height: 1.5;
	color: var(--dtrm-muted-3);
}

/* Secondary hero button, sized to sit next to .btn--lg. */
.btn--lg-ghost {
	font-size: 17px;
	padding: 16px 28px;
	border-radius: 14px;
}

/* --- Split sections (pain, petcard) ----------------------- */

.pain {
	padding: 110px var(--dtrm-gutter) 20px;
}

.petcard {
	padding: 100px var(--dtrm-gutter) 20px;
}

.split {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 56px;
	align-items: center;
}

.split__media {
	position: relative;
}

.split__glow {
	position: absolute;
	top: -20px;
	left: -20px;
	right: 20px;
	bottom: 20px;
	border-radius: 36px;
	background: linear-gradient(135deg, #0b7a74, #8b2fbf);
	opacity: .14;
}

.split__frame {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 30px 64px rgba(27, 26, 34, .2);
}

.split__frame img {
	width: 100%;
	height: 440px;
	object-fit: cover;
}

.split__copy h2 {
	font-size: 46px;
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--dtrm-ink);
	margin-bottom: 18px;
}

.split__lead {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--dtrm-muted-2);
	margin-bottom: 28px;
}

/* --- Objection list inside the pain section --------------- */

.qa {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.qa__item {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 20px;
	padding: 20px 22px;
	box-shadow: var(--dtrm-shadow-card);
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.qa__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(27, 26, 34, .14);
}

.qa__q {
	font-size: 16px;
	font-weight: 700;
	color: var(--dtrm-ink);
	margin-bottom: 6px;
}

.qa__a {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
}

/* --- "Γιατί μας εμπιστεύονται" gradient panel ------------- */

.why {
	padding: 90px var(--dtrm-gutter) 20px;
}

.why__panel {
	position: relative;
	overflow: hidden;
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
	border-radius: 40px;
	padding: 64px 48px;
}

.why__content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 48px;
	align-items: start;
}

.why__eyebrow {
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
	font-weight: 700;
	margin-bottom: 16px;
}

.why__head h2 {
	font-size: 40px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.why__list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 32px;
	margin: 0;
	padding: 0;
}

.why__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.why__tick {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}

.why__text {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

/* --- "Πώς δουλεύουμε" dark section ------------------------ */

.process {
	background: var(--dtrm-ink);
	padding: 100px var(--dtrm-gutter);
	margin-top: 90px;
}

.process .section-head h2 {
	color: #fff;
}

.process .eyebrow {
	color: #b9a9e4;
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.step {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 26px;
	padding: 28px 26px 30px;
	transition: transform .45s var(--dtrm-ease-out), background-color .45s var(--dtrm-ease-out);
}

.step:hover {
	transform: translateY(-7px);
	background: rgba(255, 255, 255, .08);
}

.step__num {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #9fd8bd;
	margin-bottom: 16px;
}

.step__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	margin-bottom: 10px;
}

.step__text {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

/* --- Pet record blocks ------------------------------------ */

.petcard__blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.petcard__block {
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 22px;
	padding: 22px;
	box-shadow: var(--dtrm-shadow-card);
}

.petcard__block-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--dtrm-ink);
	margin-bottom: 12px;
}

.petcard__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.petcard__items li {
	display: flex;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dtrm-muted-2);
}

/* --- Team ------------------------------------------------- */

.team {
	background: #fff;
	padding: 100px var(--dtrm-gutter);
	border-top: 1px solid var(--dtrm-line-soft);
	border-bottom: 1px solid var(--dtrm-line-soft);
}

.grid-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.card-member {
	background: var(--dtrm-surface-alt);
	border: 1px solid var(--dtrm-line);
	border-radius: 28px;
	padding: 32px;
	text-align: center;
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.card-member:hover {
	transform: translateY(-7px);
	box-shadow: 0 26px 52px rgba(27, 26, 34, .16);
}

.card-member__avatar {
	width: 68px;
	height: 68px;
	border-radius: 20px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
	font-weight: 700;
}

.card-member__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--dtrm-ink);
	margin-bottom: 4px;
}

.card-member__role {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--dtrm-primary);
	margin-bottom: 14px;
}

.card-member__bio {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dtrm-muted-2);
}

/* --- Before & after --------------------------------------- */

.ba {
	padding: 100px var(--dtrm-gutter) 20px;
}

.grid-ba {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.card-ba {
	margin: 0;
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--dtrm-shadow-card);
	transition: transform .45s var(--dtrm-ease-out), box-shadow .45s var(--dtrm-ease-out);
}

.card-ba:hover {
	transform: translateY(-9px);
	box-shadow: 0 28px 56px rgba(27, 26, 34, .2);
}

.card-ba__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--dtrm-line);
	height: 240px;
}

.card-ba__half {
	position: relative;
	overflow: hidden;
	background: var(--dtrm-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-ba__half img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-ba__half--before img {
	filter: grayscale(100%) brightness(.86);
}

.card-ba__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(27, 26, 34, .78);
	color: #fff;
}

.card-ba__tag--after {
	background: rgba(139, 47, 191, .92);
}

.card-ba__empty {
	padding: 0 14px;
	font-size: 11.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--dtrm-muted-4);
}

.card-ba__caption {
	padding: 18px 20px 22px;
}

.card-ba__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dtrm-ink);
	margin-bottom: 5px;
}


/* --- FAQ -------------------------------------------------- */

.faq {
	padding: 100px var(--dtrm-gutter) 20px;
}

.faq__list {
	max-width: 860px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--dtrm-line);
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--dtrm-shadow-card);
}

.faq__item + .faq__item {
	border-top: 1px solid var(--dtrm-line-soft);
}

.faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 26px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--dtrm-ink);
	transition: color .25s var(--dtrm-ease), background-color .25s var(--dtrm-ease);
}

.faq__item > summary:hover {
	color: var(--dtrm-primary);
	background: var(--dtrm-surface-alt);
}

.faq__item > summary svg {
	flex-shrink: 0;
	color: var(--dtrm-primary);
}

.faq__answer {
	padding: 0 26px 22px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--dtrm-muted-2);
	max-width: 70ch;
}

/* --- Map placeholder -------------------------------------- */

.map__placeholder {
	height: 100%;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 32px;
	text-align: center;
	background: var(--dtrm-surface-alt);
	color: var(--dtrm-muted-4);
	font-size: 14px;
	line-height: 1.6;
}

/* --- Responsive ------------------------------------------- */

@media (max-width: 920px) {
	.statbar {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 40px;
	}

	.split {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.split__frame img {
		height: 320px;
	}

	.split__copy h2,
	.why__head h2 {
		font-size: clamp(30px, 6.5vw, 44px);
	}

	.why__content {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.why__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.why__panel {
		padding: 48px 30px;
	}

	.steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.petcard__blocks {
		grid-template-columns: 1fr;
	}

	.grid-team {
		grid-template-columns: 1fr;
	}

	.grid-ba {
		grid-template-columns: repeat(2, 1fr);
	}

	.process {
		margin-top: 60px;
	}
}

@media (max-width: 560px) {
	.statbar {
		grid-template-columns: 1fr;
		border-radius: 22px;
	}

	.statbar__item {
		padding: 20px 22px;
	}

	.statbar__value {
		font-size: 32px;
	}

	.steps {
		grid-template-columns: 1fr;
	}

	.grid-ba {
		grid-template-columns: 1fr;
	}

	.why__panel {
		padding: 40px 22px;
		border-radius: 30px;
	}

	.qa__item,
	.petcard__block,
	.card-member {
		padding: 20px;
	}

	.faq__item > summary {
		padding: 18px 20px;
		font-size: 15px;
	}

	.faq__answer {
		padding: 0 20px 20px;
	}

	.btn--lg-ghost {
		width: 100%;
	}
}

/* --- Wordmark (used until a logo is uploaded) -------------- */

.wordmark {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--dtrm-ink);
	line-height: 1;
	white-space: nowrap;
}

.wordmark--footer {
	display: block;
	font-size: 30px;
	margin-bottom: 16px;
}

/*
 * Two-tone fallback used until the real logo is uploaded in the Customizer.
 * Both halves are text-safe brand colours, not the lighter logo originals.
 */
.wordmark__a {
	color: var(--dtrm-primary);
}

.wordmark__b {
	color: var(--dtrm-secondary);
}

/*
 * Two paths to the same place: .custom-logo comes from the Customizer, .site-logo
 * from a file dropped into assets/img/. The Dream Trim mark stacks the dog above
 * the lettering, so it is given the full height the 80px header allows rather
 * than being shrunk until the wordmark stops reading.
 *
 * When the header or footer is set to show the logo AND the title, the two sit
 * in a .brandlock and the image gives up some height, because the pair has to
 * fit the same 80px bar the logo had to itself.
 */
.site-header__logo .custom-logo,
.site-header__logo .site-logo,
.site-footer__brand .custom-logo,
.site-footer__brand .site-logo {
	height: 56px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

.site-footer__brand .custom-logo,
.site-footer__brand .site-logo {
	height: 68px;
	margin-bottom: 16px;
}

/* --- Logo + title lock-up ---------------------------------- */

.brandlock {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.brandlock--footer {
	gap: 14px;
	margin-bottom: 16px;
}

.brandlock .custom-logo,
.brandlock .site-logo {
	height: 40px;
	max-width: 120px;
	margin-bottom: 0;
}

.brandlock--footer .custom-logo,
.brandlock--footer .site-logo {
	height: 48px;
	max-width: 150px;
	margin-bottom: 0;
}

.brandlock .wordmark {
	font-size: 22px;
}

.brandlock--footer .wordmark--footer {
	display: inline-block;
	font-size: 26px;
	margin-bottom: 0;
}

/*
 * On a narrow header the pair would push the burger off the edge, so the words
 * step aside and the mark carries the brand on its own.
 */
@media (max-width: 620px) {
	.brandlock--header .wordmark {
		display: none;
	}
}

@media (max-width: 520px) {
	.site-header__logo .custom-logo,
	.site-header__logo .site-logo {
		height: 46px;
		max-width: 150px;
	}
}

/* Keeps the stats strip beneath the hero grid — .hero itself is a flex row. */
.hero__stack {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--dtrm-maxw);
	margin: 0 auto;
}

.hero__stack .hero__inner {
	margin: 0;
}

@media (max-width: 560px) {
	.wordmark {
		font-size: 21px;
	}
}