:root {
	--background: oklch(1 0 0);
	--foreground: oklch(0.24 0.045 258);
	--primary: oklch(0.56 0.152 252);
	--navy: oklch(0.28 0.062 258);
	--gradient-hero: linear-gradient(
		120deg,
		color-mix(in oklab, var(--navy) 78%, transparent),
		color-mix(in oklab, var(--navy) 22%, transparent) 62%,
		transparent
	);
	--gradient-navy: linear-gradient(135deg, var(--navy), color-mix(in oklab, var(--primary) 55%, var(--navy)));
	--shadow-soft: 0 1px 2px oklch(0.24 0.045 258 / 0.06), 0 12px 32px -18px oklch(0.24 0.045 258 / 0.3);
	--shadow-lift: 0 24px 60px -30px oklch(0.24 0.045 258 / 0.45);
}

* {
	border-color: var(--border, oklch(0.912 0.012 250));
}

body {
	font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	letter-spacing: -0.02em;
}

/* ---------- Bold, fluid display type scale ----------
   Overrides whatever discrete Tailwind text-size / leading utilities are
   present on a heading with one continuous fluid scale per level, so every
   h1/h2/h3 site-wide reads bigger and bolder without editing 30+ templates. */
h1 {
	font-size: clamp(2.75rem, 1.7vw + 2.3rem, 4.625rem) !important; /* 44px -> 74px */
	line-height: 1.04 !important;
	letter-spacing: -0.03em;
}
h2 {
	font-size: clamp(2rem, 1.6vw + 1.5rem, 3.25rem) !important; /* 32px -> 52px */
	line-height: 1.08 !important;
	letter-spacing: -0.025em;
}
h3 {
	font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.625rem) !important; /* 20px -> 26px */
	line-height: 1.2 !important;
}

.eyebrow {
	font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--primary);
}

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-lift { box-shadow: var(--shadow-lift); }
.bg-gradient-navy { background-image: var(--gradient-navy); }
.bg-gradient-hero { background-image: var(--gradient-hero); }

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 28s linear infinite; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

dialog {
	border: none;
	padding: 0;
	background: transparent;
}
dialog::backdrop {
	background: oklch(0.24 0.045 258 / 0.5);
}

/* Strong shadow for text placed directly over a photo, where a semi-transparent
   scrim alone isn't reliable across the image's full range of tones. */
.text-shadow-hero {
	text-shadow: 0 2px 10px oklch(0.1 0.02 258 / 0.65), 0 1px 3px oklch(0.1 0.02 258 / 0.55);
}

/* ---------- Motion & interaction ---------- */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

