@font-face{
  font-family:'Tierra';
  src:url("/assets/tierra.otf") format('opentype');
  font-display:swap;
}

/* -------------------------------------------------------------------
   PALETTES. Switch live with the control bottom-right.
   Each palette sets a background and a text colour per panel
   (--warm/--on-warm, --cool/--on-cool), so a pale panel can carry dark
   text while a solid one carries white. Every pairing clears WCAG AA
   (4.5:1) for body text.
   ------------------------------------------------------------------- */
:root{
  --display:'Tierra','Trebuchet MS',system-ui,sans-serif;
  --text:'Carlito','Calibri',system-ui,sans-serif;
  --gutter:clamp(1.5rem,6vw,5.5rem);
  --field:rgba(255,255,255,.86);
}

/* PALETTE - terracotta #A96145 with denim blue #5A7996, hue 209 and saturation
   25 held from the earlier set. 47% lightness is the ceiling: white body text
   lands at 4.55:1 there and drops below the 4.5 threshold at 48%.
   The ochre accent is retired - on colour panels the rules are white, and on
   cream they are deep terracotta #8E4E36 (5.62:1). */
html[data-palette="numu"]{
  --page:#F5F0E9;
  --warm:#A96145; --on-warm:#FFFFFF;
  --cool:#5A7996; --on-cool:#FFFFFF;
  --ink:#33322B; --muted:#7A776C; --deep:#8E4E36;
  --accent:#8E4E36;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--text);line-height:1.7;
  font-size:clamp(1rem,.96rem + .22vw,1.12rem);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}

.tierra{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.055em;
  line-height:1.22;
  margin:0;
}
.t-sec{font-size:clamp(1.45rem,1.22rem + 1.05vw,2.1rem)}
.t-sec::after{
  content:"";display:block;width:3.2rem;height:2px;
  background:var(--accent);margin-top:1.05rem;
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.1rem var(--gutter);
  background:var(--page);position:sticky;top:0;z-index:50;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
}
.masthead__logo{height:40px;width:auto;color:var(--ink)}
.masthead nav{display:flex;flex:1 1 auto;justify-content:center;gap:clamp(1rem,2.6vw,2.4rem);flex-wrap:wrap}
.masthead a{
  text-decoration:none;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.masthead a:hover{color:var(--ink);border-bottom-color:var(--deep)}
.burger{
  display:none;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;margin-right:-.4rem;
  border:0;background:none;cursor:pointer;padding:0;
}
.burger__box{display:block;width:1.25rem;height:.85rem;position:relative}
.burger__box span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--ink);transition:transform .25s,opacity .2s;
}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:50%;margin-top:-1px}
.burger__box span:nth-child(3){bottom:0}
.burger__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.masthead[data-open="true"] .burger__box span:nth-child(1){transform:translateY(.415rem) rotate(45deg)}
.masthead[data-open="true"] .burger__box span:nth-child(2){opacity:0}
.masthead[data-open="true"] .burger__box span:nth-child(3){transform:translateY(-.415rem) rotate(-45deg)}

@media (max-width:900px){
  .masthead{gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
  .burger{display:flex}
  .masthead nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:flex-start;
    gap:0;padding:.5rem var(--gutter) 1.25rem;
    background:var(--page);
    border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
    box-shadow:0 14px 24px -18px rgba(0,0,0,.4);
  }
  .masthead[data-open="true"] nav{display:flex}
  .masthead nav a{
    width:100%;padding:.85rem 0;font-size:.95rem;
    border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  }
  .masthead nav a:last-child{border-bottom:0}
  .masthead__logo{height:34px}
}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:clamp(32rem,96vh,62rem);overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,30,24,.56) 0%,rgba(28,30,24,.46) 16%,rgba(28,30,24,.42) 34%,rgba(28,30,24,.26) 50%,rgba(28,30,24,.12) 72%,rgba(28,30,24,.44) 100%);
}
.hero__logo{
  position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(230px,29vw,430px);height:auto;color:#fff;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.5));
}

