/* ============================================================ LONDON SCHOOL — Design System FINAL Brand: #C1353D #7AC39E #F2D5C5 #2F5581 Fonts are loaded in each HTML via preconnect + , not @import — keeps them off the CSS render-blocking waterfall. ============================================================ */ :root { --red:#C1353D; --red-dark:#A42D34; --red-light:#D4626A; --red-100:#FAE5E6; --red-50:#FDF2F2; --sage:#7AC39E; --sage-dark:#5FAF86; --sage-light:#9AD4B5; --sage-100:#E3F4EC; --sage-50:#F0FAF5; --peach:#F2D5C5; --peach-dark:#E8BFA8; --peach-light:#F7E4D9; --peach-100:#FBF0EA; --peach-50:#FDF7F4; --navy:#2F5581; --navy-dark:#243F62; --navy-light:#4A7AAD; --navy-100:#DDE6F0; --navy-50:#EEF2F8; --white:#FFF; --cream:#FAFAF8; --sand-50:#F7F6F3; --sand-100:#EFEDE8; --sand-200:#E0DDD5; --sand-400:#A09B8F; --sand-500:#7A756A; --text-dark:#1E1D1B; --text-body:#4A4741; --text-muted:#8A857C; --font-heading:'Nunito',sans-serif; --font-body:'Inter',sans-serif; --text-display:clamp(2.5rem, 4.5vw + 0.5rem, 4rem); --text-h1:clamp(2rem, 3.5vw + 0.5rem, 3rem); --text-h2:clamp(1.6rem, 2.5vw + 0.4rem, 2.4rem); --text-h3:clamp(1.2rem, 1.8vw + 0.3rem, 1.6rem); --text-h4:clamp(1.05rem, 1.2vw + 0.2rem, 1.25rem); --text-lg:1.125rem; --text-base:1rem; --text-sm:.875rem; --text-xs:.75rem; --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;--s-20:5rem; --container:1200px; --gutter:clamp(1.25rem,5vw,3rem); --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-pill:9999px; --sh-sm:0 2px 8px rgba(30,29,27,.05); --sh-md:0 4px 16px rgba(30,29,27,.07); --sh-lg:0 8px 30px rgba(30,29,27,.09); --sh-red:0 4px 14px rgba(193,53,61,.18); --ease:cubic-bezier(.16,1,.3,1); --dur:350ms; --dur-fast:200ms; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} .skip-link{position:absolute;top:-40px;left:0;background:var(--red);color:var(--white);padding:8px 16px;z-index:999;font-weight:700;transition:top .2s}.skip-link:focus{top:0} body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;color:var(--text-body);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{cursor:pointer;border:none;background:none;font:inherit} ul,ol{list-style:none} h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.2;color:var(--text-dark)} h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4)} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .sec-pad{padding:clamp(4.5rem,7vw,7rem) 0} .bg-cream{background:var(--cream)} .bg-sage{background:var(--sage-50)} .sec-label{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-heading);font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:var(--s-3)} .sec-label i{width:7px;height:7px;border-radius:50%;background:var(--sage);display:inline-block} .sec-desc{font-size:var(--text-lg);color:var(--text-muted);max-width:560px;line-height:1.7;margin-top:var(--s-3)} .sec-center{text-align:center} .sec-center .sec-desc{margin-left:auto;margin-right:auto} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);padding:12px 24px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease);white-space:nowrap} .btn svg{width:18px;height:18px;flex-shrink:0} .btn--red{background:var(--red);color:#fff;box-shadow:var(--sh-red)} .btn--red:hover{background:var(--red-dark);transform:translateY(-2px)} .btn--navy{background:var(--navy);color:#fff} .btn--navy:hover{background:var(--navy-dark);transform:translateY(-2px)} .btn--sage{background:var(--sage);color:#fff} .btn--sage:hover{background:var(--sage-dark);transform:translateY(-2px)} .btn--white{background:#fff;color:var(--text-dark);box-shadow:var(--sh-sm)} .btn--white:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .btn--outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy-100)} .btn--outline:hover{background:var(--navy-50);box-shadow:inset 0 0 0 2px var(--navy-light)} .btn--lg{padding:14px 32px;font-size:var(--text-base)} .btn--sm{padding:9px 18px;font-size:var(--text-xs)} /* Reveal */ .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .rv.on{opacity:1;transform:none} .stg>*:nth-child(1){transition-delay:0ms} .stg>*:nth-child(2){transition-delay:80ms} .stg>*:nth-child(3){transition-delay:150ms} .stg>*:nth-child(4){transition-delay:220ms} .stg>*:nth-child(5){transition-delay:290ms} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}