/* SEED SCHOOL brand tokens — navy background + SEED Green accent, verified
   2026-08-02 against the real logo (pixel-sampled, see CLAUDE.md §19a) and
   against the real Rubik font file's cmap for full RU/KZ/EN coverage (see
   CLAUDE.md §19a-1 — Gabarito has zero Cyrillic glyphs, do not reintroduce
   it as --seed-font). Mirrors the same values set in Elementor's own Global
   Colors/Typography/Variables (Site Settings), kept here for the theme's
   own non-Elementor-controlled markup (e.g. this file's own utility
   classes below). */

:root {
	--seed-navy: #0B4A2A;
	--seed-navy-light: #0F5C36;
	--seed-navy-500: #4A6357;
	--seed-navy-50: #E3EDE6;
	--seed-sky: #45A449;
	--seed-sky-tint: #F0F7F2;
	--seed-amber: #f2a93b;
	--seed-mint-tint: #e7f6e4;
	--seed-green: #14864b;
	--seed-green-light: #45a449;
	--seed-soft-neutral: #F3F8F4;
	--seed-text-dark: #0b1f33;
	--seed-white: #ffffff;
	--seed-radius: 1.5rem;
	--seed-shadow: 0 20px 45px -20px rgba(11, 74, 42, 0.25);
	--seed-font: "Rubik", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--seed-font);
	color: var(--seed-navy);
	background: var(--seed-white);
	line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }

.seed-container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Header --- */
.seed-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--seed-navy-50); }
.seed-header__bar { display: none; background: var(--seed-sky-tint); font-size: 0.8rem; }
.seed-header__bar-inner { display: flex; justify-content: flex-end; gap: 1.5rem; height: 2.25rem; align-items: center; }
.seed-header__bar-link:hover { color: var(--seed-sky); }
.seed-header__main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 5rem; }
.seed-logo__text { font-weight: 800; font-size: 1.25rem; color: var(--seed-navy); }
.seed-logo__text--light { color: var(--seed-white); }
.seed-nav { display: none; gap: 1.5rem; font-weight: 600; font-size: 0.9rem; }
.seed-nav a:hover { color: var(--seed-sky); }
.seed-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.seed-lang-switch { display: none; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; }
.seed-lang-switch__item { padding: 0.25rem 0.5rem; border-radius: 999px; color: var(--seed-navy-500); }
.seed-lang-switch__item.is-active { background: var(--seed-navy); color: var(--seed-white); }
.seed-hide-mobile { display: none; }
.seed-menu-toggle { display: flex; flex-direction: column; gap: 4px; width: 2rem; height: 2rem; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.seed-menu-toggle span { width: 22px; height: 2px; background: var(--seed-navy); transition: transform .2s, opacity .2s; }
.seed-mobile-menu { position: fixed; inset: 5rem 0 0 0; background: var(--seed-white); transform: translateX(100%); transition: transform .25s ease; z-index: 25; overflow-y: auto; }
.seed-mobile-menu.is-open { transform: translateX(0); }
.seed-mobile-menu nav { display: flex; flex-direction: column; padding: 1.5rem; gap: 1.25rem; font-size: 1.1rem; font-weight: 700; }

@media (min-width: 768px) {
	.seed-header__bar { display: block; }
	.seed-nav { display: flex; }
	.seed-lang-switch { display: flex; }
	.seed-hide-mobile { display: inline-flex; }
	.seed-menu-toggle { display: none; }
}

/* --- Buttons --- */
.seed-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s; }
.seed-btn:hover { transform: translateY(-2px); }
.seed-btn--primary { background: var(--seed-amber); color: var(--seed-navy); }
.seed-btn--outline-light { border-color: var(--seed-white); color: var(--seed-white); }
.seed-btn--outline-light:hover { background: var(--seed-white); color: var(--seed-navy); }
.seed-btn--lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

/* --- Sections & layout --- */
.seed-section { padding: 4rem 0; }
.seed-section--muted { background: var(--seed-sky-tint); }
.seed-section-heading { max-width: 42rem; margin: 0 auto 2.5rem; text-align: center; }
.seed-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--seed-sky); margin-bottom: 0.5rem; }
.seed-eyebrow--light { color: var(--seed-sky); }
.seed-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.seed-grid--3 { grid-template-columns: repeat(1, 1fr); }
.seed-grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .seed-grid--3 { grid-template-columns: repeat(2, 1fr); } .seed-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .seed-grid--3 { grid-template-columns: repeat(3, 1fr); } .seed-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.seed-split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .seed-split { grid-template-columns: 1fr 1fr; } }

.seed-card { background: var(--seed-white); border: 1px solid var(--seed-navy-50); border-radius: var(--seed-radius); padding: 1.75rem; box-shadow: var(--seed-shadow); }
.seed-card--hover { transition: transform .2s, box-shadow .2s, border-color .2s; }
.seed-card--hover:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -25px rgba(11,74,42,0.35); border-color: var(--seed-green); }
.seed-card h3 { font-size: 1.1rem; }
.seed-card p { color: var(--seed-navy-500); font-size: 0.95rem; margin-bottom: 0; }
.seed-badge { display: inline-block; background: var(--seed-mint-tint); color: var(--seed-green); font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0.75rem 0 0.5rem; }

/* --- Placeholder image blocks (no stock photos) --- */
.seed-placeholder { aspect-ratio: 4 / 3; border-radius: var(--seed-radius); background: linear-gradient(135deg, var(--seed-sky-tint), var(--seed-mint-tint)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; margin-bottom: 1rem; }
.seed-placeholder span { font-size: 0.85rem; font-weight: 600; color: var(--seed-navy-500); }
.seed-placeholder--tall { aspect-ratio: 3 / 4; margin-bottom: 0; }

/* --- Hero --- */
.seed-hero { background: linear-gradient(160deg, var(--seed-navy), #04476f); color: var(--seed-white); padding: 5rem 0 4rem; }
.seed-hero__inner { max-width: 46rem; }
.seed-hero h1 { font-size: 2.25rem; }
.seed-highlight { color: var(--seed-sky); }
.seed-hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.85); max-width: 38rem; }
.seed-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.seed-hero__badges { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; }
.seed-hero__badges span { background: rgba(255,255,255,0.1); padding: 0.35rem 0.9rem; border-radius: 999px; }
@media (min-width: 768px) { .seed-hero h1 { font-size: 3rem; } }

.seed-page-hero { background: var(--seed-navy); color: var(--seed-white); padding: 3.5rem 0; }
.seed-page-hero h1 { font-size: 2rem; }
.seed-page-hero p { color: rgba(255,255,255,0.8); max-width: 40rem; }

.seed-detail-hero { background: var(--seed-navy); color: var(--seed-white); padding: 4rem 0; }
.seed-detail-hero h1 { font-size: 2rem; }
.seed-detail-hero p { color: rgba(255,255,255,0.85); }

.seed-cta-final { background: var(--seed-navy); color: var(--seed-white); padding: 4rem 0; text-align: center; }
.seed-cta-final h2 { font-size: 1.75rem; }
.seed-cta-final .seed-hero__actions { justify-content: center; }

.seed-link-arrow { display: inline-block; font-weight: 700; color: var(--seed-sky); margin-top: 0.5rem; }

.seed-breadcrumbs { padding: 1rem 1.25rem 0; font-size: 0.85rem; color: var(--seed-navy-500); }
.seed-breadcrumbs__inner a { color: var(--seed-sky); }

.seed-prose { max-width: 48rem; margin: 0 auto; }
.seed-prose h2 { margin-top: 2rem; }

/* --- Testimonials --- */
.seed-testimonials { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.seed-testimonial-slide { flex: 0 0 min(100%, 24rem); scroll-snap-align: start; background: var(--seed-white); border-radius: var(--seed-radius); padding: 2rem; box-shadow: var(--seed-shadow); }
.seed-testimonial-slide p { font-style: italic; color: var(--seed-navy-500); margin: 0; }

/* --- Contacts --- */
.seed-contact-list { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.25rem 0; }
.seed-contact-list a span { display: block; font-size: 0.75rem; color: var(--seed-navy-500); }
.seed-map { width: 100%; height: 260px; border: 0; border-radius: var(--seed-radius); margin-top: 1rem; }

/* --- Forms --- */
.seed-form { display: flex; flex-direction: column; gap: 1rem; }
.seed-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--seed-navy-500); }
.seed-form input[type="text"], .seed-form input[type="tel"], .seed-form input[type="email"], .seed-form textarea {
	font-family: inherit; font-size: 1rem; padding: 0.75rem 1rem; border-radius: 0.9rem; border: 1px solid var(--seed-navy-50); color: var(--seed-navy);
}
.seed-form input:focus, .seed-form textarea:focus { outline: 2px solid var(--seed-sky); outline-offset: 1px; }
.seed-form__honeypot { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.seed-form__consent { flex-direction: row; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
.seed-form__status { padding: 0.9rem 1rem; border-radius: 0.9rem; font-size: 0.9rem; }
.seed-form__status[data-state="success"] { background: var(--seed-mint-tint); color: var(--seed-green); }
.seed-form__status[data-state="error"], .seed-form__status[data-state="delivery-error"], .seed-form__status[data-state="rate-limited"] { background: #fdecea; color: #b3261e; }
.seed-form__status a { font-weight: 700; text-decoration: underline; }

/* --- WhatsApp float button --- */
.seed-whatsapp-float { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 40; transition: transform .15s; }
.seed-whatsapp-float:hover { transform: scale(1.08); }

/* --- Footer --- */
.seed-footer { background: var(--seed-navy); color: var(--seed-white); margin-top: 4rem; }
.seed-footer__cta { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; padding: 3rem 1.25rem; }
.seed-footer__cta h2 { font-size: 1.5rem; }
@media (min-width: 640px) { .seed-footer__cta { flex-direction: row; justify-content: space-between; text-align: left; } }
.seed-footer__grid { display: grid; gap: 2.5rem; padding: 3rem 1.25rem; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 640px) { .seed-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.seed-footer__brand p { color: rgba(255,255,255,0.7); font-size: 0.9rem; max-width: 20rem; }
.seed-footer__socials { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.seed-footer__socials a { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.seed-footer h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 0.75rem; }
.seed-footer nav, .seed-footer__contact { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.seed-footer nav a:hover, .seed-footer__contact a:hover { color: var(--seed-white); }
.seed-footer__contact-note { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.seed-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.25rem; font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* --- Scroll-reveal animation (progressive enhancement; content is
   already visible without JS, matching this project's accessibility
   posture) --- */
.seed-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--seed-delay, 0ms); }
.seed-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.seed-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- SEED Video Hero widget ---------------------------------------- */
.seed-video-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 90vh;
	overflow: hidden;
	background: var(--seed-navy);
	color: var(--seed-white);
	isolation: isolate;
}
.seed-video-hero__media { position: absolute; inset: 0; z-index: 0; }

/* Decorative parallax shapes — injected at runtime by hero-parallax.js as
   a sibling overlay of the hero widget, never touching its own markup.
   Kept low-opacity and edge-positioned so they never compete with the
   hero's text/CTAs, and pointer-events:none so they can't block clicks. */
.seed-hero-parallax-host { position: relative; overflow: hidden; }
.seed-hero-parallax-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.seed-hero-shape { position: absolute; will-change: transform; }
.seed-hero-shape--ring {
	top: -6rem;
	right: -4rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	border: 1.5px solid var(--seed-green);
	opacity: 0.18;
}
.seed-hero-shape--leaf {
	bottom: -5rem;
	left: -3rem;
	width: 16rem;
	height: 16rem;
	border-radius: 62% 38% 30% 70% / 58% 42% 58% 42%;
	border: 1.5px solid var(--seed-sky);
	opacity: 0.16;
}
.seed-hero-shape--dot {
	top: 18%;
	right: 12%;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: var(--seed-sky);
	opacity: 0.4;
}
@media (max-width: 767px) {
	.seed-hero-shape--ring { width: 14rem; height: 14rem; }
	.seed-hero-shape--leaf { width: 10rem; height: 10rem; }
}
.seed-video-hero__fallback,
.seed-video-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.seed-video-hero__fallback { z-index: 1; }
.seed-video-hero__video { z-index: 2; opacity: 0; transition: opacity .6s ease; }
.seed-video-hero__video.is-active { opacity: 1; }
/* Desktop/mobile source swap — actual fragment sources are injected by
   seedVideoHero (assets/js/main.js) from the data-*-fragments attributes;
   this only decides which <video> element is visible per breakpoint. */
.seed-video-hero__video--mobile { display: none; }
@media (max-width: 767px) {
	.seed-video-hero__video--desktop { display: none; }
	.seed-video-hero__video--mobile { display: block; }
}
/* No JS / reduced motion: hide both <video> elements entirely and rely on
   the fallback <img> only — set by seedVideoHero adding .seed-js-video to
   <html> once it confirms motion is allowed; absence of that class (no JS,
   or prefers-reduced-motion) means the videos simply never receive a src
   and stay invisible behind the fallback image, never a blank frame. */
html:not(.seed-js-video) .seed-video-hero__video { display: none; }

.seed-video-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(180deg, rgba(2,26,58,calc(var(--seed-hero-overlay, 55) / 100 * 0.9)) 0%, rgba(2,26,58,calc(var(--seed-hero-overlay, 55) / 100)) 100%);
}

.seed-video-hero__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	max-width: 42rem;
	padding: 3rem 1.25rem 4rem;
	margin: 0 auto 0 0;
}
.seed-video-hero__content--center { align-items: center; margin: 0 auto; text-align: center; }
@media (min-width: 1024px) { .seed-video-hero__content { padding: 3rem 4rem 5rem; } }

.seed-video-hero__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--seed-sky);
}
.seed-video-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
.seed-video-hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.85); max-width: 36rem; }
.seed-video-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.seed-video-hero__cta { display: inline-flex; align-items: center; padding: 0.85rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; transition: transform .15s ease, background .15s ease; }
.seed-video-hero__cta:hover { transform: translateY(-1px); }
.seed-video-hero__cta--primary { background: var(--seed-green); color: var(--seed-white); }
.seed-video-hero__cta--secondary { border: 1.5px solid rgba(255,255,255,0.7); color: var(--seed-white); }
.seed-video-hero__cta--secondary:hover { background: rgba(255,255,255,0.12); }