/* ---------- panel + photo bands ---------- */
.duo{display:grid;grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){
  .duo{grid-template-columns:44fr 56fr}
  .duo--photoLeft{grid-template-columns:38fr 62fr}
  .duo--photoLeft .duo__panel{order:2}
}
.duo__panel{
  position:relative;overflow:hidden;
  padding:clamp(2.75rem,6vw,6rem) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
}
.duo__panel--warm{background:var(--warm);color:var(--on-warm)}
.duo__panel--cool{background:var(--cool);color:var(--on-cool)}
.duo__panel .tierra{color:inherit}
.duo__panel p{max-width:40rem;font-size:1.04rem}
.duo__media{min-height:22rem}
.duo__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.duo__body{margin-top:1.9rem}

/* the days panel carries five rows. Keep it centred like the others so the
   section reads balanced, and give the heading its breathing room via the
   list margin rather than by shifting the whole block. */
.duo--photoLeft .duo__panel{
  padding-top:clamp(2.5rem,5vw,5rem);
  padding-bottom:clamp(2.5rem,5vw,5rem);
}
/* nudge the days heading and its rule up on their own - relative, so nothing
   else in the panel shifts */
.duo--photoLeft .duo__panel .t-sec{position:relative;top:-1.5rem}
@media (max-width:900px){
  /* single column here, so match the Our approach section's rhythm rather than
     the tighter two-column one */
  .duo--photoLeft .duo__panel{
    padding-top:clamp(3.5rem,8vw,4.5rem);
    padding-bottom:clamp(3.5rem,8vw,4.5rem);
  }
  .duo--photoLeft .duo__panel .t-sec{top:0}
  .facts{margin-top:2.4rem}
}

/* the sunburst from the mark, bled off the panel edge. Earthwise has no
   symbol of its own, so this is the cheapest real point of difference. */
.burst{
  position:absolute;pointer-events:none;
  width:min(56%,26rem);height:auto;aspect-ratio:1;
  right:0;bottom:0;transform:translate(20%,28%);
  opacity:.13;color:currentColor;
}
.touch .burst{right:auto;left:0;bottom:0;transform:translate(-22%,32%);width:min(42%,22rem)}
.burst use{color:inherit}
.duo__panel > *:not(.burst),.touch__grid{position:relative;z-index:1}
.duo__body p + p{margin-top:1.4rem}

.slot{
  width:100%;height:100%;min-height:26rem;
  display:grid;place-items:center;padding:2rem;text-align:center;
  background:
    radial-gradient(110% 90% at 25% 20%, color-mix(in srgb,var(--cool) 70%,transparent) 0%, transparent 62%),
    radial-gradient(100% 90% at 80% 85%, color-mix(in srgb,var(--warm) 62%,transparent) 0%, transparent 58%),
    color-mix(in srgb,var(--page) 78%, #D9D2C4);
}
.slot span{
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 68%,transparent);max-width:24ch;line-height:1.7;
}

/* buttons - readable on both light and deep panels */
.btn-line{
  display:inline-block;align-self:flex-start;margin-top:2.5rem;
  padding:.85em 2.4em;border-radius:999px;text-decoration:none;
  border:1px solid currentColor;color:inherit;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .22s,color .22s;
}
.btn-line:hover{background:currentColor;color:var(--warm)}
.btn-solid{
  display:inline-block;margin-top:2.5rem;padding:1em 3.4em;
  border-radius:999px;background:var(--page);color:var(--deep);
  text-decoration:none;font-size:.95rem;transition:transform .2s,opacity .2s;
}
.btn-solid:hover{transform:translateY(-1px);opacity:.92}

/* ---------- 3. our approach ---------- */
.prose{padding:clamp(3.5rem,8vw,7.5rem) var(--gutter)}
.prose__inner{max-width:46rem;margin:0 auto}
.prose .tierra{color:var(--ink);margin-bottom:1.9rem}
.prose p{margin:0}
.prose p + p{margin-top:1.5rem}
.prose__inner > div{margin-top:1.5rem}
.prose__inner > div + div{margin-top:0}
.prose__open{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem);line-height:1.5}

