/*
 * Desert Flower — Production Design System (Stage 5)
 *
 * Stage 5 (2026-08-12): promotes the Founder-approved Design Lab G visual
 * system (Himalayan navy / clay / ivory, cinematic hero, atmospheric
 * mountain motif, pill buttons, structured navy CTA+footer) into
 * production, replacing the Stage 4A tokens sourced from Direction D.
 * Component structure (header/footer/buttons/cards/images/spacing) is
 * kept from Stage 4A; only the visual system — colour, hero treatment,
 * card/section styling, CTA/footer — changes. No production copy was
 * altered as part of this pass; see front-page.php/header.php/footer.php
 * for what did/didn't change.
 *
 * Never loaded on Design Lab pages (see functions.php /
 * desert_flower_is_design_lab()) — the two visual systems stay separate.
 * Design Lab G itself (assets/design-lab/direction-g.css) is untouched
 * and remains the visual reference / rollback point.
 */

:root {
	/* Colour — Desert + Sun Visual System v1.0 (Founder-locked reference).
	 * Light-first: ivory/sand/stone dominate, Deep Earth is typography/
	 * structure (not a background anchor), Terracotta is the one signature
	 * action colour, Ochre is a sparing sunlight accent. Same tokens as
	 * Stage 8B by name — only values changed — so every component already
	 * using var(--df-*) inherited the update automatically. The former
	 * --df-navy/-navy-deep/-navy-mid "dark section" family is retired:
	 * those tokens anchored the footer/CTA-band/Pedagogy+Place to a large
	 * dark block, which this system explicitly does not want. Every call
	 * site that used them was converted individually to either a light
	 * section background or (for small UI text) --df-ink directly — see
	 * v1.0 refinement notes inline at each converted component. */
	--df-bg: #FAF8F4;      /* Sunlit Ivory — primary canvas */
	--df-bg-warm: #F2E7D2; /* Desert Sand — secondary surface */
	--df-bg-beige: #E9D6B4; /* Warm Stone — borders/separators/sparing panels */
	--df-ink: #382A1E;      /* Deep Earth — typography/structure anchor */
	/* Text-safe (7.79:1 vs --df-bg) */
	--df-ink-soft: #5C4A38;
	--df-line: #DDC9A3;

	/* Supporting neutral — "Stone" grey-brown, unrelated to --df-bg-beige
	 * (kept as its own token; both happen to read as warm neutrals). */
	--df-blue: #8D8477;
	/* Text-safe (5.91:1 vs --df-bg) */
	--df-blue-text: #665D50;

	/* Terracotta Clay — the signature Desert Flower action colour.
	 * #C15A32 is the Founder-approved literal value; used directly for
	 * large/decorative elements and borders (3.59:1 vs --df-bg-warm,
	 * meets the 3:1 non-text minimum) but NOT as small body text (only
	 * 4.15:1 vs --df-bg, under the 4.5:1 text minimum) or as a button
	 * fill under white text (4.40:1, also under 4.5:1) — those two cases
	 * use the darker -text/-button variants below instead, per "where a
	 * colour fails contrast, adjust the usage rather than forcing the
	 * palette." */
	--df-clay: #C15A32;
	--df-clay-dark: #8A3D1F;
	--df-clay-light: #C97347;
	/* Text-safe (7.15:1 vs --df-bg, 6.19:1 vs --df-bg-warm) */
	--df-clay-text: #8A3D1F;
	/* White-text-safe button fill (4.73:1) — a 4% darken of #C15A32, kept
	 * as close to the literal brand value as contrast allows. */
	--df-clay-button: #B95630;
	--df-clay-button-hover: #8A3D1F;

	/* Sun Ochre — sparing sunlight accent. #D49A54 is the Founder-approved
	 * literal value; only safe as a filled badge/pill background under
	 * Deep Earth text (5.63:1) — it fails both the text (2.32:1) and
	 * non-text (2.32:1 vs --df-bg) contrast minimums used any other way,
	 * so --df-ochre-text exists for any ochre-as-text use. */
	--df-ochre: #D49A54;
	--df-ochre-dark: #8F5F28;
	--df-ochre-light: #D6A868;
	/* Text-safe (6.35:1 vs --df-bg) */
	--df-ochre-text: #7A5423;

	/* Muted Sage — optional, explicitly "extremely sparingly" per the
	 * brief. Not wired into any component in this pass; declared so it's
	 * available without inventing a naming convention later. */
	--df-sage: #A9B982;

	/* Typography — Design System v1.0, Section 3 (body/UI stack unchanged).
	 * Stage 8B adds an editorial serif for section headings only (system
	 * fonts, no new web-font loading) — see .df-site h2/h3 below. The
	 * hero's large H1 display text is deliberately NOT included in that
	 * rule, since it's part of the protected Kling hero composition. */
	--df-font: Candara, Optima, "Segoe UI", Calibri, sans-serif;
	--df-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;

	/* Spacing — Design System v1.0, Section 4 (unchanged) */
	--df-container: 1180px;
	--df-space-section-y: 5rem;
	--df-space-section-y-tablet: 3rem;
	--df-space-section-x: 1.5rem;
	--df-space-card-gap: 1.75rem;
	--df-space-mosaic-gap: 0.75rem;
	--df-space-footer-gap: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * Base / reset
 * ------------------------------------------------------------------- */

.df-site * , .df-site *::before, .df-site *::after { box-sizing: border-box; }

.df-site img { max-width: 100%; height: auto; display: block; }
.df-site a { text-decoration: none; color: inherit; }

body.df-site {
	background: var(--df-bg);
	color: var(--df-ink);
	font-family: var(--df-font);
	line-height: 1.6;
	margin: 0;
}

.df-site :focus-visible {
	outline: 3px solid var(--df-blue-text);
	outline-offset: 2px;
}

.df-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75em 1.25em;
	background: var(--df-ink);
	color: #fff;
}

.df-skip-link:focus {
	left: 0.5em;
	top: 0.5em;
}

.df-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Clearly-marked, non-public placeholder text (desert_flower_placeholder()) —
 * never meant to look finished. Must be replaced or removed before any
 * public launch. See PROJECT CONTEXT.md, "never invent institutional facts." */
.df-placeholder {
	display: inline-block;
	padding: 0.05em 0.4em;
	border: 1px dashed var(--df-line);
	color: var(--df-ink-soft);
	font-size: 0.85em;
	font-style: italic;
}

/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */

.df-site h1, .df-site h2, .df-site h3, .df-site h4 {
	font-family: var(--df-font);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin: 0 0 0.5em;
	color: var(--df-ink);
}

.df-site h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.6rem); }
.df-site h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem); }
.df-site h3 { font-size: 1.25rem; }

/* Editorial serif for section/subsection headings (Stage 8B) — h1 is
 * deliberately excluded so the hero's large display headline (.df-display,
 * part of the protected Kling hero composition) is completely unaffected;
 * it keeps the sans-serif stack. System fonts only, no new web-font load. */
.df-site h2, .df-site h3 { font-family: var(--df-font-heading); font-weight: 700; letter-spacing: 0; }