/* Text-reveal entrance (opt-in per widget instance, always disabled under
   reduced-motion regardless of the widget's own toggle). */
.seed-video-hero__content--reveal > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.seed-video-hero__content--reveal.is-revealed > * { opacity: 1; transform: none; }
.seed-video-hero__content--reveal > *:nth-child(1) { transition-delay: 0ms; }
.seed-video-hero__content--reveal > *:nth-child(2) { transition-delay: 90ms; }
.seed-video-hero__content--reveal > *:nth-child(3) { transition-delay: 180ms; }
.seed-video-hero__content--reveal > *:nth-child(4) { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
	.seed-video-hero__content--reveal > * { opacity: 1; transform: none; transition: none; }
}

/* --- SEED Header: transparent-over-hero -> solid navy on scroll -------
   #seed-header-row is the element_id given to the Theme Builder Header's
   root container, which Elementor renders as data-id="seed-header-row"
   AND (per Novamira's element_id convention) a matching class. Both
   selectors are included since which one actually lands depends on the
   exact Elementor version's DOM output — belt and suspenders, verified
   directly on the live site once built rather than assumed. */
[data-id="seed-header-row"],
.s-seed-header-row {
	position: sticky;
	top: 0;
	z-index: 500;
	background: transparent;
	transition: background-color .35s ease, box-shadow .35s ease;
}
[data-id="seed-header-row"].seed-header--scrolled,
.s-seed-header-row.seed-header--scrolled {
	background-color: var(--seed-navy);
	box-shadow: 0 8px 30px -12px rgba(11, 74, 42, 0.45);
}
/* No-JS fallback: never leave the header invisible-on-navy-text if the
   scroll script hasn't run yet — default to the solid, always-readable
   state until JS confirms it's safe to go transparent. */
html:not(.seed-js-header) [data-id="seed-header-row"],
html:not(.seed-js-header) .s-seed-header-row {
	background-color: var(--seed-navy);
}

/* --- Language switcher: disabled state for locales with no real content
   yet (see inc/widget-lang-switcher.php::WORKING_LOCALES) — visually
   present so the site's multilingual intent is clear, but not a live link,
   so it can never 404 for a real visitor. --- */
.seed-lang-switch__item.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Accessibility: visible focus on every interactive element touched by
   keyboard navigation, across Header/Footer/404/forms — WCAG 2.2 AA. Uses
   :focus-visible (keyboard/AT only, not mouse clicks) with a :focus
   fallback for browsers that don't support it yet. --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--seed-green-light);
	outline-offset: 2px;
	border-radius: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}
.seed-header a:focus-visible,
.seed-footer a:focus-visible {
	outline-color: var(--seed-white);
}

[data-id="seed-header-logo"] img,
[data-id="seed-footer-logo"] img {
	height: 44px;
	width: auto;
	max-width: none;
}

/* --- Header row sizing: Elementor Containers, when given no explicit
   size, split available width EVENLY among siblings via an internal
   --container-widget-width custom property — not standard flexbox
   content-based auto-sizing. That silently squeezed the 7-item nav menu
   into ~445px (1/3 of the row) and forced it to wrap onto 7 lines. This
   overrides it with plain, standard flexbox: logo/actions hug their own
   content, nav takes whatever space is left. !important is deliberate —
   it must win over Elementor's own generated per-page CSS file, which is
   otherwise a losing specificity fight. --- */
[data-id="seed-header-logo-col"] {
	flex: 0 0 auto !important;
	width: auto !important;
}
[data-id="seed-header-actions-col"] {
	flex: 0 0 auto !important;
	width: auto !important;
}
[data-id="seed-header-nav-col"] {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
}

/* The nav-menu widget has no typography control of its own set explicitly,
   so it silently inherited the "Primary" Global Typography preset — which
   is the 56px/800 Display/H1 style (see Elementor Site Settings). That's
   correct for actual headings, wrong for a nav bar. Explicit override. */
.elementor-nav-menu .elementor-item {
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* --- Footer: same two bugs as the header (Container equal-width split;
   unstyled widgets inheriting the 56px/800 "Primary" global typography)
   — applied preemptively here rather than rediscovering each one by one. --- */
[data-id="seed-footer-col-brand"],
[data-id="seed-footer-col-nav"],
[data-id="seed-footer-col-contacts"],
[data-id="seed-footer-col-map"] {
	flex: 1 1 240px !important;
	width: auto !important;
	min-width: 0;
}
[data-id="seed-footer-cta"] {
	flex-wrap: wrap;
}
.seed-footer .elementor-nav-menu .elementor-item,
[data-id="seed-footer-phone-box"] .elementor-icon-box-title,
[data-id="seed-footer-whatsapp-box"] .elementor-icon-box-title,
[data-id="seed-footer-email-box"] .elementor-icon-box-title,
[data-id="seed-404-phone"] .elementor-icon-box-title,
[data-id="seed-404-whatsapp"] .elementor-icon-box-title,
[data-id="seed-footer-map-links"] .elementor-icon-list-text,
[data-id="seed-footer-legal"] .elementor-icon-list-text {
	font-size: 14px !important;
	font-weight: 500 !important;
}
[data-id="seed-footer-mission"],
[data-id="seed-footer-address"] {
	font-size: 14px !important;
}
[data-id="seed-footer-mission"] p,
[data-id="seed-footer-address"] p {
	font-size: 14px !important;
	margin: 0;
}

/* --- SEED Student Journey widget ------------------------------------ */
.seed-journey {
	background: linear-gradient(180deg, var(--seed-navy) 0%, var(--seed-navy-light) 100%);
	color: var(--seed-white);
	padding: 5rem 1.25rem;
}
.seed-journey__intro { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.seed-journey__eyebrow { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--seed-sky); margin-bottom: 0.5rem; }
.seed-journey__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin: 0; }

/* Desktop: sticky storytelling. Natural document scroll only — the media
   column is sticky (stays put while its own scroll-space passes), and an
   IntersectionObserver (assets/js/main.js) swaps which panel/media/dot is
   "active" as the user scrolls past each panel's own normal-flow space.
   Nothing forces or hijacks the scroll position itself. */