/* ---------- 4. the shape of our days ---------- */
.facts{list-style:none;margin:3.4rem 0 0;padding:0;display:grid;gap:1.55rem}
.facts li{display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;align-items:start}
.facts .k{
  font-family:var(--display);text-transform:uppercase;
  font-size:.8rem;letter-spacing:.08em;
  color:inherit;padding-top:.3rem;
}
.facts p{margin:0;font-size:1.04rem;color:inherit;max-width:none}
@media (max-width:640px){
  .facts li{grid-template-columns:1fr;gap:.35rem}
}

/* ---------- 5. get in touch ---------- */
.touch{position:relative;overflow:hidden;background:var(--warm);color:var(--on-warm);padding:clamp(3rem,7vw,6.5rem) var(--gutter)}
.touch__grid{
  max-width:78rem;margin:0 auto;display:grid;
  grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);
}
@media (min-width:940px){.touch__grid{grid-template-columns:1fr 1fr}}
.touch .tierra{color:inherit;margin-bottom:1.9rem}
.touch__list{margin:1.6rem 0 0;padding:0;list-style:none}
.touch__list li{margin-top:1rem;padding-left:1.1rem;position:relative}
.touch__list li::before{content:"-";position:absolute;left:0}
.touch__note{margin-top:1.8rem;max-width:34rem}
.steps{counter-reset:s;list-style:none;margin:2rem 0 0;padding:0;max-width:34rem}
.steps li{counter-increment:s;margin-top:1.3rem}
.steps strong{
  display:block;font-weight:400;
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.06em;font-size:.9rem;margin-bottom:.15rem;
}
.steps strong::before{content:counter(s) " - "}

