/* ==========================================================================
   Zee Consultants theme styles
   Sections: 1 tokens · 2 reset · 3 typography · 4 buttons · 5 layout
             6 topbar/header/nav · 7 hero + forms · 8 sections & cards
             9 marquee/slider/counters · 10 footer · 11 blog/single
             12 utilities · 13 responsive
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
	--zee-primary: #4838E0;
	--zee-primary-rgb: 72, 56, 224;
	--zee-secondary: #7B6BE8;
	--zee-secondary-rgb: 123, 107, 232;
	--zee-accent: #0040E0;
	--zee-heading: #101010;
	--zee-body: #5B5B66;
	--zee-gradient: linear-gradient(90deg, #4838E0 0%, #7B6BE8 100%);

	--zee-white: #ffffff;
	/* Cool paper, not warm grey: the section ground should read as document
	   stock next to the indigo, not as a neutral card kit. */
	--zee-light: #F5F5F8;
	--zee-lighter: #ECECF2;
	--zee-border: #DEDEE7;
	--zee-rule: #E4E4EC;        /* hairline for route rails and dividers */
	--zee-dark: #121214;
	--zee-footer-bg: #14122c;   /* deep indigo-navy, tied to --zee-primary rather than a neutral grey/black */

	/* Ink tiers — one heading colour was doing four jobs. */
	--zee-ink: var(--zee-heading);   /* follows the Customizer heading colour */
	--zee-ink-70: #46464F;
	--zee-ink-50: #6E6E7A;
	--zee-ink-35: #9A9AA6;

	/* Radius tiers carry hierarchy: controls are tight, cards are soft,
	   feature panels are softer still. Not one radius on everything. */
	--zee-radius: 6px;
	--zee-radius-lg: 14px;
	--zee-radius-xl: 22px;
	--zee-radius-pill: 500px;

	/* Elevation tiers. Tier 1 sits on the page, tier 2 lifts on intent,
	   tier 3 is reserved for things that float above it (menus, the widget). */
	--zee-shadow-sm: 0 1px 2px rgba(16, 16, 32, .04), 0 2px 8px rgba(16, 16, 32, .04);
	--zee-shadow: 0 2px 4px rgba(16, 16, 32, .04), 0 14px 32px rgba(16, 16, 32, .07);
	--zee-shadow-lg: 0 4px 8px rgba(16, 16, 32, .05), 0 28px 64px rgba(16, 16, 32, .13);
	--zee-shadow-indigo: 0 14px 36px rgba(var(--zee-primary-rgb), .22);

	--zee-container: 1400px;
	--zee-gap: 28px;
	--zee-section-y: 88px;

	--zee-font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--zee-font-display: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Motion tokens. Durations and easings are named and reused rather than
	   re-typed per component; the reduced-motion block below collapses the
	   whole scale in one place. */
	--zee-dur-1: 90ms;    /* state flips: checkbox, toggle, tap feedback */
	--zee-dur-2: 160ms;   /* small transitions: chips, tooltips, hover */
	--zee-dur-3: 240ms;   /* default: dropdowns, focus, card intent */
	--zee-dur-4: 340ms;   /* panels, drawers, accordions */
	--zee-dur-5: 520ms;   /* the hero moment, and nothing else */

	--zee-ease: cubic-bezier(.2, 0, 0, 1);          /* standard, state to state */
	--zee-ease-out: cubic-bezier(.23, 1, .32, 1);   /* entering the screen: strong, instant response */
	--zee-ease-in: cubic-bezier(.3, 0, 1, .3);      /* leaving the screen */
	--zee-ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* tactile, used sparingly */

	--zee-transition: var(--zee-dur-3) var(--zee-ease);

	--zee-header-h: 76px;
}

/* One place to collapse the whole motion scale. Opacity fades survive;
   travel, scale and rotation do not. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--zee-dur-1: 1ms;
		--zee-dur-2: 1ms;
		--zee-dur-3: 1ms;
		--zee-dur-4: 1ms;
		--zee-dur-5: 1ms;
	}
}

/* 2. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	color-scheme: light;
}

body {
	margin: 0;
	font-family: var(--zee-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--zee-body);
	background: var(--zee-white);
	overflow-x: hidden;
	/* Kills the 300ms tap delay and the grey flash on touch without
	   removing any real affordance. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(var(--zee-primary-rgb), .12);
	text-rendering: optimizeLegibility;
}

/* Anything a hash link can land on must clear the sticky header. */
:target,
h1[id], h2[id], h3[id], h4[id],
.zee-section[id] { scroll-margin-top: calc(var(--zee-header-h) + 24px); }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--zee-primary); text-decoration: none; transition: color var(--zee-transition); }
a:hover { color: var(--zee-secondary); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; cursor: pointer; }

:focus-visible {
	outline: 3px solid rgba(var(--zee-primary-rgb), .5);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.zee-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--zee-primary);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--zee-radius) 0;
}
.zee-skip:focus { left: 0; color: #fff; }

/* 3. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--zee-font-display);
	color: var(--zee-heading);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	/* Even last lines instead of a single orphaned word. */
	text-wrap: balance;
}
/* Optical tracking: tight only where the type is genuinely large. Uniform
   negative tracking at every step is what makes display type feel cramped. */
h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.9rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); letter-spacing: -.018em; }
h4 { font-size: 1.2rem; letter-spacing: -.012em; }
h5, h6 { letter-spacing: -.005em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Every figure the site asks you to compare — stats, counters, prices, years —
   uses lining tabular digits so columns line up and counters stop jittering. */
.zee-counter__num,
.zee-dest__stat-num,
.zee-stat__num,
.zee-fact__num,
[data-count],
time { font-variant-numeric: tabular-nums lining-nums; }

strong { color: var(--zee-heading); font-weight: 600; }

blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 3px solid var(--zee-primary);
	font-style: italic;
}

/* 4. Buttons ------------------------------------------------------------- */
.zee-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--zee-radius-pill);
	font-family: var(--zee-font-display);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
	white-space: nowrap;
}

.zee-btn--primary {
	background-image: none;
	background-color: var(--zee-primary);
	color: #fff;
	box-shadow: 0 8px 22px rgba(var(--zee-primary-rgb), .28);
}
.zee-btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(var(--zee-primary-rgb), .38);
}

.zee-btn--outline {
	border-color: var(--zee-primary);
	color: var(--zee-primary);
	background: transparent;
}
.zee-btn--outline:hover { background: var(--zee-primary); color: #fff; }

.zee-btn--ghost {
	background: var(--zee-lighter);
	color: var(--zee-heading);
}
.zee-btn--ghost:hover { background: var(--zee-border); color: var(--zee-heading); }

.zee-btn--accent { background: var(--zee-heading); color: #fff; }
.zee-btn--accent:hover { background: var(--zee-primary); color: #fff; }

.zee-btn--lg { padding: 16px 34px; font-size: 1rem; }
.zee-btn--sm { padding: 9px 18px; font-size: .82rem; }
.zee-btn--block { display: flex; width: 100%; }

.zee-link-arrow { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.zee-link-arrow::after { content: "\2192"; transition: transform var(--zee-transition); }
.zee-link-arrow:hover::after { transform: translateX(4px); }

/* 5. Layout -------------------------------------------------------------- */
.zee-container {
	width: 100%;
	max-width: min(var(--zee-container), 100%);
	margin: 0 auto;
	padding: 0 20px;
}

.zee-narrow { max-width: calc(var(--zee-text-w, 1040px) + 40px); }

.zee-section { padding: var(--zee-section-y) 0; }
.zee-section--light { background: var(--zee-light); }

.zee-section-head { margin-bottom: 46px; }
.zee-section-head--center { text-align: center; max-width: var(--zee-text-w, 1040px); margin-left: auto; margin-right: auto; }
.zee-section-title { margin-bottom: 14px; }
.zee-section-sub { font-size: 1.02rem; }
.zee-section-cta { margin-top: 44px; text-align: center; }

.zee-grid { display: grid; gap: var(--zee-gap); }
.zee-grid--2 { grid-template-columns: repeat(2, 1fr); }
.zee-grid--3 { grid-template-columns: repeat(3, 1fr); }
.zee-grid--4 { grid-template-columns: repeat(4, 1fr); }

.zee-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 46px;
	align-items: start;
}
.zee-layout--reverse { grid-template-columns: minmax(0, 1fr) 380px; }
body.zee-no-sidebar .zee-layout:not(.zee-layout--sticky):not(.zee-layout--reverse) {
	grid-template-columns: minmax(0, 1fr);
}
.zee-sticky-form { position: sticky; top: calc(var(--zee-header-h) + 20px); }

/* 6. Top bar, header, navigation ---------------------------------------- */
.zee-topbar {
	background: var(--zee-dark);
	color: rgba(255, 255, 255, .78);
	font-size: .82rem;
}
.zee-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	flex-wrap: wrap;
}
.zee-topbar__contact { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.zee-topbar__link { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: 7px; }
.zee-topbar__link:hover { color: #fff; }
.zee-ico { opacity: .8; }

.zee-socials { display: flex; align-items: center; gap: 8px; }
.zee-social {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-social:hover { background: var(--zee-primary); color: #fff; transform: translateY(-2px); }
.zee-socials--footer .zee-social { background: rgba(255, 255, 255, .12); }

.zee-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--zee-border);
	transition: box-shadow var(--zee-transition);
}
.zee-header.is-stuck { box-shadow: var(--zee-shadow); }

.zee-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--zee-header-h);
}
.zee-header__brand img { max-height: var(--zee-logo-h, 52px); width: auto; height: auto; }
.zee-logo-text { display: block; line-height: 1.05; }
.zee-logo-text__name {
	display: block;
	font-family: var(--zee-font-display);
	font-size: 1.3rem;
	font-weight: 900;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--zee-heading);
	white-space: nowrap;
}
.zee-logo-text__sub {
	display: block;
	margin-top: 3px;
	font-family: var(--zee-font-display);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--zee-primary);
	white-space: nowrap;
}

.zee-header__nav { margin-left: auto; }
.zee-header__actions { display: flex; align-items: center; gap: 10px; }
.zee-search-open { padding: 11px 15px; }

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

.zee-nav-item { position: relative; }

.zee-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	color: var(--zee-heading);
	font-family: var(--zee-font-display);
	font-size: .93rem;
	font-weight: 600;
	border-radius: var(--zee-radius);
}
.zee-nav-link:hover,
.zee-nav-item.current-menu-item > .zee-nav-link,
.zee-nav-item.current-menu-ancestor > .zee-nav-link { color: var(--zee-primary); }

.zee-caret {
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--zee-transition);
	opacity: .6;
}

.zee-submenu-toggle { display: none; }

/* Dropdown */
.zee-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	box-shadow: var(--zee-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
	z-index: 210;
}
.zee-dropdown--sub { top: -12px; left: 100%; }

.zee-nav-item:hover > .zee-dropdown,
.zee-nav-item:focus-within > .zee-dropdown,
.zee-subnav-item:hover > .zee-dropdown,
.zee-subnav-item:focus-within > .zee-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.zee-subnav-link {
	display: block;
	padding: 9px 14px;
	border-radius: var(--zee-radius);
	color: var(--zee-heading);
	font-size: .88rem;
	font-weight: 500;
}
.zee-subnav-link:hover { background: var(--zee-lighter); color: var(--zee-primary); }

/* Mega panel */
/* Anchored to .zee-header (sticky, therefore a containing block) rather than
   the viewport, so it always sits flush under the bar at any scroll position. */
.zee-nav-item.zee-is-mega { position: static; }

.zee-mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 34px 0 40px;
	background: #fff;
	border-top: 1px solid var(--zee-border);
	box-shadow: var(--zee-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
	z-index: 205;
}
.zee-is-mega:hover > .zee-mega-panel,
.zee-is-mega:focus-within > .zee-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zee-mega-grid { display: grid; gap: 6px 34px; }
.zee-mega-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.zee-mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.zee-mega-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.zee-mega-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.zee-mega-grid > .zee-subnav-item > .zee-subnav-link { font-weight: 600; }
.zee-mega-grid .zee-dropdown {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	padding: 4px 0 12px;
	min-width: 0;
}
.zee-mega-grid .zee-dropdown .zee-subnav-link { font-weight: 500; color: var(--zee-body); }

/* Burger + mobile drawer */
.zee-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: var(--zee-lighter);
	border: 0;
	border-radius: var(--zee-radius);
}
.zee-burger span { width: 20px; height: 2px; background: var(--zee-heading); border-radius: 2px; }

.zee-mobile-menu {
	position: fixed;
	top: 0; right: 0;
	width: min(380px, 88vw);
	height: 100%;
	background: #fff;
	z-index: 400;
	transform: translateX(100%);
	transition: transform var(--zee-transition);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
/* Must be display:none while closed, or its links stay keyboard-focusable and
   readable by assistive tech behind the closed drawer. The open() handler clears
   the attribute and forces a reflow before adding .is-open, so the slide-in
   transition still runs. */
.zee-mobile-menu[hidden] { display: none; }
.zee-mobile-menu.is-open { transform: translateX(0); }
.zee-mobile-menu__head .zee-logo-text__name { font-size: 1.1rem; }
.zee-mobile-menu__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--zee-border);
}
.zee-mobile-menu__close { background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--zee-heading); }
.zee-mobile-menu__body { padding: 20px; }

.zee-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 27, 42, .5);
	z-index: 300;
	opacity: 0;
	transition: opacity var(--zee-transition);
}
.zee-overlay[hidden] { display: none; }
.zee-overlay.is-visible { opacity: 1; }

/* 7. Hero and forms ------------------------------------------------------ */
.zee-hero { position: relative; padding: 70px 0 56px; overflow: hidden; }
.zee-hero__bg {
	position: absolute;
	inset: 0;
	/* Decorative only (aria-hidden). Never hit-testable, so it cannot swallow
	   clicks if the stacking order is ever changed. */
	pointer-events: none;
	background:
		radial-gradient(60% 80% at 15% 20%, rgba(var(--zee-primary-rgb), .13) 0%, transparent 60%),
		radial-gradient(55% 70% at 85% 15%, rgba(var(--zee-secondary-rgb), .13) 0%, transparent 60%),
		linear-gradient(180deg, #fff 0%, var(--zee-light) 100%);
}
.zee-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 54px;
	align-items: center;
}
.zee-hero__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var(--zee-primary);
	font-family: var(--zee-font-display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.zee-hero__title { margin-bottom: 18px; }
.zee-hero__proof {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--zee-heading);
}
.zee-hero__proof-mark {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--zee-primary);
	color: #fff;
	font-size: .72rem;
	flex: none;
}
.zee-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.zee-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.zee-hero__chips a {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-pill);
	background: #fff;
	color: var(--zee-heading);
	font-size: .82rem;
	font-weight: 500;
}
.zee-hero__chips a:hover { border-color: var(--zee-primary); color: var(--zee-primary); }

