/* Fishtown Montessori. Palette taken from the flower mark and the school's print ads. */
:root{
  --teal:#227c9e;
  --teal-deep:#175a73;
  --purple:#652b7e;
  --purple-deep:#4f2163;
  --sky:#659fcc;
  --sky-tint:#edf4fa;
  --orange:#f36f21;
  --red:#e9292c;
  --paper:#fbf8f3;
  --white:#fffdf9;
  --ink:#27212d;
  --ink-soft:#57505f;
  --line:#e4ddd2;
  --font:'Figtree',system-ui,sans-serif;
  --wrap:1200px;
  --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.25,1,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:62ch}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.label{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:18px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--white);padding:12px 16px;border-radius:6px}
.skip:focus{top:12px}

/* Focus: dark ring on light, white ring on colour */
:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:4px}
.hero :focus-visible,.admissions :focus-visible,.site-footer :focus-visible{outline-color:var(--white)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-purple{background:var(--purple);color:var(--white)}
.btn-purple:hover{background:var(--purple-deep)}
.btn-light{background:var(--white);color:var(--purple)}
.btn-light:hover{background:#f3ece4}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--purple);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:currentColor}
.text-link.on-dark{color:var(--white)}

/* Header */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gutter);background:color-mix(in srgb,var(--paper) 94%,transparent)}
.brand img{width:clamp(190px,22vw,250px)}
.menu-toggle{display:none;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:none;font:700 1rem var(--font);color:var(--ink);cursor:pointer}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.site-nav a:not(.btn){font-weight:600;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.site-nav a:not(.btn):hover{border-bottom-color:var(--orange)}
.site-nav .btn{min-height:46px;padding:10px 22px}

/* Hero: teal band and photo joined by the ad's wave */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--teal);color:var(--white);min-height:clamp(540px,calc(100vh - 80px),760px)}
.hero-photo{order:2;position:relative}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 40%;clip-path:url(#wave-v)}
.hero-text{order:1;align-self:center;padding:clamp(48px,7vw,96px) clamp(24px,3vw,40px) clamp(48px,7vw,96px) max(var(--gutter),calc((100vw - var(--wrap))/2))}
.hero-mark{width:68px;margin-bottom:28px}
.hero h1{font-size:clamp(3rem,6.4vw,6rem);font-weight:800;letter-spacing:-.035em;line-height:.98;margin-bottom:28px}
.hero-text p{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.55;color:var(--white);max-width:30ch;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.hero-call{color:var(--white);font-weight:600;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:5px}

/* Approach */
.approach{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center;padding-block:clamp(80px,11vw,150px)}
.approach-photo{margin:0}
.approach-photo img{border-radius:6px;aspect-ratio:4/3.4;object-fit:cover;width:100%}
.approach h2{font-size:clamp(2.3rem,4.6vw,3.9rem);color:var(--purple);margin-bottom:18px}
.attribution{font-weight:600;color:var(--ink-soft);margin-bottom:30px;max-width:40ch}

/* Programs: an age line in the four petal colours */
.programs{background:var(--white);padding-block:clamp(80px,10vw,140px)}
.programs-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,90px);align-items:end;margin-bottom:clamp(56px,7vw,88px)}
.programs-head h2{margin-bottom:20px;max-width:16ch}
.programs-head p{color:var(--ink-soft);font-size:1.15rem}
.programs-photo{border-radius:6px;aspect-ratio:16/10;object-fit:cover;width:100%}
.ages{--c:var(--sky);display:grid;grid-template-columns:15fr 18fr 24fr 12fr;column-gap:0;row-gap:40px}
.age{position:relative;padding:44px 22px 0 0;--c:var(--sky)}
.age-infant{--c:var(--line)}
.age-toddler{--c:var(--sky)}
.age-primary{--c:var(--orange)}
.age-k{--c:var(--purple)}
.age .bar{position:absolute;top:0;left:0;right:0;height:14px;background:var(--c)}
.age-infant .bar{background:repeating-linear-gradient(90deg,#cfc6ba 0 10px,transparent 10px 16px);border-radius:7px 0 0 7px}
.age-k .bar{border-radius:0 7px 7px 0}
.tick{position:absolute;top:20px;left:0;font-size:.8rem;font-weight:700;color:var(--ink-soft);letter-spacing:.02em}
.tick-end{left:auto;right:0}
.age h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:1.35rem}
.petal{flex:none;width:16px;height:16px;border-radius:0 70%;background:var(--c);display:inline-block}
.age-infant .petal{background:none;border:2px dashed #b9ae9f}
.age-range{font-weight:700;color:var(--ink-soft);font-size:.95rem;margin-bottom:10px}
.age p:not(.age-range){font-size:1rem;line-height:1.55}
.age-infant h3,.age-infant p{color:var(--ink-soft)}
.extended{grid-column:2/5;--c:var(--red)}
.extended .bar{border-radius:7px}
.ext-title .age-range{margin:0}
/* Desktop: the three parts sit in the Toddler, Primary and Kindergarten columns above */
@media (min-width:1021px){
  .extended{display:grid;grid-template-columns:subgrid;padding-right:0}
  .ext-title{padding-right:22px}
  .ext-desc,.ext-link{margin:0;padding-top:74px;align-self:start}
  .ext-desc{padding-right:22px}
  .ext-link{display:inline-flex;align-items:flex-start;min-height:0;height:fit-content;padding-top:74px;line-height:1.6}
}
@media (max-width:1020px){.ext-desc{margin-top:10px}}

/* School */
.school{background:var(--sky-tint);padding-block:clamp(80px,10vw,140px)}
.school-photos{display:grid;grid-template-columns:3fr 6fr 5fr;gap:clamp(14px,2vw,24px);height:clamp(340px,38vw,540px);margin-bottom:clamp(48px,6vw,80px)}
.school-photos img{border-radius:6px;width:100%;height:100%;object-fit:cover}
.school-photos img:last-child{object-position:30% center}
.school-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,90px);align-items:start}
.school-body h2{margin-bottom:20px}
.school-body>div>p{color:var(--ink-soft);font-size:1.1rem}
.places{margin:32px 0 0;border-top:1px solid #cddcea}
.places div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid #cddcea}
.places dt{font-weight:700}
.places dd{margin:0;color:var(--ink-soft);text-align:right}
.map{margin:0;background:var(--white);padding:14px;border-radius:6px}

/* People */
.people{padding-block:clamp(80px,11vw,150px)}
.people-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,90px);align-items:end;margin-bottom:clamp(48px,6vw,72px)}
.people-head h2{max-width:15ch}
.people-head p{color:var(--ink-soft);font-size:1.1rem}
.role{font-weight:600;color:var(--teal-deep);margin:4px 0 0}
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(20px,3vw,44px);align-items:start}
.member{display:grid;grid-template-columns:clamp(96px,9vw,124px) minmax(0,1fr);gap:18px;align-items:start}
.member img{border-radius:6px;aspect-ratio:1;object-fit:cover;object-position:center 25%;width:100%}
.member h3{font-size:1.15rem;padding-top:4px}
.member .role{font-size:.92rem;line-height:1.4}
.member summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--purple)}
.member summary::-webkit-details-marker{display:none}
.member summary::after{content:"+";font-size:1.2rem;line-height:1;transition:transform .25s var(--ease)}
.member details[open] summary::after{transform:rotate(45deg)}
.member details p{font-size:.98rem;line-height:1.55;color:var(--ink-soft);margin:2px 0 0}