.seed-journey__mobile { display: block; }
.seed-journey__desktop { display: none; }
@media (min-width: 1024px) {
	.seed-journey__mobile { display: none; }
	.seed-journey__desktop {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
		gap: 3rem;
		max-width: 1180px;
		margin: 0 auto;
	}
	.seed-journey__rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		position: sticky;
		top: 45vh;
		height: fit-content;
	}
	.seed-journey__rail-dot {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		background: rgba(255,255,255,0.25);
		transition: background .3s ease, transform .3s ease;
	}
	.seed-journey__rail-dot.is-active {
		background: var(--seed-journey-accent, var(--seed-green));
		transform: scale(1.4);
	}
	.seed-journey__panels { display: flex; flex-direction: column; }
	.seed-journey__panel {
		min-height: 70vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1rem;
		opacity: 0.35;
		transition: opacity .4s ease;
	}
	.seed-journey__panel.is-active { opacity: 1; }
	.seed-journey__media {
		position: sticky;
		top: 15vh;
		height: 70vh;
		border-radius: var(--seed-radius);
		overflow: hidden;
	}
	.seed-journey__media-item {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity .5s ease;
	}
	.seed-journey__media-item.is-active { opacity: 1; }
	.seed-journey__media-item img { width: 100%; height: 100%; object-fit: cover; }
}

.seed-journey__grade {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--seed-journey-accent, var(--seed-green-light));
	background: rgba(255,255,255,0.08);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	width: fit-content;
}
.seed-journey__stage-title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; margin: 0.5rem 0 0; }
.seed-journey__body { color: rgba(255,255,255,0.8); max-width: 32rem; margin: 0; }
.seed-journey__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--seed-journey-accent, var(--seed-green-light));
	width: fit-content;
}
.seed-journey__cta:hover { text-decoration: underline; }
.seed-journey__media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--seed-journey-accent, var(--seed-green)) 25%, var(--seed-navy-light));
	border-radius: var(--seed-radius);
}
.seed-journey__media-placeholder span { font-weight: 700; color: rgba(255,255,255,0.85); }

/* Mobile: plain vertical cards, no sticky pin at all. */
.seed-journey__mobile { display: flex; flex-direction: column; gap: 1.5rem; max-width: 34rem; margin: 0 auto; }
.seed-journey__card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--seed-radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.seed-journey__card-media { aspect-ratio: 4/3; border-radius: calc(var(--seed-radius) - 0.5rem); overflow: hidden; }
.seed-journey__card-media img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.seed-journey__panel { opacity: 1; transition: none; }
	.seed-journey__media-item { transition: none; }
	.seed-journey__rail-dot { transition: none; }
}

/* --- Homepage programs grid (post 18, screen "Чему мы учим") ---------
   Same Elementor v3 Container sizing quirk documented earlier in this
   project: a container's own `width` % control and `flex_wrap` setting
   don't reliably emit real CSS on unsized flex children — the browser
   falls back to flex-basis:auto (full width) and nowrap regardless of
   what's set in the editor. Direct data-id CSS is the proven fix. */
[data-id="seed-s6-grid"] { flex-wrap: wrap !important; }
[data-id="seed-s6-c1"], [data-id="seed-s6-c2"], [data-id="seed-s6-c3"],
[data-id="seed-s6-c4"], [data-id="seed-s6-c5"] {
	flex: 0 0 calc(33.333% - 16px) !important;
	width: calc(33.333% - 16px) !important;
}
@media (max-width: 900px) {
	[data-id="seed-s6-c1"], [data-id="seed-s6-c2"], [data-id="seed-s6-c3"],
	[data-id="seed-s6-c4"], [data-id="seed-s6-c5"] {
		flex: 0 0 calc(50% - 12px) !important;
		width: calc(50% - 12px) !important;
	}
}
@media (max-width: 600px) {
	[data-id="seed-s6-c1"], [data-id="seed-s6-c2"], [data-id="seed-s6-c3"],
	[data-id="seed-s6-c4"], [data-id="seed-s6-c5"] {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}


/* --- SEED: Elementor Motion Effects respect prefers-reduced-motion (2026-08-10) --- */
/* Elementor Pro writes its scroll transforms inline from JS and ships no
   reduced-motion fallback of its own, so neutralise them here.
   Required by CLAUDE.md §14. */
@media (prefers-reduced-motion: reduce) {
	.elementor-motion-effects-element,
	.elementor-motion-effects-layer {
		transform: none !important;
		transition: none !important;
	}
}

/* Decorative SEED brand shapes (sparkle / seed / stacked arcs) — never interactive. */
.seed-shape,
.seed-shape svg {
	pointer-events: none;
}
.seed-shape svg {
	display: block;
}


/* --- SEED: "why us" two-tone cards - reveal + hover (2026-08-10) --- */
/* The reveal's hidden state is added by assets/js/reveal.js, never by this
   stylesheet, so the cards stay visible if that script never runs. */
.seed-reveal {
	opacity: 0;
	transform: translateY(18px);
}

.seed-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]) {
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]):hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px -18px rgba(11, 74, 42, 0.32) !important;
}

[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]) .elementor-widget-icon svg {
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]):hover .elementor-widget-icon svg {
	transform: scale(1.12) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
	.seed-reveal,
	.seed-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]),
	[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]):hover,
	[data-id^="seed-s3-card"]:not([data-id="seed-s3-cards"]):hover .elementor-widget-icon svg {
		transform: none;
		transition: none;
	}
}


/* --- SEED: horizontal-overflow guards (2026-08-10) --- */
/* The decorative hero parallax shapes are positioned to bleed past the hero
   edge on purpose; without clipping they widened the document and produced a
   horizontal scrollbar on desktop. Clip rather than reposition, so the bleed
   still reads as intended. */
.seed-hero-parallax-host {
	overflow-x: clip;
}

/* Contact icon-box titles are long unbreakable links (email, address). Let
   them wrap instead of pushing the page past the viewport. */
.elementor-icon-box-title,
.elementor-icon-box-title a {
	max-width: 100%;
	overflow-wrap: anywhere;
}


/* ===== SEED v3 hero — ported from the Next.js reference (2026-08-10) ===== */
/* Reference measured live: H1 68/800/1.05/-1.7px with an amber final line,
   pill CTAs at 28px radius, navy #0B4A2A ground. Rubik replaces the
   reference's Gabarito, which has no Cyrillic glyphs (CLAUDE.md 19a-1). */

.seed-accent {
	color: #45A449;
}