.zee-stars { display: inline-flex; gap: 1px; }
.zee-star { color: var(--zee-border); font-size: 1rem; }
.zee-star.is-on { color: var(--zee-accent); }

/* Forms */
.zee-form,
.zee-card--form {
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	padding: 28px;
	box-shadow: var(--zee-shadow-lg);
}
.zee-card--form .zee-form { border: 0; padding: 0; box-shadow: none; }

.zee-form__title { margin-bottom: 6px; }
.zee-form__subtitle { font-size: .88rem; margin-bottom: 20px; }

.zee-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.zee-form--compact .zee-form__grid { grid-template-columns: 1fr; }
.zee-form__field--wide { grid-column: 1 / -1; }

.zee-form__field label {
	display: block;
	margin-bottom: 6px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--zee-heading);
}
.zee-req { color: #d33; }

.zee-form input[type="text"],
.zee-form input[type="email"],
.zee-form input[type="tel"],
.zee-form select,
.zee-form textarea,
.zee-search input[type="search"],
.zee-subscribe input[type="email"],
.zee-comments input[type="text"],
.zee-comments input[type="email"],
.zee-comments input[type="url"],
.zee-comments textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius);
	background: #fff;
	font-family: inherit;
	font-size: .9rem;
	color: var(--zee-heading);
	transition: border-color var(--zee-transition), box-shadow var(--zee-transition);
}
.zee-form input:focus,
.zee-form select:focus,
.zee-form textarea:focus {
	outline: 0;
	border-color: var(--zee-primary);
	box-shadow: 0 0 0 3px rgba(var(--zee-primary-rgb), .13);
}
.zee-form textarea { resize: vertical; }

.zee-form__consent { margin: 18px 0 6px; font-size: .8rem; }
.zee-form__consent label { display: flex; gap: 10px; align-items: flex-start; }
.zee-form__consent input { margin-top: 4px; flex: none; }

.zee-form__submit { margin-top: 14px; width: 100%; }
.zee-form__submit[disabled] { opacity: .6; cursor: progress; }

.zee-form__status,
.zee-subscribe__status { margin-top: 12px; font-size: .85rem; font-weight: 500; }
.zee-form__status.is-ok,
.zee-subscribe__status.is-ok { color: #1a7f47; }
.zee-form__status.is-error,
.zee-subscribe__status.is-error { color: #c02626; }

.zee-hp { position: absolute; left: -9999px; }

.zee-search { display: flex; gap: 10px; }

/* 8. Sections and cards -------------------------------------------------- */
.zee-thumb-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	color: #fff;
	font-family: var(--zee-font-display);
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -.02em;
	/* Hue comes from the item's title, so a long archive is varied rather than
	   one tile repeated a thousand times. Saturation and lightness are fixed so
	   every tile still reads as part of the same family. */
	background:
		linear-gradient(135deg,
			hsl(var(--zee-ph-hue, 250) 62% 46%) 0%,
			hsl(calc(var(--zee-ph-hue, 250) + 26) 58% 58%) 100%);
}
/* A faint monogram behind the initials, so the tile has some texture. */
.zee-thumb-placeholder::before {
	content: "";
	position: absolute;
	inset: -30% -30% auto auto;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
}
.zee-thumb-placeholder > span { position: relative; }

/* Destination cards ---------------------------------------------------- */
.zee-dest {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	box-shadow: var(--zee-shadow-sm);
	transition: transform var(--zee-transition), box-shadow var(--zee-transition), border-color var(--zee-transition);
}
.zee-dest:hover,
.zee-dest:focus-within { transform: translateY(-5px); box-shadow: var(--zee-shadow-lg); border-color: transparent; }

.zee-dest__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--zee-lighter);
	color: #fff;
}
.zee-dest__media img,
.zee-dest__media .zee-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.zee-dest:hover .zee-dest__media img,
.zee-dest:hover .zee-dest__media .zee-thumb-placeholder { transform: scale(1.05); }
.zee-dest__media .zee-thumb-placeholder > span { opacity: .35; }

/* legibility gradient behind the country name */
.zee-dest__shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 16, .12) 0%, rgba(16, 16, 16, 0) 35%, rgba(16, 16, 16, .58) 100%);
	pointer-events: none;
}
.zee-dest__pill {
	position: absolute; top: 16px; left: 16px;
	padding: 6px 13px;
	border-radius: var(--zee-radius-pill);
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--zee-primary);
	font-family: var(--zee-font-display);
	font-size: .78rem;
	font-weight: 700;
}
.zee-dest__flag {
	position: absolute; top: 16px; right: 16px;
	display: grid; place-items: center;
	padding: 4px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 8px rgba(16, 16, 16, .18);
}
.zee-dest__flag .zee-flag { width: 34px; height: 24px; border-radius: 4px; box-shadow: none; }
.zee-dest__name {
	position: absolute; left: 20px; bottom: 16px; right: 20px;
	font-family: var(--zee-font-display);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 12px rgba(16, 16, 16, .35);
}

.zee-dest__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0) so a long word can never widen a column */
	padding: 18px 10px;
	border-bottom: 1px solid var(--zee-border);
}
.zee-dest__stats li {
	display: flex; align-items: center; gap: 10px;
	padding: 2px 14px;
	border-left: 1px solid var(--zee-border);
	min-width: 0;
	overflow: hidden;
}
.zee-dest__stats li:first-child { border-left: 0; }
.zee-dest__ico { width: 24px; height: 24px; flex: none; color: var(--zee-primary); }
.zee-dest__ico svg { width: 100%; height: 100%; }
.zee-dest__stat { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.zee-dest__stat strong,
.zee-dest__stat span { overflow-wrap: anywhere; hyphens: auto; }
.zee-dest__stat strong { color: var(--zee-heading); font-family: var(--zee-font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.zee-dest__stat span { color: var(--zee-body); font-size: .76rem; }

.zee-dest__foot {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px 16px;
	background: rgba(var(--zee-primary-rgb), .045);
	color: var(--zee-primary);
	margin-top: auto;
}
.zee-dest__more { font-family: var(--zee-font-display); font-weight: 700; font-size: .95rem; }
.zee-dest__arrow {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: rgba(var(--zee-primary-rgb), .12);
	color: var(--zee-primary);
	transition: background var(--zee-transition), color var(--zee-transition), transform var(--zee-transition);
}
.zee-dest__arrow svg { width: 20px; height: 20px; }
.zee-dest:hover .zee-dest__arrow { background: var(--zee-primary); color: #fff; transform: translateX(3px); }

@media (max-width: 1024px) { .zee-dest__name { font-size: 1.6rem; } }
@media (max-width: 480px) {
	.zee-dest__stats { padding: 14px 6px; }
	.zee-dest__stats li { padding: 2px 10px; gap: 8px; }
	.zee-dest__stat strong { font-size: .92rem; }
	.zee-dest__stat span { font-size: .7rem; }
}

/* Service cards */
.zee-service-card {
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-service-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); border-color: transparent; }
.zee-service-card__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: 18px;
	border-radius: var(--zee-radius);
	background: rgba(var(--zee-primary-rgb), .1);
	font-size: 1.4rem;
}
.zee-service-card__title { font-size: 1.05rem; margin-bottom: 8px; }
.zee-service-card__title a { color: var(--zee-heading); }
.zee-service-card__title a:hover { color: var(--zee-primary); }
.zee-service-card__text { font-size: .89rem; }

/* Course cards */
.zee-course-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-course-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); }
.zee-course-card__media { display: block; background: var(--zee-lighter); }
.zee-course-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.zee-course-card__icon {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	font-size: 2.4rem;
	background: var(--zee-lighter);
}
.zee-course-card__body { padding: 18px 20px 22px; }
.zee-course-card__title { display: block; font-weight: 600; color: var(--zee-heading); margin-bottom: 4px; }
.zee-course-card__count { font-size: .8rem; color: var(--zee-primary); font-weight: 600; }

/* Listing cards */
.zee-listing-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-listing-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); }
.zee-listing-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* University entries are usually crests or wordmarks, not photographs. Cropping
   them to fill the card mangles them, so they are contained on a white field.
   The box is 4:3 rather than 16:10 because most crests are portrait: in a
   landscape box a tall crest is height-limited and ends up filling barely a
   fifth of the tile. At 4:3 it fills about a third, while wide wordmarks are
   still comfortable. Both the image and the generated tile use the same ratio,
   so cards stay aligned across the grid. */
.zee-listing-card.type-zee_university .zee-listing-card__media,
.zee-listing-card.type-zee_credential .zee-listing-card__media {
	background: #fff;
	border-bottom: 1px solid var(--zee-border);
}
.zee-listing-card.type-zee_university .zee-listing-card__media img,
.zee-listing-card.type-zee_credential .zee-listing-card__media img {
	object-fit: contain;
	padding: 18px;
	aspect-ratio: 4 / 3;
	width: 100%;
	height: 100%;
}
.zee-listing-card.type-zee_university .zee-thumb-placeholder,
.zee-listing-card.type-zee_credential .zee-thumb-placeholder {
	padding: 0;
	aspect-ratio: 4 / 3;
	font-size: 2.6rem;
}
.zee-listing-card__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.zee-listing-card__title { font-size: 1.1rem; margin: 0; }
.zee-listing-card__title a { color: var(--zee-heading); }
.zee-listing-card__title a:hover { color: var(--zee-primary); }
.zee-listing-card__excerpt { font-size: .88rem; margin: 0; }
.zee-listing-card__actions { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }

.zee-facts { display: grid; gap: 6px; font-size: .82rem; }
.zee-facts li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--zee-border); padding-bottom: 5px; }
.zee-facts span { color: var(--zee-body); }
.zee-facts strong { color: var(--zee-heading); text-align: right; }

.zee-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--zee-radius-pill);
	background: rgba(var(--zee-primary-rgb), .1);
	color: var(--zee-primary);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.zee-pill--accent { background: rgba(245, 166, 35, .18); color: #8a5b00; }

/* Event cards */
.zee-event-card {
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-event-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); }
.zee-event-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.zee-event-card__body { padding: 20px 22px 24px; }
.zee-event-card__meta { display: flex; align-items: center; gap: 12px; font-size: .8rem; margin-bottom: 10px; }
.zee-event-card__title { font-size: 1.02rem; margin: 0; }
.zee-event-card__title a { color: var(--zee-heading); }
.zee-event-card__title a:hover { color: var(--zee-primary); }

/* Branch cards */
.zee-branch-card {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-branch-card.is-head { border-color: var(--zee-primary); box-shadow: var(--zee-shadow); }
.zee-branch-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); }
.zee-branch-card__title { font-size: 1.15rem; margin: 10px 0 10px; }
.zee-branch-card__addr { font-size: .88rem; }
.zee-branch-card__contact { display: grid; gap: 4px; font-size: .88rem; margin-top: 12px; }

/* Credentials */
.zee-cred-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 26px;
}
.zee-cred {
	display: grid;
	place-items: center;
	min-width: 150px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius);
	filter: grayscale(1);
	opacity: .75;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-cred:hover { filter: none; opacity: 1; }
.zee-cred img { max-height: 60px; width: auto; object-fit: contain; }