.shadow-soft, .shadow-lift {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.shadow-soft:hover, .shadow-lift:hover {
	transform: translateY(-6px) scale(1.012);
	box-shadow: var(--shadow-lift);
}

.inline-flex.rounded-md {
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.inline-flex.rounded-md:hover {
	transform: translateY(-2px) scale(1.02);
	filter: brightness(1.04);
}
.inline-flex.rounded-md:active {
	transform: translateY(0) scale(0.98);
	filter: none;
}

/* Animated underline for inline text links (anything using Tailwind's
   hover:underline utility) — grows from the left instead of snapping on. */
a[class*="hover:underline"] {
	position: relative;
	text-decoration: none !important;
}
a[class*="hover:underline"]::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
a[class*="hover:underline"]:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Arrow icons inside links nudge forward on hover (e.g. "Read more →"). */
a svg {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
a:hover svg {
	transform: translateX(3px);
}

/* Card links (.group wrapper) get a touch more lift than plain cards. */
a.group:hover {
	transform: translateY(-6px);
}
a.group {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: block;
}

img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.overflow-hidden:hover > img,
a:hover > img {
	transform: scale(1.04);
}

header {
	transition: box-shadow 0.3s ease;
}
header.is-scrolled {
	box-shadow: 0 1px 2px oklch(0.24 0.045 258 / 0.05), 0 10px 30px -18px oklch(0.24 0.045 258 / 0.35);
}

/* ---------- Page transitions ----------
   The .js-anim class is added synchronously in <head> (see header.php), so
   this opacity-0 starting state only ever applies when JS is guaranteed to
   run and clear it — a no-JS visitor always sees the page at full opacity. */
@media (prefers-reduced-motion: no-preference) {
	html.js-anim main.flex-1 {
		opacity: 0;
		transition: opacity 0.32s ease;
	}
	html.js-anim.page-ready main.flex-1 {
		opacity: 1;
	}
	html.js-anim.page-leaving main.flex-1 {
		opacity: 0;
		transition-duration: 0.2s;
	}
}

/* ---------- Decorative backgrounds (image-free hero/section treatments) ---------- */

.bg-dot-grid {
	background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
	background-size: 26px 26px;
}

.bg-radial-glow {
	background-image:
		radial-gradient(60% 60% at 15% 10%, color-mix(in oklab, var(--primary) 35%, transparent), transparent 60%),
		radial-gradient(50% 50% at 90% 90%, color-mix(in oklab, var(--primary) 25%, transparent), transparent 65%);
}

/* ---------- Timeline (Our Story) ---------- */

.timeline {
	position: relative;
}
.timeline::before {
	content: '';
	position: absolute;
	left: 1.15rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--primary), color-mix(in oklab, var(--primary) 15%, transparent));
}
.timeline-dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-foreground, #fff);
	box-shadow: 0 0 0 6px var(--background, #fff);
	flex-shrink: 0;
}

/* ---------- Animated counters ---------- */

[data-counter-to] {
	font-variant-numeric: tabular-nums;
}

/* ---------- Article content (expansion pages) ---------- */

.prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--foreground);
}
.prose p {
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	color: var(--muted-foreground, var(--foreground));
}
.prose p:first-child {
	margin-top: 0;
}
.prose h2 {
	margin-top: 2.25em;
	margin-bottom: 0.75em;
	font-size: 1.375rem;
	font-weight: 600;
}
.prose h2:first-child {
	margin-top: 0;
}
.prose ul, .prose ol {
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	padding-left: 1.5em;
	color: var(--muted-foreground, var(--foreground));
}
.prose li {
	margin-top: 0.4em;
}
.prose a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.prose a:hover {
	text-decoration-thickness: 2px;
}
.prose strong {
	color: var(--foreground);
	font-weight: 600;
}

/* ---------- Contact Form 7 ---------- */

.wpcf7 form label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
}
.wpcf7 .cf7-grid-2 {
	display: grid;
	gap: 1rem;
}
@media (min-width: 640px) {
	.wpcf7 .cf7-grid-2 { grid-template-columns: 1fr 1fr; }
}
.wpcf7 .cf7-field { margin-bottom: 1.25rem; }
.wpcf7 .cf7-field:last-child { margin-bottom: 0; }
.wpcf7 .cf7-inline {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 640px) {
	.wpcf7 .cf7-inline { flex-direction: row; }
}
.wpcf7 .cf7-inline input[type="email"] { flex: 1; }
.wpcf7 .cf7-inline input[type="submit"] { width: auto; padding: 0 1.5rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	height: 2.5rem;
	border-radius: 0.375rem;
	border: 1px solid oklch(0.912 0.012 250);
	background: oklch(1 0 0);
	padding: 0 0.75rem;
	font-family: inherit;
	font-size: 0.875rem;
	color: oklch(0.24 0.045 258);
}
.wpcf7 textarea {
	height: auto;
	min-height: 8rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid oklch(0.56 0.152 252 / 0.4);
	outline-offset: 1px;
}
.wpcf7 .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0 0.75rem 0.5rem 0;
}
.wpcf7 .wpcf7-list-item-label {
	margin-left: 0.4rem;
	font-size: 0.875rem;
}
.wpcf7 input[type="submit"] {
	display: inline-flex;
	width: 100%;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0.375rem;
	background: oklch(0.56 0.152 252);
	color: oklch(0.99 0.005 250);
	font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.wpcf7 input[type="submit"]:hover {
	background: color-mix(in oklab, oklch(0.56 0.152 252) 90%, black);
	transform: translateY(-2px);
}
.wpcf7 input[type="submit"]:disabled {
	cursor: default;
	opacity: 0.6;
	transform: none;
}
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8rem;
	color: oklch(0.577 0.245 27.325);
}
.wpcf7-response-output {
	margin-top: 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid oklch(0.56 0.152 252 / 0.3);
	background: oklch(0.945 0.025 245);
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: oklch(0.32 0.07 254);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
	border-color: oklch(0.577 0.245 27.325 / 0.35);
	background: oklch(0.577 0.245 27.325 / 0.08);
	color: oklch(0.577 0.245 27.325);
}