/* Outlined eyebrow pill above the headline. */
.seed-pill-badge .elementor-heading-title {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #8FD4A6;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* Small outlined tags under the CTAs. */
.seed-tag .elementor-heading-title {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-size: 12px;
}

/* Dot texture over the navy ground, as in the reference hero. */
.seed-hero-v3 {
	position: relative;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Placeholder art: layered arch + circle + floating stat card. Deliberately
   built from frames rather than images, because the media library still holds
   only the logo. Swap each frame for an image widget when real photos land. */
.seed-hero-art {
	position: relative;
	width: 100%;
	min-height: 520px;
}
.seed-hero-art__back {
	position: absolute;
	inset: 4% 18% 22% 6%;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 32px;
	transform: rotate(-6deg);
}
.seed-hero-art__arch {
	position: absolute;
	inset: 10% 4% 8% 22%;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 220px 220px 24px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.seed-hero-art__circle {
	position: absolute;
	left: 0;
	bottom: 4%;
	width: 178px;
	height: 178px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	border: 8px solid #0B4A2A;
	display: flex;
	align-items: center;
	justify-content: center;
}
.seed-hero-art__stat {
	position: absolute;
	right: 0;
	top: 8%;
	background: #FFFFFF;
	border-radius: 18px;
	padding: 16px 26px;
	text-align: center;
	box-shadow: 0 18px 40px -14px rgba(11, 74, 42, 0.45);
}
.seed-hero-art__stat b {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: #0B4A2A;
	line-height: 1.1;
}
.seed-hero-art__stat span {
	font-size: 13px;
	color: #4A6357;
}
.seed-hero-art__label {
	font-size: 13px;
	color: #4A6357;
	background: #FFFFFF;
	border-radius: 999px;
	padding: 6px 14px;
	box-shadow: 0 6px 18px -8px rgba(11, 74, 42, 0.4);
}
.seed-hero-art__spark {
	position: absolute;
	left: 14%;
	top: 16%;
	color: #45A449;
}

@media (max-width: 1024px) {
	.seed-hero-art {
		min-height: 380px;
	}
	.seed-hero-art__circle {
		width: 130px;
		height: 130px;
	}
}
@media (max-width: 767px) {
	.seed-hero-art {
		min-height: 300px;
	}
	.seed-hero-art__stat {
		padding: 12px 18px;
	}
	.seed-hero-art__stat b {
		font-size: 22px;
	}
}

/* Elementor buttons carry a default background from the kit; the secondary hero
   CTA is an outline button in the reference, so clear it explicitly. */
[data-id="seed-h3-btn2"] .elementor-button {
	background-color: transparent;
}
[data-id="seed-h3-btn2"] .elementor-button:hover {
	background-color: rgba(255, 255, 255, 0.12);
}
[data-id="seed-h3-btn1"] .elementor-button:hover {
	background-color: #0F6E3D;
}

/* Nudge the circular frame clear of the arch, as in the reference. */
.seed-hero-art__circle {
	left: -2%;
	bottom: 2%;
}

/* ===== SEED v3 header: top contact strip ===== */
[data-id="seed-topbar"] .elementor-icon-list-text {
	font-size: 13px;
	font-weight: 500;
}
[data-id="seed-topbar"] .elementor-icon-list-item a:hover .elementor-icon-list-text {
	/* Green, not amber: amber on the light top bar measures about 2:1. */
	color: #14864B;
}
.seed-topbar .elementor-widget-icon-list .elementor-icon-list-items {
	margin: 0;
}

/* The primary nav wrapped onto a second line once the CTA grew; let it size to
   its content and keep the bar on one row. */
[data-id="seed-header-nav"] .elementor-nav-menu--main .elementor-item {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 15px;
}

@media (max-width: 880px) {
	[data-id="seed-topbar"] {
		justify-content: center;
	}
}

/* ===== SEED v3: numbered reasons grid ===== */
.seed-reason {
	border-top: 2px solid #DFEEE4;
	padding-top: 18px;
}

/* Status pill for content the school has not confirmed yet. The reference
   marks pending items rather than hiding them, which keeps the page honest. */
.seed-status .elementor-heading-title {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #E3F3E8;
	color: #12633A;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Elementor applies _css_classes to widgets but not to containers in this
   version, so container-level styling is keyed on data-id instead. */
[data-id="seed-h3-hero"] {
	/* background-image is now free for the school photograph, which is set as
	   the container's Background Image in Elementor so staff can swap it
	   without a developer. background-blend-mode multiplies it into the brand
	   green, so the photo reads as part of the identity rather than a snapshot
	   dropped on top. With no photo set, this is the flat green it always was. */
	position: relative;
	isolation: isolate;
	background-color: #0B4A2A;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	/* luminosity, not multiply: multiply caps the backdrop at the green and
	   kept the photograph permanently dark. luminosity keeps the brand hue and
	   takes brightness from the photo, so the building is legible. The contrast
	   guarantee multiply gave for free is replaced by the scrim below. */
	background-blend-mode: luminosity;
}

/* Green wash over the photo: solid across the left half, opening up towards
   the right. The headline and lead therefore sit on exactly the colour they
   sat on before (white 10.3:1, lead 8.5:1) however bright the photograph is -
   the sky in an exterior shot is the case that would otherwise break it. */
[data-id="seed-h3-hero"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* A pool of near-solid green under the text block, fading out towards the
	   frame so the building stays bright where nothing has to be read.
	
	   The stops are not taste - they are the strongest brightening that still
	   passes WCAG AA against the worst case backdrop (a blown-out sky mapped
	   onto the brand green). The binding constraint is the accent line
	   "budushchem rebyonka": #45A449 on #0B4A2A is only 3.28:1 even with no
	   photograph at all, so it has almost no margin to give. At a 0.96 core it
	   measures 2.87:1 and fails; at 0.97 it holds at 3.01:1. Do not lower the
	   core without re-measuring that line. */
	background:
		radial-gradient(
			ellipse 80% 78% at 27% 50%,
			rgba(11, 74, 42, 0.97) 0%,
			rgba(11, 74, 42, 0.93) 55%,
			rgba(11, 74, 42, 0) 100%
		),
		/* Ends fully opaque, not at 0.5: the curve below it is flat #0B4A2A, and
		   a hero finishing on photo-textured green met that as a visible seam
		   right across the page. Both edges are now the same colour. */
		linear-gradient(
			180deg,
			rgba(11, 74, 42, 0.28) 0%,
			rgba(11, 74, 42, 0.32) 55%,
			rgba(11, 74, 42, 0.62) 84%,
			#0B4A2A 100%
		);
}

/* The dot texture, moved off background-image so it can sit above the photo. */
[data-id="seed-h3-hero"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Content has to clear both wash layers. */
[data-id="seed-h3-hero"] > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* On a phone the text runs across the whole frame, so the veil is vertical
   rather than diagonal. It still does not need to be opaque - multiply keeps
   the contrast - so the building stays visible on a phone too. */
@media (max-width: 767px) {
	[data-id="seed-h3-hero"]::before {
		background: linear-gradient(
			180deg,
			rgba(11, 74, 42, 0.62) 0%,
			rgba(11, 74, 42, 0.74) 55%,
			rgba(11, 74, 42, 0.86) 100%
		);
	}
}

[data-id="seed-r1"],
[data-id="seed-r2"],
[data-id="seed-r3"],
[data-id="seed-r4"],
[data-id="seed-r5"],
[data-id="seed-r6"],
[data-id="seed-r7"],
[data-id="seed-r8"] {
	border-top: 2px solid #DFEEE4;
	padding-top: 18px;
}

/* ===== SEED v3: About section two-column layout ===== */
/* Both children carry flex-grow:1 with basis auto inside a wrapping row, so each
   claimed a full line and the section stacked. Elementor's own width control is
   ignored in that state, so the split is pinned here — the same approach the
   programs grid above already uses. */
@media (min-width: 768px) {
	[data-id="seed-s4-media"] {
		flex: 0 0 44%;
		max-width: 44%;
	}
	[data-id="seed-s4-text"] {
		flex: 0 0 calc(56% - 48px);
		max-width: calc(56% - 48px);
	}
}

/* ===== SEED v3: level cards ===== */
.seed-level-badge .elementor-heading-title {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #E3F3E8;
	color: #12633A;
	letter-spacing: 1px;
	text-transform: uppercase;
}

[data-id^="seed-lv"] {
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-id="seed-lv1"]:hover,
[data-id="seed-lv2"]:hover,
[data-id="seed-lv3"]:hover,
[data-id="seed-lv4"]:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 50px -18px rgba(11, 74, 42, 0.32) !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-id^="seed-lv"] {
		transition: none;
		transform: none;
	}
}

/* ===== SEED v3: safety ticker band ===== */
/* Amber bullet between the labels, as in the reference strip. */
.seed-ticker-item {
	position: relative;
}
.seed-ticker-item + .seed-ticker-item .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #14864B;
}

@media (max-width: 767px) {
	.seed-ticker-item + .seed-ticker-item .elementor-heading-title::before {
		display: none;
	}
}

/* ===== SEED v3: footer legibility ===== */
/* Footer links inherited a navy colour on the navy footer - contrast 1.0,
   i.e. invisible. Elementor's own colour control on this menu is gated by
   its layout setting, so the colour is pinned here instead. */
[data-id="seed-footer-nav"] .elementor-nav-menu a,
[data-id="seed-footer-nav"] .elementor-item {
	/* !important: Elementor's generated per-widget rule is more specific. */
	color: #DCEDE3 !important;
	font-size: 15px;
}
[data-id="seed-footer-nav"] .elementor-nav-menu a:hover,
[data-id="seed-footer-nav"] .elementor-item:hover,
[data-id="seed-footer-nav"] .elementor-item.elementor-item-active {
	color: #14864B;
}

[data-id="seed-footer-legal"] .elementor-icon-list-text,
[data-id="seed-footer-map-links"] .elementor-icon-list-text,
[data-id="seed-footer-social"] .elementor-icon-list-text {
	color: #DCEDE3;
	font-size: 14px;
}
[data-id="seed-footer-legal"] a:hover .elementor-icon-list-text,
[data-id="seed-footer-map-links"] a:hover .elementor-icon-list-text {
	color: #14864B;
}

/* The logo file has a white background, which reads as a white chip on the
   navy footer. Round it and give it breathing room until a transparent or
   inverse logo variant is supplied. */
[data-id="seed-footer-logo"] img {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 8px;
}

/* ===== SEED v3: logo aspect ratio ===== */
/* The logo file is square (1440x1440) but an inherited rule pinned its height
   to 44px, so widening it stretched the mark. Let height follow width. */
[data-id="seed-header-logo"] img,
[data-id="seed-footer-logo"] img {
	height: auto !important;
	object-fit: contain;
}

/* ===== SEED v3: footer composition ===== */
/* Four equal 255px columns held very unequal content - the brand block was
   cramped while the links column sat nearly empty, and ~100px of dead space
   hung under the row. Give the columns proportions that match their weight. */
@media (min-width: 1025px) {
	[data-id="seed-footer-grid"] {
		align-items: flex-start;
		gap: 56px;
	}
	[data-id="seed-footer-col-brand"] {
		flex: 0 0 32%;
		max-width: 32%;
	}
	[data-id="seed-footer-col-nav"],
	[data-id="seed-footer-col-contacts"] {
		flex: 0 0 24%;
		max-width: 24%;
	}
	[data-id="seed-footer-col-map"] {
		flex: 0 0 16%;
		max-width: 16%;
	}
}

/* Column headings: smaller, calmer, consistent. */
[data-id="seed-footer-nav-heading"] .elementor-heading-title,
[data-id="seed-footer-contacts-heading"] .elementor-heading-title,
[data-id="seed-footer-map-heading"] .elementor-heading-title {
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8FD4A6;
}

/* Menu items were spaced like a page nav; tighten to a list. */
[data-id="seed-footer-nav"] .elementor-nav-menu li {
	margin-bottom: 2px;
}
[data-id="seed-footer-nav"] .elementor-item {
	padding: 5px 0 !important;
}

/* Social row: a real row of tappable marks, not one stray icon. */
[data-id="seed-footer-social"] .elementor-icon-list-items {
	display: flex;
	gap: 10px;
}
[data-id="seed-footer-social"] .elementor-icon-list-item {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease;
}
[data-id="seed-footer-social"] .elementor-icon-list-item:hover {
	background: #14864B;
}
[data-id="seed-footer-social"] .elementor-icon-list-text {
	display: none;
}

/* Hairline above the legal bar so it reads as a separate tier. */
[data-id="seed-footer-bottom"] {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 40px;
	padding-top: 22px;
}

/* The logo sat on an opaque white chip; a soft tint reads as intentional
   until a transparent or inverse logo file is supplied. */
[data-id="seed-footer-logo"] img {
	background: #FFFFFF;
	border-radius: 14px;
	padding: 10px;
}

/* ===== SEED v3: animated hero decoration =====
   Built from pseudo-elements so no markup changes and nothing can shift the
   layout. Two soft brand-coloured orbs drift slowly behind the text, plus a
   dot texture, giving the navy heroes depth without needing photography. */

[data-id="seed-parents-hero"],
[data-id="seed-tuition-hero"],
[data-id="seed-schoollife-hero"] {
	position: relative;
	overflow: hidden;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
}

[data-id="seed-parents-hero"]::before,
[data-id="seed-tuition-hero"]::before,
[data-id="seed-schoollife-hero"]::before {
	content: "";
	position: absolute;
	right: -70px;
	top: -90px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(69, 164, 73, 0.32), rgba(69, 164, 73, 0) 68%);
	animation: seed-float-a 13s ease-in-out infinite;
	pointer-events: none;
}

[data-id="seed-parents-hero"]::after,
[data-id="seed-tuition-hero"]::after,
[data-id="seed-schoollife-hero"]::after {
	content: "";
	position: absolute;
	right: 130px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at 60% 40%, rgba(69, 164, 73, 0.28), rgba(69, 164, 73, 0) 70%);
	animation: seed-float-b 17s ease-in-out infinite;
	pointer-events: none;
}