/* Admissions */
.admissions{background:var(--purple) url(assets/admissions-bg.jpg) center 40%/cover no-repeat;color:var(--white);padding-block:clamp(80px,10vw,140px)}
.admissions-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start}
.admissions h2{font-size:clamp(2.6rem,5vw,4.2rem);margin-bottom:20px}
.admissions-intro p{font-size:1.15rem;color:var(--white);margin-bottom:32px;max-width:28ch}
.admissions-intro .text-link{display:flex;width:fit-content;margin-top:10px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(24px,4vw,56px)}
.steps li{padding-top:4px}
.step-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:0 70%;font-weight:800;font-size:1.3rem;margin-bottom:20px;color:var(--ink);background:var(--sky)}
.steps li:nth-child(2) .step-mark{background:var(--orange)}
.steps li:nth-child(3) .step-mark{background:var(--white)}
.steps li:nth-child(4) .step-mark{background:#f4a6a3}
.steps h3{margin-bottom:10px;font-size:1.4rem}
.steps p{color:var(--white);font-size:1.02rem;line-height:1.55;margin:0}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,7vw,110px);padding-block:clamp(72px,9vw,120px)}
.faq h2{font-size:clamp(2rem,3.6vw,3rem);max-width:12ch}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:12px 0;font-weight:700;font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sky-tint);color:var(--purple);font-size:1.3rem;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);padding-bottom:20px;margin:0}
.faq a{color:var(--purple);font-weight:600}

