/* ============================================================
   HER PALETTE (brand guidelines 13 Sep; colour pass 28 Sep). One source for every colour.
   Primary (exact hex from her sheet): Ivory 60%, Stone 20%, Forest 10%, Sage 7%, Gold 3%.
   Nature collection + premium accents: read from her board image (no hex supplied), so close,
   not exact; ask her designer for the codes. Text on Charcoal (her rule).
   "-ink" / "-deep" values are derived from hers only where legibility needs it (AA contrast).
   ============================================================ */
:root {
  --ivory: #FAF8F4; --stone: #E7E1D7; --forest: #4A4038; --sage: #9F9883; --gold: #C5A46D;
  --moss: #A69E8A; --eucalyptus: #7A7360; --clay: #B3906C; --linen: #E4D9C7; --taupe: #998D7D; --charcoal: #313435;
  --champagne: #907147; --copper: #8B5334; --bronze: #947444;
  --forest-deep: #3A322C;      /* derived: hovers on forest */
  --eucalyptus-ink: #5E5648;   /* derived: khaki text on light, 5.9:1 */
  --taupe-ink: #6A6155;        /* derived: secondary text on light, 5.6:1 */
  --clay-ink: #7E5E40;         /* derived: clay text on light, 5.5:1 */
  --gold-line: #B18946; --gold-ink: #8D6D38;
  /* the holding page's variable names, re-pointed at her colours (its first-draft values go) */
  --cream: var(--ivory); --green: var(--forest); --ink: var(--charcoal); --muted: var(--taupe-ink);
  --olive: var(--eucalyptus); --line: #D3C8B6;  /* line: Linen darkened toward Taupe, for visible hairlines */
}
/* ============================================================
   Aurora full site: additions to the holding page.
   holding.css is the live holding page stylesheet, untouched. This file only
   adds the sections the holding page never had, built from its own pieces:
   ivory ground, olive and forest bands, pill buttons, the arch, image panels
   with the caption gradient, Cormorant headings, tracked uppercase eyebrows.
   ============================================================ */

/* ---- shared pieces ---- */
a.pillar { color: inherit; text-decoration: none; display: block; }
a.image-panel { color: var(--cream); text-decoration: none; display: block; }
a.feature-type { color: inherit; text-decoration: none; }
.pill, .outline-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 40px; padding: 12px 30px; font: inherit; font-size: 16px; cursor: pointer;
  text-decoration: none; transition: background .3s, color .3s; min-height: 48px;
}
.pill { background: var(--green); color: var(--cream); border: 1px solid var(--green); }
.pill:hover { background: var(--forest-deep); }
.outline-pill { background: transparent; color: var(--green); border: 1px solid var(--green); }
.outline-pill:hover { background: var(--green); color: var(--cream); }
a.outline-button { display: inline-block; text-decoration: none; }
.text-link { display: inline-block; border-bottom: 1px solid var(--gold-line); padding-bottom: 4px; font-size: 15px; }
.text-link:hover { border-bottom-color: currentColor; }
.section-intro { max-width: 640px; margin-bottom: 36px; }
.section-intro h2 { font-size: 52px; }

/* ---- mobile menu sheet ---- */
.menu-sheet {
  position: fixed; inset: 0; z-index: 60; background: var(--cream); color: var(--green);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 60px 24px; overflow-y: auto;
}
.menu-sheet[hidden] { display: none; }
.menu-sheet a { font-family: var(--serif); font-size: 34px; line-height: 1.3; text-decoration: none; }
.menu-sheet .pill { margin-top: 24px; }
.menu-sheet .close-button { position: absolute; top: 18px; right: 18px; }

/* ---- NEW: two ways to visit ---- */
.ways { display: grid; grid-template-columns: 1fr 1fr; }
.way { padding: 56px 5.5% 60px; }
.way h3 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: .98; margin: 0 0 16px; }
.way p:not(.eyebrow) { font-size: 17px; line-height: 1.55; max-width: 440px; margin-bottom: 26px; }
.way-book { background: var(--stone); }
.way-book p:not(.eyebrow) { color: var(--muted); }
.way-talk { background: var(--green); color: var(--cream); }
.way-talk .outline-button { margin-top: 0; }

/* ---- holding treatments band: second action ---- */
.treatment-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.treatment-actions .outline-button { margin-top: 0; }
.treatments .text-link { color: var(--cream); border-bottom-color: rgba(250, 248, 244, .6); }

/* ---- NEW: weddings and celebrations (Time well spent, mirrored, on forest) ---- */
.celebrations { grid-template-columns: 28% 28% 44%; }
.celebrations .experience-copy { background: var(--green); color: var(--cream); border-left: 2px solid var(--cream); }
.celebrations .experience-copy h2 { white-space: normal; }
.celebrations .image-panel:first-child { border-left: 0; }
.celebrations .image-panel img { object-position: center 30%; }
.celebrations .outline-button { margin-top: 6px; }

/* ---- NEW: meet the team ---- */
.team { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; background: var(--stone); }
.team > img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; object-position: center 30%; }
.team-copy { padding: 56px 12%; }
.team-copy h2 { font-size: 54px; }
.team-copy .rule { display: block; width: 42px; height: 1px; background: var(--gold-line); margin: 25px 0; }
.team-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 480px; }
.team-facts { display: flex; gap: 40px; margin: 30px 0 32px; }
.team-facts dt { font-family: var(--serif); font-size: 58px; line-height: 1; color: var(--green); }
.team-facts dd { margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 120px; }

