/* ============================================================
Josiah Montessori — HTML V2 Prototype
Design system. Single stylesheet. Brand-class system.
See V2_PROTOTYPE_DECISIONS.md for rationale.
============================================================ */
/* ---------- 1. RESET ---------- */
.v3-scope *, .v3-scope *::before, .v3-scope *::after { box-sizing: border-box; }
.v3-scope * { margin: 0; padding: 0; }
.v3-scope :not(*) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.v3-scope { line-height: 1.5; }
.v3-scope img, .v3-scope picture, .v3-scope svg, .v3-scope video { display: block; max-width: 100%; }
.v3-scope button, .v3-scope input, .v3-scope select, .v3-scope textarea { font: inherit; color: inherit; }
.v3-scope button { background: none; border: 0; cursor: pointer; }
.v3-scope a { color: inherit; text-decoration: none; }
.v3-scope ul, .v3-scope ol { list-style: none; }
.v3-scope :focus-visible { outline: 3px solid var(--c-royal); outline-offset: 3px; border-radius: 4px; }
/* ---------- 2. TOKENS ---------- */
:root {
/* Brand colours */
--c-magenta: #AB035C;
--c-magenta-hover: #8C024A;
--c-magenta-deep: #6E0239;
--c-magenta-soft: #FCE7EE;
--c-magenta-tint: #FFF3F8;
--c-royal: #00539B;
--c-royal-hover: #003F75;
--c-royal-soft: #E5EAF4;
--c-royal-tint: #F1F4FA;
--c-cream: #F8ECDD;
--c-mist: #F4EFE6;
--c-bg-warm: #FDFBF6;
--c-honey: #C68A2E;
--c-honey-soft: #FAEDD1;
--c-honey-tint: #FDF6E7;
--c-ink: #1A1A1A;
--c-ink-soft: #4A4A4A;
--c-line: #1A1A1A1F; /* 12% opacity ink */
--c-whatsapp: #25D366;
/* Staging-parity color extensions (2026-05-26 pivot) */
--c-bg-pure: #FFFFFF;
--c-line-soft: rgba(26,26,26,0.06);
--c-line-strong: rgba(26,26,26,0.55);
--c-pink-mid: #C14C7F;
--c-pink: #D0749F;
--c-pink-soft: #ECC5C8;
--c-blue-mid: #2C6BAD;
--c-blue: #5E92C7;
--c-blue-soft: #79ADDB;
--c-peach: #F4B190;
--c-sage: #9ECBB7;
--c-orange: #FF7C1A;
--c-green: #00824A;
/* Weight scale (staging) */
--w-thin: 300;
--w-mid: 500;
--w-bold: 700;
--w-black: 800;
/* Stage colour-coding (per PDF p.87) */
--c-stage-infant: var(--c-magenta-soft);
--c-stage-toddler: var(--c-honey);
--c-stage-nursery: var(--c-royal);
--c-stage-kinder: var(--c-royal-hover);
/* Typography (v2 — locked by Anis 2026-05-26 correction) */
--ff-display: 'Fraunces', Georgia, serif;
--ff-body: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--ff-cn: 'Noto Sans SC', var(--ff-body);
/* Type scale (v2 clamp tunings) */
--fs-h1: clamp(36px, 6vw, 80px);
--fs-h2: clamp(26px, 3.6vw, 48px);
--fs-h3: clamp(18px, 1.6vw, 24px);
--fs-h4: 16px;
--fs-body: clamp(16px, 1.1vw, 17px);
--fs-lede: clamp(18px, 1.6vw, 22px);
--fs-eyebrow: 13px;
--fs-meta: 14px;
/* Spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 80px;
--sp-10: 96px;
/* Layout */
--container: 1240px;
--container-narrow: 880px;
--container-wide: 1320px;
--side-padding: clamp(20px, 4vw, 56px);
/* Effects */
--radius: 12px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(26,26,26,0.04), 0 2px 6px rgba(26,26,26,0.04);
--shadow-2: 0 4px 14px rgba(26,26,26,0.06), 0 10px 30px rgba(26,26,26,0.07);
--shadow-brand: 0 1px 2px rgba(110,2,57,0.18), 0 8px 18px rgba(171,3,92,0.22);
--shadow-brand-hover: 0 1px 2px rgba(110,2,57,0.25), 0 10px 22px rgba(171,3,92,0.30);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 180ms var(--ease);
--t-base: 280ms var(--ease);
--t-slow: 600ms var(--ease);
/* Stage-card backgrounds (PDF p.87 brand swatches) */
--c-stage-infant-bg: var(--c-magenta-soft);
--c-stage-toddler-bg: #FAEDC9;
--c-stage-nursery-bg: #DDE7F4;
--c-stage-kinder-bg: var(--c-step-kinder);
/* Sticky */
--header-h: 80px;
--mobile-header-h: 60px;
--sticky-cta-h: 76px;
}
/* ---------- 3. BASE TYPOGRAPHY (v2 — locked) ---------- */
.v3-scope {
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--c-ink);
background: var(--c-bg-warm);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.v3-scope h1, .v3-scope .h1-display {
font-family: var(--ff-display);
font-weight: 800;
font-size: var(--fs-h1);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--c-ink);
}
.v3-scope h2, .v3-scope .h2 {
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-h2);
line-height: 1.08;
letter-spacing: -0.022em;
text-wrap: balance;
color: var(--c-ink);
}
.v3-scope h3, .v3-scope .h3 {
font-family: var(--ff-body);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.25;
color: var(--c-ink);
}
.v3-scope h4, .v3-scope .h4 {
font-family: var(--ff-body);
font-weight: 600;
font-size: var(--fs-h4);
line-height: 1.35;
color: var(--c-ink);
}
.v3-scope p, .v3-scope .body { font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink-soft); }
.v3-scope .lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--c-ink); font-weight: 400; }
.v3-scope .prose { max-width: 60ch; }
.v3-scope .prose p + p { margin-top: 1em; }
.v3-scope .eyebrow {
font-family: var(--ff-body);
font-weight: 600;
font-size: var(--fs-eyebrow);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--c-ink-soft);
display: inline-block;
}
.v3-scope p.muted { font-size: var(--fs-meta); }
.v3-scope .lede, .v3-scope p { text-wrap: pretty; }
.v3-scope h1, .v3-scope .h1-display, .v3-scope h2, .v3-scope .h2 { font-feature-settings: "ss01", "ss02"; }
.v3-scope .section--ink .lede { color: var(--c-cream); }
.v3-scope .section--ink p { color: rgba(248, 236, 221, 0.85); }
.v3-scope .eyebrow.is-magenta { color: var(--c-magenta); }
.v3-scope .eyebrow.is-royal { color: var(--c-royal); }
.v3-scope .eyebrow.is-cream { color: var(--c-cream); }
.v3-scope .display-mark {
font-style: italic;
font-variation-settings: 'WONK' 1, 'SOFT' 50;
}
.v3-scope .kw { font-weight: 500; }
.v3-scope .kw.is-royal { border-bottom: 2px solid var(--c-royal); }
.v3-scope .kw.is-magenta { border-bottom: 2px solid var(--c-magenta); }
.v3-scope .cn { font-family: var(--ff-cn); font-weight: 500; }
.v3-scope a.link { color: var(--c-royal); border-bottom: 1px solid currentColor; transition: color var(--t-fast); }
.v3-scope a.link:hover { color: var(--c-magenta); }
.v3-scope .arrow-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
color: var(--c-ink);
transition: color var(--t-fast), gap var(--t-fast);
}
.v3-scope .arrow-link::after {
content: '→';
transition: transform var(--t-fast);
}
.v3-scope .arrow-link:hover { color: var(--c-magenta); }
.v3-scope .arrow-link:hover::after { transform: translateX(4px); }
.v3-scope .arrow-link.on-dark { color: var(--c-cream); }
.v3-scope .arrow-link.on-dark:hover { color: #fff; }
/* ---------- 4. CONTAINERS / LAYOUT ---------- */
.v3-scope .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--side-padding); }
.v3-scope .container.is-narrow { max-width: var(--container-narrow); }
.v3-scope .container.is-wide { max-width: var(--container-wide); }
.v3-scope .section { padding-block: clamp(48px, 8vw, 80px); }
.v3-scope .section.is-lg { padding-block: clamp(64px, 10vw, 96px); }
.v3-scope .section.is-sm { padding-block: clamp(32px, 5vw, 48px); }
.v3-scope .section.bg-default { background: var(--c-bg-warm); }
.v3-scope .section.bg-mist { background: var(--c-mist); }
.v3-scope .section.bg-cream { background: var(--c-cream); }
.v3-scope .section.bg-royal-soft { background: var(--c-royal-soft); }
.v3-scope .section.bg-magenta-soft { background: var(--c-magenta-soft); }
.v3-scope .section.bg-paper { background: var(--c-bg-pure); }
/* Home built-passage (replaces the removed founders strip on home) */
.v3-scope .built-passage { max-width: 70ch; }
.v3-scope .built-passage p + p { margin-top: var(--sp-5); }
.v3-scope .built-passage .lede { margin-bottom: var(--sp-6); }
/* Home — "Four commitments" 2x2 grid (staging-style: number anchor + body) */
.v3-scope .commitments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3vw, 48px);
}
.v3-scope .commitment {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 2.5vw, 36px);
align-items: start;
padding: clamp(24px, 3vw, 36px);
background: var(--c-bg-pure);
border: 1px solid var(--c-line);
border-radius: var(--radius);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.v3-scope .commitment:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.v3-scope .commitment__num {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(36px, 4vw, 52px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--c-magenta);
opacity: 0.85;
padding-top: 4px;
}
.v3-scope .commitment__body { min-width: 0; }
.v3-scope .commitment__kicker {
display: inline-block;
font-family: var(--ff-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-ink-soft);
margin-bottom: 12px;
}
.v3-scope .commitment__body h3 {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--c-ink);
margin-bottom: 12px;
text-wrap: balance;
}
.v3-scope .commitment__body p { color: var(--c-ink-soft); }
@media (max-width: 880px) {
.v3-scope .commitments-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
.v3-scope .commitment { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
.v3-scope .commitment__num { font-size: 44px; }
}
/* Centre address card (staging style — minimal, no heavy box) */
.v3-scope .centre-address {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 20px;
border: 1px solid var(--c-line);
border-radius: var(--radius);
font-style: normal;
background: var(--c-bg-pure);
}
.v3-scope .centre-address strong {
font-family: var(--ff-display);
font-size: 17px;
font-weight: 600;
color: var(--c-ink);
}
.v3-scope .centre-address .muted { font-size: 13px; color: var(--c-ink-soft); }
/* Home awards strip */
.v3-scope .home-awards-strip { text-align: center; }
.v3-scope .home-awards-strip__grid {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(24px, 4vw, 48px);
margin-top: var(--sp-5);
}
.v3-scope .home-awards-strip__grid img {
max-height: 72px; width: auto; height: auto;
opacity: 0.78; filter: grayscale(20%);
transition: opacity var(--t-fast), filter var(--t-fast);
}
.v3-scope .home-awards-strip__grid img:hover { opacity: 1; filter: none; }
@media (max-width: 600px) {
.v3-scope .home-awards-strip__grid { gap: 20px; }
.v3-scope .home-awards-strip__grid img { max-height: 56px; }
}
.v3-scope .section.bg-ink { background: var(--c-ink); color: var(--c-cream); }
.v3-scope .section.bg-ink h1, .v3-scope .section.bg-ink h2, .v3-scope .section.bg-ink h3 { color: #fff; }
.v3-scope .section.bg-ink p { color: rgba(255,255,255,0.78); }
.v3-scope .section.bg-magenta { background: var(--c-magenta); color: #fff; }
.v3-scope .section.bg-magenta h1, .v3-scope .section.bg-magenta h2 { color: #fff; }
.v3-scope .section.bg-magenta p { color: rgba(255,255,255,0.92); }
.v3-scope .section.bg-photo {
background-color: var(--c-ink);
background-size: cover; background-position: center;
color: #fff; position: relative;
}
.v3-scope .section.bg-photo::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,26,26,0.55), rgba(26,26,26,0.45));
}
.v3-scope .section.bg-photo > * { position: relative; z-index: 1; }
/* Section opener (staging-style: small text label, not giant editorial number) */
.v3-scope .section-opener { margin-bottom: var(--sp-7); }
.v3-scope .section-opener__body { /* legacy wrapper — kept for backwards-compat selectors */ }
.v3-scope .section-opener .eyebrow { margin-bottom: var(--sp-3); }
.v3-scope .parallel-rule { height: 1px; background: var(--c-line); width: 100%; }
.v3-scope .parallel-rule.is-lg { height: 2px; }
.v3-scope .music-staff-divider { height: 40px; background: url('../assets/svg/music-staff-divider.svg') center/100% 100% no-repeat; opacity: 0.7; margin-block: clamp(40px, 6vw, 64px); }
.v3-scope .twin-pillar-mark { display: inline-block; width: 28px; height: 80px; background: url('../assets/svg/twin-pillar.svg') center/contain no-repeat; }
.v3-scope .twin-pillar-mark.is-sm { width: 18px; height: 50px; }
.v3-scope .twin-pillar-mark.is-lg { width: 40px; height: 120px; }
/* White-stroke variant for ink-dark sections (replaces filter: invert(1) hack). */
.v3-scope .twin-pillar-mark.is-light { background-image: url('../assets/svg/twin-pillar-light.svg'); }
/* ---------- 5. HEADER / NAV ---------- */
.v3-scope .header {
position: sticky; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(253, 251, 246, 0.86);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--c-line);
transition: background var(--t-fast), box-shadow var(--t-fast);
}
.v3-scope .header.is-scrolled { background: rgba(253, 251, 246, 0.95); box-shadow: var(--shadow-1); }
.v3-scope .header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-6);
min-height: var(--header-h);
}
.v3-scope .header__logo {
display: inline-flex;
align-items: center;
padding: 12px 0;
text-decoration: none;
flex-shrink: 0;
}
.v3-scope .header__logo img {
height: 52px;
width: auto;
max-width: none;
display: block;
flex-shrink: 0;
image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 1280px) { .v3-scope .header__logo img { height: 48px; } }
@media (max-width: 1100px) { .v3-scope .header__logo img { height: 46px; } }
@media (max-width: 700px) { .v3-scope .header__logo img { height: 40px; } }
.v3-scope .nav { display: flex; align-items: center; gap: var(--sp-6); justify-content: center; }
.v3-scope .nav__link {
font-size: 14px; font-weight: 500; color: var(--c-ink-soft);
padding: 8px 4px; position: relative; transition: color var(--t-fast);
}
.v3-scope .nav__link:hover { color: var(--c-magenta); }
.v3-scope .nav__link.is-active { color: var(--c-ink); }
.v3-scope .nav__link.is-active::after {
content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px;
height: 2px; background: var(--c-magenta);
}
.v3-scope .header__cta { display: flex; align-items: center; gap: var(--sp-3); }
.v3-scope .nav-toggle {
display: none; width: 44px; height: 44px;
align-items: center; justify-content: center; flex-direction: column; gap: 5px;
border-radius: 8px;
}
.v3-scope .nav-toggle span { width: 22px; height: 2px; background: var(--c-ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.v3-scope .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3-scope .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v3-scope .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu */
.v3-scope .mobile-menu {
position: fixed; inset: 0;
background: var(--c-bg-warm);
z-index: 95;
padding: calc(var(--mobile-header-h) + 24px) var(--side-padding) 40px;
overflow-y: auto;
display: none;
flex-direction: column; gap: 16px;
}
.v3-scope .mobile-menu.is-open { display: flex; }
.v3-scope .mobile-menu__cta {
background: var(--c-magenta); color: #fff; font-weight: 600;
padding: 18px 24px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: space-between;
font-size: 18px;
}
.v3-scope .mobile-menu__list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.v3-scope .mobile-menu__link {
display: block; padding: 18px 4px;
font-size: 22px; font-family: var(--ff-display); font-weight: 600;
border-bottom: 1px solid var(--c-line);
}
.v3-scope .mobile-menu__contact { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.v3-scope .mobile-menu__contact .pill { flex: 1; min-width: 130px; justify-content: center; }
.v3-scope .mobile-menu__mark { margin-top: 20px; }
/* Pills (phone / whatsapp / wa text) */
.v3-scope .pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: transparent; border: 1px solid var(--c-line);
border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600;
white-space: nowrap;
color: var(--c-ink); transition: background var(--t-fast), border-color var(--t-fast);
}
.v3-scope .pill svg { width: 16px; height: 16px; }
.v3-scope .pill.is-whatsapp { color: var(--c-whatsapp); border-color: var(--c-whatsapp); }
.v3-scope .pill.is-whatsapp:hover { background: var(--c-whatsapp); color: #fff; }
.v3-scope .pill:hover { border-color: var(--c-ink); }
.v3-scope .pill.is-icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
/* ---------- 6. BUTTONS ---------- */
.v3-scope .button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 26px; min-height: 48px;
border-radius: var(--radius-pill);
font-family: var(--ff-body); font-weight: 600; font-size: 15px;
line-height: 1; letter-spacing: 0.005em;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
white-space: nowrap;
}
.v3-scope .button.is-primary {
background: var(--c-magenta); color: #fff;
box-shadow: var(--shadow-brand);
}
.v3-scope .button.is-primary:hover { background: var(--c-magenta-hover); transform: translateY(-1px); box-shadow: var(--shadow-brand-hover); }
.v3-scope .button.is-primary:active { background: var(--c-magenta-deep); transform: translateY(0); }
.v3-scope .button.is-secondary {
background: transparent; color: var(--c-ink);
border: 1px solid var(--c-ink);
}
.v3-scope .button.is-secondary:hover { background: var(--c-ink); color: var(--c-bg-warm); }
.v3-scope .button.is-ghost {
padding: 10px 6px; min-height: 0; color: var(--c-ink);
}
.v3-scope .button.is-ghost:hover { color: var(--c-magenta); }
.v3-scope .button.is-whatsapp {
background: var(--c-whatsapp); color: #fff;
}
.v3-scope .button.is-whatsapp:hover { background: #1FB155; }
.v3-scope .button.is-on-dark {
background: var(--c-magenta); color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 18px rgba(171,3,92,0.45);
}
.v3-scope .button.is-on-dark.is-secondary {
background: transparent; color: var(--c-cream); border: 1px solid rgba(248,236,221,0.45); box-shadow: none;
}
.v3-scope .button.is-on-dark.is-secondary:hover { background: rgba(248,236,221,0.10); color: #fff; border-color: var(--c-cream); }
.v3-scope .button.is-sm { padding: 10px 18px; min-height: 40px; font-size: 13px; }
.v3-scope .button.is-lg { padding: 18px 30px; min-height: 56px; font-size: 16px; }
.v3-scope .button.is-block { width: 100%; }
/* ---------- 7. TRUST STRIP ---------- */
.v3-scope .trust-strip {
background: var(--c-royal);
color: var(--c-cream);
padding: clamp(28px, 4vw, 40px) 0;
}
.v3-scope .trust-strip__inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
gap: clamp(20px, 2.6vw, 36px);
}
.v3-scope .trust-strip__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
position: relative;
padding: 4px clamp(8px, 1.5vw, 18px);
min-width: 0;
}
.v3-scope .trust-strip__item:not(:last-child)::after {
content: '';
position: absolute;
right: calc(clamp(20px, 2.6vw, 36px) / -2);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 42px;
background: rgba(248, 236, 221, 0.20);
}
.v3-scope .trust-strip__num {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(32px, 3.4vw, 40px);
color: #fff;
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
min-height: 1em;
display: flex; align-items: center; justify-content: center;
}
.v3-scope .trust-strip__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(248, 236, 221, 0.78);
line-height: 1.35;
max-width: 14ch;
text-wrap: balance;
}
@media (max-width: 1100px) {
.v3-scope .trust-strip__inner { grid-template-columns: repeat(5, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
.v3-scope .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.v3-scope .trust-strip__item:not(:last-child)::after { display: none; }
.v3-scope .trust-strip__item:nth-child(5) { grid-column: 1 / -1; }
}
/* ---------- 8. HERO (staging-style stacked layout) ---------- */
.v3-scope .hero {
padding-top: clamp(40px, 6vw, 72px);
padding-bottom: clamp(48px, 8vw, 96px);
position: relative;
}
.v3-scope .hero-stage { max-width: 1080px; text-align: center; }
.v3-scope .hero-badges {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px; margin-bottom: var(--sp-6);
}
.v3-scope .hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: var(--radius-pill);
background: var(--c-bg-pure); border: 1px solid var(--c-line);
font-family: var(--ff-body); font-size: 13px; font-weight: 500;
letter-spacing: 0.01em; color: var(--c-ink);
white-space: nowrap;
}
.v3-scope .hero-badge .twin-pillar-mark.is-sm { width: 12px; height: 28px; }
.v3-scope .hero__h1 {
margin: 0 auto var(--sp-5);
max-width: 18ch;
}
.v3-scope .hero__sub {
font-size: var(--fs-lede);
line-height: 1.55;
color: var(--c-ink-soft);
max-width: 60ch;
margin: 0 auto;
text-wrap: pretty;
}
.v3-scope .hero__sub strong { font-weight: 600; color: var(--c-ink); }
.v3-scope .hero__cta-row {
display: flex; justify-content: center; align-items: center;
gap: var(--sp-5); margin-top: var(--sp-7);
flex-wrap: wrap;
}
.v3-scope .hero-pair {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2.5vw, 28px);
margin-top: clamp(48px, 7vw, 80px);
text-align: left;
}
.v3-scope .hero-pair > figure {
position: relative;
border-radius: var(--radius);
overflow: hidden;
}
.v3-scope .hero-pair > figure img {
width: 100%; height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
.v3-scope .hero-pair__label {
position: absolute; left: 16px; bottom: 16px;
display: inline-flex; align-items: center;
padding: 8px 14px; border-radius: var(--radius-pill);
background: rgba(253, 251, 246, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-family: var(--ff-body); font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 600; color: var(--c-ink);
}
.v3-scope .hero-pair__label--royal { color: var(--c-royal); border: 1px solid var(--c-royal-soft); }
.v3-scope .hero-pair__label--magenta { color: var(--c-magenta); border: 1px solid var(--c-magenta-soft); }
/* Page hero (non-home) */
.v3-scope .page-hero { padding-block: clamp(48px, 8vw, 96px); }
.v3-scope .page-hero__grid {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px); align-items: center;
}
.v3-scope .page-hero__copy { max-width: 560px; }
.v3-scope .page-hero__copy h1 { margin-block: var(--sp-4) var(--sp-5); }
.v3-scope .page-hero__copy p { font-size: var(--fs-lede); color: var(--c-ink); }
.v3-scope .page-hero__cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
/* ---------- 9. CARDS ---------- */
.v3-scope .card {
background: var(--c-bg-warm);
border: 1px solid var(--c-line);
border-radius: var(--radius);
padding: clamp(24px, 3vw, 40px);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
position: relative;
height: 100%;
display: flex; flex-direction: column;
}
.v3-scope .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.v3-scope .card .eyebrow { margin-bottom: var(--sp-3); }
.v3-scope .card h3 { margin-bottom: var(--sp-3); }
.v3-scope .card p { margin-bottom: var(--sp-4); }
.v3-scope .card .card__cta { margin-top: auto; padding-top: var(--sp-4); }
.v3-scope .card .card__cta .arrow-link { font-size: 14px; }
.v3-scope .card.is-pillar { padding: clamp(28px, 3.5vw, 44px); }
.v3-scope .card.is-pillar.is-monte { background: var(--c-royal-soft); border-color: transparent; }
.v3-scope .card.is-pillar.is-monte .eyebrow { color: var(--c-royal); }
.v3-scope .card.is-pillar.is-map { background: var(--c-magenta-soft); border-color: transparent; }
.v3-scope .card.is-pillar.is-map .eyebrow { color: var(--c-magenta); }
.v3-scope .card.is-pillar h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
.v3-scope .card.is-centre { padding: 0; overflow: hidden; }
.v3-scope .card.is-centre .frame { border-radius: 0; }
/* Centre-card body padding now lives in `.centre-card__body` (§33); legacy selector removed 2026-05-19 to avoid Webflow-port dead code. */
.v3-scope .card.is-centre h3 { font-family: var(--ff-display); font-weight: 700; font-size: 24px; margin-bottom: 4px; }
.v3-scope .card.is-centre .kpi-row { display: flex; gap: 14px; font-size: 13px; color: var(--c-ink-soft); padding: 8px 0 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 10px; }
.v3-scope .card.is-centre .kpi-row span { display: inline-flex; align-items: center; gap: 4px; }
.v3-scope .card.is-centre .meta { font-size: 14px; color: var(--c-ink-soft); }
.v3-scope .card.is-centre .specific-fact { font-size: 14px; color: var(--c-ink); padding: 10px 0; border-top: 1px dashed var(--c-line); margin-top: 8px; }
.v3-scope .card.is-centre .card__cta { padding: 0 24px 28px; }
.v3-scope .card.is-centre.is-flagship { box-shadow: 0 0 0 1px var(--c-royal-soft); }
.v3-scope .card.is-centre.is-flagship .eyebrow { color: var(--c-royal); }
.v3-scope .card.is-voice {
background: var(--c-bg-warm); border: 1px solid var(--c-line);
padding: 32px; border-radius: var(--radius);
min-width: 320px; flex: 0 0 85vw; max-width: 440px;
scroll-snap-align: start;
display: flex; flex-direction: column; gap: 16px;
}
.v3-scope .card.is-voice .quote { font-family: var(--ff-display); font-size: 20px; line-height: 1.4; color: var(--c-ink); }
.v3-scope .card.is-voice .quote::before { content: '\201C'; font-family: var(--ff-display); font-size: 48px; color: var(--c-magenta); line-height: 0.5; vertical-align: -0.4em; margin-right: 6px; }
.v3-scope .card.is-voice .attrib { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.v3-scope .card.is-voice .attrib__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--c-cream);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-display); font-weight: 700; color: var(--c-magenta);
}
.v3-scope .card.is-voice .attrib__meta { font-size: 13px; color: var(--c-ink-soft); }
.v3-scope .card.is-voice .attrib__name { font-weight: 600; color: var(--c-ink); }
.v3-scope .card.is-process { padding: 32px; display: flex; flex-direction: column; gap: 16px; background: var(--c-bg-warm); border: 1px solid var(--c-line); }
.v3-scope .card.is-process .process-num {
font-family: var(--ff-display); font-style: italic; font-weight: 300;
font-size: 64px; line-height: 1; color: var(--c-royal); opacity: 0.85;
}
.v3-scope .card.is-process h3 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; }
.v3-scope .card.is-triplet h3 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; }
.v3-scope .card.is-pedagogy { padding: 24px; background: var(--c-bg-warm); border-left: 3px solid var(--c-magenta); border-radius: 4px; }
.v3-scope .card.is-pedagogy .pedagogy__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.v3-scope .card.is-pedagogy h4 { font-family: var(--ff-display); font-weight: 700; font-size: 20px; }
.v3-scope .card.is-pedagogy .pedagogy__tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-soft); }
.v3-scope .card.is-pedagogy p { font-size: 14px; }
/* Generic grid utilities */
.v3-scope .grid { display: grid; gap: var(--sp-5); }
.v3-scope .grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.v3-scope .grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.v3-scope .grid.is-4 { grid-template-columns: repeat(4, 1fr); }
.v3-scope .grid.is-tight { gap: var(--sp-4); }
.v3-scope .grid.is-loose { gap: var(--sp-6); }
@media (max-width: 1024px) {
.v3-scope .grid.is-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.v3-scope .grid.is-2, .v3-scope .grid.is-3, .v3-scope .grid.is-4 { grid-template-columns: 1fr; }
}
/* ---------- 10. FRAMES (images) ---------- */
.v3-scope .frame {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--c-mist);
aspect-ratio: 4 / 5;
}
.v3-scope .frame img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow);
}
.v3-scope .frame:hover img { transform: scale(1.03); }
.v3-scope .frame.is-portrait { aspect-ratio: 3 / 4; }
.v3-scope .frame.is-wide { aspect-ratio: 16 / 10; }
.v3-scope .frame.is-square { aspect-ratio: 1 / 1; }
.v3-scope .frame.is-43 { aspect-ratio: 4 / 3; }
.v3-scope .frame.is-banner { aspect-ratio: 21 / 9; }
.v3-scope .frame__caption {
font-family: var(--ff-display); font-style: italic; font-weight: 400;
font-size: 14px; color: var(--c-ink-soft);
margin-top: 12px;
}
/* Placeholder slot (gated assets) */
.v3-scope .placeholder {
position: relative;
background: linear-gradient(135deg, var(--c-royal-soft) 0%, var(--c-magenta-soft) 100%);
border: 1px dashed rgba(0,83,155,0.32);
border-radius: var(--radius);
aspect-ratio: 4 / 5;
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.v3-scope .placeholder::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(0,83,155,0.05) 18px, rgba(0,83,155,0.05) 19px);
border-radius: var(--radius); pointer-events: none;
}
.v3-scope .placeholder__label {
position: relative; z-index: 1;
font-family: var(--ff-body); font-size: 12px; line-height: 1.4;
letter-spacing: 0.06em;
color: var(--c-royal);
text-transform: uppercase; font-weight: 600;
text-align: center; max-width: 240px;
}
.v3-scope .placeholder.is-portrait { aspect-ratio: 3 / 4; }
.v3-scope .placeholder.is-wide { aspect-ratio: 16 / 10; }
.v3-scope .placeholder.is-square { aspect-ratio: 1 / 1; }
.v3-scope .placeholder.is-43 { aspect-ratio: 4 / 3; }
.v3-scope .placeholder.is-banner { aspect-ratio: 21 / 9; }
.v3-scope .placeholder.is-video {
background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-magenta-deep) 100%);
border: 1px dashed rgba(255,255,255,0.18);
}
.v3-scope .placeholder.is-video .placeholder__label { color: rgba(255,255,255,0.92); }
.v3-scope .placeholder.is-video::before {
content: ''; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, calc(-50% - 22px));
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,0.92);
z-index: 1;
}
.v3-scope .placeholder.is-video::after {
background: none;
}
.v3-scope .placeholder.is-video .play-tri {
position: absolute; left: 50%; top: 50%;
transform: translate(calc(-50% + 4px), calc(-50% - 22px));
width: 0; height: 0; z-index: 2;
border-left: 16px solid var(--c-magenta);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
/* ---------- 11. FOUNDER + KNOWN-BY-NAME ---------- */
.v3-scope .founder-strip {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(28px, 5vw, 64px); align-items: center;
}
.v3-scope .founder-strip__faces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v3-scope .founder-strip__faces .frame { aspect-ratio: 3 / 4; }
.v3-scope .founder-strip__copy h2 { margin-bottom: var(--sp-4); }
.v3-scope .founder-strip__quote {
font-family: var(--ff-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
color: var(--c-ink); margin-block: var(--sp-5);
padding-left: 20px; border-left: 3px solid var(--c-magenta);
}
.v3-scope .founder-strip__names { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: 14px; }
.v3-scope .founder-strip__name { display: flex; flex-direction: column; gap: 4px; }
.v3-scope .founder-strip__name strong { font-size: 16px; font-weight: 600; }
.v3-scope .founder-strip__name span { color: var(--c-ink-soft); }
@media (max-width: 880px) { .v3-scope .founder-strip { grid-template-columns: 1fr; } }
/* Known by name section */
.v3-scope .known {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 56px); align-items: center;
}
.v3-scope .known .copy h2 { margin-bottom: var(--sp-5); }
.v3-scope .known .copy p { margin-bottom: var(--sp-4); }
.v3-scope .known__signal-list { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 10px; }
.v3-scope .known__signal-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--c-ink); }
.v3-scope .known__signal-list li::before {
content: ''; width: 16px; height: 16px; flex-shrink: 0;
background: var(--c-royal); margin-top: 4px;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
@media (max-width: 880px) { .v3-scope .known { grid-template-columns: 1fr; } }
/* ---------- 12. DAY-AT-JOSIAH TIMELINE ---------- */
.v3-scope .day-grid {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0;
background: var(--c-bg-warm);
border: 1px solid var(--c-line); border-radius: var(--radius);
overflow: hidden;
}
.v3-scope .day-row {
display: contents;
}
.v3-scope .day-time, .v3-scope .day-detail {
padding: 20px 24px;
border-bottom: 1px solid var(--c-line);
}
.v3-scope .day-time {
font-family: var(--ff-display); font-weight: 600;
background: var(--c-mist);
color: var(--c-ink); font-size: 16px;
display: flex; align-items: center;
}
.v3-scope .day-detail { display: flex; flex-direction: column; gap: 4px; }
.v3-scope .day-detail strong { font-weight: 600; font-size: 16px; color: var(--c-ink); }
.v3-scope .day-detail span { font-size: 14px; color: var(--c-ink-soft); }
.v3-scope .day-row:last-child .day-time, .v3-scope .day-row:last-child .day-detail { border-bottom: 0; }
@media (max-width: 600px) {
.v3-scope .day-grid { grid-template-columns: 1fr; }
.v3-scope .day-time { background: var(--c-cream); padding: 12px 18px; font-size: 14px; }
.v3-scope .day-detail { padding: 14px 18px 22px; }
}
/* ---------- 13. STAGE CARDS (staging/education-led design + v2 colour coding) ---------- */
.v3-scope .stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.v3-scope .stage-card {
border-radius: var(--radius);
padding: clamp(28px, 2.6vw, 36px) clamp(24px, 2.2vw, 30px);
transition: transform var(--t-base), box-shadow var(--t-base);
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.v3-scope .stage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.v3-scope .stage-card h3 {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--c-ink);
text-wrap: balance;
}
.v3-scope .stage-card .age {
font-family: var(--ff-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-ink);
font-weight: 600;
}
.v3-scope .stage-card .outcome { font-size: 14px; line-height: 1.6; color: var(--c-ink-soft); }
.v3-scope .stage-card .muted { color: var(--c-ink-soft); }
.v3-scope .stage-card .meta-bar {
display: flex; gap: 14px 18px; flex-wrap: wrap;
margin-top: auto; padding-top: 14px;
border-top: 1px solid rgba(26, 26, 26, 0.10);
font-size: 12px; color: var(--c-ink-soft); letter-spacing: 0.01em;
}
.v3-scope .stage-card .meta-bar span { font-weight: 500; }
.v3-scope .stage-card .arrow-link { color: var(--c-ink); font-weight: 600; font-size: 14px; }
.v3-scope .stage-card .arrow-link:hover { color: var(--c-magenta); }
/* Per-stage colour blocks (v2 spec, PDF p.87) */
.v3-scope .stage-card.is-infant { background: var(--c-stage-infant-bg); } /* Pink */
.v3-scope .stage-card.is-toddler { background: var(--c-stage-toddler-bg); } /* Orangey yellow */
.v3-scope .stage-card.is-nursery { background: var(--c-stage-nursery-bg); } /* Blue */
.v3-scope .stage-card.is-kinder { background: var(--c-stage-kinder-bg); color: #fff; } /* Dark blue */
/* Kindergarten dark-bg overrides */
.v3-scope .stage-card.is-kinder h3 { color: #fff; }
.v3-scope .stage-card.is-kinder .age { color: rgba(255,255,255,0.78); }
.v3-scope .stage-card.is-kinder .outcome { color: rgba(255,255,255,0.86); }
.v3-scope .stage-card.is-kinder .muted { color: rgba(255,255,255,0.74); }
.v3-scope .stage-card.is-kinder .meta-bar { color: rgba(255,255,255,0.72); border-top-color: rgba(255,255,255,0.18); }
.v3-scope .stage-card.is-kinder .arrow-link { color: #FFB8DA; }
.v3-scope .stage-card.is-kinder .arrow-link:hover { color: #fff; }
@media (max-width: 1024px) { .v3-scope .stage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v3-scope .stage-grid { grid-template-columns: 1fr; } }
/* Stage comparison table */
.v3-scope .stage-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: var(--c-bg-warm);
border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.v3-scope .stage-table th, .v3-scope .stage-table td {
padding: 14px 16px; text-align: left;
border-bottom: 1px solid var(--c-line);
}
.v3-scope .stage-table thead th {
background: var(--c-ink); color: var(--c-cream);
font-family: var(--ff-body); font-weight: 600; font-size: 12px;
letter-spacing: 0.08em; text-transform: uppercase;
}
.v3-scope .stage-table tbody tr:last-child td { border-bottom: 0; }
.v3-scope .stage-table tbody th {
background: var(--c-mist); font-weight: 600; color: var(--c-ink);
font-family: var(--ff-display); font-size: 15px;
}
.v3-scope .stage-table tbody td { color: var(--c-ink-soft); }
.v3-scope .stage-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ---------- 14. TWIN-PILLAR PAIR BLOCK ---------- */
.v3-scope .twin-pair {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--c-bg-warm); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.v3-scope .twin-pair__col { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 16px; }
.v3-scope .twin-pair__col.is-monte { background: var(--c-royal-soft); }
.v3-scope .twin-pair__col.is-map { background: var(--c-magenta-soft); }
.v3-scope .twin-pair__col.is-monte .eyebrow { color: var(--c-royal); }
.v3-scope .twin-pair__col.is-map .eyebrow { color: var(--c-magenta); }
.v3-scope .twin-pair__col h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.v3-scope .twin-pair__col ul { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.v3-scope .twin-pair__col ul li { font-size: 15px; padding-left: 22px; position: relative; color: var(--c-ink); }
.v3-scope .twin-pair__col ul li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 12px; height: 2px; background: currentColor; opacity: 0.6;
}
.v3-scope .twin-pair__col.is-monte ul li::before { background: var(--c-royal); opacity: 1; }
.v3-scope .twin-pair__col.is-map ul li::before { background: var(--c-magenta); opacity: 1; }
@media (max-width: 880px) { .v3-scope .twin-pair { grid-template-columns: 1fr; } }
/* ---------- 15. COMPARISON BLOCK ---------- */
.v3-scope .compare-list { display: flex; flex-direction: column; gap: 18px; }
.v3-scope .compare-row {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 24px; padding: 24px 0;
border-bottom: 1px solid var(--c-line);
}
.v3-scope .compare-row:last-child { border-bottom: 0; }
.v3-scope .compare-row .question { font-family: var(--ff-display); font-weight: 600; font-size: clamp(18px, 1.8vw, 22px); color: var(--c-ink); line-height: 1.35; }
.v3-scope .compare-row .answer { font-size: 15px; color: var(--c-ink-soft); line-height: 1.6; }
.v3-scope .compare-row .answer strong { color: var(--c-royal); font-weight: 600; }
@media (max-width: 767px) { .v3-scope .compare-row { grid-template-columns: 1fr; gap: 8px; } }
/* ---------- 16. TESTIMONIAL CAROUSEL ---------- */
.v3-scope .carousel {
display: flex; gap: 20px;
overflow-x: auto; overflow-y: hidden;
padding: 8px 4px 24px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.v3-scope .carousel::-webkit-scrollbar { height: 6px; }
.v3-scope .carousel::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 999px; }
/* ---------- 17. FOOTER ---------- */
.v3-scope .footer { background: var(--c-ink); color: var(--c-cream); padding: 72px 0 28px; }
.v3-scope .footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 40px;
}
.v3-scope .footer h4 { color: #fff; font-family: var(--ff-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.v3-scope .footer__brand { display: flex; flex-direction: column; gap: 16px; }
.v3-scope .footer__brand-mark {
display: inline-flex;
align-items: center;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
width: fit-content;
}
.v3-scope .footer__brand-mark img {
height: 64px;
width: auto;
display: block;
filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}
.v3-scope .footer__brand-mark span { display: none; }
@media (max-width: 700px) { .v3-scope .footer__brand-mark img { height: 52px; } }
.v3-scope .footer__tag { font-family: var(--ff-display); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--c-cream); max-width: 30ch; }
.v3-scope .footer__since { font-size: 12px; letter-spacing: 0.12em; color: rgba(248,236,221,0.5); margin-top: 4px; }
.v3-scope .footer__list { display: flex; flex-direction: column; gap: 12px; }
.v3-scope .footer__list a { font-size: 14px; color: rgba(248,236,221,0.78); padding: 4px 0; display: inline-block; min-height: 28px; transition: color var(--t-fast); }
.v3-scope .footer__list a:hover { color: #fff; }
.v3-scope .footer__list .gloss { color: rgba(248,236,221,0.5); font-size: 12px; line-height: 1.5; margin-top: 2px; display: block; }
.v3-scope .footer__contact { display: flex; flex-direction: column; gap: 10px; }
.v3-scope .footer__socials { display: flex; gap: 12px; margin-top: 18px; }
.v3-scope .footer__socials a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(248,236,221,0.10);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--t-fast);
}
.v3-scope .footer__socials a:hover { background: var(--c-magenta); }
.v3-scope .footer__socials img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.v3-scope .footer__bottom {
display: flex; justify-content: space-between; align-items: center;
margin-top: 56px; padding-top: 24px;
border-top: 1px solid rgba(248,236,221,0.12);
font-size: 12px; color: rgba(248,236,221,0.55); flex-wrap: wrap; gap: 12px;
}
.v3-scope .footer__bottom a { color: rgba(248,236,221,0.7); margin-right: 18px; }
@media (max-width: 1024px) {
.v3-scope .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
.v3-scope .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.v3-scope .footer__brand { grid-column: 1 / -1; }
}
/* ---------- 18. STICKY MOBILE CTA ---------- */
.v3-scope .sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 90;
display: none;
gap: 10px;
padding: 10px var(--side-padding) calc(10px + env(safe-area-inset-bottom));
background: rgba(253, 251, 246, 0.96);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--c-line);
}
.v3-scope .sticky-cta__call, .v3-scope .sticky-cta__wa {
width: 48px; height: 48px; min-width: 48px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.v3-scope .sticky-cta__call { background: var(--c-ink); color: var(--c-bg-warm); }
.v3-scope .sticky-cta__wa { background: var(--c-whatsapp); color: #fff; }
.v3-scope .sticky-cta__cta { flex: 1; min-height: 48px; }
.v3-scope.has-sticky-cta { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
/* ---------- 19. PAGE-NAV PILL ROW ---------- */
.v3-scope .page-nav {
position: sticky; top: var(--header-h);
z-index: 50;
background: rgba(253, 251, 246, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--c-line);
}
.v3-scope .page-nav__inner {
display: flex; gap: 8px;
padding: 12px 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.v3-scope .page-nav__inner::-webkit-scrollbar { display: none; }
.v3-scope .page-nav__pill {
flex-shrink: 0;
padding: 8px 16px;
border-radius: var(--radius-pill);
border: 1px solid var(--c-line);
font-size: 13px; font-weight: 500; color: var(--c-ink);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
min-height: 36px; display: inline-flex; align-items: center;
}
.v3-scope .page-nav__pill:hover { background: var(--c-ink); color: var(--c-bg-warm); border-color: var(--c-ink); }
.v3-scope .page-nav__pill.is-active { background: var(--c-royal); color: #fff; border-color: var(--c-royal); }
/* ---------- 20. FAQ ACCORDION ---------- */
.v3-scope .faq-pills {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-7);
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.v3-scope .faq-pill {
padding: 10px 18px; border-radius: var(--radius-pill);
border: 1px solid var(--c-line); font-size: 13px; font-weight: 500;
min-height: 40px; display: inline-flex; align-items: center;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
white-space: nowrap;
}
.v3-scope .faq-pill:hover { border-color: var(--c-ink); }
.v3-scope .faq-pill.is-active { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); }
.v3-scope .faq-popular {
background: var(--c-magenta-tint);
border-left: 3px solid var(--c-magenta);
padding: 20px 24px; border-radius: 6px;
margin-bottom: var(--sp-6);
}
.v3-scope .faq-popular h3 { font-family: var(--ff-display); font-weight: 700; font-size: 18px; margin-bottom: 12px; color: var(--c-magenta-deep); }
.v3-scope .faq-popular ul { display: flex; flex-direction: column; gap: 8px; }
.v3-scope .faq-popular ul li a { font-size: 15px; color: var(--c-ink); display: inline-flex; align-items: center; gap: 8px; }
.v3-scope .faq-popular ul li a::before { content: '→'; color: var(--c-magenta); font-weight: 600; }
.v3-scope .faq-list { display: flex; flex-direction: column; }
.v3-scope .faq-item {
border-bottom: 1px solid var(--c-line);
}
.v3-scope .faq-item__btn {
width: 100%; text-align: left;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; padding: 22px 0;
font-family: var(--ff-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px);
color: var(--c-ink); line-height: 1.35;
}
.v3-scope .faq-item__icon {
width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px;
color: var(--c-ink-soft);
transition: transform var(--t-base), color var(--t-base);
}
.v3-scope .faq-item[data-open] .faq-item__icon, .v3-scope .faq-item:has(.faq-item__btn[aria-expanded="true"]) .faq-item__icon {
transform: rotate(180deg); color: var(--c-magenta);
}
.v3-scope .faq-item__panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--t-base);
}
.v3-scope .faq-item[data-open] .faq-item__panel, .v3-scope .faq-item:has(.faq-item__btn[aria-expanded="true"]) .faq-item__panel {
grid-template-rows: 1fr;
}
.v3-scope .faq-item__panel-inner { overflow: hidden; }
.v3-scope .faq-item__panel-inner > div { padding: 0 0 22px; max-width: 70ch; }
.v3-scope .faq-item__panel p { color: var(--c-ink-soft); line-height: 1.7; }
.v3-scope .faq-item__panel p + p { margin-top: 12px; }
.v3-scope .faq-cat { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: 6px; }
/* ---------- 21. ABOUT PAGE — TIMELINE / MAGENTA MOMENT ---------- */
.v3-scope .about-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.v3-scope .about-timeline::before {
content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px;
width: 2px; background: linear-gradient(180deg, var(--c-royal), var(--c-magenta));
}
.v3-scope .timeline-node { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 20px 0; align-items: baseline; position: relative; }
.v3-scope .timeline-node::before {
content: ''; position: absolute; left: 4px; top: 28px;
width: 12px; height: 12px; background: var(--c-bg-warm); border: 2px solid var(--c-royal); border-radius: 50%;
}
.v3-scope .timeline-node:last-child::before { background: var(--c-magenta); border-color: var(--c-magenta); }
.v3-scope .timeline-node .year { font-family: var(--ff-display); font-weight: 700; font-size: 28px; color: var(--c-ink); padding-left: 32px; }
.v3-scope .timeline-node .detail { font-size: 15px; color: var(--c-ink-soft); padding-bottom: 4px; }
.v3-scope .timeline-node .detail strong { color: var(--c-ink); font-weight: 600; }
.v3-scope .magenta-moment {
background: var(--c-magenta); color: #fff;
padding-block: clamp(96px, 14vw, 160px);
text-align: center;
position: relative;
}
.v3-scope .magenta-moment h2 {
font-family: var(--ff-display); font-weight: 700;
font-size: clamp(32px, 5vw, 64px); line-height: 1.1;
color: #fff; text-wrap: balance; max-width: 18ch; margin: 0 auto;
}
.v3-scope .magenta-moment .twin-pillar-mark {
background-image: none;
display: inline-block;
margin-bottom: 32px;
}
.v3-scope .magenta-moment .twin-pillar-mark::before {
content: ''; display: inline-block; width: 4px; height: 80px; background: rgba(255,255,255,0.7); margin-right: 8px; vertical-align: top;
}
.v3-scope .magenta-moment .twin-pillar-mark::after {
content: ''; display: inline-block; width: 4px; height: 80px; background: #fff; vertical-align: top;
}
/* ---------- 22. ADMISSIONS — PROCESS STEPS ---------- */
.v3-scope .process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 880px) { .v3-scope .process-row { grid-template-columns: 1fr; } }
/* ---------- 23. VISIT FORM ---------- */
.v3-scope .visit-shell {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 880px) { .v3-scope .visit-shell { grid-template-columns: 1fr; } }
.v3-scope .reassurance-list { display: flex; flex-direction: column; gap: 14px; margin-block: var(--sp-6); }
.v3-scope .reassurance-list li {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px; background: var(--c-bg-warm); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.v3-scope .reassurance-list li strong { font-weight: 600; color: var(--c-ink); }
.v3-scope .reassurance-list .num {
width: 28px; height: 28px; border-radius: 50%; background: var(--c-royal); color: #fff;
font-family: var(--ff-display); font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v3-scope .visit-form-card {
background: var(--c-royal-soft);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px);
}
.v3-scope .visit-form-card h2 { margin-bottom: var(--sp-3); font-size: clamp(24px, 2.6vw, 32px); }
.v3-scope .visit-form-card .helper { font-size: 14px; color: var(--c-ink-soft); margin-bottom: var(--sp-5); }
.v3-scope .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-scope .form-grid .form-row.is-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .v3-scope .form-grid { grid-template-columns: 1fr; } }
.v3-scope .form-row { display: flex; flex-direction: column; gap: 6px; }
.v3-scope .form-row label { font-size: 13px; font-weight: 600; color: var(--c-ink); letter-spacing: 0.02em; }
.v3-scope .form-row input, .v3-scope .form-row select, .v3-scope .form-row textarea {
font-family: var(--ff-body); font-size: 15px;
padding: 14px 16px; min-height: 48px;
background: var(--c-bg-warm); color: var(--c-ink);
border: 1px solid var(--c-line); border-radius: 8px;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
width: 100%;
}
.v3-scope .form-row input::placeholder, .v3-scope .form-row textarea::placeholder { color: rgba(74,74,74,0.6); }
.v3-scope .form-row input:focus, .v3-scope .form-row select:focus, .v3-scope .form-row textarea:focus {
outline: none;
border-color: var(--c-magenta);
box-shadow: 0 0 0 4px rgba(171,3,92,0.18);
}
.v3-scope .form-row textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.v3-scope .form-submit-row { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-6); }
.v3-scope .form-privacy { font-size: 12px; color: var(--c-ink-soft); line-height: 1.5; }
.v3-scope .form-backend-note {
background: var(--c-cream); padding: 14px 16px; border-radius: 8px;
font-size: 13px; color: var(--c-ink-soft); display: flex; gap: 10px; align-items: flex-start;
margin-bottom: var(--sp-4);
}
.v3-scope .form-backend-note strong { color: var(--c-magenta-deep); font-weight: 600; }
.v3-scope .whatsapp-tile {
background: var(--c-bg-warm); border: 1px solid var(--c-whatsapp);
border-radius: var(--radius);
padding: 22px 24px;
display: flex; gap: 16px; align-items: center;
margin-bottom: var(--sp-4);
}
.v3-scope .whatsapp-tile__icon {
width: 48px; height: 48px; border-radius: 50%; background: var(--c-whatsapp); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.v3-scope .whatsapp-tile__icon svg { width: 24px; height: 24px; }
.v3-scope .whatsapp-tile h3 { font-family: var(--ff-body); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.v3-scope .whatsapp-tile p { font-size: 13px; color: var(--c-ink-soft); margin-bottom: 6px; }
.v3-scope .whatsapp-tile a { color: var(--c-whatsapp); font-weight: 600; font-size: 14px; }
/* ---------- 24. ASK STRIP / OBJECTION BLOCK ---------- */
.v3-scope .region-tabs {
display: flex; gap: 6px; margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.v3-scope .region-tab {
padding: 8px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-pill);
font-size: 13px; font-weight: 500;
transition: all var(--t-fast); min-height: 36px;
display: inline-flex; align-items: center;
}
.v3-scope .region-tab.is-active { background: var(--c-royal); color: #fff; border-color: var(--c-royal); }
.v3-scope .region-tab:hover:not(.is-active) { border-color: var(--c-ink); }
/* ---------- 25. UTILITIES ---------- */
.v3-scope .text-center { text-align: center; }
.v3-scope .center-block { margin-inline: auto; }
.v3-scope .max-prose { max-width: 60ch; }
.v3-scope .muted { color: var(--c-ink-soft); }
.v3-scope .mt-2 { margin-top: var(--sp-2); }
.v3-scope .mt-3 { margin-top: var(--sp-3); }
.v3-scope .mt-4 { margin-top: var(--sp-4); }
.v3-scope .mt-5 { margin-top: var(--sp-5); }
.v3-scope .mt-6 { margin-top: var(--sp-6); }
.v3-scope .mt-7 { margin-top: var(--sp-7); }
.v3-scope .mb-3 { margin-bottom: var(--sp-3); }
.v3-scope .mb-4 { margin-bottom: var(--sp-4); }
.v3-scope .mb-5 { margin-bottom: var(--sp-5); }
.v3-scope .mb-6 { margin-bottom: var(--sp-6); }
.v3-scope .mb-7 { margin-bottom: var(--sp-7); }
.v3-scope .flex { display: flex; }
.v3-scope .flex-wrap { flex-wrap: wrap; }
.v3-scope .gap-3 { gap: var(--sp-3); }
.v3-scope .gap-4 { gap: var(--sp-4); }
.v3-scope .gap-5 { gap: var(--sp-5); }
.v3-scope .gap-6 { gap: var(--sp-6); }
.v3-scope .align-center { align-items: center; }
.v3-scope .justify-between { justify-content: space-between; }
.v3-scope .hidden-mobile { display: initial; }
.v3-scope .show-mobile { display: none; }
/* ---------- 26. RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 1024px) {
.v3-scope .hero-stage { max-width: 720px; }
.v3-scope .page-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.v3-scope .hero-pair { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.v3-scope .hero-badges { gap: 8px; }
.v3-scope .hero-badge { font-size: 12px; padding: 7px 12px; }
}
@media (max-width: 1024px) {
.v3-scope .nav { display: none; }
.v3-scope .header__cta .button.is-primary.is-sm { display: none; }
.v3-scope .nav-toggle { display: inline-flex; }
.v3-scope .header__inner { grid-template-columns: auto 1fr; min-height: var(--mobile-header-h); }
.v3-scope .header__cta { justify-content: flex-end; gap: 8px; }
.v3-scope .header__cta .pill { display: none; }
.v3-scope .header { box-shadow: var(--shadow-1); }
}
@media (max-width: 880px) {
.v3-scope body.has-sticky-cta .sticky-cta { display: flex; }
.v3-scope.has-sticky-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.v3-scope .footer__brand { grid-column: 1 / -1; }
.v3-scope .footer__bottom { flex-direction: column; align-items: flex-start; }
.v3-scope .hidden-mobile { display: none; }
.v3-scope .show-mobile { display: initial; }
}
@media (max-width: 600px) {
.v3-scope .footer { padding-top: 56px; }
.v3-scope .stage-table { font-size: 13px; }
.v3-scope .stage-table th, .v3-scope .stage-table td { padding: 10px 12px; }
}
@media (max-width: 430px) {
.v3-scope .day-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
:root { --side-padding: 18px; }
}
/* ---------- 27. PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.v3-scope *, .v3-scope *::before, .v3-scope *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.v3-scope .frame img { transform: none !important; }
.v3-scope .card:hover { transform: none !important; }
}
/* ---------- 28. PROTOTYPE BANNER ---------- */
.v3-scope .proto-banner {
background: var(--c-ink); color: var(--c-cream);
padding: 8px var(--side-padding);
font-size: 12px; letter-spacing: 0.08em;
display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;
text-align: center;
}
.v3-scope .proto-banner strong { color: #fff; letter-spacing: 0.12em; text-transform: uppercase; }
.v3-scope .proto-banner .dot { color: var(--c-magenta); }
/* ---------- 29. WHAT-CHILDREN-CARRY GRID ---------- */
.v3-scope .carry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.v3-scope .carry-tile {
padding: 32px; background: var(--c-bg-warm); border: 1px solid var(--c-line); border-radius: var(--radius);
display: flex; flex-direction: column; gap: 12px;
}
.v3-scope .carry-tile .num {
font-family: var(--ff-display); font-style: italic; font-weight: 400;
font-size: 28px; line-height: 1; color: var(--c-magenta); opacity: 0.75;
letter-spacing: 0.02em;
}
.v3-scope .carry-tile h3 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; line-height: 1.25; }
@media (max-width: 880px) { .v3-scope .carry-grid { grid-template-columns: 1fr; } }
/* ---------- 30. FOUNDER PROOF BAR (About) ---------- */
.v3-scope .proof-bar {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
padding: var(--sp-6);
background: var(--c-bg-warm); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.v3-scope .proof-bar__item { display: flex; flex-direction: column; gap: 4px; }
.v3-scope .proof-bar__num { font-family: var(--ff-display); font-weight: 700; font-size: 34px; color: var(--c-royal); line-height: 1; }
.v3-scope .proof-bar__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); font-weight: 600; }
@media (max-width: 880px) { .v3-scope .proof-bar { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
/* ---------- 31. RIBBON (admissions / visit) ---------- */
.v3-scope .ribbon {
background: var(--c-mist); border-radius: var(--radius); padding: 24px 28px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.v3-scope .ribbon__step { display: flex; flex-direction: column; gap: 6px; }
.v3-scope .ribbon__step .num {
width: 32px; height: 32px; border-radius: 50%; background: var(--c-royal); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--ff-display); font-weight: 700; font-size: 16px;
}
.v3-scope .ribbon__step strong { font-family: var(--ff-display); font-weight: 700; font-size: 18px; color: var(--c-ink); }
.v3-scope .ribbon__step span { font-size: 14px; color: var(--c-ink-soft); line-height: 1.55; }
@media (max-width: 767px) { .v3-scope .ribbon { grid-template-columns: 1fr; } }
/* ---------- 32. AUTHENTIC SUBSTRATE PANEL ---------- */
.v3-scope .substrate {
background: var(--c-royal-soft);
padding: clamp(28px, 4vw, 48px);
border-radius: var(--radius);
display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: 32px;
align-items: center;
}
.v3-scope .substrate__num {
font-family: var(--ff-display); font-style: italic; font-weight: 300;
font-size: clamp(72px, 9vw, 120px); line-height: 0.9; color: var(--c-royal);
}
.v3-scope .substrate h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 12px; }
.v3-scope .substrate ul { display: flex; flex-direction: column; gap: 8px; }
.v3-scope .substrate ul li { font-size: 15px; padding-left: 22px; position: relative; }
.v3-scope .substrate ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--c-royal); }
@media (max-width: 767px) { .v3-scope .substrate { grid-template-columns: 1fr; } }
/* Substrate split variant — copy left, image right (Method doorway block) */
.v3-scope .substrate.substrate--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.v3-scope .substrate--split .substrate__copy { min-width: 0; }
.v3-scope .substrate--split .substrate__image { margin: 0; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 880px) { .v3-scope .substrate.substrate--split { grid-template-columns: 1fr; } }
/* ---------- 33. CENTRE-CARD BODY (Webflow-friendly utility) ---------- */
/* Single-class replacement for inline styles on every centre card body. */
.v3-scope .centre-card__body {
padding: 24px 24px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.v3-scope .centre-card__body--lg { padding: 28px 28px 20px; gap: 10px; }
.v3-scope .centre-card__meta-row {
font-size: 14px;
color: var(--c-ink-soft);
padding-top: 4px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
}
.v3-scope .centre-card__cta-wrap { padding: 0 28px 28px; }
.v3-scope .centre-card__cta-wrap.is-sm { padding: 0 24px 24px; }
/* ---------- 34. FOOTER AWARDS / ACCREDITATIONS PLACEHOLDER ---------- */
/* ---------- AWARDS STRIP — featured & awarded ---------- */
.v3-scope .awards-strip {
background: linear-gradient(180deg, var(--c-mist) 0%, var(--c-bg-warm) 100%);
border-top: 1px solid var(--c-line);
padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5vw, 60px);
}
.v3-scope .awards-strip__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 28px);
text-align: center;
}
.v3-scope .awards-strip__label {
font-family: var(--ff-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-royal);
display: inline-flex;
align-items: center;
gap: 14px;
}
.v3-scope .awards-strip__label::before, .v3-scope .awards-strip__label::after {
content: '';
display: inline-block;
width: 36px;
height: 1px;
background: var(--c-royal);
opacity: 0.3;
}
.v3-scope .awards-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2.2vw, 24px);
width: 100%;
max-width: 920px;
align-items: stretch;
}
.v3-scope .awards-strip__grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
.v3-scope .awards-strip__year {
display: block;
font-family: var(--ff-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--c-ink-soft);
text-align: center;
margin-top: 8px;
}
.v3-scope .awards-strip__chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid rgba(0, 83, 155, 0.08);
border-radius: 14px;
padding: 18px 20px;
min-height: 120px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 2px 10px rgba(10, 30, 80, 0.05),
0 14px 30px -18px rgba(10, 30, 80, 0.10);
transition: transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
box-shadow 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.v3-scope .awards-strip__chip:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 4px 14px rgba(10, 30, 80, 0.08),
0 24px 40px -20px rgba(10, 30, 80, 0.18);
}
.v3-scope .awards-strip__logo {
display: block;
max-height: 82px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.78;
transition: filter 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
opacity 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.v3-scope .awards-strip__chip:hover .awards-strip__logo { filter: grayscale(0); opacity: 1; }
@media (max-width: 880px) {
.v3-scope .awards-strip__grid { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
.v3-scope .awards-strip__chip { min-height: 108px; padding: 14px 16px; }
.v3-scope .awards-strip__logo { max-height: 72px; }
}
/* Founder monogram cards (no real founder photos available) */
.v3-scope .founder-monogram {
aspect-ratio: 3 / 4;
border-radius: var(--radius);
background: linear-gradient(155deg, var(--c-royal) 0%, var(--c-royal-hover) 100%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px;
color: #fff;
padding: 24px;
text-align: center;
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
.v3-scope .founder-monogram.is-magenta {
background: linear-gradient(155deg, var(--c-magenta) 0%, var(--c-magenta-deep) 100%);
}
.v3-scope .founder-monogram__initials {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(48px, 7vw, 72px);
line-height: 1;
letter-spacing: 0.02em;
font-style: italic;
}
.v3-scope .founder-monogram__name {
font-family: var(--ff-body);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
opacity: 0.95;
}
/* ---------- 35. HEADER DENSITY FIX ---------- */
/* Hide the tel pill below 1500px (WhatsApp is the primary contact channel anyway). */
@media (max-width: 1500px) and (min-width: 1025px) {
.v3-scope .header__cta .pill:not(.is-whatsapp) { display: none; }
}
/* ---------- 36. CAROUSEL PLACEHOLDER COMPRESSION ---------- */
/* Visually quiet the parent-voices placeholder row until H-19 lands. */
.v3-scope .carousel.is-placeholder .card.is-voice {
background: transparent;
border: 1px dashed var(--c-line);
box-shadow: none;
}
.v3-scope .carousel.is-placeholder .card.is-voice .quote {
color: var(--c-ink-soft);
font-style: italic;
}
/* ---------- 37. SKIP-TO-MAIN-CONTENT (accessibility staple) ---------- */
.v3-scope .skip-link {
position: absolute;
top: -100px;
left: 12px;
z-index: 200;
background: var(--c-magenta);
color: #fff;
padding: 10px 18px;
border-radius: 6px;
font-family: var(--ff-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: top var(--t-fast);
}
.v3-scope .skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
/* ---------- 38. FOCUS POLISH (tightened :focus-visible) ---------- */
.v3-scope *:focus { outline: none; }
.v3-scope *:focus-visible {
outline: 3px solid var(--c-royal);
outline-offset: 3px;
border-radius: 4px;
}
.v3-scope .button:focus-visible, .v3-scope .pill:focus-visible {
outline-offset: 4px;
}
/* ---------- 39. PRINT STYLESHEET ---------- */
@media print {
.v3-scope .header, .v3-scope .mobile-menu, .v3-scope .sticky-cta, .v3-scope .proto-banner, .v3-scope .awards-strip, .v3-scope .skip-link, .v3-scope .page-nav, .v3-scope .nav-toggle, .v3-scope .footer__socials {
display: none !important;
}
.v3-scope { background: #fff; color: #000; }
.v3-scope a { color: #000; text-decoration: underline; }
.v3-scope a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
.v3-scope .section { padding-block: 24pt; break-inside: avoid; }
.v3-scope .frame img { max-width: 100%; height: auto; }
.v3-scope h1, .v3-scope h2, .v3-scope h3 { break-after: avoid; }
.v3-scope .closing-cta, .v3-scope .section.bg-ink { background: #fff !important; color: #000 !important; }
.v3-scope .section.bg-ink h2, .v3-scope .section.bg-ink p { color: #000 !important; }
}
/* ---------- 40. CAROUSEL KEYBOARD-FOCUS POLISH ---------- */
.v3-scope .carousel:focus { outline: none; }
.v3-scope .carousel:focus-visible { outline: 3px solid var(--c-royal); outline-offset: 4px; border-radius: 8px; }
/* ---------- 41. 320PX (iPhone SE 1st-gen) PERFECTION PASS ---------- */
/* Ensures every page passes the no-overflow check down to 320px viewport width. */
@media (max-width: 360px) {
:root { --side-padding: 14px; }
/* Carousel cards: shrink min-width on very small screens so the body never overflows. */
.v3-scope .card.is-voice { min-width: min(280px, calc(100vw - 40px)); padding: 22px; }
.v3-scope .card.is-voice .quote { font-size: 18px; }
/* Proof bar: collapse 2-col to 1-col below 360px so each KPI breathes. */
.v3-scope .proof-bar { grid-template-columns: 1fr 1fr; gap: 12px; }
.v3-scope .proof-bar__num { font-size: 28px; }
.v3-scope .proof-bar__label { font-size: 11px; }
/* WhatsApp tile + visit form: tighter padding so they fit. */
.v3-scope .whatsapp-tile { padding: 18px; gap: 12px; }
.v3-scope .visit-form-card { padding: 22px; }
/* Trust strip stacks vertically with hairlines. */
.v3-scope .trust-strip__inner { flex-direction: column; gap: 18px; }
.v3-scope .trust-strip__item:not(:last-child)::after { display: none; }
/* Section padding tighter. */
.v3-scope .section { padding-block: clamp(36px, 7vw, 56px); }
.v3-scope .section.is-lg { padding-block: clamp(48px, 9vw, 72px); }
/* Hero h1 fits. */
.v3-scope .hero__h1 { font-size: clamp(36px, 12vw, 48px); }
/* Page-hero h1 fits. */
.v3-scope .page-hero h1 { font-size: clamp(32px, 11vw, 44px); }
/* Awards strip: stack badges vertically so they don't overflow. */
.v3-scope .awards-strip__inner { flex-direction: column; gap: 8px; }
.v3-scope .awards-strip__badge { font-size: 11px; padding: 6px 10px; min-height: 36px; }
}
/* ---------- 42. SMALL-SCREEN BUTTON-WRAP PROTECTION ---------- */
@media (max-width: 430px) {
/* Long on-dark secondary buttons (closing-CTA "Get the fee & centre guide…") must wrap, not overflow. */
.v3-scope .button.is-on-dark.is-secondary, .v3-scope .button.is-secondary {
max-width: 100%;
white-space: normal;
padding-inline: 18px;
line-height: 1.3;
}
.v3-scope .button.is-lg { font-size: 15px; padding: 14px 20px; min-height: 52px; }
/* Carousel: keep its visible area within the viewport even if children scroll horizontally. */
.v3-scope .carousel { max-width: 100%; }
}
/* ============================================================
31. EDUCATION-LED COMPONENT PORTS
Ported from JM - Josiah Montessori/website/assets/css/
(components.css + enhance.css), rewritten for v2 token names.
Per design doc §4.3.
============================================================ */
/* === 31.1 Scroll progress bar (split royal + magenta) — signature === */
.v3-scope .scroll-progress {
position: fixed; top: 0; left: 0; height: 2px; width: 0%;
z-index: 100; pointer-events: none;
background: linear-gradient(90deg, var(--c-royal) 0%, var(--c-royal) 50%, var(--c-magenta) 50%, var(--c-magenta) 100%);
background-size: 200% 100%; background-position: 0 0;
transition: width 80ms linear;
box-shadow: 0 0 12px rgba(171, 3, 92, 0.25);
}
@media (prefers-reduced-motion: reduce) { .v3-scope .scroll-progress { transition: none; } }
/* === 31.2 Section divider — twin-pillar mark between hairline rules === */
.v3-scope .section-divider--staff {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 36px);
margin: clamp(56px, 7vw, 88px) 0;
pointer-events: none;
}
.v3-scope .section-divider--staff::before, .v3-scope .section-divider--staff::after {
content: '';
flex: 1;
height: 1px;
background: var(--c-line);
}
.v3-scope .section-divider--staff > i { display: none; }
.v3-scope .section-divider--staff > b {
display: block;
width: 18px;
height: 50px;
flex-shrink: 0;
background: url('../assets/svg/twin-pillar.svg') center / contain no-repeat;
opacity: 0.55;
transition: opacity var(--t-base);
}
.v3-scope .section-divider--staff:hover > b { opacity: 0.8; }
/* === 31.3 Dark ink section (closing CTA, magenta moments) === */
.v3-scope .section--ink {
background: var(--c-ink);
color: var(--c-cream);
}
.v3-scope .section--ink h1, .v3-scope .section--ink h2, .v3-scope .section--ink h3, .v3-scope .section--ink h4 { color: var(--c-cream); }
.v3-scope .section--ink a:not(.button) { color: var(--c-magenta-soft); }
.v3-scope .section--ink a:not(.button):hover { color: var(--c-cream); }
.v3-scope .section--ink .section-divider--staff, .v3-scope .section--ink .section-divider--staff::before, .v3-scope .section--ink .section-divider--staff::after, .v3-scope .section--ink .section-divider--staff > i { background: rgba(248,236,221,0.35); }
.v3-scope .section--ink .section-divider--staff > b { background: var(--c-magenta-soft); box-shadow: 0 0 0 2px var(--c-ink); }
/* === 31.4 Editorial page hero (7/5 grid at large) === */
/* NOTE: v2 already defines .page-hero in §8; the rules below are additive
for the page-hero__inner 7/5 grid + meta variants used on inner pages. */
.v3-scope .page-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: end; }
@media (min-width: 1024px) { .v3-scope .page-hero__inner { grid-template-columns: 7fr 5fr; gap: var(--sp-7); } }
.v3-scope .page-hero__copy h1 { margin-bottom: var(--sp-5); }
.v3-scope .page-hero__sub { font-size: var(--fs-lede); line-height: 1.5; color: var(--c-ink); max-width: 50ch; font-weight: 400; }
.v3-scope .page-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
.v3-scope .page-hero__meta strong { color: var(--c-ink); font-weight: 600; }
/* === 31.5 Asymmetric photo mosaic === */
.v3-scope .mosaic { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 768px) {
.v3-scope .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: var(--sp-4); }
.v3-scope .mosaic > *:nth-child(1) { grid-column: span 4; grid-row: span 3; }
.v3-scope .mosaic > *:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.v3-scope .mosaic > *:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.v3-scope .mosaic > *:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.v3-scope .mosaic > *:nth-child(5) { grid-column: span 3; grid-row: span 2; }
}
.v3-scope .mosaic > * { overflow: hidden; border-radius: var(--radius); position: relative; }
.v3-scope .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.v3-scope .mosaic > *:hover img { transform: scale(1.04); }
.v3-scope .mosaic figure { overflow: hidden; position: relative; margin: 0; }
.v3-scope .mosaic figure img { transition: transform 720ms var(--ease), filter 320ms var(--ease); filter: saturate(1.04); }
.v3-scope .mosaic figure:hover img { transform: scale(1.04); filter: saturate(1.12); }
/* === 31.6 Frame variants (additive — v2 already has .frame in §10) === */
.v3-scope .frame--inset { padding: var(--sp-3); background: #FFFFFF; box-shadow: var(--shadow-1); }
/* === 31.7 Pull-quote, oversized === */
.v3-scope .quote-block { padding-block: var(--sp-9); }
.v3-scope .quote-block__mark { font-family: var(--ff-display); font-size: clamp(4rem, 8vw, 7rem); line-height: 0.7; color: var(--c-magenta); font-weight: 800; display: block; margin-bottom: var(--sp-2); }
.v3-scope .quote-block__body { font-family: var(--ff-display); font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--c-ink); font-weight: 500; max-width: 40ch; }
.v3-scope .quote-block__attr { margin-top: var(--sp-6); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.v3-scope .section--ink .quote-block__body { color: var(--c-cream); }
.v3-scope .section--ink .quote-block__attr { color: rgba(248,236,221,0.78); }
/* === 31.8 Big number callout === */
.v3-scope .bignum { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); align-items: baseline; }
@media (min-width: 768px) { .v3-scope .bignum { grid-template-columns: auto 1fr; gap: var(--sp-7); } }
.v3-scope .bignum__num { font-family: var(--ff-display); font-size: clamp(4rem, 10vw, 8rem); line-height: 0.85; font-weight: 800; letter-spacing: -0.05em; color: var(--c-magenta); }
.v3-scope .bignum__num--royal { color: var(--c-royal); }
.v3-scope .bignum__num--ink { color: var(--c-ink); }
.v3-scope .bignum__num--cream { color: var(--c-cream); }
.v3-scope .bignum__body { max-width: 50ch; padding-top: var(--sp-4); }
.v3-scope .bignum__body h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.v3-scope .bignum__body p { color: var(--c-ink-soft); }
.v3-scope .section--ink .bignum__body p { color: rgba(248,236,221,0.85); }
/* === 31.9 Big-number list (counter-style) === */
/* Legacy bignum-list — kept as a thin fallback for any older content */
.v3-scope .bignum-list { list-style: none; counter-reset: bn; padding: 0; margin: 0; display: grid; gap: var(--sp-7); }
.v3-scope .bignum-list li { counter-increment: bn; display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-6); align-items: baseline; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-line); }
.v3-scope .bignum-list li::before { content: counter(bn, decimal-leading-zero); font-family: var(--ff-display); font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--c-magenta); letter-spacing: -0.04em; }
.v3-scope .bignum-list h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--sp-2); }
.v3-scope .bignum-list p { font-size: 0.9375rem; color: var(--c-ink-soft); line-height: 1.55; }
/* ---- Method §04 "The standard" — Editorial Manifesto ---- */
.v3-scope .commitments {
list-style: none;
padding: 0;
margin: clamp(48px, 6vw, 80px) 0 0;
display: flex;
flex-direction: column;
border-top: 1px solid rgba(26, 26, 26, 0.16);
}
.v3-scope .commitment-row {
display: grid;
grid-template-columns: minmax(120px, 0.18fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 80px);
align-items: start;
padding-block: clamp(32px, 4.5vw, 56px);
border-bottom: 1px solid rgba(26, 26, 26, 0.16);
position: relative;
}
.v3-scope .commitment-row__num {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(36px, 4.2vw, 56px);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--c-magenta);
opacity: 0.9;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
display: block;
padding-top: 8px;
}
.v3-scope .commitment-row__body { max-width: 62ch; min-width: 0; }
.v3-scope .commitment-row__body h3 {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(20px, 2.1vw, 28px);
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--c-ink);
text-wrap: balance;
margin-bottom: clamp(10px, 1vw, 14px);
}
.v3-scope .commitment-row__body p {
font-size: var(--fs-body);
line-height: 1.7;
color: var(--c-ink-soft);
text-wrap: pretty;
}
.v3-scope .commitments__footer {
margin-top: clamp(32px, 4vw, 48px);
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
color: var(--c-ink-soft);
letter-spacing: 0.01em;
}
.v3-scope .commitments__footer .arrow-link { font-weight: 600; }
@media (max-width: 720px) {
.v3-scope .commitment-row { grid-template-columns: 1fr; gap: 12px; padding-block: clamp(28px, 6vw, 36px); }
.v3-scope .commitment-row__num { font-size: 44px; padding-top: 0; }
.v3-scope .commitments__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* === 31.10 Comparison table (us vs them) — v2 has §15 but this is the editorial version === */
.v3-scope .compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--sp-9); background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.v3-scope .compare th, .v3-scope .compare td { padding: var(--sp-5) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid rgba(26,26,26,0.08); font-size: 0.9375rem; line-height: 1.55; }
.v3-scope .compare thead th { font-family: var(--ff-body); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-ink-soft); padding-block: var(--sp-5); background: var(--c-bg-warm); border-bottom: 1px solid var(--c-line); }
.v3-scope .compare thead th:nth-child(2) { color: var(--c-magenta); position: relative; }
.v3-scope .compare thead th:nth-child(2)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-magenta); }
.v3-scope .compare tbody th { font-family: var(--ff-display); font-weight: 600; font-size: 1.0625rem; color: var(--c-ink); letter-spacing: -0.005em; min-width: 14ch; }
.v3-scope .compare tbody td:nth-child(2) { color: var(--c-ink); font-weight: 500; background: linear-gradient(180deg, var(--c-magenta-tint), var(--c-magenta-soft)); }
.v3-scope .compare tbody td:nth-child(3) { color: var(--c-ink-soft); }
.v3-scope .compare tbody tr:last-child th, .v3-scope .compare tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
.v3-scope .compare, .v3-scope .compare thead, .v3-scope .compare tbody, .v3-scope .compare tr, .v3-scope .compare th, .v3-scope .compare td { display: block; width: 100%; }
.v3-scope .compare thead { display: none; }
.v3-scope .compare tbody tr { padding: var(--sp-5) var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--c-line); }
.v3-scope .compare tbody tr:last-child { border-bottom: none; }
.v3-scope .compare tbody th { padding: 0 0 var(--sp-3); border-bottom: none; font-size: 1.125rem; }
.v3-scope .compare tbody td { padding: var(--sp-2) 0; border-bottom: none; background: none; }
.v3-scope .compare tbody td:nth-child(2) { background: none; }
.v3-scope .compare tbody td:nth-child(2)::before { content: 'Josiah · '; font-weight: 700; color: var(--c-magenta); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; display: block; margin-bottom: var(--sp-1); }
.v3-scope .compare tbody td:nth-child(3)::before { content: 'What to look for elsewhere · '; font-weight: 700; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; display: block; margin-bottom: var(--sp-1); }
}
/* Compare on dark ink */
.v3-scope .section--ink .compare {
background: transparent; border: 1px solid rgba(248,236,221,0.14); box-shadow: none;
}
.v3-scope .section--ink .compare th, .v3-scope .section--ink .compare td { border-bottom-color: rgba(248,236,221,0.14); font-size: 1rem; line-height: 1.6; }
.v3-scope .section--ink .compare thead th { color: rgba(248,236,221,0.55); font-size: 0.8125rem; padding-bottom: var(--sp-4); background: transparent; }
.v3-scope .section--ink .compare thead th:nth-child(2) { color: var(--c-magenta-soft); }
.v3-scope .section--ink .compare thead th:nth-child(3) { color: rgba(248,236,221,0.55); }
.v3-scope .section--ink .compare tbody th { color: var(--c-cream); font-size: 1.0625rem; padding-right: var(--sp-6); min-width: 11ch; }
.v3-scope .section--ink .compare tbody td:nth-child(2) { color: var(--c-ink); background: var(--c-magenta-soft); font-weight: 500; border-radius: 4px; }
.v3-scope .section--ink .compare tbody td:nth-child(3) { color: rgba(248,236,221,0.85); font-weight: 400; }
@media (max-width: 767px) {
.v3-scope .section--ink .compare, .v3-scope .section--ink .compare thead, .v3-scope .section--ink .compare tbody, .v3-scope .section--ink .compare tr, .v3-scope .section--ink .compare th, .v3-scope .section--ink .compare td { display: block; width: 100%; }
.v3-scope .section--ink .compare thead { display: none; }
.v3-scope .section--ink .compare tbody tr { padding: var(--sp-5) 0; border-bottom: 1px solid rgba(248,236,221,0.14); }
.v3-scope .section--ink .compare tbody tr:last-child { border-bottom: none; }
.v3-scope .section--ink .compare tbody th { padding: 0 0 var(--sp-3); border-bottom: none; }
.v3-scope .section--ink .compare tbody td { padding: var(--sp-3) 0; border-bottom: none; }
.v3-scope .section--ink .compare tbody td:nth-child(2)::before { content: 'Josiah · '; font-weight: 700; color: var(--c-magenta); }
.v3-scope .section--ink .compare tbody td:nth-child(3)::before { content: 'Look for · '; font-weight: 700; color: rgba(248,236,221,0.55); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }
}
/* === 31.11 Contact pill (header WhatsApp + tel) === */
.v3-scope .contact-pill {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: 0.8125rem; color: var(--c-ink-soft);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-pill);
border: 1px solid var(--c-line);
transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "kern" 1;
background: transparent;
white-space: nowrap;
flex-shrink: 0;
}
.v3-scope .contact-pill:hover { border-color: var(--c-magenta); color: var(--c-magenta); }
.v3-scope .contact-pill__dot {
width: 6px; height: 6px; border-radius: 50%;
background: #10B981; display: inline-block;
animation: contact-pulse 2.4s var(--ease) infinite;
}
@keyframes contact-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.15); }
}
.v3-scope .contact-pill--wa { color: #00824A; border-color: rgba(0,130,74,0.30); }
.v3-scope .contact-pill--wa:hover { color: #00824A; border-color: #00824A; background: rgba(0,130,74,0.06); }
.v3-scope .contact-pill--wa .contact-pill__dot { background: var(--c-whatsapp); animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .v3-scope .contact-pill__dot { animation: none; } }
/* === 31.12 Reduced motion + high-contrast fallbacks === */
@media (prefers-reduced-motion: reduce) {
.v3-scope .mosaic img, .v3-scope .mosaic figure img, .v3-scope .frame img { transition: none; }
.v3-scope .mosaic > *:hover img, .v3-scope .mosaic figure:hover img, .v3-scope .frame:hover img { transform: none; filter: none; }
}
@media (prefers-contrast: more) {
.v3-scope .section--ink, .v3-scope .section--magenta { background: #000 !important; color: #FFF !important; }
}
/* === 31.13 Gate marker (visibly flag pending H-# items) === */
.v3-scope .gate {
display: inline-block;
padding: 2px 8px;
margin: 2px 0;
background: var(--c-magenta-tint);
border: 1px dashed var(--c-magenta);
color: var(--c-magenta-deep);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 4px;
font-family: var(--ff-body);
}
.v3-scope .gate--block {
display: block;
padding: var(--sp-4) var(--sp-5);
margin: var(--sp-4) 0;
background: var(--c-magenta-tint);
border-left: 4px solid var(--c-magenta);
border-radius: 4px;
font-size: 0.875rem;
}
/* ============================================================
32. POST-CODEX FIXES (Home review 2026-05-25)
============================================================ */
/* Provisional schedule wrapper (H-14 hard-gate) */
.v3-scope .day-grid-wrap {
margin: var(--sp-5) 0;
border: 1px dashed var(--c-magenta);
border-radius: 4px;
background: var(--c-magenta-tint);
padding: var(--sp-3) var(--sp-5);
}
.v3-scope .day-grid-summary {
cursor: pointer;
font-family: var(--ff-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--c-magenta-deep);
padding: var(--sp-2) 0;
}
.v3-scope .day-grid-summary:hover { color: var(--c-magenta); }
.v3-scope .day-grid-wrap[open] .day-grid-summary { margin-bottom: var(--sp-3); }
.v3-scope .day-grid-wrap[open] .day-grid { padding: var(--sp-3); background: var(--c-bg-warm); border-radius: 4px; }
/* Footer heading override (h4 → h3 retained styling) */
.v3-scope .footer__heading {
font-family: var(--ff-display);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: var(--sp-4);
color: var(--c-cream);
}
/* ===================================================================
CURRICULUM PAGE — STAGE CHAPTER MARKS
Editorial per-stage wayfinding for parents. Each stage section
opens with a colored top rule, a large Fraunces numeral, and an
uppercase tag of stage name + age band — all in that stage's
accent color. Sections themselves stay white; the accent does
the differentiation. Accent propagates to nav pill dots and
inner accent borders (twin-pair stripes, K1 substrate).
=================================================================== */
:root {
--c-step-infant: var(--c-royal); /* 01 — deep blue */
--c-step-toddler: var(--c-magenta); /* 02 — raspberry */
--c-step-nursery: var(--c-blue-mid); /* 03 — mid blue (PDF p.87 "Nursery — Blue") */
--c-step-kinder: #00264C; /* 04 — ink navy */
}
.v3-scope .stage-rule {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 14px;
padding-top: 10px;
border-top: 2px solid var(--stage-accent, var(--c-ink));
margin-bottom: clamp(18px, 2.2vw, 26px);
max-width: max-content;
}
.v3-scope .stage-rule__num {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: 22px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--stage-accent, var(--c-ink));
font-variation-settings: 'opsz' 36, 'SOFT' 50, 'WONK' 0;
display: inline-block;
}
.v3-scope .stage-rule__tag {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
min-width: 0;
}
.v3-scope .stage-rule__tag-label {
font-family: var(--ff-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--stage-accent, var(--c-ink));
line-height: 1;
}
.v3-scope .stage-rule__tag-age {
font-family: var(--ff-body);
font-size: 11px;
font-weight: 500;
color: var(--c-ink-soft);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
/* Per-stage accent propagation */
.v3-scope .is-stage-infant { --stage-accent: var(--c-step-infant); }
.v3-scope .is-stage-toddler { --stage-accent: var(--c-step-toddler); }
.v3-scope .is-stage-nursery { --stage-accent: var(--c-step-nursery); }
.v3-scope .is-stage-kinder { --stage-accent: var(--c-step-kinder); }
/* Page-nav pill — colored dot for stage pills */
.v3-scope .page-nav__pill.is-stage-infant, .v3-scope .page-nav__pill.is-stage-toddler, .v3-scope .page-nav__pill.is-stage-nursery, .v3-scope .page-nav__pill.is-stage-kinder { padding-left: 12px; }
.v3-scope .page-nav__pill.is-stage-infant::before, .v3-scope .page-nav__pill.is-stage-toddler::before, .v3-scope .page-nav__pill.is-stage-nursery::before, .v3-scope .page-nav__pill.is-stage-kinder::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--stage-accent);
margin-right: 10px;
display: inline-block;
flex-shrink: 0;
}
.v3-scope .page-nav__pill.is-stage-infant:hover::before, .v3-scope .page-nav__pill.is-stage-toddler:hover::before, .v3-scope .page-nav__pill.is-stage-nursery:hover::before, .v3-scope .page-nav__pill.is-stage-kinder:hover::before { background: #fff; }
/* ===================================================================
STAGE SECTION TYPOGRAPHY REBUILD
Resets a coherent Fraunces optical scale across every stage section
so the inline Fraunces-700 chunkiness ("Both methods at full
intensity", "What we expect by the end of toddler", "The infant
day in five activities", etc.) reads refined rather than heavy.
Applies via the .is-stage-* modifiers on the section.
=================================================================== */
.v3-scope .is-stage-infant h2, .v3-scope .is-stage-infant h3, .v3-scope .is-stage-infant h4, .v3-scope .is-stage-toddler h2, .v3-scope .is-stage-toddler h3, .v3-scope .is-stage-toddler h4, .v3-scope .is-stage-nursery h2, .v3-scope .is-stage-nursery h3, .v3-scope .is-stage-nursery h4, .v3-scope .is-stage-kinder h2, .v3-scope .is-stage-kinder h3, .v3-scope .is-stage-kinder h4 {
font-family: var(--ff-display);
color: var(--c-ink);
text-wrap: balance;
}
.v3-scope .is-stage-infant .section-opener h2, .v3-scope .is-stage-toddler .section-opener h2, .v3-scope .is-stage-nursery .section-opener h2, .v3-scope .is-stage-kinder .section-opener h2, .v3-scope .is-stage-infant h2.h2, .v3-scope .is-stage-toddler h2.h2, .v3-scope .is-stage-nursery h2.h2, .v3-scope .is-stage-kinder h2.h2 {
font-weight: 600;
font-size: clamp(32px, 4.4vw, 50px);
line-height: 1.06;
letter-spacing: -0.022em;
font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 0;
}
.v3-scope .is-stage-infant h3, .v3-scope .is-stage-toddler h3, .v3-scope .is-stage-nursery h3, .v3-scope .is-stage-kinder h3 {
font-weight: 600;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.18;
letter-spacing: -0.014em;
font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 0;
}
.v3-scope .is-stage-infant h4, .v3-scope .is-stage-toddler h4, .v3-scope .is-stage-nursery h4, .v3-scope .is-stage-kinder h4 {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.004em;
font-variation-settings: 'opsz' 24, 'SOFT' 30, 'WONK' 0;
}
/* K1 outcome substrate — editorial pull-card in kindergarten accent */
.v3-scope #nursery-kinder .substrate {
background: #FAF7F2;
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-step-kinder);
padding: clamp(28px, 4vw, 48px);
border-radius: var(--radius);
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 3vw, 36px);
align-items: center;
}
.v3-scope #nursery-kinder .substrate__num {
font-family: var(--ff-display);
font-weight: 600;
font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
font-size: clamp(72px, 9vw, 120px);
color: var(--c-step-kinder);
line-height: 0.82;
letter-spacing: -0.05em;
display: block;
background: transparent;
width: auto; height: auto;
padding: 0;
}
.v3-scope #nursery-kinder .substrate .eyebrow, .v3-scope #nursery-kinder .substrate .eyebrow.is-royal { color: var(--c-step-kinder); }
.v3-scope #nursery-kinder .substrate h3 {
font-weight: 600;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.12;
letter-spacing: -0.016em;
font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
color: var(--c-ink);
}
@media (max-width: 640px) {
.v3-scope #nursery-kinder .substrate { grid-template-columns: 1fr; gap: 16px; }
}
/* ===================================================================
ABOUT > WHAT WE PROMISE PARENTS
Stacked numbered promise list with horizontal dividers,
followed by a 3-column "Prepared in the Josiah Way" detail block.
=================================================================== */
.v3-scope .promise-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.v3-scope .promise-list__item {
display: grid;
grid-template-columns: clamp(60px, 7vw, 96px) 1fr;
column-gap: clamp(24px, 3.5vw, 56px);
align-items: start;
padding: clamp(26px, 3.2vw, 40px) 0;
border-top: 1px solid var(--c-line);
}
.v3-scope .promise-list__item:first-child { border-top: none; padding-top: clamp(4px, 1vw, 12px); }
.v3-scope .promise-list__item:last-child { border-bottom: 1px solid var(--c-line); }
.v3-scope .promise-list__num {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(36px, 4.4vw, 56px);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--c-magenta);
font-variation-settings: 'opsz' 96, 'SOFT' 30;
font-feature-settings: 'ss01' on;
display: inline-block;
}
.v3-scope .promise-list__heading {
font-family: var(--ff-body);
font-weight: 700;
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.3;
color: var(--c-ink);
margin: 0 0 8px;
letter-spacing: -0.004em;
}
.v3-scope .promise-list__body p {
font-size: 15px;
line-height: 1.55;
color: var(--c-ink-soft);
max-width: 60ch;
margin: 0;
}
.v3-scope .promise-detail {
margin-top: clamp(40px, 5vw, 64px);
}
.v3-scope .promise-detail__heading {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.2;
letter-spacing: -0.014em;
color: var(--c-ink);
margin: 0 0 clamp(22px, 2.4vw, 32px);
font-variation-settings: 'opsz' 72, 'SOFT' 30;
}
.v3-scope .promise-detail__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 48px);
}
.v3-scope .promise-detail__col p {
font-size: 15px;
line-height: 1.55;
color: var(--c-ink);
margin: 8px 0 0;
}
.v3-scope .promise-detail__label {
font-family: var(--ff-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-ink-soft);
display: block;
}
@media (max-width: 720px) {
.v3-scope .promise-list__item { grid-template-columns: auto 1fr; column-gap: 16px; }
.v3-scope .promise-list__num { font-size: 32px; }
.v3-scope .promise-detail__grid { grid-template-columns: 1fr; }
}
/* ===================================================================
KNOWN SIGNAL LIST — DEFINITION VARIANT
3-column grid (checkmark · term · body) so bold terms keep their
own column and only the body wraps. Used on Curriculum > Montessori
at full scope and similar areas where each line is a labelled fact.
=================================================================== */
.v3-scope .known__signal-list.is-defs {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.v3-scope .known__signal-list.is-defs li {
display: grid;
grid-template-columns: 16px clamp(96px, 10vw, 132px) 1fr;
column-gap: 14px;
row-gap: 4px;
align-items: start;
font-size: 15px;
color: var(--c-ink);
}
.v3-scope .known__signal-list.is-defs li::before {
margin-top: 3px;
align-self: start;
}
.v3-scope .known__signal-list.is-defs .term {
font-family: var(--ff-body);
font-weight: 700;
color: var(--c-ink);
line-height: 1.45;
letter-spacing: -0.002em;
white-space: normal;
}
.v3-scope .known__signal-list.is-defs .def {
color: var(--c-ink-soft);
line-height: 1.55;
}
.v3-scope .known__signal-list.is-defs .def .cn { font-family: var(--ff-cn); }
@media (max-width: 640px) {
.v3-scope .known__signal-list.is-defs li {
grid-template-columns: 18px 1fr;
column-gap: 12px;
}
.v3-scope .known__signal-list.is-defs .term { grid-column: 2; }
.v3-scope .known__signal-list.is-defs .def { grid-column: 2; }
}
/* ============================================================
43. DESIGN POLISH LAYER (2026-05-26)
Editorial typography, ornament marks, paper-grain backdrop,
refined section openers, calm reveal motion.
Additive only — does not alter prior tokens or block layouts.
============================================================ */
/* 43.1 Fraunces optical polish ------------------------------------ */
.v3-scope h1, .v3-scope h2, .v3-scope .h1-display, .v3-scope .h2 {
font-feature-settings: 'ss01' 1, 'ss02' 1, 'calt' 1, 'dlig' 1, 'kern' 1;
font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
}
.v3-scope h3, .v3-scope .h3 { font-feature-settings: 'kern' 1, 'calt' 1; letter-spacing: -0.005em; }
.v3-scope .display-mark {
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--c-magenta);
text-decoration: none;
}
.v3-scope .hero__h1 .display-mark {
background: linear-gradient(180deg, var(--c-magenta) 0%, var(--c-magenta-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Smart-quote treatment for the lede after a verse line */
.v3-scope .lede:first-letter { font-feature-settings: 'kern' 1; }
/* Body rhythm — pretty wrap site-wide on paragraphs and ledes */
.v3-scope p, .v3-scope .lede { text-wrap: pretty; }
/* 43.2 Eyebrow with leading rule (editorial sectioning) ---------- */
.v3-scope .eyebrow.is-lead {
display: inline-flex;
align-items: center;
gap: 12px;
}
.v3-scope .eyebrow.is-lead::before {
content: '';
display: inline-block;
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.v3-scope .eyebrow.is-lead.is-royal::before { background: var(--c-royal); opacity: 0.7; }
.v3-scope .eyebrow.is-lead.is-magenta::before { background: var(--c-magenta); opacity: 0.7; }
/* 43.3 Section opener v2 — editorial numeral + hairline + mark ---- */
/* Editorial numeral variant. Wraps the number with a Fraunces italic
figure and a left hairline that descends past the eyebrow. */
.v3-scope .section-opener.is-editorial { display: grid; grid-template-columns: minmax(80px, 8vw) 1fr; gap: clamp(20px, 3vw, 40px); margin-bottom: var(--sp-7); align-items: start; }
.v3-scope .section-opener.is-editorial .section-opener__index {
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
padding-top: 8px; position: relative;
}
.v3-scope .section-opener.is-editorial .section-opener__figure {
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
color: var(--c-magenta);
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
font-feature-settings: 'lnum' 1, 'ss01' 1;
}
.v3-scope .section-opener.is-editorial .section-opener__rule {
width: 1px; flex: 1; min-height: 60px;
background: linear-gradient(180deg, var(--c-magenta) 0%, transparent 100%);
opacity: 0.45;
}
.v3-scope .section-opener.is-editorial .section-opener__caption {
font-family: var(--ff-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-ink-soft);
writing-mode: vertical-rl;
transform: rotate(180deg);
margin-top: 8px;
}
.v3-scope .section-opener.is-editorial .section-opener__body { min-width: 0; padding-top: 8px; }
.v3-scope .section-opener.is-editorial .section-opener__body .eyebrow { margin-bottom: var(--sp-4); }
.v3-scope .section-opener.is-editorial .section-opener__body .h2 { margin-top: 0; }
@media (max-width: 760px) {
.v3-scope .section-opener.is-editorial { grid-template-columns: 56px 1fr; gap: 20px; }
.v3-scope .section-opener.is-editorial .section-opener__figure { font-size: 38px; }
.v3-scope .section-opener.is-editorial .section-opener__caption { display: none; }
}
/* 43.4 Paper-grain backdrop (one quiet texture for warm sections) - */
.v3-scope .section.bg-mist, .v3-scope .section.bg-cream, .v3-scope .section.bg-default {
position: relative;
}
.v3-scope .section.bg-mist::before, .v3-scope .section.bg-cream::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
mix-blend-mode: multiply;
opacity: 0.45;
z-index: 0;
}
.v3-scope .section.bg-mist > *, .v3-scope .section.bg-cream > * { position: relative; z-index: 1; }
/* 43.5 Ornament marks (inline SVG via background) ---------------- */
.v3-scope .ornament {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.v3-scope .ornament--twofold {
width: 22px; height: 44px;
background-image: url("data:image/svg+xml;utf8,");
}
.v3-scope .ornament--rosette {
width: 28px; height: 28px;
background-image: url("data:image/svg+xml;utf8,");
}
.v3-scope .ornament--staff {
width: 64px; height: 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.v3-scope .ornament--diamond {
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Section-mark anchor (sits beside section-opener) */
.v3-scope .section-mark {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: var(--sp-4);
font-family: var(--ff-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-ink-soft);
}
.v3-scope .section-mark .ornament { flex-shrink: 0; }
.v3-scope .section--ink .section-mark { color: rgba(248,236,221,0.75); }
.v3-scope .section--ink .ornament--twofold { background-image: url("data:image/svg+xml;utf8,"); }
/* 43.6 Trust strip — minimal, symmetrical */
.v3-scope .trust-strip {
background: var(--c-royal);
}
.v3-scope .trust-strip__num {
font-family: var(--ff-display);
font-style: normal;
font-weight: 500;
font-variation-settings: 'opsz' 48;
font-size: clamp(44px, 4.4vw, 56px);
letter-spacing: -0.01em;
color: var(--c-cream);
}
.v3-scope .trust-strip__label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(248, 236, 221, 0.78);
}
.v3-scope .trust-strip__item:not(:last-child)::after { display: none; }
/* 43.7 Testimonial card — editorial quote treatment ---------------- */
.v3-scope .card.is-voice {
position: relative;
padding-top: 56px;
background:
linear-gradient(180deg, rgba(252,231,238,0.35) 0%, transparent 60%),
var(--c-bg-warm);
border: 1px solid rgba(171, 3, 92, 0.10);
}
.v3-scope .card.is-voice::before {
content: '\201C';
position: absolute;
top: 4px; left: 24px;
font-family: var(--ff-display);
font-style: italic;
font-weight: 700;
font-size: 88px;
line-height: 1;
color: var(--c-magenta);
opacity: 0.22;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.v3-scope .card.is-voice .quote::before { content: none; }
.v3-scope .card.is-voice .quote {
font-family: var(--ff-display);
font-weight: 600;
font-size: 20px;
line-height: 1.4;
color: var(--c-ink);
letter-spacing: -0.012em;
text-wrap: pretty;
}
.v3-scope .card.is-voice .quote::after {
content: '';
display: block;
width: 32px; height: 1px;
background: var(--c-magenta);
margin-top: 18px;
opacity: 0.55;
}
.v3-scope .card.is-voice .attrib__avatar {
background: linear-gradient(155deg, var(--c-magenta-soft) 0%, var(--c-cream) 100%);
box-shadow: inset 0 0 0 1px rgba(171,3,92,0.18);
}
/* 43.8 Hero polish — soft ambient lighting under the hero pair ----- */
.v3-scope .hero {
background:
radial-gradient(ellipse at 50% 0%, rgba(252,231,238,0.55), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(229,234,244,0.50), transparent 55%),
var(--c-bg-warm);
}
.v3-scope .hero-pair > figure::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.10) 100%);
pointer-events: none;
}
.v3-scope .hero-pair__label {
box-shadow: 0 8px 24px -10px rgba(26,26,26,0.25);
}
/* 43.9 Commitments — make the numerals heroic + tinted ------------- */
.v3-scope .commitment {
position: relative;
background:
linear-gradient(180deg, #fff 0%, var(--c-bg-warm) 100%);
}
.v3-scope .commitment::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--c-royal) 0%, var(--c-magenta) 100%);
opacity: 0;
transition: opacity var(--t-base);
border-radius: var(--radius) var(--radius) 0 0;
}
.v3-scope .commitment:hover::before { opacity: 1; }
.v3-scope .commitment__num {
font-style: italic;
font-weight: 300;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
background: linear-gradient(160deg, var(--c-magenta) 0%, var(--c-royal) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 1;
}
/* 43.10 Twin-pair editorial accent --------------------------------- */
.v3-scope .twin-pair {
position: relative;
}
.v3-scope .twin-pair::before {
content: '';
position: absolute;
left: 50%; top: clamp(48px, 6vw, 80px); bottom: clamp(48px, 6vw, 80px);
width: 1px;
background: rgba(26,26,26,0.10);
transform: translateX(-0.5px);
pointer-events: none;
}
@media (max-width: 880px) { .v3-scope .twin-pair::before { display: none; } }
.v3-scope .twin-pair__col h3 {
font-feature-settings: 'ss01' 1, 'ss02' 1, 'calt' 1;
text-wrap: balance;
}
.v3-scope .twin-pair__col.is-monte ul li::before, .v3-scope .twin-pair__col.is-map ul li::before {
width: 14px; height: 2px;
border-radius: 2px;
}
/* 43.11 Day grid — scoreline accent on the time column ------------- */
.v3-scope .day-time {
position: relative;
font-style: italic;
font-feature-settings: 'lnum' 1;
font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
color: var(--c-magenta);
}
.v3-scope .day-time::after {
content: '';
position: absolute;
right: 0; top: 18%; bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--c-magenta) 50%, transparent 100%);
opacity: 0.6;
}
@media (max-width: 600px) { .v3-scope .day-time::after { display: none; } }
/* 43.12 Section divider — refined to use ornament-staff motif ------- */
.v3-scope .section-divider--staff > b {
width: 64px; height: 18px;
opacity: 0.75;
background-image: url("data:image/svg+xml;utf8,");
}
/* 43.13 Hero badges — softer with leading dot ---------------------- */
.v3-scope .hero-badge {
position: relative;
background: rgba(255,255,255,0.7);
-webkit-backdrop-filter: saturate(140%) blur(6px);
backdrop-filter: saturate(140%) blur(6px);
border-color: rgba(26,26,26,0.08);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 16px -10px rgba(26,26,26,0.15);
}
.v3-scope .hero-badge:first-child {
background: linear-gradient(135deg, var(--c-royal-soft) 0%, var(--c-magenta-soft) 100%);
border-color: transparent;
color: var(--c-ink);
}
/* 43.14 Awards strip — softer label, no double-hairline ------------ */
.v3-scope .awards-strip__label {
color: var(--c-magenta);
}
.v3-scope .awards-strip__label::before, .v3-scope .awards-strip__label::after { background: var(--c-magenta); }
/* 43.15 Built-passage — drop-cap on first paragraph ---------------- */
.v3-scope .built-passage .lede:first-of-type::first-letter {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: 4.5em;
line-height: 0.85;
float: left;
padding: 6px 14px 0 0;
color: var(--c-magenta);
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
/* 43.16 Calm reveal motion — fades in once visible ----------------- */
@keyframes jm-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.v3-scope .section-opener, .v3-scope .commitment, .v3-scope .stage-card, .v3-scope .twin-pair, .v3-scope .day-grid, .v3-scope .mosaic, .v3-scope .card.is-voice, .v3-scope .card.is-centre {
animation: jm-rise 0.7s var(--ease) both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}
@supports not (animation-timeline: view()) {
.v3-scope .section-opener, .v3-scope .commitment, .v3-scope .stage-card, .v3-scope .twin-pair, .v3-scope .day-grid, .v3-scope .mosaic, .v3-scope .card.is-voice, .v3-scope .card.is-centre {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.v3-scope .section-opener, .v3-scope .commitment, .v3-scope .stage-card, .v3-scope .twin-pair, .v3-scope .day-grid, .v3-scope .mosaic, .v3-scope .card.is-voice, .v3-scope .card.is-centre {
animation: none !important;
}
}
/* 43.17 Closing CTA refinements (section--ink) --------------------- */
.v3-scope .section--ink {
background:
radial-gradient(ellipse at 30% 0%, rgba(171,3,92,0.20), transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(0,83,155,0.18), transparent 55%),
var(--c-ink);
position: relative;
overflow: hidden;
}
.v3-scope .section--ink::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.6;
pointer-events: none;
}
.v3-scope .section--ink > * { position: relative; z-index: 1; }
.v3-scope .section--ink h2 .display-mark {
-webkit-text-fill-color: var(--c-magenta-soft);
background: none;
color: var(--c-magenta-soft);
}
/* 43.18 Mosaic figure — frosted overlay edge for cohesion ---------- */
.v3-scope .mosaic figure {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--c-mist);
}
.v3-scope .mosaic figure::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, transparent 60%, rgba(0,83,155,0.08) 100%);
pointer-events: none;
}
.v3-scope .mosaic figure img { transition: transform 1.2s var(--ease); }
.v3-scope .mosaic figure:hover img { transform: scale(1.04); }
/* 43.19 Page-hero figure caption — italic Fraunces sign-off -------- */
.v3-scope .frame__caption {
font-style: italic;
font-feature-settings: 'ss01' 1, 'calt' 1;
font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
color: var(--c-magenta);
display: inline-flex;
align-items: center;
gap: 10px;
}
.v3-scope .frame__caption::before {
content: '';
display: inline-block;
width: 18px; height: 1px;
background: var(--c-magenta);
opacity: 0.6;
}
/* 43.20 Centre cards — soft tonal hover ---------------------------- */
.v3-scope .card.is-centre {
background: linear-gradient(180deg, #fff 0%, var(--c-bg-warm) 100%);
border-color: rgba(0,83,155,0.10);
}
.v3-scope .card.is-centre:hover { border-color: rgba(171,3,92,0.25); }
.v3-scope .card.is-centre h3 { color: var(--c-ink); }
.v3-scope .card.is-centre .arrow-link { color: var(--c-magenta); font-weight: 600; }
/* 43.21 Closing CTA buttons get a softer glow on dark ------------- */
.v3-scope .button.is-on-dark.is-primary {
background: linear-gradient(180deg, var(--c-magenta) 0%, var(--c-magenta-deep) 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 10px 28px -10px rgba(171,3,92,0.65), inset 0 1px 0 rgba(255,255,255,0.18);
}
/* 43.22 Page-hero eyebrow — match section-mark feel ---------------- */
.v3-scope .page-hero__copy .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.v3-scope .page-hero__copy .eyebrow .twin-pillar-mark.is-sm { width: 10px; height: 24px; }
/* ============================================================
44. CONSISTENCY UTILITY LAYER (2026-05-26)
Replaces repeated inline styles from page templates so the
markup is portable to Webflow without per-element style props.
Additive only — does not alter prior tokens.
============================================================ */
/* 44.1 Eyebrow with inline twin-pillar mark — used on every page hero */
.v3-scope .eyebrow .twin-pillar-mark.is-sm {
vertical-align: middle;
margin-right: 8px;
}
/* 44.2 Trust strip — 4-column modifier (home + centres recap) */
.v3-scope .trust-strip__inner.is-4col, .v3-scope .trust-strip.is-4col .trust-strip__inner { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
.v3-scope .trust-strip__inner.is-4col, .v3-scope .trust-strip.is-4col .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
.v3-scope .trust-strip.is-4col .trust-strip__item:nth-child(5) { grid-column: auto; }
}
/* 44.3 Centre-card "photo on the way" note (used inside .card.is-centre) */
.v3-scope .centre-card__note {
font-size: 13px;
font-style: italic;
opacity: 0.6;
display: block;
margin-top: 4px;
color: var(--c-ink-soft);
}
/* 44.4 Centre meta-row (kpi-pill row on centres page) */
.v3-scope .centre-meta-row {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
font-size: 14px;
margin-top: var(--sp-5);
color: var(--c-ink);
}
.v3-scope .centre-meta-row strong { font-weight: 600; }
/* 44.5 Frame caption — gate variant (centres placeholder photos) */
.v3-scope .frame__caption.is-gate {
font-size: 13px;
padding: 8px 4px 0;
font-style: normal;
color: var(--c-ink-soft);
background: none;
}
/* Reset §43.19 italic Fraunces magenta affordance on gate variant */
.v3-scope .frame__caption.is-gate { font-variation-settings: normal; color: var(--c-ink-soft); }
.v3-scope .frame__caption.is-gate::before { display: none; }
/* 44.6 Closing CTA wrapper utilities (used on every page bottom) */
.v3-scope .closing-cta__lede { max-width: 56ch; margin-inline: auto; }
.v3-scope .closing-cta__actions { justify-content: center; }
/* 44.7 Awards strip note */
.v3-scope .awards-strip__note { margin-top: 8px; }
/* 44.8 Inline-gate span block variant (used in stat callouts) */
.v3-scope .gate.is-block { display: block; margin-top: 4px; }
/* 44.9 Form helper text + states (visit form validation hints) */
.v3-scope .form-help {
display: none;
color: var(--c-magenta-deep);
font-size: 13px;
}
.v3-scope .form-help.is-visible { display: inline-block; }
.v3-scope .form-errors {
display: none;
color: var(--c-magenta-deep);
font-weight: 500;
margin-bottom: 12px;
}
.v3-scope .form-errors.is-visible { display: block; }
.v3-scope .form-success {
display: none;
background: var(--c-magenta-soft);
color: var(--c-magenta-deep);
padding: 16px 20px;
border-radius: 8px;
font-weight: 500;
}
.v3-scope .form-success.is-visible { display: block; }
/* 44.10 Display H3 (Fraunces) — used where body H3 is too quiet */
.v3-scope .h3-display {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.2;
color: var(--c-ink);
letter-spacing: -0.014em;
font-feature-settings: 'ss01' 1, 'ss02' 1, 'calt' 1;
}
.v3-scope .h3-display.is-inline-mark {
display: flex;
align-items: center;
gap: 10px;
}
/* 44.11 Visit page — single testimonial spans full width */
.v3-scope .card.is-voice.is-full {
flex: 0 0 auto;
max-width: none;
min-width: 0;
width: 100%;
}
/* 44.12 Eyebrow as standalone block (404 page, gate captions) */
.v3-scope .eyebrow.is-block { display: block; margin-bottom: var(--sp-5); }
/* 44.13 Twin-pair editorial-light variant (curriculum toddler:
white background, accent left border instead of full tint) */
.v3-scope .twin-pair.is-light {
border: 1px solid var(--c-line);
border-radius: var(--radius);
overflow: hidden;
}
.v3-scope .twin-pair.is-light .twin-pair__col {
background: var(--c-bg-pure);
border-left: 3px solid transparent;
}
.v3-scope .twin-pair.is-light .twin-pair__col.is-monte {
border-left-color: var(--c-royal);
}
.v3-scope .twin-pair.is-light .twin-pair__col.is-map {
border-left-color: var(--c-magenta);
}
.v3-scope .twin-pair.is-light .twin-pair__col.is-monte .eyebrow { color: var(--c-royal); }
.v3-scope .twin-pair.is-light .twin-pair__col.is-map .eyebrow { color: var(--c-magenta); }
/* 44.14 Tertiary button (ghost link, used on 404) */
.v3-scope .button.is-tertiary {
background: transparent;
color: var(--c-ink-soft);
border: 1px dashed var(--c-line);
}
.v3-scope .button.is-tertiary:hover {
color: var(--c-ink);
border-color: var(--c-ink);
background: var(--c-bg-warm);
}
/* 44.15 Diagram frame surface (curriculum SVG diagrams) */
.v3-scope .frame.is-diagram {
background: var(--c-bg-warm);
border: 1px solid var(--c-line);
padding: 16px;
}
/* 44.16 Section-mark soft variant (ink sections — magenta-soft) */
.v3-scope .section--ink .section-mark.is-soft, .v3-scope .section-mark.is-soft {
color: var(--c-magenta-soft);
}
.v3-scope .section--ink .section-mark.is-centered, .v3-scope .section-mark.is-centered { justify-content: center; }
/* 44.17 Eyebrow on dark ink — soft variant */
.v3-scope .section--ink .eyebrow.is-soft, .v3-scope .eyebrow.is-soft { color: var(--c-magenta-soft); }
/* 44.18 Stage-table sub-label inside row header */
.v3-scope .stage-table tbody th .stage-table__sub {
font-weight: 400;
font-size: 13px;
display: block;
margin-top: 4px;
color: var(--c-ink-soft);
}
/* 44.19 Align utilities (grid + flex friendly) */
.v3-scope .align-start { align-items: flex-start; }
/* 44.20 Card variant — magenta outcome (curriculum) */
.v3-scope .card.is-outcome {
background: var(--c-bg-pure);
border-color: var(--c-line);
border-left: 3px solid var(--c-magenta);
}
.v3-scope .card.is-outcome.is-royal { border-left-color: var(--c-royal); }
/* 44.21 Ornament block placement */
.v3-scope .ornament.is-block {
display: block;
margin: 0 auto var(--sp-6);
}
/* 44.22 Gate — quiet variant (less alarmist than gate--block) */
.v3-scope .gate--quiet {
display: block;
padding: var(--sp-3) var(--sp-5);
margin: var(--sp-4) 0;
background: var(--c-bg-warm);
border: 1px dashed var(--c-line);
border-left: 3px solid var(--c-line-strong, var(--c-ink-soft));
border-radius: 4px;
font-size: 0.8125rem;
color: var(--c-ink-soft);
line-height: 1.55;
}
.v3-scope .gate--quiet strong { color: var(--c-ink); font-weight: 600; }
/* 44.23 Trust ribbon — quiet sitewide proof line under header */
.v3-scope .trust-ribbon {
background: var(--c-bg-warm);
border-bottom: 1px solid var(--c-line);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--c-ink-soft);
}
.v3-scope .trust-ribbon__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px clamp(12px, 2vw, 24px);
padding: 8px var(--side-padding);
text-align: center;
}
.v3-scope .trust-ribbon__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v3-scope .trust-ribbon__sep { color: var(--c-line-strong, rgba(26,26,26,0.25)); user-select: none; }
.v3-scope .trust-ribbon strong { color: var(--c-ink); font-weight: 600; }
@media (max-width: 600px) {
.v3-scope .trust-ribbon { font-size: 11px; }
.v3-scope .trust-ribbon__inner { padding: 6px var(--side-padding); }
}
/* 44.24 Diagram image — fills its .frame.is-diagram container preserving aspect ratio */
.v3-scope .frame.is-diagram > img, .v3-scope .img-diagram {
width: 100%;
height: 100%;
object-fit: contain;
}