@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

:root { --pine:#183d31; --pine-dark:#102b22; --moss:#5f7659; --sun:#e9a92e; --clay:#b55c33; --cream:#f6f2e9; --paper:#fffdf8; --ink:#1d2a24; --muted:#5d685f; --line:rgba(24,61,49,.16); --display:'Fraunces', Georgia, serif; --sans:'Manrope', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.65 var(--sans); } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { min-height:88px; padding:14px clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); background:rgba(255,253,248,.93); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; } .brand { display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand img { width:55px; height:55px; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; } .brand span { display:flex; flex-direction:column; line-height:1.05; text-transform:uppercase; } .brand strong { font:600 18px/1 var(--display); letter-spacing:.02em; color:var(--pine); } .brand em { font:500 9px/1.3 var(--mono); color:var(--clay); letter-spacing:1.04em; font-style:normal; margin-top:5px; } .primary-nav { display:flex; align-items:center; gap:clamp(16px,2.2vw,36px); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .primary-nav a:not(.nav-cta) { position:relative; } .primary-nav a:not(.nav-cta)::after { content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--clay); transform:scaleX(0); transform-origin:right; transition:transform .25s; } .primary-nav a:hover::after,.primary-nav a[aria-current=page]::after { transform:scaleX(1); transform-origin:left; } .nav-cta,.button { background:var(--pine); color:#fff; padding:12px 17px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; transition:background .25s,transform .25s; } .nav-cta:hover,.button:hover { background:var(--clay); transform:translateY(-2px); } .menu-button { display:none; border:0; padding:10px; background:none; } .menu-button span:not(.sr-only) { display:block; width:24px; height:2px; background:var(--pine); margin:5px; }
.eyebrow { color:var(--clay); text-transform:uppercase; font:500 11px/1.2 var(--mono); letter-spacing:.18em; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); line-height:1.08; letter-spacing:-.035em; } h1 { font-size:clamp(44px,6.6vw,94px); font-weight:600; } h2 { font-size:clamp(32px,4vw,56px); font-weight:600; } h3 { font-size:27px; } .lead { font-size:clamp(17px,1.7vw,21px); line-height:1.65; color:#dfe8df; max-width:570px; } .section { padding:clamp(70px,10vw,150px) clamp(20px,7vw,112px); } .section-heading { max-width:650px; } .section-heading p:not(.eyebrow) { color:var(--muted); font-size:18px; } .button-row { display:flex; gap:15px; flex-wrap:wrap; align-items:center; margin-top:30px; } .button-outline { border:1px solid currentColor; padding:11px 16px; font-size:11px; letter-spacing:.08em; font-weight:700; text-transform:uppercase; transition:background .2s,color .2s; } .button-outline:hover { background:#fff; color:var(--pine); } .text-link { color:var(--clay); font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.home-hero { min-height:calc(100svh - 88px); color:#fff; position:relative; display:grid; align-items:end; padding:clamp(46px,8vw,125px) clamp(20px,7vw,112px); overflow:hidden; background:var(--pine); } .home-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,30,22,.88) 0%,rgba(9,30,22,.43) 48%,rgba(9,30,22,.08) 100%), url('../images/hero-2.jpg') center/cover; animation:heroIn 1.1s both; } .home-hero::after { content:'LEARN OUT LOUD'; position:absolute; right:-.02em; top:8%; writing-mode:vertical-rl; font:500 clamp(10px,1vw,13px) var(--mono); letter-spacing:.24em; color:rgba(255,255,255,.62); } @keyframes heroIn { from { transform:scale(1.04); opacity:.5; } to { transform:scale(1); opacity:1; } } .hero-copy { position:relative; z-index:1; max-width:800px; animation:rise .8s .15s both; } @keyframes rise { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } } .home-hero h1 { max-width:790px; margin:16px 0 24px; } .hero-footnote { position:absolute; right:clamp(20px,7vw,112px); bottom:38px; z-index:1; max-width:220px; font-size:12px; line-height:1.6; color:rgba(255,255,255,.8); border-left:1px solid var(--sun); padding-left:14px; }
.intro-grid { display:grid; grid-template-columns:1fr 1.18fr; gap:clamp(50px,10vw,160px); align-items:start; } .intro-statement { font:500 clamp(25px,2.6vw,38px)/1.35 var(--display); color:var(--pine); } .intro-content { color:var(--muted); font-size:18px; } .stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:52px; } .stat { padding:22px 10px 0 0; } .stat:not(:first-child) { padding-left:20px; border-left:1px solid var(--line); } .stat strong { display:block; font:600 34px var(--display); color:var(--clay); } .stat span { font-size:12px; color:var(--muted); }
.programs { background:var(--cream); } .program-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; } .program { min-height:345px; padding:26px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; position:relative; isolation:isolate; transition:transform .3s; } .program:hover { transform:translateY(-7px); } .program::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,29,21,.88),rgba(9,29,21,.04) 78%); z-index:-1; } .program:nth-child(1) { background-image:url('../images/hero-1.jpg'); } .program:nth-child(2) { background-image:url('../images/topanga-campus.jpg'); } .program:nth-child(3) { background-image:url('../images/castaic-campus.jpg'); } .program h3 { margin:8px 0; } .program p { font-size:14px; margin-bottom:18px; }
.campus-band { background:var(--pine); color:#fff; display:grid; grid-template-columns:1fr 1fr; } .campus-band > div { min-height:460px; padding:clamp(45px,7vw,105px); display:flex; flex-direction:column; justify-content:center; } .campus-band .image { background:url('../images/hero-3.jpg') center/cover; padding:0; } .campus-band h2 { margin:14px 0 18px; } .campus-band p:not(.eyebrow) { color:#d1ddd2; max-width:520px; } .testimonial { padding:clamp(70px,10vw,145px) 20px; text-align:center; max-width:940px; margin:auto; } .testimonial blockquote { margin:20px 0; font:600 clamp(28px,4vw,52px)/1.25 var(--display); color:var(--pine); } .testimonial cite { color:var(--muted); font-style:normal; font-size:13px; }
.page-hero { background:var(--pine); color:#fff; min-height:380px; padding:clamp(70px,10vw,145px) clamp(20px,7vw,112px) 68px; display:flex; align-items:end; position:relative; overflow:hidden; } .page-hero::after { content:''; position:absolute; inset:0; opacity:.22; background:var(--hero-image) center/cover; mix-blend-mode:screen; } .page-hero > div { position:relative; z-index:1; max-width:800px; } .page-hero h1 { margin:14px 0 0; } .page-hero p:not(.eyebrow) { max-width:590px; color:#d5dfd7; font-size:18px; margin:18px 0 0; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,8vw,125px); align-items:center; } .split img { width:100%; min-height:420px; object-fit:cover; } .split p { color:var(--muted); font-size:17px; } .feature-list { list-style:none; padding:0; margin:26px 0; border-top:1px solid var(--line); } .feature-list li { padding:15px 0; border-bottom:1px solid var(--line); font-weight:600; } .feature-list li span { color:var(--clay); font:500 11px var(--mono); margin-right:12px; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .card { padding:30px; border-top:3px solid var(--sun); background:var(--cream); } .card p { color:var(--muted); font-size:15px; } .callout { background:var(--sun); padding:clamp(45px,7vw,90px); display:flex; justify-content:space-between; gap:30px; align-items:end; } .callout h2 { max-width:650px; margin:10px 0 0; } .callout .button { background:var(--pine-dark); white-space:nowrap; }
.locations { display:grid; grid-template-columns:1fr 1fr; } .location { min-height:600px; padding:clamp(35px,5vw,80px); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; background-position:center; background-size:cover; position:relative; isolation:isolate; } .location::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,37,27,.93),rgba(10,37,27,.13)); z-index:-1; } .location.topanga { background-image:url('../images/topanga-campus.jpg'); } .location.castaic { background-image:url('../images/castaic-campus.jpg'); } .location p:not(.eyebrow) { color:#e3ece4; max-width:440px; } .location .eyebrow { color:var(--sun); }
.admissions-steps { counter-reset:steps; } .step { display:grid; grid-template-columns:72px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); } .step::before { counter-increment:steps; content:'0' counter(steps); color:var(--clay); font:500 19px var(--mono); } .step h3 { font-size:25px; margin:0 0 7px; } .step p { color:var(--muted); margin:0; } .form-panel { background:var(--cream); padding:clamp(30px,5vw,65px); } form { display:grid; gap:18px; } label { display:grid; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } input,select,textarea { width:100%; padding:13px 14px; background:var(--paper); border:1px solid var(--line); border-radius:0; color:var(--ink); font:400 16px var(--sans); } textarea { min-height:130px; resize:vertical; } input:focus,select:focus,textarea:focus { outline:2px solid var(--sun); outline-offset:1px; } .form-note { color:var(--muted); font-size:13px; } .success-note { display:none; background:#dbe9d4; padding:14px; color:var(--pine); font-weight:600; }
.site-footer { background:var(--pine-dark); color:#d4ded3; padding:60px clamp(20px,7vw,112px) 24px; } .footer-grid { display:grid; grid-template-columns:1.1fr 1.3fr .8fr; gap:50px; } .footer-brand strong { color:#fff; } .footer-kicker { color:var(--sun); font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.15em; } .footer-links { display:grid; gap:7px; font-size:14px; } .footer-links a:hover { color:var(--sun); } .footer-bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:52px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#9caaa0; font:11px var(--mono); }
@media (max-width:800px) { .site-header { min-height:76px; } .primary-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 16px 25px rgba(0,0,0,.08); flex-direction:column; align-items:stretch; gap:0; } .primary-nav.is-open { display:flex; } .primary-nav a { padding:12px 4px; } .nav-cta { text-align:center; margin-top:8px; } .menu-button { display:block; } .home-hero { min-height:640px; } .home-hero::after,.hero-footnote { display:none; } .intro-grid,.split,.campus-band,.locations { grid-template-columns:1fr; } .program-grid,.cards { grid-template-columns:1fr; } .stats { margin-top:32px; } .campus-band .image { min-height:280px; order:-1; } .location { min-height:460px; } .footer-grid { grid-template-columns:1fr; gap:30px; } }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; padding:12px 20px; background:var(--sun); color:var(--pine-dark); } .skip-link:focus { top:10px; } a:focus-visible,button:focus-visible { outline:3px solid var(--sun); outline-offset:4px; } .button { display:inline-block; cursor:pointer; border:0; font-family:var(--sans); } .home-hero .eyebrow,.campus-band .eyebrow,.page-hero .eyebrow,.program .eyebrow,.program .text-link { color:#f2c66b; } [id] { scroll-margin-top:105px; }
@media (max-width:800px) { .callout { flex-direction:column; align-items:flex-start; } }
.brand em { letter-spacing:1.04rem; margin-right:-1.04rem; }
.footer-brand img { filter:grayscale(1) invert(1); mix-blend-mode:screen; } .footer-brand em { color:#fff; }
.home-preloader { display:none; }
.home-preloader img { width:clamp(160px,24vw,240px); height:auto; border-radius:50%; filter:grayscale(1) invert(1) brightness(4); mix-blend-mode:screen; }
.home-loading .home-preloader,.home-ready .home-preloader { display:grid; position:fixed; inset:0; z-index:1000; place-items:center; background:var(--pine-dark); }
.home-loading .homepage .home-hero,.home-loading .homepage .site-header { opacity:0; }
.home-loading .homepage .site-header { transform:translateY(-30px); }
.home-ready .home-preloader { pointer-events:none; animation:preloader-out .55s ease forwards; }
.home-ready .homepage .home-hero { animation:homepage-hero-in .85s .2s ease both; }
.home-ready .homepage .site-header { animation:homepage-menu-in .55s .15s ease both; }
@keyframes preloader-out { to { opacity:0; visibility:hidden; } }
@keyframes homepage-hero-in { from { opacity:0; } to { opacity:1; } }
@keyframes homepage-menu-in { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1150px) { .site-header { padding-inline:20px; gap:16px; } .primary-nav { gap:15px; font-size:11px; } .nav-cta { padding:12px; } }
@media(max-width:1000px) { .site-header { flex-wrap:wrap; } .primary-nav { width:100%; justify-content:space-between; } }
@media(max-width:800px) { .site-header { flex-wrap:nowrap; gap:0; padding-inline:8px; } .site-header .brand { gap:8px; } .site-header .brand img { width:32px; height:32px; } .menu-button { padding:0; } .primary-nav { width:auto; } }
.home-hero { display:block; padding:0; }
.home-hero::before { display:none; }
.hero-slides { display:grid; }
.hero-slide { grid-area:1 / 1; display:flex; align-items:center; min-height:calc(100svh - 88px); padding:65px clamp(20px,7vw,112px) 125px; background:linear-gradient(90deg,rgba(9,30,22,.88),rgba(9,30,22,.38) 70%),var(--slide-image) center/cover; opacity:0; visibility:hidden; transition:opacity .8s,visibility .8s; }
.hero-slide.is-active { opacity:1; visibility:visible; }
.hero-slide h2 { font-size:clamp(44px,6.6vw,94px); margin:16px 0 24px; }
.hero-slide .hero-copy { animation:none; }
.slider-controls { position:absolute; bottom:30px; left:clamp(20px,7vw,112px); right:20px; display:flex; gap:12px; align-items:center; z-index:3; font:12px var(--mono); }
.slider-controls button { color:white; background:rgba(16,43,34,.65); border:1px solid #ffffff80; min-width:44px; min-height:44px; cursor:pointer; font:12px var(--mono); padding:10px; }
.slider-controls button:hover { background:var(--pine); }
.slide-count { margin-right:10px; }
.slide-timer { position:absolute; bottom:0; height:5px; left:0; right:0; background:#ffffff40; z-index:3; }
.slide-timer span { display:block; height:100%; background:var(--sun); transform:scaleX(0); transform-origin:left; }
.slide-timing.is-paused::after { content:' · paused'; }
.goose-section { padding:70px 20px; text-align:center; background:var(--cream); }
.goose-section h2 { font-size:36px; }
.goose-trigger { border:0; background:none; color:var(--pine); cursor:pointer; font:12px var(--mono); }
.goose-trigger img { margin:0 auto 15px; height:160px; width:120px; object-fit:cover; border-radius:60px; transition:transform .3s; }
.goose-trigger:hover img { transform:rotate(-6deg) scale(1.06); }
#goose-party { border:0; background:transparent; color:white; padding:50px 20px; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; }
#goose-party::backdrop { background:linear-gradient(125deg,#193e32,#774924,#244935); }
.goose-party-content { text-align:center; max-width:680px; margin:5vh auto; background:#102b22ec; border:1px solid #e9a92e; padding:40px 24px; border-radius:20px; }
.goose-party-content .eyebrow { color:var(--sun); }
.goose-party-content .form-note { color:#cddacf; }
.goose-party-content audio { max-width:100%; }
.goose-close { display:block; margin:0 0 0 auto; background:var(--paper); color:var(--pine); border:0; padding:14px 24px; cursor:pointer; }
.dancing-goose { display:inline-block; font-size:90px; animation:goose-dance 1.2s ease-in-out infinite alternate; }
@keyframes goose-dance { from { transform:rotate(-12deg) translateY(0); } to { transform:rotate(12deg) translateY(-12px); } }
@media(max-width:800px) { .hero-slide { min-height:650px; } .slide-timing { font-size:10px; } .slider-controls { gap:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .dancing-goose { animation:none; } }