/* ---- NEW: clients' words ---- */
.words { text-align: center; padding: 72px 8% 64px; }
.words .dialog-arch { margin-bottom: 18px; }
.words blockquote { font-family: var(--serif); font-size: 58px; line-height: 1.04; color: var(--green); margin: 8px 0 24px; }
.words-more { font-family: var(--serif); font-size: 22px; color: var(--muted); }
.words-more span { margin: 0 12px; color: var(--gold-line); }
.words-note { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* ---- NEW: Instagram ---- */
.insta { padding: 20px 5.5% 72px; text-align: center; }
.insta-head { margin-bottom: 28px; }
.insta-head h2 { font-size: 44px; overflow-wrap: anywhere; }
.insta-head h2 a { text-decoration: none; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-bottom: 32px; }
.insta-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.insta-grid a:hover img { transform: scale(1.035); }

/* ---- NEW: gift vouchers ---- */
.gift { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 5.5% 96px; }
.gift h2 { font-size: 46px; margin-bottom: 10px; }
.gift p:not(.eyebrow) { font-size: 17px; color: var(--muted); }

/* ---- footer nav ---- */
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; max-width: 360px; border-left: 1px solid var(--line); padding-left: 35px; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- booking dialog ---- */

/* ---- pending facts: quiet in the design, still obvious in review ---- */
.pending { background: rgba(170, 137, 80, .16); border-bottom: 1px dashed var(--gold-ink); padding: 0 .12em; }

/* ---- tablet and phone: centred, like the holding page ---- */
@media (max-width: 1024px) {
  .ways { grid-template-columns: 1fr; text-align: center; }
  .way p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .featured { text-align: center; }
  .section-intro { margin-left: auto; margin-right: auto; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .feature-type { grid-column: 1 / -1; min-height: 0; order: 3; }
  .first-visit { grid-template-columns: 1fr; gap: 36px; }
  .first-steps { max-width: 560px; margin: 0 auto; }
  .treatment-actions { justify-content: center; }
  .celebrations { grid-template-columns: 1fr 1fr; }
  .celebrations .experience-copy { grid-column: 1 / -1; order: -1; border-left: 0; text-align: center; }
  .team { grid-template-columns: 1fr; text-align: center; }
  .team > img { max-height: 560px; }
  .team-copy { padding: 40px 8% 56px; }
  .team-copy > p:not(.eyebrow) { margin: 0 auto; }
  .team-copy .rule { margin-left: auto; margin-right: auto; }
  .team-facts { justify-content: center; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .gift { flex-direction: column; text-align: center; }
  .footer-nav { border-left: 0; padding-left: 0; justify-content: center; max-width: none; flex-basis: 100%; }
}
@media (max-width: 650px) {
  .way { padding: 44px 9% 48px; }
  .way h3 { font-size: 38px; }
  .featured { padding: 48px 0 52px; }
  .featured .section-intro { padding: 0 9%; }
  .section-intro h2, .first-card h2, .team-copy h2 { font-size: 42px; }
  .featured-grid { grid-template-columns: 1fr; }
  .feature-panel { min-height: 0; aspect-ratio: 1.25; }
  .feature-type { padding: 36px 9%; }
  .first-visit { padding: 52px 8%; }
  .first-card { padding: 40px 24px 36px; }
  .first-price { font-size: 54px; }
  .celebrations { grid-template-columns: 1fr; }
  .celebrations .image-panel { aspect-ratio: 1.3; }
  .team-facts { gap: 22px; }
  .team-facts dt { font-size: 46px; }
  .words { padding: 56px 8%; }
  .words blockquote { font-size: 40px; }
  .words-more { font-size: 19px; }
  .words-more span { display: block; height: 4px; overflow: hidden; color: transparent; }
  .insta-head h2 { font-size: 30px; }
  .gift { padding: 52px 8% 80px; }
  .gift h2 { font-size: 38px; }
}


/* ---- first-visit card: the icon mark in place of the arch line ---- */
.card-mark { display: block; width: 52px; height: auto; margin: 0 auto 14px; }

/* ============================================================
   HEADER (28 Sep). The holding page's own header moved out of the hero.
   .site becomes overflow:clip (not hidden) so the header can be sticky.
   ============================================================ */
.site { overflow: clip; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  background: var(--green); color: var(--ivory);
  height: 96px; padding: 0 60px; margin-top: 0;
  transition: height .4s var(--ease-horizon), box-shadow .4s;
}
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: auto; }
.brand .brand-word { display: none; }
.brand .brand-full { display: block; width: 92px; }
.brand .brand-mark { display: none; }
.brand .brand-mark { width: 40px; }
.main-nav { display: flex; align-items: center; }
.main-nav a { white-space: nowrap; font-size: 16px; font-weight: 500; letter-spacing: -.02em; padding: 15px; line-height: 22px; color: inherit; transition: opacity .3s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { opacity: .65; }
.book-btn {
  margin-left: 12px; background: transparent; color: var(--ivory); border: 1px solid rgba(250, 248, 244, .7); border-radius: 40px;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 10px 24px; cursor: pointer;
  transition: background .3s, color .3s;
}
.book-btn:hover { background: var(--ivory); color: var(--green); }
a.book-btn { display: inline-flex; align-items: center; text-decoration: none; } /* Book is a link to her booking site since 21 Oct */
.burger { display: none; }
html.scrolled .site-header { height: 70px; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
html.scrolled .brand .brand-word, html.scrolled .brand .brand-full { display: none; }
html.scrolled .brand .brand-mark { display: block; }

/* desktop hero: the header no longer sits inside it */
.hero .hero-copy { padding-top: 70px; }
@media (min-width: 1025px) { .hero { height: 700px; min-height: 620px; } }

@media (max-width: 1260px) { .main-nav a { padding: 15px 10px; font-size: 15px; } }

/* ---- phones and tablets: The Goethe layout, her cream arch ---- */
@media (max-width: 1180px) {
  .site-header {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
    height: 116px; padding: 0 18px; background: var(--green); color: var(--ivory);
    border-radius: 0 0 50% 50% / 0 0 22px 22px;
  }
  .main-nav { display: none; }
  .brand { grid-column: 2; margin: 0; justify-content: center; }
  .brand .brand-word { display: none; }
  .brand .brand-full { display: block; width: 104px; }
  html.scrolled .brand .brand-word, html.scrolled .brand .brand-full { display: none; }
  html.scrolled .brand .brand-mark { display: block; width: 38px; }
  html.scrolled .site-header { height: 66px; border-radius: 0 0 50% 50% / 0 0 14px 14px; }
  .burger {
    grid-column: 1; justify-self: start; display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
    background: none; border: 0; padding: 12px 8px; cursor: pointer;
  }
  .burger span { display: block; height: 1.5px; background: var(--gold); }
  .burger span:nth-child(1) { width: 30px; }
  .burger span:nth-child(2) { width: 22px; }
  .burger span:nth-child(3) { width: 30px; }
  .book-btn {
    grid-column: 3; justify-self: end; margin: 0; color: var(--ivory); border-color: rgba(250, 248, 244, .6);
    font-size: 11px; letter-spacing: .1em; padding: 0 18px; height: 39px; min-width: 84px;
  }
  .book-btn:hover { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
  /* the hero tucks under the header's curve so the arch sits on the photograph */
  .hero { margin-top: -24px; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .hero .hero-copy { padding-top: 90px; }
}
/* tablet and phone heroes: the photograph starts right under the header, the hall in view */
@media (min-width: 651px) and (max-width: 1024px) {
  .hero-image { top: 0; height: 430px; }
  .hero-copy { padding-top: 330px !important; }
  /* holding.css fades the tablet hero into its old olive green; Bark here, as on phones and desktop (2 Oct) */
  .hero:after { background: linear-gradient(180deg, transparent 28%, rgba(74, 64, 56, .12) 40%, rgba(74, 64, 56, .88) 62%, var(--green) 76%); }
}
/* the holding page's dialog backdrop is the old green too */
dialog::backdrop { background: rgba(58, 50, 44, .65); }
@media (max-width: 650px) {
  .hero-image { top: 0; height: 380px; object-position: 50% 40%; }
  .hero-copy { padding-top: 250px !important; }
  .hero:after { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(74, 64, 56, .35) 40%, rgba(74, 64, 56, .9) 52%, var(--green) 62%); }
}

.hero .quiet-note { display: none; }

/* ---- desktop hero in Bark, her Forest role since 29 Sep, to match phones (Dan, 28 Sep; colour fixed 2 Oct) ---- */
@media (min-width: 1025px) {
  .hero:after { background: linear-gradient(90deg, rgba(74, 64, 56, .95) 0%, rgba(74, 64, 56, .82) 30%, rgba(74, 64, 56, .35) 45%, rgba(74, 64, 56, 0) 58%); }
  .hero-copy, .hero h1, .hero-sub, .opening { color: var(--cream); }
  .opening .opening-place { border-left-color: rgba(250, 248, 244, .45); }
  .hero .signup { border-color: rgba(250, 248, 244, .6); }
  .hero .signup button { background: var(--champagne); }
  .hero .signup button:hover { background: var(--copper); }
}


/* ============================================================
   HUNTSMAN PATTERNS in Aurora's look (Dan, 28 Sep)
   ============================================================ */
.pill-gold { background: var(--champagne); border-color: var(--champagne); color: var(--ivory); }
.pill-gold:hover { background: var(--copper); border-color: var(--copper); }

/* ---- card tracks: treatments, inside Aurora ---- */
.tcards { padding: 72px 0 64px; }
.tcards-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 5.5%; margin-bottom: 28px; }
.tcards-head h2 { font-size: 52px; }
.inside-lead { font-size: 17px; color: var(--muted); margin-top: 10px; max-width: 520px; }
.tcards-nav { display: flex; gap: 10px; }
.arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--green); font-size: 18px; cursor: pointer; transition: background .3s, color .3s; }
.arrow:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 5.5% 8px; scroll-padding: 0 5.5%; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.tcard {
  position: relative; flex: 0 0 clamp(250px, 22vw, 320px); aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden;
  scroll-snap-align: start; background: var(--stone); color: var(--cream); text-decoration: none; isolation: isolate;
}
.tcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-horizon); }
.tcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 50%, rgba(58, 50, 44, .85)); }
.tcard:hover > img { transform: scale(1.04); }
.tcard-foot { position: absolute; left: 20px; right: 16px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tcard-foot strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.05; }
.tcard-foot span span { display: block; font-size: 13px; opacity: .85; margin-top: 6px; }
.plus { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(250, 248, 244, .7); display: grid; place-items: center; font-size: 20px; line-height: 1; transition: background .3s, color .3s; }
.tcard:hover .plus { background: var(--cream); color: var(--green); }
.tcard-icon { color: var(--green); display: grid; place-items: center; }
.tcard-icon::after { background: none; }
.tcard-icon .pillar-art { width: 120px; height: 120px; margin-top: -60px; }
.tcard-icon .plus { border-color: var(--line); }
.tcard-icon:hover .plus { background: var(--green); color: var(--cream); }
.tcard-all { background: var(--green); }
.tcard-all::after { background: none; }
.inside { background: var(--stone); }


