/*
 * Clickt design tokens — extracted verbatim from design-src/{shared,direction-2-airy,site-nav,about-page,service-page,services-page}.jsx.
 * Do not edit individual color or type values without re-extracting from those source files.
 */

:root {
	/* ---------- Color: cream ---------- */
	--clickt-cream-100: #fbf7ef; /* page background */
	--clickt-cream-200: #f1e8d4; /* trust bar / sand callout / about row bg */

	/* ---------- Color: navy ---------- */
	--clickt-navy-900: #0f1f3a; /* utility strip / dark footer */
	--clickt-navy-800: #14284a; /* primary navy — nav bg, dark sections */
	--clickt-navy-700: #1a2e52; /* H2 on cream */
	--clickt-navy-600: #223a62; /* body text default */

	/* ---------- Color: gold ---------- */
	--clickt-gold-500: #f0d060; /* primary accent (rules, eyebrows on navy, button bg) */
	/* Accessibility deviation from the extracted design source (see file header).
	 * The extracted #8a6f1e measured 4.49:1 on cream-100 and 3.94:1 on cream-200 —
	 * both under the 4.5:1 WCAG AA floor for the small uppercase text this token
	 * is used for. Scaled 0.90 down its own hue ramp, preserving the 138:111:30
	 * relationship, to clear AA on both cream surfaces: 5.32:1 and 4.66:1.
	 * Keep this value if the tokens are ever re-extracted. */
	--clickt-gold-700: #7c641b; /* eyebrows on cream (AA-corrected) */
	--clickt-gold-star: #d9b26a; /* default star color */

	/* ---------- Alpha overlays ---------- */
	--clickt-cream-55: rgba(251, 247, 239, 0.55);
	--clickt-cream-65: rgba(251, 247, 239, 0.65);
	--clickt-cream-72: rgba(251, 247, 239, 0.72);
	--clickt-cream-78: rgba(251, 247, 239, 0.78);
	--clickt-cream-82: rgba(251, 247, 239, 0.82);
	--clickt-cream-85: rgba(251, 247, 239, 0.85);

	--clickt-navy-08: rgba(20, 40, 74, 0.08);
	--clickt-navy-12: rgba(20, 40, 74, 0.12);
	--clickt-navy-18: rgba(20, 40, 74, 0.18);
	--clickt-navy-35: rgba(20, 40, 74, 0.35);
	--clickt-navy-60: rgba(20, 40, 74, 0.6);
	--clickt-navy-70: rgba(20, 40, 74, 0.7);
	--clickt-navy-78: rgba(20, 40, 74, 0.78);
	--clickt-navy-82: rgba(20, 40, 74, 0.82);

	--clickt-body-70: rgba(34, 58, 98, 0.7);
	--clickt-body-75: rgba(34, 58, 98, 0.75);
	--clickt-body-78: rgba(34, 58, 98, 0.78);
	--clickt-body-85: rgba(34, 58, 98, 0.85);

	--clickt-gold-18: rgba(240, 208, 96, 0.18);
	--clickt-gold-25: rgba(240, 208, 96, 0.25);
	--clickt-gold-50: rgba(240, 208, 96, 0.5);
	--clickt-gold-70: rgba(240, 208, 96, 0.7);
	--clickt-gold-85: rgba(240, 208, 96, 0.85);

	--clickt-shadow-gold: 0 8px 24px rgba(240, 208, 96, 0.18);
	--clickt-shadow-navy: 0 8px 24px rgba(20, 40, 74, 0.35);
	--clickt-shadow-drop: 0 18px 50px rgba(15, 31, 58, 0.25);

	--clickt-overlay-hero: linear-gradient(
		100deg,
		rgba(15, 31, 58, 0.82) 0%,
		rgba(20, 40, 74, 0.55) 55%,
		rgba(20, 40, 74, 0.35) 100%
	);
	--clickt-overlay-hero-strong: linear-gradient(
		100deg,
		rgba(15, 31, 58, 0.88) 0%,
		rgba(20, 40, 74, 0.65) 60%,
		rgba(20, 40, 74, 0.4) 100%
	);

	/* ---------- Typography ---------- */
	--clickt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--clickt-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	/* Cinzel is enqueued site-wide by the Elementor kit (see inc/assets.php, where it
	   is dropped on single posts only). Used for structural headings that must scan. */
	--clickt-font-heading: "Cinzel", "Cormorant Garamond", Georgia, serif;
	--clickt-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--clickt-fs-display-xxl: 92px;
	--clickt-fs-display-xl: 88px;
	--clickt-fs-display-l: 80px;
	--clickt-fs-numeric-xl: 72px;
	--clickt-fs-h1: 64px;
	--clickt-fs-h2: 56px;
	--clickt-fs-h2-sm: 52px;
	--clickt-fs-h3: 44px;
	--clickt-fs-h4: 30px;
	--clickt-fs-h5: 28px;
	--clickt-fs-h6: 26px;
	--clickt-fs-blockquote: 20px;
	--clickt-fs-lead: 18px;
	--clickt-fs-body-l: 17px;
	--clickt-fs-body: 16px;
	--clickt-fs-body-s: 15px;
	--clickt-fs-body-xs: 14px;
	--clickt-fs-dropdown: 13px;
	--clickt-fs-caption: 12px;
	--clickt-fs-eyebrow: 11px;
	--clickt-fs-tag: 10px;

	--clickt-lh-display: 0.95;
	--clickt-lh-display-2: 1.0;
	--clickt-lh-display-3: 1.05;
	--clickt-lh-h3: 1.1;
	--clickt-lh-blockquote: 1.55;
	--clickt-lh-body-tight: 1.6;
	--clickt-lh-body: 1.7;
	--clickt-lh-body-loose: 1.85;

	--clickt-ls-display-tight: -0.025em;
	--clickt-ls-display: -0.02em;
	--clickt-ls-display-soft: -0.015em;
	--clickt-ls-display-softer: -0.01em;
	--clickt-ls-caps-soft: 0.12em;
	--clickt-ls-caps: 0.18em;
	--clickt-ls-caps-nav: 0.22em;
	--clickt-ls-caps-eyebrow: 0.24em;
	--clickt-ls-caps-button: 0.26em;

	/* ---------- Spacing ---------- */
	--clickt-pad-y-l: 140px;
	--clickt-pad-y-m: 120px;
	--clickt-pad-y-s: 110px;
	--clickt-pad-x: 56px;
	--clickt-pad-x-lg: 64px;

	--clickt-maxw-grid: 1280px;
	--clickt-maxw-content: 1180px;
	--clickt-maxw-reviews: 1200px;
	--clickt-maxw-faq: 840px;
	--clickt-maxw-hero-text: 760px;
	--clickt-maxw-prose: 580px;

	/* ---------- Borders ---------- */
	--clickt-border-thin: 1px;
	--clickt-border-accent: 2px;
}