/* 9. Marquee, slider, counters ------------------------------------------- */
.zee-marquee { overflow: hidden; padding: 12px 0 6px; margin: 10px 0 6px; }
.zee-marquee__track {
	display: flex;
	gap: 22px;
	width: max-content;
	animation: zee-scroll 46s linear infinite;
}
.zee-marquee:hover .zee-marquee__track { animation-play-state: paused; }
@keyframes zee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.zee-uni-tile {
	display: grid;
	place-items: center;
	gap: 10px;
	width: 200px;
	padding: 22px 16px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	text-align: center;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-uni-tile:hover { border-color: var(--zee-primary); box-shadow: var(--zee-shadow); transform: translateY(-3px); }
.zee-uni-tile img { max-height: 64px; width: auto; object-fit: contain; }
.zee-uni-tile .zee-thumb-placeholder { aspect-ratio: 1; width: 64px; border-radius: 50%; font-size: 1.4rem; }
.zee-uni-tile__name { font-size: .8rem; font-weight: 600; color: var(--zee-heading); line-height: 1.35; }

.zee-slider { position: relative; }
.zee-slider__viewport { overflow: hidden; }
.zee-slider__track {
	display: flex;
	gap: var(--zee-gap);
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.zee-slider__slide { flex: 0 0 calc((100% - (var(--zee-gap) * 2)) / 3); }
.zee-slider__nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.zee-slider__btn {
	width: 46px; height: 46px;
	border: 1px solid var(--zee-border);
	border-radius: 50%;
	background: #fff;
	color: var(--zee-heading);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-slider__btn:hover { background: var(--zee-primary); border-color: var(--zee-primary); color: #fff; }
.zee-slider__btn[disabled] { opacity: .4; cursor: not-allowed; }

.zee-quote {
	height: 100%;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.zee-quote__video { position: relative; display: block; border-radius: var(--zee-radius); overflow: hidden; }
.zee-quote__video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.zee-quote__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(20, 27, 42, .35);
	color: #fff;
	font-size: 1.8rem;
}
.zee-quote__text { font-size: .92rem; border: 0; padding: 0; font-style: normal; }
.zee-quote__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.zee-quote__avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.zee-quote__avatar .zee-thumb-placeholder { width: 46px; height: 46px; aspect-ratio: 1; border-radius: 50%; font-size: 1.1rem; }
.zee-quote__author strong { display: block; color: var(--zee-heading); font-size: .92rem; }
.zee-quote__author em { font-size: .8rem; font-style: normal; }

.zee-counters {
	padding: 64px 0;
	background: var(--zee-dark);
	background-image: linear-gradient(120deg, var(--zee-dark) 0%, rgba(var(--zee-primary-rgb), .95) 100%);
	color: #fff;
}
.zee-counters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.zee-counter__num,
.zee-counter__plus {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
	font-weight: 800;
	color: #fff;
	line-height: 1;
}
.zee-counter__label { display: block; margin-top: 10px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* Newsletter */
.zee-newsletter { padding: 60px 0; background: var(--zee-light); }
.zee-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 36px;
	align-items: center;
}
.zee-newsletter__title { margin-bottom: 6px; }
.zee-newsletter__text { font-size: .95rem; margin: 0; }
.zee-subscribe { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.zee-subscribe input[type="email"] { flex: 1 1 240px; }
.zee-subscribe__status { flex: 1 0 100%; }

/* 10. Footer ------------------------------------------------------------- */
.zee-footer {
	position: relative;
	overflow: hidden;
	background: var(--zee-footer-bg);
	color: rgba(255, 255, 255, .72);
	font-size: .9rem;
}
/* A quiet brand-colour glow at the top edge only - footers stay calm, this
   just keeps the dark tone from reading as flat, generic charcoal. */
.zee-footer::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 260px;
	background: radial-gradient(60% 100% at 50% 0%, rgba(var(--zee-primary-rgb), .16), transparent 70%);
	pointer-events: none;
}
.zee-footer a { color: rgba(255, 255, 255, .72); }
.zee-footer a:hover { color: #fff; }
.zee-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 40px;
	padding: 70px 20px 54px;
}
.zee-footer__title { color: #fff; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.zee-footer .zee-logo-text { display: block; margin-bottom: 22px; }
.zee-footer .zee-logo-text__name { color: #fff; }
.zee-footer .zee-logo-text__sub { color: var(--zee-secondary); }
.zee-footer__hours { white-space: normal; margin-bottom: 20px; }
.zee-footer__menu li,
.zee-footer__contact li { margin-bottom: 10px; }
.zee-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.zee-footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; font-size: .82rem; }
.zee-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.zee-copyright { margin: 0; }
.zee-legal-menu { display: flex; gap: 20px; flex-wrap: wrap; }

.zee-to-top {
	position: fixed;
	right: 22px;
	bottom: 84px;
	z-index: 250;
	width: 46px; height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 0;
	background: var(--zee-primary);
	color: #fff;
	font-size: 1.2rem;
	box-shadow: var(--zee-shadow);
	transition: transform var(--zee-transition), box-shadow var(--zee-transition);
}
.zee-to-top[hidden] { display: none; }
.zee-to-top:hover { transform: translateY(-3px); color: #fff; box-shadow: var(--zee-shadow-lg); }

/* WhatsApp widget --------------------------------------------------------
   Two pieces sharing one fixed-position wrapper: a small toggle bubble
   (always the compact, non-intrusive element per the brief) and a panel
   that opens above it. The toggle never navigates on its own; the actual
   wa.me link lives only inside the panel's CTA, so opening the widget is
   never mistaken for leaving the site. */
.zee-wa {
	position: fixed;
	right: 22px;
	bottom: 24px;
	z-index: 251;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

/* -- Toggle bubble --------------------------------------------------- */
.zee-wa-float {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .38), 0 2px 6px rgba(16, 16, 16, .12);
	transition: box-shadow var(--zee-transition), background-color var(--zee-transition), transform .25s cubic-bezier(.16, 1, .3, 1);
	/* --wa-x / --wa-y: the magnetic-pull offset, written from JS as custom
	   properties (never as a raw inline transform) specifically so this base
	   transform still composes correctly under :active and while entering. */
	transform: translate(var(--wa-x, 0px), var(--wa-y, 0px));
	will-change: transform;
}
.zee-wa-float:hover,
.zee-wa-float:focus-visible {
	box-shadow: 0 10px 26px rgba(37, 211, 102, .46), 0 4px 10px rgba(16, 16, 16, .16);
}
.zee-wa-float:active { transform: translate(var(--wa-x, 0px), var(--wa-y, 0px)) scale(.92); }
.zee-wa-float[aria-expanded="true"] { background: var(--zee-heading); box-shadow: 0 10px 26px rgba(16, 16, 16, .3); }

.zee-wa-float__icon { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1); }
.zee-wa-float__icon svg { width: 22px; height: 22px; }
.zee-wa-float__icon--close { opacity: 0; transform: rotate(-90deg) scale(.4); }
.zee-wa-float[aria-expanded="true"] .zee-wa-float__icon--chat  { opacity: 0; transform: rotate(90deg) scale(.4); }
.zee-wa-float[aria-expanded="true"] .zee-wa-float__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* Soft, slow "live" pulse behind the bubble - hidden once the panel is open,
   since the button is now a close control, not an invitation to chat. */
.zee-wa-float__ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: #25D366;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.zee-wa-float__ring { animation: zee-wa-pulse 2.6s ease-out infinite; }
}
.zee-wa-float[aria-expanded="true"] .zee-wa-float__ring { animation: none; opacity: 0; }

.zee-wa-float__status {
	position: absolute;
	top: 1px; right: 1px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #34e072;
	border: 2px solid #128c4a;
	transition: opacity var(--zee-transition);
}
.zee-wa-float[aria-expanded="true"] .zee-wa-float__status { opacity: 0; }

/* Entrance: the whole widget pops in once, ~0.9s after load, rather than
   being present (and grabbing attention) before anything else has. */
.zee-wa { opacity: 0; transform: translate(var(--wa-x, 0px), calc(14px + var(--wa-y, 0px))) scale(.9); }
.zee-wa.is-in { opacity: 1; transform: translate(var(--wa-x, 0px), var(--wa-y, 0px)); }
@media (prefers-reduced-motion: no-preference) {
	.zee-wa.is-in { transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.zee-wa { opacity: 1; transform: none; }
	.zee-wa-float__ring { display: none; }
}

/* -- Panel: the greeting card + the one real link to WhatsApp -------- */
.zee-wa__panel {
	width: min(320px, calc(100vw - 44px));
	transform-origin: bottom right;
	transform: scale(.92) translateY(10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}
/* [hidden] keeps the native display:none - matching the mobile drawer and
   search overlay elsewhere in this theme. JS removes the attribute first,
   forces a reflow, THEN adds .is-open, so this transition has a real
   starting frame to animate from instead of jumping straight to visible. */
.zee-wa.is-open .zee-wa__panel {
	transform: scale(1) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.zee-wa__card {
	padding: 20px 22px;
	margin-bottom: 12px;
	background: #fff;
	border-radius: var(--zee-radius-lg) var(--zee-radius-lg) var(--zee-radius-lg) 6px;
	box-shadow: var(--zee-shadow-lg);
}
.zee-wa__title { margin: 0 0 6px; font-family: var(--zee-font-display); font-size: 1rem; font-weight: 800; color: var(--zee-heading); }
.zee-wa__text { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--zee-body); }

.zee-wa__cta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 10px;
	background: #25D366;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
	transition: transform var(--zee-transition), box-shadow var(--zee-transition);
}
.zee-wa__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 211, 102, .45); }
.zee-wa__avatar {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-family: var(--zee-font-display);
	font-weight: 800;
	font-size: .92rem;
}
.zee-wa__cta-label { flex: 1; font-family: var(--zee-font-display); font-weight: 700; font-size: .92rem; }
.zee-wa__cta-arrow { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.zee-wa__cta-arrow svg { width: 16px; height: 16px; }

@keyframes zee-wa-pulse {
	0%   { transform: scale(1);    opacity: .55; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

/* 11. Blog, single, prose ------------------------------------------------ */
.zee-banner {
	padding: 48px 0 42px;
	background:
		radial-gradient(50% 90% at 20% 0%, rgba(var(--zee-primary-rgb), .12) 0%, transparent 60%),
		var(--zee-light);
	border-bottom: 1px solid var(--zee-border);
}
.zee-banner__title { margin: 10px 0 8px; }
.zee-banner__sub { max-width: 720px; margin: 0; }

.zee-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; }
.zee-crumbs li + li::before { content: "\203A"; margin-right: 8px; opacity: .5; }

.zee-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-post-card:hover { transform: translateY(-4px); box-shadow: var(--zee-shadow); }
.zee-post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.zee-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.zee-post-card__title { font-size: 1.08rem; margin: 0; }
.zee-post-card__title a { color: var(--zee-heading); }
.zee-post-card__title a:hover { color: var(--zee-primary); }
.zee-post-card__excerpt { font-size: .88rem; margin: 0; }
.zee-post-card .zee-link-arrow { margin-top: auto; font-size: .88rem; }
.zee-post-meta { font-size: .78rem; margin: 0; display: flex; gap: 8px; align-items: center; }

.zee-single__media { margin: 0 0 28px; border-radius: var(--zee-radius-lg); overflow: hidden; }
.zee-single__footer { margin-top: 30px; }
.zee-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 13px;
	border-radius: var(--zee-radius-pill);
	background: var(--zee-lighter);
	font-size: .78rem;
	color: var(--zee-heading);
}

.zee-prose { font-size: 1rem; }
.zee-prose h2 { margin-top: 1.6em; }
.zee-prose h3 { margin-top: 1.4em; }
.zee-prose ul, .zee-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.zee-prose ul li { list-style: disc; margin-bottom: .4em; }
.zee-prose ol li { list-style: decimal; margin-bottom: .4em; }
.zee-prose img { border-radius: var(--zee-radius); margin: 1.2em 0; }
.zee-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.zee-prose th, .zee-prose td { border: 1px solid var(--zee-border); padding: 10px 14px; text-align: left; }
.zee-prose th { background: var(--zee-lighter); color: var(--zee-heading); }

.zee-factsheet {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin: 0 0 30px;
	padding: 22px;
	background: var(--zee-light);
	border-radius: var(--zee-radius-lg);
}
.zee-factsheet__label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.zee-factsheet__value { font-size: 1rem; }

.zee-callout {
	margin-top: 30px;
	padding: 24px;
	border-left: 4px solid var(--zee-primary);
	background: var(--zee-light);
	border-radius: 0 var(--zee-radius) var(--zee-radius) 0;
}
.zee-callout h3 { font-size: 1.05rem; }

.zee-usp { display: grid; gap: 16px; margin-top: 26px; }
.zee-usp li {
	padding: 18px 20px;
	background: var(--zee-light);
	border-radius: var(--zee-radius);
	font-size: .88rem;
}
.zee-usp strong { display: block; margin-bottom: 4px; }

.zee-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.zee-contact-tile { padding: 24px; border: 1px solid var(--zee-border); border-radius: var(--zee-radius-lg); }
.zee-contact-tile h3 { font-size: .95rem; margin-bottom: 8px; }

.zee-none { text-align: center; max-width: 620px; margin: 0 auto; display: grid; gap: 18px; }
.zee-none .zee-search { justify-content: center; }

.zee-empty-notice {
	padding: 18px 22px;
	border: 1px dashed var(--zee-border);
	border-radius: var(--zee-radius);
	background: var(--zee-light);
	font-size: .88rem;
	text-align: center;
}

.pagination, .navigation.pagination { margin-top: 48px; }
.nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius);
	color: var(--zee-heading);
	font-size: .9rem;
	font-weight: 600;
}
.page-numbers:hover, .page-numbers.current { background: var(--zee-primary); border-color: var(--zee-primary); color: #fff; }

.post-navigation { margin-top: 46px; }
.post-navigation .nav-links { justify-content: space-between; gap: 20px; }
.post-navigation a { display: block; max-width: 46ch; font-weight: 600; color: var(--zee-heading); }
.post-navigation a span { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--zee-primary); margin-bottom: 4px; }

.zee-comments { margin-top: 60px; }
.zee-comments__list { display: grid; gap: 22px; margin-bottom: 34px; }
.zee-comments .comment-body { padding: 22px; border: 1px solid var(--zee-border); border-radius: var(--zee-radius-lg); }
.zee-comments .children { margin-top: 18px; padding-left: 30px; display: grid; gap: 18px; }
.comment-form { display: grid; gap: 14px; }

.widget { margin-bottom: 32px; padding: 24px; border: 1px solid var(--zee-border); border-radius: var(--zee-radius-lg); }
.widget__title { font-size: 1rem; margin-bottom: 14px; }
.widget ul li { margin-bottom: 8px; font-size: .9rem; }

/* 12. Utilities and animation -------------------------------------------- */
[data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
	transition-delay: var(--zee-delay, 0ms);
}
[data-animate].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-animate] { opacity: 1; transform: none; }
}

/* 13. Responsive --------------------------------------------------------- */
@media (max-width: 1200px) {
	.zee-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.zee-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; }
	.zee-slider__slide { flex-basis: calc((100% - var(--zee-gap)) / 2); }
}

@media (max-width: 1024px) {
	:root { --zee-section-y: 64px; }

	.zee-header__nav { display: none; }
	.zee-burger { display: flex; }
	.zee-header__cta { display: none; }
	.zee-header__inner { justify-content: space-between; }
	.zee-header__actions { margin-left: auto; }

	.zee-hero__inner { grid-template-columns: 1fr; }
	.zee-layout,
	.zee-layout--reverse { grid-template-columns: 1fr; }
	.zee-sticky-form { position: static; }
	.zee-newsletter__inner { grid-template-columns: 1fr; }
	.zee-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.zee-counters__grid { grid-template-columns: repeat(2, 1fr); }
	.zee-topbar__link--email { display: none; }

	/* Mobile drawer navigation */
	.zee-nav--mobile { flex-direction: column; align-items: stretch; gap: 0; }
	.zee-nav--mobile .zee-nav-item,
	.zee-nav--mobile .zee-subnav-item { border-bottom: 1px solid var(--zee-border); position: relative; }
	.zee-nav--mobile .zee-nav-link,
	.zee-nav--mobile .zee-subnav-link { display: block; padding: 13px 40px 13px 4px; }
	.zee-nav--mobile .zee-caret { display: none; }
	.zee-nav--mobile .zee-submenu-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 4px; right: 0;
		width: 40px; height: 40px;
		background: none;
		border: 0;
		color: var(--zee-heading);
	}
	.zee-nav--mobile .zee-submenu-toggle .zee-caret { display: block; }
	.zee-nav--mobile .zee-submenu-toggle[aria-expanded="true"] .zee-caret { transform: rotate(-135deg) translateY(-2px); }
	.zee-nav--mobile .zee-dropdown,
	.zee-nav--mobile .zee-mega-panel {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 0 16px;
		min-width: 0;
		background: transparent;
	}
	.zee-nav--mobile .is-open > .zee-dropdown,
	.zee-nav--mobile .is-open > .zee-mega-panel { display: block; }
	.zee-nav--mobile .zee-mega-panel .zee-container { padding: 0; }
	.zee-nav--mobile .zee-mega-grid { grid-template-columns: 1fr; }
	.zee-nav--mobile .zee-nav-cta { margin: 16px 0; }
}