.df-site p {
	margin: 0 0 1.25em;
	color: var(--df-ink-soft);
	max-width: 62ch;
	font-size: 1.02rem;
}

/* Stage 5: eyebrows promoted to clay (were blue) — per the approved
 * Design Lab G colour system, clay is reserved for eyebrows/accents/
 * primary CTAs/important links; blue remains a secondary/hover accent
 * (nav hover, card "coming soon" icon chips). */
.df-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--df-clay-text);
	margin-bottom: 0.75em;
}

.df-container {
	max-width: var(--df-container);
	margin: 0 auto;
	padding: 0 var(--df-space-section-x);
}

/* Institutional display type — the large "DESERT FLOWER" wordmark
 * treatment (header lockup + hero). Bigger and more assertive than the
 * regular h1 scale, which remains for ordinary page headings. */
.df-display {
	font-family: var(--df-font);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 0.95;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Header / Navigation
 * ------------------------------------------------------------------- */

.df-header {
	background: linear-gradient(180deg, #FDFAF3 0%, var(--df-bg) 100%);
	border-bottom: 1px solid var(--df-line);
}

.df-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.6rem 1.5rem;
	max-width: var(--df-container);
	margin: 0 auto;
	min-height: 100px;
	box-sizing: border-box;
}

/* Header identity — Stage 5: swapped to DF Logo_05 (horizontal lockup —
 * flower mark + "Desert Flower" + "Integral Blossoming" baked into one
 * piece of artwork), transparent background, trimmed to its content
 * bounding box (the source canvas has ~570px of dead transparent padding
 * above/below the actual mark — trimming crops that empty margin, not
 * the artwork, so a wide legible lockup fits a compact header without
 * distortion). Sized/width-based per the approved Design Lab G pass —
 * see assets/design-lab/direction-g.css for the identical values. No
 * separate text lockup is added beside it; the artwork is the identity.
 *
 * Specificity note: qualified as `.df-identity .df-identity-mark` (two
 * classes) rather than `.df-identity-mark` alone, because the base reset
 * rule `.df-site img { height: auto }` (one class + one tag = higher
 * specificity than a single class) was otherwise winning the cascade and
 * forcing the logo to render at its native size — a real bug, caught via
 * an actual rendered screenshot, not a style choice. */
.df-identity {
	display: flex;
	align-items: center;
}

.df-identity .df-identity-mark {
	/* Luminosity pass: modest +11% (252→280px) so the mark reads with
	 * more presence against the ivory header — the artwork itself is
	 * untouched, this is sizing/whitespace only, per instruction not to
	 * enlarge substantially. */
	width: 280px;
	height: auto;
	flex-shrink: 0;
}

.df-logo img { height: 46px; width: auto; }

.df-nav { display: flex; align-items: center; gap: 1.5rem; }

.df-nav ul {
	list-style: none;
	display: flex;
	gap: 1.35rem;
	margin: 0;
	padding: 0;
}

/* Scoped to "ul a" specifically (not ".df-nav a") — the Enquire button is
 * a sibling of the <ul>, not inside it. A generic ".df-nav a" rule here
 * would be more specific than ".df-btn--primary" and silently override
 * the CTA's white text with the nav link colour (the exact bug found and
 * fixed in Design Lab G) — kept scoped to prevent it recurring here. */
.df-nav ul a {
	color: var(--df-ink-soft);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid transparent;
	/* Nav-item update: a 7th top-level item (Academics) made the flex
	 * layout shrink individual links below their text's natural width,
	 * wrapping mid-phrase ("Our" / "Story" on separate lines) at desktop
	 * widths where this never previously happened. Forcing each link
	 * to a single line is the correct fix — the gap reduction above
	 * recovers the room this costs. */
	white-space: nowrap;
}

.df-nav ul a:hover, .df-nav ul a:focus-visible { color: var(--df-clay-text); border-bottom-color: var(--df-clay); }

.df-nav-toggle { display: none; }
.df-nav-toggle-label { display: none; }

.df-mobile-nav { display: none; }

/* ---------------------------------------------------------------------
 * Buttons — Design System v1.0, Section 5 (Buttons)
 * ------------------------------------------------------------------- */

.df-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	font-family: var(--df-font);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 999px;
	border: 1.5px solid var(--df-ink);
	color: var(--df-ink);
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.df-btn:hover, .df-btn:focus-visible { background: var(--df-ink); color: var(--df-bg); }

/* Primary — high-priority action. Colour forced with !important: this is
 * the exact rule that was silently losing to ".df-nav a" in an earlier
 * pass (a more-specific selector overriding the button's white text with
 * the nav link colour whenever the button sat inside <nav>). The nav
 * rule is now correctly scoped to "ul a" so this shouldn't recur, but the
 * !important stays as a second, independent guard on the CTA specifically
 * called out as high-priority. */
.df-btn--primary {
	background: var(--df-clay-button);
	color: #fff !important;
	font-weight: 800;
	border-color: var(--df-clay-button);
	box-shadow: 0 6px 20px rgba(140,99,48,0.3);
}
.df-btn--primary:hover, .df-btn--primary:focus-visible {
	background: var(--df-clay-button-hover);
	border-color: var(--df-clay-button-hover);
	color: #fff !important;
}
.df-header-inner .df-btn--primary,
.df-mobile-nav .df-btn--primary {
	font-size: 0.88rem;
	padding: 0.8em 1.6em;
}

/* Secondary — supporting action (outline, default .df-btn styling above) */
.df-btn--secondary { /* alias of the base .df-btn outline style, named for clarity in markup */ }

/* Text / inline — low-emphasis navigation */
.df-btn--text {
	display: inline-block;
	padding: 0;
	border: none;
	border-bottom: 1px solid var(--df-ink);
	background: none;
	font-family: var(--df-font);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--df-ink);
}
.df-btn--text:hover, .df-btn--text:focus-visible {
	background: none;
	color: var(--df-blue-text);
	border-color: var(--df-blue-text);
}

/* ---------------------------------------------------------------------
 * Cards — Design System v1.0, Section 5 (Cards)
 * ------------------------------------------------------------------- */

.df-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-space-card-gap);
}

/* Stage 5: rounded cream cards, promoted from Design Lab G, rather than
 * flat-bordered rectangles — reads as a deliberate card surface distinct
 * from the section background. */
.df-card {
	position: relative;
	border: none;
	background: var(--df-bg);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(56,42,30,0.07), 0 10px 24px rgba(56,42,30,0.07);
	overflow: hidden;
}
.df-card::after {
	content: "\26F0";
	position: absolute; right: 0.6rem; bottom: 0.3rem;
	font-size: 2.6rem; color: var(--df-ink); opacity: 0.06;
	line-height: 1;
	pointer-events: none;
}

.df-card-body { padding: 1.85rem 1.6rem; position: relative; z-index: 1; }

/* News & Updates cards (Stage 7B) — reuses .df-card/.df-cards exactly;
 * only adds what's specific to "a whole card is one link" + a date line. */
