/* Homepage-only layouts and editorial photographs. */
.about-section{position:relative;isolation:isolate;overflow:hidden;padding:76px 8% 100px}
.about-background{position:absolute;z-index:-1;top:22px;right:0;bottom:42px;width:46%;background:var(--ivory);border-radius:180px 0 0 28px}
.about-shell{position:relative;isolation:isolate;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.about-copy{position:relative;z-index:1;max-width:510px}
.about-copy h2{font-size:clamp(38px,4vw,60px);margin-bottom:24px}
.about-lead{font-size:clamp(16px,1.35vw,19px);line-height:1.7;margin-bottom:28px}
.about-place{position:absolute;z-index:0;top:28%;left:-13%;width:120%;aspect-ratio:4/1;margin:0;opacity:.3;pointer-events:none}
.about-place img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 30%,#000 48%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at center,#000 30%,#000 48%,transparent 100%)}
.about-art{position:relative;z-index:1;width:100%;aspect-ratio:1.12;isolation:isolate}
.about-photo{position:absolute;margin:0}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 75%}
.about-photo--community{top:0;right:0;width:84%;aspect-ratio:4/3}
.about-photo--community img{border-radius:150px 150px 24px 24px}
.about-photo--staff{bottom:0;left:0;width:72%;aspect-ratio:8/5;border:8px solid #fff;border-radius:24px 74px 24px 24px;background:#fff;box-shadow:0 12px 28px #942d4c0c}
.about-photo--staff img{border-radius:17px 66px 17px 17px;filter:grayscale(1)}
.about-orbit{position:absolute;z-index:-1;left:8px;top:32px;width:76%;height:78%;border:2px solid #cfacba;border-radius:50%;transform:rotate(-18deg)}
.about-orbit:after{content:"";position:absolute;inset:9px -17px -9px 17px;border:2px solid #cfacba;border-radius:inherit}
.about-dots{position:absolute;right:0;bottom:2px;width:120px;height:112px;opacity:.24;z-index:-1}
.about-photo-note{position:absolute;top:18px;left:0;background:var(--pink);color:white;font-size:12px;font-weight:600;letter-spacing:.035em;line-height:1.45;padding:18px 22px;border-radius:28px 28px 5px 28px;transform:rotate(-6deg)}
.about-details{max-width:1280px;margin:48px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.about-detail{min-width:0;padding:32px 34px;border-radius:28px}
.about-detail--mission{background:var(--berry);color:#fff}
.about-detail--history{background:#fff;border:1px solid var(--line)}
.about-detail h3{font-size:26px;line-height:1.2;margin:0 0 20px}
.about-detail p{font-size:15px;line-height:1.75;margin-bottom:19px}
.about-detail p:last-child{margin-bottom:0}
#courses .courses-art{height:auto;padding-bottom:20px}
#courses .courses-art>img{height:auto;aspect-ratio:4/3;object-position:60% 50%;clip-path:none;border-radius:14% 42% 12% 38% / 16% 38% 14% 40%}
#courses .courses-art-label{bottom:-5px}
.services-section{position:relative;isolation:isolate;overflow:hidden;padding:90px 8% 100px}
/* White page background with the existing pink shapes and berry outlines. */
#services .services-background{
  position:absolute;z-index:-1;inset:126px 0 0;
  width:auto;height:auto;overflow:hidden;pointer-events:none;transform:none;
  border:0;border-radius:0;
  background:#fff;
}
#services .services-background::before,
#services .services-background::after{content:"";position:absolute;pointer-events:none}
#services .services-background::before{
  width:260px;height:360px;left:-180px;top:100px;
  border-radius:160px 160px 24px 24px;background:#f0c2d2;transform:rotate(-20deg);
  box-shadow:20px 14px 0 -1px #fcfaf5,20px 14px 0 0 #cfa0b3;
}
#services .services-background::after{
  width:360px;height:440px;right:-205px;top:64px;
  border:2px solid #c99caf;border-radius:190px 190px 24px 24px;background:#f1dce6;transform:rotate(23deg);
  box-shadow:-20px 18px 0 -2px #f3e1e9,-20px 18px 0 0 #e0b8c8;
}
.services-shell{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:28px}
.services-intro{grid-column:1/-1;display:block;width:100%;max-width:640px;justify-self:center;padding:0 0 12px;text-align:center}
.services-intro .eyebrow{margin-bottom:14px}
.services-intro h2{font-size:clamp(34px,3.4vw,49px);margin-bottom:17px}
.services-intro>p:not(.eyebrow){font-size:16px;line-height:1.65;max-width:560px;margin:0 auto}
.services-section .service-card{min-height:465px;max-width:none;padding:32px 28px;display:flex;flex-direction:column;align-items:flex-start}
.services-section .service-card h3{font-size:28px;line-height:1.16;margin:0 0 24px}
.services-section .service-card .service-card__eyebrow{font-size:9px;line-height:1.5;letter-spacing:.12em;font-weight:600;color:var(--berry);margin:22px 0 11px}
.services-section .service-card__list{list-style:none;margin:0 0 28px;padding:0;width:100%}
.services-section .service-card__list li{position:relative;padding-left:17px;font-size:14px;line-height:1.65}
.services-section .service-card__list li+li{margin-top:16px}
.services-section .service-card__list li:before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;background:var(--pink);border-radius:50%}
.services-section .service-card .button{font-size:10px;padding:10px 16px;margin-top:auto}
.services-section .service-card--offset{margin-top:38px}
.services-section .service-card--courses{background:#f5edf1}
#services .button--blush{background:#f1dce6;color:var(--berry)}
#service-dialog .service-detail-section{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
#service-dialog .service-detail-section h3{margin:0 0 12px;color:var(--berry);font-size:21px}
#service-dialog .service-detail-section p{font-size:14px;line-height:1.75;margin:0 0 12px}
#service-dialog .service-detail-section p:last-child{margin-bottom:0}
#service-dialog .service-detail-section ul{margin:10px 0 0;padding-left:20px}
#service-dialog .service-detail-section li+li{margin-top:7px}
#service-dialog .service-detail-note{background:var(--ivory);border-radius:16px;padding:18px 20px;margin:24px 0 0;font-size:12px;line-height:1.7}
@media(min-width:721px){
  .homepage .site-nav{gap:clamp(12px,1.55vw,25px)}
  #about{--history-drop:clamp(84px,8vw,144px);padding-bottom:calc(var(--history-drop) + 24px)}
  .about-detail--history{position:relative;top:var(--history-drop)}
}
@media(min-width:721px) and (max-width:1190px){
  .homepage .site-nav{font-size:11px;gap:14px}
  .homepage .nav-cta{min-width:104px;padding:10px 15px;font-size:11px;margin-left:0}
  .about-section{padding:60px 6% 80px}
  .about-shell{gap:6%}
  .about-photo--community img{border-radius:120px 120px 24px 24px}
  .about-photo-note{font-size:10px;padding:15px 18px}
  .about-details{gap:22px;margin-top:38px}
  .about-detail{padding:28px}
  .about-detail h3{font-size:24px}
  .services-section{padding:80px 6% 90px}
  .services-shell{gap:22px}
  .services-section .service-card{padding:27px 22px;min-height:475px}
  .services-section .service-card h3{font-size:24px}
  .services-section .service-card .button{font-size:9px;padding:9px 13px;gap:7px}
}
@media(min-width:721px) and (max-width:960px){
  .homepage .site-header{width:calc(100% - 40px)}
  .homepage .site-nav{gap:12px;font-size:10px}
  .homepage .nav-cta{min-width:90px;font-size:10px;padding:10px 12px;gap:8px}
  .about-copy h2{font-size:37px}
  .about-lead{font-size:16px;line-height:1.6}
  .about-photo--staff{border-width:6px;border-radius:20px 60px 20px 20px}
  .about-photo--staff img{border-radius:15px 54px 15px 15px}
  .services-shell{grid-template-columns:1fr 1fr;gap:24px}
  .services-intro{padding-bottom:10px}
  .services-intro h2{font-size:37px}
  .services-intro>p:not(.eyebrow){font-size:15px;max-width:340px}
  .services-section .service-card--offset{margin-top:28px}
  .services-section .service-card--courses{grid-column:1/-1;min-height:0;max-width:none;display:grid;grid-template-columns:1fr 1.1fr;column-gap:28px;align-items:start}
  .services-section .service-card--courses .service-card__eyebrow{grid-column:1}
  .services-section .service-card--courses h3{grid-column:1;margin-bottom:18px}
  .services-section .service-card--courses .service-card__list{grid-column:2;grid-row:1/4;margin:0}
  .services-section .service-card--courses .button{grid-column:2;grid-row:4;justify-self:start;margin-top:0}
}
@media(max-width:720px){
  .about-section{padding:48px 7% 62px}
  .about-background{top:250px;bottom:auto;width:82%;height:390px;border-radius:130px 0 0 20px}
  .about-shell{grid-template-columns:1fr;gap:38px}
  .about-copy{max-width:520px}
  .about-copy h2{font-size:38px;margin-bottom:20px}
  .about-lead{font-size:16px;line-height:1.65;margin-bottom:22px}
  .about-place{top:32%;left:-35%;width:180%;aspect-ratio:2.8/1;opacity:.26}
  .about-art{max-width:480px;aspect-ratio:1.05;margin:0 auto}
  .about-photo--community img{border-radius:100px 100px 18px 18px}
  .about-photo--staff{border-width:6px;border-radius:20px 58px 20px 20px}
  .about-photo--staff img{border-radius:15px 52px 15px 15px}
  .about-photo-note{top:14px;font-size:10px;padding:14px 17px}
  .about-orbit{left:12px;top:28px;width:77%;height:80%}
  .about-dots{width:90px;height:95px}
  .about-details{grid-template-columns:1fr;gap:20px;margin-top:34px}
  .about-detail{padding:26px}
  .about-detail h3{font-size:25px;margin-bottom:18px}
  .about-detail p{font-size:14px;line-height:1.75}
  .services-section{padding:62px 7% 65px}
  #services .services-background{inset:154px 0 0}
  #services .services-background::before{width:190px;height:300px;left:-150px;top:180px}
  #services .services-background::after{width:230px;height:310px;right:-150px;top:auto;bottom:48px;border-radius:130px 130px 24px 24px;background:#f6e9ef}
  .services-shell{grid-template-columns:1fr;gap:24px;max-width:480px}
  .services-intro{display:block;padding:0 0 5px}
  .services-intro h2{font-size:36px;margin-bottom:18px}
  .services-intro>p:not(.eyebrow){max-width:350px;margin-bottom:0}
  .services-section .service-card{min-height:0;padding:28px;max-width:460px}
  .services-section .service-card h3{font-size:28px;margin-top:0;margin-bottom:22px}
  .services-section .service-card--offset{margin:0 0 0 18px}
  .services-section .service-card:first-of-type{margin-right:18px}
  .services-section .service-card .button{font-size:10px}
  .services-section .service-card--courses{margin-right:18px}
}
@media(max-width:370px){
  .about-copy h2{font-size:33px}
  .services-section .service-card{padding:24px}
}

/* Compact the wide desktop course cards and artwork to 80% of their previous size. */
@media(min-width:1440px){
  #courses{width:80%;margin-inline:auto;min-height:648px;padding-bottom:24px;--course-card-height:clamp(384px,21.6vw,412px);--course-stagger:clamp(64px,4.08vw,78.4px);--course-gap:clamp(19.2px,1.28vw,24px);--course-intro-top:clamp(99.2px,5.92vw,118.4px)}
  #courses .courses-background{right:-12.5%;border-top-left-radius:clamp(144px,8.96vw,176px)}
  #courses .courses-intro{padding:var(--course-intro-top) 32px 0 0}
  #courses .courses-intro .eyebrow{margin-bottom:14.4px}
  #courses .courses-intro h2{margin-bottom:19.2px}
  #courses .courses-intro>p:not(.eyebrow){max-width:328px}
  #courses .section-corner{width:clamp(120px,7.52vw,142.4px);height:clamp(120px,7.52vw,142.4px);left:clamp(-59.2px,-3.12vw,-44.8px);top:calc(var(--course-intro-top) + 25.6px);border-top-left-radius:80px}
  #courses .courses-art{margin-top:clamp(25.6px,2vw,38.4px);padding-bottom:16px}
  #courses .courses-art>img{width:clamp(224px,14.16vw,270.4px);left:clamp(20px,2.4vw,46.4px)}
  #courses .courses-rings{height:clamp(184px,12vw,228px);width:clamp(104px,6.4vw,124px);border-width:6.4px;left:-16px;top:19.2px}
  #courses .courses-rings:after{inset:-6.4px -31.2px -6.4px 20.8px;border-width:6.4px}
  #courses .courses-art-label{left:clamp(73.6px,6.64vw,126.4px);bottom:-4px;padding:12px 20px}
  #courses .courses-art .dots{right:-64px;bottom:9.6px;width:clamp(148px,10.08vw,192px);height:clamp(108px,6.72vw,128px);background-size:16px 16px}
  #courses .courses-stage{padding:clamp(48px,3.04vw,59.2px) 0 9.6px 19.2px}
  #courses .course-ring{width:clamp(216px,14.24vw,272px);height:clamp(216px,14.24vw,272px);border-width:clamp(17.6px,1.16vw,22.4px);top:4.8px;left:clamp(56px,3.68vw,70.4px)}
  #courses .course-card{padding:clamp(22.4px,1.44vw,27.2px) clamp(16px,1vw,19.2px);border-radius:clamp(27.2px,1.68vw,32px)}
  #courses .course-card__eyebrow{font-size:clamp(7.2px,.424vw,8px);margin-bottom:12px}
  #courses .course-card__image{width:clamp(116px,7.68vw,147.2px);height:clamp(116px,7.68vw,147.2px);border-radius:17.6px;margin-bottom:16px}
  #courses .course-card h3{font-size:clamp(19.2px,1.24vw,24px);margin-bottom:9.6px}
  #courses .course-card p{font-size:clamp(14px,.76vw,14.4px);margin-bottom:15.2px}
  #courses .course-card .button{font-size:clamp(10px,.584vw,11.2px);min-height:32px;padding:8px 12.8px;gap:6.4px}
  #courses .course-controls{margin-top:20.8px;gap:12.8px}
  #courses .course-controls .circle-control{width:32px;height:32px}
  #courses .course-controls .circle-control svg{width:14.4px;height:14.4px}
  #courses .course-controls .carousel-dots{gap:7.2px}
  #courses .course-controls .carousel-dots button{width:8px;height:8px}
  #courses .course-drag-hint{font-size:8px;margin-top:8px;gap:6.4px}
  #courses .course-drag-hint span{font-size:15.2px}
}

/* Course introduction uses the same type sizes as the preceding About section. */
#courses .courses-intro .eyebrow{font-size:11px}
#courses .courses-intro h2{font-size:clamp(38px,4vw,60px);white-space:normal}
#courses .courses-intro>p:not(.eyebrow){font-size:clamp(16px,1.35vw,19px);line-height:1.7}
#courses .courses-art-label{font-size:12px}
@media(max-width:1190px){
  #courses .courses-art-label{font-size:10px}
}
@media(min-width:721px) and (max-width:960px){
  #courses .courses-intro h2{font-size:37px}
  #courses .courses-intro>p:not(.eyebrow){font-size:16px;line-height:1.6}
}
@media(max-width:720px){
  #courses .courses-intro h2{font-size:38px}
  #courses .courses-intro>p:not(.eyebrow){font-size:16px;line-height:1.65}
}
@media(max-width:370px){
  #courses .courses-intro h2{font-size:33px}
}

/* A working next-slide control in the wide desktop carousel gutter. */
#courses .course-side-next{display:none}
@media(min-width:1440px){
  #courses .course-side-next{position:absolute;z-index:2;display:grid;place-items:center;top:calc(clamp(48px,3.04vw,59.2px) + var(--course-card-height)/2);right:calc(-12.5% + clamp(40px,4vw,76px));width:clamp(80px,5vw,96px);height:clamp(80px,5vw,96px);padding:8px;border:0;border-radius:50%;background:transparent;color:var(--berry);opacity:.65;transform:translateY(-50%);transition:background .2s,opacity .2s}
  #courses .course-side-next svg{width:100%;height:100%;stroke-width:2.5;transition:transform .2s}
  #courses .course-side-next:hover{background:#ffffff66;opacity:1}
  #courses .course-side-next:focus-visible{outline:3px solid var(--pink);outline-offset:4px;opacity:1}
  #courses .course-side-next:active svg{transform:translateX(4px)}
  #courses .course-side-next:disabled{opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  #courses .course-side-next,#courses .course-side-next svg{transition:none}
  #courses .course-side-next:active svg{transform:none}
}

/* One shared gap between homepage sections; coloured panels keep their inner padding. */
.homepage #main{--section-gap:96px;display:flow-root}
.homepage #main>section{margin-top:0;margin-bottom:0}
.homepage #main>section+section{margin-top:var(--section-gap)}
#main>#home{padding-bottom:0}
/* Keep the cue clickable above the stretched hero copy. */
.homepage #home .scroll-cue{bottom:0;z-index:4}
#main>#about{padding-block:0}
#about .about-details{padding-bottom:var(--history-drop,0px)}
#main>#courses{min-height:0;padding-block:0}
#main>#services,#main>#life,#main>#blog{padding-block:0}
#main>#contact{padding-top:0}
#courses .section-corner{background:#f9cfda}
#courses .courses-art-label{background:#e92758}
@media(max-width:960px){
  .homepage #main{--section-gap:80px}
}
@media(max-width:720px){
  .homepage #main{--section-gap:64px}
  #courses .courses-shell{padding-top:0}
  #courses .courses-background{top:165px}
  #courses .section-corner{top:22px;height:60px}
}

/* Inner breathing room belongs to the coloured stage; shared section gaps stay unchanged. */
#main>#services{padding-bottom:40px}
@media(max-width:960px){#main>#services{padding-bottom:32px}}
@media(max-width:720px){#main>#services{padding-bottom:28px}}
@media(min-width:721px) and (max-width:960px){#services .services-background{top:154px}}
@media(max-width:370px){#services .services-background{top:195px}}

/* Gentle service-card feedback without interfering with the scroll reveal. */
#services .service-card{
  transition:opacity .7s,transform .7s,translate .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
}
#services .service-card .icon-pill{transition:translate .28s ease,scale .28s ease}
#services .service-card .button svg{transition:translate .28s ease}
@media(hover:hover) and (pointer:fine){
  #services .service-card:is(:hover,:focus-within){translate:0 -8px;box-shadow:0 18px 34px #942d4c1c,0 3px 10px #942d4c0a}
  #services .service-card:is(:hover,:focus-within) .icon-pill{translate:0 -3px;scale:1.04}
  #services .service-card:is(:hover,:focus-within) .button svg{translate:2px -2px}
}
@media(prefers-reduced-motion:reduce){
  #services .service-card,
  #services .service-card:is(:hover,:focus-within),
  #services .service-card .icon-pill,
  #services .service-card:is(:hover,:focus-within) .icon-pill,
  #services .service-card .button svg,
  #services .service-card:is(:hover,:focus-within) .button svg{translate:none;scale:none;transition:none}
  #services .service-card .button{transform:none}
}

/* About panels lift independently of their existing scroll reveal and stagger. */
#about .about-detail{transition:opacity .7s,transform .7s,translate .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
@media(hover:hover) and (pointer:fine){
  #about .about-detail:hover{box-shadow:0 -2px 12px -3px #942d4c26}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #about .about-detail:hover{translate:0 -8px}
}