/* ==========================================================================
   The Apple Tree House Montessori
   ------------------------------------------------------------------------
   Palette sampled directly from the Montessori quote card:
   coral and blush blooms, gold specks, warm cocoa script, clear white
   in the middle where the words live.

   You can safely change any value in the :root block below and the whole
   site follows. Everything else is layout.
   ========================================================================== */

:root{
  /* ---- brand colour ---- */
  --cocoa:        #8E6A50;   /* headings, the script brown from the card */
  --cocoa-deep:   #6B4E3A;   /* strong text */
  --ink:          #5F4B3E;   /* body copy */
  --ink-soft:     #8A7566;   /* captions, muted lines */

  --coral:        #E4A890;   /* the strongest bloom */
  --coral-deep:   #D2825F;   /* buttons, links, underlines */
  --blush:        #E4C0B4;
  --rose:         #D8B4B4;
  --sand:         #E4CCC0;
  --gold:         #E5C27C;   /* the specks */

  --white:        #FFFFFF;
  --milk:         #FDF8F5;   /* barely-there warm tint */
  --line:         #F0DFD5;
  --line-2:       #E4CCC0;

  --shadow-sm: 0 2px 10px -4px rgba(142,106,80,.20);
  --shadow:    0 18px 44px -26px rgba(142,106,80,.48);
  --shadow-lg: 0 30px 70px -34px rgba(142,106,80,.55);

  /* ---- type ---- */
  --script:  "Yellowtail", cursive;
  --display: "Quicksand", ui-rounded, system-ui, sans-serif;
  --body:    "Nunito", system-ui, sans-serif;

  /* ---- rhythm ---- */
  --pad: clamp(56px, 8vw, 104px);
  --wrap: 1180px;
  --narrow: 760px;
  --ease: cubic-bezier(.22,.9,.28,1);

  /* organic photo shapes — the bloom silhouette, reused */
  --blob-a: 58% 42% 44% 56% / 52% 46% 54% 48%;
  --blob-b: 44% 56% 58% 42% / 48% 54% 46% 52%;
  --blob-c: 52% 48% 40% 60% / 58% 42% 58% 42%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2.5px solid var(--coral-deep); outline-offset:3px; border-radius:4px; }

/* ---------- type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  color:var(--cocoa);
  line-height:1.18;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 5.4vw, 3.5rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing:-.028em; }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); }
h4{ font-size:1.02rem; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

/* the script face carries the personality — used sparingly, never for
   anything a reader has to scan quickly */
.script{
  font-family:var(--script);
  font-weight:400;
  color:var(--coral-deep);
  letter-spacing:.01em;
  line-height:1.35;
}

.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:11px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--gold));
  flex:0 0 26px;
}
.eyebrow.centred{ justify-content:center; }

.lede{ font-size:1.1rem; color:var(--ink-soft); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 26px; position:relative; z-index:2; }
.narrow{ max-width:var(--narrow); margin-inline:auto; }
.centred{ text-align:center; }
section{ position:relative; }
.pad{ padding:var(--pad) 0; }
.pad-sm{ padding:calc(var(--pad) * .62) 0; }
.tint{ background:var(--milk); }

/* the washes bleed in from the margins so the reading column stays clear,
   exactly the composition of the card this palette came from */
.washed::before,
.washed::after{
  content:""; position:absolute; top:0; bottom:0; width:min(26vw,360px);
  background-repeat:no-repeat; background-size:100% 100%;
  pointer-events:none; z-index:0; opacity:.68;
}
.washed::before{ left:0;  background-image:url("../img/wash-left.webp");  background-position:left center; }
.washed::after { right:0; background-image:url("../img/wash-right.webp"); background-position:right center; }
@media (max-width:860px){
  .washed::before,.washed::after{ width:40vw; opacity:.42; }
}

/* ==========================================================================
   HEADER — logo centred, navigation split either side
   ========================================================================== */