/* ---- first visit: four steps in a row ---- */
.first-visit { display: block; padding: 76px 5.5% 72px; }
.first-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.first-head h2 { font-size: 52px; margin-bottom: 14px; }
.first-head p:not(.eyebrow) { font-size: 17px; color: var(--muted); }
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps4 li { border-top: 1px solid var(--gold-line); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.steps4 .n { font-family: var(--serif); font-size: 22px; color: var(--gold-ink); }
.steps4 strong { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--green); line-height: 1.1; }
.steps4 li > span:last-child { font-size: 15px; color: var(--muted); line-height: 1.55; }
.first-offer { margin-top: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--cream); }
.first-offer .first-name { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.first-offer .first-price { font-family: var(--serif); font-size: 40px; color: var(--green); margin-top: 4px; line-height: 1; }
.first-offer .first-price span { font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.first-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: center; }
.first-photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--stone); }
.first-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
.first-photo figcaption { font-size: 13px; color: var(--muted); padding: 12px 4px 0; line-height: 1.5; }

/* ---- find us: the map card ---- */
.arrival .map-card { grid-column: 1 / -1; margin: 12px 5.5% 0; border-radius: 10px; overflow: hidden; background: var(--linen); }
.map-card svg { display: block; width: 100%; height: auto; }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; font-size: 14px; color: rgba(250, 248, 244, .8); }

/* ---- closing card ---- */
.closing { padding: 24px 5.5% 8px; }
.closing-card { position: relative; border-radius: 12px; overflow: hidden; min-height: 420px; display: grid; place-items: center; text-align: center; isolation: isolate; }
.closing-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.closing-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(58, 50, 44, .55); }
.closing-copy { color: var(--cream); padding: 40px 24px; }
.closing-copy .eyebrow { color: var(--linen); }
.closing-copy h2 { font-size: 64px; margin-bottom: 26px; }

