:root{
  --mane:#E8B054; --mane-deep:#C98F35;
  --den:#388080; --den-deep:#2A6465;
  --cocoa:#503820; --cocoa-soft:#6B5136;
  --cream:#FDFBF7; --sand:#EFE7DA; --coral:#E8735A;
  --f-display:'Baloo 2',system-ui,sans-serif;
  --f-body:'Figtree',system-ui,sans-serif;
  --s0:1rem; --s1:1.25rem; --s2:1.5625rem; --s3:1.9375rem; --s4:2.4375rem; --s5:3.0625rem;
  --r:14px; --shadow:0 12px 32px rgba(80,56,32,.13); --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--cocoa);font-family:var(--f-body);
  font-size:var(--s0);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.14;margin:0;font-weight:600}
h1{font-size:clamp(2.3rem,5.4vw,var(--s5));letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.4vw,var(--s4));margin-bottom:.85rem;text-wrap:balance}
h3{font-size:var(--s2)}
h4{font-size:var(--s1)}
p{margin:0 0 1rem}
a{color:var(--den-deep)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.measure{max-width:62ch}

.btn{display:inline-block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  padding:.8em 1.5em;border-radius:999px;text-decoration:none;border:2px solid transparent;
  transition:background .15s ease,color .15s ease}
.btn:focus-visible{outline:3px solid var(--den);outline-offset:3px}
.btn-primary{background:var(--mane);color:var(--cocoa)}
.btn-primary:hover{background:var(--mane-deep)}
.btn-den{background:var(--den);color:#fff}
.btn-den:hover{background:var(--den-deep)}
.btn-ghost{border-color:var(--cocoa);color:var(--cocoa)}
.btn-ghost:hover{background:var(--cocoa);color:var(--cream)}
.btn-light{background:var(--mane);color:var(--cocoa)}
.btn-light:hover{background:#fff}

/* header */
header{background:var(--cream);border-bottom:1px solid rgba(80,56,32,.1)}
.bar{display:flex;align-items:center;gap:2rem;padding:12px 24px;max-width:var(--wrap);margin:0 auto}
.bar img{height:76px;width:auto}
nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
nav a{font-weight:500;color:var(--cocoa);text-decoration:none}
nav a:hover{color:var(--den-deep);text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{position:relative;background:var(--cocoa);overflow:hidden}
.hero-img{width:100%;height:clamp(430px,58vh,580px);object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(46,28,12,.84) 0%,rgba(46,28,12,.72) 34%,
  rgba(46,28,12,.42) 62%,rgba(46,28,12,.08) 88%)}
.hero-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:center;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hero-copy>*{max-width:15ch}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(40,26,12,.5)}
.hero p{color:#fff;font-size:var(--s1);max-width:56ch;margin-top:1.1rem;text-wrap:balance;
  text-shadow:0 2px 18px rgba(40,26,12,.6)}
.ribbon{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;background:var(--coral);
  color:#fff;font-family:var(--f-display);font-weight:600;padding:.42em 1em;border-radius:999px;
  font-size:.95rem;margin-bottom:1.1rem;max-width:none}
.ribbon svg{width:17px;height:17px;fill:currentColor;flex:none}

/* three offerings */
.offers{max-width:var(--wrap);margin:-70px auto 0;padding:0 24px;position:relative;z-index:2}
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offer{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.offer img{height:170px;object-fit:cover;width:100%}
.offer-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.offer h3{color:var(--den-deep);margin-bottom:.35rem}
.offer .price{font-family:var(--f-display);font-weight:600;color:var(--mane-deep);margin-bottom:.5rem}
.offer p{font-size:.96rem;flex:1}
.offer .btn{align-self:flex-start;margin-top:.6rem;font-size:.98rem}

section{padding:80px 0}
.sand{background:var(--sand)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--shadow)}
#members .split{align-items:stretch}
#members .photo{position:relative;min-height:360px}
#members .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 84%}

/* ---------- membership chart ---------- */
.chart-card{background:#fff;border-radius:var(--r);padding:30px 30px 24px;box-shadow:var(--shadow);margin:1.6rem 0}
.chart{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:230px;
  border-bottom:2px solid rgba(80,56,32,.25);position:relative;padding-bottom:0}
.memline{position:absolute;left:0;right:0;bottom:120px;border-top:2px dashed var(--den);z-index:2}
.memline span{position:absolute;left:0;top:-2.15em;background:var(--den);color:#fff;
  font-family:var(--f-display);font-weight:600;font-size:.8rem;padding:.15em .6em;border-radius:999px;white-space:nowrap}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.bar-over{background:var(--coral);border-radius:6px 6px 0 0}
.bar-base{background:var(--mane)}
.col.be .bar-base{background:var(--den)}
.bar-base:only-child{border-radius:6px 6px 0 0}
.col .cap{position:absolute;top:-1.5em;left:0;right:0;text-align:center;
  font-family:var(--f-display);font-weight:600;font-size:.78rem;color:var(--cocoa-soft)}
.xaxis{display:flex;gap:clamp(6px,1.4vw,14px);margin-top:.5rem}
.xaxis div{flex:1;text-align:center;font-size:.82rem;color:var(--cocoa-soft)}
.xaxis div.be{color:var(--den-deep);font-weight:600}
.chart-lede{font-family:var(--f-display);font-weight:600;font-size:var(--s2);
  color:var(--den-deep);line-height:1.25;margin-bottom:2.4rem}
.legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.1rem;font-size:.88rem;color:var(--cocoa-soft)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.key{width:13px;height:13px;border-radius:3px;flex:none}
.chart-foot{margin-top:1.1rem;padding-top:1rem;border-top:2px solid var(--sand);
  font-family:var(--f-display);font-weight:600;color:var(--cocoa);font-size:var(--s1);line-height:1.35}

ul.perks{list-style:none;padding:0;margin:0 0 1.6rem}
ul.perks li{padding:.42rem 0 .42rem 1.9rem;position:relative}
ul.perks li::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:10px;
  border-radius:50%;background:var(--mane)}

/* ---------- tier cards ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2rem}
.tier{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--shadow);
  border-top:5px solid var(--den);position:relative;display:flex;flex-direction:column}
.tier:nth-child(2){border-top-color:var(--mane)}
.tier:nth-child(3){border-top-color:var(--coral)}
.tier .thumb{position:absolute;top:22px;right:24px;width:88px;height:88px;border-radius:50%;
  object-fit:cover;border:4px solid #fff;box-shadow:0 4px 14px rgba(80,56,32,.22)}
.tier h3{color:var(--cocoa);padding-right:104px}
.tier .amt{font-family:var(--f-display);font-size:var(--s4);font-weight:700;color:var(--den-deep);
  line-height:1;margin:.35rem 0 1rem;padding-right:104px}
.tier ul{list-style:none;padding:0;margin:0 0 1.4rem;font-size:.95rem;flex:1}
.tier li{padding:.3rem 0 .3rem 1.6rem;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.82em;width:8px;height:8px;
  border-radius:50%;background:var(--mane)}
.tier:nth-child(1) li::before{background:var(--den)}
.tier:nth-child(3) li::before{background:var(--coral)}
.tier .btn{align-self:flex-start}

/* ---------- cafe ---------- */
.cafe{background:var(--cocoa);color:var(--cream)}
.cafe h2,.cafe h4{color:#fff}
.cafe .split{gap:52px}
.cafe img{box-shadow:none;border-radius:var(--r)}
.cafe-imgs{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
.cafe-imgs img{height:100%;width:100%;object-fit:cover}
.cafe-feats{display:grid;gap:1.1rem;margin:1.5rem 0 1.8rem}
.feat{display:flex;gap:.9rem;align-items:flex-start}
.feat svg{width:26px;height:26px;flex:none;fill:var(--mane);margin-top:2px}
.feat p{margin:0;font-size:.95rem;color:rgba(255,255,255,.86)}
.feat h4{margin-bottom:.1rem}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
table.hours{border-collapse:collapse;width:100%;max-width:420px}
table.hours th,table.hours td{text-align:left;padding:.5rem 0;
  border-bottom:1px dashed rgba(80,56,32,.2);font-size:1rem}
table.hours th{font-weight:500}
table.hours td{font-family:var(--f-display);font-weight:600;text-align:right}
.socials{display:flex;gap:12px;margin:1.3rem 0 1.6rem}
.socials a{width:46px;height:46px;border-radius:50%;background:var(--den);display:grid;
  place-items:center;transition:background .15s ease}
.socials a:hover{background:var(--den-deep)}
.socials svg{width:23px;height:23px;fill:#fff}
.socials a:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px}

/* ---------- closing band ---------- */
.band{background:#C8D9DC;color:var(--cocoa);padding:64px 0;text-align:center;
  border-top:1px solid rgba(56,128,128,.22)}
.band h2{color:var(--den-deep);margin-bottom:.4rem}
.band p{color:var(--cocoa-soft)}
.band-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:1.7rem}

/* ---------- footer ---------- */
footer{background:#fff;color:var(--cocoa-soft);padding:60px 0 0;font-size:.95rem;
  border-top:1px solid rgba(80,56,32,.12)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px}
footer h4{color:var(--den-deep);margin-bottom:.85rem;font-size:1.15rem}
footer a{color:var(--cocoa-soft);text-decoration:none}
footer a:hover{color:var(--den-deep);text-decoration:underline;text-underline-offset:3px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:.28rem 0}
.f-logo{display:inline-block;margin-bottom:1rem}
.f-logo img{height:82px;width:auto}
.f-hours{display:flex;justify-content:space-between;gap:1rem;padding:.24rem 0;max-width:260px}
.f-hours span:last-child{font-family:var(--f-display);font-weight:600;color:var(--cocoa);white-space:nowrap}
.f-social{display:flex;gap:10px;margin-top:1rem}
.f-social a{width:40px;height:40px;border-radius:50%;background:var(--den);display:grid;place-items:center}
.f-social a:hover{background:var(--mane)}
.f-social svg{width:20px;height:20px;fill:#fff}
.f-social a:hover svg{fill:var(--cocoa)}
.signup{display:flex;gap:8px;margin-top:.9rem;flex-wrap:wrap}
.signup input{flex:1;min-width:150px;padding:.72em .95em;border-radius:999px;
  border:1px solid rgba(80,56,32,.28);font-family:var(--f-body);font-size:.95rem;color:var(--cocoa)}
.signup input:focus-visible{outline:3px solid var(--den);outline-offset:2px}
.signup button{background:var(--mane);color:var(--cocoa);border:0;border-radius:999px;
  padding:.72em 1.4em;font-family:var(--f-display);font-weight:600;font-size:.98rem;cursor:pointer}
.signup button:hover{background:var(--mane-deep)}
.f-bottom{margin-top:48px;border-top:1px solid rgba(80,56,32,.14);padding:20px 0 26px;
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  align-items:center;font-size:.88rem}
.f-bottom ul{display:flex;gap:1.3rem;flex-wrap:wrap}
.credit{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.credit img{height:26px;width:auto}

/* ---------- announcement bar ---------- */
.announce{background:var(--den);color:#fff;font-size:.95rem;text-align:center;padding:11px 0}
.announce a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- membership comparison ---------- */
h2.wide{max-width:none;margin-bottom:1.6rem}
.intro{max-width:78ch;font-size:1.05rem;text-wrap:balance}
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin:.5rem 0 1rem}
.cmp{background:#fff;border:2px solid rgba(80,56,32,.14);border-radius:var(--r);
  padding:26px 24px;text-align:center;box-shadow:var(--shadow)}
.cmp-win{border-color:var(--den);background:#F3FAF9}
.cmp-label{font-family:var(--f-display);font-weight:600;color:var(--cocoa-soft);
  font-size:1rem;margin:0 0 .3rem}
.cmp-amt{font-family:var(--f-display);font-weight:700;font-size:var(--s4);
  color:var(--cocoa);line-height:1;margin:0 0 .7rem}
.cmp-get{font-family:var(--f-display);font-weight:700;font-size:var(--s3);
  line-height:1.05;margin:0 0 .15rem;color:var(--mane-deep)}
.cmp-win .cmp-get{color:var(--den-deep)}
.cmp-sub{margin:0;font-size:.92rem;color:var(--cocoa-soft)}
.cmp-mid{display:grid;place-items:center;padding:0 14px}
.cmp-mid span{font-family:var(--f-display);font-weight:600;font-size:.9rem;
  color:var(--cocoa-soft);background:var(--sand);border-radius:999px;padding:.4em .9em;white-space:nowrap}
.cmp-foot{font-family:var(--f-display);font-weight:600;font-size:var(--s1);
  color:var(--den-deep);margin:.4rem 0 1.6rem}
@media (max-width:760px){
  .compare{grid-template-columns:1fr;gap:12px}
  .cmp-mid{padding:0}
}

/* ---------- award band ---------- */
.award-band{background:#C8D9DC;
  border-top:1px solid rgba(56,128,128,.22);border-bottom:1px solid rgba(56,128,128,.22);padding:52px 0}
.award-inner{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.medal{width:84px;height:84px;border-radius:50%;background:var(--mane);display:grid;place-items:center;
  flex:none;box-shadow:0 8px 22px rgba(201,143,53,.42)}
.medal svg{width:46px;height:46px;fill:#fff}
.award-kicker{font-family:var(--f-display);font-weight:600;color:#8A6420;
  letter-spacing:.02em;margin:0 0 .2rem;font-size:1rem}
.award-copy h2{margin-bottom:.45rem;font-size:clamp(1.5rem,2.9vw,var(--s3))}
.award-copy p:last-child{margin:0;font-size:1rem}
.award-actions{display:flex;flex-direction:column;gap:.7rem;align-items:center;flex:none}
.award-link{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--cocoa-soft)}
@media (max-width:900px){
  .award-inner{grid-template-columns:1fr;text-align:center;gap:20px;justify-items:center}
  .award-actions{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .award-copy .measure{margin-left:auto;margin-right:auto}
}

.note{background:#FFF6E0;border-left:5px solid var(--mane);padding:14px 20px;font-size:.9rem;color:#6b4d24}



/* ---------- restored base rules ---------- */
nav a.on{color:var(--den-deep);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px}

.pagehead{background:var(--sand);padding:56px 0 52px;border-bottom:1px solid rgba(80,56,32,.1)}
.crumbs{font-size:.88rem;color:var(--cocoa-soft);margin:0 0 .9rem}
.crumbs a{color:var(--cocoa-soft)}
.pagehead h1{font-size:clamp(2rem,4.6vw,3rem);margin:0 0 .6rem}
.pagehead .lede{max-width:66ch;font-size:1.08rem;margin:0;text-wrap:balance}

.intro{max-width:78ch;font-size:1.05rem;text-wrap:balance}
h2.wide{max-width:none;margin-bottom:1.6rem}

/* how it works: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:2rem;counter-reset:s}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;background:var(--den);color:#fff;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.step h3{font-size:var(--s1);margin-bottom:.25rem}
.step p{font-size:.95rem;margin:0;color:var(--cocoa-soft)}

/* accordion */
.acc{max-width:860px;margin-top:1.6rem;border-top:1px solid rgba(80,56,32,.16)}
.acc details{border-bottom:1px solid rgba(80,56,32,.16)}
.acc summary{list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--cocoa)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:8px;top:1.55rem;width:11px;height:11px;
  border-right:2.5px solid var(--den);border-bottom:2.5px solid var(--den);
  transform:rotate(45deg);transition:transform .2s ease}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc summary:hover{color:var(--den-deep)}
.acc summary:focus-visible{outline:3px solid var(--den);outline-offset:2px;border-radius:6px}
.acc .body{padding:0 3rem 1.15rem 0;color:var(--cocoa-soft);max-width:70ch}
.acc .body p:last-child{margin-bottom:0}

/* feature strips */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.8rem}
.strip .item{background:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.strip .item h3{font-size:1.16rem;color:var(--den-deep);margin-bottom:.25rem}
.strip .item p{margin:0;font-size:.95rem;color:var(--cocoa-soft)}
.strip .item .ico{width:42px;height:42px;border-radius:12px;background:#F6E7C8;
  display:grid;place-items:center;margin-bottom:.8rem}
.strip .item .ico svg{width:22px;height:22px;fill:none;stroke:var(--mane-deep);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.strip .item.teal .ico{background:#DCEAE9}
.strip .item.teal .ico svg{stroke:var(--den-deep)}

/* callout */
.callout{background:#C8D9DC;border-radius:var(--r);padding:28px 30px;margin:2rem 0 0;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.callout h3{font-size:var(--s2);margin-bottom:.3rem}
.callout p{margin:0;max-width:60ch}
.callout .btn{white-space:nowrap}

/* event cards */
.events{display:grid;gap:22px;margin-top:1.8rem}
.event{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:230px 1fr;align-items:stretch}
.event .ph{position:relative;min-height:190px}
.event .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event .body{padding:24px 26px}
.event h3{color:var(--den-deep);margin-bottom:.2rem}
.event .when{font-family:var(--f-display);font-weight:600;color:var(--mane-deep);margin:0 0 .5rem}
.event p{font-size:.96rem}
.event .btn{margin-top:.4rem}
.badge{display:inline-block;background:var(--coral);color:#fff;font-family:var(--f-display);
  font-weight:600;font-size:.78rem;padding:.25em .8em;border-radius:999px;margin-bottom:.5rem}
.badge.recur{background:var(--den)}

/* comparison as an opening argument */
.compare-hero{padding:64px 0 56px;text-align:center}
.compare-hero .intro{margin-left:auto;margin-right:auto}
.compare-hero .cmp-foot{margin:1.4rem 0 1.6rem}
.compare-lg{max-width:820px;margin:2.4rem auto 0}
.compare-lg .cmp{padding:36px 30px}
.compare-lg .cmp-amt{font-size:var(--s5)}
.compare-lg .cmp-get{font-size:var(--s4)}
.compare-lg .cmp-sub{font-size:1rem}
.compare-lg .cmp-label{font-size:1.05rem}

/* full-bleed photo band */
.bandimg{height:clamp(200px,26vw,300px);overflow:hidden}
.bandimg img{width:100%;height:100%;object-fit:cover;object-position:center 44%}

/* a split photo fills its column instead of setting the row height */
.split .photo{position:relative;min-height:340px}
.split .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- restored: skip link, map, contact form ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--den);color:#fff;padding:.7em 1.2em;
  border-radius:0 0 10px 0;font-family:var(--f-display);font-weight:600;z-index:99}
.skip:focus{left:0}

.map{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);line-height:0}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

.cform{display:grid;gap:12px;max-width:560px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform input,.cform textarea{width:100%;font-family:var(--f-body);font-size:1rem;color:var(--cocoa);
  background:#fff;border:1px solid rgba(80,56,32,.24);border-radius:12px;padding:.82em 1em}
.cform textarea{min-height:150px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--den);
  box-shadow:0 0 0 4px rgba(56,128,128,.14)}
.formnote{font-size:.9rem;color:var(--cocoa-soft);margin:.9rem 0 0;max-width:52ch}

@media (max-width:900px){
  .cform .row{grid-template-columns:1fr}
  .map iframe{min-height:280px}
}

/* ==========================================================================
   MOBILE
   Built mobile-last on the first pass, which was a mistake. This section is
   the full responsive pass: menu, type scale, and every grid.
   ========================================================================== */

/* --- hamburger, hidden until it is needed --- */
.navtoggle{display:none;width:46px;height:42px;border:0;background:transparent;
  cursor:pointer;padding:9px 8px;margin-left:auto;border-radius:10px}
.navtoggle span{display:block;height:2.5px;border-radius:2px;background:var(--cocoa);
  margin:4.5px 0;transition:transform .22s ease,opacity .18s ease}
.navtoggle:focus-visible{outline:3px solid var(--den);outline-offset:2px}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .navtoggle span:nth-child(2){opacity:0}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1040px){
  .bar{gap:1rem;padding:10px 18px}
  .bar img{height:76px;width:auto}
  .navtoggle{display:block}

  nav{position:fixed;inset:0 0 0 auto;width:min(84vw,330px);margin:0;
    background:var(--cream);border-left:1px solid rgba(80,56,32,.16);
    box-shadow:-18px 0 44px rgba(80,56,32,.18);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    padding:84px 22px 28px;overflow-y:auto;
    transform:translateX(100%);transition:transform .26s ease;
    visibility:hidden;z-index:60}
  body.nav-open nav{transform:translateX(0);visibility:visible}
  body.nav-open{overflow:hidden}
  nav a{padding:.92em .2em;font-size:1.12rem;font-family:var(--f-display);font-weight:600;
    border-bottom:1px solid rgba(80,56,32,.13)}
  nav a.on{background:transparent;text-decoration:none;color:var(--den-deep)}
  nav a.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--mane);margin-right:.6rem;vertical-align:middle}
  nav .btn{margin-top:1.3rem;text-align:center;border-bottom:0;font-size:1.02rem}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(46,28,12,.45);z-index:55}
}

@media (max-width:900px){
  section{padding:46px 0}
  .wrap{padding:0 18px}
  h2{margin-bottom:.6rem}
  .hero-img{height:clamp(340px,64vh,460px)}
  .hero::after{background:linear-gradient(180deg,rgba(46,28,12,.30) 0%,rgba(46,28,12,.62) 55%,rgba(46,28,12,.80) 100%)}
  .hero-copy>*{max-width:none}
  .hero p{max-width:none;font-size:1.05rem}
  .ribbon{font-size:.84rem}

  .offers{margin-top:-30px}
  .offers-grid,.tiers,.strip,.steps,.visit-grid,.split,.cafe-imgs,.f-grid{grid-template-columns:1fr}
  .split,.visit-grid{gap:26px}
  .split .photo{min-height:250px}
  .bandimg{height:170px}

  /* pricing cards: compact, thumb beside the title instead of stacked above */
  .tier{padding:20px 18px}
  .tier .thumb{position:absolute;top:18px;right:18px;width:62px;height:62px;border-width:3px}
  .tier h3,.tier .amt{padding-right:76px}
  .tier .amt{font-size:2rem;margin:.2rem 0 .7rem}
  .tier ul{margin-bottom:1.1rem;font-size:.94rem}
  .tier li{padding:.24rem 0 .24rem 1.4rem}

  .offer img{height:150px}
  .compare{grid-template-columns:1fr;gap:10px}
  .compare-lg{margin-top:1.6rem}
  .compare-lg .cmp{padding:22px 18px}
  .compare-lg .cmp-amt{font-size:2.1rem}
  .compare-lg .cmp-get{font-size:1.7rem}
  .cmp-mid{padding:0}
  .cmp-mid span{font-size:.84rem}
  .compare-hero{padding:44px 0 40px}

  .award-inner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:16px}
  .award-copy .measure{margin-left:auto;margin-right:auto}
  .callout{grid-template-columns:1fr;gap:14px;padding:22px}
  .event{grid-template-columns:1fr}
  .event .ph{min-height:180px}
  .event .body{padding:20px}
  .acc summary{font-size:1.04rem;padding-right:2.4rem}
  .acc .body{padding-right:0}
  .band{padding:46px 0}
  .band-cta{flex-direction:column;align-items:stretch}
  .band-cta .btn{text-align:center}
}

/* two columns is still right for the footer on a phone */
@media (max-width:900px){
  .f-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .f-grid>div:first-child{grid-column:1 / -1}
  footer{padding:44px 0 0}
  .f-logo img{height:82px;width:auto}
  .f-hours{max-width:none}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:.8rem}
}

@media (max-width:520px){
  .bar img{height:76px;width:auto}
  section{padding:38px 0}
  .pagehead{padding:32px 0 30px}
  h1{font-size:2rem}
  h2{font-size:1.55rem}
  .lede,.intro{font-size:1rem}
  .tier .thumb{width:54px;height:54px;top:16px;right:16px}
  .tier h3,.tier .amt{padding-right:66px}
  .btn{font-size:1rem;padding:.78em 1.35em}
  .f-grid{gap:24px 16px}
  .f-grid h4{font-size:1.05rem}
  footer{font-size:.9rem}
  .f-hours{gap:.5rem}
  table.hours th,table.hours td{font-size:.95rem}
}

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

/* ---------- newsletter row, name + email ---------- */
.sr{position:absolute;left:-9999px}
.f-signup{margin-top:40px;padding-top:28px;border-top:1px solid rgba(80,56,32,.14);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.f-signup h4{margin-bottom:.2rem}
.f-signup p{margin:0;color:var(--cocoa-soft)}
.signup{display:flex;gap:10px;margin:0;flex-wrap:wrap;justify-content:flex-end}
.signup input{min-width:190px;padding:.72em .95em;border-radius:999px;
  border:1px solid rgba(80,56,32,.28);font-family:var(--f-body);font-size:.95rem;color:var(--cocoa)}
.signup input:focus-visible{outline:3px solid var(--den);outline-offset:2px}
.signup button{background:var(--mane);color:var(--cocoa);border:0;border-radius:999px;
  padding:.72em 1.5em;font-family:var(--f-display);font-weight:600;font-size:.98rem;cursor:pointer}
.signup button:hover{background:var(--mane-deep)}

/* ---------- mobile menu extras ---------- */
.navclose{display:none;position:absolute;top:16px;right:16px;width:44px;height:44px;
  border:0;background:transparent;font-size:2.2rem;line-height:1;color:var(--cocoa);
  cursor:pointer;border-radius:10px}
.navclose:focus-visible{outline:3px solid var(--den);outline-offset:2px}
.navfoot{display:none}
.navphone{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);
  font-weight:600;font-size:1.05rem;color:var(--den-deep);text-decoration:none}
.navphone svg{width:19px;height:19px;fill:currentColor}
.navsocial{display:flex;gap:10px;margin-top:1rem}
.navsocial a{width:44px;height:44px;border-radius:50%;background:var(--den);
  display:grid;place-items:center}
.navsocial svg{width:21px;height:21px;fill:#fff}

@media (max-width:1040px){
  .navclose{display:block}
  .navfoot{display:block;margin-top:auto;padding-top:1.6rem;border-top:1px solid rgba(80,56,32,.13)}
  nav{padding-top:70px}
}

/* 11) on mobile the café photo comes before the copy, to break up the text */
@media (max-width:900px){
  .cafe .split{display:flex;flex-direction:column}
  .cafe .split .cafe-imgs{order:-1}
  .cafe-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  .f-signup{grid-template-columns:1fr;gap:14px}
  .signup{justify-content:stretch}
  .signup input{flex:1 1 100%;min-width:0}
  .signup button{width:100%}
}

/* 9 + 12) the logo was far too small once the layout narrowed */
@media (max-width:1040px){ .bar img{height:76px;width:auto} }
@media (max-width:520px){
  .bar img{height:76px;width:auto}
  .f-logo img{height:82px;width:auto}
}

/* ---------- popup ---------- */
.pop{position:fixed;inset:0;z-index:80;background:rgba(46,28,12,.55);
  display:grid;place-items:center;padding:22px}
.pop[hidden]{display:none}
body.pop-open{overflow:hidden}



.pop-body h2{margin-bottom:.5rem}
.pop-body p{color:var(--cocoa-soft)}
.pop-x{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);font-size:1.7rem;line-height:1;color:var(--cocoa);cursor:pointer}
.pop-x:focus-visible{outline:3px solid var(--den);outline-offset:2px}

/* ---------- booking links on contact ---------- */
.booklinks{display:flex;flex-wrap:wrap;gap:10px}
.booklinks .btn{font-size:.96rem;padding:.68em 1.2em}

/* the logo carries the brand, so it stays generous on small screens */
@media (max-width:1040px){ .bar img{height:76px;width:auto} }
@media (max-width:520px){
  .bar img{height:76px;width:auto}
  .f-logo img{height:82px;width:auto}
  .bar{padding:8px 14px}
}

/* ---------- logo sizing (against trimmed artwork, no empty canvas) ---------- */
.bar img{height:76px;width:auto}
.f-logo img{height:82px;width:auto}
@media (max-width:1040px){ .bar img{height:72px} }
@media (max-width:520px){
  .bar img{height:66px}
  .f-logo img{height:76px}
  .bar{padding:10px 14px}
}

/* ---------- rich text from the editor ---------- */
.richtext{max-width:74ch}
.richtext h2{margin:1.8rem 0 .6rem}
.richtext h2:first-child{margin-top:0}
.richtext h3{margin:1.4rem 0 .4rem;color:var(--den-deep)}
.richtext p{margin:0 0 1rem}
.richtext ul,.richtext ol{margin:0 0 1.2rem;padding-left:1.3rem}
.richtext li{padding:.18rem 0}
.richtext img{border-radius:var(--r);margin:1.2rem 0;max-width:100%;height:auto}
.richtext a{color:var(--den-deep);text-decoration:underline;text-underline-offset:3px}
.richtext table{width:100%;border-collapse:collapse;margin:1.2rem 0}
.richtext th,.richtext td{border:1px solid rgba(80,56,32,.2);padding:.6em .8em;text-align:left}
.richtext th{background:var(--sand);font-family:var(--f-display);font-weight:600}

/* ---------- homepage slider ---------- */
.hero{position:relative;background:var(--cocoa);overflow:hidden}
.hero .slide{display:none}
.hero .slide.on{display:block}
.hero-many .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:block}
.hero-many .slide.on{position:relative;opacity:1;z-index:1}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;
  border:0;border-radius:50%;background:rgba(253,251,247,.85);color:var(--cocoa);
  font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease}
.hero-arrow:hover{background:#fff}
.hero-arrow:focus-visible{outline:3px solid var(--mane);outline-offset:2px}
.hero-arrow.prev{left:16px} .hero-arrow.next{right:16px}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:4;display:flex;gap:9px;justify-content:center}
.hero-dots button{width:11px;height:11px;border-radius:50%;border:2px solid rgba(253,251,247,.85);
  background:transparent;padding:0;cursor:pointer}
.hero-dots button.on{background:var(--mane);border-color:var(--mane)}
.hero-dots button:focus-visible{outline:3px solid var(--mane);outline-offset:3px}
.hero-cta{margin-top:1.5rem;display:flex;gap:12px;flex-wrap:wrap}
.btn-ghost.light{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost.light:hover{background:#fff;color:var(--cocoa);border-color:#fff}

@media (max-width:900px){
  .hero-arrow{width:38px;height:38px;font-size:1.5rem}
  .hero-arrow.prev{left:8px} .hero-arrow.next{right:8px}
  .hero-dots{bottom:12px}
  .hero-cta{margin-top:1.2rem}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
}

/* the scrim belongs to each slide now that slides stack, not to the hero */
.hero::after{content:none}
.hero .slide{position:relative}
.hero-many .slide{position:absolute}
.hero-many .slide.on{position:relative}
.hero .slide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(46,28,12,.84) 0%,rgba(46,28,12,.72) 34%,
  rgba(46,28,12,.42) 62%,rgba(46,28,12,.08) 88%)}
.hero .hero-copy{z-index:2}
@media (max-width:900px){
  .hero .slide::after{background:linear-gradient(180deg,rgba(46,28,12,.30) 0%,
    rgba(46,28,12,.62) 55%,rgba(46,28,12,.82) 100%)}
}

/* the offer cards overlap the bottom of the hero, so centre the copy
   against the visible area rather than the full height */
.hero-copy{padding-bottom:96px}
.hero-cta{margin-top:1.3rem}
@media (max-width:900px){ .hero-copy{padding-bottom:64px} }
@media (max-width:520px){ .hero-copy{padding-bottom:52px} }

/* ---------- hero: let content set the height ---------- */
/* The image is taken out of flow so the copy defines the slide height, with
   min-height as the floor. A long heading now grows the hero instead of
   spilling into the cards below. */
.hero .slide{position:relative;display:flex;align-items:center;
  min-height:clamp(430px,58vh,580px)}
.hero .slide .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .slide::after{z-index:1}
.hero .slide .hero-copy{position:relative;inset:auto;z-index:2;width:100%;
  max-width:var(--wrap);margin:0 auto;padding:54px 24px 104px}
.hero-copy h1{max-width:19ch}
.hero-copy p{max-width:54ch}
.hero-copy .ribbon{max-width:none}

@media (max-width:900px){
  .hero .slide{min-height:clamp(360px,64vh,470px)}
  .hero .slide .hero-copy{padding:40px 18px 70px}
  .hero-copy h1,.hero-copy p{max-width:none}
}
@media (max-width:520px){
  .hero .slide .hero-copy{padding:34px 16px 58px}
}

/* slider dots sit above the strip the offer cards overlap (70px, 30px on mobile) */
.hero .slide .hero-copy{padding-bottom:124px}
.hero-dots{bottom:88px}
@media (max-width:900px){
  .hero .slide .hero-copy{padding-bottom:78px}
  .hero-dots{bottom:44px}
}
@media (max-width:520px){
  .hero .slide .hero-copy{padding-bottom:72px}
}

/* must come after the hero rebuild: inactive slides stay out of flow,
   otherwise they stack and add empty height below the active one */
.hero.hero-many .slide{position:absolute;inset:0;opacity:0}
.hero.hero-many .slide.on{position:relative;inset:auto;opacity:1}

/* tighter gap between the hero heading and its sub line */
.hero-copy h1{margin-bottom:0}
.hero-copy p{margin-top:.7rem}
.hero .ribbon{margin-bottom:.85rem}
@media (max-width:520px){ .hero-copy p{margin-top:.6rem} }

/* Most of the perceived gap was the sub line's leading, not its margin:
   it inherited body line-height 1.65, which adds ~7px of space above the
   first line on top of the margin. */
.hero-copy p{margin-top:.4rem;line-height:1.42}
@media (max-width:520px){ .hero-copy p{margin-top:.35rem} }

/* split photos crop to fill their column, so bias the crop toward the upper
   third where faces sit rather than the geometric centre */
.split .photo img{object-position:center 28%}

/* ---------- pull quote ---------- */
.pull{margin:1.6rem 0 0;padding:0 0 0 1.5rem;border-left:4px solid var(--mane);position:relative}
.pull p{font-family:var(--f-display);font-weight:500;font-style:italic;
  font-size:var(--s1);line-height:1.45;color:var(--den-deep);margin:0}
.pull p::before{content:"\201C"} .pull p::after{content:"\201D"}
.pull cite{display:block;margin-top:.7rem;font-style:normal;font-size:.92rem;
  color:var(--cocoa-soft);font-family:var(--f-body)}
.pull cite::before{content:"\2014\00a0"}

/* ---------- callout icon ---------- */
.callout.has-ico{grid-template-columns:auto 1fr auto}
.callout-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.72);
  display:grid;place-items:center;flex:none}