.topbar{
  background:var(--cocoa);
  color:#F6EAE2;
  font-size:.79rem;
  letter-spacing:.03em;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:38px; padding-block:7px;
}
.topbar a:hover{ color:var(--gold); }
.topbar .tb-left{ display:flex; align-items:center; gap:9px; }
.topbar .tb-right{ display:flex; align-items:center; gap:20px; }
.topbar .pip{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 6px; }
@media (max-width:760px){ .topbar .tb-left{ display:none; } .topbar .wrap{ justify-content:center; } }

.masthead{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-block:6px;
}

.crest{ justify-self:center; display:block; transition:transform .3s var(--ease); }
.crest img{
  width:clamp(124px, 14.5vw, 186px);
  height:auto;
  transition:width .28s var(--ease);
}
.crest:hover{ transform:translateY(-2px); }
.masthead.compact .crest img{ width:clamp(76px, 8.5vw, 104px); }

.mainnav{ display:flex; align-items:center; gap:4px; }
.mainnav.right{ justify-content:flex-end; }
.mainnav a{
  font-family:var(--display); font-weight:600; font-size:.925rem;
  color:var(--cocoa-deep);
  padding:9px 13px; border-radius:10px;
  position:relative; white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.mainnav a:hover{ color:var(--coral-deep); background:var(--milk); }
.mainnav a[aria-current="page"]{ color:var(--coral-deep); }
.mainnav a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--gold));
}

.navdl{
  display:inline-flex; align-items:center; gap:9px;
  margin-left:6px; padding:6px 16px 6px 7px; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:.9rem;
  color:var(--cocoa-deep); border:1.5px solid var(--line-2);
  white-space:nowrap;
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.navdl:hover{ border-color:var(--coral); color:var(--coral-deep); background:var(--milk); }

/* the icon carries the colour so the button itself can stay quiet */
.navdl-ic{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:10px; color:#fff;
  background:linear-gradient(145deg, var(--blush) 0%, var(--coral) 48%, var(--coral-deep) 100%);
  box-shadow:0 4px 11px -5px rgba(210,130,95,.85);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.navdl:hover .navdl-ic{ transform:translateY(-1px); box-shadow:0 8px 15px -6px rgba(210,130,95,.95); }
.navdl:active .navdl-ic{ transform:translateY(0) scale(.94); }
.navdl-ic svg,
.drawer-dl .navdl-ic svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
}

.drawer-dl{
  display:flex; align-items:center; gap:11px;
  margin-top:10px; padding:10px 14px 10px 10px; border-radius:14px;
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  color:var(--cocoa-deep); border:1.5px solid var(--line-2);
}
.drawer-dl:hover{ border-color:var(--coral); color:var(--coral-deep); }
.drawer-dl .navdl-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:12px; }
.drawer-dl:hover .navdl-ic{ transform:translateY(-1px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.005em;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,var(--coral) 0%,var(--coral-deep) 100%);
  color:#fff; box-shadow:0 12px 26px -12px rgba(210,130,95,.75);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(210,130,95,.85); }
.btn-ghost{ border:1.5px solid var(--line-2); color:var(--cocoa); background:rgba(255,255,255,.7); }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral-deep); transform:translateY(-2px); }
.btn-sm{ padding:10px 20px; font-size:.875rem; }
.btn:active{ transform:translateY(0); }