@media (max-width: 780px) {
	.zee-grid--2,
	.zee-grid--3,
	.zee-grid--4 { grid-template-columns: 1fr; }
	.zee-form__grid { grid-template-columns: 1fr; }
	.zee-slider__slide { flex-basis: 100%; }
	.zee-contact-grid { grid-template-columns: 1fr; }
	.zee-topbar__inner { justify-content: center; }
	.zee-footer__grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 40px; }
	.zee-counters__grid { grid-template-columns: repeat(2, 1fr); }
	.zee-footer__bar-inner { justify-content: center; text-align: center; }
	.zee-post-navigation .nav-links { flex-direction: column; }
}

@media (max-width: 480px) {
	.zee-counters__grid { grid-template-columns: 1fr; }
	.zee-hero__ctas .zee-btn { width: 100%; }
	.zee-form, .zee-card--form { padding: 20px; }
}

/* 14. Scholarships and Why-Us ------------------------------------------- */
.zee-schol-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-schol-card:hover { border-color: var(--zee-primary); box-shadow: var(--zee-shadow); transform: translateY(-3px); }

.zee-schol-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.zee-schol-card__title { font-size: 1.2rem; margin: 0; }
.zee-schol-card__title a { color: var(--zee-heading); }
.zee-schol-card__title a:hover { color: var(--zee-primary); }
.zee-schol-card__text { font-size: .9rem; margin: 0; }

.zee-schol-card__facts { display: grid; gap: 10px; margin: 0; padding-top: 4px; }
.zee-schol-card__facts > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--zee-border);
	font-size: .84rem;
}
.zee-schol-card__facts dt {
	color: var(--zee-primary);
	font-family: var(--zee-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .7rem;
	padding-top: 2px;
}
.zee-schol-card__facts dd { margin: 0; color: var(--zee-heading); font-weight: 500; }

/* Dark band, matching the brand book's inverted layouts */
.zee-section--dark { background: var(--zee-dark); }
.zee-section--dark .zee-section-title { color: #fff; }
.zee-section--dark .zee-section-sub { color: rgba(255, 255, 255, .66); }

.zee-why-card {
	padding: 28px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--zee-radius-lg);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-why-card:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
.zee-why-card__num {
	display: block;
	margin-bottom: 12px;
	color: var(--zee-secondary);
	font-family: var(--zee-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}
.zee-why-card__title { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.zee-why-card__text { color: rgba(255, 255, 255, .68); font-size: .89rem; margin: 0; }

@media (max-width: 780px) {
	.zee-schol-card__head { flex-direction: column; gap: 10px; }
	.zee-schol-card__facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 15. Flags and country selects ----------------------------------------- */
.zee-flag {
	display: inline-block;
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(16, 16, 16, .1);
	vertical-align: middle;
	flex: none;
}
.zee-flag--text {
	display: inline-grid;
	place-items: center;
	background: var(--zee-lighter);
	color: var(--zee-body);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.zee-country-field { position: relative; }
.zee-country-field__flag {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	pointer-events: none;
	display: none;
	line-height: 0;
}
.zee-country-field.has-flag .zee-country-field__flag { display: block; }
.zee-country-field.has-flag .zee-country-select { padding-left: 46px; }

/* 16. Hero carousel ------------------------------------------------------ */
.zee-hero__slides { position: relative; display: grid; }
.zee-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.zee-hero__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.zee-hero__slide .zee-hero__title { margin-bottom: 0; }

/* Non-h1 slides still need to look like the headline. */
p.zee-hero__title {
	font-family: var(--zee-font-display);
	font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--zee-heading);
}

.zee-hero__dots { display: flex; gap: 8px; margin: 22px 0 20px; }
.zee-hero__dot {
	width: 30px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--zee-border);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-hero__dot:hover { background: var(--zee-secondary); }
.zee-hero__dot.is-active { width: 48px; background: var(--zee-primary); }

.zee-hero__proof { margin-bottom: 4px; }

/* Flag chips under the hero */
.zee-hero__chips a { display: inline-flex; align-items: center; gap: 8px; }

/* 17. Accordion ---------------------------------------------------------- */
.zee-accordion {
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	background: #fff;
}
.zee-accordion__item + .zee-accordion__item { border-top: 1px solid var(--zee-border); }

.zee-accordion__header { margin: 0; font-size: 1rem; }
.zee-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 24px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--zee-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--zee-heading);
	transition: background var(--zee-transition), color var(--zee-transition);
}
.zee-accordion__trigger:hover { background: var(--zee-light); color: var(--zee-primary); }
.zee-accordion__label { flex: 1; }
.zee-accordion__trigger .zee-caret { transition: transform var(--zee-transition); opacity: .5; }
.zee-accordion__item.is-open .zee-accordion__trigger { color: var(--zee-primary); }
.zee-accordion__item.is-open .zee-caret { transform: rotate(-135deg) translate(-2px, -2px); }

.zee-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.zee-accordion__item.is-open .zee-accordion__panel { grid-template-rows: 1fr; }
.zee-accordion__panel > .zee-accordion__body { overflow: hidden; }
.zee-accordion__body { padding: 0 24px; font-size: .92rem; }
.zee-accordion__item.is-open .zee-accordion__body { padding-bottom: 24px; }

/* 18. Video lightbox ----------------------------------------------------- */
.zee-lightbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: 24px;
}
.zee-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, .88);
	animation: zee-fade .2s ease;
}
.zee-lightbox__inner { position: relative; width: min(960px, 100%); }
.zee-lightbox__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	box-shadow: var(--zee-shadow-lg);
}
.zee-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.zee-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	transition: background var(--zee-transition);
}
.zee-lightbox__close:hover { background: var(--zee-primary); }

@keyframes zee-fade { from { opacity: 0; } to { opacity: 1; } }

.zee-quote__play {
	transition: background var(--zee-transition);
}
.zee-quote__video:hover .zee-quote__play { background: rgba(var(--zee-primary-rgb), .55); }

@media (max-width: 780px) {
	.zee-accordion__trigger { padding: 16px 18px; font-size: .98rem; gap: 10px; }
	.zee-accordion__body { padding: 0 18px; }
	.zee-accordion__item.is-open .zee-accordion__body { padding-bottom: 18px; }
	.zee-lightbox { padding: 16px; }
	.zee-lightbox__close { top: -42px; }
}

/* 19. Search overlay ----------------------------------------------------- */
.zee-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 450;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(18, 18, 20, .95);
	opacity: 0;
	/* Never intercept clicks unless actually open. Without this the overlay is
	   invisible (opacity 0) but still hit-testable, and swallows every click on
	   the page underneath. */
	pointer-events: none;
	transition: opacity var(--zee-transition);
}
/* The `display: grid` above outranks the UA stylesheet's [hidden] rule, so the
   attribute alone would not take it out of the layout. Restore that here. */
.zee-search-overlay[hidden] { display: none; }
.zee-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.zee-search-overlay__inner { width: min(720px, 100%); text-align: center; }
.zee-search-overlay__label {
	margin-bottom: 18px;
	color: rgba(255, 255, 255, .7);
	font-family: var(--zee-font-display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.zee-search-overlay .zee-search input[type="search"] {
	padding: 18px 22px;
	font-size: 1.1rem;
	border-color: transparent;
}
.zee-search-overlay__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	transition: background var(--zee-transition);
}
.zee-search-overlay__close:hover { background: var(--zee-primary); }

@media (max-width: 780px) {
	.zee-search-overlay .zee-search { flex-direction: column; }
}

/* 20. Why study in Europe ------------------------------------------------ */
.zee-benefit {
	position: relative;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	overflow: hidden;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-benefit::after {
	content: "";
	position: absolute;
	inset: auto -30% -60% auto;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--zee-primary-rgb), .10), transparent 70%);
	transition: transform .6s cubic-bezier(.2,.7,.3,1);
	pointer-events: none;
}
.zee-benefit:hover { transform: translateY(-5px); box-shadow: var(--zee-shadow); border-color: transparent; }
.zee-benefit:hover::after { transform: scale(1.5); }
.zee-benefit__media { display: block; margin: -30px -26px 20px; }
.zee-benefit__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.zee-benefit__icon { display: block; font-size: 2rem; margin-bottom: 12px; }
.zee-benefit__stat {
	display: block;
	font-family: var(--zee-font-display);
	font-size: 1.9rem;
	font-weight: 900;
	letter-spacing: -.03em;
	color: var(--zee-primary);
	line-height: 1;
	margin-bottom: 8px;
}
.zee-benefit__title { font-size: 1.05rem; margin-bottom: 8px; }
.zee-benefit__text { font-size: .88rem; }
.zee-benefit__text p { margin-bottom: .6em; }

/* 21. Visa process steps ------------------------------------------------- */
.zee-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--zee-gap);
	counter-reset: zee-step;
}
.zee-step {
	position: relative;
	padding: 28px 24px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--zee-radius-lg);
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-step:hover { background: rgba(255, 255, 255, .085); transform: translateY(-4px); }
/* connector line between steps */
.zee-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 46px; right: -18px;
	width: 12px; height: 2px;
	background: rgba(255, 255, 255, .22);
}
.zee-step__num {
	display: block;
	font-family: var(--zee-font-display);
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;
	color: var(--zee-secondary);
	margin-bottom: 14px;
}
.zee-step__title { color: #fff; font-size: 1.02rem; margin-bottom: 8px; }
.zee-step__text { color: rgba(255, 255, 255, .68); font-size: .88rem; }
.zee-step__text p { margin-bottom: .5em; }

/* 22. A-Z package timeline ----------------------------------------------- */
.zee-timeline { position: relative; max-width: 780px; margin: 0 auto; padding-left: 46px; }
.zee-timeline::before {
	content: "";
	position: absolute;
	left: 15px; top: 8px; bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--zee-primary), var(--zee-secondary));
	opacity: .28;
}
.zee-timeline__item { position: relative; padding-bottom: 26px; }
.zee-timeline__item:last-child { padding-bottom: 0; }
.zee-timeline__dot {
	position: absolute;
	left: -46px; top: 0;
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--zee-primary);
	color: #fff;
	font-family: var(--zee-font-display);
	font-size: .82rem;
	font-weight: 800;
	box-shadow: 0 0 0 5px var(--zee-light);
}
.zee-timeline__title { font-size: 1.02rem; margin-bottom: 5px; }
.zee-timeline__text { font-size: .89rem; }
.zee-timeline__text p { margin-bottom: .5em; }

/* 23. FAQ ---------------------------------------------------------------- */
.zee-faq .zee-accordion__body p { margin-bottom: .8em; }

/* 24. Extra reveal variants ---------------------------------------------- */
[data-animate="fade-left"]  { transform: translateX(-26px); }
[data-animate="fade-right"] { transform: translateX(26px); }
[data-animate="zoom"]       { transform: scale(.94); }
[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible,
[data-animate="zoom"].is-visible { transform: none; }

/* Gentle drift on the hero backdrop, so the page is never fully static.

   This animated `background-position` originally, which is not a composited
   property: it repainted a full-width layer every frame, forever, for as long
   as the page was open. The two radial washes now sit on an oversized
   pseudo-element that translates instead, which the compositor handles on its
   own thread. Identical effect, no per-frame paint.

   Under reduced motion the pseudo-element is never created and the base rule's
   original background stands, so that path is unchanged. */
@media (prefers-reduced-motion: no-preference) {
	.zee-hero__bg {
		overflow: hidden;
		background: linear-gradient(180deg, #fff 0%, var(--zee-light) 100%);
	}
	.zee-hero__bg::before {
		content: "";
		position: absolute;
		inset: -14%;
		background:
			radial-gradient(60% 80% at 15% 20%, rgba(var(--zee-primary-rgb), .13) 0%, transparent 60%),
			radial-gradient(55% 70% at 85% 15%, rgba(var(--zee-secondary-rgb), .13) 0%, transparent 60%);
		animation: zee-drift 22s ease-in-out infinite alternate;
		will-change: transform;
	}
}
@keyframes zee-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(3.5%, 2.5%, 0); }
}

@media (max-width: 1024px) {
	.zee-steps { grid-template-columns: repeat(2, 1fr); }
	.zee-step:not(:last-child)::after { display: none; }
}
@media (max-width: 780px) {
	.zee-steps { grid-template-columns: 1fr; }
	.zee-timeline { padding-left: 38px; }
	.zee-timeline__dot { left: -38px; width: 28px; height: 28px; font-size: .74rem; }
	.zee-benefit__media { margin: -30px -26px 18px; }
}

/* 25. Archive filter bar ------------------------------------------------- */
.zee-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px;
	padding: 22px;
	margin-bottom: 22px;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	box-shadow: var(--zee-shadow-sm);
}
.zee-filterbar__fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	flex: 1 1 640px;
}
.zee-filterbar__actions { display: flex; gap: 10px; padding-bottom: 1px; }

.zee-field__label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--zee-font-display);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zee-body);
	transition: color var(--zee-transition);
}
.zee-field.is-set .zee-field__label { color: var(--zee-primary); }
.zee-field__control { position: relative; }

/* Native select, restyled. Keeping the real <select> means the mobile picker,
   keyboard behaviour and screen-reader support all stay intact. */