.df-news-grid { align-items: stretch; }
.df-news-card { padding: 0; display: flex; }
.df-news-card-link {
	display: flex; flex-direction: column; width: 100%;
	color: inherit; position: relative; z-index: 1;
}
.df-news-card-photo { border-radius: 0; aspect-ratio: 16 / 10; }
.df-news-card-date {
	display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--df-clay-text); margin-bottom: 0.6em;
}
.df-news-card .df-btn--text { margin-top: 0.5em; }

.df-news-pagination ul { list-style: none; display: flex; gap: 0.6rem; margin: 3rem 0 0; padding: 0; flex-wrap: wrap; }
.df-news-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.2em; padding: 0.5em 0.75em; border: 1.5px solid var(--df-line);
	color: var(--df-ink); font-size: 0.9rem;
}
.df-news-pagination .page-numbers.current { border-color: var(--df-clay-button); color: var(--df-clay-text); font-weight: 700; }
.df-news-pagination a.page-numbers:hover { border-color: var(--df-ink); }

/* Circular icon chip — replaces the old plain "01/02/03" number label. */
.df-card-icon {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--df-bg-warm); color: var(--df-clay-text);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; margin-bottom: 1rem; font-size: 1rem;
}
.df-card--open .df-card-icon { background: #F3DFC4; color: var(--df-clay-text); }
.df-card:not(.df-card--open) .df-card-icon { background: #E9E2D3; color: var(--df-blue-text); }

.df-card-num {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--df-clay-text);
	font-weight: 600;
}

.df-card h3 { margin-top: 0.5em; }

/* Compact card variant — homepage Learning Journey preview only (Stage
 * News & Updates cards keep the base .df-card-body/.df-card-icon sizing
 * untouched, since this is scoped to .df-cards--compact, not the shared
 * base classes). Editorial-preview density rather than full detail. */
.df-cards--compact .df-card-body { padding: 1.3rem 1.3rem; }
.df-cards--compact .df-card-icon { width: 36px; height: 36px; margin-bottom: 0.6rem; font-size: 0.85rem; }
.df-cards--compact .df-badge { margin-bottom: 0.6em; }
.df-cards--compact .df-card h3 { margin-top: 0.3em; font-size: 1rem; }
.df-cards--compact .df-card p { font-size: 0.85rem; margin-bottom: 0.6em; }

/* Variants */
.df-card--info { padding: 1.5rem; }
.df-card--cta {
	border-color: var(--df-clay-button);
	background: var(--df-bg-warm);
	padding: 1.5rem;
}

/* ---------------------------------------------------------------------
 * Images — Design System v1.0, Section 5 (Photography / imagery treatment)
 *
 * .df-photo is a placeholder-safe container: with no background image set
 * it renders a neutral gradient block with an optional caption, exactly
 * like the Design Lab's pattern, so any future page that isn't ready for
 * real photography yet fails safe rather than showing a broken image.
 * ------------------------------------------------------------------- */

.df-photo {
	position: relative;
	width: 100%;
	aspect-ratio: var(--df-photo-ratio, 4 / 3);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	border-radius: 10px;
	/* Luminosity pass: the old gradient's dark corner (#8A3D1F, relative
	 * luminance 0.088 — as dark as body text) dragged this placeholder
	 * toward "muddy" rather than "sunlit," most visibly across the
	 * four-block Life at Desert Flower grid. Same warm-earth family,
	 * brighter stops throughout (0.50 → 0.38 → 0.25) — still reads as an
	 * honest gradient placeholder, not a real photo, just a warmer one. */
	background: linear-gradient(150deg, #E0B47C 0%, #D49A54 50%, #B97A46 100%);
	background-size: cover;
	background-position: center;
}

/* A real uploaded image (Stage 7B: News & Updates featured images are the
 * first real, non-placeholder use of .df-photo) fills the box exactly
 * like the placeholder gradient does. */
.df-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Homepage Life tiles link to the matching section of the Life page. */
a.df-photo { color: inherit; text-decoration: none; transition: filter .15s ease, transform .15s ease; }
a.df-photo:hover, a.df-photo:focus-visible { filter: brightness(1.05); transform: translateY(-2px); }

.df-photo__caption {
	position: relative;
	z-index: 1;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	padding: 0.5em 0.75em;
	background: rgba(46, 43, 37, 0.65);
	color: #fff;
}

/* Full-bleed section use (e.g. the HIAL band below) — no rounding, since
 * this sits edge-to-edge, not inside a padded container. */
.df-photo--wide { --df-photo-ratio: 21 / 9; border-radius: 0; }
/* HIAL band — Level 3 (homepage rhythm refinement): decorative gradient
 * only (no real photography exists yet, per existing placeholder
 * pattern), so shortening it doesn't crop any authentic image. */
.df-photo--tier3 { --df-photo-ratio: 21 / 7; }
.df-photo--square { --df-photo-ratio: 1 / 1; }

/* Editorial split — text one side, full-height image the other */
.df-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
}
.df-split .df-photo { --df-photo-ratio: auto; height: 100%; }

/* Overlay treatment — caption/gradient sits over the image rather than below it */
.df-photo--overlay {
	align-items: flex-end;
}
.df-photo--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(46,43,37,0) 40%, rgba(46,43,37,0.55) 100%);
}
.df-photo--overlay .df-photo__caption { background: none; padding: 1rem; }

/* Asymmetric mosaic — one large tile + several smaller ones. Kept for any
 * page still using it; the homepage Life section moved to .df-life-grid
 * below (Stage 5, promoted from Design Lab G's even photography grid). */
.df-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: var(--df-space-mosaic-gap);
}
.df-mosaic .df-photo { height: 100%; --df-photo-ratio: auto; }
.df-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }

/* Even photography grid — Stage 5, promoted from Design Lab G. Same
 * number of placeholder tiles as the previous mosaic (4), just laid out
 * as a clean even grid instead of one large + three small. */
.df-life-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--df-space-mosaic-gap);
}
.df-life-grid .df-photo { aspect-ratio: 4 / 3; border-radius: 10px; }

/* .df-photo--contain: for real source material (diagrams, technical
 * drawings) that must never be cropped — object-fit: contain instead of
 * the default cover, letterboxed on a cream card so the image's own
 * white background reads as an intentional "framed artifact" rather
 * than a stray white rectangle on the dark section behind it. */