.callout-ico svg{width:27px;height:27px;fill:none;stroke:var(--den-deep);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .callout.has-ico{grid-template-columns:1fr;justify-items:start}
}

/* FAQ answers were capped at 70ch inside an 860px accordion, so they wrapped
   about 300px early and left one or two words stranded on a second line.
   The 3rem right padding was only ever needed to clear the chevron on the
   summary row, not on the answer. */
.acc{max-width:920px}
.acc .body{max-width:88ch;padding:0 .5rem 1.15rem 0}
.acc summary{padding-right:3rem}
/* the actual complaint was one or two words stranded on a second line, which
   is a wrapping problem as much as a width one */
.acc .body p{text-wrap:pretty}
.acc summary{text-wrap:pretty}

/* the popup artwork is a portrait social graphic, so show it whole rather than
   cropping it to a short banner */


/* ---------- popup: artwork beside the message, not stacked above it ---------- */
.pop-box{position:relative;background:#fff;border-radius:18px;width:100%;max-width:460px;
  overflow:hidden;box-shadow:0 26px 70px rgba(46,28,12,.35)}
.pop-box.has-img{max-width:760px;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:stretch}
.pop-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  background:var(--sand)}
.pop-body{padding:34px 36px;text-align:left;display:flex;flex-direction:column;
  justify-content:center}