/* ---------- Universal reset for Clickt widgets ---------- */
[class^="clickt-"] *,
[class^="clickt-"] *::before,
[class^="clickt-"] *::after {
	box-sizing: border-box;
}

/* ---------- Responsive scale-down (rough) ---------- */
@media (max-width: 1024px) {
	:root {
		--clickt-fs-display-xxl: 64px;
		--clickt-fs-display-xl: 60px;
		--clickt-fs-display-l: 56px;
		--clickt-fs-h1: 48px;
		--clickt-fs-h2: 42px;
		--clickt-fs-h2-sm: 38px;
		--clickt-fs-h3: 32px;
		--clickt-pad-y-l: 96px;
		--clickt-pad-y-m: 88px;
		--clickt-pad-y-s: 80px;
		--clickt-pad-x: 32px;
		--clickt-pad-x-lg: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--clickt-fs-display-xxl: 44px;
		--clickt-fs-display-xl: 42px;
		--clickt-fs-display-l: 38px;
		--clickt-fs-h1: 34px;
		--clickt-fs-h2: 30px;
		--clickt-fs-h2-sm: 28px;
		--clickt-fs-h3: 26px;
		--clickt-pad-y-l: 64px;
		--clickt-pad-y-m: 56px;
		--clickt-pad-y-s: 52px;
		--clickt-pad-x: 22px;
		--clickt-pad-x-lg: 24px;
	}
}