.df-photo--contain {
	background: #FBF8F0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.df-photo--contain img { position: static; width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------
 * Pedagogy + Place — post-Stage-8 homepage addition. Editorial section,
 * two equal-weight panels (Pedagogy / Place), reusing the existing
 * design tokens throughout (no new palette). Panel visuals are real
 * Founder-supplied source material (an educational diagram and an
 * architectural drawing) — both letterboxed via .df-photo--contain
 * above so nothing is cropped or distorted.
 * ------------------------------------------------------------------- */

/* Ladakhi-inspired minimal line motif — homepage refinement. A single
 * thin stepped-terrace geometry (abstracted from Himalayan terracing/
 * architectural rhythm, not any specific sacred motif), used only as a
 * restrained transition device and a small identity signature — never
 * as a background behind text or diagrams. Deliberately applied in
 * exactly three places on the whole site (see front-page.php and
 * footer.php): framing the most important section (Pedagogy + Place)
 * and one small footer accent — not repeated as general wallpaper. */
.df-ladakhi-divider {
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0,11 L6,11 L6,5 L12,5 L12,11 L18,11 L18,3 L24,3 L24,11 L30,11 L30,5 L36,5 L36,11 L42,11 L42,3 L48,3' fill='none' stroke='%238A3D1F' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	background-size: 48px 14px;
	opacity: 0.4;
}
.df-ladakhi-accent {
	display: block;
	width: 96px;
	height: 14px;
	margin: 0 auto 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0,11 L6,11 L6,5 L12,5 L12,11 L18,11 L18,3 L24,3 L24,11 L30,11 L30,5 L36,5 L36,11 L42,11 L42,3 L48,3' fill='none' stroke='%238A3D1F' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 48px 14px;
	opacity: 0.45;
}
.df-footer-ladakhi {
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0,11 L6,11 L6,5 L12,5 L12,11 L18,11 L18,3 L24,3 L24,11 L30,11 L30,5 L36,5 L36,11 L42,11 L42,3 L48,3' fill='none' stroke='%238A3D1F' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	background-size: 40px 10px;
	opacity: 0.3;
}
.df-pedagogy-place {
	/* v1.0: was a large navy block — converted to Warm Stone (not Desert
	 * Sand) specifically because the Learning Journey section immediately
	 * above ends its own gradient on Desert Sand — matching would have
	 * fused the two into one long monotone band. Warm Stone gives a
	 * visible seam and keeps the "ivory → sand → stone → ivory" rhythm
	 * the brief calls for, without reintroducing a dark anchor. All child
	 * text below flipped from white/cream-on-dark to Deep-Earth-on-light
	 * accordingly. */
	background: var(--df-bg-beige);
	padding: var(--df-space-section-y) var(--df-space-section-x);
}
.df-pp-intro {
	max-width: 60ch;
	margin: 0 auto 3.5rem;
	text-align: center;
}
.df-pp-intro .df-eyebrow { color: var(--df-clay-text); }
.df-pp-intro h2 { color: var(--df-ink); margin-left: auto; margin-right: auto; }
.df-pp-intro p { color: var(--df-ink-soft); max-width: 55ch; margin: 0 auto; }

.df-pp-grid {
	max-width: var(--df-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

.df-pp-panel .df-eyebrow { color: var(--df-clay-text); }
.df-pp-panel h3 { color: var(--df-ink); font-size: 1.6rem; margin-bottom: 0.6em; }
.df-pp-panel p { color: var(--df-ink-soft); }

.df-pp-visual {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	margin-bottom: 1.5rem;
}
/* The K-12 design image (Media Library #85) was prepared by the Founder
 * specifically to trim its surrounding whitespace and is nearly square
 * (2339x2478px, ~0.944) — matching the container to its real ratio (not
 * the old tall-portrait crop this box was originally tuned for) keeps
 * the image filling its frame instead of floating in empty margin. */
.df-pp-place .df-pp-visual { aspect-ratio: 2339 / 2478; }

.df-pp-principles {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}
.df-pp-principles li {
	color: var(--df-ink-soft);
	font-size: 0.92rem;
	padding-left: 1.4em;
	position: relative;
}
.df-pp-principles li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--df-clay);
}

.df-pp-microlabels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}
.df-pp-microlabels span {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--df-ink-soft);
	border: 1px solid rgba(56,42,30,0.22);
	border-radius: 999px;
	padding: 0.4em 0.9em;
}

/* V&A credit (Stage 8B: text only, no thumbnail — the photograph stays
 * in the Media Library for a future dedicated page) — deliberately
 * small and secondary, sits below the pedagogy principles rather than
 * competing with the main diagram. */
.df-pp-va-text {
	font-size: 0.78rem;
	color: var(--df-ink-soft);
	font-style: italic;
	margin: 0 0 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(56,42,30,0.18);
}

/* "View larger" enlarge affordance — sits inside the image frame,
 * bottom-right, only meaningful once an image is present (no button
 * rendered in the placeholder-missing branch). */
.df-pp-visual { position: relative; }
.df-pp-enlarge {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.9em;
	border: 1px solid rgba(56,42,30,0.25);
	border-radius: 999px;
	background: rgba(250,248,244,0.92);
	color: var(--df-ink);
	font-family: var(--df-font);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.df-pp-enlarge:hover,
.df-pp-enlarge:focus-visible {
	background: #fff;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
 * Lightbox (Stage 8B) — shared dialog for the Pedagogy + Place images.
 * Hidden via the `hidden` attribute by default; JS toggles it. Warm-
 * toned backdrop (not pure black) to match the Desert + Sun identity.
 * ------------------------------------------------------------------- */
.df-pp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.df-pp-lightbox[hidden] { display: none; }
.df-pp-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31,22,13,0.88);
}
.df-pp-lightbox-dialog {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 1100px);
	max-height: 90vh;
	display: flex;
}
.df-pp-lightbox-dialog img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	margin: auto;
	border-radius: 8px;
	background: #FBF8F0;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.df-pp-lightbox-close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.7);
	background: rgba(31,22,13,0.5);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.df-pp-lightbox-close:hover,
.df-pp-lightbox-close:focus-visible { background: rgba(31,22,13,0.85); }
.df-pp-lightbox :focus-visible { outline: 3px solid var(--df-ochre-light); outline-offset: 2px; }

@media (max-width: 640px) {
	.df-pp-lightbox { padding: 1rem; }
	.df-pp-lightbox-close { top: -3.25rem; }
}

/* Scoped under .df-pp-panel (not just .df-pp-cta) so this beats the
 * higher-specificity .df-site a { color: inherit; } rule — the same
 * class of specificity bug documented elsewhere in this stylesheet.
 * v1.0: this section is now light (Desert Sand), so the link is
 * Deep-Earth-on-light rather than white-on-navy, but the specificity
 * fix itself still matters — .df-site a's color:inherit would otherwise
 * silently win again the next time this component moves backgrounds. */
.df-pp-panel .df-pp-cta {
	display: inline-block;
	padding: 0;
	border: none;
	border-bottom: 1px solid rgba(56,42,30,0.4);
	background: none;
	font-family: var(--df-font);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--df-ink);
}
.df-pp-panel .df-pp-cta:hover, .df-pp-panel .df-pp-cta:focus-visible {
	color: var(--df-clay-text);
	border-color: var(--df-clay-text);
}
/* v1.0: this section is now light, so the site-wide default focus
 * outline (--df-blue-text, 5.28:1 vs this section's Desert Sand
 * background) already clears the 3:1 minimum on its own — the earlier
 * navy-specific override is gone; no scoped rule needed here anymore. */
/* Honest "no page yet" treatment (Pedagogy CTA currently has no
 * dedicated destination) — muted, non-interactive, no fake href. */
.df-pp-cta--pending {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--df-blue-text);
	font-style: italic;
	border-bottom: 1px dashed rgba(56,42,30,0.3);
}