.pop-body h2{margin-bottom:.5rem}
.pop-body p{color:var(--cocoa-soft)}
.pop-body .btn{align-self:flex-start;margin-top:.6rem}

@media (max-width:720px){
  .pop-box.has-img{grid-template-columns:1fr;max-width:420px}
  .pop-img{max-height:34vh;object-fit:cover}
  .pop-body{padding:24px 24px 28px;text-align:center}
  .pop-body .btn{align-self:stretch;text-align:center}
}


/* socials sit on the right of the section heading, using space that was empty */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:.85rem}
.sec-head h2{margin-bottom:0}
.sec-head .socials{margin:0}
.sec-head .socials a{width:40px;height:40px}
.sec-head .socials svg{width:20px;height:20px}
@media (max-width:520px){
  .sec-head{justify-content:flex-start;gap:.9rem}
}

/* legal pages: long-form reading, no cards */
.legal{max-width:72ch}
.legal h2{font-size:var(--s2);margin:2rem 0 .5rem}
.legal h2:first-child{margin-top:0}
@media (max-width:760px){ .tiers[style*="repeat(2"]{grid-template-columns:1fr!important} }
.signup-msg{margin:.6rem 0 0;font-size:.9rem;min-height:1.2em}
.signup-msg.ok{color:var(--den-deep);font-weight:600}
.signup-msg.bad{color:var(--coral);font-weight:600}