.zee-select,
.zee-input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--zee-border);
	border-radius: var(--zee-radius);
	background-color: var(--zee-light);
	font-family: inherit;
	font-size: .9rem;
	font-weight: 500;
	color: var(--zee-heading);
	transition: border-color var(--zee-transition), background var(--zee-transition), box-shadow var(--zee-transition);
	cursor: pointer;
}
.zee-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	/* chevron, brand coloured */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234838E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	text-overflow: ellipsis;
}
.zee-select:hover,
.zee-input:hover { border-color: var(--zee-secondary); background-color: #fff; }
.zee-select:focus,
.zee-input:focus {
	outline: 0;
	/* background-color, not the shorthand: `background` would reset
	   background-image and wipe the chevron off the select. */
	background-color: #fff;
	border-color: var(--zee-primary);
	box-shadow: 0 0 0 4px rgba(var(--zee-primary-rgb), .14);
}
.zee-field.is-set .zee-select,
.zee-field.is-set .zee-input {
	border-color: var(--zee-primary);
	background-color: #fff;
	font-weight: 600;
}

.zee-field--search .zee-input { padding-left: 42px; cursor: text; }
.zee-field__icon {
	position: absolute;
	left: 15px; top: 50%;
	transform: translateY(-50%);
	color: var(--zee-body);
	font-size: 1rem;
	pointer-events: none;
}
.zee-field.is-set .zee-field__icon { color: var(--zee-primary); }
.zee-input::-webkit-search-cancel-button { cursor: pointer; }

.zee-filterbar .zee-btn { height: 48px; }

/* Result count + active filter chips */
.zee-resultbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 30px;
}
.zee-resultbar__count { margin: 0; font-size: .9rem; }
.zee-resultbar__count strong { color: var(--zee-heading); }

.zee-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zee-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 14px;
	border-radius: var(--zee-radius-pill);
	background: rgba(var(--zee-primary-rgb), .1);
	color: var(--zee-primary);
	font-size: .8rem;
	font-weight: 600;
	transition:
		transform var(--zee-transition),
		box-shadow var(--zee-transition),
		background var(--zee-transition),
		border-color var(--zee-transition),
		color var(--zee-transition),
		opacity var(--zee-transition),
		visibility var(--zee-transition);
}
.zee-chip:hover { background: var(--zee-primary); color: #fff; }
.zee-chip__x { font-size: 1.05rem; line-height: 1; opacity: .7; }
.zee-chip:hover .zee-chip__x { opacity: 1; }

@media (max-width: 1024px) {
	.zee-filterbar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.zee-filterbar { padding: 18px; }
	.zee-filterbar__fields { grid-template-columns: 1fr; }
	.zee-filterbar__actions { width: 100%; }
	.zee-filterbar__actions .zee-btn { flex: 1; }
}

/* 26. UX pass: eyebrows, compact header, trust row, CTA band, sticky bar,
      inline validation, success panel, reading bar, testimonial quote ----- */

/* Section eyebrows — the small indigo label the brand book puts above titles */
.zee-eyebrow {
	margin: 0 0 12px;
	font-family: var(--zee-font-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--zee-primary);
}
.zee-eyebrow--light { color: rgba(255, 255, 255, .78); }
.zee-section--dark .zee-eyebrow { color: var(--zee-secondary); }

/* Compact header once the hero is scrolled past */
.zee-header__inner { transition: min-height var(--zee-transition); }
.zee-header.is-compact .zee-header__inner { min-height: 64px; }
.zee-header.is-compact .zee-header__brand img { max-height: calc(var(--zee-logo-h, 52px) * .8); }
.zee-header.is-compact .zee-logo-text__name { font-size: 1.1rem; }
.zee-header.is-compact .zee-logo-text__sub { font-size: .52rem; }

/* Hero trust row */
.zee-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 22px;
	font-size: .84rem;
	font-weight: 500;
	color: var(--zee-heading);
}
.zee-trust li { display: inline-flex; align-items: center; gap: 8px; }
.zee-trust__ico {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(var(--zee-primary-rgb), .1);
	color: var(--zee-primary);
	font-size: .66rem;
	flex: none;
}

/* Flags inside destination cards and scholarship pills */
.zee-pill--flag { display: inline-flex; align-items: center; gap: 7px; }
.zee-pill--flag .zee-flag { width: 18px; height: 12px; }

/* Pre-footer call-to-action band */
.zee-cta-band {
	position: relative;
	overflow: hidden;
	padding: 78px 0;
	background: var(--zee-primary);
	color: #fff;
}
.zee-cta-band::before,
.zee-cta-band::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.zee-cta-band::before { inset: auto -8% -55% auto; width: 46vw; height: 46vw; background: rgba(255, 255, 255, .07); }
.zee-cta-band::after  { inset: -60% auto auto -6%; width: 34vw; height: 34vw; background: rgba(0, 0, 0, .10); }
.zee-cta-band__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: 36px;
	align-items: center;
}
.zee-cta-band__title { color: #fff; margin-bottom: 10px; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.zee-cta-band__text { margin: 0; color: rgba(255, 255, 255, .82); max-width: min(var(--zee-text-w, 1040px), 64ch); }
.zee-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.zee-btn--white { background: #fff; color: var(--zee-primary); }
.zee-btn--white:hover { background: #fff; color: var(--zee-heading); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.zee-btn--outline-white { border-color: rgba(255, 255, 255, .7); color: #fff; }
.zee-btn--outline-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* Phone-only sticky action bar */
.zee-stickybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 240;
	display: none;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--zee-border);
	box-shadow: 0 -8px 24px rgba(16, 16, 16, .08);
	transform: translateY(0);
	transition: transform var(--zee-transition);
}
.zee-stickybar.is-hidden { transform: translateY(110%); }
.zee-stickybar__main { flex: 1; }
.zee-stickybar__side {
	display: grid;
	place-items: center;
	width: 50px;
	border: 1.5px solid var(--zee-border);
	border-radius: var(--zee-radius-pill);
	color: var(--zee-heading);
	font-size: 1.2rem;
}

/* Inline validation */
.zee-form__field.is-invalid label { color: #c02626; }
.zee-form__field.is-invalid input,
.zee-form__field.is-invalid select,
.zee-form__field.is-invalid textarea,
.zee-form__consent.is-invalid input { border-color: #d33; box-shadow: 0 0 0 3px rgba(211, 51, 51, .14); }
.zee-form__consent.is-invalid span { color: #c02626; }

/* Success panel that replaces the form */
.zee-form__success {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 40px 28px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	box-shadow: var(--zee-shadow-lg);
	animation: zee-pop .35s cubic-bezier(.2, .7, .3, 1);
}
.zee-form__success-mark {
	display: grid;
	place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: var(--zee-primary);
	color: #fff;
	font-size: 1.7rem;
	font-weight: 800;
}
.zee-form__success p { margin: 0; font-weight: 500; color: var(--zee-heading); max-width: 34ch; }
@keyframes zee-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Reading progress on single posts */
.zee-readbar {
	position: sticky;
	top: 0;
	z-index: 210;
	height: 3px;
	background: transparent;
}
.zee-readbar { display: none; }
.zee-readbar.is-supported { display: block; }
.zee-readbar span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--zee-gradient);
	transform-origin: left;
	animation: zee-grow linear both;
	animation-timeline: scroll(root);
}
@keyframes zee-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Testimonials: decorative quotation mark */
.zee-quote { position: relative; }
.zee-quote::before {
	content: "\201C";
	position: absolute;
	top: 10px; right: 22px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	line-height: 1;
	color: rgba(var(--zee-primary-rgb), .12);
	pointer-events: none;
}

/* Hero form gets a tiny reassurance line */
.zee-form__note { color: var(--zee-primary); font-weight: 600; }

@media (max-width: 1024px) {
	.zee-cta-band { padding: 60px 0; }
	.zee-cta-band__inner { grid-template-columns: 1fr; }
	.zee-stickybar { display: flex; }
	body { padding-bottom: 74px; }          /* keep content clear of the bar */
	.zee-to-top { bottom: 150px; }
	.zee-wa { display: none; }              /* the sticky bar's own WhatsApp icon covers this on phones */
}
@media (max-width: 480px) {
	.zee-trustband { margin-top: 28px; padding-top: 16px; }
	.zee-trust { gap: 8px 14px; font-size: .8rem; }
	.zee-cta-band__actions .zee-btn { width: 100%; }
}


/* 27. Homepage panel overrides: width, background, spacing, columns --------- */
.zee-w-narrow .zee-container { max-width: 880px; }
.zee-w-wide   .zee-container { max-width: 1480px; }
.zee-w-full   .zee-container { max-width: none; padding-left: 32px; padding-right: 32px; }

.zee-section.zee-bg-white   { background: #fff; }
.zee-section.zee-bg-light   { background: var(--zee-light); }
.zee-section.zee-bg-dark    { background: var(--zee-dark); }
.zee-section.zee-bg-primary { background: var(--zee-primary); }
.zee-bg-primary .zee-section-sub { color: rgba(255, 255, 255, .82); }
.zee-bg-primary .zee-eyebrow     { color: rgba(255, 255, 255, .78); }
.zee-hero.zee-bg-dark, .zee-hero.zee-bg-primary { color: #fff; }
.zee-hero.zee-bg-dark .zee-hero__bg, .zee-hero.zee-bg-primary .zee-hero__bg { display: none; }

.zee-section.zee-pad-compact  { padding: 48px 0; }
.zee-section.zee-pad-spacious { padding: 128px 0; }
.zee-section.zee-pad-none     { padding: 0; }

.zee-cols-1 .zee-grid { grid-template-columns: 1fr; }
.zee-cols-2 .zee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zee-cols-3 .zee-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zee-cols-4 .zee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Custom sections */
.zee-custom__body { display: grid; gap: 40px; align-items: center; }
.zee-custom--has-image .zee-custom__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.zee-custom__body--center:not(.zee-custom--has-image .zee-custom__body) { text-align: center; max-width: var(--zee-text-w, 1040px); margin: 0 auto; }
.zee-custom__media { margin: 0; border-radius: var(--zee-radius-lg); overflow: hidden; }
.zee-custom__media img { width: 100%; height: auto; display: block; }
.zee-custom__cta { margin-top: 24px; }
.zee-custom__body--center .zee-custom__text p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.zee-cols-3 .zee-grid, .zee-cols-4 .zee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
	.zee-cols-2 .zee-grid, .zee-cols-3 .zee-grid, .zee-cols-4 .zee-grid { grid-template-columns: 1fr; }
	.zee-custom--has-image .zee-custom__body { grid-template-columns: 1fr; }
	.zee-w-full .zee-container { padding-left: 20px; padding-right: 20px; }
}


/* 28. Logo sizing, large-screen scale, CTA band variants --------------- */
/* Footer logo: never larger than the configured height, whichever image is used. */
.zee-footer__col--brand .custom-logo-link,
.zee-footer__col--brand .zee-footer-logo {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 14px 18px;
	margin-bottom: 22px;
	background: rgba(255, 255, 255, .97);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.zee-footer__col--brand .custom-logo-link img,
.zee-footer-logo__img { max-height: var(--zee-footer-logo-h, 56px); width: auto; height: auto; display: block; margin: 0; }
/* No image logo at all (text lockup fallback): already reads fine in white
   on the new dark background, so it gets no plate - only image logos do. */

/* On big monitors the type scales up a notch so the page does not read as
   "zoomed out". Everything sized in rem follows. */
@media (min-width: 1600px) { html { font-size: 17px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }

/* CTA band alignment and layout (Homepage panel) */
.zee-cta-band--stacked .zee-cta-band__inner { grid-template-columns: 1fr; }
.zee-cta-band--center .zee-cta-band__inner { text-align: center; justify-items: center; }
.zee-cta-band--center .zee-cta-band__text { margin-left: auto; margin-right: auto; }
.zee-cta-band--center .zee-cta-band__actions { justify-content: center; }
.zee-cta-band--center.zee-cta-band--split .zee-cta-band__inner { grid-template-columns: 1fr; }

/* 29. Text width overrides (Homepage panel) ---------------------------- */
:root { --zee-text-w: 1040px; }
.zee-text-wide { --zee-text-w: 1300px; }
.zee-text-full { --zee-text-w: 100%; }
.zee-text-full .zee-narrow,
.zee-text-full .zee-section-head--center { max-width: none; }


/* 30. Motion pass: choreography, scroll-driven depth, sticky stack, tilt --- */

/* Cross-fade between pages on same-origin navigation. Progressive: browsers
   without the View Transitions API simply navigate as before. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Tactile press on every button */
.zee-btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }

/* Hero entrance: runs on load, in sequence. Communicates hierarchy: label,
   then headline, then proof, then the action, then the form arrives. */
.zee-enter > * { opacity: 0; transform: translateY(18px); }
.zee-enter--card { opacity: 0; transform: translateY(24px) scale(.985); }
@media (prefers-reduced-motion: no-preference) {
	.zee-enter > * { animation: zee-rise .7s cubic-bezier(.16, 1, .3, 1) forwards; }
	.zee-enter > :nth-child(1) { animation-delay: .05s; }
	.zee-enter > :nth-child(2) { animation-delay: .15s; }
	.zee-enter > :nth-child(3) { animation-delay: .28s; }
	.zee-enter > :nth-child(4) { animation-delay: .38s; }
	.zee-enter > :nth-child(5) { animation-delay: .48s; }
	.zee-enter > :nth-child(n+6) { animation-delay: .56s; }
	.zee-enter--card { animation: zee-rise-card .9s cubic-bezier(.16, 1, .3, 1) .35s forwards; }
}
@media (prefers-reduced-motion: reduce) {
	.zee-enter > *, .zee-enter--card { opacity: 1; transform: none; }
}
@keyframes zee-rise      { to { opacity: 1; transform: none; } }
@keyframes zee-rise-card { to { opacity: 1; transform: none; } }

/* Headline words rise one after another. Used by the hero and by every
   section title that enters the viewport. */
.zee-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.zee-w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.zee-hero__slide.is-active .zee-w > span,
	.zee-section-head.is-visible .zee-w > span {
		animation: zee-word .7s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(var(--i, 0) * 60ms + .1s);
	}
	.zee-hero__slide:not(.is-active) .zee-w > span { transform: translateY(110%); }
	.zee-section-head:not(.is-visible) .zee-w > span { transform: translateY(110%); }
}
@keyframes zee-word { from { transform: translateY(110%); } to { transform: none; } }

/* Hero backdrop drifts slower than the page: a hint of depth, nothing more. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.zee-hero__bg {
			animation: zee-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
	}
}
@keyframes zee-parallax { to { transform: translateY(18vh) scale(1.04); } }

/* Trust band under the hero (moved out of the hero stack) */
/* Sits at the foot of the hero, spanning both columns, on the hero's own
   background: a hairline above it and nothing else, so it reads as part of
   the hero rather than a stray bar between sections. */
.zee-trustband { position: relative; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(16, 16, 16, .09); }
.zee-trustband .zee-trust { margin: 0; justify-content: flex-start; gap: 10px 36px; }

/* Visa process: cards stick and stack as you scroll, each earlier card
   settling back as the next arrives. Storytelling: the steps happen in order. */
@media (min-width: 1024px) {
	.zee-steps--stack {
		grid-template-columns: minmax(0, 720px);
		justify-content: center;
		gap: 0;
	}
	.zee-steps--stack .zee-step {
		position: sticky;
		top: calc(var(--zee-header-h) + 32px + var(--n, 0) * 14px);
		margin-bottom: 26vh;
		min-height: 240px;
		background: #1a1a1e;
		border-color: rgba(255, 255, 255, .14);
		transform-origin: top center;
	}
	.zee-steps--stack .zee-step:last-child { margin-bottom: 4vh; }
	.zee-steps--stack .zee-step:not(:last-child)::after { display: none; }
	.zee-steps--stack .zee-step__num { font-size: 2.6rem; }
	.zee-steps--stack .zee-step__title { font-size: 1.35rem; }
	.zee-steps--stack .zee-step__text { font-size: .98rem; max-width: 46ch; }
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.zee-steps--stack .zee-step:not(:last-child) {
				animation: zee-settle linear both;
				animation-timeline: view();
				animation-range: exit-crossing 0% exit-crossing 100%;
			}
		}
	}
}
@keyframes zee-settle { to { transform: scale(.94) translateY(-6px); opacity: .55; } }

/* Destination card tilt (values set from pointer position in JS) */
.zee-dest { transform-style: preserve-3d; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.zee-dest { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow var(--zee-transition), border-color var(--zee-transition); }
	.zee-dest:hover { transform: translateY(-5px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
	.zee-dest__media::after {
		content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
		background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 60%);
		transition: opacity var(--zee-transition);
	}
	.zee-dest:hover .zee-dest__media::after { opacity: 1; }
}

/* Why Europe: a bento rather than four identical cards. The first benefit
   leads at double width on a brand tint; applies only while the panel's
   column override is unset. */
@media (min-width: 1024px) {
	.zee-why-europe:not([class*="zee-cols-"]) .zee-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:first-child {
		grid-column: span 2;
		background: linear-gradient(135deg, rgba(var(--zee-primary-rgb), .10), rgba(var(--zee-primary-rgb), .02));
		border-color: rgba(var(--zee-primary-rgb), .18);
	}
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:first-child .zee-benefit__stat { font-size: 2.6rem; }
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:first-child .zee-benefit__text { max-width: 52ch; }
	/* Four items, three columns: lead spans two, the last spans two, so the grid
	   reads [xx x] / [x xx] with no empty cell. */
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:nth-child(4) {
		grid-column: span 2;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 28px;
		row-gap: 6px;
		align-items: start;
		align-content: center;   /* rows stay together instead of stretching apart */
	}
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:nth-child(4) .zee-benefit__stat  { grid-row: 1 / 3; align-self: center; margin: 0; }
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:nth-child(4) .zee-benefit__title { grid-column: 2; margin: 0; }
	.zee-why-europe:not([class*="zee-cols-"]) .zee-benefit:nth-child(4) .zee-benefit__text  { grid-column: 2; max-width: none; }
}

/* Services: first card leads on a tint so the row is not four equal boxes. */
@media (min-width: 1024px) {
	.zee-services:not([class*="zee-cols-"]) .zee-service-card:first-child {
		grid-column: span 2;
		background: var(--zee-heading);
		border-color: transparent;
	}
	.zee-services:not([class*="zee-cols-"]) .zee-service-card:first-child .zee-service-card__title a,
	.zee-services:not([class*="zee-cols-"]) .zee-service-card:first-child .zee-service-card__text { color: #fff; }
	.zee-services:not([class*="zee-cols-"]) .zee-service-card:first-child .zee-service-card__icon { background: rgba(255, 255, 255, .12); }
}

/* 31. Fresh pass: route rail, elevation tiers, measure, retired reveals ----
      The page had four habits worth breaking: a tracked-out all-caps label
      above every title, a per-word entrance on all nineteen headings, a
      staggered fade-up on thirteen card grids, and one radius plus one shadow
      on everything regardless of hierarchy. What replaces them is the route
      rail — a hairline with a tick, which marks a real position in the page
      rather than decorating the heading above it. -------------------------- */

/* 31.1 The rail. Named context, sentence case, no tracking. The tick sits on
        the same left edge as the content below it, so the rail reads as a
        position marker on the journey, not a caption. */
.zee-rail {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-family: var(--zee-font);
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zee-ink-50);
}
.zee-rail__tick {
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--zee-primary);
	position: relative;
}
.zee-rail__tick::after {
	content: "";
	position: absolute;
	inset-block: -3px;
	right: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--zee-primary);
}
.zee-section-head--center .zee-rail { justify-content: center; }
.zee-section--dark .zee-rail,
.zee-bg-primary .zee-rail { color: rgba(255, 255, 255, .7); }
.zee-section--dark .zee-rail__tick,
.zee-section--dark .zee-rail__tick::after { background: var(--zee-secondary); }
.zee-bg-primary .zee-rail__tick,
.zee-bg-primary .zee-rail__tick::after { background: #fff; }

/* The hero keeps its own label field; it gets the same treatment so the two
   never read as different systems. */
.zee-hero__eyebrow {
	font-family: var(--zee-font);
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zee-ink-50);
}