/* Stage-status badge (Learning Stage cards): open vs. coming — never
 * invented, always reflects the post's real stage_status meta. Solid
 * pill fill (Stage 5, promoted from Design Lab G) rather than a thin
 * outline, for stronger hierarchy. */
.df-badge {
	display: inline-block;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	background: var(--df-ink);
	color: #fff;
	margin-bottom: 0.8em;
}
.df-badge--open { background: var(--df-clay-button); }

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

/* Footer — v1.0 (Desert + Sun): converted from a full deep-navy block to
 * the approved light system — "the final page of an elegant school
 * prospectus printed on warm paper," not a dark-theme footer. Desert
 * Sand background (one step warmer than the ivory page body above it,
 * so there's still a visible seam) with Deep Earth text throughout and
 * Terracotta reserved for hover/active states, per the brief's explicit
 * footer spec. No fabricated address/phone/email/social accounts —
 * pending fields keep the existing bracketed-placeholder convention
 * (desert_flower_placeholder()). */
.df-footer {
	background: var(--df-bg-warm);
	color: var(--df-ink);
	border-top: 1px solid var(--df-bg-beige);
}

.df-footer-inner {
	max-width: var(--df-container);
	margin: 0 auto;
	padding: 5rem 1.5rem 3.5rem;
	display: grid;
	grid-template-columns: 1.7fr repeat(4, 1fr);
	gap: 2.75rem;
}

.df-footer-brand p { color: var(--df-ink-soft); font-size: 0.85rem; margin-top: 0; max-width: 30ch; line-height: 1.7; }
.df-footer-brand img { margin-bottom: 1.25rem; }

.df-footer h4 {
	color: var(--df-ink);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 1.35em;
}

.df-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85em; }
.df-footer li { margin-bottom: 0; }
.df-footer a { color: var(--df-ink); font-size: 0.88rem; }
.df-footer a:hover, .df-footer a:focus-visible { color: var(--df-clay-text); }
.df-footer .df-placeholder { color: var(--df-blue-text); border-color: rgba(56,42,30,0.25); }

.df-footer-bottom {
	border-top: 1px solid var(--df-bg-beige);
}
.df-footer-bottom-inner {
	max-width: var(--df-container);
	margin: 0 auto;
	padding: 1.4rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--df-ink-soft);
}

.df-footer-bottom a { color: var(--df-ink-soft); text-decoration: underline; }
.df-footer-bottom a:hover, .df-footer-bottom a:focus-visible { color: var(--df-clay-text); }

/* ---------------------------------------------------------------------
 * Inner-page components (Stage 5 — Our Story / Learning / Life at Desert
 * Flower / Admissions / Contact / FAQ). Shared by page-templates/standard.php,
 * single-learning_stage.php, faq.php, contact.php.
 * ------------------------------------------------------------------- */

/* Form card + fields (Stage 6) — used by contact.php's two enquiry
 * forms. Replaces the previous inline-styled inputs with a reusable,
 * accessible component: clear labels, generous tap targets, a visible
 * clay focus ring (not just the browser default), and a required-field
 * marker. */
.df-form-card {
	background: var(--df-bg);
	border: 1px solid var(--df-line);
	border-radius: 12px;
	padding: 2rem;
}
.df-form-card h2 { margin-top: 0; }

.df-form-required-key { font-size: 0.78rem; color: var(--df-ink-soft); margin: -0.5rem 0 1.25rem; }
.df-field { margin-bottom: 1.25rem; }
.df-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--df-ink);
	margin-bottom: 0.45em;
}
.df-field .df-field-required { color: var(--df-clay-text); }
.df-field input,
.df-field textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	font-family: var(--df-font);
	font-size: 0.95rem;
	color: var(--df-ink);
	background: var(--df-bg);
	border: 1.5px solid var(--df-line);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.df-field input:focus-visible,
.df-field textarea:focus-visible {
	outline: none;
	border-color: var(--df-blue);
	box-shadow: 0 0 0 3px rgba(95,127,143,0.25);
}
.df-field textarea { resize: vertical; min-height: 7em; }

/* Client-side validation feedback (Stage 7) — honest, backend-free: these
 * forms have no server behind them yet (see contact.php's disclosure
 * note), so this only styles the browser's own native required/type
 * validation. :invalid is scoped to :not(:placeholder-shown,:focus) so a
 * still-empty required field doesn't show red before the visitor has
 * even reached it. */
.df-field input:invalid:not(:placeholder-shown):not(:focus),
.df-field textarea:invalid:not(:placeholder-shown):not(:focus) {
	border-color: #A94438;
}
.df-field-error {
	display: none;
	font-size: 0.8rem;
	color: #A94438;
	margin-top: 0.4em;
}
.df-field input:invalid:not(:placeholder-shown):not(:focus) ~ .df-field-error,
.df-field textarea:invalid:not(:placeholder-shown):not(:focus) ~ .df-field-error {
	display: block;
}

.df-form-note {
	font-size: 0.85rem;
	color: var(--df-ink-soft);
	font-style: italic;
	margin-top: 1rem;
}

/* Contact Form 7 — Stage 7C. CF7 ships its own stylesheet with generic
 * WordPress-admin colours (blue/red/yellow); these overrides only bring
 * its font, spacing and status colours in line with the site's existing
 * tokens — no new visual language, no layout change. */
.wpcf7 form { font-family: var(--df-font); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 .wpcf7-not-valid-tip {
	color: #A94438;
	font-size: 0.8rem;
	margin-top: 0.35em;
}
.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.85em 1.1em;
	border-radius: 8px;
	font-size: 0.9rem;
	border-width: 1.5px;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #3E7A4B; color: #2E5B38; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--df-clay-button); color: var(--df-clay-text); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: #A94438; color: #A94438; }
.wpcf7-spinner { margin: 0 0 0 0.5em; }

.df-404-links {
	margin: 2rem auto 0;
	font-size: 0.9rem;
	color: var(--df-ink-soft);
}
.df-404-links a { color: var(--df-clay-text); font-weight: 600; }
.df-404-links a:hover { color: var(--df-clay-dark); }

.df-page-hero {
	background: linear-gradient(180deg, #FDFAF3 0%, var(--df-bg-warm) 100%);
	border-bottom: 1px solid var(--df-line);
	padding: 4.5rem 1.5rem;
}

.df-page-hero h1 { max-width: 24ch; }

/* Scoped to ".df-page-hero .df-page-lead" (two classes) — same fix as
 * ".df-hero-content .df-hero-statement": a bare single-class rule loses
 * to ".df-site p" (class+tag) for both colour AND font-size, which was
 * silently shrinking the lead paragraph back to the default 1.02rem. */
.df-page-hero .df-page-lead,
.df-page-body .df-page-lead {
	max-width: 62ch;
	font-size: 1.15rem;
	color: var(--df-ink-soft);
}

.df-page-body {
	padding-top: 3.5rem;
	/* >= the .df-cta pull-up (48px) plus a safety margin, so a CTA band
	 * placed directly after this container never overlaps real content —
	 * see the .df-cta comment above for the bug this prevents. */
	padding-bottom: 4rem;
}

.df-page-body p { max-width: 68ch; }
.df-page-body h2 { margin-top: 2.5rem; }
.df-page-body h3 { margin-top: 1.75rem; }

/* Pending-information treatment — deliberately unmistakable: a dashed
 * clay border and a small "PENDING" label so a reader can tell "real
 * content" from "not yet available" at a glance, never guessing. */
.df-pending-banner {
	position: relative;
	max-width: none;
	background: var(--df-bg-warm);
	border: 1px dashed var(--df-clay);
	border-radius: 8px;
	padding: 1.25em 1.25em 1em;
	font-size: 0.9rem;
	color: var(--df-ink-soft);
	margin: 1.5rem 0;
}
.df-pending-banner::before {
	content: "Pending";
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--df-clay-text);
	margin-bottom: 0.5em;
}

/* Adjacent Learning Stage navigation (Stage 6). */
.df-stage-meta { margin-top: 1rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.df-stage-age { font-size: 0.85rem; color: var(--df-ink-soft); }
.df-stage-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	/* Bottom padding >= the .df-cta pull-up that follows it, same reason
	 * as .df-page-body above. */
	padding: 2.5rem 1.5rem 4rem;
	border-top: 1px solid var(--df-line);
}
.df-stage-nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--df-line);
	border-radius: 10px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.df-stage-nav-link:hover, .df-stage-nav-link:focus-visible { border-color: var(--df-clay-button); background: var(--df-bg-warm); }