.burger{
  display:none; width:42px; height:42px; border-radius:12px;
  align-items:center; justify-content:center; color:var(--cocoa);
  grid-column:1; grid-row:1; justify-self:start;
}
.callbtn{
  display:none; width:42px; height:42px; border-radius:12px;
  align-items:center; justify-content:center; color:var(--cocoa);
  grid-column:3; grid-row:1; justify-self:end;
}
.callbtn:hover{ background:var(--milk); color:var(--coral-deep); }
.callbtn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.burger:hover{ background:var(--milk); }
.burger span{ display:block; width:20px; height:2px; border-radius:2px; background:currentColor; position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .22s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

@media (max-width:980px){
  /* logo stays dead centre; menu left, call right */
  .masthead .wrap{ grid-template-columns:44px 1fr 44px; }
  .mainnav{ display:none; }
  .burger,.callbtn{ display:flex; }
  .crest{ grid-column:2; grid-row:1; justify-self:center; }
  .crest img{ width:clamp(104px,27vw,132px); }
}

/* slide-out menu */
.veil{
  position:fixed; inset:0; z-index:95;
  background:rgba(107,78,58,.42); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.veil.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; z-index:96; top:0 ; right:0; bottom:0;
  width:min(330px,86vw);
  background:var(--white);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.drawer.open{ transform:none; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.drawer-top img{ width:72px; }
.drawer .burger{ display:flex; grid-column:auto; justify-self:auto; }
.drawer nav{ display:flex; flex-direction:column; gap:2px; }
.drawer nav a{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--cocoa-deep); padding:13px 14px; border-radius:12px;
}
.drawer nav a:hover,.drawer nav a[aria-current="page"]{ background:var(--milk); color:var(--coral-deep); }
.drawer .btn{ margin-top:18px; width:100%; }
.drawer-foot{ margin-top:auto; padding-top:22px; font-size:.86rem; color:var(--ink-soft); line-height:1.7; }
.drawer-foot a{ color:var(--coral-deep); font-weight:600; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(52px,8vw,92px) 0 clamp(48px,7vw,80px);
  background:var(--white);
}
.hero::before{
  content:""; position:absolute; inset:-2% -2% auto -2%; height:104%;
  background:url("../img/wash-hero.webp") center/cover no-repeat;
  opacity:.82;
  z-index:0; animation:driftHero 44s ease-in-out infinite alternate;
}
/* a whisper of white under the words, so the headline never fights the wash */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 44% 58% at 50% 46%,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 76%);
}
@keyframes driftHero{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.06) translateY(-14px); } }

.hero .wrap{ text-align:center; }
.hero-kicker{
  font-family:var(--display); font-weight:700;
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:20px;
}
.hero h1{ margin-bottom:6px; }
.hero h1 .script{
  display:block;
  font-size:clamp(2.4rem,6.4vw,4.4rem);
  margin-top:.06em;
  line-height:1.15;
}
.hero .lede{ max-width:620px; margin:20px auto 0; }
.hero-actions{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* the facts strip — numbers a parent actually needs before they enquire */
.facts{
  display:grid; grid-template-columns:repeat(2,1fr);
  max-width:640px; margin-inline:auto;
  gap:2px; margin-top:clamp(40px,6vw,64px);
  background:var(--line); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.facts div{ background:rgba(255,255,255,.92); padding:22px 14px; text-align:center; }
.facts b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(.94rem,2.6vw,1.4rem); color:var(--coral-deep);
  letter-spacing:-.025em; line-height:1.25; white-space:nowrap;
}
.facts span{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.05em; }
@media (max-width:620px){
  .facts{ grid-template-columns:1fr 1fr; }
  .facts div{ padding:18px 10px; }
  .facts b{ font-size:clamp(.82rem,3.9vw,1rem); }
  .facts span{ font-size:.72rem; }
}

/* ==========================================================================
   ALTERNATING FEATURE BLOCKS  (the Paint Pots spine)
   ========================================================================== */
.feature{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,68px); align-items:center;
}
.feature.flip .feature-art{ order:2; }
@media (max-width:880px){
  .feature{ grid-template-columns:1fr; gap:32px; }
  .feature.flip .feature-art{ order:0; }
}

.feature-art{ position:relative; }
.feature-art img{
  width:100%;
  height:auto;                 /* without this the HTML height attribute wins
                                  and aspect-ratio is ignored entirely */
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--blob-a);
  box-shadow:var(--shadow);
  transition:border-radius 1.2s var(--ease);
}
.feature.flip .feature-art img{ border-radius:var(--blob-b); }
.feature-art:hover img{ border-radius:var(--blob-c); }