/* ---- footer: one line of links, her logo ---- */
.site-footer { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 22px; text-align: center; padding: 56px 5.5% 36px; border-top: 1px solid var(--line); }
.footer-logo img { width: 140px; height: auto; display: block; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a:hover { opacity: .6; }
.footer-social { color: var(--gold-line); }
.footer-address, .footer-base { font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.footer-base a { border-bottom: 1px solid currentColor; }

/* ---- the bottom pop-up ---- */
.popup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; pointer-events: none; transform: translateY(105%); transition: transform .5s var(--ease-horizon); }
.popup.-show { transform: none; }
.popup-panel { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -18px 50px rgba(58, 50, 44, .28); }
.popup-head { width: 30%; min-width: 250px; background: var(--green); color: var(--cream); padding: 32px 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; position: relative; }
.popup-head img { width: 44px; height: auto; }
.popup-head .eyebrow { color: var(--linen); margin-bottom: 8px; }
.popup-head h2 { font-size: 38px; line-height: 1; }
.popup-body { flex: 1; position: relative; background: var(--cream); padding: 30px 40px; }
.popup-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--green); cursor: pointer; z-index: 2; }
.popup-head .popup-close { display: none; color: var(--cream); }
.popup-body > div > p:first-child { font-size: 17px; color: var(--muted); margin-bottom: 16px; }
.popup .signup { max-width: 560px; margin-top: 0; }
.popup-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.popup [data-mode-enquire] { display: none; }
.popup[data-mode="enquire"] [data-mode-enquire] { display: revert; }
.popup[data-mode="enquire"] form[data-mode-enquire] { display: grid; }
.popup[data-mode="enquire"] [data-mode-signup] { display: none; }
.enquiry { grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; align-items: end; padding-right: 40px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.field textarea { resize: vertical; min-height: 46px; }
.field-wide { grid-column: span 2; }
.enquiry .pill { min-height: 46px; }
.popup-done { display: none; padding: 20px 0; }
.popup.-done .popup-body > div[data-mode-signup], .popup.-done .enquiry { display: none !important; }
.popup.-done .popup-done { display: block; }
.done-title { font-family: var(--serif); font-size: 34px; color: var(--green); }

/* ---- treatment side panel ---- */
.tp-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(58, 50, 44, .35); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.tp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: 50%; max-width: 760px; background: var(--cream); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .45s var(--ease-horizon), box-shadow .45s; }
.tp-panel.-open { box-shadow: -24px 0 60px rgba(58, 50, 44, .25); }
body.tp-open { overflow: hidden; }
body.tp-open .tp-scrim { opacity: 1; pointer-events: auto; }
.tp-panel.-open { transform: none; }
.tp-close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--green); cursor: pointer; z-index: 2; }
.tp-in { padding: 56px 48px 64px; }
.tp { display: grid; gap: 22px; }
.tp .eyebrow { color: var(--gold-ink); margin-bottom: 0; }
.tp-title { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: .95; color: var(--green); }
.tp-lead { font-size: 18px; line-height: 1.6; color: var(--muted); }
.tp-media { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--stone); }
.tp-media img, .tp-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp-gallery figure, .tp-results figure { margin: 0; border-radius: 10px; overflow: hidden; background: var(--stone); }
.tp-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tp-gallery figcaption, .tp-results figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); padding: 8px 10px 10px; }
.tp-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-results img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; }
.tp-media-icon { display: grid; place-items: center; }
.tp-media-icon .pillar-art { width: 140px; height: 140px; }
.tp-spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tp-spec li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tp-spec li span:first-child { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); padding-top: 2px; }
.tp-note { font-size: 15px; color: var(--muted); background: var(--stone); border-radius: 8px; padding: 14px 18px; }
.tp-offer { display: grid; gap: 4px; border: 1px solid var(--gold-line); border-radius: 10px; padding: 18px 22px; }
.tp-offer strong { font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--green); line-height: 1; }
.tp-block { display: grid; gap: 12px; margin-top: 10px; }
.tp-menu { list-style: none; margin: 0; padding: 0; }
.tp-menu li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.tp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; }
.tp-name { font-weight: 500; color: var(--green); }
.tp-dur { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tp-price { font-family: var(--serif); font-size: 21px; color: var(--green); text-align: right; font-variant-numeric: lining-nums; }
.tp-desc { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.tp-book { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; }
.tp-book a, .tp-book button { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; font-size: 14px; color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }
.tp-book a::after, .tp-book button::after { content: ' \2192'; }
.tp-book a:hover, .tp-book button:hover { color: var(--green); }
.tp-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.tp-faq summary { cursor: pointer; font-family: var(--serif); font-size: 22px; color: var(--green); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.tp-faq summary::after { content: '+'; color: var(--gold-ink); }
.tp-faq details[open] summary::after { content: '–'; }
.tp-faq p { font-size: 15px; color: var(--muted); margin-top: 8px; }
.tp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.tp-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-pairs a { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--green); transition: background .3s; }
.tp-pairs a:hover { background: var(--stone); }
.tp-pairs a::after { content: '→'; margin-left: auto; font-family: var(--sans); font-size: 16px; color: var(--gold-ink); }
.tp-pairs img, .tp-pair-icon { flex: none; width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 8px; background: var(--stone); display: grid; place-items: center; }
.tp-pair-icon .pillar-art { width: 44px; height: 44px; }
/* the same content as a page of its own */
.tp-page { max-width: 820px; margin: 0 auto; padding: 40px 5.5% 80px; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 10px; margin-bottom: 26px; }
.crumbs a { border-bottom: 1px solid var(--line); }

@media (max-width: 1024px) {
  .tcards-head { align-items: center; text-align: left; }
  .steps4 { grid-template-columns: 1fr 1fr; gap: 26px 22px; }
  .tp-panel { width: 78%; }
  .popup-head { width: 34%; min-width: 0; }
  .enquiry { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .tcards { padding: 52px 0 48px; }
  .tcards-head h2 { font-size: 42px; }
  .tcards-nav { display: none; }
  .tcard { flex-basis: 76vw; }
  .first-visit { padding: 52px 8%; }
  .first-head h2 { font-size: 42px; }
  .steps4 strong { font-size: 24px; }
  .first-offer { flex-direction: column; text-align: center; padding: 24px; }
  .map-foot { flex-direction: column; text-align: center; }
  .closing-card { min-height: 340px; }
  .closing-copy h2 { font-size: 44px; }
  .tp-panel { width: 100%; max-width: none; }
  .tp-in { padding: 24px 20px 48px; }
  .tp-title { font-size: 44px; }
  .tp-spec li { grid-template-columns: 1fr; gap: 4px; }
  .popup-panel { flex-direction: column; max-height: 88vh; }
  .popup-head { width: 100%; flex-direction: row; align-items: center; padding: 16px 20px; gap: 12px; }
  .popup-head img { width: 32px; }
  .popup-head .eyebrow { display: none; }
  .popup-head h2 { font-size: 28px; }
  .popup-head .popup-close { display: block; position: static; margin-left: auto; }
  .popup-body .popup-close { display: none; }
  .popup-body { padding: 18px 20px 24px; overflow-y: auto; }
  .enquiry { grid-template-columns: 1fr; padding-right: 0; }
  .field-wide { grid-column: auto; }
  .popup .signup { flex-direction: row; }
}
@media (max-width: 650px) {
  /* the pop-up's signup gets the holding page's own phone pill (as .hero/.journey .signup) */
  .popup .signup { flex-direction: row; align-items: stretch; gap: 0; min-height: 56px; border: 1px solid var(--line); border-radius: 40px; background: var(--cream); padding: 3px; }
  .popup .signup input { width: 0; flex: 1; min-height: 48px; padding: 10px 13px; border: 0; background: transparent; font-size: 16px; border-radius: 32px; }
  .popup .signup button { min-width: 0; flex: 0 0 47%; padding: 10px 8px; min-height: 48px; font-size: 13px; border: 0; border-radius: 32px; background: var(--green); color: var(--cream); }
}

/* ---- pop-up v2 (28 Sep): the full enquiry form, with a close button on desktop ---- */
.popup-body .popup-close-body { display: block; }
.popup-head .popup-sub { font-size: 14px; line-height: 1.5; color: rgba(250, 248, 244, .8); margin-top: 12px; }
.popup .enquiry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; padding-right: 44px; }
.popup .enquiry [hidden] { display: none !important; }
.field-full { grid-column: 1 / -1; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; padding: 0; }
.chips legend span { font-weight: 400; opacity: .8; margin-left: 6px; letter-spacing: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 40px; font-size: 14px; background: #fff; color: var(--green); transition: background .25s, color .25s, border-color .25s; }
.chips input:checked + span { background: var(--green); color: var(--cream); border-color: var(--green); }
.chips input:checked + span::before { content: '✓'; margin-right: 8px; font-size: 12px; }
.chips input:focus-visible + span { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.consent { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; accent-color: var(--green); }
.form-error { grid-column: 1 / -1; font-size: 14px; color: var(--copper); }
.popup-body { max-height: min(78vh, 640px); overflow-y: auto; }
@media (max-width: 1024px) { .popup .enquiry { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .popup-body .popup-close-body { display: none; }
  .popup-head .popup-sub { display: none; }
  .popup .enquiry { grid-template-columns: 1fr; padding-right: 0; }
  .popup-body { max-height: none; }
  .chips label span { min-height: 38px; padding: 7px 14px; font-size: 13px; }
}

/* ---- 28 Sep: logo rule (full logo where there is room, icon mark when tight); pop-up at mid widths ---- */
.chips { min-width: 0; min-inline-size: 0; }
.popup-head .popup-logo { width: 150px; height: auto; }
.popup-head .popup-mark { display: none; }
.menu-logo { width: 150px; height: auto; margin-bottom: 18px; }
@media (max-width: 1100px) {
  .popup-panel { flex-direction: column; max-height: 90vh; }
  .popup-head { width: 100%; min-width: 0; flex-direction: row; align-items: center; padding: 16px 24px; gap: 14px; }
  .popup-head .popup-logo { display: none; }
  .popup-head .popup-mark { display: block; width: 36px; }
  .popup-head .eyebrow, .popup-head .popup-sub { display: none; }
  .popup-head h2 { font-size: 30px; }
  .popup-head .popup-close { display: block; position: static; margin-left: auto; color: var(--cream); }
  .popup-body .popup-close-body { display: none; }
  .popup-body { max-height: none; overflow-y: auto; padding: 20px 24px 26px; }
  .popup .enquiry { padding-right: 0; }
}

/* ============================================================
   CARD SYSTEM (branch card-system, 28 Sep). Below the hero: rounded cards, 16px gaps,
   5.5% side margins, ivory and stone alternating. A "+" always opens a side panel.
   ============================================================ */
.g-ivory { background: var(--cream); }
.g-stone { background: var(--stone); }
.duo-wrap { padding: 56px 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 5.5%; }
.ocard { flex: none; width: auto; aspect-ratio: 4 / 3; }
.ocard .tcard-foot strong { font-size: 34px; }
.way-card { aspect-ratio: 5 / 4; }
.way-card::after { background: linear-gradient(180deg, rgba(58, 50, 44, .1) 20%, rgba(58, 50, 44, .88)); }
.way-copy { position: absolute; left: 32px; right: 32px; bottom: 30px; color: var(--cream); }
.way-copy .eyebrow { color: var(--linen); margin-bottom: 10px; }
.way-copy h3 { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1; margin: 0 0 12px; }
.way-copy p:not(.eyebrow) { font-size: 16px; opacity: .9; margin-bottom: 20px; max-width: 420px; }
.way-copy .outline-button { margin-top: 0; }
.pill-light { background: var(--cream); color: var(--green); border-color: var(--cream); }
.pill-light:hover { background: #fff; }
.tcards-head .outline-pill { flex: none; }
.intro { background: var(--cream); }

/* Instagram: rounded tiles, left-aligned head like the other sections */
/* Instagram row: 3:4 tiles (the profile grid ratio) in the shared arrow track, one size up from the treatment cards. */
.insta { text-align: left; }
.insta .tcards-head h2 { overflow-wrap: anywhere; }
.tcards-side { display: flex; align-items: center; gap: 16px; flex: none; }
.insta-tile { flex-basis: clamp(280px, 26vw, 400px); aspect-ratio: 3 / 4; }
.insta-tile::after { background: rgba(17, 17, 17, 0); transition: background .3s; }
.insta-tile:hover::after { background: rgba(17, 17, 17, .12); }
.insta-head h2 a { text-decoration: none; }

/* Find us: one location card */
.find { padding: 72px 0; }
/* Location card: the map's height is capped so the address copy cannot stretch it (28 Sep: at 1900px wide the map
   zoomed to a huge Feering label and the entrance photo cropped to a sliver); the illustration fits rather than crops;
   the photo cell is wide enough for the whole A-board; Get directions lives in the address column, clear of the pop-up. */
.loc-card { margin: 0 5.5%; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 12px; overflow: hidden; background: var(--linen); color: var(--cream); }
.loc-side { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.loc-side img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; min-height: 360px; }
.loc-details .pill { justify-self: start; margin-top: 6px; }
.loc-details { padding: 28px 26px; display: grid; gap: 10px; align-content: center; font-size: 15px; line-height: 1.5; color: rgba(250, 248, 244, .88); }
.loc-details h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--cream); }
.loc-hours { font-size: 13px; color: var(--linen); }
.loc-map { position: relative; display: grid; min-height: 0; }
.loc-map svg { width: 100%; height: 100%; display: block; }

/* Closing row: first visit card plus gift vouchers card */
.closing-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 56px 5.5% 72px; }
.closing-row .closing-card { min-height: 0; aspect-ratio: auto; }
.closing-row .ocard { aspect-ratio: auto; min-height: 360px; }

/* panel extras for the offers */
.tp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-ticks li { position: relative; padding-left: 26px; font-size: 16px; color: var(--ink); }
.tp-ticks li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 12px; height: 6px; border-left: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink); transform: rotate(-45deg); }
.tp-timeline { list-style: none; margin: 0; padding: 0; }
.tp-timeline li { display: grid; gap: 4px; padding: 14px 0 14px 20px; border-left: 1px solid var(--gold-line); position: relative; }
.tp-timeline li::before { content: ''; position: absolute; left: -5px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.tp-timeline .when { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.tp-timeline strong { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--green); }
.tp-timeline li > span:last-child { font-size: 15px; color: var(--muted); }
.tp-quote { font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--green); margin: 8px 0; }
.tp-story p { font-size: 16px; line-height: 1.65; color: var(--muted); }

@media (max-width: 1024px) {
  .loc-card { grid-template-columns: 1fr; }
  .loc-map { min-height: 260px; }
  .closing-row { grid-template-columns: 1fr; }
  .tcards-head { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .duo { grid-template-columns: 1fr; }
  .ocard, .way-card { aspect-ratio: 4 / 3.4; }
  .way-card { aspect-ratio: 4 / 4.6; }
  .way-copy { left: 22px; right: 22px; bottom: 22px; }
  .way-copy h3 { font-size: 34px; }
  .ocard .tcard-foot strong { font-size: 28px; }
  .loc-side { grid-template-columns: 1fr; }
  .loc-side img { min-height: 0; aspect-ratio: 4 / 3; }
  .closing-row .ocard { min-height: 300px; }
  .tcards-head .outline-pill { width: 100%; }
}

/* icon cards always contrast with their section */
.g-ivory .tcard-icon { background: var(--stone); }
.g-stone .tcard-icon { background: var(--cream); }

@media (max-width: 480px) { .tp-pairs { grid-template-columns: 1fr; } }

/* Full-bleed at every width (28 Sep). The holding page framed .site with 18-24px margins on a
   beige body; with a sticky header and card layout that reads as a stray border. */
body { background: var(--cream); }
.site { margin: 0 !important; max-width: none; }


/* ============================================================
   COLOUR PASS (28 Sep): where her palette goes
   ============================================================ */
body { background: var(--ivory); color: var(--charcoal); }
/* Eucalyptus: the khaki/olive she asked for, on eyebrows across light sections */
.eyebrow { color: var(--eucalyptus-ink); }
.g-forest .eyebrow, .way-copy .eyebrow, .closing-copy .eyebrow, .popup-head .eyebrow, .tcard .eyebrow { color: var(--linen); }
/* Linen: a third ground, warm cream, for the people and the finish */
.g-linen { background: var(--linen); }
/* Sage (7%): icon cards and the "+" circles on light cards */
.g-ivory .tcard-icon, .g-stone .tcard-icon, .g-linen .tcard-icon { background: var(--sage); color: var(--forest); }
.tcard-icon .plus { border-color: var(--forest); }
.tcard-icon .tcard-foot span span { color: var(--forest); opacity: .85; }
.chips input:checked + span { background: var(--forest); }
.steps4 li { border-top-color: var(--sage); }
/* Clay: the brown she asked for, on the people and celebration sections */
.warm .eyebrow { color: var(--clay-ink); }
.warm .tcard:not(.tcard-icon) .plus { background: var(--clay); border-color: var(--clay); color: var(--ivory); }
/* Photo cards: a neutral Charcoal fade, not forest, so forest stays near her 10% */
.tcard::after { background: linear-gradient(transparent 45%, rgba(48, 42, 38, .82)); }
.way-card::after { background: linear-gradient(180deg, rgba(48, 42, 38, .05) 20%, rgba(48, 42, 38, .85)); }
.closing-card::after { background: rgba(48, 42, 38, .5); }
/* Find us: the location card moves from forest to Linen */
.loc-card { background: var(--linen); color: var(--charcoal); }
.loc-details { color: var(--taupe-ink); }
.loc-details h3 { color: var(--forest); }
.loc-hours { color: var(--clay-ink); }
/* form borders: Taupe, which meets the 3:1 boundary contrast (Sage alone does not) */
.field input, .field select, .field textarea { border-color: var(--taupe); }
.form-error { color: var(--copper); }
/* text on the dark header and pop-up head */
.site-header, .book-btn { color: var(--ivory); }
.popup-head .popup-sub { color: var(--linen); }

.tcard-icon::after, .tcard-all::after { background: none !important; }
.tcard-all { background: var(--forest); }


/* ============================================================
   BACKGROUNDS PER HER RULE (28 Sep): "Backgrounds and surfaces: Aurora Ivory and Aurora Stone",
   60% Ivory, 20% Stone. Every section sits on Ivory; Stone is a surface (cards, the location card,
   the first-visit box, panels, notes); Linen is not a background. Sections are separated by a thin
   inset hairline instead of a change of colour.
   ============================================================ */
main > section { position: relative; background: var(--ivory); }
/* no rule between sections since 21 Oct (Dan): ivory runs on, as Hill Clinic; the arch edges only where the ground changes */
/* Stone surfaces */
.g-ivory .tcard-icon, .tcard-icon { background: var(--stone); color: var(--forest); }
.tcard-icon .plus { border-color: var(--sage); }
.first-offer { background: var(--stone); border-color: transparent; }
.loc-card { background: var(--stone); }
.tp-media, .tp-note { background: var(--stone); }
/* Sage stays small: the "+" circles on light cards and the step hairlines */
.tcard-icon:hover .plus { background: var(--sage); color: var(--forest); border-color: var(--sage); }


/* ============================================================
   STRICT PALETTE (Dan, 28 Sep): only her five primary colours, plus white and black.
   Ivory #FAF8F4, Stone #E7E1D7, Forest #4A4038, Sage #9F9883, Gold #C5A46D; black #111 for text on
   light backgrounds; white/ivory for text on dark. Headings Forest (her rule). Gold is decoration and
   button fill only (Gold with black text = 9:1; Gold can never carry white or be text on light).
   Secondary text is black at reduced opacity (still black). Hairlines Sage.
   ============================================================ */
:root {
  --black: #111111;
  --ink: var(--black); --charcoal: var(--black);
  --muted: rgba(17, 17, 17, .72);
  --line: var(--sage);
  --eucalyptus-ink: var(--black); --taupe-ink: rgba(17, 17, 17, .72); --clay-ink: var(--black);
  --gold-ink: var(--forest); --gold-line: var(--gold);
  --champagne: var(--gold); --copper: var(--forest); --bronze: var(--gold);
}
body, p, li, dd, .lede, .small { color: inherit; }
body { color: var(--black); }
h1, h2, h3, .tp-title, .display { color: var(--forest); }
.eyebrow, .warm .eyebrow, .tp .eyebrow { color: var(--black); }
/* dark areas: ivory text, gold decoration */
.site-header, .hero, .hero h1, .hero-sub, .opening, .g-forest, .popup-head, .popup-head h2, .way-copy, .way-copy h3, .closing-copy, .closing-copy h2,
.tcard, .tcard-foot strong, .image-panel { color: var(--ivory); }
.hero .eyebrow, .way-copy .eyebrow, .closing-copy .eyebrow, .popup-head .eyebrow, .tcard .eyebrow { color: var(--ivory); }
.tcard-icon, .tcard-icon .tcard-foot strong, .tcard-icon .tcard-foot span span { color: var(--forest); }
/* buttons: Forest on light; Gold with black text on dark */
.pill { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.pill:hover { background: var(--black); border-color: var(--black); }
.pill-gold, .hero .signup button, .popup-head ~ * .pill-gold { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 500; }
.pill-gold:hover, .hero .signup button:hover { background: var(--ivory); border-color: var(--ivory); color: var(--black); }
.pill-light { background: var(--ivory); color: var(--black); }
.outline-pill { color: var(--forest); border-color: var(--forest); }
@media (max-width: 1024px) { .hero .signup button { background: var(--gold) !important; color: var(--black) !important; } }
/* "+" circles: Sage on light cards, Ivory outline on photos, Gold on warm sections */
.plus { border-color: rgba(250, 248, 244, .75); }
.warm .tcard:not(.tcard-icon) .plus { background: var(--gold); border-color: var(--gold); color: var(--black); }
.tcard-icon .plus, .arrow { border-color: var(--sage); color: var(--forest); }
/* photo fades in black, not a tinted colour */
.tcard::after { background: linear-gradient(transparent 45%, rgba(17, 17, 17, .78)); }
.way-card::after { background: linear-gradient(180deg, rgba(17, 17, 17, .05) 20%, rgba(17, 17, 17, .82)); }
/* numbers, labels and small type: black or forest, never gold text */
.steps4 .n, .first-steps li::before { color: var(--forest); }
.steps4 li { border-top-color: var(--sage); }
.tp-spec li span:first-child, .loc-hours, .tp-timeline .when { color: var(--forest); }
.tp-faq summary::after { color: var(--forest); }
.tp-timeline li { border-left-color: var(--gold); }
.tp-ticks li::before { border-color: var(--gold); }
.done-title { color: var(--forest); }
.form-error { color: var(--black); font-weight: 600; }
/* form boundaries need 3:1: black at 45% */
.field input, .field select, .field textarea, .chips label span { border-color: rgba(17, 17, 17, .45); }
.chips label span { color: var(--black); }
.chips input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.consent input, .popup .consent { accent-color: var(--forest); }
.pending { background: rgba(197, 164, 109, .22); border-bottom-color: var(--forest); }
.pending::after { color: var(--forest); }
.footer-social { color: var(--gold); }
.crumbs, .crumbs a { color: var(--black); }

/* ---- the closing band: her text-over-image treatment, once per page ---- */
.band { position: relative; min-height: 560px; display: grid; place-items: center; text-align: center; isolation: isolate; overflow: hidden; background: var(--black); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(17, 17, 17, .42); } /* was .6; Pastel #6, 29 Sep */
main > section.band::before, .band + footer::before { display: none; }
.band-copy { display: grid; justify-items: center; gap: 0; padding: 80px 24px; color: var(--ivory); }
.band-rule { display: block; height: 1px; background: var(--gold); }
.band-rule-s { width: 56px; margin-bottom: 10px; }
.band-rule-l { width: 150px; }
.band-text { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.75; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); margin: 34px 0; }
.band-btn { margin-top: 40px; }
@media (max-width: 767px) { .band { min-height: 460px; } .band-text { font-size: 20px; letter-spacing: .16em; margin: 26px 0; } }

/* ---- Huntsman card behaviour (28 Sep): title only; hover (desktop) or first tap (touch) reveals the
   description above the title; click again opens the panel. Keeps every title on one baseline. ---- */
.tcard-foot { align-items: center; }
.tcard-foot > span:first-child { display: flex; flex-direction: column-reverse; }
.tcard-foot span span {
  max-height: 0; opacity: 0; margin: 0; overflow: hidden; transform: translateY(8px);
  transition: max-height .5s var(--ease-horizon), opacity .5s, transform .5s var(--ease-horizon), margin .5s;
}
.tcard:hover .tcard-foot span span, .tcard:focus-visible .tcard-foot span span, .tcard.active .tcard-foot span span {
  max-height: 120px; opacity: 1; transform: none; margin: 0 0 8px;
}
.tcard .plus { transition: transform .4s var(--ease-horizon), background .3s, color .3s; }
.tcard:hover .plus { transform: rotate(45deg); } /* .active no longer rotates it: active now means 'caption shown', not 'tap again' (28 Sep) */
.tcard:not(.tcard-icon)::after { transition: background .5s; }
.tcard:not(.tcard-icon):hover::after, .tcard:not(.tcard-icon).active::after { background: linear-gradient(to top, rgba(17,17,17,.88) 0%, rgba(17,17,17,.6) 45%, transparent 85%); }
/* the two "ways" cards: title and button always, the sentence on hover */
.way-copy p:not(.eyebrow) { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height .5s var(--ease-horizon), opacity .5s, margin .5s; }
.way-card:hover .way-copy p:not(.eyebrow), .way-card.active .way-copy p:not(.eyebrow) { max-height: 80px; opacity: 1; margin: 0 0 18px; }
.way-copy h3 { margin-bottom: 18px; }
@media (hover: none) { .way-copy p:not(.eyebrow) { max-height: 80px; opacity: 1; margin: 0 0 18px; } }

/* imagery audit 28 Sep: first-visit photo stacks under the steps on phones; panel galleries go two-up */
@media (max-width: 900px) {
  .first-wrap { grid-template-columns: 1fr; gap: 32px; }
  .first-photo { max-width: 420px; margin: 0 auto; }
  .tp-gallery { grid-template-columns: 1fr 1fr; }
  .tp-gallery figure:nth-child(3) { grid-column: 1 / -1; }
  .tp-gallery figure:nth-child(3) img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) { .insta-tile { flex-basis: 62vw; } }

/* Mobile text pass (Dan, 28 Sep): centred wherever the block is a title, a lead or a note. Cards, menus, the
   panels and the enquiry form stay left-aligned; centring those would fight the reading order. */
@media (max-width: 767px) {
  .intro-top, .intro-copy { text-align: center; }
  .intro-copy p { margin-left: auto; margin-right: auto; }
  .tcards-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .tcards-head .inside-lead { margin-left: auto; margin-right: auto; }
  .tcards-head .outline-pill { width: auto; }
  .tcards-side { justify-content: center; }
  .first-head, .steps4 li, .first-photo figcaption { text-align: center; }
  .steps4 li { border-top: 0; border-bottom: 1px solid var(--gold-line); padding: 0 0 18px; }
  .steps4 li:last-child { border-bottom: 0; }
  .words { text-align: center; }
  .loc-details { text-align: center; justify-items: center; }
  .loc-details .pill { justify-self: center; }
  .band-copy, .site-footer { text-align: center; }
  .tp-cta { justify-content: center; }
}

/* Dan's mobile review, 28 Sep: the hero copy uses the same measure as the intro (the holding page capped it at 295px);
   the address column reads at body size, not 14px */
@media (max-width: 650px) {
  .hero h1 { max-width: none; }
  .hero-sub { max-width: none; margin-left: 0; margin-right: 0; font-size: 18px; line-height: 1.45; }
  .hero-copy { padding-left: 25px; padding-right: 25px; }
  .intro { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 767px) {
  .loc-details { font-size: 16px; line-height: 1.55; gap: 14px; padding: 30px 24px 34px; }
  .loc-details h3 { font-size: 34px; }
  .loc-hours { font-size: 14px; }
}

/* Quote cards (28 Sep): the clients' words row uses the card track like every other row */
.words { padding-bottom: 64px; }
.qcard { display: flex; flex-direction: column; justify-content: space-between; background: var(--stone); color: var(--green); padding: 28px 26px 24px; margin: 0; }
.qcard::after { display: none; }
.qcard .dialog-arch { margin: 0 0 18px; width: 56px; height: 22px; }
.qcard blockquote { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.08; text-wrap: pretty; }
.qcard figcaption { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-top: 20px; }
.g-ivory .qcard { background: var(--stone); }

/* First visit on phones (28 Sep): one column, the numeral large on the left, title and line beside it */
@media (max-width: 767px) {
  .steps4 { grid-template-columns: 1fr; gap: 0; }
  .steps4 li { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 6px; align-items: start; text-align: left; padding: 20px 0; border-top: 0; border-bottom: 1px solid var(--gold-line); }
  .steps4 li:last-child { border-bottom: 0; }
  .steps4 .n { grid-row: 1 / span 2; font-size: 44px; line-height: .9; padding-top: 2px; }
  .steps4 strong { font-size: 26px; }
  .steps4 li > span:last-child { font-size: 15px; }
  .qcard { flex-basis: 76vw; }
  .qcard blockquote { font-size: 30px; }
}

/* The map: one drawing, two crops (28 Sep). `.loc-map svg` sets display, so these need the parent for specificity. */
.loc-map .map-phone-svg, .map-phone { display: none; }
@media (max-width: 767px) {
  .loc-map .map-desk-svg, .map-desk { display: none; }
  .loc-map .map-phone-svg, .map-phone { display: block; }
  .loc-map { min-height: 0; }
}

/* Prose pages (privacy) */
.prose { max-width: 720px; margin: 0 auto; padding: 8px 5.5% 72px; }
.prose h1 { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: .95; color: var(--green); margin-bottom: 18px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--green); margin: 36px 0 10px; }
.prose p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.prose p + p { margin-top: 14px; }
.prose .prose-lead { font-size: 18px; color: var(--muted); }
.prose strong { font-weight: 500; color: var(--green); }
@media (max-width: 767px) { .prose h1 { font-size: 42px; } .prose h2 { font-size: 26px; } }

/* ---- PALETTE, 29 Sep 2026 (Rhianna by email and WhatsApp: "we don't have any green in anything"; the fit-out is browns,
   golds, soft taupes, blacks and a khaki brown). Forest green is retired. Bark takes its roles (header, buttons, headings,
   overlays); Khaki, sampled from her painted walls (#9f9883), takes Sage's (hairlines, outlines, map lines). Ivory, Stone
   and Gold stay. The old hex values were substituted throughout site.css, holding.css and the map; these tokens name them. */
:root {
  --forest: #4A4038; --forest-deep: #3A322C; --green: var(--forest);
  --bark: #4A4038; --bark-deep: #3A322C;
  --sage: #9F9883; --khaki: #9F9883; --taupe: #B8AEA0;
}
@media (max-width: 767px) { .insta .tcards-head h2 { font-size: 25px; letter-spacing: 0; overflow-wrap: normal; } }

/* ---- Pages from the panels (2 Oct): the treatments hub list and About's second panel ---- */
.hub-list a { display: block; color: inherit; text-decoration: none; }
.hub-list a:hover .tp-name { border-bottom: 1px solid var(--gold-line); }
.tp-page-next { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.tp-spec a { border-bottom: 1px solid var(--gold-line); color: inherit; text-decoration: none; }

/* ---- Reception hero, v2 (Dan, 21 Oct): a full-screen photo with a see-through header that turns Bark once you
   scroll, her own line ("Your little escape from everyday life", her Instagram reel 20 Oct), Book as the main button.
   No colour tint on the photo: only a soft neutral shade at the very top (so the nav reads on the pale ceiling) and the
   bottom (so the headline reads). The copy sits bottom-left over the dark counter; the lit sign stays clear above it. ---- */
html.photo-header:not(.scrolled) .site-header { background: transparent; box-shadow: none; }
html.photo-header .site-header { transition: background .4s, height .4s var(--ease-horizon), box-shadow .4s; }
.hero.hero-photo { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end;
  height: 100svh !important; min-height: 600px !important; max-height: 1000px; padding: 0 !important; background: var(--green);
  margin-top: -96px !important; }
.hero.hero-photo:after { display: block !important; content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 190px), linear-gradient(0deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.18) 32%, rgba(0,0,0,0) 52%) !important; }
.hero.hero-photo .hero-image { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 50% 45%; -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; z-index: -3; }
.hero.hero-photo .hero-copy { padding: 0 5.5% 64px !important; max-width: 780px !important; display: block; text-align: left; }
.hero.hero-photo .hero-eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); margin: 0 0 14px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero.hero-photo h1 { color: var(--ivory); font-size: 72px; line-height: .98; max-width: 660px; text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .pill-gold { color: var(--black); }
.hero-outline { color: var(--ivory); border: 1px solid rgba(250, 248, 244, .8); background: transparent; }
.hero-outline:hover { background: var(--ivory); color: var(--black); }
@media (max-width: 1180px) {
  .hero.hero-photo { margin-top: -116px !important; }
  html.photo-header:not(.scrolled) .site-header { border-radius: 0; }
}
@media (max-width: 650px) {
  .hero.hero-photo { min-height: 560px !important; }
  .hero.hero-photo .hero-image { object-position: 40% 40%; }
  .hero.hero-photo .hero-copy { padding: 0 24px 40px !important; text-align: center; max-width: none !important; }
  .hero.hero-photo h1 { font-size: 46px; max-width: 320px; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-actions a { flex: 1 1 100%; }
}
/* the email signup lives in the footer now she is open */
.footer-signup { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 520px; }
.footer-signup-title { font-family: var(--serif); font-size: 26px; margin: 0; }
.footer-signup .signup { margin-top: 0; width: 100%; }

/* ============================================================
   GROUNDS, DEPTH AND THE BOOK PROMPT (Dan, 21 Oct 2026), copied from The Hill Clinic and lit like her reception.
   - One ground, ivory. One break: Inside Aurora, her reception blurred under a warm Bark wash.
   - The arch (design.md) is the edge of that break only, with two faint gold lines for depth (Hill's rose-gold lines).
   - Depth on ivory: two soft bands a shade off the ground that ripple slowly (Hill's BgCurves; glow.js, no library).
   - Book prompt: Hill's small first-visit card (desktop) and slide-up Book bar (phones).
   ============================================================ */
:root { --glow: 197, 164, 109; --ease-glow: cubic-bezier(.45, .05, .25, 1); }

/* the dark break */
.ground-glow { position: relative; background: var(--forest); color: var(--ivory); padding: clamp(110px, 12vw, 170px) 0 clamp(110px, 12vw, 170px) !important; isolation: isolate; }
.ground-glow .glow-bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.ground-glow .glow-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(38px) saturate(.9); transform: scale(1.25); }
.ground-glow .glow-bg::after { content: ''; position: absolute; inset: 0; background: rgba(58, 50, 44, .62); }
.ground-glow h2, .ground-glow .inside-lead { color: var(--ivory); }
.ground-glow .arrow { color: var(--ivory); border-color: rgba(250, 248, 244, .6); }
.ground-glow .tcard-icon { background: rgba(250, 248, 244, .1) !important; color: var(--ivory) !important; border: 1px solid rgba(var(--glow), .35); }
.arch-edge { position: absolute; left: 0; width: 100%; height: clamp(44px, 6vw, 96px); display: block; overflow: visible; pointer-events: none; z-index: 2; }
.arch-edge-top { top: -1px; }
.arch-edge-bottom { bottom: -1px; }
.arch-edge .arch-fill { fill: var(--cream); }
.arch-edge .arch-line { fill: none; stroke: var(--gold); stroke-width: 1.6px; opacity: .55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(var(--glow), .7)); }
.arch-edge .arch-line-2 { stroke-width: 1px; opacity: .3; }
/* the section rules above can't touch the break */
.ground-glow::before { display: none !important; }