.df-stage-nav-link--next { text-align: right; align-items: flex-end; grid-column: 2; }
.df-stage-nav-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-clay-text); }
.df-stage-nav-title { font-size: 1.1rem; font-weight: 700; color: var(--df-ink); }

/* FAQ accordion — native <details>/<summary>, no JavaScript. Card-style
 * rows (Stage 6) rather than plain dividers, with a visible focus ring
 * and a rotating +/− marker so open/closed state is unambiguous. */
.df-faq-list { border-top: none; display: flex; flex-direction: column; gap: 0.85rem; }

.df-faq-item {
	border: 1px solid var(--df-line);
	border-radius: 10px;
	padding: 0.35rem 1.25rem;
	background: var(--df-bg);
	transition: border-color 0.15s ease;
}
.df-faq-item[open] { border-color: var(--df-clay-button); }

.df-faq-item summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--df-ink);
	list-style: none;
}
.df-faq-item summary:focus-visible { outline: 3px solid var(--df-blue-text); outline-offset: 4px; border-radius: 4px; }
.df-faq-item summary::-webkit-details-marker { display: none; }
.df-faq-item summary::before {
	content: "+";
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--df-bg-warm);
	color: var(--df-clay-text);
	font-weight: 700;
	order: 2;
}
.df-faq-item[open] summary::before { content: "\2212"; background: var(--df-clay-button); color: #fff; }

.df-faq-item p {
	margin: 0 0 1.1rem;
	color: var(--df-ink-soft);
}

/* ---------------------------------------------------------------------
 * Hero — Stage 4B addition, same asymmetric-split language as .df-split,
 * with the text-column rhythm Direction D specified but Stage 4A hadn't
 * needed to build yet (no pages existed).
 * ------------------------------------------------------------------- */

.df-hero { border-bottom: 1px solid var(--df-line); }

.df-hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 3rem;
}

.df-hero-actions { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }

/* Full-bleed immersive hero — Stage 5: promotes the Design Lab G hero
 * treatment (see assets/design-lab/direction-g.css for the identical
 * source rules). Navy-dominant colour-graded sky (not a flat placeholder
 * tone or a wide rainbow wash), a faint SVG-turbulence grain layer so the
 * gradient reads as colour-graded footage rather than flat vector art, a
 * directional golden-hour glow, two soft atmospheric mountain layers,
 * and a small illustrated settlement cue (rooftops + warm light dots) —
 * all clearly stylised, never presented as an actual photograph, per the
 * standing "no fabricated imagery" rule. Left-aligned text column with a
 * strong directional scrim; the play control sits independently on the
 * right. */
.df-hero-full {
	position: relative;
	min-height: 76vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--df-line);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #060D14 0%, #0E1C29 28%, #1A2C3A 50%, #263A42 68%, #333829 84%, #443B29 100%);
	background-blend-mode: overlay, normal;
	background-size: 140px 140px, cover;
}

/* Golden-hour glow — a low, off-centre "sun" the mountains sit against. */
.df-hero-glow {
	position: absolute; z-index: 1; pointer-events: none;
	right: 6%; bottom: 22%; width: 42%; height: 60%;
	background: radial-gradient(ellipse at center, rgba(224,164,92,0.55) 0%, rgba(200,132,66,0.22) 40%, rgba(200,132,66,0) 72%);
	filter: blur(3px);
}

/* Mountains: a subordinate atmospheric cue, not the focal element — low,
 * soft, low-contrast against the navy so they dissolve into dusk rather
 * than reading as an illustrated silhouette. */
.df-hero-ridge { position: absolute; inset: 0; z-index: 1; }
.df-hero-ridge svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 32%; }
.df-hero-ridge .df-ridge-back { opacity: 0.3; filter: blur(2px); }
.df-hero-ridge .df-ridge-front { fill: #0B1720; opacity: 0.8; filter: blur(1px); }

/* Small silhouetted rooftops + warm light dots on the ridge shoulder — an
 * honest illustrated suggestion of a mountainside campus, positioned
 * clear of the text column. */
.df-hero-settlement {
	position: absolute; z-index: 1; left: 58%; bottom: 10%; width: 22%; max-width: 220px;
	pointer-events: none;
}
.df-hero-settlement svg { display: block; width: 100%; height: auto; opacity: 0.8; }
.df-hero-light {
	position: absolute; bottom: 17%; width: 4px; height: 4px; border-radius: 50%;
	background: #F0C382; box-shadow: 0 0 6px 2px rgba(240,195,130,0.7);
}

/* Superseded by .df-hero-video-scrim below now that the hero uses a real
 * video (post-Stage-8 hero promotion) — kept, unused, so the illustrated
 * fallback further down (rendered only if the video attachment is ever
 * missing) still gets its original scrim treatment back automatically. */
.df-hero-full:not(:has(.df-hero-video))::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(6,13,20,0.9) 0%, rgba(6,13,20,0.66) 38%, rgba(6,13,20,0.2) 66%, rgba(6,13,20,0.08) 100%),
	            linear-gradient(180deg, rgba(6,13,20,0.3) 0%, rgba(6,13,20,0) 26%, rgba(6,13,20,0.32) 100%);
}

/* ---------------------------------------------------------------------
 * Hero video (post-Stage-8 promotion from Design Lab H) — real <video>
 * as cinematic background media, object-fit: cover, plus a directional
 * scrim (strong left for headline readability, light right so the
 * school/children/mountains stay visible) rather than the old symmetric
 * overlay above. Same proportions/positions as the illustrated hero it
 * replaces (76vh, same content column, same play-button position) so
 * nothing else in the hero needed to move.
 * ------------------------------------------------------------------- */