@keyframes seed-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-26px, 30px, 0) scale(1.07); }
}
@keyframes seed-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(22px, -26px, 0) scale(1.05); }
}

/* Cards lift a little on hover so the pages feel responsive to the cursor. */
[data-id^="seed-parents-b"],
[data-id^="seed-tuition-b"],
[data-id^="seed-schoollife-b"] {
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-id^="seed-parents-b"]:hover,
[data-id^="seed-tuition-b"]:hover,
[data-id^="seed-schoollife-b"]:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 50px -18px rgba(11, 74, 42, 0.30) !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-id="seed-parents-hero"]::before,
	[data-id="seed-tuition-hero"]::before,
	[data-id="seed-schoollife-hero"]::before,
	[data-id="seed-parents-hero"]::after,
	[data-id="seed-tuition-hero"]::after,
	[data-id="seed-schoollife-hero"]::after {
		animation: none;
	}
	[data-id^="seed-parents-b"],
	[data-id^="seed-tuition-b"],
	[data-id^="seed-schoollife-b"] {
		transition: none;
		transform: none;
	}
}

/* ===== SEED v3: compact contact block =====
   The rows were a tall single column with oversized icons. Turn them into
   chips laid two-up, each with a tinted icon disc, so the section reads as a
   card rather than a list and loses roughly half its height. */
@media (min-width: 768px) {
	/* The inner wrapper is a column flex with nowrap by default, so a 50% basis
	   would size height, not width. Force a wrapping row and beat Elementor's
	   own max-width:100% on the children. */
	[data-id="seed-s10-info"] > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start;
		gap: 14px;
	}
	[data-id="seed-s10-eyebrow"],
	[data-id="seed-s10-title"],
	[data-id="seed-s10-btns"] {
		flex: 0 0 100%;
	}
	[data-id="seed-s10-address"],
	[data-id="seed-s10-phone"],
	[data-id="seed-s10-email"],
	[data-id="seed-s10-instagram"] {
		flex: 0 0 calc(50% - 7px) !important;
		max-width: calc(50% - 7px) !important;
		width: calc(50% - 7px) !important;
	}
}

[data-id="seed-s10-address"],
[data-id="seed-s10-phone"],
[data-id="seed-s10-email"],
[data-id="seed-s10-instagram"] {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	padding: 14px 16px;
	transition: background 0.25s ease, transform 0.25s ease;
}
[data-id="seed-s10-address"]:hover,
[data-id="seed-s10-phone"]:hover,
[data-id="seed-s10-email"]:hover,
[data-id="seed-s10-instagram"]:hover {
	background: rgba(255, 255, 255, 0.11);
	transform: translateY(-2px);
}

/* Icon sits in its own disc rather than floating oversized next to the text. */
[data-id="seed-s10-address"] .elementor-icon,
[data-id="seed-s10-phone"] .elementor-icon,
[data-id="seed-s10-email"] .elementor-icon,
[data-id="seed-s10-instagram"] .elementor-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(143, 212, 166, 0.16);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	[data-id="seed-s10-address"],
	[data-id="seed-s10-phone"],
	[data-id="seed-s10-email"],
	[data-id="seed-s10-instagram"] {
		transition: none;
		transform: none;
	}
}

/* ===== SEED v3: abstract side decoration =====
   Soft brand-green forms bleeding in from the section edges. Drawn with
   pseudo-elements so no markup changes; each host gets overflow:hidden so a
   shape can never widen the page. Sides alternate down the page for rhythm. */

.seed-deco {
	position: relative;
	overflow: hidden;
}
.seed-deco::before,
.seed-deco::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
/* Keep real content above the decoration. */
.seed-deco > * {
	position: relative;
	z-index: 1;
}

/* Left: an open ring, half off-canvas. */
.seed-deco--left::before {
	left: -170px;
	top: 12%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 34px solid rgba(20, 134, 75, 0.07);
	animation: seed-deco-drift 22s ease-in-out infinite;
}
/* Right: a soft blob. */
.seed-deco--left::after {
	right: -120px;
	bottom: -90px;
	width: 300px;
	height: 300px;
	border-radius: 46% 54% 38% 62% / 52% 40% 60% 48%;
	background: rgba(69, 164, 73, 0.07);
	animation: seed-deco-morph 26s ease-in-out infinite;
}

/* Mirrored variant. */
.seed-deco--right::before {
	right: -170px;
	top: 16%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 30px solid rgba(20, 134, 75, 0.07);
	animation: seed-deco-drift 25s ease-in-out infinite reverse;
}
.seed-deco--right::after {
	left: -110px;
	bottom: -80px;
	width: 270px;
	height: 270px;
	border-radius: 58% 42% 60% 40% / 44% 58% 42% 56%;
	background: rgba(69, 164, 73, 0.07);
	animation: seed-deco-morph 30s ease-in-out infinite reverse;
}

@keyframes seed-deco-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, 46px, 0); }
}
@keyframes seed-deco-morph {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -34px, 0) rotate(16deg); }
}

/* Homepage light sections. */
[data-id="seed-s3-why"],
[data-id="seed-s4b-dirs"],
[data-id="seed-s6-programs"],
[data-id="seed-s8-teachers"],
[data-id="seed-s9-admission"],
[data-id="seed-s9c-faq-sec"],
/* Interior page bodies. */
[data-id="seed-parents-body"],
[data-id="seed-tuition-body"],
[data-id="seed-schoollife-body"] {
	position: relative;
	overflow: hidden;
}
[data-id="seed-s3-why"]::before,
[data-id="seed-s6-programs"]::before,
[data-id="seed-s9-admission"]::before,
[data-id="seed-parents-body"]::before,
[data-id="seed-schoollife-body"]::before {
	content: "";
	position: absolute;
	left: -170px;
	top: 12%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 34px solid rgba(20, 134, 75, 0.07);
	animation: seed-deco-drift 22s ease-in-out infinite;
	pointer-events: none;
}
[data-id="seed-s4b-dirs"]::after,
[data-id="seed-s8-teachers"]::after,
[data-id="seed-s9c-faq-sec"]::after,
[data-id="seed-tuition-body"]::after {
	content: "";
	position: absolute;
	right: -140px;
	top: 22%;
	width: 320px;
	height: 320px;
	border-radius: 58% 42% 60% 40% / 44% 58% 42% 56%;
	background: rgba(69, 164, 73, 0.08);
	animation: seed-deco-morph 28s ease-in-out infinite;
	pointer-events: none;
}

@media (max-width: 1024px) {
	[data-id="seed-s3-why"]::before,
	[data-id="seed-s6-programs"]::before,
	[data-id="seed-s9-admission"]::before,
	[data-id="seed-parents-body"]::before,
	[data-id="seed-schoollife-body"]::before,
	[data-id="seed-s4b-dirs"]::after,
	[data-id="seed-s8-teachers"]::after,
	[data-id="seed-s9c-faq-sec"]::after,
	[data-id="seed-tuition-body"]::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seed-deco::before,
	.seed-deco::after,
	[data-id="seed-s3-why"]::before,
	[data-id="seed-s6-programs"]::before,
	[data-id="seed-s9-admission"]::before,
	[data-id="seed-parents-body"]::before,
	[data-id="seed-schoollife-body"]::before,
	[data-id="seed-s4b-dirs"]::after,
	[data-id="seed-s8-teachers"]::after,
	[data-id="seed-s9c-faq-sec"]::after,
	[data-id="seed-tuition-body"]::after {
		animation: none;
	}
}

/* ===== SEED v3: header dropdowns ===== */
/* The submenu inherited the theme default; give it the card treatment the rest
   of the site uses so it reads as part of the design, not a browser artefact. */
[data-id="seed-header-nav"] .elementor-nav-menu--dropdown,
[data-id="seed-header-nav"] .sub-menu {
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 22px 46px -18px rgba(11, 74, 42, 0.28);
	padding: 8px;
	border: 1px solid rgba(11, 74, 42, 0.08);
	min-width: 220px;
}
[data-id="seed-header-nav"] .sub-menu .elementor-sub-item {
	color: #133024;
	font-size: 15px;
	font-weight: 600;
	border-radius: 9px;
	padding: 10px 14px !important;
	transition: background 0.2s ease, color 0.2s ease;
}
[data-id="seed-header-nav"] .sub-menu .elementor-sub-item:hover,
[data-id="seed-header-nav"] .sub-menu .elementor-sub-item.elementor-item-active {
	background: #EAF4EE;
	color: #14864B;
}

@media (prefers-reduced-motion: reduce) {
	[data-id="seed-header-nav"] .sub-menu .elementor-sub-item {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Cookie consent popup — gdpr-cookie-consent plugin.

   The plugin renders its whole layout as inline styles built from its own
   options, so every override here has to be !important; there is no other
   hook. The plugin itself is never modified.

   Accept and Decline stay the same size, weight and reachability — the fill
   difference is hierarchy, not a dark pattern (CLAUDE.md §12).
   --------------------------------------------------------------------------- */
#gdpr-cookie-consent-bar.gdpr {
	right: 24px !important;
	bottom: 24px !important;
	width: min(420px, calc(100vw - 32px)) !important;
	max-width: none !important;
	padding: 26px 26px 24px !important;
	gap: 18px !important;
	border-radius: 18px !important;
	border: 1px solid rgba(20, 134, 75, 0.16) !important;
	background: #FFFFFF !important;
	box-shadow:
		0 20px 52px -14px rgba(4, 40, 24, 0.26),
		0 2px 10px rgba(4, 40, 24, 0.06) !important;
	overflow: hidden;
	animation: seed-cookie-in 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/* Brand hairline across the top edge of the card. */
#gdpr-cookie-consent-bar.gdpr::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #14864B 0%, #45A449 100%);
}

@keyframes seed-cookie-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Message copy: the plugin justifies it, which tears holes in a 420px column. */
#gdpr-cookie-consent-bar .gdpr-notice-content-body p {
	margin: 0 !important;
	color: #33453D !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	text-align: left !important;
}

#gdpr-cookie-consent-bar #cookie_action_link {
	color: #14864B !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Inline policy links inside the message, underlined as in the reference. */
#gdpr-cookie-consent-bar .gdpr-notice-content-body p a {
	color: inherit !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