/* depth on ivory: Hill's bands */
.has-bands { position: relative; isolation: isolate; overflow: clip; }
.has-bands > :not(.bg-bands) { position: relative; z-index: 1; }
.bg-bands { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-band-1 { fill: color-mix(in srgb, var(--cream) 84%, var(--linen)); }
.bg-band-2 { fill: color-mix(in srgb, var(--cream) 91%, var(--linen)); }

/* buttons: lift, warm halo, a sweep of light (kept from the first pass) */
.pill, .outline-pill, .book-btn { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease-glow), box-shadow .6s var(--ease-glow), background .3s, color .3s, border-color .3s; }
.pill::after, .outline-pill::after, .book-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 238, 204, .55) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 1.1s var(--ease-glow);
}
.pill:hover, .outline-pill:hover, .book-btn:hover, .pill:focus-visible, .outline-pill:focus-visible, .book-btn:focus-visible {
  transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--glow), .6), 0 12px 30px -10px rgba(var(--glow), .75);
}
.pill:hover::after, .outline-pill:hover::after, .book-btn:hover::after { transform: translateX(130%); }

/* Book prompt: Hill's first-visit card */
.first-pop { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(340px, calc(100% - 32px)); padding: 26px 24px 22px; border-radius: 20px;
  background: var(--ivory); color: var(--black); box-shadow: 0 18px 50px -18px rgba(40, 32, 26, .45), 0 0 0 1px rgba(var(--glow), .35);
  opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-glow), transform .5s var(--ease-glow); }