/* Scoped to ".df-hero-full .df-hero-video" (two classes) rather than the
 * bare class alone — ".df-site img" (class+tag) is otherwise more
 * specific and silently wins, leaving the poster at its native inline
 * size/aspect instead of filling the hero, and the video only partially
 * styled. Same class of bug already documented above for
 * ".df-hero-content .df-hero-statement" — fixed the same way: scope up
 * rather than reach for !important. */
.df-hero-full .df-hero-video,
.df-hero-full .df-hero-poster {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Right-of-centre keeps the school building + children in frame;
	 * vertical anchor biased low so the Kling watermark (bottom-right of
	 * the source video) is never cropped out by the cover-fit — same
	 * reasoning as Design Lab H. Tuned further per breakpoint below. */
	object-position: 62% 100%;
}
.df-hero-full .df-hero-poster { display: none; }

@media (prefers-reduced-motion: reduce) {
	.df-hero-full .df-hero-video { display: none; }
	.df-hero-full .df-hero-poster { display: block; }
}

.df-hero-video-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(6,13,20,0.78) 0%,
			rgba(6,13,20,0.52) 30%,
			rgba(6,13,20,0.22) 58%,
			rgba(6,13,20,0.06) 82%,
			rgba(6,13,20,0) 100%),
		linear-gradient(180deg,
			rgba(6,13,20,0.18) 0%,
			rgba(6,13,20,0) 22%,
			rgba(6,13,20,0) 70%,
			rgba(6,13,20,0.38) 100%);
}

.df-hero-content {
	position: relative;
	z-index: 3;
	max-width: var(--df-container);
	margin: 0 auto;
	padding: 2rem 1.5rem;
	width: 100%;
	color: #fff;
}

.df-hero-content-inner { max-width: 46ch; }

.df-hero-content .df-eyebrow { color: var(--df-clay-light); }

.df-hero-content .df-display {
	color: #fff;
	font-weight: 700;
	font-size: clamp(3rem, 6.5vw + 1rem, 6rem);
	line-height: 0.95;
	margin-bottom: 0.5rem;
	text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

/* Scoped to ".df-hero-content .df-hero-statement" (two classes) rather
 * than the single class alone — ".df-site p" (class+tag) is otherwise
 * more specific and silently wins, leaving the statement in the dark
 * body-text colour instead of warm white. Same class of bug as the
 * Enquire-button/nav-link conflict found in Design Lab G; fixed the same
 * way — scope up rather than reach for !important. */
.df-hero-content .df-hero-statement { color: #FBF8F0; max-width: 46ch; font-size: 1.05rem; margin-bottom: 1.1em; }

/* Video placeholder: production-ready structure — swap in a real <video>
 * or embed later without touching this markup/CSS. Never an actual fake
 * video source; the gradient + mountains + play affordance together ARE
 * the placeholder. Positioned independently on the right, per the
 * approved Design Lab G composition (previously centred). */
.df-hero-film-play {
	position: absolute;
	right: 9%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.4rem;
	background: rgba(11,20,28,0.35);
	backdrop-filter: blur(2px);
	transition: background 0.15s ease, transform 0.15s ease;
	cursor: pointer;
	padding: 0;
}

.df-hero-full:hover .df-hero-film-play,
.df-hero-film-play:focus-visible {
	background: rgba(11,20,28,0.6);
	transform: translateY(-50%) scale(1.06);
}

.df-hero-film-play-label {
	position: absolute; right: calc(9% + 26px); top: calc(50% + 58px); transform: translateX(50%);
	z-index: 3; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

.df-hero-film-caption {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 3;
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(11,20,28,0.6);
	padding: 0.4em 0.75em;
}

/* ---------------------------------------------------------------------
 * Sections (generic — real pages compose these)
 * ------------------------------------------------------------------- */

.df-section { padding: var(--df-space-section-y) var(--df-space-section-x); max-width: var(--df-container); margin: 0 auto; }

/* Warm variant — the deliberate "warmth" introduced per Design System
 * v1.0 Section 2 (cream background on select sections, not the whole site). */
.df-section--warm { background: var(--df-bg-warm); }
.df-section--warm .df-section { background: none; }

/* Cool variant — Stage 5, promoted from Design Lab G: the pale
 * atmospheric blue-grey backdrop behind the Learning cards. */
.df-section--cool { background: linear-gradient(180deg, var(--df-bg-beige) 0%, var(--df-bg-warm) 100%); }
.df-section--cool .df-section { background: none; }
/* Stage 8B — Academics sits directly above the flat --df-bg-warm
 * Founding Ambition section below it; the standard gradient above ends
 * on that exact same colour, so the two sections visually fused into
 * one band with no seam. Reversing the stops here keeps a soft entry
 * from the white Life section above while ending on the deeper beige,
 * giving a visible boundary before Founding Ambition — contrast and
 * rhythm per the visual identity brief, not a new colour. */
#academics.df-section--cool { background: linear-gradient(180deg, var(--df-bg-warm) 0%, var(--df-bg-beige) 100%); }

/* Simplified (Stage 5): dropped the border-bottom divider — the approved
 * Design Lab G section head is just eyebrow + heading, no rule line. */
.df-section-head { margin-bottom: 2.5rem; max-width: 60ch; }

/* ---------------------------------------------------------------------
 * Section tiers — homepage visual-rhythm refinement (post-Pedagogy+Place).
 * Three levels of visual weight so supporting sections read as clearly
 * secondary to the signature ones (hero, Pedagogy+Place, Life at Desert
 * Flower, Admissions CTA — all left untouched, none of these classes
 * applied to them). Reuses existing tokens (the tablet section-y padding,
 * the existing heading scale) rather than introducing new one-off values.
 * Applied per-section on the homepage only.
 * ------------------------------------------------------------------- */
.df-section--tier2 {
	padding-top: var(--df-space-section-y-tablet);
	padding-bottom: var(--df-space-section-y-tablet);
}
.df-section--tier2 h2 { font-size: clamp(1.4rem, 1.7vw + 1rem, 1.9rem); }
.df-section--tier2 .df-eyebrow { margin-bottom: 0.5em; }
.df-section--tier2 p { margin-bottom: 0.85em; }

.df-section--tier3 {
	padding-top: 2.75rem;
	padding-bottom: 2.75rem;
}
.df-section--tier3 h2 { font-size: clamp(1.2rem, 1.3vw + 1rem, 1.5rem); }
.df-section--tier3 .df-eyebrow { margin-bottom: 0.4em; font-size: 0.7rem; }
.df-section--tier3 p { font-size: 0.92rem; margin-bottom: 0.7em; }
.df-section--tier3 .df-section-head { margin-bottom: 1.5rem; }

.df-cards--4 { grid-template-columns: repeat(4, 1fr); }

/* CTA — Stage 5: rebuilt to match Design Lab G. The entire section IS a
 * soft Himalayan horizon (not a flat solid-colour box): a two-layer
 * atmospheric ridge fills the section, pulled up with a negative margin
 * so it visually continues from the section above, with the CTA copy
 * centred directly over the terrain — "content → horizon → navy CTA →
 * navy footer" as one continuous transition into the footer below. */
.df-cta {
	position: relative;
	/* Pulled up 48px so the mountain peaks visually intrude into whatever
	 * section precedes it, same device as the homepage — kept modest
	 * (rather than the original 64px) so it stays safe against every
	 * caller's bottom padding (.df-page-body, .df-stage-nav, etc.), not
	 * just the homepage's own 80px-padded section. A -64px pull-up once
	 * silently hid the last lines of the Admissions page's "Questions?"
	 * paragraph behind the CTA's opaque background — found via an actual
	 * rendered screenshot, not by inspecting the CSS. */
	margin-top: -48px;
	padding-top: 48px;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	/* v1.0: was a dark navy horizon band — converted to the approved light
	 * gradient (ivory → sand → stone). The ridge silhouette motif is kept
	 * (same SVG/component, not removed) but recoloured from a literal
	 * dark night-horizon into a soft warm tone-shift — see .df-cta-ridge
	 * overrides below — so it reads as a gentle dune layer rather than a
	 * dark mass. */
	background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg-warm) 55%, var(--df-bg-beige) 100%);
	color: var(--df-ink);
}
.df-cta-ridge { position: absolute; inset: 0; z-index: 0; }
.df-cta-ridge svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 42%; }
.df-cta-ridge .df-ridge-back { opacity: 0.18; filter: blur(2px); }
/* Overrides the shared ridge SVG's own dark fill (still used, unchanged,
 * by the Hero's untouched fallback branch and Design Lab) — scoped to
 * this component only, so this is a colour-only override, not an edit
 * to the shared function or the Hero. */