/* Contact */
.contact{background:var(--white);padding-block:clamp(80px,10vw,130px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,52px)}
.contact-grid>*{width:min(100%,calc(46vw - var(--gutter)))}
/* Front door photo on the right, fading into the section on its left */
.contact-photo{position:absolute;top:0;right:0;bottom:0;width:clamp(380px,52vw,920px);z-index:0;pointer-events:none}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 22%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 22%,#000 52%)}
.contact h2{margin-bottom:20px}
.contact-intro p{font-size:1.1rem;color:var(--ink-soft)}
.contact-intro a{color:var(--purple);font-weight:700}
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full,.full{grid-column:1/-1}
.full-start{grid-column:1;justify-self:start}
label{font-weight:700;font-size:.98rem}
.optional{font-weight:500;color:var(--ink-soft)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid #cfc6ba;border-radius:8px;padding:13px 14px;min-height:52px;width:100%}
textarea{resize:vertical;min-height:140px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--purple);outline-offset:1px;border-color:var(--purple)}
.field.invalid input,.field.invalid textarea{border-color:#b3261e}
.field-error{color:#b3261e;font-size:.92rem;font-weight:600;margin:0}
.form-note{font-size:.95rem;color:var(--ink-soft);margin:0}
.form-status{margin:0;font-weight:600;color:var(--teal-deep)}

/* Footer */
.site-footer{background:var(--teal-deep);color:#e3eff4;padding:clamp(64px,8vw,96px) 0 32px}
.footer-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));gap:40px}
.footer-brand img{width:230px;margin-bottom:18px}
.site-footer h2{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--white)}
.site-footer p{font-size:1rem}
.site-footer a{color:var(--white);text-underline-offset:4px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-top:24px;border-top:1px solid rgb(255 255 255 / .2)}
.footer-base p{font-size:.92rem;margin:0;color:#c9dee6}

/* Flower watermarks: opacity is baked into the PNGs (no CSS opacity, so PDF exports keep them) */
.programs,.admissions,.contact,.site-footer{position:relative;overflow:hidden}
.programs>.wrap,.admissions>.wrap,.contact>.wrap,.site-footer>.wrap{position:relative;z-index:1}
.wm{position:absolute;z-index:0;pointer-events:none;user-select:none;max-width:none;height:auto}
.wm-programs{width:clamp(380px,46vw,700px);left:max(-200px,-12vw);top:clamp(-160px,-10vw,-60px)}
.wm-contact{width:clamp(340px,40vw,620px);left:max(-180px,-12vw);bottom:clamp(-260px,-16vw,-120px)}
.wm-footer{width:clamp(320px,36vw,540px);right:-6vw;top:clamp(-200px,-12vw,-90px)}

/* Motion: initial states only while GSAP is expected (see head script) */
.hero h1 .word{display:inline-block}
.motion .reveal,
.motion .hero-mark,.motion .hero h1 .word,.motion .hero-text p,.motion .hero-actions,
.motion .hero-photo img,
.motion .prog-icon,.motion .step-mark,.motion .member{opacity:0}
.motion .age .bar,.motion .extended .bar{transform:scaleX(0);transform-origin:left center}
.motion .age-infant .bar{transform:none;opacity:0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Tablet */
@media (max-width:1020px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .ages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .age{padding-top:36px}
  .age .tick,.tick-end{display:none}
  .age .bar,.age-infant .bar,.age-k .bar{right:22px;border-radius:7px;height:10px}
  .extended{grid-column:1/-1}
}

/* Header collapses */
@media (max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center}
  .site-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--paper);border-bottom:1px solid var(--line);display:none}
  .site-nav.open{display:flex}
  .site-nav a:not(.btn){font-size:1.15rem;padding:12px 0;border-bottom:1px solid var(--line)}
  .site-nav .btn{margin-top:18px}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:1;aspect-ratio:4/3.1}
  .hero-photo img{clip-path:url(#wave-h)}
  .hero-text{order:2;padding:20px var(--gutter) 64px}
  .hero-mark{width:60px;margin:-62px 0 22px;position:relative}
  .approach,.programs-head,.school-body,.people-head,.admissions-grid,.faq,.contact-grid{grid-template-columns:1fr}
  .contact{padding-top:0}
  .contact-photo{position:relative;width:100%;height:auto;aspect-ratio:4/3.3;margin-bottom:-2%}
  .contact-photo img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .contact-grid>*{width:100%}
  .programs-head{align-items:start}
  .approach-text{order:-1}
}

/* Phone */
@media (max-width:600px){
  body{font-size:17px}
  .ages{grid-template-columns:1fr;row-gap:36px}
  .age .bar,.age-infant .bar,.age-k .bar{right:0}
  .school-photos{grid-template-columns:1fr 1fr;height:auto}
  .school-photos img{aspect-ratio:3/4}
  .school-photos img:nth-child(2){grid-column:1/-1;grid-row:1;aspect-ratio:1/1}
  .places div{grid-template-columns:1fr;gap:2px}
  .places dd{text-align:left}
  .team{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr;gap:36px}
  .contact-form{grid-template-columns:1fr}
  .full-start{justify-self:stretch}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

/* Program icons carried over from the school's own icon set */
.prog-icon{display:block;width:auto;height:58px;margin-bottom:16px}
.prog-icon-soon{height:44px;margin:6px 0 20px;opacity:.45;filter:grayscale(.3)}