/* 31.2 Measure. A subtitle running the full 1040px is roughly 130 characters
        — nearly twice the comfortable maximum. The page width control is
        untouched; only the reading column is capped.

        The value is measured, not assumed: `ch` is the width of the zero
        glyph, and in Inter that is about a third wider than the average
        character, so a naive 68ch renders as 91 characters. 52ch measures
        out at roughly 69 — inside the 55–70 band for sustained reading. */
.zee-section-sub {
	max-width: min(100%, 52ch);
	line-height: 1.65;
	color: var(--zee-ink-50);
}
.zee-section-head--center .zee-section-sub { margin-inline: auto; }
.zee-section--dark .zee-section-sub,
.zee-bg-primary .zee-section-sub { color: rgba(255, 255, 255, .72); }


/* 31.4 Elevation and radius carry hierarchy. Cards sit flat on the page and
        lift only when you aim at them; the one feature panel per section is
        the only thing that starts raised. */
/* Only the genuinely card-like components. The Why-Europe bento tiles and the
   destination cards are deliberately not in this set: those carry their own
   structure and their own motion, and a shadow would flatten them back into
   the same kit as everything else. */
.zee-why-card,
.zee-service-card,
.zee-course-card,
.zee-post-card,
.zee-event-card,
.zee-schol-card {
	border-radius: var(--zee-radius-lg);
	box-shadow: var(--zee-shadow-sm);
	transition:
		transform var(--zee-dur-3) var(--zee-ease),
		box-shadow var(--zee-dur-3) var(--zee-ease),
		border-color var(--zee-dur-3) var(--zee-ease);
}
@media (hover: hover) and (pointer: fine) {
	.zee-why-card:hover,
	.zee-service-card:hover,
	.zee-course-card:hover,
	.zee-post-card:hover,
	.zee-event-card:hover,
	.zee-schol-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--zee-shadow);
	}
}
/* Keyboard users get the same lift, not only the focus ring. */
.zee-course-card:focus-visible,
.zee-post-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--zee-shadow);
}
/* The destination card tilts on pointer; keyboard focus gets the lift in
   elevation only, so it never fights the tilt transform. */
.zee-dest:focus-within { box-shadow: var(--zee-shadow-lg); }

/* 31.5 Inline text links lose the bare arrow glyph and gain an underline that
        draws in from the left — the affordance is in the motion, not in a
        character appended to the sentence. Card CTAs keep a mark, but as a
        bounded control rather than a floating arrow. */
.zee-link-arrow:not(.zee-link-arrow--btn)::after { content: none; }
.zee-link-arrow:not(.zee-link-arrow--btn) {
	position: relative;
	gap: 0;
}
.zee-link-arrow:not(.zee-link-arrow--btn)::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zee-dur-3) var(--zee-ease);
}
.zee-link-arrow:not(.zee-link-arrow--btn):hover::before,
.zee-link-arrow:not(.zee-link-arrow--btn):focus-visible::before { transform: scaleX(1); }

/* 31.6 Native selects need an explicit pair or Windows dark mode inverts only
        half of them. */
select,
.zee-select {
	background-color: var(--zee-white);
	color: var(--zee-ink);
	color-scheme: light;
}

/* 31.7 Drawers and overlays should not hand the scroll back to the page when
        they reach their own end. */
.zee-mobile-menu,
.zee-search-overlay,
.zee-wa__panel { overscroll-behavior: contain; }

/* 31.8 Anything pinned to a screen edge respects the notch and the home bar.
        The sticky bar already accounts for the bottom inset, and the floating
        widget is hidden below 1024px where the sticky bar takes over, so what
        is left is the landscape side inset and the full-height drawer. */
.zee-stickybar {
	padding-left: max(14px, env(safe-area-inset-left));
	padding-right: max(14px, env(safe-area-inset-right));
}
/* The drawer carries no padding of its own — its children do — so this adds
   the inset only when the device actually reports one. */
.zee-mobile-menu { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 31.9 Hairline rules replace the third and fourth card variant: where two
        light sections meet, one rule does the work a shadow was faking. */
.zee-section--light + .zee-section--light { border-top: 1px solid var(--zee-rule); }
/* The CTA band sits on indigo, so the rail inverts there. */
.zee-rail--light { color: rgba(255, 255, 255, .78); }
.zee-rail--light .zee-rail__tick,
.zee-rail--light .zee-rail__tick::after { background: #fff; }


/* 31.10 Ground-aware cards ------------------------------------------------
      Why-Us and Visa Process ship on a dark ground, and their card text was
      hardcoded white. The Homepage panel lets an editor switch either section
      to white or light, which strips `zee-section--dark` and leaves white text
      on a white card — the section silently becomes unreadable. These rules
      make both components follow whatever ground they are actually placed on,
      so the panel cannot produce an invisible section. */
.zee-section:not(.zee-section--dark) .zee-why-card,
.zee-section:not(.zee-section--dark) .zee-step {
	background: var(--zee-white);
	border-color: var(--zee-border);
}
.zee-section:not(.zee-section--dark) .zee-why-card__title,
.zee-section:not(.zee-section--dark) .zee-step__title {
	color: var(--zee-heading);
}
.zee-section:not(.zee-section--dark) .zee-why-card__text,
.zee-section:not(.zee-section--dark) .zee-step__text {
	color: var(--zee-ink-50);
}
.zee-section:not(.zee-section--dark) .zee-step__num { color: var(--zee-primary); }
.zee-section:not(.zee-section--dark) .zee-step:not(:last-child)::after {
	background: var(--zee-border);
}

/* 31.11 The last of the tracked-out caps -----------------------------------
      Removing the section eyebrows but leaving the footer headings and the
      counter labels in letterspaced capitals would just move the tell down the
      page. Both switch to sentence case and earn their hierarchy from weight
      and colour instead — the same decision as the rail. */
.zee-footer__title {
	font-family: var(--zee-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
}
.zee-counter__label {
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .72);
}

/* 31.12 Motion layer ------------------------------------------------------
      More motion, paid for carefully. Three rules keep it cheap:

      1. Only `transform` and `opacity` animate. Both are composited, so the
         browser never re-runs layout or paint for them.
      2. The depth effects run on `animation-timeline: view()`, which is
         driven by the compositor rather than a scroll listener. They cost no
         main-thread work at all, so they do not compete with the page load,
         and browsers without support simply skip them.
      3. Every entrance still unobserves itself after it fires, so nothing
         keeps watching once it has played.

      Reduced motion collapses all of it through the duration tokens. --------- */

/* -- A. Entrance curve ---------------------------------------------------
   A softer landing than the old ease: things decelerate into place instead
   of stopping dead. Slightly longer travel so the movement reads. */
[data-animate] {
	transform: translateY(32px);
	transition:
		opacity var(--zee-dur-5) var(--zee-ease-out),
		transform var(--zee-dur-5) cubic-bezier(.16, 1, .3, 1);
	transition-delay: var(--zee-delay, 0ms);
}
[data-animate="fade-left"]  { transform: translateX(-32px); }
[data-animate="fade-right"] { transform: translateX(32px); }
[data-animate="zoom"]       { transform: scale(.94); }

/* Cards arrive with a hint of scale as well as lift — the difference between
   something sliding in and something settling into place.

   Scoped to :not(.is-visible) rather than reset on .is-visible. Resetting
   would leave a two-class rule sitting above every `:hover` transform on
   these cards, which silently kills the hover lift once the card has
   revealed. Once the entrance is done, no rule from this block applies. */
.zee-why-card[data-animate]:not(.is-visible),
.zee-service-card[data-animate]:not(.is-visible),
.zee-course-card[data-animate]:not(.is-visible),
.zee-post-card[data-animate]:not(.is-visible),
.zee-event-card[data-animate]:not(.is-visible),
.zee-schol-card[data-animate]:not(.is-visible),
.zee-dest[data-animate]:not(.is-visible) { transform: translateY(32px) scale(.985); }

/* -- B. The rail draws itself as its heading arrives --------------------- */
.zee-section-head[data-animate] .zee-rail__tick {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zee-dur-4) var(--zee-ease-out) 120ms;
}
.zee-section-head--center[data-animate] .zee-rail__tick { transform-origin: center; }
.zee-section-head[data-animate].is-visible .zee-rail__tick { transform: scaleX(1); }

/* -- C. The Why-Us numerals become the feature ---------------------------
   Large ghost numerals that fill as you aim at the card. The number is the
   thing that moves, so the card body can stay still and readable. */
.zee-why-card { position: relative; overflow: hidden; }
.zee-why-card__num {
	font-size: 3.2rem;
	font-weight: 900;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--zee-secondary);
	transition:
		color var(--zee-dur-3) var(--zee-ease),
		transform var(--zee-dur-3) var(--zee-ease-out),
		opacity var(--zee-dur-3) var(--zee-ease);
}
@supports not ((-webkit-text-stroke: 1px red)) {
	.zee-why-card__num { color: var(--zee-secondary); }
}
@media (hover: hover) and (pointer: fine) {
	.zee-why-card:hover .zee-why-card__num {
		color: var(--zee-secondary);
		transform: translateY(-2px) scale(1.04);
	}
}
.zee-why-card:focus-within .zee-why-card__num { color: var(--zee-secondary); }
.zee-section:not(.zee-section--dark) .zee-why-card__num { -webkit-text-stroke-color: var(--zee-primary); }
.zee-section:not(.zee-section--dark) .zee-why-card:hover .zee-why-card__num { color: var(--zee-primary); }