#gdpr-cookie-consent-bar .gdpr-notice-content-body p a:hover {
	color: #14864B !important;
}

/* Reference layout: a filled Accept followed by a text-only Decline, both
   left-aligned. They keep the same font size, weight and hit area, so Decline
   stays a real choice rather than a decoration (CLAUDE.md §12). */
#gdpr-cookie-consent-bar .cookie_notice_buttons {
	gap: 8px !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
}

/* The plugin wraps each button in its own div, and those wrappers size to the
   full row width, which pushed the two buttons onto separate lines. Collapsing
   the wrappers makes the anchors themselves the flex items. */
#gdpr-cookie-consent-bar .left_buttons,
#gdpr-cookie-consent-bar .right_buttons {
	display: contents !important;
}

/* Accept reads first; the plugin emits it second in the markup. */
#gdpr-cookie-consent-bar #cookie_action_accept_all {
	order: 1;
}

#gdpr-cookie-consent-bar #cookie_action_reject {
	order: 2;
}

#gdpr-cookie-consent-bar .gdpr_action_button.btn {
	width: auto !important;
	min-width: 0 !important;
	justify-content: center;
	text-align: center;
	padding: 14px 30px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 4px !important;
	transition: background 0.2s ease, color 0.2s ease;
}

#gdpr-cookie-consent-bar #cookie_action_accept_all {
	border: none !important;
}

#gdpr-cookie-consent-bar #cookie_action_accept_all:hover {
	background: #0F6E3D !important;
}

/* Decline carries no fill and no border, as in the reference. */
#gdpr-cookie-consent-bar #cookie_action_reject {
	background: transparent !important;
	border: none !important;
	padding: 14px 22px !important;
}

#gdpr-cookie-consent-bar #cookie_action_reject:hover {
	background: #EAF4EE !important;
}

#gdpr-cookie-consent-bar .gdpr_action_button.btn:focus-visible,
#gdpr-cookie-consent-bar #cookie_action_link:focus-visible,
#gdpr-cookie-consent-bar #cookie-banner-cancle-img:focus-visible {
	outline: 3px solid #0F6E3D;
	outline-offset: 2px;
}

/* Close control sits clear of the brand hairline. */
#gdpr-cookie-consent-bar #cookie-banner-cancle-img {
	top: 16px !important;
	right: 16px !important;
	/* 5.3:1 on white - clears the text threshold, not just the 3:1 icon one. */
	color: #5F6F68 !important;
	transition: color 0.2s ease;
}

#gdpr-cookie-consent-bar #cookie-banner-cancle-img:hover {
	color: #14864B !important;
}

/* Phones: full-width sheet pinned to the bottom, still inside the safe area. */
@media (max-width: 600px) {
	#gdpr-cookie-consent-bar.gdpr {
		right: 12px !important;
		left: 12px !important;
		bottom: max(12px, env(safe-area-inset-bottom)) !important;
		width: auto !important;
		padding: 22px 20px 20px !important;
	}

	#gdpr-cookie-consent-bar .gdpr_action_button.btn {
		/* 15px keeps the tap target at ~45px, clearing the 44px guideline. */
		padding: 15px 24px !important;
	}
}

/* Preferences modal, reachable from the Cookie Policy page. */
#gdpr-gdprmodal .gdprmodal-content {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(20, 134, 75, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	#gdpr-cookie-consent-bar.gdpr {
		animation: none;
	}

	#gdpr-cookie-consent-bar .gdpr_action_button.btn,
	#gdpr-cookie-consent-bar #cookie-banner-cancle-img {
		transition: none;
	}
}
/* ---------------------------------------------------------------------------
   On-site chat widget.

   Shares the bottom-right corner with the cookie popup, so the launcher lifts
   itself while that is on screen (.is-raised, set from chat.js) rather than
   sitting under it.
   --------------------------------------------------------------------------- */
.seed-chat {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* Lifted clear of the cookie popup, which shares this corner. Deliberately
   not animated: a transition on `bottom` here stuck at its start value, and
   this element refuses transforms outright, so the offset is instant. It
   happens once per visitor, when the popup appears. */
.seed-chat.is-raised {
	bottom: 250px;
}

.seed-chat.is-raised .seed-chat__panel {
	max-height: calc(100vh - 390px);
}

.seed-chat__launcher {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	padding: 14px 22px;
	border: none;
	border-radius: 999px;
	background: #14864B;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 12px 30px -10px rgba(4, 40, 24, 0.55);
	transition: background 0.2s ease, transform 0.2s ease;
}

.seed-chat__launcher:hover {
	background: #0F6E3D;
	transform: translateY(-2px);
}

.seed-chat__launcher:focus-visible,
.seed-chat__close:focus-visible,
.seed-chat__send:focus-visible,
.seed-chat__input:focus-visible,
.seed-chat__name:focus-visible,
.seed-chat__contact:focus-visible {
	outline: 3px solid #0F6E3D;
	outline-offset: 2px;
}

.seed-chat.is-open .seed-chat__launcher-label {
	display: none;
}

/* Unread marker: a dot, with the wording kept for screen readers only. */
.seed-chat__badge {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #F2A93B;
	border: 2px solid #FFFFFF;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}

/* display:flex would otherwise beat the browser's own [hidden] rule, so the
   closed panel kept occupying space and shoved the launcher up the page. */
.seed-chat__panel[hidden] {
	display: none;
}

.seed-chat__panel {
	width: min(370px, calc(100vw - 32px));
	/* Leaves room for the launcher, the gap and a margin at the top. */
	max-height: calc(100vh - 160px);
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid rgba(20, 134, 75, 0.16);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 60px -16px rgba(4, 40, 24, 0.32);
	animation: seed-chat-in 0.35s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

@keyframes seed-chat-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.seed-chat__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: linear-gradient(135deg, #14864B 0%, #0F6E3D 100%);
	color: #FFFFFF;
}

.seed-chat__title {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.seed-chat__subtitle {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.86);
}

.seed-chat__close {
	flex: 0 0 auto;
	padding: 2px;
	border: none;
	background: none;
	color: #FFFFFF;
	cursor: pointer;
	opacity: 0.85;
}

.seed-chat__close:hover {
	opacity: 1;
}

.seed-chat__log {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	/* The flexible part of the panel: it shrinks first when height is tight. */
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	background: #F7FAF8;
}

.seed-chat__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5F6F68;
	text-align: center;
}

.seed-chat__msg {
	display: flex;
}

.seed-chat__msg--visitor {
	justify-content: flex-end;
}

.seed-chat__bubble {
	margin: 0;
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.seed-chat__msg--visitor .seed-chat__bubble {
	background: #14864B;
	color: #FFFFFF;
	border-bottom-right-radius: 4px;
}

.seed-chat__msg--staff .seed-chat__bubble {
	background: #FFFFFF;
	color: #22332C;
	border: 1px solid rgba(20, 134, 75, 0.18);
	border-bottom-left-radius: 4px;
}

.seed-chat__form {
	padding: 14px 18px 18px;
	border-top: 1px solid rgba(20, 134, 75, 0.12);
}

/* display:flex would beat the browser's own [hidden] rule, leaving the name
   and contact fields on screen after the first message was sent. */
.seed-chat__intro[hidden] {
	display: none;
}

.seed-chat__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.seed-chat__row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.seed-chat__name,
.seed-chat__contact,
.seed-chat__input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(20, 134, 75, 0.24);
	border-radius: 12px;
	font-family: inherit;
	font-size: 14px;
	color: #22332C;
	background: #FFFFFF;
}

.seed-chat__input {
	resize: none;
	max-height: 110px;
}

.seed-chat__send {
	flex: 0 0 auto;
	padding: 12px 20px;
	border: none;
	border-radius: 999px;
	background: #14864B;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.seed-chat__send:hover {
	background: #0F6E3D;
}

@media (max-width: 600px) {
	.seed-chat {
		right: 12px;
		bottom: 12px;
		left: 12px;
	}

	.seed-chat.is-raised {
		bottom: 240px;
	}

	.seed-chat__panel {
		width: 100%;
	}

	.seed-chat__log {
		max-height: 40vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seed-chat__launcher,
	.seed-chat__send {
		transition: none;
	}

	.seed-chat__panel {
		animation: none;
	}

	.seed-chat__launcher:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Hero -> promise transition.

   The green hero used to stop dead against white. Now it spills down into the
   next screen and is cut away by an off-centre curve - asymmetric on purpose,
   a symmetric dome just reads as a blob. clip-path rather than border-radius,
   because it lets the high point sit off to one side.

   The statement itself is revealed word by word on scroll (promise.js), so the
   screen has a beat of its own instead of appearing all at once.
   --------------------------------------------------------------------------- */
[data-id="seed-s2-promise"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

[data-id="seed-s2-promise"]::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto 0;
	height: 130px;
	background: #0B4A2A;
	clip-path: ellipse(78% 100% at 34% 0%);
}

/* Signature mark, floating in the green rather than sitting on the text. */
[data-id="seed-s2-promise"]::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 34%;
	top: 34px;
	width: 26px;
	height: 26px;
	transform: translateX(-50%);
	background: #45A449;
	clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
	animation: seed-promise-twinkle 4.5s ease-in-out infinite;
}

@keyframes seed-promise-twinkle {
	0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.9) rotate(0deg); }
	50%      { opacity: 1;    transform: translateX(-50%) scale(1.08) rotate(12deg); }
}

[data-id="seed-s2-promise"] > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* Word-by-word reveal. The words are wrapped at runtime, after the server has
   rendered (and TranslatePress has translated) the sentence - so no new
   translatable strings are created and every language animates the same way. */
[data-id="seed-s2-promise"] .seed-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

[data-id="seed-s2-promise"].is-revealed .seed-word {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	[data-id="seed-s2-promise"]::before {
		height: 72px;
		clip-path: ellipse(96% 100% at 38% 0%);
	}

	[data-id="seed-s2-promise"]::after {
		left: 38%;
		top: 18px;
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-id="seed-s2-promise"]::after {
		animation: none;
	}

	[data-id="seed-s2-promise"] .seed-word {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* ---------------------------------------------------------------------------
   Mobile header and top bar.

   The header is three Elementor columns built for a desktop row. Each carried
   --width: 100%, so on a phone they each claimed the full width and wrapped:
   the logo sat inset from the left, the burger landed mid-row, and the third
   column (languages + tour button + WhatsApp) dropped onto a line of its own
   at 376px wide - wider than the screen, pushing the WhatsApp icon off the
   right edge. The contact bar above it broke into five separate rows.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* The switcher was hidden below 768px by the pre-Elementor layout, which
	   kept languages inside its own mobile menu. The Elementor header has no
	   such fallback, so a phone visitor could not change language at all. */
	.seed-lang-switch {
		display: flex !important;
	}

	/* Top bar: five stacked contact rows pushed the site below the fold. Keep
	   the one thing a parent actually does from a phone - call - and leave the
	   rest to the footer and the contacts page, where it already lives. */
	[data-id="seed-topbar-address"],
	[data-id="seed-topbar-hours"],
	[data-id="seed-topbar-email"],
	[data-id="seed-topbar-insta"] {
		display: none !important;
	}

	[data-id="seed-topbar"] {
		--padding-top: 9px;
		--padding-bottom: 9px;
		--justify-content: center;
		--align-items: center;
	}

	[data-id="seed-topbar-phone"] {
		--width: auto;
		width: auto !important;
	}

	/* One row: logo left, then languages, WhatsApp and the burger to the right. */
	[data-id="seed-header-row"] {
		--flex-wrap: nowrap;
		--align-items: center;
		--gap: 8px;
		--padding-top: 10px;
		--padding-bottom: 10px;
	}

	[data-id="seed-header-logo-col"],
	[data-id="seed-header-nav-col"],
	[data-id="seed-header-actions-col"] {
		--width: auto;
		--flex-direction: row;
		--align-items: center;
		--justify-content: center;
		--padding-left: 0;
		--padding-right: 0;
		width: auto !important;
		flex: 0 0 auto !important;
	}

	[data-id="seed-header-logo-col"] {
		order: 1;
	}

	[data-id="seed-header-actions-col"] {
		order: 2;
		margin-left: auto;
		--gap: 10px;
	}

	[data-id="seed-header-nav-col"] {
		order: 3;
	}

	/* Elementor's own mobile CSS sets --flex-wrap: wrap through a selector that
	   outranks the variable set above, so the row is forced directly here.
	   Without this the three columns still totalled 448px against a 375px
	   screen and the burger dropped onto a second line. */
	[data-id="seed-header-row"],
	[data-id="seed-header-row"] > .e-con-inner {
		flex-wrap: nowrap !important;
	}

	/* The nav column is sized by the menu markup it carries rather than by the
	   burger, which made it 220px wide. Collapse it onto the toggle. */
	/* width:auto was not enough - the menu markup inside keeps the widget at
	   full width, which pushed the burger off the right edge of the screen.
	   The column is pinned to the size of the toggle instead. */
	[data-id="seed-header-nav-col"] {
		width: 44px !important;
		min-width: 0 !important;
		flex: 0 0 44px !important;
	}

	[data-id="seed-header-nav-col"] > .e-con-inner,
	[data-id="seed-header-nav"],
	[data-id="seed-header-nav"] .elementor-widget-container,
	[data-id="seed-header-nav"] .elementor-nav-menu--main {
		width: 44px !important;
		min-width: 0 !important;
	}

	[data-id="seed-header-nav"] .elementor-menu-toggle {
		margin: 0 !important;
	}

	/* The menu panel has to be pulled back out to the full screen now that its
	   column is only as wide as the burger. Position is forced rather than
	   assumed: left/right do nothing on a statically positioned element, so
	   setting only the width would have left the panel hanging off the right
	   edge. Anchored to the burger, spanning the viewport. */
	[data-id="seed-header-nav"] {
		position: relative !important;
	}

	[data-id="seed-header-nav"] nav.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		z-index: 40;
	}

	/* The tour button repeats verbatim in the hero immediately below, so on a
	   phone it only cost a row. WhatsApp, the chat widget and the phone number
	   above all remain one tap away. */
	[data-id="seed-header-cta"] {
		display: none !important;
	}

	[data-id="seed-header-lang"],
	[data-id="seed-header-whatsapp-icon"] {
		--width: auto;
		width: auto !important;
	}

	/* Drop the label so the launcher stops sitting across the headline. */
	.seed-chat__launcher {
		padding: 15px !important;
	}

	.seed-chat__launcher-label {
		display: none;
	}
}
/* ---------------------------------------------------------------------------
   Tablet header (768-1024).

   Elementor collapses the menu to a burger from 1024 down, but the three
   header columns keep their desktop order and widths - so the burger was
   stranded next to the logo with an empty gap after it, and the languages,
   tour button and WhatsApp were pushed into the far right. Same one-row
   treatment as the phone, except the tour button stays: there is room for it.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	[data-id="seed-header-row"],
	[data-id="seed-header-row"] > .e-con-inner {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	[data-id="seed-header-logo-col"],
	[data-id="seed-header-actions-col"] {
		--width: auto;
		width: auto !important;
		flex: 0 0 auto !important;
	}

	[data-id="seed-header-logo-col"] {
		order: 1;
	}

	[data-id="seed-header-actions-col"] {
		order: 2;
		margin-left: auto;
		--flex-direction: row;
		--align-items: center;
		--gap: 14px;
	}

	/* The burger belongs at the end of the row, not beside the logo. */
	[data-id="seed-header-nav-col"] {
		order: 3;
		width: 44px !important;
		min-width: 0 !important;
		flex: 0 0 44px !important;
		margin-left: 14px;
	}

	[data-id="seed-header-nav-col"] > .e-con-inner,
	[data-id="seed-header-nav"],
	[data-id="seed-header-nav"] .elementor-widget-container {
		width: 44px !important;
		min-width: 0 !important;
	}

	[data-id="seed-header-nav"] {
		position: relative !important;
	}

	[data-id="seed-header-nav"] nav.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: min(420px, 100vw) !important;
		z-index: 40;
	}

	/* Contact strip on one line at this width. */
	[data-id="seed-topbar"] {
		--flex-wrap: wrap;
		--justify-content: center;
		--gap: 8px 18px;
	}
}