/* =========================================================================
 * Interaction & accessibility polish (Clickt redesign pass)
 * Additive global rules only — no extracted color/type token values change.
 * Lives here because tokens.css is the single always-enqueued stylesheet.
 * ========================================================================= */

/* ---------- Smooth in-page scrolling (nav anchors #reviews / #visit, FAQ) ---------- */
html {
	scroll-behavior: smooth;
}

/* ---------- Tabular figures: prices, durations, counters, stats ---------- */
.clickt-tiers__num,
.clickt-tiers__min-label,
.clickt-pricing__price,
.clickt-stat__value,
.clickt-hero__counter,
.clickt-services__num,
.clickt-benefits__num,
.clickt-pillars__num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------- Headline balancing & paragraph orphan control ---------- */
[class^="clickt-"] h1,
[class^="clickt-"] h2,
[class^="clickt-"] h3 {
	text-wrap: balance;
}
[class^="clickt-"] p {
	text-wrap: pretty;
}

/* ---------- Keyboard focus ring (legible on cream, navy & gold surfaces) ---------- */
[class^="clickt-"] a:focus-visible,
[class^="clickt-"] button:focus-visible,
[class^="clickt-"] input:focus-visible,
[class^="clickt-"] textarea:focus-visible,
[class^="clickt-"] select:focus-visible,
a[class^="clickt-"]:focus-visible,
button[class^="clickt-"]:focus-visible {
	outline: 2px solid transparent; /* surfaces the ring in forced-colors mode */
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--clickt-navy-900),
		0 0 0 4px var(--clickt-gold-500);
	border-radius: 2px;
}

/* ---------- Button / CTA interaction states ---------- */
/* Base: smooth transition + subtle lift on hover, press on click — every CTA. */
.clickt-hero__cta,
.clickt-about-cta__cta,
.clickt-btn,
.clickt-site-header__cta,
.clickt-tiers__cta,
.clickt-visit__cta,
.clickt-pricing__cta,
.clickt-cta__btn,
.clickt-news__btn {
	transition:
		transform 0.16s var(--clickt-ease-out),
		box-shadow 0.2s ease,
		filter 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}
.clickt-hero__cta:hover,
.clickt-about-cta__cta:hover,
.clickt-btn:hover,
.clickt-site-header__cta:hover,
.clickt-tiers__cta:hover,
.clickt-visit__cta:hover,
.clickt-pricing__cta:hover,
.clickt-cta__btn:hover,
.clickt-news__btn:hover {
	transform: translateY(-2px);
}
.clickt-hero__cta:active,
.clickt-about-cta__cta:active,
.clickt-btn:active,
.clickt-site-header__cta:active,
.clickt-tiers__cta:active,
.clickt-visit__cta:active,
.clickt-pricing__cta:active,
.clickt-cta__btn:active,
.clickt-news__btn:active {
	transform: translateY(0) scale(0.97);
}

/* Gold-filled buttons: brighten + deepen the gold glow on hover. */
.clickt-hero__cta--primary:hover,
.clickt-about-cta__cta--primary:hover,
.clickt-btn--primary:hover,
.clickt-site-header__cta:hover,
.clickt-pricing__cta:hover,
.clickt-cta__btn:hover,
.clickt-news__btn:hover,
.clickt-tiers__card.is-featured .clickt-tiers__cta:hover {
	filter: brightness(1.04);
	box-shadow: 0 10px 30px rgba(240, 208, 96, 0.3);
}

/* Navy-filled button (Visit primary): brighten + soft navy lift. */
.clickt-visit__cta--primary:hover {
	filter: brightness(1.12);
	box-shadow: var(--clickt-shadow-navy);
}