.first-pop.-on { opacity: 1; transform: none; }
.first-pop-new { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.first-pop-title { font-family: var(--serif); font-size: 32px; line-height: 1.05; margin: .3em 0 .35em; color: var(--forest); }
.first-pop-body { font-size: 14px; line-height: 1.55; margin: 0 0 18px; opacity: .85; }
.first-pop-actions { display: flex; align-items: center; gap: 16px; }
.first-pop-actions .pill { min-height: 44px; padding: 10px 24px; font-size: 15px; }
.first-pop-later { font: inherit; font-size: 13px; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; border-bottom: 1px solid currentColor; padding: 0; }
.first-pop-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: inherit; }
.first-pop-close::before, .first-pop-close::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.first-pop-close::after { transform: rotate(-45deg); }

/* Book prompt: Hill's slide-up bar, phones only */
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: var(--forest); border-top: 1px solid rgba(var(--glow), .45); transform: translateY(110%); transition: transform .45s var(--ease-glow); }
.book-bar .pill { width: 100%; }
.book-bar.-on { transform: none; }
@media (max-width: 767px) {
  .book-bar { display: block; }
  .first-pop { left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .pill::after, .outline-pill::after, .book-btn::after { display: none; }
  .pill:hover, .outline-pill:hover, .book-btn:hover { transform: none; }
  .first-pop, .book-bar { transition: none; }
}

/* ---- Statements (Dan, 21 Oct): the three lines that carry the most weight, set large in the serif. ---- */
.statement { text-align: center; padding: clamp(70px, 9vw, 130px) 5.5%; }
.statement-mark { width: 44px; height: auto; margin: 0 auto 22px; display: block; }
.statement-line { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.08; color: var(--forest);
  max-width: 920px; margin: 0 auto; text-wrap: balance; }
.statement-actions { margin-top: 30px; display: flex; justify-content: center; }
.statement-left { text-align: left; margin: 0; max-width: 760px; }
.first-main .eyebrow, .tcards-head .eyebrow { margin: 0 0 12px; }
.tcards-head .statement-line + .inside-lead { margin-top: 14px; max-width: 620px; }
@media (max-width: 1024px) { .statement-left { text-align: center; margin: 0 auto; } }

/* Instagram mark on every post in the row (Dan, 21 Oct): says at a glance these are from her Instagram */
.insta-tile { position: relative; }
.insta-tile .ig-mark { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ivory); background: rgba(17, 17, 17, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, transform .3s; }
.insta-tile:hover .ig-mark { background: rgba(17, 17, 17, .55); transform: scale(1.06); }

/* ============================================================
   MOBILE MENU v2 (Dan, 21 Oct): an app menu. Slides in from the left (the burger's side) and back out; parent
   categories in the serif, their pages underneath in the sans, one open at a time; thin gold rules between parents.
   The page underneath is locked while it is open (html.menu-open, glow.js).
   ============================================================ */
html.menu-open, html.menu-open body { overflow: hidden; }
.menu-sheet { z-index: 120 !important; background: var(--forest) !important; color: var(--ivory) !important;
  display: grid !important; grid-template-rows: auto 1fr auto; align-items: stretch !important; justify-content: stretch !important; gap: 0 !important;
  padding: 0 !important; height: 100dvh; overflow: hidden !important; text-align: left;
  transform: translateX(0); transition: transform .42s cubic-bezier(.32, .72, 0, 1), display .42s allow-discrete;
  box-shadow: 30px 0 80px rgba(0, 0, 0, .35); }
.menu-sheet[hidden] { display: none !important; transform: translateX(-100%); }
@starting-style { .menu-sheet:not([hidden]) { transform: translateX(-100%); } }
.menu-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px 28px; border-bottom: 1px solid rgba(var(--glow), .22); }
.menu-logo { width: 150px !important; height: auto; margin: 0 !important; display: block; }
.menu-sheet .close-button { position: static !important; width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ivory); background: none; border: 0; }
.menu-groups { overflow-y: auto; overflow-x: hidden; padding: 8px 28px 20px; display: block; }
.menu-parent { border-bottom: 1px solid rgba(var(--glow), .22); }
.menu-parent > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 30px; line-height: 1.1; padding: 20px 0 18px; color: var(--ivory); }
.menu-parent > summary::-webkit-details-marker { display: none; }
.menu-plus { position: relative; width: 14px; height: 14px; flex: none; margin-right: 6px; }
.menu-plus::before, .menu-plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold); transition: transform .3s ease; }
.menu-plus::after { transform: rotate(90deg); }
.menu-parent[open] .menu-plus::after { transform: rotate(0deg); }
.menu-parent[open] > summary { color: var(--gold); }
.menu-subs { display: grid; gap: 2px; padding: 0 0 18px; }
.menu-subs a { font-family: inherit !important; font-size: 15px !important; letter-spacing: .03em; line-height: 1.4 !important; padding: 7px 0;
  color: rgba(250, 248, 244, .82); text-decoration: none; }