/* ---------------------------------------------------------------------------
   Large screens (1440+, all-in-ones).

   There was no breakpoint above 1025px at all. On a big monitor the content
   columns disagreed - the header and text sections ran 1140px wide while the
   hero ran 1240px, so the logo sat 50px off the headline it should line up
   with - and the contact strip, a full-width container justified to flex-end,
   flew off to the right edge on its own.

   Everything below is !important on purpose: Elementor writes per-element
   widths and typography into its own generated stylesheet, which loads after
   this file and outranks a plain rule. The two full-width containers (the
   contact strip and the header row) ignore --content-width entirely - they
   have no inner wrapper - so they are aligned with padding instead.
   --------------------------------------------------------------------------- */
/* From 1200px up: below that the columns are narrower than their caps and
   already share an edge, so there is nothing to correct. */
@media (min-width: 1200px) {
	/* One column for everything that shares a vertical edge. 1240 is the
	   hero's width, so the hero is the thing everything else lines up to. */
	[data-id="seed-s2-promise"] {
		--content-width: 1240px !important;
	}

	[data-id="seed-topbar"] {
		padding-left: max(24px, calc((100vw - 1240px) / 2)) !important;
		padding-right: max(24px, calc((100vw - 1240px) / 2)) !important;
	}

	/* The header's left edge lines up with the hero headline - that is the
	   alignment the eye actually reads - but its right edge is allowed to run
	   wider. Pinned to 1240 on both sides the menu had ~607px where it needs
	   ~700 and "Contacts" dropped onto a second line. */
	[data-id="seed-header-row"] {
		padding-left: max(24px, calc((100vw - 1240px) / 2)) !important;
		padding-right: max(24px, calc((100vw - 1560px) / 2)) !important;
	}
}

@media (min-width: 1600px) {
	/* Type steps up so the page keeps its presence on a large screen instead
	   of shrinking into the middle of it. */
	[data-id="seed-h3-hero"] h1.elementor-heading-title {
		font-size: 76px !important;
		line-height: 1.04 !important;
	}

	[data-id="seed-s2-promise"] h2.elementor-heading-title {
		font-size: 50px !important;
	}
}

@media (min-width: 1900px) {
	[data-id="seed-h3-hero"] h1.elementor-heading-title {
		font-size: 84px !important;
	}
}
/* Chat launcher below desktop: the labelled pill is 186px wide and sat across
   the hero composition on a tablet. Icon only under 1240px - the panel it
   opens carries the wording anyway. */
@media (max-width: 1239px) {
	.seed-chat__launcher {
		padding: 15px !important;
	}

	.seed-chat__launcher-label {
		display: none;
	}
}
/* ---------------------------------------------------------------------------
   Video gallery in a tablet frame.

   The screen is 16:9 rather than an iPad's true 4:3: a YouTube clip in a 4:3
   screen sits between black bars, which looks like a mistake. A thin dark
   bezel and a deep shadow read as a device without the toy details -
   no home button, no camera dot.
   --------------------------------------------------------------------------- */