/* A soft indigo wash follows the card into its hover state. */
.zee-why-card::before,
.zee-service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(420px circle at 50% 0%, rgba(var(--zee-primary-rgb), .16), transparent 70%);
	transition: opacity var(--zee-dur-4) var(--zee-ease);
}
.zee-why-card:hover::before,
.zee-why-card:focus-within::before,
.zee-service-card:hover::before,
.zee-service-card:focus-within::before { opacity: 1; }

/* -- D. Buttons answer the press ---------------------------------------- */
.zee-btn { position: relative; overflow: hidden; }
.zee-btn:active { transform: scale(.96); transition-duration: 100ms; }
.zee-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
	transform: translateX(-120%);
	transition: transform var(--zee-dur-4) var(--zee-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.zee-btn--primary:hover::after { transform: translateX(120%); }
}

/* -- E. Scroll-driven depth, all on the compositor -----------------------
   These need no JavaScript and no scroll listener; a browser without
   `animation-timeline` simply renders the static layout. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Card artwork drifts slightly slower than its card as it crosses the
		   viewport, which reads as depth rather than as an effect. */
		.zee-course-card__media img,
		.zee-post-card__media img,
		.zee-event-card__media img,
		.zee-dest__media img {
			animation: zee-media-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		/* The A–Z timeline spine fills as you read down it. Geometry matches
		   the ::before track exactly so the fill sits on the rail, not beside
		   it — the track is the same line at .28 opacity. */
		.zee-timeline::after {
			content: "";
			position: absolute;
			left: 15px; top: 8px; bottom: 8px;
			width: 2px;
			background: linear-gradient(180deg, var(--zee-primary), var(--zee-secondary));
			transform-origin: top center;
			animation: zee-spine linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 75%;
		}

		/* Counters lift into place against the gradient. */
		.zee-counter {
			animation: zee-counter-in linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 90%;
		}
	}
}
@keyframes zee-media-drift { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1.08) translateY(2%); } }
@keyframes zee-spine       { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zee-counter-in  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* -- F. The mobile drawer opens as a sequence --------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.zee-mobile-menu .zee-nav--mobile > li {
		opacity: 0;
		transform: translateX(18px);
		transition:
			opacity var(--zee-dur-3) var(--zee-ease-out),
			transform var(--zee-dur-3) var(--zee-ease-out);
	}
	.zee-mobile-menu.is-open .zee-nav--mobile > li { opacity: 1; transform: none; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(1) { transition-delay: 60ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(2) { transition-delay: 100ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(3) { transition-delay: 140ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(4) { transition-delay: 180ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(5) { transition-delay: 220ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(6) { transition-delay: 260ms; }
	.zee-mobile-menu.is-open .zee-nav--mobile > li:nth-child(n+7) { transition-delay: 300ms; }
}

/* -- G. Anything still moving stops moving when asked ------------------- */
@media (prefers-reduced-motion: reduce) {
	.zee-why-card__num,
	.zee-btn--primary::after,
	.zee-section-head .zee-rail__tick,
	.zee-mobile-menu .zee-nav--mobile > li {
		transform: none !important;
		animation: none !important;
	}
	.zee-btn--primary::after { display: none; }
}

/* 32. v1.11: fonts, hero, icons, surfaces, and the new blocks -------------
      Everything below builds on the tokens in section 1 and the motion
      tokens in 31. Every animated property here is transform, opacity or a
      one-off SVG stroke draw, and every entrance plays once. --------------- */

/* 32.1 Metric-matched fallbacks. Until Inter and Inter Tight arrive, text is
        set in local Arial scaled to the same width, so the hero headline
        wraps identically before and after the swap. Measured against the
        live site: Inter Tight 800/900 run within 1% of Arial Bold, Inter 400
        at 106% of Arial. This removed the 0.12 layout shift on load. */
@font-face {
	font-family: "Inter Tight Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 400 600;
	size-adjust: 100%;
	ascent-override: 96.88%;
	descent-override: 24.12%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Tight Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700 900;
	size-adjust: 100%;
	ascent-override: 96.88%;
	descent-override: 24.12%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 400 500;
	size-adjust: 106.1%;
	ascent-override: 91.31%;
	descent-override: 22.73%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 800;
	size-adjust: 101.9%;
	ascent-override: 95.07%;
	descent-override: 23.67%;
	line-gap-override: 0%;
}

/* 32.2 Hero. Content hangs from the top instead of re-centring beside the
        form, so a late font or a taller slide can never move it. */
.zee-hero__inner { align-items: start; }
.zee-hero__content { padding-top: 10px; }

.zee-hero__controls { display: flex; align-items: center; gap: 14px; margin: 22px 0 20px; }
.zee-hero__controls .zee-hero__dots { margin: 0; }
.zee-hero__pause {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--zee-border);
	border-radius: 50%;
	background: var(--zee-white);
	color: var(--zee-heading);
	cursor: pointer;
	transition: border-color var(--zee-dur-2) var(--zee-ease), transform var(--zee-dur-1) var(--zee-ease-out);
}
.zee-hero__pause::before { content: ""; position: absolute; inset: -6px; } /* 44px target */
.zee-hero__pause:hover { border-color: var(--zee-primary); }
.zee-hero__pause:active { transform: scale(.94); }
.zee-hero__pause-icon {
	position: absolute;
	width: 14px;
	height: 14px;
	transition:
		opacity var(--zee-dur-2) cubic-bezier(.2, 0, 0, 1),
		transform var(--zee-dur-2) cubic-bezier(.2, 0, 0, 1),
		filter var(--zee-dur-2) cubic-bezier(.2, 0, 0, 1);
}
.zee-hero__pause-icon--pause { stroke-width: 2.4; }
.zee-hero__pause-icon--play { opacity: 0; transform: scale(.25); filter: blur(4px); }
.zee-hero__pause.is-paused .zee-hero__pause-icon--pause { opacity: 0; transform: scale(.25); filter: blur(4px); }
.zee-hero__pause.is-paused .zee-hero__pause-icon--play { opacity: 1; transform: none; filter: none; }

/* 32.3 Drawn icons, sized per context. They inherit colour from the text. */
.zee-icon { display: block; flex: none; width: 1.25em; height: 1.25em; }
.zee-ico .zee-icon { width: 18px; height: 18px; }
.zee-footer__contact .zee-ico .zee-icon { margin-top: 3px; }
.zee-search-open .zee-icon { width: 19px; height: 19px; }
.zee-mobile-menu__close,
.zee-search-overlay__close { display: grid; place-items: center; }
.zee-mobile-menu__close .zee-icon { width: 26px; height: 26px; }
.zee-search-overlay__close .zee-icon { width: 22px; height: 22px; }
.zee-to-top .zee-icon { width: 20px; height: 20px; stroke-width: 2; }
.zee-hero__proof-mark .zee-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.zee-trust__ico .zee-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.zee-service-card__icon .zee-icon { width: 24px; height: 24px; color: var(--zee-primary); }
.zee-stickybar__side .zee-icon { width: 22px; height: 22px; }
.zee-stickybar__side .zee-icon--whatsapp { color: #128C4A; }
.zee-field__icon .zee-icon { width: 18px; height: 18px; }
.zee-chip__x .zee-icon { width: 13px; height: 13px; stroke-width: 2.2; }
.zee-star { display: inline-block; line-height: 0; font-size: 0; }
.zee-star .zee-icon { width: 16px; height: 16px; }
.zee-quote__play .zee-icon {
	width: 58px;
	height: 58px;
	padding: 18px 16px 18px 20px; /* optical centre for the triangle */
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--zee-primary);
	box-shadow: var(--zee-shadow);
	transition: transform var(--zee-dur-3) var(--zee-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	a:hover .zee-quote__play .zee-icon { transform: scale(1.06); }
}

/* 32.4 Browser surfaces, themed from the palette rather than left default. */
::selection { background: rgba(var(--zee-primary-rgb), .18); color: var(--zee-heading); }
.zee-section--dark ::selection,
.zee-footer ::selection,
.zee-cta-band ::selection,
.zee-story--lead ::selection { background: rgba(255, 255, 255, .24); color: #fff; }
html { accent-color: var(--zee-primary); scrollbar-color: rgba(var(--zee-primary-rgb), .38) var(--zee-light); }
input, textarea { caret-color: var(--zee-primary); }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
.zee-country-field[hidden],
.zee-stepper__panel[hidden] { display: none !important; }

/* 32.5 Two-step enquiry form. */
.zee-form--stepped .zee-form__subtitle { margin-bottom: 18px; }
.zee-stepper__progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.zee-stepper__count { margin: 0; font-size: .76rem; font-weight: 600; color: var(--zee-ink-50); font-variant-numeric: tabular-nums; }
.zee-stepper__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 88px; }
.zee-stepper__bars span { position: relative; height: 4px; border-radius: 4px; background: var(--zee-lighter); overflow: hidden; }
.zee-stepper__bars span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--zee-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zee-dur-4) var(--zee-ease-out);
}
.zee-stepper__bars span.is-done::after { transform: scaleX(1); }

.zee-stepper__panel { margin: 0; padding: 0; border: 0; min-width: 0; --from: 18px; }
.zee-stepper__panel.is-from-left { --from: -18px; }
.zee-stepper__panel.is-entering { animation: zee-step-in var(--zee-dur-4) var(--zee-ease-out) both; }
@keyframes zee-step-in { from { opacity: 0; transform: translateX(var(--from)); } to { opacity: 1; transform: none; } }
.zee-stepper__legend {
	padding: 0;
	margin: 0 0 14px;
	font-family: var(--zee-font-display);
	font-size: 1.08rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--zee-heading);
}
.zee-stepper__legend:focus { outline: none; }

.zee-stepper__plan { display: grid; gap: 18px; }
.zee-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zee-chip-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 14px;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-pill);
	background: var(--zee-white);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--zee-heading);
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--zee-dur-2) var(--zee-ease),
		border-color var(--zee-dur-2) var(--zee-ease),
		color var(--zee-dur-2) var(--zee-ease),
		transform var(--zee-dur-1) var(--zee-ease-out);
}
/* Each option is a <label>, so it must outrank `.zee-form__field label`,
   which would otherwise make it a block with the field-label type style. */
.zee-form__field .zee-chip-opt { display: inline-flex; margin: 0; font-size: .85rem; font-weight: 500; }
.zee-chip-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zee-chip-opt__flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.zee-chip-opt:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
	.zee-chip-opt:hover { border-color: rgba(var(--zee-primary-rgb), .55); }
}
.zee-chip-opt:has(input:checked) { background: var(--zee-primary); border-color: var(--zee-primary); color: #fff; }
.zee-chip-opt:has(input:focus-visible) { outline: 3px solid rgba(var(--zee-primary-rgb), .5); outline-offset: 2px; }
.zee-form__field.is-invalid .zee-chip-opt { border-color: #d33; }
.zee-form--stepped .zee-country-field { margin-top: 10px; }

.zee-stepper__hint { margin: 6px 0 0; font-size: .75rem; line-height: 1.45; color: var(--zee-ink-50); }

.zee-stepper__more { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--zee-rule); }
.zee-stepper__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	list-style: none;
	font-size: .84rem;
	font-weight: 600;
	color: var(--zee-primary);
	cursor: pointer;
}
.zee-stepper__summary::-webkit-details-marker { display: none; }
.zee-stepper__summary::before {
	content: "";
	width: 7px;
	height: 7px;
	margin: 0 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--zee-dur-2) var(--zee-ease-out);
}
.zee-stepper__more[open] > .zee-stepper__summary::before { transform: rotate(45deg); }
.zee-stepper__more[open] > .zee-form__grid { padding: 4px 0 6px; animation: zee-fade-rise var(--zee-dur-3) var(--zee-ease-out) both; }
@keyframes zee-fade-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zee-stepper__nav { display: flex; gap: 10px; margin-top: 18px; }
.zee-stepper__next { width: 100%; }
.zee-stepper__nav .zee-form__submit { flex: 1; width: auto; margin: 0; }
.zee-stepper__back { flex: none; }