/* slides after the first use an H2 for SEO, styled to match the H1 */
.hero .slide-h{color:#fff;font-size:clamp(2.3rem,5.4vw,var(--s5));letter-spacing:-.01em;
  text-wrap:balance;max-width:19ch;margin:0;text-shadow:0 2px 24px rgba(40,26,12,.5)}
@media (max-width:900px){ .hero .slide-h{max-width:none} }

/* summer camp pricing is two cards, not three */
.camp-tiers .tiers{grid-template-columns:repeat(2,1fr);max-width:760px}
@media (max-width:760px){ .camp-tiers .tiers{grid-template-columns:1fr} }

/* ---------- sticky header ---------- */
/* The announcement bar scrolls away; the header stays and slims down once
   the page moves. While the mobile menu is open the header is lifted above
   the dimmed backdrop, since the menu panel lives inside it. */
header{position:sticky;top:0;z-index:50;transition:box-shadow .2s ease}
body.nav-open header{z-index:70}
@media (max-width:1040px){
  /* backdrop moves inside the header so it dims the logo strip too */
  body.nav-open::after{display:none}
  body.nav-open header::after{content:"";position:fixed;inset:0;background:rgba(46,28,12,.45);z-index:55}
}
header .bar,header .bar img{transition:padding .2s ease,height .2s ease}
header.slim{box-shadow:0 6px 22px rgba(46,28,12,.10)}
header.slim .bar{padding-top:6px;padding-bottom:6px}
header.slim .bar img{height:54px}
html{scroll-padding-top:110px}
@media (max-width:520px){
  header.slim .bar img{height:48px}
  html{scroll-padding-top:84px}
}
@media (prefers-reduced-motion:reduce){ header,header .bar,header .bar img{transition:none} }