.seed-vgal {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Landscape tablet: the bezel is wider on the short sides to carry the front
   camera on the left and the home button on the right, which is what makes it
   read as an iPad rather than a generic dark rectangle. */
.seed-vgal__device {
	position: relative;
	padding: 16px 52px;
	border-radius: 34px;
	background: linear-gradient(150deg, #2A3A33 0%, #0B1410 100%);
	box-shadow:
		0 34px 64px -26px rgba(4, 40, 24, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.07) inset,
		0 2px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Front camera. */
.seed-vgal__device::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #05100C;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Home button. */
.seed-vgal__device::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #16221D 0%, #060D0A 100%);
	box-shadow:
		0 0 0 1.5px rgba(255, 255, 255, 0.16),
		0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

/* 56.25% padding rather than aspect-ratio: the ratio box resolved after the
   ancestors had already been sized, so the Elementor widget above it stayed
   20px tall while holding a 159px tablet - the column collapsed and the
   section clipped the device in half. A percentage padding contributes its
   height during normal layout, so every ancestor measures correctly. */
.seed-vgal__screen {
	position: relative;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: 14px;
	background: #0B4A2A;
}

.seed-vgal__player,
.seed-vgal__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.seed-vgal__stage {
	display: block;
	padding: 0;
	background: none;
	cursor: pointer;
}

.seed-vgal__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.seed-vgal__stage:hover .seed-vgal__poster {
	transform: scale(1.03);
}

.seed-vgal__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: 999px;
	background: rgba(11, 74, 42, 0.92);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease;
}

.seed-vgal__stage:hover .seed-vgal__play {
	background: #14864B;
	transform: translate(-50%, -50%) scale(1.04);
}

.seed-vgal__stage:focus-visible,
.seed-vgal__thumb:focus-visible {
	outline: 3px solid #0F6E3D;
	outline-offset: 3px;
}

/* Placeholder until the school supplies links. Deliberately plain, so nobody
   mistakes it for a finished block. */
.seed-vgal__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	color: #FFFFFF;
}

.seed-vgal__empty strong {
	font-size: 17px;
	font-weight: 700;
}

.seed-vgal__empty span {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}

.seed-vgal__strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.seed-vgal__thumb {
	flex: 0 0 132px;
	position: relative;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.7;
}

.seed-vgal__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.seed-vgal__thumb.is-active,
.seed-vgal__thumb:hover {
	border-color: #14864B;
	opacity: 1;
}

.seed-vgal__thumb-title {
	display: block;
	padding: 6px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #22332C;
	text-align: left;
}

@media (max-width: 767px) {
	.seed-vgal__device {
		padding: 10px;
		border-radius: 20px;
	}

	.seed-vgal__play {
		padding: 12px 18px;
		font-size: 14px;
	}

	.seed-vgal__thumb {
		flex-basis: 112px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seed-vgal__poster,
	.seed-vgal__play,
	.seed-vgal__thumb {
		transition: none;
	}

	.seed-vgal__stage:hover .seed-vgal__poster,
	.seed-vgal__stage:hover .seed-vgal__play {
		transform: translate(-50%, -50%);
	}

	.seed-vgal__stage:hover .seed-vgal__poster {
		transform: none;
	}
}
/* ---------------------------------------------------------------------------
   Promise section: framed statement beside the video.
   --------------------------------------------------------------------------- */
[data-id="seed-s2-col-text"] {
	position: relative;
	padding: 34px 34px 34px 40px !important;
	border: 1px solid rgba(20, 134, 75, 0.22);
	border-radius: 20px;
	background: linear-gradient(135deg, #F5FAF7 0%, #FFFFFF 62%);
	box-shadow: 0 20px 44px -28px rgba(4, 40, 24, 0.35);
}

/* Brand edge down the left of the frame. */
[data-id="seed-s2-col-text"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	bottom: 26px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(to bottom, #14864B 0%, #45A449 100%);
}

/* Both halves come in on scroll: the frame from the left, the device from the
   right, so the pair reads as one movement rather than two loose blocks. */
[data-id="seed-s2-col-text"],
[data-id="seed-s2-col-video"] {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

[data-id="seed-s2-col-text"] {
	transform: translateX(-26px);
}

[data-id="seed-s2-col-video"] {
	transform: translateX(26px);
	transition-delay: 0.12s;
}

[data-id="seed-s2-promise"].is-revealed [data-id="seed-s2-col-text"],
[data-id="seed-s2-promise"].is-revealed [data-id="seed-s2-col-video"] {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	[data-id="seed-s2-col-text"] {
		padding: 24px 22px 24px 26px !important;
		border-radius: 16px;
	}

	/* The bezel's side padding is what carries the camera and home button; on a
	   phone it is scaled down so the screen keeps its width. */
	.seed-vgal__device {
		padding: 10px 34px;
		border-radius: 24px;
	}

	.seed-vgal__device::after {
		right: 9px;
		width: 18px;
		height: 18px;
	}

	.seed-vgal__device::before {
		left: 15px;
		width: 5px;
		height: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-id="seed-s2-col-text"],
	[data-id="seed-s2-col-video"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* ---------------------------------------------------------------------------
   Promise section background.

   The same building as the hero, carried on into the light half so the two
   screens read as one place rather than two unrelated blocks.

   `screen` is the mirror of the hero's `multiply`: where multiply guaranteed
   the backdrop could never be lighter than the green, screen guarantees it can
   never be darker than the pale colour underneath - screen(a,b) >= max(a,b) on
   every channel. So the dark green heading keeps its contrast against this
   background whatever the photograph shows, and the building stays a faint
   texture rather than a picture competing with the text.
   --------------------------------------------------------------------------- */
[data-id="seed-s2-promise"] {
	background-blend-mode: screen;
	background-attachment: scroll;
}

/* No fade layer here.

   There was one - a white gradient on .e-con-inner with a negative top inset,
   meant to soften the hand-off to the next section. But .e-con-inner is the
   1240px content column, not the full-width section, and the negative inset
   pushed it up over the green curve: it painted a lighter rectangle exactly
   one column wide across the dark green, with hard edges left and right.
   The section background is already near-white (screen blend, spread of 6),
   so nothing needs fading out. */
[data-id="seed-s2-promise"] > .e-con-inner {
	position: relative;
}
/* ---------------------------------------------------------------------------
   Promise section on a phone.
   --------------------------------------------------------------------------- */

/* The shortcode widget reported a 20px box while the tablet inside it is ~159px
   tall. The device therefore overflowed the section, and overflow:hidden cut it
   in half. Applies at every width - the desktop column was simply tall enough
   to hide the same fault. */
/* The Elementor shortcode widget refuses to grow to its content: it measures
   20px while holding a ~159px tablet, so the column collapsed and the section
   clipped the device in half. height:auto, flex-shrink:0 and swapping
   aspect-ratio for a padding box were all tried and none moved it.

   So the height is reserved explicitly instead. The screen is 16:9 inside a
   device with 34px side and 10px top/bottom padding, and the column runs the
   width of the screen less its margins - which is what this calc expresses.
   If the device padding changes, this number has to change with it. */
[data-id="seed-s2-video"],
[data-id="seed-s2-col-video"] {
	height: auto !important;
	flex-shrink: 0 !important;
}

@media (max-width: 767px) {
	[data-id="seed-s2-video"] {
		min-height: calc(56.25vw - 38px) !important;
	}
}

@media (min-width: 768px) {
	[data-id="seed-s2-video"] {
		/* Half-width column, 52px side bezel. */
		min-height: calc(28vw - 30px) !important;
	}
}

[data-id="seed-s2-video"] .elementor-shortcode,
[data-id="seed-s2-video"] .seed-vgal {
	flex-shrink: 0;
}

@media (max-width: 767px) {
	/* The heading kept the ~200px width it was given for the desktop column,
	   which squeezed it into eleven lines on a phone. */
	[data-id="seed-s2-text"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	[data-id="seed-s2-promise"] h2.elementor-heading-title {
		font-size: 20px !important;
		line-height: 1.45 !important;
	}

	[data-id="seed-s2-col-text"],
	[data-id="seed-s2-col-video"] {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* The reveal slides sideways on desktop, which on a narrow screen pushed
	   the frame 6px off the left edge before it fired. Vertical here. */
	[data-id="seed-s2-col-text"],
	[data-id="seed-s2-col-video"] {
		transform: translateY(18px);
	}
}
/* ---------------------------------------------------------------------------
   Horizontal jitter while scrolling.

   Three decorative shapes carry Elementor scroll effects and stick out past
   the right edge (up to 59px). Their sections cut them off with
   overflow:hidden - but hidden makes each of those sections a horizontal
   scroll container, so a diagonal swipe drags their contents a few pixels
   sideways and the page appears to twitch left and right as you scroll.

   overflow:clip cuts exactly the same way but creates no scroll container, so
   there is nothing left to drag. Unlike overflow:hidden it also does not break
   position:sticky, which the header relies on.
   --------------------------------------------------------------------------- */
html {
	overflow-x: clip;
}

[data-id="seed-s3-why"],
[data-id="seed-s9-admission"],
[data-id="seed-s7-life"],
[data-id="seed-s2-promise"],
[data-id="seed-h3-hero"],
/* These three carry ~140px of content past their own edge on a desktop and
   were scrollable in exactly the same way. */
[data-id="seed-s4b-dirs"],
[data-id="seed-s8-teachers"],
[data-id="seed-s9c-faq-sec"] {
	overflow: clip !important;
}
/* ---------------------------------------------------------------------------
   Hero composition in 3D.

   The pieces sit at different depths in a real 3D space, so tilting the group
   moves them by different amounts on its own - that is genuine parallax, not
   five elements animated separately.

   Each depth is paired with a compensating scale, because perspective shrinks
   what is far and enlarges what is near: at rest the composition measures
   exactly as it did before, and the depth only reveals itself in motion.
   scale = 1 - z / perspective, with perspective 1200px.
   --------------------------------------------------------------------------- */
[data-id="seed-h3-art"] {
	perspective: 1200px;
	perspective-origin: 50% 45%;
}

.seed-hero-art {
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.seed-hero-art > * {
	transform-style: preserve-3d;
}

/* Furthest back. Keeps its original -6deg tilt. */
.seed-hero-art__back {
	transform: rotate(-6deg) translateZ(-70px) scale(1.0583);
}

/* The arch stays on the zero plane - it is the anchor everything reads against. */
.seed-hero-art__arch {
	transform: translateZ(0);
}

.seed-hero-art__circle {
	transform: translateZ(45px) scale(0.9625);
}

.seed-hero-art__stat {
	transform: translateZ(85px) scale(0.9292);
}

.seed-hero-art__spark {
	transform: translateZ(110px) scale(0.9083);
}

/* Labels ride slightly proud of their frames so they do not look painted on. */
.seed-hero-art__arch .seed-hero-art__label,
.seed-hero-art__circle .seed-hero-art__label {
	transform: translateZ(18px) scale(0.985);
}

/* The tablet gets the same treatment, at a gentler angle. */
[data-id="seed-s2-col-video"] {
	perspective: 1400px;
}

.seed-vgal__device {
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* Touch screens get no tilt: there is no cursor to drive it, and the extra
   compositing is wasted work on the devices least able to afford it. */
@media (hover: none), (pointer: coarse) {
	.seed-hero-art,
	.seed-vgal__device {
		transform: none !important;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seed-hero-art,
	.seed-vgal__device {
		transform: none !important;
		transition: none;
	}
}