.df-cta-ridge .df-ridge-front { fill: var(--df-clay-dark); opacity: 0.22; filter: blur(1px); }
.df-cta-ridge::after {
	content: "";
	position: absolute; left: 20%; right: 20%; bottom: 10%; height: 40%;
	background: radial-gradient(ellipse at center, rgba(212,154,84,0.14) 0%, rgba(212,154,84,0.05) 50%, rgba(212,154,84,0) 78%);
	z-index: 1; pointer-events: none;
}
.df-cta-inner {
	position: relative; z-index: 2; text-align: center;
	max-width: 640px; margin: 0 auto; padding: 3.5rem 1.5rem 0;
}
.df-cta h2, .df-cta h3 { color: var(--df-ink); font-size: clamp(1.9rem, 2.5vw + 1rem, 2.6rem); }
.df-cta p { color: var(--df-ink-soft); margin: 0 auto 1.6em; }
.df-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
 * Responsive — Design System v1.0, Section 6
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {
	.df-split { grid-template-columns: 1fr; }
	.df-hero-text { padding: 3rem 1.5rem; }
	.df-cards { grid-template-columns: 1fr; }
	.df-cards--4 { grid-template-columns: 1fr 1fr; }
	.df-mosaic { grid-template-columns: repeat(2, 1fr); }
	.df-mosaic > :first-child { grid-column: span 2; }
	.df-life-grid { grid-template-columns: 1fr 1fr; }
	.df-section { padding-top: var(--df-space-section-y-tablet); padding-bottom: var(--df-space-section-y-tablet); }
	/* Two 4:3/3:4 panels side by side get too narrow to read comfortably
	 * by ~900px — stack instead of forcing a cramped column, per brief. */
	.df-pedagogy-place { padding-top: var(--df-space-section-y-tablet); padding-bottom: var(--df-space-section-y-tablet); }
	.df-pp-grid { grid-template-columns: 1fr; gap: 3rem; }
	.df-pp-place .df-pp-visual { aspect-ratio: 2339 / 2478; }
	.df-footer-inner { grid-template-columns: 1fr 1fr; }
	.df-identity .df-identity-mark { width: 225px; }
	.df-hero-film-play { right: 1.5rem; }
	.df-hero-full .df-hero-video,
	.df-hero-full .df-hero-poster { object-position: 98% 100%; }
	.df-hero-film-play-label { right: calc(1.5rem + 26px); }

	/* Stage 7 fix: the full desktop nav (6 items + Enquire pill) has no
	 * room between 640–900px and was wrapping mid-phrase ("Our" / "Story"
	 * breaking onto separate lines) — caught via an actual tablet-width
	 * screenshot. Moved the existing mobile-nav collapse here from 640px
	 * so the tablet range gets the same (already-built, already-tested)
	 * hamburger drawer instead of a cramped, wrapping desktop nav. */
	.df-header-inner .df-nav ul { display: none; }
	.df-header-inner .df-nav .df-btn { display: none; }

	.df-nav-toggle-label {
		display: inline-block;
		font-size: 0.8rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		border: 1.5px solid var(--df-ink);
		padding: 0.5em 0.9em;
		cursor: pointer;
	}

	.df-nav-toggle:checked ~ .df-mobile-nav { display: block; }

	.df-mobile-nav {
		padding: 1rem 1.5rem 1.5rem;
		border-top: 1px solid var(--df-line);
	}
	.df-mobile-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
}

@media (max-width: 640px) {
	.df-cards--4 { grid-template-columns: 1fr; }
	.df-life-grid { grid-template-columns: 1fr; }
	.df-hero-actions { flex-direction: column; align-items: flex-start; }

	/* The pedagogy diagram carries real text/labels — give it more
	 * vertical room at this width rather than shrinking it further. */
	.df-pp-visual { aspect-ratio: 1 / 1; }
	.df-pp-place .df-pp-visual { aspect-ratio: 2339 / 2478; }
	.df-pp-grid { gap: 3.5rem; }

	/* Logo shrinks but stays legible — width-based (Stage 5), scaled
	 * proportionally from the desktop 280px size (luminosity pass). */
	.df-identity .df-identity-mark { width: 188px; }
	.df-header-inner { padding: 0.6rem 1.5rem; min-height: auto; }

	.df-hero-full { min-height: 82vh; align-items: flex-end; padding-bottom: 2.5rem; }
	.df-hero-film-play { width: 64px; height: 64px; font-size: 1.15rem; top: 30%; }
	.df-hero-film-play-label { top: calc(30% + 48px); }
	.df-hero-settlement { display: none; }
	/* Portrait aspect crops hard on the sides rather than top/bottom;
	 * biased toward the bottom-right corner so the watermark stays in
	 * frame, and tuned (see mobile refinement pass) so the child in
	 * frame isn't sitting directly behind the CTA buttons. */
	.df-hero-full .df-hero-video,
	.df-hero-full .df-hero-poster { object-position: 98% 20%; }
	.df-hero-video-scrim {
		background:
			linear-gradient(90deg, rgba(6,13,20,0.85) 0%, rgba(6,13,20,0.6) 45%, rgba(6,13,20,0.3) 80%, rgba(6,13,20,0.12) 100%),
			linear-gradient(180deg, rgba(6,13,20,0.1) 0%, rgba(6,13,20,0) 20%, rgba(6,13,20,0.1) 55%, rgba(6,13,20,0.55) 100%);
	}

	.df-cta { min-height: 400px; }
	.df-footer-inner { grid-template-columns: 1fr; padding-top: 3.5rem; }

	.df-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}