.menu-subs a:first-child { color: var(--ivory); }
.menu-parent-link { display: block; font-family: var(--serif) !important; font-size: 30px !important; line-height: 1.1 !important; padding: 20px 0 18px;
  color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(var(--glow), .22); }
.menu-groups a[aria-current="page"] { color: var(--gold) !important; }
.menu-actions { padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(var(--glow), .22); display: grid; gap: 10px; }
.menu-actions .pill { font-family: inherit !important; font-size: 16px !important; width: 100%; margin: 0 !important; }
.menu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-contact .outline-pill { color: var(--ivory); border-color: rgba(250, 248, 244, .55); font-size: 15px !important; font-family: inherit !important; }
.menu-hours { margin: 2px 0 0; text-align: center; font-size: 13px; color: rgba(250, 248, 244, .72); }
@media (prefers-reduced-motion: reduce) { .menu-sheet { transition: none; } }

/* ---- Articles (CMS, 21 Oct) ---- */
.article-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.article-list a { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.article-list img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.article-list strong { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--forest); }
.article-list span:last-child { font-size: 15px; line-height: 1.55; opacity: .85; }
.article-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.article-hero { width: 100%; height: auto; border-radius: 14px; margin: 18px 0 8px; }
.article-body { max-width: 680px; font-size: 17px; line-height: 1.7; }
.article-body h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 1.4em 0 .4em; }
.article-body h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 1.2em 0 .3em; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body a { color: var(--forest); border-bottom: 1px solid var(--gold-line); }
.article-back { margin-top: 36px; }

/* Buy online rows in the gift voucher and membership panels: Stripe payment links (22 Oct) */
.tp-buy .tp-row { align-items: center; }
.tp-buy-link { min-height: 40px; padding: 8px 22px; font-size: 15px; }
/* Thank-you pages after a Stripe payment */
.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }