/*
Theme Name: Children's Academy
Theme URI: https://github.com/davidwalker007/childrens-academy-theme
Author: David Walker Designs
Description: Custom theme for the Children's Academy locations (Westland, Maryville, Ebenezer). One shared design; per-location brand color is set by CA_SITE_KEY in inc/palette.php.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: childrens-academy
*/

/* Color tokens are injected from inc/palette.php as CSS custom properties. */

/* ============================ Base ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
	margin:0;
	background:var(--paper);
	color:var(--body);
	font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-family:Archivo,Inter,sans-serif;line-height:1.08;letter-spacing:-.015em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px}

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

:where(a,button,input,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Scroll-reveal: JS toggles .is-visible via IntersectionObserver (assets/js/main.js). */
.reveal{
	opacity:0;transform:translateY(38px);
	transition:opacity 1.15s cubic-bezier(.2,.7,.3,1),transform 1.15s cubic-bezier(.2,.7,.3,1);
	transition-delay:calc(var(--d,0) * 170ms);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal.reveal--right{
	transform:translateX(70px);
	transition-duration:2s;
}
.reveal.reveal--right.is-visible{transform:none}
.reveal.reveal--left{
	transform:translateX(-70px);
	transition-duration:2s;
}
/*
 * Location cards sit entirely above the fold, so a scroll-triggered
 * IntersectionObserver fires at page load and races page paint/fonts —
 * there's no scroll gesture for the user to anchor a "before" state
 * against, so the stagger reads as instant no matter how it's tuned.
 * Use a deterministic page-load keyframe animation instead.
 */
@keyframes loc-card-in{
	from{opacity:0;transform:translateY(38px)}
	to{opacity:1;transform:none}
}
.loc-card.reveal{
	opacity:0;
	animation:loc-card-in 1.15s cubic-bezier(.2,.7,.3,1) forwards;
	animation-delay:calc(var(--d,0) * 500ms);
}
@media (prefers-reduced-motion: reduce){
	.loc-card.reveal{opacity:1;transform:none;animation:none}
}
.reveal.reveal--left.is-visible{transform:none}
@media (prefers-reduced-motion: reduce){
	.reveal{opacity:1;transform:none;transition:none}
}

/* ============================ Type scale ============================ */
.h2{font-size:clamp(2rem,4.4vw,3.35rem);color:#fff;text-transform:uppercase;font-weight:700}
.h2--ink{color:var(--ink)}
.h4{font-size:clamp(1.05rem,1.8vw,1.35rem);color:#fff;text-transform:uppercase;font-weight:700;letter-spacing:.01em}

.eyebrow{
	font-size:.76rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
	color:rgba(255,255,255,.82);margin:0 0 .9em;
}
.eyebrow--ink{color:var(--brand)}
.eyebrow--rule{color:var(--ink);opacity:.75;margin:1.4em 0}
.eyebrow span{opacity:.45;margin:0 .35em}

.script{
	font-family:Caveat,cursive;font-size:clamp(1.15rem,2vw,1.5rem);
	line-height:1.25;color:var(--ink);margin:0;
}
.script--gold{color:#E9C46A}
.script--hero{font-size:1.3rem;transform:rotate(-4deg)}
.heart{opacity:.8}

.link-arrow{
	display:inline-block;color:#fff;text-decoration:none;font-weight:600;
	letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;
	padding-bottom:6px;border-bottom:2px solid rgba(255,255,255,.55);
}
.link-arrow:hover{border-color:#fff}

/* ============================ Buttons ============================ */
.btn{
	display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
	padding:15px 28px;border-radius:var(--r-pill);
	font-weight:600;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
	text-decoration:none;border:2px solid transparent;
	transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn__arrow{transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}

.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dk)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* ============================ Header ============================ */
.site-header{background:var(--paper);position:sticky;top:0;z-index:40}
.site-header__inner{display:flex;align-items:center;gap:22px;padding:18px 0}
.brand{flex:none;text-decoration:none}
.brand__img{width:clamp(250px,23vw,300px);height:auto}
.brand--text{font-family:Archivo;font-weight:800;font-size:1.3rem;color:var(--brand)}

.site-header__right{margin-left:auto;display:flex;align-items:center}

.nav{display:flex;align-items:center;gap:20px}
.nav__list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.nav__list a{
	text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.1em;
	text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.nav__list a:hover,.nav__list .current-menu-item > a{color:var(--accent)}
.nav .btn{padding:12px 20px;font-size:.76rem;letter-spacing:.07em}

/* Dropdown for nav items with children. WordPress already outputs the nested
   <ul class="sub-menu"> (Walker_Nav_Menu core default) and marks the parent
   <li> as .menu-item-has-children — this is CSS-only, no template change. */
.nav__list li{position:relative}
.nav__list .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px}
.nav__list .menu-item-has-children > a::after{
	content:"";width:6px;height:6px;margin-top:-2px;
	border:1.5px solid currentColor;border-left:0;border-top:0;transform:rotate(45deg);
}
.nav__list .sub-menu{
	list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;z-index:50;
	min-width:200px;background:#fff;border-radius:var(--r-md);border:1px solid var(--line);
	box-shadow:0 18px 40px rgba(16,49,68,.14);
	display:flex;flex-direction:column;gap:2px;
	opacity:0;visibility:hidden;transform:translateY(6px);
	transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__list li:hover > .sub-menu,.nav__list li:focus-within > .sub-menu{
	opacity:1;visibility:visible;transform:translateY(0);
}
.nav__list .sub-menu a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap}
.nav__list .sub-menu a:hover{background:var(--paper);color:var(--accent)}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ Shared shapes ============================ */
.framed{border-radius:var(--r-lg);overflow:hidden;position:relative}
.framed img,.framed video{width:100%;height:100%;object-fit:cover;display:block}
.framed--lg{aspect-ratio:4/3}
.framed--sm{aspect-ratio:16/10}

.blob{
	position:absolute;display:grid;place-items:center;text-align:center;
	padding:26px;border-radius:50%;
}
.blob--sage{background:var(--blob);width:210px;height:210px;bottom:-26px;right:-18px}
.blob--sky{background:var(--sky);width:190px;height:190px;bottom:-26px;right:-18px}

.arc{position:absolute;border-radius:50%;pointer-events:none}
.arc--accent{
	width:150px;height:150px;left:-52px;bottom:-30px;
	border:9px solid var(--accent);border-right-color:transparent;border-top-color:transparent;
	transform:rotate(-18deg);
}
.leaf{
	position:absolute;width:260px;height:260px;opacity:.10;pointer-events:none;
	background:#fff;
	-webkit-mask:var(--leaf-mask) center/contain no-repeat;
	        mask:var(--leaf-mask) center/contain no-repeat;
	--leaf-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M88 12C52 10 22 26 14 54c-5 18 3 32 14 34 2-20 12-38 30-50-14 14-22 30-24 50 22 4 42-8 50-28 6-16 6-34 4-48Z'/%3E%3C/svg%3E");
}
.leaf--tl{left:-70px;bottom:-70px;transform:rotate(-18deg)}

.swirl{
	position:absolute;width:120px;height:120px;opacity:.16;pointer-events:none;
	background:var(--accent);
	-webkit-mask:var(--swirl-mask) center/contain no-repeat;
	        mask:var(--swirl-mask) center/contain no-repeat;
	--swirl-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 130 130'%3E%3Cpath d='M58 18A34 34 0 1 1 24 54A19 19 0 1 1 54 63A7 7 0 1 1 46 49' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.swirl--sky{background:var(--sky)}
.swirl--tl{top:10px;left:2%;transform:rotate(-10deg)}

.nowrap{white-space:nowrap}

/* ============================ Hero ============================ */
.hero{background:var(--paper);padding:22px 0 76px;overflow:hidden;position:relative}
.hero__inner{display:grid;grid-template-columns:1fr .95fr;gap:40px;align-items:center}
.hero__title{
	font-size:clamp(2.4rem,5.2vw,4rem);text-transform:uppercase;font-weight:700;
	color:var(--ink);margin:0;max-width:16ch;
}
.hero__title--pillars{font-size:clamp(1.7rem,2.4vw,2.2rem);max-width:none;line-height:1.08;margin-bottom:28px}
.hero__title--pillars span{display:block}
.hero__media{position:relative}

/* ============================ Bands ============================ */
.band{padding:86px 0;position:relative;overflow:hidden}
.band--brand{background:var(--brand);color:rgba(255,255,255,.88)}
.band--paper{background:var(--paper)}
.band--sky{background:var(--sky)}
.band--white{background:#fff}
.band--sky .split__copy p{color:var(--ink);opacity:.85}

.band__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;position:relative;z-index:1}
.band__col--media .framed{aspect-ratio:4/3}

.pillars{
	display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;
	margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.28);
	position:relative;z-index:1;
}
.pillar{position:relative}
.pillar + .pillar::before{
	content:"";position:absolute;left:-22px;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.28);
}
.pillar__title{margin:0 0 .5em}
.pillar__copy{margin:0;font-size:.95rem;line-height:1.6}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--reverse .split__copy{order:2}
.split__media{position:relative}
.split__media .framed{aspect-ratio:4/3}

/* ============================ Badges ============================ */
.badges{
	display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
	margin-top:72px;padding-top:8px;
}
.badge{text-align:center;padding:0 14px;position:relative}
.badge + .badge::before{
	content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line);
}
.badge__disc{
	width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
	margin:0 auto 18px;color:#fff;
}
.badge__icon{width:34px;height:34px}
.badge__disc--i1{background:var(--icon-1)}
.badge__disc--i2{background:var(--icon-2)}
.badge__disc--i3{background:var(--icon-3)}
.badge__disc--i4{background:var(--brand-soft)}
.badge__disc--i5{background:var(--icon-5)}
.badge__title{font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink);margin:0 0 .45em}
.badge__copy{font-size:.85rem;margin:0;opacity:.8}

/* ============================ Gallery strip ============================ */
.gallery-band{position:relative;overflow:hidden}
.gallery-head{text-align:center;max-width:640px;margin:0 auto 56px}
.gallery-head .eyebrow{margin-bottom:.6em}

.gallery-strip{display:flex;gap:28px;align-items:flex-start}
.gallery-strip__item{flex:1;min-width:0;margin:0}
.gallery-strip__item:nth-child(2),.gallery-strip__item:nth-child(4){margin-top:46px}
.gallery-strip__frame{aspect-ratio:3/4;box-shadow:0 18px 34px -18px rgba(15,45,71,.35)}
.gallery-strip__frame--a{transform:rotate(-3deg)}
.gallery-strip__frame--b{transform:rotate(2.5deg)}
.gallery-strip__frame--b img{object-position:88% center}
.gallery-strip__frame--c{transform:rotate(-2deg)}
.gallery-strip__frame--d{transform:rotate(3deg)}

.dots{position:absolute;width:150px;height:150px;pointer-events:none;opacity:.55;background-image:radial-gradient(var(--brand-soft) 3.5px,transparent 4px);background-size:24px 24px}
.dots--tr{top:-20px;right:-20px}
.dots--tl{top:-20px;left:-20px}
.dots--bl{bottom:-20px;left:-20px}
.dots--br{bottom:-20px;right:-20px}
.dots--light{background-image:radial-gradient(rgba(255,255,255,.55) 3.5px,transparent 4px)}

/* ============================ Brightwheel card ============================ */
.split__media--bw{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.bw-card{
	background:#fff;border-radius:var(--r-md);padding:30px 24px;text-align:center;
	box-shadow:0 18px 40px rgba(16,49,68,.10);
}
.bw-card strong{display:block;font-size:1.45rem;color:#2B3A8F;letter-spacing:-.02em}
.bw-card p{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);opacity:.7;margin:0}
.bw-card__logo{display:block;width:96px;height:auto;margin:0 auto 8px}
.script--float{grid-column:1/-1;text-align:right}

/* ============================ Page / prose ============================ */
.page-head{background:var(--brand);padding:60px 0 54px;position:relative;overflow:hidden}
.page-head::after{
	content:"";position:absolute;bottom:-60px;right:-60px;width:240px;height:240px;pointer-events:none;
	opacity:.10;background:#fff;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M88 12C52 10 22 26 14 54c-5 18 3 32 14 34 2-20 12-38 30-50-14 14-22 30-24 50 22 4 42-8 50-28 6-16 6-34 4-48Z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M88 12C52 10 22 26 14 54c-5 18 3 32 14 34 2-20 12-38 30-50-14 14-22 30-24 50 22 4 42-8 50-28 6-16 6-34 4-48Z'/%3E%3C/svg%3E") center/contain no-repeat;
	transform:scaleX(-1);
}
@media (max-width:900px){ .page-head::after{display:none} }
.page-head__title{color:#fff;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);margin:0}
.page-head__meta{color:rgba(255,255,255,.7);margin:.5em 0 0;font-size:.85rem}

.prose{padding:64px 0 86px;max-width:820px}
.prose h1,.prose h2,.prose h3{margin-top:1.6em}
.prose h1:first-child,.prose h2:first-child{margin-top:0}
.prose h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem)}
.prose h3{font-size:1.2rem}
.prose a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--accent)}
.prose img{border-radius:var(--r-md);margin:1.6em 0}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.4em 0}
.prose__hero{margin-bottom:2em;aspect-ratio:16/7}
.prose blockquote{
	margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);
	font-size:1.08rem;color:var(--ink);
}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}

/* Legacy wrappers left behind by the Divi / Avada-era builds. */
.prose .fusion-text,.prose .et_pb_text_inner{display:contents}

/* Contact / Locations pages are largely address blocks — give them room. */
.prose h2{padding-top:.3em}
.prose h2 + p{margin-top:-.2em}
.prose p a{font-weight:500}

/* ============================ Cards / archive ============================ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px;padding:64px 0 40px}
.card__link{text-decoration:none;display:block}
.card__media{display:block;aspect-ratio:16/10;margin-bottom:16px}
.card__title{font-size:1.15rem;color:var(--ink);margin:0 0 .4em}
.card__link:hover .card__title{color:var(--accent)}
.card__excerpt{font-size:.92rem;margin:0}
.pagination{padding-bottom:80px}
.pagination .page-numbers{
	display:inline-block;padding:8px 14px;margin-right:6px;border-radius:8px;
	text-decoration:none;font-size:.9rem;
}
.pagination .current{background:var(--brand);color:#fff}

/* ============================ Footer ============================ */
.site-footer{background:var(--navy);color:rgba(255,255,255,.78);margin-top:0}
.site-footer__legal{
	display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
	padding:26px 0;
	font-size:.8rem;color:rgba(255,255,255,.6);
}
.site-footer__legal p{margin:0}
.site-footer__legal a{color:inherit}
.site-footer__sep{margin:0 .6em}

/* ============================ Responsive ============================ */
@media (max-width:1080px){
	.band__grid{grid-template-columns:1fr 1fr;gap:36px}
	.badges{grid-template-columns:repeat(3,1fr);gap:34px 10px}
	.badge:nth-child(4)::before{display:none}
}

@media (max-width:900px){
	.band__grid{grid-template-columns:1fr;gap:30px}
	.pillars{grid-template-columns:1fr;gap:26px;margin-top:44px;padding-top:32px}
	.pillar + .pillar::before{display:none}
	.nowrap{white-space:normal}
	.hero__title{max-width:none}
	.nav-toggle{display:flex}
	.site-header__inner{flex-wrap:wrap}
	.site-header__right{
		margin:4px auto;width:calc(100% - 8px);align-items:stretch;gap:16px;
		display:none;padding:12px 20px 18px;
		background:#fff;border-radius:var(--r-md);
	}
	.site-header__right.is-open{display:flex}
	.nav{flex-direction:column;align-items:stretch;gap:14px}
	.nav__list{flex-direction:column;align-items:stretch;gap:2px}
	.nav__list a{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
	.nav .btn{justify-content:center}
	/* Stacked nav already reads top-to-bottom, so children just sit indented
	   under their parent instead of needing a hover/tap-to-reveal dropdown. */
	.nav__list .menu-item-has-children > a::after{display:none}
	.nav__list .sub-menu{
		position:static;opacity:1;visibility:visible;transform:none;
		box-shadow:none;border:0;border-radius:0;padding:0;margin:0 0 0 16px;
		background:transparent;
	}
	.nav__list .sub-menu a{padding:9px 0;border-bottom:1px solid var(--line)}
	.nav__list .sub-menu a:hover{background:transparent}

	.hero__inner{grid-template-columns:1fr;gap:34px}	.split,.split--reverse .split__copy{grid-template-columns:1fr;order:0}
	.split{gap:44px}
	.blob--sage{width:160px;height:160px;top:-14px;right:-10px;padding:18px}
	.blob--sky{width:150px;height:150px;padding:18px}
	.script--hero{font-size:inherit;transform:none}


	.gallery-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px}
	.gallery-strip__item:nth-child(2),.gallery-strip__item:nth-child(4){margin-top:0}
	.gallery-strip__frame--a,.gallery-strip__frame--b,.gallery-strip__frame--c,.gallery-strip__frame--d{transform:none}
	.dots,.swirl{display:none}
}

@media (max-width:620px){
	body{font-size:16px}
	.band{padding:60px 0}
	.badges{grid-template-columns:repeat(2,1fr);gap:34px 18px;margin-top:52px}
	.badge::before{display:none!important}
	.split__media--bw{grid-template-columns:1fr}
	.script--float{text-align:left}
	.blob--sage,.blob--sky{position:relative;inset:auto;margin:18px 0 0;width:100%;height:auto;border-radius:var(--r-md);padding:22px}
	.arc{display:none}
}

@media (prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
}

/* ============================================================
   Interior page components
   ============================================================ */

.page-head .eyebrow{color:rgba(255,255,255,.72);margin-bottom:.7em}

/* ---------- Locations ---------- */
.loc-grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
	gap:44px 26px;padding:78px 0 86px;
}
.loc-card{
	background:#fff;border-radius:var(--r-lg);padding:34px 32px;position:relative;z-index:0;
	border:1px solid var(--line);
	display:flex;flex-direction:column;gap:20px;
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* A soft color blob peeks from behind each card, like the hero/band shapes. */
.loc-card::before{
	content:"";position:absolute;z-index:-1;top:-22px;left:-22px;
	width:120px;height:120px;border-radius:50%;background:var(--blob);
}
.loc-card--current{
	border-color:var(--brand);box-shadow:0 18px 40px rgba(16,49,68,.09);
}
.loc-card:hover{
	transform:translateY(-8px);
	box-shadow:0 26px 48px rgba(16,49,68,.16);
	border-color:var(--brand);
}
.loc-card__flag{
	position:absolute;top:-14px;left:28px;background:var(--accent);color:#fff;
	font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	padding:8px 16px 8px 12px;box-shadow:0 8px 16px rgba(16,49,68,.2);
	clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 65%);
}
.loc-card__name{
	font-size:1.28rem;color:var(--ink);margin:0;text-transform:uppercase;
	letter-spacing:-.01em;line-height:1.2;
}
.loc-card__meta{margin:0;display:flex;flex-direction:column;gap:14px;font-size:.93rem}
.loc-card__row{display:flex;align-items:center;gap:12px}
.loc-icon{
	flex:none;width:32px;height:32px;border-radius:50%;color:#fff;
	display:grid;place-items:center;
}
.loc-icon svg{width:16px;height:16px}
.loc-icon--i1{background:var(--icon-1)}
.loc-icon--i2{background:var(--icon-2)}
.loc-icon--i3{background:var(--icon-3)}
.loc-card__meta dt{margin:0}
.loc-card__meta dd{margin:0;color:var(--body)}
.loc-card__meta a{color:var(--body);text-decoration:none;border-bottom:1px solid var(--line)}
.loc-card__meta a:hover{color:var(--accent);border-color:var(--accent)}
.link-arrow--ink{color:var(--brand);border-color:var(--brand);align-self:flex-start;margin-top:auto}
.link-arrow--ink:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Curriculum chapters ---------- */
/* Intro: a looping clip beside the opening copy, tilted like the chapter photos. */
.curriculum-intro{
	display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;align-items:center;
	padding:64px 0 36px;
}
.curriculum-intro .curriculum-lede{padding:0;max-width:none}
.curriculum-intro__media .framed{aspect-ratio:4/3;box-shadow:0 18px 34px -18px rgba(15,45,71,.35)}
.curriculum-closing-band{padding:64px 0}
.curriculum-closing{padding:0}
/* badges-band's tight top padding assumed plain prose above it on the same
   background; after the white closing band it needs its full padding back. */
.curriculum-closing-band + .badges-band{padding-top:70px}

/* Hand-drawn looping line beside the closing statement. It sits in a row
   with the text (not in the page margin, which is too narrow on laptops to
   clear the text) and drops below it on phones. It draws itself in once
   revealed: pathLength="1" keeps the dash maths 0–1 whatever the path's
   real length. */
.closing-row{display:flex;align-items:center;justify-content:center;gap:48px}
.closing-row .curriculum-closing{flex:0 1 760px}
.squiggle{flex:none;width:clamp(200px,22vw,300px);height:auto;pointer-events:none}
.squiggle path{
	fill:none;stroke:var(--sun);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;
	stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.3,1) .5s;
}
.squiggle.is-visible path{stroke-dashoffset:0}
@media (max-width:900px){
	.closing-row{flex-direction:column;align-items:stretch;gap:18px}
	.closing-row .curriculum-closing{flex:none}
	.squiggle{align-self:flex-end;width:190px}
}
@media (prefers-reduced-motion:reduce){ .squiggle path{stroke-dashoffset:0;transition:none} }
.chapter{padding:48px 0}
.chapter__inner{display:flex;gap:26px;align-items:flex-start;max-width:780px}
/* flex:none stops the flex row from squeezing this into an oval to make
   room for the copy column, which otherwise hypothetically wants its full
   unwrapped text width before it's allowed to shrink and wrap. */
.chapter__icon.badge__disc{width:76px;height:76px;margin:0;flex:none}
.chapter__icon .badge__icon{width:34px;height:34px}
.chapter__copy{min-width:0}
.chapter__title{
	font-size:1.3rem;margin:0 0 .5em;text-transform:uppercase;color:var(--ink);
	letter-spacing:-.01em;
}
.chapter__body p{margin:0}

/* Chapters with photos: copy beside a tilted photo (same tilt + shadow as
   the homepage gallery strip), alternating sides via .chapter--flip. */
.chapter--media .chapter__inner{
	max-width:none;display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,440px);
	gap:26px 48px;align-items:start;
}
/* A chapter without a photo keeps the same left edge as the ones with. */
.chapter:not(.chapter--media) .chapter__inner{max-width:none;column-gap:48px}
.chapter:not(.chapter--media) .chapter__copy{max-width:680px}
.chapter--flip .chapter__inner{grid-template-columns:minmax(0,440px) 76px minmax(0,1fr)}
.chapter--flip .chapter__media{order:-1}
.chapter__media{position:relative;align-self:center}
.chapter__photo{margin:0;position:relative}
.chapter__photo .framed{aspect-ratio:4/3;box-shadow:0 18px 34px -18px rgba(15,45,71,.35)}
/* Pair: a landscape photo with a smaller portrait one overlapping its corner. */
.chapter__media--pair{padding-bottom:70px}
.chapter__media--pair .chapter__photo:first-child{width:80%}
.chapter__media--pair .chapter__photo:nth-child(2){position:absolute;right:0;bottom:0;width:38%}
.chapter__media--pair .chapter__photo:nth-child(2) .framed{aspect-ratio:3/4;border:5px solid #fff}
/* Flipped chapters (photo on the left) mirror the pair, so the small photo
   overlaps the outer corner instead of reaching toward the copy. */
.chapter--flip .chapter__media--pair .chapter__photo:first-child{margin-left:auto}
.chapter--flip .chapter__media--pair .chapter__photo:nth-child(2){right:auto;left:0}
.photo-tag{
	position:absolute;top:-12px;left:14px;z-index:1;
	background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.02em;
	padding:.35em .9em;border-radius:var(--r-pill);transform:rotate(-3deg);
	box-shadow:0 6px 14px -6px rgba(15,45,71,.4);
}
.chapter__media--pair .chapter__photo:nth-child(2) .photo-tag{top:auto;bottom:-10px;left:auto;right:10px;transform:rotate(3deg);background:var(--brand)}

/* Wide banner photo under the page head (template-parts/page-photo.php). */
.page-photo{padding-top:48px}
.page-photo__frame{aspect-ratio:21/8;box-shadow:0 18px 34px -18px rgba(15,45,71,.35)}
.page-photo + .prose,.page-photo + .contact-grid{padding-top:48px}
.page-photo + .band{margin-top:48px}

/* ---------- Testimonials ---------- */
.testimonial{padding:38px 0}
.testimonial__inner{display:flex;gap:24px;align-items:flex-start;max-width:820px}
.testimonial__icon.badge__disc{width:56px;height:56px;margin:0;flex:none}
.testimonial__icon .badge__icon{width:24px;height:24px}
.testimonial__body{min-width:0}
.testimonial__body p{margin:0 0 1em}
.testimonial__body p:last-child{margin-bottom:0}

/* ---------- Our Story letter ---------- */
.letter{max-width:780px;padding:66px 0 74px}
.letter--with-photos{
	max-width:1040px;display:grid;grid-template-columns:1fr 300px;gap:54px;align-items:start;
}
.letter__rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.letter__photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 40px rgba(16,49,68,.12)}
.letter__photo img{width:100%;height:auto;display:block}
.letter__rail--inline{display:none}
/* The inline copy sits inside .prose, whose own img margin/radius/shadow would double up with .letter__photo's. */
.prose .letter__rail--inline img{margin:0;border-radius:0;box-shadow:none}
/* Must come after the desktop letter rules above, or their two-column grid
   wins at equal specificity and squeezes the letter on phones. The side rail
   gives way to the inline copy after the opening paragraph. */
@media (max-width:900px){
	.letter--with-photos{display:block}
	.letter--with-photos > .letter__rail{display:none}
	/* Shares .letter__rail's base rules, so undo its sticky column layout. */
	.letter__rail--inline{display:flex;position:static;flex-direction:row;gap:14px;margin:28px 0 30px}
	.letter__photo{flex:1;min-width:0}
}
.letter__salutation{
	font-family:Archivo,sans-serif;font-size:clamp(1.35rem,2.6vw,1.85rem);
	color:var(--ink);font-weight:700;margin:0 0 .85em;
}
.prose--letter{padding:0}
.prose--letter > p:empty,.prose > p:empty{display:none}
/* The source letter is wrapped in <em> end to end — too much italic to read. */
.prose--letter em{font-style:normal}
.prose--letter > p:first-of-type{
	font-size:1.16rem;color:var(--ink);line-height:1.62;
}
.letter__sign{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.letter__signature{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--brand);margin:0 0 .1em}
.letter__role{font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--body);margin:0}

/* ---------- Milestones ---------- */
.milestones-band{padding:74px 0}
.milestones{
	list-style:none;margin:26px 0 0;padding:0;position:relative;
	display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
}
/* A trail connecting the three stops, running through the marker centers. */
.milestones::before{
	content:"";position:absolute;top:32px;left:0;right:0;height:2px;
	background:rgba(255,255,255,.3);
}
.milestone{position:relative}
.milestone__marker{
	width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;
	display:grid;place-items:center;margin:0 0 22px;position:relative;flex:none;
}
.milestone__marker svg{width:28px;height:28px}
.milestone__year{
	font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(2.1rem,4.4vw,3rem);
	color:#fff;display:block;line-height:1;margin-bottom:.3em;
}
.milestone__name{font-size:1rem;color:#fff;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .35em}
.milestone__note{font-size:.9rem;margin:0;opacity:.82}

/* ---------- Form panel ---------- */
.form-panel-wrap{max-width:860px;text-align:center}
.form-panel-wrap__note{margin:-.4em 0 1.8em;color:var(--ink);opacity:.8}
.form-panel{
	background:#fff;border-radius:var(--r-lg);padding:30px;text-align:left;
	box-shadow:0 18px 44px rgba(16,49,68,.10);
}
/*
 * EmailMeForm renders into a cross-origin iframe and sets its own height via
 * script. Do NOT force width/height here — overriding them stops it sizing
 * itself and the form collapses to ~100px. Constrain the container instead.
 */
.form-panel iframe{border:0;display:block;max-width:100%}

/* ---------- Contact ---------- */
.contact-grid{
	display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start;
	padding:66px 0 78px;
}
.contact-grid__details{padding:0;max-width:none}
.contact-grid__details h2{font-size:1.4rem;margin-top:0}
.contact-grid__map{aspect-ratio:4/3}
.contact-grid__map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Closing CTA band ---------- */
.cta-band{background:var(--brand-deep);color:rgba(255,255,255,.85);padding:60px 0}
.cta-band__inner{
	display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.cta-band__copy{max-width:52ch}
.cta-band__copy .h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.35em}
.cta-band__address{margin:0;opacity:.85}
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap}
.btn--ghost-light{color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost-light:hover{background:#fff;color:var(--brand-deep);border-color:#fff}

/* ---------- Lede paragraph for text-first pages ---------- */
.prose--lede > p:first-of-type{font-size:1.16rem;color:var(--ink);line-height:1.6}
.badges-band{padding-top:20px}

@media (max-width:900px){
	.milestones{grid-template-columns:1fr;gap:26px}
	.milestones::before{display:none}
	.milestones-band{text-align:center}
	.milestone__marker{margin-inline:auto}
	.contact-grid{grid-template-columns:1fr;gap:34px}
	.cta-band__inner{flex-direction:column;align-items:center;text-align:center}
	.cta-band__actions{justify-content:center}
	.chapter--media .chapter__inner,
	.chapter--flip .chapter__inner{grid-template-columns:76px minmax(0,1fr)}
	.chapter--flip .chapter__media{order:0}
	.curriculum-intro{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:44px}
	.curriculum-intro__media{order:1;width:100%;max-width:520px;margin-inline:auto}
	.chapter__media{grid-column:1 / -1;width:100%;max-width:520px;margin:10px auto 0}
}
@media (max-width:620px){
	.loc-card{padding:28px 24px}
	.loc-card::before{width:90px;height:90px;top:-16px;left:-16px}
	.form-panel{padding:18px}
	.chapter__inner{flex-direction:column;gap:14px}
	.chapter--media .chapter__inner,
	.chapter--flip .chapter__inner{grid-template-columns:1fr}
	.chapter__media--pair{padding-bottom:50px}
	.page-photo{padding-top:28px}
	.page-photo__frame{aspect-ratio:16/10}
	/* Mostly empty backdrop above a row of hands — stay wide so they fill it. */
	.page-photo--testimonials .page-photo__frame{aspect-ratio:21/9}
	.testimonial__inner{flex-direction:column;gap:14px}
}

/* ============================================================
   Fluent Forms — styled to match the theme
   ============================================================ */
.form-panel .fluentform{--ff-gap:20px}
.form-panel .ff-el-group{margin-bottom:var(--ff-gap)}
.form-panel .ff-el-input--label label{
	font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
	color:var(--ink);margin-bottom:8px;display:inline-block;
}
.form-panel .ff-el-is-required.asterisk-right label:after{color:var(--accent);margin-left:4px}

.form-panel input[type=text],
.form-panel input[type=email],
.form-panel input[type=tel],
.form-panel input[type=date],
.form-panel input[type=number],
.form-panel textarea,
.form-panel select{
	width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
	background:var(--paper);color:var(--ink);
	font:400 16px/1.5 Inter,sans-serif;
	transition:border-color .16s ease,background-color .16s ease;
}
.form-panel textarea{min-height:120px;resize:vertical}
.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus{
	outline:none;border-color:var(--brand);background:#fff;
}
.form-panel ::placeholder{color:var(--body);opacity:.55}

/* Radio / checkbox rows */
.form-panel .ff-el-form-check{margin:0 22px 8px 0;display:inline-flex;align-items:center;gap:8px}
.form-panel .ff-el-form-check-label{font-size:.95rem;color:var(--body);cursor:pointer}
.form-panel input[type=radio],.form-panel input[type=checkbox]{
	width:18px;height:18px;accent-color:var(--brand);margin:0;
}

/* Submit */
.form-panel .ff-btn-submit{
	display:inline-flex;align-items:center;gap:.6em;
	padding:15px 30px;border:0;border-radius:var(--r-pill);
	background:var(--accent);color:#fff;cursor:pointer;
	font:600 .86rem/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;
	transition:transform .18s ease,background-color .18s ease;
}
.form-panel .ff-btn-submit:hover{background:var(--accent-dk);transform:translateY(-2px)}

/* Validation + messages */
.form-panel .error,.form-panel .text-danger,.form-panel .ff-el-is-error input,
.form-panel .ff-el-is-error textarea{border-color:#D64545}
.form-panel .error.text-danger{color:#D64545;font-size:.84rem;margin-top:6px}
.form-panel .ff-message-success{
	background:#fff;border:1.5px solid var(--brand);border-radius:var(--r-md);
	padding:22px 24px;color:var(--ink);
}

/*
 * Two-up layout for the long enrollment form only. The short inquiry form has
 * too few fields — a grid there just leaves an empty right-hand column.
 */
@media (min-width:760px){
	.form-panel--wide .fluentform form{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
	.form-panel--wide .ff-el-group{grid-column:span 1}
	.form-panel--wide .ff-el-group:has(textarea),
	.form-panel--wide .ff-el-group:has(input[type=radio]),
	.form-panel--wide .ff_submit_btn_wrapper{grid-column:1/-1}
}
/* Keep the short form to a comfortable reading measure. */
.form-panel:not(.form-panel--wide) .fluentform{max-width:560px;margin-inline:auto}

/* Staff / inline photography recovered from the old Divi image modules. */
.prose img{border-radius:var(--r-md);box-shadow:0 14px 30px rgba(16,49,68,.10)}
.prose__map{aspect-ratio:16/9;margin:2em 0}
.prose__map iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   Management Team — zigzag "person" layout
   ============================================================ */
.team{padding:70px 0 30px;display:flex;flex-direction:column;gap:96px}

.person{
	display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;
}
.person--reverse{grid-template-columns:1.15fr .85fr}
.person--reverse .person__media{order:2}
.person--reverse .person__copy{order:1}

/* Photo sits on an organic blob instead of a plain rectangle. */
.person__media{position:relative;justify-self:center;width:100%;max-width:360px}
.person__blob{
	position:absolute;inset:-6% -10% -10% -6%;z-index:0;
	-webkit-mask:var(--blob-shape) center/100% 100% no-repeat;
	        mask:var(--blob-shape) center/100% 100% no-repeat;
	--blob-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M53 14C88-4 141-2 168 33c25 32 24 79 1 111-25 35-73 55-116 42C11 174-14 128 9 87 24 60 30 25 53 14Z'/%3E%3C/svg%3E");
}
.person--i1 .person__blob,.person--i1 .person__blob--i1{background:var(--icon-1)}
.person--i2 .person__blob,.person--i2 .person__blob--i2{background:var(--icon-2)}
.person--i3 .person__blob,.person--i3 .person__blob--i3{background:var(--icon-3)}
.person--i4 .person__blob,.person--i4 .person__blob--i4{background:var(--brand-soft)}
.person--i5 .person__blob,.person--i5 .person__blob--i5{background:var(--icon-5)}

.person__photo{
	position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;
	border-radius:44% 56% 58% 42% / 46% 40% 60% 54%;
	box-shadow:0 20px 44px rgba(16,49,68,.16);
	transform:rotate(-2deg);
}
.person--reverse .person__photo{transform:rotate(2deg)}

/* Hand-written fun-fact note, tucked over a corner of the photo. */
.person__note{
	position:absolute;z-index:2;max-width:190px;
	font-family:Caveat,cursive;font-size:1.2rem;line-height:1.28;
	color:var(--ink);background:#fff;padding:14px 18px;border-radius:16px;
	box-shadow:0 12px 26px rgba(16,49,68,.16);
	transform:rotate(-6deg);
	bottom:-22px;right:-30px;
}
.person--reverse .person__note{right:auto;left:-30px;transform:rotate(6deg)}
.person__note::before{content:"✎ ";opacity:.55}
.person__note--i1::after,.person__note--i2::after,.person__note--i3::after,
.person__note--i4::after,.person__note--i5::after{content:""}

.person__copy{position:relative}
.person__name{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.15em}
.person__title{
	display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:#fff;background:var(--brand);
	padding:7px 14px;border-radius:var(--r-pill);margin-bottom:1.1em;
}
.person__copy p:not(.person__title){color:var(--body)}

@media (max-width:900px){
	.team{gap:76px;padding-top:56px}
	.person,.person--reverse{grid-template-columns:1fr;gap:34px;text-align:left}
	.person__media,.person--reverse .person__media,
	.person__copy,.person--reverse .person__copy{order:0}
	.person__media{max-width:260px;margin-bottom:8px}
	.person__note,.person--reverse .person__note{
		position:static;transform:none;display:inline-block;margin-top:16px;
	}
}