/* a bloom tucked behind the photo, echoing the card */
.feature-art::before{
  content:""; position:absolute; z-index:-1;
  width:62%; aspect-ratio:1; border-radius:50%;
  background:url("../img/bloom-corner.webp") center/contain no-repeat;
  top:-8%; left:-9%; opacity:.9;
}
.feature.flip .feature-art::before{ left:auto; right:-9%; top:auto; bottom:-8%; }

/* Stacked on a phone a tall portrait fills the whole screen and buries the
   words underneath it. An arch is shorter, and crops sky and ceiling rather
   than faces. This block must stay below the rules above — equal specificity
   means source order decides. */
@media (max-width:880px){
  .feature-art img,
  .feature.flip .feature-art img,
  .feature-art:hover img{
    aspect-ratio:5/4;
    border-radius:46% 46% 26px 26px / 32% 32% 26px 26px;
  }
  .feature-art::before,
  .feature.flip .feature-art::before{
    width:46%; top:-5%; left:-6%; right:auto; bottom:auto;
  }
}

.feature-body p{ color:var(--ink); }
.feature-body .btn{ margin-top:22px; }

/* ---------- inline link with a hand-drawn feel ---------- */
.tlink{
  font-family:var(--display); font-weight:700; color:var(--coral-deep);
  display:inline-flex; align-items:center; gap:7px;
  border-bottom:2px solid var(--sand); padding-bottom:2px;
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.tlink:hover{ border-color:var(--coral); gap:11px; }

/* ==========================================================================
   QUOTE BAND — the card, rebuilt as a section
   ========================================================================== */
.quoteband{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,116px) 0;
  text-align:center;
}
.quoteband::before{
  content:""; position:absolute; inset:0;
  background:url("../img/wash-band.webp") center/100% 100% no-repeat;
  opacity:.9; z-index:0;
}
.quoteband::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 46% 76% at 50% 50%,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 80%);
}
.quoteband blockquote{
  margin:0; position:relative; z-index:2;
  max-width:780px; margin-inline:auto;
}
.quoteband q{
  font-family:var(--script);
  font-size:clamp(1.6rem,4.4vw,2.9rem);
  color:var(--cocoa); line-height:1.42; quotes:none;
  display:block;
}
.quoteband cite{
  display:block; margin-top:22px;
  font-family:var(--display); font-style:normal; font-weight:600;
  font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* ==========================================================================
   VISION
   ========================================================================== */
.vision-more{
  max-width:820px; margin:clamp(34px,5vw,54px) auto 0; text-align:center;
}
.vision-more p{ color:var(--ink); }
.vision-pull{
  display:block; margin:26px auto;
  font-family:var(--script); color:var(--coral-deep);
  font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.4;
  max-width:18ch;
}
.vision-pull small{
  display:block; margin-top:12px;
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* ==========================================================================
   BROCHURE DOWNLOAD
   ========================================================================== */
.brochure{
  display:grid; grid-template-columns:290px 1fr;
  gap:clamp(28px,4.5vw,56px); align-items:center;
}
@media (max-width:820px){
  .brochure{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .brochure .ticks li{ text-align:left; }
  .brochure-body .eyebrow{ justify-content:center; }
}

.brochure-cover{
  display:block; position:relative;
  transition:transform .3s var(--ease);
}
.brochure-cover img{
  width:100%; max-width:290px; border-radius:6px 16px 16px 6px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
/* a spine, so it reads as a booklet rather than a flat picture */
.brochure-cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
  border-radius:6px 0 0 6px; z-index:2;
  background:linear-gradient(90deg, rgba(142,106,80,.22), rgba(142,106,80,.03));
}
.brochure-cover:hover{ transform:translateY(-5px) rotate(-1.2deg); }

.brochure-body h2{ margin-bottom:12px; }
.brochure-body .btn{ margin-top:22px; }
.brochure-meta{
  margin-top:14px; font-size:.83rem; color:var(--ink-soft);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.brochure-meta .sep{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

/* ==========================================================================
   CARD GRIDS
   ========================================================================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:880px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px;
  padding:30px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card h3{ margin-bottom:9px; }
.card p{ font-size:.96rem; color:var(--ink-soft); }

.card-mark{
  width:52px; height:52px; border-radius:var(--blob-a);
  display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,var(--blush),var(--sand));
  color:var(--cocoa);
}
.card-mark svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card:nth-child(2) .card-mark{ background:linear-gradient(140deg,var(--coral),var(--blush)); }
.card:nth-child(3) .card-mark{ background:linear-gradient(140deg,var(--gold),var(--sand)); }

/* a tick list that reads as care rather than spec */
/* the marker is positioned rather than a flex child, so a bold label and the
   text after it stay on one flowing line instead of splitting into columns */
.ticks li{
  position:relative; padding:6px 0 6px 27px;
  font-size:.95rem; color:var(--ink-soft);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:11px;
  width:16px; height:16px; border-radius:50%;
  background:var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E6A50' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal-rail{
  display:flex; gap:18px; overflow-x:auto; padding:8px 26px 26px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gal-rail::-webkit-scrollbar{ display:none; }
.gal-rail .gal-item{
  flex:0 0 clamp(210px,26vw,278px); margin:0; scroll-snap-align:center;
  display:block;
}
.gal-rail img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--blob-a);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-radius .8s var(--ease);
}
.gal-rail .gal-item:nth-child(even) img{ border-radius:var(--blob-b); }
.gal-rail .gal-item:hover img{ transform:translateY(-5px) rotate(-1deg); border-radius:var(--blob-c); }
.gal-rail .cap{
  display:block; margin-top:13px; text-align:center;
  font-family:var(--display); font-weight:600; font-size:.88rem; color:var(--cocoa);
  transition:color .18s var(--ease);
}
.gal-rail .gal-item:hover .cap{ color:var(--coral-deep); }
.gal-rail .cap small{ display:block; font-family:var(--body); font-weight:400; color:var(--ink-soft); font-size:.8rem; }

/* full gallery grid */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .gal-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
.gal-grid figure{ margin:0; }
.gal-grid img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:26px; box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
  cursor:zoom-in;
}
.gal-grid figure:hover img{ transform:scale(1.02); box-shadow:var(--shadow); }
.gal-grid figcaption{ margin-top:10px; font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--cocoa); }
.gal-grid figcaption small{ display:block; font-family:var(--body); font-weight:400; font-size:.79rem; color:var(--ink-soft); }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(70,50,38,.92); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(92vw,940px); max-height:84vh; border-radius:20px; box-shadow:var(--shadow-lg); }
.lightbox .lb-cap{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  color:#F7EDE6; font-family:var(--display); font-weight:600; font-size:.95rem;
}
.lightbox button{
  position:absolute; top:20px; right:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; font-size:1.4rem;
}
.lightbox button:hover{ background:rgba(255,255,255,.3); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.voices{ position:relative; }
.voice{
  display:none; text-align:center; max-width:720px; margin-inline:auto;
  animation:voiceIn .5s var(--ease);
}
.voice.on{ display:block; }
@keyframes voiceIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.voice p{
  font-size:clamp(1.05rem,2.2vw,1.28rem); line-height:1.7; color:var(--cocoa-deep);
  font-style:italic;
}
.voice footer{
  margin-top:22px; font-family:var(--display); font-weight:700;
  font-size:1rem; letter-spacing:-.01em; color:var(--cocoa);
}
.voice footer span{
  display:block; margin-top:5px;
  font-family:var(--body); font-weight:600; font-size:.75rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft);
}
.voice-quote{
  font-family:var(--script); font-size:3.4rem; color:var(--blush);
  line-height:1; margin-bottom:6px; display:block;
}
.voice-dots{ display:flex; gap:9px; justify-content:center; margin-top:30px; }
.voice-dots button{
  width:9px; height:9px; border-radius:50%; background:var(--line-2);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.voice-dots button[aria-selected="true"]{ background:var(--coral-deep); transform:scale(1.35); }

/* ==========================================================================
   NEWS / UPDATES
   ========================================================================== */
.post{ display:block; }
.post img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:20px; box-shadow:var(--shadow-sm);
  transition:transform .26s var(--ease);
}
a.post:hover img{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post time{
  display:block; margin:16px 0 7px;
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--coral-deep);
}
.post h3{ font-size:1.1rem; }
.post p{ font-size:.93rem; color:var(--ink-soft); margin-top:7px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:16px; }
.field label{
  display:block; margin-bottom:7px;
  font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--cocoa-deep);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px;
  font-family:var(--body); font-size:.98rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line-2); border-radius:14px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(228,168,144,.22);
}
.field textarea{ min-height:118px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.detail{
  display:flex; gap:15px; align-items:flex-start;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.detail:last-of-type{ border-bottom:0; }
.detail .ico{
  flex:0 0 42px; width:42px; height:42px; border-radius:var(--blob-a);
  background:linear-gradient(140deg,var(--blush),var(--sand));
  display:grid; place-items:center; color:var(--cocoa);
}
.detail .ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.detail h4{ margin-bottom:2px; }
.detail p,.detail a{ font-size:.96rem; color:var(--ink-soft); }
.detail a:hover{ color:var(--coral-deep); }

.form-note{
  margin-top:14px; font-size:.85rem; color:var(--ink-soft);
  display:flex; gap:9px; align-items:flex-start;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--cocoa);
  color:#EFE0D6;
  padding:clamp(48px,7vw,76px) 0 0;
  margin-top:0;
}
.foot a{ color:#EFE0D6; }
.foot a:hover{ color:var(--gold); }
.foot h4{
  color:#fff; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:16px; opacity:.72;
}
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,6vw,64px); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr; gap:34px; } }