/* Outline buttons: fill with navy on hover. */
.clickt-btn--outline:hover,
.clickt-tiers__cta:hover,
.clickt-visit__cta--ghost:hover {
	background: var(--clickt-navy-800);
	color: var(--clickt-cream-100);
	border-color: var(--clickt-navy-800);
}

/* Ghost / underline buttons: strengthen the gold underline on hover. */
.clickt-hero__cta--ghost:hover,
.clickt-about-cta__cta--ghost:hover,
.clickt-btn--ghost:hover {
	color: var(--clickt-gold-500);
	border-bottom-color: var(--clickt-gold-500);
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	[class^="clickt-"] *,
	[class^="clickt-"] *::before,
	[class^="clickt-"] *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.clickt-hero__cta:hover,
	.clickt-about-cta__cta:hover,
	.clickt-btn:hover,
	.clickt-site-header__cta:hover,
	.clickt-tiers__cta:hover,
	.clickt-visit__cta:hover,
	.clickt-pricing__cta:hover,
	.clickt-cta__btn:hover,
	.clickt-news__btn:hover {
		transform: none;
	}
}

/* =========================================================================
 * Design-engineering layer (Emil Kowalski principles): texture, on-scroll
 * reveals, cursor-lit cards. Additive; reduced-motion-safe and gated by the
 * `clickt-anim` <head> flag so nothing flashes or gets stuck hidden.
 * ========================================================================= */

:root {
	/* Strong custom easing — the built-in CSS curves are too weak to feel intentional. */
	--clickt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--clickt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Film grain: warms the flat cream, adds tactile depth ---------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='clickt-n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23clickt-n)'/%3E%3C/svg%3E");
	background-size: 120px 120px;
}

/* ---------- On-scroll reveal: staggered fade-up via interruptible transitions ----------
 * Elements hide only while `.clickt-anim` is on <html> (added in <head> before first
 * paint when motion is allowed). No flag = no hiding, so reduced-motion / no-JS visitors
 * see everything immediately. JS adds `.is-visible` as each element enters the viewport. */
.clickt-anim .clickt-secthd,
.clickt-anim .clickt-services__card,
.clickt-anim .clickt-tiers__card,
.clickt-anim .clickt-reviews__card,
.clickt-anim .clickt-benefits__item,
.clickt-anim .clickt-other__card,
.clickt-anim .clickt-pillars__row,
.clickt-anim .clickt-faq__item,
.clickt-anim .clickt-stat,
.clickt-anim .clickt-tiers__head,
.clickt-anim .clickt-benefits__head,
.clickt-anim .clickt-other__head,
.clickt-anim .clickt-quickfacts__main {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--clickt-ease-out), transform 0.6s var(--clickt-ease-out);
}
.clickt-anim .is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Cursor-lit product cards (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
	.clickt-services__card,
	.clickt-tiers__card,
	.clickt-other__card {
		position: relative;
	}
	.clickt-services__card::after,
	.clickt-tiers__card::after,
	.clickt-other__card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		opacity: 0;
		mix-blend-mode: soft-light;
		transition: opacity 0.3s ease;
		background: radial-gradient(
			circle 180px at var(--clickt-mx, 50%) var(--clickt-my, 50%),
			var(--clickt-gold-50),
			transparent 60%
		);
	}
	.clickt-services__card:hover::after,
	.clickt-tiers__card:hover::after,
	.clickt-other__card:hover::after {
		opacity: 1;
	}
}

/* =========================================================================
 * Elementor global-kit link override.
 * The site's Elementor kit forces every <a> to "Josefin Sans" + a blue link
 * color (the color uses !important), which leaks into the Clickt widgets' nav
 * links, CTAs and the top-bar phone. Restore the intended typography + colors.
 * Scoped to Clickt classes only.
 * ========================================================================= */

/* All Clickt-widget link text uses the body font (children keep their own font). */
[class^="clickt-"] a {
	font-family: var(--clickt-font-body) !important;
}