/* The success moment: a ring and tick that draw themselves once. */
.zee-form__success-mark { width: 64px; height: 64px; background: none; }
.zee-form__success-mark svg { width: 64px; height: 64px; overflow: visible; }
.zee-form__success-ring {
	stroke: var(--zee-primary);
	stroke-width: 3;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	transform: rotate(-90deg);
	transform-origin: 26px 26px;
	animation: zee-draw .6s var(--zee-ease-out) .05s forwards;
}
.zee-form__success-tick {
	stroke: var(--zee-primary);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: zee-draw .42s var(--zee-ease-out) .45s forwards;
}
@keyframes zee-draw { to { stroke-dashoffset: 0; } }
.zee-btn--wa { background: #0E7A3F; border-color: #0E7A3F; color: #fff; } /* 5.4:1 with white; the brand green fails contrast */
.zee-btn--wa:hover { background: #0B6433; border-color: #0B6433; color: #fff; }

/* 32.6 Route map. The trunk draws from the home country to Milan, then each
        destination route draws in turn: the section's one authored moment. */
.zee-routes__layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.zee-routes__map { margin: 0; color: var(--zee-primary); }
.zee-routes__map[data-animate] { transform: none; }
.zee-routes__map svg { display: block; width: 100%; height: auto; overflow: visible; }
#zee-routes-dots circle { fill: rgba(var(--zee-primary-rgb), .16); }

.zee-routes__trunk,
.zee-routes__arc {
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.zee-routes__trunk { stroke-width: 3; transition: stroke-dashoffset .9s var(--zee-ease-out) .15s; }
.zee-routes__arc {
	stroke: currentColor;
	stroke-opacity: .5;
	stroke-width: 1.6;
	transition:
		stroke-dashoffset .7s var(--zee-ease-out) calc(.8s + var(--i, 0) * 30ms),
		stroke-opacity var(--zee-dur-2) var(--zee-ease) 0s,
		stroke-width var(--zee-dur-2) var(--zee-ease) 0s;
}
.zee-routes__map.is-visible .zee-routes__trunk,
.zee-routes__map.is-visible .zee-routes__arc { stroke-dashoffset: 0; }

.zee-routes__pt { opacity: 0; transition: opacity var(--zee-dur-3) var(--zee-ease-out) calc(1s + var(--i, 0) * 30ms); }
.zee-routes__pt--origin { transition-delay: 0s; }
.zee-routes__pt--hub { transition-delay: .9s; }
.zee-routes__map.is-visible .zee-routes__pt { opacity: 1; }
.zee-routes__dot { fill: var(--zee-white); stroke: currentColor; stroke-width: 2.5; }
.zee-routes__tag { fill: var(--zee-white); stroke: rgba(16, 16, 32, .14); stroke-width: 1; transition: stroke var(--zee-dur-2) var(--zee-ease); }
.zee-routes__pt.is-active .zee-routes__tag { stroke: currentColor; stroke-width: 2; }
.zee-routes__pt--hub .zee-routes__dot,
.zee-routes__pt--origin .zee-routes__dot { fill: currentColor; stroke: var(--zee-white); stroke-width: 3; }
.zee-routes__halo {
	fill: currentColor;
	opacity: 0;
	transform: scale(.5);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity var(--zee-dur-2) var(--zee-ease), transform var(--zee-dur-3) var(--zee-ease-out);
}
.zee-routes__pulse {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.zee-routes__map.is-visible .zee-routes__pulse { animation: zee-route-pulse 2.2s var(--zee-ease-out) 1.6s 3; } /* three beats, then still */
@keyframes zee-route-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.zee-routes__label {
	font-family: var(--zee-font);
	font-size: 19px;
	font-weight: 600;
	fill: var(--zee-heading);
	paint-order: stroke;
	stroke: var(--zee-white);
	stroke-width: 5px;
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity var(--zee-dur-2) var(--zee-ease);
}
.zee-routes__pt--origin .zee-routes__label,
.zee-routes__pt--hub .zee-routes__label { opacity: 1; font-weight: 700; }

.zee-routes__map svg.has-active .zee-routes__arc { stroke-opacity: .14; }
.zee-routes__map svg.has-active .zee-routes__arc.is-active { stroke-opacity: 1; stroke-width: 3; }
.zee-routes__pt.is-active .zee-routes__halo { opacity: .16; transform: scale(1); }
.zee-routes__pt.is-active .zee-routes__label { opacity: 1; }

.zee-routes__from { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .9rem; color: var(--zee-ink-50); }
.zee-routes__from strong { color: var(--zee-heading); }
.zee-routes__from .zee-flag,
.zee-routes__item .zee-flag { width: 22px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.zee-routes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.zee-routes__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var(--zee-radius);
	font-size: .92rem;
	font-weight: 500;
	color: var(--zee-heading);
	transition: background-color var(--zee-dur-2) var(--zee-ease), color var(--zee-dur-2) var(--zee-ease);
}
.zee-routes__item:hover,
.zee-routes__item:focus-visible { background: rgba(var(--zee-primary-rgb), .07); color: var(--zee-primary); }
.zee-routes__go {
	width: 16px;
	height: 16px;
	margin-left: auto;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--zee-dur-2) var(--zee-ease), transform var(--zee-dur-2) var(--zee-ease-out);
}
.zee-routes__item:hover .zee-routes__go,
.zee-routes__item:focus-visible .zee-routes__go { opacity: 1; transform: none; }
.zee-section--dark .zee-routes__label { fill: #fff; stroke: var(--zee-dark); }
.zee-section--dark .zee-routes__item,
.zee-section--dark .zee-routes__from strong { color: #fff; }

@media (max-width: 900px) {
	.zee-routes__layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.zee-routes__label { display: none; } /* too small to read; the list below names every country */
}

/* 32.7 Intake timeline. Nodes sit on one line that fills up to today. */
.zee-intake { position: relative; --gap: 22px; --node: 32px; }
.zee-intake[data-animate] { transform: none; }
.zee-intake__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.zee-intake__track {
	position: absolute;
	top: calc(var(--node) / 2 - 1.5px);
	left: calc(var(--node) / 2);
	/* From the first node's centre to the last node's centre. */
	right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - var(--node) / 2);
	height: 3px;
	border-radius: 3px;
	background: var(--zee-rule);
	overflow: hidden;
}
.zee-intake__fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--zee-primary), var(--zee-secondary));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s var(--zee-ease-out) .25s;
}
.zee-intake.is-visible.is-dated .zee-intake__fill { transform: scaleX(var(--zee-intake-progress, 0)); }

.zee-intake__item {
	position: relative;
	padding-top: calc(var(--node) + 16px);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--zee-dur-4) var(--zee-ease-out), transform var(--zee-dur-4) var(--zee-ease-out);
	transition-delay: calc(.15s + var(--i, 0) * 60ms);
}
.zee-intake.is-visible .zee-intake__item { opacity: 1; transform: none; }
.zee-intake__node {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--node);
	height: var(--node);
	border: 2px solid var(--zee-border);
	border-radius: 50%;
	background: var(--zee-white);
	color: #fff;
	transition: background-color var(--zee-dur-3) var(--zee-ease), border-color var(--zee-dur-3) var(--zee-ease), box-shadow var(--zee-dur-3) var(--zee-ease);
}
.zee-intake__tick { grid-area: 1 / 1; width: 16px; height: 16px; stroke-width: 2.6; opacity: 0; } /* same cell as the ::after dot, or it drops to a second row */
.zee-intake__item[data-state="done"] .zee-intake__node { background: var(--zee-primary); border-color: var(--zee-primary); }
.zee-intake__item[data-state="done"] .zee-intake__tick { opacity: 1; }
.zee-intake__item[data-state="next"] .zee-intake__node,
.zee-intake__item[data-state="now"] .zee-intake__node { border-color: var(--zee-primary); box-shadow: 0 0 0 6px rgba(var(--zee-primary-rgb), .14); }
.zee-intake__item[data-state="next"] .zee-intake__node::after,
.zee-intake__item[data-state="now"] .zee-intake__node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--zee-primary); grid-area: 1 / 1; }

.zee-intake__date { display: block; margin-bottom: 4px; font-size: .8rem; font-weight: 600; color: var(--zee-primary); font-variant-numeric: tabular-nums; }
.zee-intake__title { margin: 0 0 6px; font-size: 1.04rem; }
.zee-intake__note { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--zee-ink-50); max-width: 30ch; }
.zee-intake__status {
	display: inline-block;
	margin: 12px 0 0;
	padding: 3px 10px;
	border-radius: var(--zee-radius-pill);
	background: var(--zee-lighter);
	font-size: .72rem;
	font-weight: 600;
	color: var(--zee-ink-70);
}
.zee-intake__status:empty { display: none; }
.zee-intake__item[data-state="done"] .zee-intake__status { background: transparent; padding-left: 0; color: var(--zee-ink-50); }
.zee-intake__item[data-state="next"] .zee-intake__status,
.zee-intake__item[data-state="now"] .zee-intake__status { background: var(--zee-primary); color: #fff; }
.zee-intake__item[data-state="done"] .zee-intake__title { color: var(--zee-ink-70); }

@media (max-width: 900px) {
	/* Vertical: each item carries the segment to the next, filled when done. */
	.zee-intake__list { grid-template-columns: 1fr; gap: 0; }
	.zee-intake__track { display: none; }
	.zee-intake__item { padding: 0 0 28px calc(var(--node) + 18px); }
	.zee-intake__item:last-child { padding-bottom: 0; }
	.zee-intake__item:not(:last-child)::before {
		content: "";
		position: absolute;
		top: var(--node);
		bottom: 0;
		left: calc(var(--node) / 2 - 1.5px);
		width: 3px;
		background: var(--zee-rule);
	}
	.zee-intake__item[data-state="done"]:not(:last-child)::before { background: var(--zee-primary); }
	.zee-intake__note { max-width: none; }
}

/* 32.8 Cost comparison. */
.zee-costs {
	overflow: hidden;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-xl);
	background: var(--zee-white);
	box-shadow: var(--zee-shadow-sm);
}
.zee-costs__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.zee-costs__table th,
.zee-costs__table td { padding: 16px 22px; border-bottom: 1px solid var(--zee-rule); text-align: left; vertical-align: middle; }
.zee-costs__table thead th { background: var(--zee-light); font-size: .78rem; font-weight: 600; color: var(--zee-ink-50); white-space: nowrap; }
.zee-costs__table tbody th { font-weight: 700; color: var(--zee-heading); }
.zee-costs__table td { color: var(--zee-ink-70); font-variant-numeric: tabular-nums; }
.zee-costs__table tbody tr:last-child > * { border-bottom: 0; }
.zee-costs__table tbody tr { transition: background-color var(--zee-dur-2) var(--zee-ease); }
@media (hover: hover) and (pointer: fine) {
	.zee-costs__table tbody tr:hover { background: rgba(var(--zee-primary-rgb), .035); }
}
.zee-costs__country { display: inline-flex; align-items: center; gap: 10px; }
.zee-costs__country .zee-flag { width: 24px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

@media (max-width: 720px) {
	/* One card per country, each figure labelled by its column. */
	.zee-costs { overflow: visible; border: 0; background: none; box-shadow: none; }
	.zee-costs__table,
	.zee-costs__table tbody,
	.zee-costs__table tr,
	.zee-costs__table th,
	.zee-costs__table td { display: block; }
	.zee-costs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.zee-costs__table tbody tr {
		margin-bottom: 12px;
		padding: 6px 18px;
		border: 1px solid var(--zee-border);
		border-radius: var(--zee-radius-lg);
		background: var(--zee-white);
	}
	.zee-costs__table tbody th { padding: 12px 0 10px; border-bottom: 1px solid var(--zee-rule); }
	.zee-costs__table td { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; text-align: right; }
	.zee-costs__table td::before { content: attr(data-label); font-size: .8rem; font-weight: 600; color: var(--zee-ink-50); text-align: left; }
	.zee-costs__table tbody tr > :last-child { border-bottom: 0; }
}

/* 32.9 Student stories. The lead story is the one dark surface in the
        section, so it is the one remembered. */
.zee-stories { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--zee-gap); align-items: start; }
.zee-stories--single { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }
.zee-story {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border: 1px solid var(--zee-border);
	border-radius: var(--zee-radius-lg);
	background: var(--zee-white);
	box-shadow: var(--zee-shadow-sm);
}
.zee-story__quote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: .93rem; line-height: 1.65; color: var(--zee-ink-70); }
.zee-story__quote p { margin: 0 0 .7em; }
.zee-story__quote p:last-child { margin: 0; }
.zee-story__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.zee-story__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(var(--zee-primary-rgb), .1);
	font-size: .82rem;
	font-weight: 700;
	color: var(--zee-primary);
}
.zee-story__avatar img,
.zee-story__avatar .zee-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.zee-story__meta { display: grid; gap: 2px; line-height: 1.3; }
.zee-story__meta strong { font-size: .92rem; color: var(--zee-heading); }
.zee-story__meta span { font-size: .8rem; color: var(--zee-ink-50); }
.zee-story__video { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--zee-radius); }
.zee-story__video img,
.zee-story__video .zee-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }

.zee-story--lead {
	position: sticky;
	top: calc(var(--zee-header-h) + 24px);
	gap: 20px;
	padding: clamp(28px, 3.4vw, 44px);
	border-color: transparent;
	border-radius: var(--zee-radius-xl);
	background: var(--zee-footer-bg);
	box-shadow: var(--zee-shadow-lg);
	overflow: hidden;
}
.zee-story--lead::before {
	content: "\201C";
	position: absolute;
	top: -.12em;
	right: .14em;
	font-family: var(--zee-font-display);
	font-size: 11rem;
	font-weight: 900;
	line-height: 1;
	color: rgba(255, 255, 255, .06);
	pointer-events: none;
}
.zee-story--lead .zee-story__quote { font-family: var(--zee-font-display); font-size: clamp(1.14rem, 1rem + .55vw, 1.42rem); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: #fff; }
.zee-story--lead .zee-story__meta strong { color: #fff; }
.zee-story--lead .zee-story__meta span { color: rgba(255, 255, 255, .66); }
.zee-story--lead .zee-story__avatar { background: rgba(255, 255, 255, .12); color: #fff; }
.zee-story--lead .zee-star { color: rgba(255, 255, 255, .22); }
.zee-story--lead .zee-star.is-on { color: #fff; }

.zee-stories__wall { columns: 2 260px; column-gap: var(--zee-gap); }
.zee-stories__wall .zee-story { break-inside: avoid; margin-bottom: var(--zee-gap); }
.zee-stories__wall:focus-visible { outline: 3px solid rgba(var(--zee-primary-rgb), .5); outline-offset: 6px; border-radius: var(--zee-radius-lg); }

@media (max-width: 900px) {
	.zee-stories { grid-template-columns: minmax(0, 1fr); }
	.zee-story--lead { position: relative; top: auto; }
	/* A swipeable row on phones, one card and a peek of the next. */
	.zee-stories__wall {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(86%, 360px);
		gap: 14px;
		columns: auto;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 2px 2px 10px;
	}
	.zee-stories__wall::-webkit-scrollbar { display: none; }
	.zee-stories__wall .zee-story { margin: 0; scroll-snap-align: start; }
}

/* 32.10 Reduced motion: every new entrance lands in its final state. */
@media (prefers-reduced-motion: reduce) {
	.zee-routes__trunk,
	.zee-routes__arc { stroke-dashoffset: 0; transition: none; }
	.zee-routes__pt,
	.zee-intake__item { opacity: 1; transform: none; transition: none; }
	.zee-routes__pulse { animation: none; }
	.zee-intake__fill { transition: none; }
	.zee-stepper__panel.is-entering,
	.zee-stepper__more[open] > .zee-form__grid { animation: none; }
	.zee-form__success-ring,
	.zee-form__success-tick { animation: none; stroke-dashoffset: 0; }
	.zee-hero__pause-icon { transition: none; }
}