.foot-brand img{ width:104px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.94; }
.foot-brand p{ font-size:.92rem; line-height:1.75; opacity:.82; max-width:34ch; }
.foot ul li{ margin-bottom:10px; font-size:.93rem; opacity:.86; }

.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.badges span{
  padding:6px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.06em;
  opacity:.9;
}
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  display:grid; place-items:center;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.socials a:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; fill:currentColor; }

.foot-base{
  margin-top:clamp(34px,5vw,52px);
  border-top:1px solid rgba(255,255,255,.16);
  padding:22px 0 26px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.82rem; opacity:.72;
}

/* ==========================================================================
   PAGE HEADERS (inner pages)
   ========================================================================== */
.pagehead{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(46px,7vw,80px) 0 clamp(40px,6vw,64px);
}
.pagehead::before{
  content:""; position:absolute; inset:0;
  background:url("../img/wash-band.webp") center/100% 100% no-repeat;
  opacity:.85; z-index:0;
}
.pagehead::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 48% 76% at 50% 50%,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 80%);
}
.pagehead .script{ font-size:clamp(1.5rem,3.6vw,2.1rem); display:block; margin-bottom:2px; }
.pagehead p{ max-width:600px; margin:16px auto 0; color:var(--ink-soft); }
.crumbs{
  font-size:.79rem; color:var(--ink-soft); margin-bottom:16px;
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--display); font-weight:600;
}
.crumbs a:hover{ color:var(--coral-deep); }

/* ==========================================================================
   MOTION — reveal on scroll
   ========================================================================== */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rise.seen{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.08s; } .rise.d2{ transition-delay:.16s; } .rise.d3{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rise{ opacity:1; transform:none; }
  .hero::before{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* print — parents do print the fees page */
@media print{
  .masthead,.topbar,.foot,.drawer,.veil,.hero::before,.washed::before,.washed::after{ display:none !important; }
  body{ font-size:12pt; }
  .card{ break-inside:avoid; }
}