/* Caps on button / nav labels (the kit forces capitalize). */
.clickt-site-header__link,
.clickt-site-header__cta,
.clickt-site-header__menu-all,
.clickt-hero__cta,
.clickt-about-cta__cta,
.clickt-btn,
.clickt-tiers__cta,
.clickt-visit__cta,
.clickt-pricing__cta,
.clickt-cta__btn {
	text-transform: uppercase !important;
}

/* Header nav links — also unifies the dropdown <button> with the <a> links. */
.clickt-site-header__link {
	color: var(--clickt-cream-100) !important;
	letter-spacing: var(--clickt-ls-caps-nav) !important;
	font-size: var(--clickt-fs-caption) !important;
}
.clickt-site-header__link:hover,
.clickt-site-header__link.is-active,
.clickt-site-header__dropdown.is-active .clickt-site-header__link {
	color: var(--clickt-gold-500) !important;
}

/* Restore CTA / link text colors (the kit forces them blue). */
.clickt-site-header__cta,
.clickt-hero__cta--primary,
.clickt-about-cta__cta--primary,
.clickt-btn--primary,
.clickt-btn--outline,
.clickt-tiers__cta,
.clickt-pricing__cta,
.clickt-cta__btn,
.clickt-quickfacts__book,
.clickt-site-header__menu-item {
	color: var(--clickt-navy-800) !important;
}
.clickt-hero__cta--ghost,
.clickt-about-cta__cta--ghost,
.clickt-btn--ghost,
.clickt-utility-strip__phone,
.clickt-dark-footer__phone,
.clickt-service-hero__back-link {
	color: var(--clickt-gold-500) !important;
}
.clickt-site-header__menu-all { color: var(--clickt-gold-700) !important; }
.clickt-visit__cta--primary   { color: var(--clickt-cream-100) !important; }
.clickt-visit__cta--ghost     { color: var(--clickt-navy-600) !important; }

/* Outline / ghost buttons that fill on hover keep cream text on the navy fill. */
.clickt-btn--outline:hover,
.clickt-visit__cta--ghost:hover,
.clickt-tiers__card:not(.is-featured) .clickt-tiers__cta:hover {
	color: var(--clickt-cream-100) !important;
}

/* Content-wrapping link boxes + any unclassed link inherit their text color. */
.clickt-services__card,
.clickt-other__card,
.clickt-dark-footer__home,
[class^="clickt-"] a:not([class]):not([style*="background"]) {
	color: inherit !important;
}

/* ---------- Business hours (dynamic open/closed + weekly list) ---------- */
.clickt-hours--weekly { display: block; }
.clickt-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 28px;
}
.clickt-hours__row.is-today {
	font-weight: 700;
	color: var(--clickt-gold-700);
}
.clickt-hours__status {
	display: block;
	margin-top: 12px;
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-soft);
	text-transform: uppercase;
	color: var(--clickt-gold-700);
}

/* ---------- Service hero: slow zoom + orchestrated first-load entrance ---------- */
@keyframes clickt-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes clickt-hero-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.clickt-service-hero__bg { animation: clickt-hero-zoom 16s ease-out forwards; }
.clickt-anim .clickt-service-hero__content > * { opacity: 0; animation: clickt-hero-rise 0.9s var(--clickt-ease-out) forwards; }
.clickt-anim .clickt-service-hero__back    { animation-delay: 0.05s; }
.clickt-anim .clickt-service-hero__heading { animation-delay: 0.15s; }
.clickt-anim .clickt-service-hero__rule    { animation-delay: 0.30s; }
.clickt-anim .clickt-service-hero__blurb   { animation-delay: 0.40s; }
.clickt-anim .clickt-service-hero__meta    { animation-delay: 0.50s; }

/* ---------- Elementor kit link colour ----------
 * The Elementor kit styles every link with `.elementor-kit-47 a { color: accent }`
 * (specificity 0,1,1), which outranks a single-class widget rule. Since the accent
 * became navy, links that relied on such a rule went navy-on-navy. Restate their
 * colours one step stronger, without naming the kit. */
body a.clickt-visit__map-cta { color: var(--clickt-gold-500); }
body a.clickt-reviews-attrib__link { color: inherit; }