.form{display:grid;gap:1.25rem}
.form label{display:block;font-size:.95rem;margin-bottom:.4rem;color:inherit}
.form .req{opacity:.62;font-size:.85rem}
.form input,.form textarea{
  width:100%;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:3px;background:var(--field);
  padding:.7rem .8rem;font-family:var(--text);font-size:1rem;color:var(--ink);
}
.form textarea{min-height:7rem;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.form button{
  justify-self:start;margin-top:.5rem;border:0;border-radius:6px;cursor:pointer;
  background:var(--page);color:var(--deep);
  padding:.85em 2.4em;font-family:var(--text);font-size:.98rem;
}
.form__msg{margin:0;font-size:.9rem;opacity:.9;min-height:1.3em}
.form__msg[data-state="error"]{color:#FFE2D6}
.form__alt{margin:.2rem 0 0;font-size:.85rem;opacity:.75}
.form__alt a{color:inherit}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{outline:2px solid #FFD2C2;outline-offset:1px}

/* ---------- footer ---------- */
.foot{padding:3rem var(--gutter);text-align:center;background:var(--page)}
.foot__logo{height:66px;width:auto;margin:0 auto 1.6rem;color:var(--ink);display:block}
.foot__links{display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
.foot__links a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.foot__links a:hover{color:var(--ink)}
.foot p{
  margin:0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.2em;font-size:.72rem;color:var(--muted);
}

[hidden]{display:none!important}
section[id]{scroll-margin-top:clamp(4.5rem,11vw,7rem)}

.intro{padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(1.5rem,3vw,2.5rem)}
.intro__inner{max-width:74rem;margin:0 auto}
.intro p{max-width:34rem;margin:1.6rem 0 0}
.people{padding:clamp(1rem,3vw,2rem) var(--gutter) clamp(3.5rem,7vw,6.5rem)}
.people__inner{max-width:82rem;margin:0 auto}
.roster{
  list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(2.25rem,3.5vw,3rem) clamp(1.4rem,2.4vw,2.25rem);
  grid-template-columns:repeat(2,1fr);align-items:start;
}
@media (min-width:700px){.roster{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.roster{grid-template-columns:repeat(4,1fr)}}
.member{display:block}
.member__shot{
  width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;margin-bottom:1rem;
  background:color-mix(in srgb,var(--page) 78%,#D9D2C4);
}
.member__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.member__name{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(1rem,.96rem + .3vw,1.18rem);color:var(--ink);
  margin:0 0 .3rem;text-align:center;line-height:1.25;min-height:1.25em;
}
.member__role{
  margin:0;font-size:.72rem;letter-spacing:.09em;line-height:1.5;
  text-transform:uppercase;color:var(--accent);text-align:center;
  min-height:calc(1.5em * 3);
  text-wrap:balance;
}
.member__more{margin-top:.85rem}
.member__more summary{
  list-style:none;cursor:pointer;text-align:center;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:.35rem 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  transition:color .2s;
}
.member__more summary::-webkit-details-marker{display:none}
.member__more summary::after{content:" +";color:var(--accent)}
.member__more[open] summary::after{content:" \2013"}
.member__more summary:hover{color:var(--ink)}
.member__bio{padding-top:.85rem}
.member__bio p{margin:0;font-size:.9rem;line-height:1.6}
.member__bio p + p{margin-top:.75rem}

/* Two columns give about 22 characters a line on a phone, which is three
   words. When a bio is opened below the 3-column breakpoint, let that card
   take the whole row so the text has a readable measure. */
@media (max-width:699px){
  .member.is-open{grid-column:1 / -1}
  .member.is-open .member__shot{max-width:14rem;margin-left:auto;margin-right:auto}
  .member.is-open .member__bio p{font-size:.96rem}
}
.masthead a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---- page header band, so the inner pages have their own identity
        instead of borrowing the home page's photo hero ---- */
.pagehead{
  position:relative;overflow:hidden;
  background:var(--warm);color:var(--on-warm);
  padding:clamp(3.25rem,7vw,6.5rem) var(--gutter);
}
.pagehead__inner{max-width:74rem;margin:0 auto;position:relative;z-index:1}
.pagehead .tierra{color:inherit}
.pagehead__eyebrow{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.22em;font-size:.7rem;opacity:.78;margin:0 0 1.2rem;
}
.pagehead__lede{
  max-width:38rem;margin:1.7rem 0 0;
  font-size:clamp(1.04rem,1rem + .32vw,1.2rem);
}
.pagehead .burst{right:0;bottom:0;transform:translate(16%,40%);width:min(40%,20rem);opacity:.15}

/* ---- full-bleed image band ---- */
.figure{margin:0;width:100%;height:clamp(17rem,44vh,29rem);overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ---- prose section carrying the mark without a tint ---- */
.prose--mark{position:relative;overflow:hidden}
.prose--mark .prose__inner{position:relative;z-index:1}
.prose--mark .burst{left:0;top:0;right:auto;bottom:auto;transform:translate(-30%,-34%);width:min(34%,17rem);opacity:.07}
.prose--mark h1{margin-bottom:1.9rem}
.ask{
  margin:1.8rem 0 2.5rem;padding-left:1.4rem;
  border-left:2px solid var(--accent);
  font-size:clamp(1.18rem,1.06rem + .6vw,1.5rem);
  line-height:1.4;color:var(--ink);max-width:32rem;
}

/* ---- content band ---- */
.band{padding:clamp(3rem,7vw,6.5rem) var(--gutter)}
.band--tint{background:color-mix(in srgb,var(--page) 93%,var(--warm))}
.band__inner{max-width:74rem;margin:0 auto}

/* ---- narrower measure for long-form bands ---- */
.band__inner--narrow{max-width:46rem}
.band__inner--narrow > .t-sec{margin-bottom:2rem}
.band__copy p{margin:0}
.band__copy p + p{margin-top:1.4rem}
.band__copy + .band__copy{margin-top:0}

/* ---- the line that carries the whole idea ---- */
.pullquote{
  margin:2.6rem 0;padding-left:1.5rem;
  border-left:3px solid var(--accent);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.045em;
  line-height:1.3;color:var(--ink);
  font-size:clamp(1.15rem,1.02rem + .7vw,1.6rem);
}
.pullquote span{display:block}
.pullquote span + span{opacity:.62}

/* ---- the three age groups ---- */
.groups{
  list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(2.25rem,4vw,3rem);grid-template-columns:1fr;
}
@media (min-width:860px){.groups{grid-template-columns:repeat(3,1fr)}}
.group{border-top:2px solid var(--accent);padding-top:1.4rem}
.group__age{
  margin:0 0 .5rem;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;color:var(--accent);
}
.group__title{
  margin:0 0 1.1rem;font-weight:400;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.25;
  font-size:clamp(1.08rem,1rem + .45vw,1.32rem);
}
.group__body p{margin:0;font-size:.97rem}
.group__body p + p{margin-top:.9rem}

/* ---- blue statement panel ---- */
.panel--cool{background:var(--cool);color:var(--on-cool)}
.statement{
  margin:2.2rem 0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.045em;line-height:1.3;color:inherit;
  font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
  padding-left:1.5rem;border-left:3px solid currentColor;
}
.panel p + p{margin-top:1.4rem}

/* ---- the six pillars: numbered, ochre rule above each ---- */
.pillars{display:grid;gap:clamp(2rem,3.4vw,3rem) clamp(1.5rem,2.6vw,2.6rem);grid-template-columns:1fr;margin-top:3.2rem}
@media (min-width:700px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{border-top:2px solid var(--accent);padding-top:1.35rem}
.pillar__n{
  display:block;font-family:var(--display);font-size:.76rem;
  letter-spacing:.16em;color:var(--accent);margin-bottom:.75rem;
}
.pillar h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1rem,.95rem + .3vw,1.14rem);line-height:1.3;
  margin:0 0 .85rem;color:var(--ink);
}
.pillar p{margin:0;font-size:.97rem;max-width:none}

/* ---- full-width colour panel for a single passage ---- */
.panel{
  position:relative;overflow:hidden;
  background:var(--warm);color:var(--on-warm);
  padding:clamp(3rem,7vw,6.5rem) var(--gutter);
}
.panel__inner{max-width:46rem;margin:0 auto;position:relative;z-index:1}
.panel .tierra{color:inherit;margin-bottom:1.9rem}
.panel p{max-width:none}
.panel p + p{margin-top:1.4rem}
.panel .burst{left:0;top:0;right:auto;bottom:auto;transform:translate(-20%,-34%);width:min(38%,20rem);opacity:.14}

/* the ochre rule disappears on a clay ground, so use the panel text colour */
.pagehead .t-sec::after,.panel .t-sec::after,
.duo__panel .t-sec::after,.touch .t-sec::after{background:currentColor}

/* centred closing blocks: rule centred under the heading, copy held to about
   two lines rather than running the full width of the panel */
.cta .t-sec::after{margin-left:auto;margin-right:auto}
.cta p{max-width:30rem;margin-left:auto;margin-right:auto}

/* ---- gallery: a horizontal reel, scrolled by drag, wheel, arrows or keys ---- */
.reel-wrap{position:relative;margin-top:3rem}
.reel{
  display:flex;gap:clamp(.6rem,1.2vw,1rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:1rem;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent;
}
.reel:focus-visible{outline:2px solid var(--deep);outline-offset:4px}
.reel::-webkit-scrollbar{height:6px}
.reel::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:3px}
.reel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 26%,transparent);border-radius:3px}
.reel figure{
  margin:0;flex:0 0 auto;scroll-snap-align:start;
  height:clamp(13rem,30vw,20rem);
  min-width:9rem;
  border-radius:8px;overflow:hidden;
  background:color-mix(in srgb,var(--page) 78%,#D9D2C4);
}
.reel img{width:100%;height:100%;display:block;object-fit:cover}
.reel-nav{
  position:absolute;top:calc(50% - .5rem);transform:translateY(-50%);z-index:2;
  width:2.6rem;height:2.6rem;border-radius:50%;border:0;cursor:pointer;
  background:var(--page);color:var(--ink);
  font-size:1.35rem;line-height:1;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
  display:grid;place-items:center;
  transition:opacity .2s,transform .2s;
}
.reel-nav:hover{transform:translateY(-50%) scale(1.06)}
.reel-nav--prev{left:-.6rem}
.reel-nav--next{right:-.6rem}
.reel-nav[disabled]{opacity:.28;cursor:default;transform:translateY(-50%)}
@media (max-width:700px){.reel-nav{display:none}}


/* ---------- language ---------- */
html[data-lang="en"] [data-lang="es"],
html[data-lang="es"] [data-lang="en"]{display:none !important}

.langs{display:flex;align-items:center;gap:.1rem;flex:none}
.langs button{
  border:0;background:none;cursor:pointer;
  font-family:var(--text);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding:.3rem .45rem;border-radius:6px;
  transition:color .2s,background .2s;
}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent)}
.langs__sep{color:color-mix(in srgb,var(--ink) 28%,transparent);font-size:.7rem}
.masthead__end{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}

/* ---------- floating WhatsApp ---------- */
.wa{
  position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:60;width:3.4rem;height:3.4rem;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:#25D366;color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .2s,box-shadow .2s;
}
.wa:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(0,0,0,.28)}
.wa svg{width:1.75rem;height:1.75rem;display:block}
.wa__label{
  position:absolute;right:calc(100% + .7rem);white-space:nowrap;
  background:var(--ink);color:var(--page);
  font-size:.78rem;padding:.45em .8em;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.wa:hover .wa__label,.wa:focus-visible .wa__label{opacity:1}
@media (max-width:560px){.wa{width:3rem;height:3rem}.wa svg{width:1.55rem;height:1.55rem}.wa__label{display:none}}

/* ---------- FAQ accordion ---------- */
.qa__wrap{max-width:52rem;margin:0 auto}
.qa{border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.qa:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:1.35rem .25rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.94rem,.9rem + .28vw,1.08rem);line-height:1.35;color:var(--ink);
  transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.35em;
  width:.7rem;height:.7rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s;
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa summary:hover{color:var(--deep)}
.qa__body{padding:0 3rem 1.6rem .25rem}
.qa__body p{margin:0;max-width:44rem}
@media (max-width:560px){.qa__body{padding-right:1rem}}


.hero__h1{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ---------- school calendar, following the printed PDF ---------- */
.cal-band{padding-top:clamp(2rem,4vw,3rem)}
.cal-band .band__inner{max-width:86rem}
.cal-key{
  list-style:none;display:flex;flex-wrap:wrap;gap:1.6rem;margin:0 0 2.5rem;padding:.9rem 1.2rem;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:10px;font-size:.82rem;
}
.cal-key li{display:flex;align-items:center;gap:.55rem}
.k{width:1.05rem;height:1.05rem;border-radius:4px;display:block;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.k-sd{background:transparent}
.k-br{background:color-mix(in srgb,var(--warm) 26%,var(--page))}
.k-we{background:color-mix(in srgb,var(--ink) 6%,var(--page))}
.k-first{background:var(--warm);border-color:var(--warm)}

.cal-grid{display:grid;gap:clamp(.9rem,1.6vw,1.25rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.cal-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.cal-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1180px){.cal-grid{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1500px){.cal-grid{gap:1.5rem}}
.cal{
  margin:0;padding:.85rem .8rem 1rem;
  border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:10px;
}
.cal figcaption{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.8rem;color:var(--ink);margin-bottom:.6rem;
}
.cal figcaption b{font-weight:400;color:var(--muted);font-size:.72rem}
.cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{
  font-family:var(--display);font-size:.6rem;font-weight:400;letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink) 45%,transparent);padding-bottom:.3rem;
}
.cal td{text-align:center;font-size:.72rem;line-height:1;padding:.28rem 0;border-radius:4px;color:var(--ink)}
.cal td.we{color:color-mix(in srgb,var(--ink) 34%,transparent)}
.cal td.br{background:color-mix(in srgb,var(--warm) 26%,var(--page))}
.cal td.first{background:var(--warm);color:#fff}
.cal td.e{color:transparent}

.cal-h{margin-top:clamp(2.75rem,5vw,4rem)}
.keydates{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr;margin-top:2rem}
@media (min-width:820px){.keydates{grid-template-columns:repeat(2,1fr)}}
.keydates table{
  width:100%;border-collapse:collapse;
  border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:10px;overflow:hidden;
}
.keydates th,.keydates td{text-align:left;padding:.7rem .9rem;font-weight:400;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);font-size:.88rem}
.keydates tr:last-child th,.keydates tr:last-child td{border-bottom:0}
.keydates th{color:var(--ink);width:47%}
.keydates td{color:var(--deep)}
.cal-dl{margin-top:2.25rem}
@media (max-width:480px){.keydates th{width:auto;display:block;border:0;padding-bottom:.15rem}.keydates td{display:block;padding-top:0}}